uangcermat-web-toolkit-v2 0.2.26 → 0.2.28

package/build/index.css

@@ -351230,6 +351230,9 @@
 .text-\[10px\] {
   font-size: 10px;
 }
+.text-\[12px\] {
+  font-size: 12px;
+}
 .text-\[6px\] {
   font-size: 6px;
 }

package/build/src/components/CheckPicker/BaseInfiniteCheckPicker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime");require("../../../node_modules/react-query/es/react/setBatchUpdatesFn.js"),require("../../../node_modules/react-query/es/react/setLogger.js");var t=require("../../../node_modules/react-query/es/react/QueryClientProvider.js"),s=require("./InfiniteCheckPicker.js");const i=new(require("../../../node_modules/react-query/es/core/queryClient.js").QueryClient)({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});module.exports=function(u){var{queryClient:n=i}=u,c=e.__rest(u,["queryClient"]);return r.jsx(t.QueryClientProvider,Object.assign({client:n},{children:r.jsx(s,Object.assign({},c))}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react-query"),t=require("./InfiniteCheckPicker.js");const n=new i.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});module.exports=function(s){var{queryClient:u=n}=s,c=e.__rest(s,["queryClient"]);return r.jsx(i.QueryClientProvider,Object.assign({client:u},{children:r.jsx(t,Object.assign({},c))}))};
 //# sourceMappingURL=BaseInfiniteCheckPicker.js.map

package/build/src/components/CheckPicker/BaseInfiniteCheckPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInfiniteCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseInfiniteCheckPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { QueryClient, QueryClientProvider } from 'react-query';\n\nimport { BaseInfiniteCheckPickerInterface } from './BaseInfiniteCheckPicker.type';\nimport BaseInfiniteCheckPicker from './InfiniteCheckPicker';\n\nconst defaultQueryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false\n    }\n  }\n});\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface BaseInfiniteCheckPickerWithProviderProps<T = any>\n  extends BaseInfiniteCheckPickerInterface<T> {\n  queryClient?: QueryClient;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction BaseInfiniteCheckPickerWithProvider<T = any>({\n  queryClient = defaultQueryClient,\n  ...props\n}: BaseInfiniteCheckPickerWithProviderProps<T>) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <BaseInfiniteCheckPicker {...props} />\n    </QueryClientProvider>\n  );\n}\n\nexport default BaseInfiniteCheckPickerWithProvider;\n"],"names":["defaultQueryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","_a","queryClient","props","__rest","_jsx","QueryClientProvider","Object","assign","client","children","BaseInfiniteCheckPicker"],"mappings":"gWAMA,MAAMA,EAAqB,wEAAIC,aAAY,CACzCC,eAAgB,CACdC,QAAS,CACPC,sBAAsB,qBAY5B,SAAsDC,OAAAC,YACpDA,EAAcN,GAAkBK,EAC7BE,EAAKC,EAAAA,OAAAH,EAF4C,iBAIpD,OACEI,EAAAA,IAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAACC,OAAQP,GAC3B,CAAAQ,SAAAL,EAAAA,IAACM,EAA4BJ,OAAAC,OAAA,CAAA,EAAAL,MAGnC"}
+{"version":3,"file":"BaseInfiniteCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseInfiniteCheckPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { QueryClient, QueryClientProvider } from 'react-query';\n\nimport { BaseInfiniteCheckPickerInterface } from './BaseInfiniteCheckPicker.type';\nimport BaseInfiniteCheckPicker from './InfiniteCheckPicker';\n\nconst defaultQueryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false\n    }\n  }\n});\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface BaseInfiniteCheckPickerWithProviderProps<T = any>\n  extends BaseInfiniteCheckPickerInterface<T> {\n  queryClient?: QueryClient;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction BaseInfiniteCheckPickerWithProvider<T = any>({\n  queryClient = defaultQueryClient,\n  ...props\n}: BaseInfiniteCheckPickerWithProviderProps<T>) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <BaseInfiniteCheckPicker {...props} />\n    </QueryClientProvider>\n  );\n}\n\nexport default BaseInfiniteCheckPickerWithProvider;\n"],"names":["defaultQueryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","_a","queryClient","props","__rest","_jsx","QueryClientProvider","Object","assign","client","children","BaseInfiniteCheckPicker"],"mappings":"wJAMA,MAAMA,EAAqB,IAAIC,EAAAA,YAAY,CACzCC,eAAgB,CACdC,QAAS,CACPC,sBAAsB,qBAY5B,SAAsDC,OAAAC,YACpDA,EAAcN,GAAkBK,EAC7BE,EAAKC,EAAAA,OAAAH,EAF4C,iBAIpD,OACEI,EAAAA,IAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAACC,OAAQP,GAC3B,CAAAQ,SAAAL,EAAAA,IAACM,EAA4BJ,OAAAC,OAAA,CAAA,EAAAL,MAGnC"}

package/build/src/components/CheckPicker/InfiniteCheckPicker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),l=require("../../../node_modules/classnames/index.js"),s=require("react");require("../../../node_modules/react-query/es/react/setBatchUpdatesFn.js"),require("../../../node_modules/react-query/es/react/setLogger.js");var r=require("../../../node_modules/react-query/es/react/QueryClientProvider.js"),a=require("../../hooks/useDebounce.js"),n=require("../../hooks/useInfinitePicker.js"),o=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var i=require("../Text/BaseText.js");require("../Text/Text.js");var d=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var c=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var u=require("../Checkbox/Checkbox.js"),x=require("../Icon/Icon.js"),f=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),m=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=function({fetchFn:g,queryKey:h,debounceMs:j=300,disabled:p=!1,pageSize:v=100,value:w,valueStyles:y,label:k,labelStyles:S,placeholder:N,placeholderStyles:q,containerStyles:C,activeContainerStyles:M,iconStyles:B,itemsContainerStyles:O,itemContainerStyles:R,oddBgColor:L,evenBgColor:F,isDisabled:T=!1,position:I="bottom-start",isAutoFlip:G,onSelectItem:_,onClean:E,isCleanable:D,isError:P,errorMessage:A,errorMessageStyles:z,helperMessage:$,helperMessageStyles:K,isSearchable:Q,searchContainerStyles:H,activeSearchStyles:U,searchPlaceholder:J,searchStyles:V,iconSearchStyles:W,isShowFooterButton:X,footerButtonContainerStyles:Y,footerButtonLabel:Z,onClickFooterButton:ee,noResultsLabel:te,noResultsLabelStyles:le,badgeContainerStyles:se,badgeLabelStyles:re,variant:ae="box",data:ne,isRequired:oe,labelRequired:ie,labelRequiredStyles:de,containerRequiredStyles:ce,onSearch:ue,selectedAllText:xe,isShowSelectedAllText:fe=!0,isShowUnmatchItem:be=!0,selectedAllTextStyles:me,activeCheckboxColor:ge,itemTextStyles:he,listContainerStyles:je,isClearSearchOnClose:pe,selectedItemTextStyles:ve,activeItemTextStyles:we,maxSelected:ye}){const ke=r.useQueryClient(),Se=s.useRef(null),Ne=s.useRef(null),[qe,Ce]=s.useState(""),Me=a.useDebounce(qe,j),[Be,Oe]=s.useState(0),[Re,Le]=s.useState(!1),Fe=s.useRef(null),[Te,Ie]=s.useState(!1),{data:Ge,isLoading:_e,isFetchingNextPage:Ee,hasNextPage:De,fetchNextPage:Pe,totalCount:Ae}=n.useInfinitePicker({fetchFn:g,queryKey:h,search:Me,pageSize:v,enabled:!p});console.log("dataInfinite length",Ae);const ze=s.useMemo((()=>Ge||[]),[Ge]);s.useEffect((()=>{const e=null==w?void 0:w.filter((e=>e));(null==e?void 0:e.length)>=ye?Le(!0):Le(!1)}),[w,ye]);const $e=s.useCallback(((e,t)=>{if(Re&&!t)return;let l=w.slice();l=t?l.filter((t=>t!==e)):l.concat(e),null==_||_(l.filter((e=>""!==e))),l.length===ye?Le(!0):Le(!1)}),[Re,w,_,ye]),Ke=s.useCallback((()=>{null==_||_([]),Ce(""),Le(!1),null==E||E()}),[_,E]),Qe=(t,s)=>e.jsx(b.ListboxOption,Object.assign({className:f.twMerge(l.default("relative cursor-default select-none list-none",o(R,"p-"),o(R,"px-"),o(R,"py-"))),value:t},{children:({active:r})=>{const a=w.some((e=>e===t.value));return e.jsx("div",Object.assign({className:f.twMerge(l.default("w-full flex items-center !min-h-[32px] p-2",R,(!!o(R,"p-")||!!o(R,"px-")||!!o(R,"py-"))&&"p-2")),style:{backgroundColor:s%2==0?L||"var(--dropdownList-background-odd)":F||"var(--dropdownList-background-even)"}},{children:e.jsxs("div",Object.assign({className:f.twMerge("flex flex-row items-center gap-x-2 cursor-pointer w-full",Re&&!a?"cursor-not-allowed":""),onClick:e=>{e.preventDefault(),$e(t.value,a)}},{children:[e.jsx(u,{checked:a,variant:"small",color:ge||void 0,isDisabled:Re&&!a}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(i.default,{label:t.label,className:f.twMerge(l.default("text-xs text-dropdownList-text-default leading-[14px]",`${r&&!Re?f.twMerge("font-semibold text-dropdownList-text-hover",we):"font-normal"}`),a&&ve,he)})}))]}))}))}}),`${t.value}-${s}`);s.useEffect((()=>{ue&&ue(qe)}),[qe]),s.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)Oe(t.contentRect.width)}));return Se.current&&e.observe(Se.current),()=>{Se.current&&e.unobserve(Se.current)}}),[]),s.useEffect((()=>{const e=Fe.current,t=Ne.current;if(!e||!t||!De||Ee)return;const l=new IntersectionObserver((e=>{var t;(null===(t=e[0])||void 0===t?void 0:t.isIntersecting)&&De&&!Ee&&Pe()}),{root:t,rootMargin:"50px",threshold:.1});return l.observe(e),()=>{l.disconnect()}}),[De,Ee,Pe,ze.length]);const He=!o(C,"w-")||"w-full"===o(C,"w-")||!o(O,"w-")||"w-full"===o(O,"w-"),Ue=()=>w&&w.length>0&&!(1===w.length&&""===w[0]);return e.jsx(b.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({ref:Se,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!k&&e.jsx(i.default,{label:k,className:f.twMerge("font-normal text-dark-gumbo text-[10px]",S)}),oe&&e.jsx(d,{labelRequired:ie,labelRequiredStyles:de,containerRequiredStyles:ce})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:I,flip:G},{children:[e.jsx(b.ListboxButton,Object.assign({className:f.twMerge(l.default("p-0 bg-transparent",T&&"cursor-not-allowed"),ce?o(C,"w-"):void 0),onClick:e=>{T&&e.preventDefault()}},{children:({open:t})=>e.jsxs("div",Object.assign({className:f.twMerge(l.default(f.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",C),"line"===ae&&"border-b border-t-0 border-x-0 rounded-none",t&&M?M:t?"border-fields-border-focus":void 0,T&&"border-dark-bermudaGray bg-light-whiteSmoke",P&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!N&&!Ue()&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(i.default,{label:N,variant:"small",className:f.twMerge(l.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),q)})})),Ue()?e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:w.length===Ae&&fe?e.jsx(i.default,{label:xe||"All",variant:"small",className:f.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),me)}):e.jsx(i.default,{label:be?w.map((e=>{var t;return(null===(t=ze.find((t=>t.value===e)))||void 0===t?void 0:t.label)||e})).join(", "):ze.filter((e=>w.includes(e.value))).map((e=>e.label||e)).join(", "),variant:"small",className:f.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),y)})})):null]})),Ue()&&e.jsx("div",Object.assign({className:f.twMerge("flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]",se)},{children:e.jsx(i.default,{label:w.length.toString(),className:f.twMerge(l.default("font-normal text-[8px] leading-3"),re)})})),D&&Ue()&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),Ke()}},{children:e.jsx(x,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(x,{name:t?"chevronup":"chevrondown",className:f.twMerge(l.default("fill-dark-bermudaGray w-3 h-3",`${T&&"fill-dark-bermudaGray"}`),B)})]}))})),e.jsx(m.Transition,Object.assign({as:s.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(b.ListboxOptions,Object.assign({className:f.twMerge(l.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver bg-white z-50",C?o(C,"w-"):void 0),O),style:{width:He?Be:void 0,height:"auto"}},{children:({open:t})=>(s.useEffect((()=>{!t&&pe&&Ce("")}),[t]),s.useEffect((()=>{if(t&&!Te){const e=[...h,Me];ke.resetQueries(e),Ie(!0),Ne.current&&(Ne.current.scrollTop=0)}else!t&&Te&&Ie(!1)}),[t]),e.jsxs(e.Fragment,{children:[Q?e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:f.twMerge(l.default(f.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",H),U||"border-fields-border-focus"))},{children:[e.jsx("input",{placeholder:J||"Search",className:f.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",V),onChange:e=>{Ce(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:qe}),e.jsx(x,{name:"search",className:f.twMerge("fill-dark-bermudaGray w-3 h-3",W)})]}))})):null,e.jsx("div",Object.assign({className:f.twMerge(l.default("p-0 overflow-hidden",o(O,"w-")?o(O,"w-"):o(C,"w-"))),style:{width:He?Be:void 0}},{children:ze.length>0?e.jsxs("div",Object.assign({ref:Ne,className:f.twMerge("max-h-80 overflow-y-auto scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",je),style:{maxHeight:320}},{children:[ze.map(((e,t)=>Qe(e,t))),De&&e.jsx("div",Object.assign({ref:Fe,className:"w-full h-8 flex items-center justify-center"},{children:Ee?e.jsx(i.default,{label:"Loading",className:"text-dark-bermudaGray font-normal text-xs text-center"}):e.jsx("div",{className:"w-full h-1"})}))]})):_e?e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(i.default,{label:"Loading",className:f.twMerge("text-dark-bermudaGray font-normal text-sm text-center",le)})})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(i.default,{label:te||"No Results Found",className:f.twMerge("text-dark-bermudaGray font-normal text-sm",le)})}))})),X&&e.jsx(c.default,{variant:"tertiary",onClick:()=>{null==ee||ee()},label:Z||"Footer Button",className:f.twMerge("",Y)})]}))}))}))]}))})),$&&!P&&e.jsx(i.default,{label:$,className:f.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",K)}),P&&!!A&&e.jsx(i.default,{label:A,className:f.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",z)})]}))}))};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),l=require("../../../node_modules/classnames/index.js"),s=require("react"),r=require("react-query"),a=require("../../hooks/useDebounce.js"),n=require("../../hooks/useInfinitePicker.js"),i=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var o=require("../Text/BaseText.js");require("../Text/Text.js");var d=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var c=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var u=require("../Checkbox/Checkbox.js"),x=require("../Icon/Icon.js"),f=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),m=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=function({fetchFn:g,queryKey:h,debounceMs:j=300,disabled:p=!1,pageSize:w=100,value:v,valueStyles:y,label:k,labelStyles:S,placeholder:N,placeholderStyles:q,containerStyles:C,activeContainerStyles:M,iconStyles:B,itemsContainerStyles:O,itemContainerStyles:R,oddBgColor:L,evenBgColor:T,isDisabled:F=!1,position:I="bottom-start",isAutoFlip:G,onSelectItem:E,onClean:D,isCleanable:P,isError:_,errorMessage:A,errorMessageStyles:z,helperMessage:$,helperMessageStyles:K,isSearchable:H,searchContainerStyles:Q,activeSearchStyles:U,searchPlaceholder:J,searchStyles:V,iconSearchStyles:W,isShowFooterButton:X,footerButtonContainerStyles:Y,footerButtonLabel:Z,onClickFooterButton:ee,noResultsLabel:te,noResultsLabelStyles:le,badgeContainerStyles:se,badgeLabelStyles:re,variant:ae="box",data:ne,isRequired:ie,labelRequired:oe,labelRequiredStyles:de,containerRequiredStyles:ce,onSearch:ue,selectedAllText:xe,isShowSelectedAllText:fe=!0,isShowUnmatchItem:be=!0,selectedAllTextStyles:me,activeCheckboxColor:ge,itemTextStyles:he,listContainerStyles:je,isClearSearchOnClose:pe,selectedItemTextStyles:we,activeItemTextStyles:ve,maxSelected:ye}){const ke=r.useQueryClient(),Se=s.useRef(null),Ne=s.useRef(null),[qe,Ce]=s.useState(""),Me=a.useDebounce(qe,j),[Be,Oe]=s.useState(0),[Re,Le]=s.useState(!1),Te=s.useRef(null),[Fe,Ie]=s.useState(!1),{data:Ge,isLoading:Ee,isFetchingNextPage:De,hasNextPage:Pe,fetchNextPage:_e,totalCount:Ae}=n.useInfinitePicker({fetchFn:g,queryKey:h,search:Me,pageSize:w,enabled:!p});console.log("dataInfinite length",Ae);const ze=s.useMemo((()=>Ge||[]),[Ge]);s.useEffect((()=>{const e=null==v?void 0:v.filter((e=>e));(null==e?void 0:e.length)>=ye?Le(!0):Le(!1)}),[v,ye]);const $e=s.useCallback(((e,t)=>{if(Re&&!t)return;let l=v.slice();l=t?l.filter((t=>t!==e)):l.concat(e),null==E||E(l.filter((e=>""!==e))),l.length===ye?Le(!0):Le(!1)}),[Re,v,E,ye]),Ke=s.useCallback((()=>{null==E||E([]),Ce(""),Le(!1),null==D||D()}),[E,D]),He=(t,s)=>e.jsx(b.ListboxOption,Object.assign({className:f.twMerge(l.default("relative cursor-default select-none list-none",i(R,"p-"),i(R,"px-"),i(R,"py-"))),value:t},{children:({active:r})=>{const a=v.some((e=>e===t.value));return e.jsx("div",Object.assign({className:f.twMerge(l.default("w-full flex items-center !min-h-[32px] p-2",R,(!!i(R,"p-")||!!i(R,"px-")||!!i(R,"py-"))&&"p-2")),style:{backgroundColor:s%2==0?L||"var(--dropdownList-background-odd)":T||"var(--dropdownList-background-even)"}},{children:e.jsxs("div",Object.assign({className:f.twMerge("flex flex-row items-center gap-x-2 cursor-pointer w-full",Re&&!a?"cursor-not-allowed":""),onClick:e=>{e.preventDefault(),$e(t.value,a)}},{children:[e.jsx(u,{checked:a,variant:"small",color:ge||void 0,isDisabled:Re&&!a}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(o.default,{label:t.label,className:f.twMerge(l.default("text-xs text-dropdownList-text-default leading-[14px]",`${r&&!Re?f.twMerge("font-semibold text-dropdownList-text-hover",ve):"font-normal"}`),a&&we,he)})}))]}))}))}}),`${t.value}-${s}`);s.useEffect((()=>{ue&&ue(qe)}),[qe]),s.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)Oe(t.contentRect.width)}));return Se.current&&e.observe(Se.current),()=>{Se.current&&e.unobserve(Se.current)}}),[]),s.useEffect((()=>{const e=Te.current,t=Ne.current;if(!e||!t||!Pe||De)return;const l=new IntersectionObserver((e=>{var t;(null===(t=e[0])||void 0===t?void 0:t.isIntersecting)&&Pe&&!De&&_e()}),{root:t,rootMargin:"50px",threshold:.1});return l.observe(e),()=>{l.disconnect()}}),[Pe,De,_e,ze.length]);const Qe=!i(C,"w-")||"w-full"===i(C,"w-")||!i(O,"w-")||"w-full"===i(O,"w-"),Ue=()=>v&&v.length>0&&!(1===v.length&&""===v[0]);return e.jsx(b.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({ref:Se,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!k&&e.jsx(o.default,{label:k,className:f.twMerge("font-normal text-dark-gumbo text-[10px]",S)}),ie&&e.jsx(d,{labelRequired:oe,labelRequiredStyles:de,containerRequiredStyles:ce})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:I,flip:G},{children:[e.jsx(b.ListboxButton,Object.assign({className:f.twMerge(l.default("p-0 bg-transparent",F&&"cursor-not-allowed"),ce?i(C,"w-"):void 0),onClick:e=>{F&&e.preventDefault()}},{children:({open:t})=>e.jsxs("div",Object.assign({className:f.twMerge(l.default(f.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",C),"line"===ae&&"border-b border-t-0 border-x-0 rounded-none",t&&M?M:t?"border-fields-border-focus":void 0,F&&"border-dark-bermudaGray bg-light-whiteSmoke",_&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!N&&!Ue()&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(o.default,{label:N,variant:"small",className:f.twMerge(l.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),q)})})),Ue()?e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:v.length===Ae&&fe?e.jsx(o.default,{label:xe||"All",variant:"small",className:f.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),me)}):e.jsx(o.default,{label:be?v.map((e=>{var t;return(null===(t=ze.find((t=>t.value===e)))||void 0===t?void 0:t.label)||e})).join(", "):ze.filter((e=>v.includes(e.value))).map((e=>e.label||e)).join(", "),variant:"small",className:f.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),y)})})):null]})),Ue()&&e.jsx("div",Object.assign({className:f.twMerge("flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]",se)},{children:e.jsx(o.default,{label:v.length.toString(),className:f.twMerge(l.default("font-normal text-[8px] leading-3"),re)})})),P&&Ue()&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),Ke()}},{children:e.jsx(x,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(x,{name:t?"chevronup":"chevrondown",className:f.twMerge(l.default("fill-dark-bermudaGray w-3 h-3",`${F&&"fill-dark-bermudaGray"}`),B)})]}))})),e.jsx(m.Transition,Object.assign({as:s.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(b.ListboxOptions,Object.assign({className:f.twMerge(l.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver bg-white z-50",C?i(C,"w-"):void 0),O),style:{width:Qe?Be:void 0,height:"auto"}},{children:({open:t})=>(s.useEffect((()=>{!t&&pe&&Ce("")}),[t]),s.useEffect((()=>{if(t&&!Fe){const e=[...h,Me];ke.resetQueries(e),Ie(!0),Ne.current&&(Ne.current.scrollTop=0)}else!t&&Fe&&Ie(!1)}),[t]),e.jsxs(e.Fragment,{children:[H?e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:f.twMerge(l.default(f.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",Q),U||"border-fields-border-focus"))},{children:[e.jsx("input",{placeholder:J||"Search",className:f.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",V),onChange:e=>{Ce(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:qe}),e.jsx(x,{name:"search",className:f.twMerge("fill-dark-bermudaGray w-3 h-3",W)})]}))})):null,e.jsx("div",Object.assign({className:f.twMerge(l.default("p-0 overflow-hidden",i(O,"w-")?i(O,"w-"):i(C,"w-"))),style:{width:Qe?Be:void 0}},{children:ze.length>0?e.jsxs("div",Object.assign({ref:Ne,className:f.twMerge("max-h-80 overflow-y-auto scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",je),style:{maxHeight:320}},{children:[ze.map(((e,t)=>He(e,t))),Pe&&e.jsx("div",Object.assign({ref:Te,className:"w-full h-8 flex items-center justify-center"},{children:De?e.jsx(o.default,{label:"Loading",className:"text-dark-bermudaGray font-normal text-xs text-center"}):e.jsx("div",{className:"w-full h-1"})}))]})):Ee?e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(o.default,{label:"Loading",className:f.twMerge("text-dark-bermudaGray font-normal text-sm text-center",le)})})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(o.default,{label:te||"No Results Found",className:f.twMerge("text-dark-bermudaGray font-normal text-sm",le)})}))})),X&&e.jsx(c.default,{variant:"tertiary",onClick:()=>{null==ee||ee()},label:Z||"Footer Button",className:f.twMerge("",Y)})]}))}))}))]}))})),$&&!_&&e.jsx(o.default,{label:$,className:f.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",K)}),_&&!!A&&e.jsx(o.default,{label:A,className:f.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",z)})]}))}))};
 //# sourceMappingURL=InfiniteCheckPicker.js.map

package/build/src/components/CheckPicker/InfiniteCheckPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfiniteCheckPicker.js","sources":["../../../../src/components/CheckPicker/InfiniteCheckPicker.tsx"],"sourcesContent":["import {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n  Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useQueryClient } from 'react-query';\nimport { twMerge } from 'tailwind-merge';\n\nimport { useDebounce } from '../../hooks/useDebounce';\nimport { useInfinitePicker } from '../../hooks/useInfinitePicker';\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { BaseButton } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n  BaseInfiniteCheckPickerDataInterface,\n  BaseInfiniteCheckPickerInterface\n} from './BaseInfiniteCheckPicker.type';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction BaseInfiniteCheckPicker<T = any>({\n  fetchFn,\n  queryKey,\n  debounceMs = 300,\n  disabled = false,\n  pageSize = 100,\n  value,\n  valueStyles,\n  label,\n  labelStyles,\n  placeholder,\n  placeholderStyles,\n  containerStyles,\n  activeContainerStyles,\n  iconStyles,\n  itemsContainerStyles,\n  itemContainerStyles,\n  oddBgColor,\n  evenBgColor,\n  isDisabled = false,\n  position = 'bottom-start',\n  isAutoFlip,\n  onSelectItem,\n  onClean,\n  isCleanable,\n  isError,\n  errorMessage,\n  errorMessageStyles,\n  helperMessage,\n  helperMessageStyles,\n  isSearchable,\n  searchContainerStyles,\n  activeSearchStyles,\n  searchPlaceholder,\n  searchStyles,\n  iconSearchStyles,\n  isShowFooterButton,\n  footerButtonContainerStyles,\n  footerButtonLabel,\n  onClickFooterButton,\n  noResultsLabel,\n  noResultsLabelStyles,\n  badgeContainerStyles,\n  badgeLabelStyles,\n  variant = 'box',\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  data: _data, // Keep for backward compatibility but don't use (using dataInfinite instead)\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  onSearch,\n  selectedAllText,\n  isShowSelectedAllText = true,\n  isShowUnmatchItem = true,\n  selectedAllTextStyles,\n  activeCheckboxColor,\n  itemTextStyles,\n  listContainerStyles,\n  isClearSearchOnClose,\n  selectedItemTextStyles,\n  activeItemTextStyles,\n  maxSelected\n}: BaseInfiniteCheckPickerInterface<T>) {\n  const defaultScrollbarStyles =\n    'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n  const queryClient = useQueryClient();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const [search, setSearch] = useState<string>('');\n  const debouncedQuery = useDebounce(search, debounceMs);\n  const [buttonWidth, setButtonWidth] = useState<number>(0);\n  const [isDisableSelected, setIsDisableSelected] = useState<boolean>(false);\n\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);\n  const {\n    data: dataInfinite,\n    isLoading,\n    isFetchingNextPage,\n    hasNextPage,\n    fetchNextPage,\n    totalCount\n  } = useInfinitePicker({\n    fetchFn,\n    queryKey,\n    search: debouncedQuery,\n    pageSize,\n    enabled: !disabled\n  });\n\n  // eslint-disable-next-line no-console\n  console.log('dataInfinite length', totalCount);\n\n  const dataPicker: Array<BaseInfiniteCheckPickerDataInterface> = useMemo(() => {\n    // Use dataInfinite from the hook instead of static data prop\n    // Type assertion is safe here as the API should return the correct format\n    return (dataInfinite || []) as Array<BaseInfiniteCheckPickerDataInterface>;\n  }, [dataInfinite]);\n\n  const maxDropdownHeight = 320; // Maximum height for the dropdown list\n\n  useEffect(() => {\n    const filteredValue = value?.filter((item) => item);\n    if (filteredValue?.length >= maxSelected) {\n      setIsDisableSelected(true);\n    } else {\n      setIsDisableSelected(false);\n    }\n  }, [value, maxSelected]);\n\n  const handleItemClick = useCallback(\n    (itemValue: string, isSelected: boolean) => {\n      if (isDisableSelected && !isSelected) return;\n\n      let temp = value.slice();\n      if (isSelected) {\n        temp = temp.filter((i) => i !== itemValue);\n      } else {\n        temp = temp.concat(itemValue);\n      }\n\n      onSelectItem?.(temp.filter((i) => i !== ''));\n\n      if (temp.length === maxSelected) {\n        setIsDisableSelected(true);\n      } else {\n        setIsDisableSelected(false);\n      }\n    },\n    [isDisableSelected, value, onSelectItem, maxSelected]\n  );\n\n  const handleClean = useCallback(() => {\n    onSelectItem?.([]);\n    setSearch('');\n    setIsDisableSelected(false);\n    onClean?.();\n  }, [onSelectItem, onClean]);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  const renderItem = (item: BaseInfiniteCheckPickerDataInterface, index: number) => {\n    return (\n      <ListboxOption\n        key={`${item.value}-${index}`}\n        className={twMerge(\n          classNames(\n            'relative cursor-default select-none list-none',\n            extractClasses(itemContainerStyles, 'p-'),\n            extractClasses(itemContainerStyles, 'px-'),\n            extractClasses(itemContainerStyles, 'py-')\n          )\n        )}\n        value={item}\n      >\n        {({ active }) => {\n          const selected = value.some((i) => i === item.value);\n          return (\n            <div\n              className={twMerge(\n                classNames(\n                  'w-full flex items-center !min-h-[32px] p-2',\n                  itemContainerStyles,\n                  (!!extractClasses(itemContainerStyles, 'p-') ||\n                    !!extractClasses(itemContainerStyles, 'px-') ||\n                    !!extractClasses(itemContainerStyles, 'py-')) &&\n                    'p-2'\n                )\n              )}\n              style={{\n                backgroundColor:\n                  index % 2 === 0\n                    ? oddBgColor || 'var(--dropdownList-background-odd)'\n                    : evenBgColor || 'var(--dropdownList-background-even)'\n              }}\n            >\n              <div\n                className={twMerge(\n                  'flex flex-row items-center gap-x-2 cursor-pointer w-full',\n                  isDisableSelected && !selected ? 'cursor-not-allowed' : ''\n                )}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleItemClick(item.value, selected);\n                }}\n              >\n                <Checkbox\n                  checked={selected}\n                  variant='small'\n                  color={activeCheckboxColor || undefined}\n                  isDisabled={isDisableSelected && !selected}\n                />\n\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={item.label}\n                    className={twMerge(\n                      classNames(\n                        'text-xs text-dropdownList-text-default leading-[14px]',\n                        `${\n                          active && !isDisableSelected\n                            ? twMerge(\n                                'font-semibold text-dropdownList-text-hover',\n                                activeItemTextStyles\n                              )\n                            : 'font-normal'\n                        }`\n                      ),\n                      selected && selectedItemTextStyles,\n                      itemTextStyles\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        }}\n      </ListboxOption>\n    );\n  };\n\n  useEffect(() => {\n    if (onSearch) onSearch(search);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [search]);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setButtonWidth(entry.contentRect.width);\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        resizeObserver.unobserve(containerRef.current);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    const scrollContainer = listRef.current;\n\n    if (!sentinel || !scrollContainer || !hasNextPage || isFetchingNextPage) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) {\n          fetchNextPage();\n        }\n      },\n      {\n        root: scrollContainer,\n        rootMargin: '50px',\n        threshold: 0.1\n      }\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [hasNextPage, isFetchingNextPage, fetchNextPage, dataPicker.length]);\n\n  const isWidthFull =\n    !extractClasses(containerStyles, 'w-') ||\n    extractClasses(containerStyles, 'w-') === 'w-full' ||\n    !extractClasses(itemsContainerStyles, 'w-') ||\n    extractClasses(itemsContainerStyles, 'w-') === 'w-full';\n\n  // Helper function to check if value array has actual selections\n  const hasSelectedValues = () => {\n    return value && value.length > 0 && !(value.length === 1 && value[0] === '');\n  };\n\n  const renderSelectedValue = () => {\n    if (!hasSelectedValues()) return null;\n\n    return (\n      <div className='flex flex-1 w-[calc(100%-52px)]'>\n        {value.length === totalCount && isShowSelectedAllText ? (\n          <BaseText\n            label={selectedAllText || 'All'}\n            variant='small'\n            className={twMerge(\n              classNames(\n                'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n              ),\n              selectedAllTextStyles\n            )}\n          />\n        ) : (\n          <BaseText\n            label={\n              isShowUnmatchItem\n                ? value\n                    .map((i) => dataPicker.find((item) => item.value === i)?.label || i)\n                    .join(', ')\n                : dataPicker\n                    .filter((i: BaseInfiniteCheckPickerDataInterface) => value.includes(i.value))\n                    .map((i) => i.label || i)\n                    .join(', ')\n            }\n            variant='small'\n            className={twMerge(\n              classNames(\n                'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n              ),\n              valueStyles\n            )}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const renderSearchSection = () => {\n    if (!isSearchable) return null;\n\n    return (\n      <div className='p-2 bg-light-whiteSolid w-full'>\n        <div\n          className={twMerge(\n            classNames(\n              twMerge(\n                'flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1',\n                searchContainerStyles\n              ),\n              activeSearchStyles ? activeSearchStyles : 'border-fields-border-focus'\n            )\n          )}\n        >\n          <input\n            placeholder={searchPlaceholder || 'Search'}\n            className={twMerge(\n              'flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs',\n              searchStyles\n            )}\n            onChange={(e) => {\n              setSearch(e.target.value);\n            }}\n            onKeyDown={(e) => e.stopPropagation()}\n            value={search}\n          />\n          <Icon\n            name='search'\n            className={twMerge('fill-dark-bermudaGray w-3 h-3', iconSearchStyles)}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <Listbox multiple>\n      <div ref={containerRef} className='flex flex-col gap-y-1'>\n        <div className='flex flex-row items-end gap-x-1'>\n          {!!label && (\n            <BaseText\n              label={label}\n              className={twMerge('font-normal text-dark-gumbo text-[10px]', labelStyles)}\n            />\n          )}\n          {isRequired && (\n            <BaseBadgeRequired\n              labelRequired={labelRequired}\n              labelRequiredStyles={labelRequiredStyles}\n              containerRequiredStyles={containerRequiredStyles}\n            />\n          )}\n        </div>\n        <div className='relative inline-block'>\n          <Float placement={position} flip={isAutoFlip}>\n            <ListboxButton\n              className={twMerge(\n                classNames('p-0 bg-transparent', isDisabled && 'cursor-not-allowed'),\n                containerRequiredStyles ? extractClasses(containerStyles, 'w-') : undefined\n              )}\n              onClick={(e) => {\n                if (isDisabled) {\n                  e.preventDefault();\n                }\n              }}\n            >\n              {({ open }) => (\n                <div\n                  className={twMerge(\n                    classNames(\n                      twMerge(\n                        'flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid',\n                        containerStyles\n                      ),\n                      variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n                      open && activeContainerStyles\n                        ? activeContainerStyles\n                        : open\n                        ? 'border-fields-border-focus'\n                        : undefined,\n                      isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n                      isError && 'border-red-fireEngineRed'\n                    )\n                  )}\n                >\n                  <div className='flex flex-1'>\n                    {!!placeholder && !hasSelectedValues() && (\n                      <div className='flex flex-1 w-full'>\n                        <BaseText\n                          label={placeholder}\n                          variant='small'\n                          className={twMerge(\n                            classNames(\n                              'font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]'\n                            ),\n                            placeholderStyles\n                          )}\n                        />\n                      </div>\n                    )}\n\n                    {renderSelectedValue()}\n                  </div>\n\n                  {hasSelectedValues() && (\n                    <div\n                      className={twMerge(\n                        'flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]',\n                        badgeContainerStyles\n                      )}\n                    >\n                      <BaseText\n                        label={value.length.toString()}\n                        className={twMerge(\n                          classNames('font-normal text-[8px] leading-3'),\n                          badgeLabelStyles\n                        )}\n                      />\n                    </div>\n                  )}\n\n                  {isCleanable && hasSelectedValues() && (\n                    <div\n                      className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-1'\n                      onClick={(e) => {\n                        e.preventDefault();\n                        handleClean();\n                      }}\n                    >\n                      <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n                    </div>\n                  )}\n                  <Icon\n                    name={open ? 'chevronup' : 'chevrondown'}\n                    className={twMerge(\n                      classNames(\n                        'fill-dark-bermudaGray w-3 h-3',\n                        `${isDisabled && 'fill-dark-bermudaGray'}`\n                      ),\n                      iconStyles\n                    )}\n                  />\n                </div>\n              )}\n            </ListboxButton>\n            <Transition\n              as={Fragment}\n              leave='transition ease-in duration-100'\n              leaveFrom='opacity-100'\n              leaveTo='opacity-0'\n            >\n              <ListboxOptions\n                className={twMerge(\n                  classNames(\n                    'rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver bg-white z-50',\n                    containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n                  ),\n                  itemsContainerStyles\n                )}\n                style={{\n                  width: isWidthFull ? buttonWidth : undefined,\n                  height: 'auto'\n                }}\n              >\n                {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n                {({ open }) => {\n                  // eslint-disable-next-line react-hooks/rules-of-hooks\n                  useEffect(() => {\n                    if (!open && isClearSearchOnClose) setSearch('');\n                  }, [open]);\n\n                  // eslint-disable-next-line react-hooks/rules-of-hooks\n                  useEffect(() => {\n                    if (open && !isDropdownOpen) {\n                      // Dropdown just opened - reset infinite scroll data to start fresh\n                      const queryKeyWithSearch = [...queryKey, debouncedQuery];\n                      queryClient.resetQueries(queryKeyWithSearch);\n                      setIsDropdownOpen(true);\n                      // Reset scroll position to top\n                      if (listRef.current) {\n                        listRef.current.scrollTop = 0;\n                      }\n                    } else if (!open && isDropdownOpen) {\n                      // Dropdown just closed\n                      setIsDropdownOpen(false);\n                    }\n                  }, [open]);\n\n                  return (\n                    <>\n                      {renderSearchSection()}\n                      <div\n                        className={twMerge(\n                          classNames(\n                            'p-0 overflow-hidden',\n                            extractClasses(itemsContainerStyles, 'w-')\n                              ? extractClasses(itemsContainerStyles, 'w-')\n                              : extractClasses(containerStyles, 'w-')\n                          )\n                        )}\n                        style={{ width: isWidthFull ? buttonWidth : undefined }}\n                      >\n                        {dataPicker.length > 0 ? (\n                          <div\n                            ref={listRef}\n                            className={twMerge(\n                              `max-h-80 overflow-y-auto ${defaultScrollbarStyles}`,\n                              listContainerStyles\n                            )}\n                            style={{\n                              maxHeight: maxDropdownHeight\n                            }}\n                          >\n                            {dataPicker.map((item, index) => renderItem(item, index))}\n                            {/* Infinite loading sentinel */}\n                            {hasNextPage && (\n                              <div\n                                ref={sentinelRef}\n                                className='w-full h-8 flex items-center justify-center'\n                              >\n                                {isFetchingNextPage ? (\n                                  <BaseText\n                                    label='Loading'\n                                    className='text-dark-bermudaGray font-normal text-xs text-center'\n                                  />\n                                ) : (\n                                  <div className='w-full h-1' />\n                                )}\n                              </div>\n                            )}\n                          </div>\n                        ) : isLoading ? (\n                          <div className='py-2 px-4 w-full'>\n                            <BaseText\n                              label='Loading'\n                              className={twMerge(\n                                'text-dark-bermudaGray font-normal text-sm text-center',\n                                noResultsLabelStyles\n                              )}\n                            />\n                          </div>\n                        ) : (\n                          <div className='py-2 px-4 w-full'>\n                            <BaseText\n                              label={noResultsLabel || 'No Results Found'}\n                              className={twMerge(\n                                'text-dark-bermudaGray font-normal text-sm',\n                                noResultsLabelStyles\n                              )}\n                            />\n                          </div>\n                        )}\n                      </div>\n                      {isShowFooterButton && (\n                        <BaseButton\n                          variant='tertiary'\n                          onClick={() => {\n                            onClickFooterButton?.();\n                          }}\n                          label={footerButtonLabel || 'Footer Button'}\n                          className={twMerge('', footerButtonContainerStyles)}\n                        />\n                      )}\n                    </>\n                  );\n                }}\n              </ListboxOptions>\n            </Transition>\n          </Float>\n        </div>\n\n        {helperMessage && !isError && (\n          <BaseText\n            label={helperMessage}\n            className={twMerge(\n              'font-normal text-dark-bermudaGray text-[10px] inline-block',\n              helperMessageStyles\n            )}\n          />\n        )}\n\n        {isError && !!errorMessage && (\n          <BaseText\n            label={errorMessage}\n            className={twMerge(\n              'font-normal text-red-fireEngineRed text-[10px] inline-block',\n              errorMessageStyles\n            )}\n          />\n        )}\n      </div>\n    </Listbox>\n  );\n}\n\nexport default BaseInfiniteCheckPicker;\n"],"names":["fetchFn","queryKey","debounceMs","disabled","pageSize","value","valueStyles","label","labelStyles","placeholder","placeholderStyles","containerStyles","activeContainerStyles","iconStyles","itemsContainerStyles","itemContainerStyles","oddBgColor","evenBgColor","isDisabled","position","isAutoFlip","onSelectItem","onClean","isCleanable","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isSearchable","searchContainerStyles","activeSearchStyles","searchPlaceholder","searchStyles","iconSearchStyles","isShowFooterButton","footerButtonContainerStyles","footerButtonLabel","onClickFooterButton","noResultsLabel","noResultsLabelStyles","badgeContainerStyles","badgeLabelStyles","variant","data","_data","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","selectedAllText","isShowSelectedAllText","isShowUnmatchItem","selectedAllTextStyles","activeCheckboxColor","itemTextStyles","listContainerStyles","isClearSearchOnClose","selectedItemTextStyles","activeItemTextStyles","maxSelected","queryClient","useQueryClient","containerRef","useRef","listRef","search","setSearch","useState","debouncedQuery","useDebounce","buttonWidth","setButtonWidth","isDisableSelected","setIsDisableSelected","sentinelRef","isDropdownOpen","setIsDropdownOpen","dataInfinite","isLoading","isFetchingNextPage","hasNextPage","fetchNextPage","totalCount","useInfinitePicker","enabled","console","log","dataPicker","useMemo","useEffect","filteredValue","filter","item","length","handleItemClick","useCallback","itemValue","isSelected","temp","slice","i","concat","handleClean","renderItem","index","_jsx","ListboxOption","Object","assign","className","twMerge","classNames","extractClasses","children","active","selected","some","style","backgroundColor","_jsxs","jsxs","onClick","e","preventDefault","Checkbox","checked","color","undefined","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","current","observe","unobserve","sentinel","scrollContainer","observer","IntersectionObserver","_a","isIntersecting","root","rootMargin","threshold","disconnect","isWidthFull","hasSelectedValues","jsx","Listbox","multiple","ref","BaseBadgeRequired","Float","placement","flip","ListboxButton","open","map","find","join","includes","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","height","queryKeyWithSearch","resetQueries","scrollTop","_Fragment","onChange","target","onKeyDown","stopPropagation","maxHeight","BaseButton"],"mappings":"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"}
+{"version":3,"file":"InfiniteCheckPicker.js","sources":["../../../../src/components/CheckPicker/InfiniteCheckPicker.tsx"],"sourcesContent":["import {\n  Listbox,\n  ListboxButton,\n  ListboxOption,\n  ListboxOptions,\n  Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useQueryClient } from 'react-query';\nimport { twMerge } from 'tailwind-merge';\n\nimport { useDebounce } from '../../hooks/useDebounce';\nimport { useInfinitePicker } from '../../hooks/useInfinitePicker';\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { BaseButton } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n  BaseInfiniteCheckPickerDataInterface,\n  BaseInfiniteCheckPickerInterface\n} from './BaseInfiniteCheckPicker.type';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction BaseInfiniteCheckPicker<T = any>({\n  fetchFn,\n  queryKey,\n  debounceMs = 300,\n  disabled = false,\n  pageSize = 100,\n  value,\n  valueStyles,\n  label,\n  labelStyles,\n  placeholder,\n  placeholderStyles,\n  containerStyles,\n  activeContainerStyles,\n  iconStyles,\n  itemsContainerStyles,\n  itemContainerStyles,\n  oddBgColor,\n  evenBgColor,\n  isDisabled = false,\n  position = 'bottom-start',\n  isAutoFlip,\n  onSelectItem,\n  onClean,\n  isCleanable,\n  isError,\n  errorMessage,\n  errorMessageStyles,\n  helperMessage,\n  helperMessageStyles,\n  isSearchable,\n  searchContainerStyles,\n  activeSearchStyles,\n  searchPlaceholder,\n  searchStyles,\n  iconSearchStyles,\n  isShowFooterButton,\n  footerButtonContainerStyles,\n  footerButtonLabel,\n  onClickFooterButton,\n  noResultsLabel,\n  noResultsLabelStyles,\n  badgeContainerStyles,\n  badgeLabelStyles,\n  variant = 'box',\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  data: _data, // Keep for backward compatibility but don't use (using dataInfinite instead)\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  onSearch,\n  selectedAllText,\n  isShowSelectedAllText = true,\n  isShowUnmatchItem = true,\n  selectedAllTextStyles,\n  activeCheckboxColor,\n  itemTextStyles,\n  listContainerStyles,\n  isClearSearchOnClose,\n  selectedItemTextStyles,\n  activeItemTextStyles,\n  maxSelected\n}: BaseInfiniteCheckPickerInterface<T>) {\n  const defaultScrollbarStyles =\n    'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n  const queryClient = useQueryClient();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const [search, setSearch] = useState<string>('');\n  const debouncedQuery = useDebounce(search, debounceMs);\n  const [buttonWidth, setButtonWidth] = useState<number>(0);\n  const [isDisableSelected, setIsDisableSelected] = useState<boolean>(false);\n\n  const sentinelRef = useRef<HTMLDivElement>(null);\n  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);\n  const {\n    data: dataInfinite,\n    isLoading,\n    isFetchingNextPage,\n    hasNextPage,\n    fetchNextPage,\n    totalCount\n  } = useInfinitePicker({\n    fetchFn,\n    queryKey,\n    search: debouncedQuery,\n    pageSize,\n    enabled: !disabled\n  });\n\n  // eslint-disable-next-line no-console\n  console.log('dataInfinite length', totalCount);\n\n  const dataPicker: Array<BaseInfiniteCheckPickerDataInterface> = useMemo(() => {\n    // Use dataInfinite from the hook instead of static data prop\n    // Type assertion is safe here as the API should return the correct format\n    return (dataInfinite || []) as Array<BaseInfiniteCheckPickerDataInterface>;\n  }, [dataInfinite]);\n\n  const maxDropdownHeight = 320; // Maximum height for the dropdown list\n\n  useEffect(() => {\n    const filteredValue = value?.filter((item) => item);\n    if (filteredValue?.length >= maxSelected) {\n      setIsDisableSelected(true);\n    } else {\n      setIsDisableSelected(false);\n    }\n  }, [value, maxSelected]);\n\n  const handleItemClick = useCallback(\n    (itemValue: string, isSelected: boolean) => {\n      if (isDisableSelected && !isSelected) return;\n\n      let temp = value.slice();\n      if (isSelected) {\n        temp = temp.filter((i) => i !== itemValue);\n      } else {\n        temp = temp.concat(itemValue);\n      }\n\n      onSelectItem?.(temp.filter((i) => i !== ''));\n\n      if (temp.length === maxSelected) {\n        setIsDisableSelected(true);\n      } else {\n        setIsDisableSelected(false);\n      }\n    },\n    [isDisableSelected, value, onSelectItem, maxSelected]\n  );\n\n  const handleClean = useCallback(() => {\n    onSelectItem?.([]);\n    setSearch('');\n    setIsDisableSelected(false);\n    onClean?.();\n  }, [onSelectItem, onClean]);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  const renderItem = (item: BaseInfiniteCheckPickerDataInterface, index: number) => {\n    return (\n      <ListboxOption\n        key={`${item.value}-${index}`}\n        className={twMerge(\n          classNames(\n            'relative cursor-default select-none list-none',\n            extractClasses(itemContainerStyles, 'p-'),\n            extractClasses(itemContainerStyles, 'px-'),\n            extractClasses(itemContainerStyles, 'py-')\n          )\n        )}\n        value={item}\n      >\n        {({ active }) => {\n          const selected = value.some((i) => i === item.value);\n          return (\n            <div\n              className={twMerge(\n                classNames(\n                  'w-full flex items-center !min-h-[32px] p-2',\n                  itemContainerStyles,\n                  (!!extractClasses(itemContainerStyles, 'p-') ||\n                    !!extractClasses(itemContainerStyles, 'px-') ||\n                    !!extractClasses(itemContainerStyles, 'py-')) &&\n                    'p-2'\n                )\n              )}\n              style={{\n                backgroundColor:\n                  index % 2 === 0\n                    ? oddBgColor || 'var(--dropdownList-background-odd)'\n                    : evenBgColor || 'var(--dropdownList-background-even)'\n              }}\n            >\n              <div\n                className={twMerge(\n                  'flex flex-row items-center gap-x-2 cursor-pointer w-full',\n                  isDisableSelected && !selected ? 'cursor-not-allowed' : ''\n                )}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleItemClick(item.value, selected);\n                }}\n              >\n                <Checkbox\n                  checked={selected}\n                  variant='small'\n                  color={activeCheckboxColor || undefined}\n                  isDisabled={isDisableSelected && !selected}\n                />\n\n                <div className='flex flex-1'>\n                  <BaseText\n                    label={item.label}\n                    className={twMerge(\n                      classNames(\n                        'text-xs text-dropdownList-text-default leading-[14px]',\n                        `${\n                          active && !isDisableSelected\n                            ? twMerge(\n                                'font-semibold text-dropdownList-text-hover',\n                                activeItemTextStyles\n                              )\n                            : 'font-normal'\n                        }`\n                      ),\n                      selected && selectedItemTextStyles,\n                      itemTextStyles\n                    )}\n                  />\n                </div>\n              </div>\n            </div>\n          );\n        }}\n      </ListboxOption>\n    );\n  };\n\n  useEffect(() => {\n    if (onSearch) onSearch(search);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [search]);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setButtonWidth(entry.contentRect.width);\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        resizeObserver.unobserve(containerRef.current);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    const scrollContainer = listRef.current;\n\n    if (!sentinel || !scrollContainer || !hasNextPage || isFetchingNextPage) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) {\n          fetchNextPage();\n        }\n      },\n      {\n        root: scrollContainer,\n        rootMargin: '50px',\n        threshold: 0.1\n      }\n    );\n\n    observer.observe(sentinel);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [hasNextPage, isFetchingNextPage, fetchNextPage, dataPicker.length]);\n\n  const isWidthFull =\n    !extractClasses(containerStyles, 'w-') ||\n    extractClasses(containerStyles, 'w-') === 'w-full' ||\n    !extractClasses(itemsContainerStyles, 'w-') ||\n    extractClasses(itemsContainerStyles, 'w-') === 'w-full';\n\n  // Helper function to check if value array has actual selections\n  const hasSelectedValues = () => {\n    return value && value.length > 0 && !(value.length === 1 && value[0] === '');\n  };\n\n  const renderSelectedValue = () => {\n    if (!hasSelectedValues()) return null;\n\n    return (\n      <div className='flex flex-1 w-[calc(100%-52px)]'>\n        {value.length === totalCount && isShowSelectedAllText ? (\n          <BaseText\n            label={selectedAllText || 'All'}\n            variant='small'\n            className={twMerge(\n              classNames(\n                'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n              ),\n              selectedAllTextStyles\n            )}\n          />\n        ) : (\n          <BaseText\n            label={\n              isShowUnmatchItem\n                ? value\n                    .map((i) => dataPicker.find((item) => item.value === i)?.label || i)\n                    .join(', ')\n                : dataPicker\n                    .filter((i: BaseInfiniteCheckPickerDataInterface) => value.includes(i.value))\n                    .map((i) => i.label || i)\n                    .join(', ')\n            }\n            variant='small'\n            className={twMerge(\n              classNames(\n                'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n              ),\n              valueStyles\n            )}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const renderSearchSection = () => {\n    if (!isSearchable) return null;\n\n    return (\n      <div className='p-2 bg-light-whiteSolid w-full'>\n        <div\n          className={twMerge(\n            classNames(\n              twMerge(\n                'flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1',\n                searchContainerStyles\n              ),\n              activeSearchStyles ? activeSearchStyles : 'border-fields-border-focus'\n            )\n          )}\n        >\n          <input\n            placeholder={searchPlaceholder || 'Search'}\n            className={twMerge(\n              'flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs',\n              searchStyles\n            )}\n            onChange={(e) => {\n              setSearch(e.target.value);\n            }}\n            onKeyDown={(e) => e.stopPropagation()}\n            value={search}\n          />\n          <Icon\n            name='search'\n            className={twMerge('fill-dark-bermudaGray w-3 h-3', iconSearchStyles)}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <Listbox multiple>\n      <div ref={containerRef} className='flex flex-col gap-y-1'>\n        <div className='flex flex-row items-end gap-x-1'>\n          {!!label && (\n            <BaseText\n              label={label}\n              className={twMerge('font-normal text-dark-gumbo text-[10px]', labelStyles)}\n            />\n          )}\n          {isRequired && (\n            <BaseBadgeRequired\n              labelRequired={labelRequired}\n              labelRequiredStyles={labelRequiredStyles}\n              containerRequiredStyles={containerRequiredStyles}\n            />\n          )}\n        </div>\n        <div className='relative inline-block'>\n          <Float placement={position} flip={isAutoFlip}>\n            <ListboxButton\n              className={twMerge(\n                classNames('p-0 bg-transparent', isDisabled && 'cursor-not-allowed'),\n                containerRequiredStyles ? extractClasses(containerStyles, 'w-') : undefined\n              )}\n              onClick={(e) => {\n                if (isDisabled) {\n                  e.preventDefault();\n                }\n              }}\n            >\n              {({ open }) => (\n                <div\n                  className={twMerge(\n                    classNames(\n                      twMerge(\n                        'flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid',\n                        containerStyles\n                      ),\n                      variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n                      open && activeContainerStyles\n                        ? activeContainerStyles\n                        : open\n                        ? 'border-fields-border-focus'\n                        : undefined,\n                      isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n                      isError && 'border-red-fireEngineRed'\n                    )\n                  )}\n                >\n                  <div className='flex flex-1'>\n                    {!!placeholder && !hasSelectedValues() && (\n                      <div className='flex flex-1 w-full'>\n                        <BaseText\n                          label={placeholder}\n                          variant='small'\n                          className={twMerge(\n                            classNames(\n                              'font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]'\n                            ),\n                            placeholderStyles\n                          )}\n                        />\n                      </div>\n                    )}\n\n                    {renderSelectedValue()}\n                  </div>\n\n                  {hasSelectedValues() && (\n                    <div\n                      className={twMerge(\n                        'flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]',\n                        badgeContainerStyles\n                      )}\n                    >\n                      <BaseText\n                        label={value.length.toString()}\n                        className={twMerge(\n                          classNames('font-normal text-[8px] leading-3'),\n                          badgeLabelStyles\n                        )}\n                      />\n                    </div>\n                  )}\n\n                  {isCleanable && hasSelectedValues() && (\n                    <div\n                      className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-1'\n                      onClick={(e) => {\n                        e.preventDefault();\n                        handleClean();\n                      }}\n                    >\n                      <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n                    </div>\n                  )}\n                  <Icon\n                    name={open ? 'chevronup' : 'chevrondown'}\n                    className={twMerge(\n                      classNames(\n                        'fill-dark-bermudaGray w-3 h-3',\n                        `${isDisabled && 'fill-dark-bermudaGray'}`\n                      ),\n                      iconStyles\n                    )}\n                  />\n                </div>\n              )}\n            </ListboxButton>\n            <Transition\n              as={Fragment}\n              leave='transition ease-in duration-100'\n              leaveFrom='opacity-100'\n              leaveTo='opacity-0'\n            >\n              <ListboxOptions\n                className={twMerge(\n                  classNames(\n                    'rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver bg-white z-50',\n                    containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n                  ),\n                  itemsContainerStyles\n                )}\n                style={{\n                  width: isWidthFull ? buttonWidth : undefined,\n                  height: 'auto'\n                }}\n              >\n                {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n                {({ open }) => {\n                  // eslint-disable-next-line react-hooks/rules-of-hooks\n                  useEffect(() => {\n                    if (!open && isClearSearchOnClose) setSearch('');\n                  }, [open]);\n\n                  // eslint-disable-next-line react-hooks/rules-of-hooks\n                  useEffect(() => {\n                    if (open && !isDropdownOpen) {\n                      // Dropdown just opened - reset infinite scroll data to start fresh\n                      const queryKeyWithSearch = [...queryKey, debouncedQuery];\n                      queryClient.resetQueries(queryKeyWithSearch);\n                      setIsDropdownOpen(true);\n                      // Reset scroll position to top\n                      if (listRef.current) {\n                        listRef.current.scrollTop = 0;\n                      }\n                    } else if (!open && isDropdownOpen) {\n                      // Dropdown just closed\n                      setIsDropdownOpen(false);\n                    }\n                  }, [open]);\n\n                  return (\n                    <>\n                      {renderSearchSection()}\n                      <div\n                        className={twMerge(\n                          classNames(\n                            'p-0 overflow-hidden',\n                            extractClasses(itemsContainerStyles, 'w-')\n                              ? extractClasses(itemsContainerStyles, 'w-')\n                              : extractClasses(containerStyles, 'w-')\n                          )\n                        )}\n                        style={{ width: isWidthFull ? buttonWidth : undefined }}\n                      >\n                        {dataPicker.length > 0 ? (\n                          <div\n                            ref={listRef}\n                            className={twMerge(\n                              `max-h-80 overflow-y-auto ${defaultScrollbarStyles}`,\n                              listContainerStyles\n                            )}\n                            style={{\n                              maxHeight: maxDropdownHeight\n                            }}\n                          >\n                            {dataPicker.map((item, index) => renderItem(item, index))}\n                            {/* Infinite loading sentinel */}\n                            {hasNextPage && (\n                              <div\n                                ref={sentinelRef}\n                                className='w-full h-8 flex items-center justify-center'\n                              >\n                                {isFetchingNextPage ? (\n                                  <BaseText\n                                    label='Loading'\n                                    className='text-dark-bermudaGray font-normal text-xs text-center'\n                                  />\n                                ) : (\n                                  <div className='w-full h-1' />\n                                )}\n                              </div>\n                            )}\n                          </div>\n                        ) : isLoading ? (\n                          <div className='py-2 px-4 w-full'>\n                            <BaseText\n                              label='Loading'\n                              className={twMerge(\n                                'text-dark-bermudaGray font-normal text-sm text-center',\n                                noResultsLabelStyles\n                              )}\n                            />\n                          </div>\n                        ) : (\n                          <div className='py-2 px-4 w-full'>\n                            <BaseText\n                              label={noResultsLabel || 'No Results Found'}\n                              className={twMerge(\n                                'text-dark-bermudaGray font-normal text-sm',\n                                noResultsLabelStyles\n                              )}\n                            />\n                          </div>\n                        )}\n                      </div>\n                      {isShowFooterButton && (\n                        <BaseButton\n                          variant='tertiary'\n                          onClick={() => {\n                            onClickFooterButton?.();\n                          }}\n                          label={footerButtonLabel || 'Footer Button'}\n                          className={twMerge('', footerButtonContainerStyles)}\n                        />\n                      )}\n                    </>\n                  );\n                }}\n              </ListboxOptions>\n            </Transition>\n          </Float>\n        </div>\n\n        {helperMessage && !isError && (\n          <BaseText\n            label={helperMessage}\n            className={twMerge(\n              'font-normal text-dark-bermudaGray text-[10px] inline-block',\n              helperMessageStyles\n            )}\n          />\n        )}\n\n        {isError && !!errorMessage && (\n          <BaseText\n            label={errorMessage}\n            className={twMerge(\n              'font-normal text-red-fireEngineRed text-[10px] inline-block',\n              errorMessageStyles\n            )}\n          />\n        )}\n      </div>\n    </Listbox>\n  );\n}\n\nexport default BaseInfiniteCheckPicker;\n"],"names":["fetchFn","queryKey","debounceMs","disabled","pageSize","value","valueStyles","label","labelStyles","placeholder","placeholderStyles","containerStyles","activeContainerStyles","iconStyles","itemsContainerStyles","itemContainerStyles","oddBgColor","evenBgColor","isDisabled","position","isAutoFlip","onSelectItem","onClean","isCleanable","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isSearchable","searchContainerStyles","activeSearchStyles","searchPlaceholder","searchStyles","iconSearchStyles","isShowFooterButton","footerButtonContainerStyles","footerButtonLabel","onClickFooterButton","noResultsLabel","noResultsLabelStyles","badgeContainerStyles","badgeLabelStyles","variant","data","_data","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","selectedAllText","isShowSelectedAllText","isShowUnmatchItem","selectedAllTextStyles","activeCheckboxColor","itemTextStyles","listContainerStyles","isClearSearchOnClose","selectedItemTextStyles","activeItemTextStyles","maxSelected","queryClient","useQueryClient","containerRef","useRef","listRef","search","setSearch","useState","debouncedQuery","useDebounce","buttonWidth","setButtonWidth","isDisableSelected","setIsDisableSelected","sentinelRef","isDropdownOpen","setIsDropdownOpen","dataInfinite","isLoading","isFetchingNextPage","hasNextPage","fetchNextPage","totalCount","useInfinitePicker","enabled","console","log","dataPicker","useMemo","useEffect","filteredValue","filter","item","length","handleItemClick","useCallback","itemValue","isSelected","temp","slice","i","concat","handleClean","renderItem","index","_jsx","ListboxOption","Object","assign","className","twMerge","classNames","extractClasses","children","active","selected","some","style","backgroundColor","_jsxs","jsxs","onClick","e","preventDefault","Checkbox","checked","color","undefined","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","current","observe","unobserve","sentinel","scrollContainer","observer","IntersectionObserver","_a","isIntersecting","root","rootMargin","threshold","disconnect","isWidthFull","hasSelectedValues","jsx","Listbox","multiple","ref","BaseBadgeRequired","Float","placement","flip","ListboxButton","open","map","find","join","includes","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","height","queryKeyWithSearch","resetQueries","scrollTop","_Fragment","onChange","target","onKeyDown","stopPropagation","maxHeight","BaseButton"],"mappings":"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"}

package/build/src/components/Preview/BasePreview.js

@@ -9,5 +9,5 @@
     height: 100vh;
     width: 100%;
   }
-`;m.GlobalWorkerOptions.workerSrc=new URL("pdfjs-dist/build/pdf.worker.min.js","undefined"==typeof document?new(require("url").URL)("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("src/components/Preview/BasePreview.js",document.baseURI).href).toString(),module.exports=function({files:n,isOpen:x,onClose:g,onClickDownload:w,containerFooterStyles:j,isShowPageIndicator:b=!0,ofLabel:p,indicatorLabelStyles:v,isDownloadable:y=!0,isRotateable:N=!0,isZoomable:S=!0,iconRotateLeftContainerStyles:k,iconRotateLeftStyles:M,iconRotateLeftName:C,iconRotateRightContainerStyles:q,iconRotateRightStyles:O,iconRotateRighttName:R,iconMinusContainerStyles:B,iconMinusStyles:P,iconMinusName:_,iconPlusContainerStyles:z,iconPlusStyles:L,iconPlusName:F,iconDownloadContainerStyles:I,iconDownloadStyles:D,iconDownloadName:T,containerPrevStyles:U,iconPrevStyles:$,iconPrevName:G,containerNextStyles:A,iconNextStyles:E,iconNextName:W,containerPreviewStyles:H,iconPreviewStyles:V,iconPreviewName:Z,previewLabel:J,overlayContainerStyles:K,headerContainerStyles:Q,footerContainerStyles:X,separatorStyles:Y}){const[ee,te]=i.useState(),[se,le]=i.useState(!1),ie=i.useRef(null),[re,ne]=i.useState(""),[ae,oe]=i.useState(!0),[ce,de]=i.useState(null),[ue,me]=i.useState(0),[fe,xe]=i.useState(0),[he,ge]=i.useState(1),we=i.useRef(null),je=()=>{ne("grabbing")},be=()=>{ne("grab")},pe=()=>{ne("grab"),oe(!1)},ve=()=>{ne("default"),oe(!0)},ye=()=>{var e;null===(e=we.current)||void 0===e||e.resetTransform(),te(void 0),ne(""),oe(!0),de(null),me(0),ge(1),g()};i.useEffect((()=>{if(ce){const e=ie.current;if(e){const t=1,s=e.getContext("2d");m.getDocument(n[0]).promise.then((l=>{l.getPage(he).then((l=>{const i=l.getViewport({scale:t});e.width=i.width,e.height=i.height,l.render({canvasContext:s,viewport:i})}))}))}}}),[ee,ce,he]),i.useEffect((()=>{const t=()=>e.__awaiter(this,void 0,void 0,(function*(){const t=new FileReader;t.onload=t=>e.__awaiter(this,void 0,void 0,(function*(){var e;const s=new Uint8Array(null===(e=t.target)||void 0===e?void 0:e.result);de(s)}));const s=yield fetch(n[0]).then((e=>e.blob()));t.readAsArrayBuffer(s)}));if(n&&x){const e=a.isImage(n[0])?"image":"document";if("image"===e)return te(e),n.map((e=>a.isImage(e)?"image":"document")).includes("document")&&le(!0),void me(n.length);t(),te("document"),m.getDocument(n[0]).promise.then((e=>{const t=e.numPages;me(t)}))}}),[n,x]);const Ne=e=>t.jsx(t.Fragment,{children:t.jsx(d.default,{label:`${he} ${p||"of"} ${e}`,className:f.twMerge("text-light-whiteSolid text-sm font-normal",v)})});return t.jsx(t.Fragment,{children:x&&ee?t.jsx("div",Object.assign({className:"flex flex-col fixed top-0 left-0 right-0 bottom-0 min-w-full min-h-screen z-[1000]"},{children:t.jsxs("div",Object.assign({className:"relative w-full h-full flex flex-col flex-grow"},{children:[t.jsx("div",{className:f.twMerge("fixed min-w-full min-h-screen bg-dark-blackCoral opacity-70 z-10",K)}),se?null:t.jsx(t.Fragment,{children:t.jsx(r.TransformWrapper,Object.assign({ref:we,disabled:ae,wheel:{smoothStep:.007}},{children:({zoomIn:e,zoomOut:i,resetTransform:a})=>t.jsxs(t.Fragment,{children:[t.jsx("div",Object.assign({className:"absolute top-0 left-0 flex flex-row  w-full z-30"},{children:t.jsxs("div",Object.assign({className:f.twMerge("relative w-full min-h-[56px] flex flex-row py-3 px-4",Q)},{children:[t.jsx("div",{className:"absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10"}),t.jsx(o.default,{label:J||"Preview",leftIcon:Z||"arrowbackleft",leftIconStyles:f.twMerge("fill-light-whiteSolid w-4 h-4 mr-4",V),onClick:ye,className:f.twMerge("bg-transparent border-none font-semibold text-base px-2 h-8 z-30 hover:bg-transparent",H)})]}))})),t.jsx("div",Object.assign({className:"flex flex-1 items-center justify-center w-full z-20"},{children:t.jsx(h,{children:t.jsx(r.TransformComponent,{children:t.jsx("div",Object.assign({className:"flex items-center justify-center w-full h-hull",onClick:()=>{ae&&ye()}},{children:t.jsx("div",Object.assign({className:s.default("max-w-[480px] max-h-[580px] flex items-center justify-center origin-center"),onMouseDown:je,onMouseUp:be,onMouseEnter:pe,onMouseLeave:ve,style:{cursor:re,transform:`rotate(${fe}deg)`}},{children:"image"===ee?t.jsx("img",{src:n[he-1],className:"object-cover max-w-full h-auto"}):t.jsx("canvas",{ref:ie,className:"w-full h-auto"},he)}))}))})})})),(n.length>1||ue>1)&&t.jsxs(t.Fragment,{children:[t.jsx("div",Object.assign({className:f.twMerge("absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30",1!==he?"visible":"invisible")},{children:t.jsx(c.default,{variant:"secondary",iconName:G||"chevronleft",iconStyles:f.twMerge("w-2 h-2",$),className:f.twMerge("",U),onClick:()=>{a(),1!==he&&(xe(0),ge(he-1))},isDisabledRipple:!0})})),t.jsx("div",Object.assign({className:f.twMerge("absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30",he!==ue?"visible":"invisible")},{children:t.jsx(c.default,{variant:"secondary",iconName:W||"chevronright",iconStyles:f.twMerge("w-2 h-2",E),className:f.twMerge("",A),onClick:()=>{a(),he!==ue&&(xe(0),ge(he+1))},isDisabledRipple:!0})}))]}),t.jsx("div",Object.assign({className:f.twMerge("absolute bottom-4 left-[50%] translate-x-[-50%] flex flex-row items-center min-h-[40px] z-30 rounded-full overflow-hidden",X)},{children:t.jsxs("div",Object.assign({className:"relative w-full h-full flex flex-row"},{children:[t.jsx("div",{className:f.twMerge("absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10",j)}),t.jsxs("div",Object.assign({className:"flex flex-row w-full h-full items-center p-2 z-20"},{children:[b&&t.jsxs(t.Fragment,{children:["document"===ee&&ue>1&&Ne(ue),"image"===ee&&n.length>1&&Ne(n.length)]}),N?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)}),t.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-4"},{children:[t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",k),onClick:()=>{a(),xe((e=>e-90))}},{children:t.jsx(u,{name:C||"rotateLeft",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",M)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",q),onClick:()=>{a(),xe((e=>e+90))}},{children:t.jsx(u,{name:R||"rotateRight",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",O)})}))]}))]}):null,S?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)}),t.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-4"},{children:[t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",B),onClick:()=>i()},{children:t.jsx(u,{name:_||"minus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",P)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",z),onClick:()=>e()},{children:t.jsx(u,{name:F||"plus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",L)})}))]}))]}):null,y?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)}),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",I),onClick:()=>{w?w("document"===ee?n[0]:n[he-1]):new l({url:"document"===ee?`${n[0]}?x-request=xhr`:`${n[he-1]}?x-request=xhr`}).catch((()=>{window.open(n[0],"_blank")}))}},{children:t.jsx(u,{name:T||"download",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",D)})}))]}):null]}))]}))}))]})}))})]}))})):null})};
+`;m.GlobalWorkerOptions.workerSrc=new URL("pdfjs-dist/build/pdf.worker.min.js","undefined"==typeof document?new(require("url").URL)("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("src/components/Preview/BasePreview.js",document.baseURI).href).toString(),module.exports=function({files:n,isOpen:x,onClose:g,onClickDownload:w,containerFooterStyles:j,isShowPageIndicator:b=!0,ofLabel:p,indicatorLabelStyles:v,isDownloadable:y=!0,isRotateable:N=!0,isZoomable:S=!0,iconRotateLeftContainerStyles:k,iconRotateLeftStyles:M,iconRotateLeftName:C,iconRotateRightContainerStyles:q,iconRotateRightStyles:O,iconRotateRighttName:R,iconMinusContainerStyles:B,iconMinusStyles:P,iconMinusName:_,iconPlusContainerStyles:z,iconPlusStyles:L,iconPlusName:F,iconDownloadContainerStyles:I,iconDownloadStyles:D,iconDownloadName:T,containerPrevStyles:U,iconPrevStyles:$,iconPrevName:G,containerNextStyles:A,iconNextStyles:E,iconNextName:W,containerPreviewStyles:H,iconPreviewStyles:V,iconPreviewName:Z,previewLabel:J,overlayContainerStyles:K,headerContainerStyles:Q,footerContainerStyles:X,separatorStyles:Y}){const[ee,te]=i.useState(),[se,le]=i.useState(!1),ie=i.useRef(null),[re,ne]=i.useState(""),[ae,oe]=i.useState(!0),[ce,de]=i.useState(null),[ue,me]=i.useState(0),[fe,xe]=i.useState(0),[he,ge]=i.useState(1),we=i.useRef(null),je=()=>{ne("grabbing")},be=()=>{ne("grab")},pe=()=>{ne("grab"),oe(!1)},ve=()=>{ne("default"),oe(!0)},ye=()=>{var e;null===(e=we.current)||void 0===e||e.resetTransform(),te(void 0),ne(""),oe(!0),de(null),me(0),ge(1),g()};i.useEffect((()=>{if(ce){const e=ie.current;if(e){const t=1,s=e.getContext("2d");m.getDocument(n[0]).promise.then((l=>{l.getPage(he).then((l=>{const i=l.getViewport({scale:t});e.width=i.width,e.height=i.height,l.render({canvasContext:s,viewport:i})}))}))}}}),[ee,ce,he]),i.useEffect((()=>{const t=()=>e.__awaiter(this,void 0,void 0,(function*(){const t=new FileReader;t.onload=t=>e.__awaiter(this,void 0,void 0,(function*(){var e;const s=new Uint8Array(null===(e=t.target)||void 0===e?void 0:e.result);de(s)}));const s=yield fetch(n[0]).then((e=>e.blob()));t.readAsArrayBuffer(s)}));if(n&&x){const e=a.isImage(n[0])?"image":"document";if("image"===e)return te(e),n.map((e=>a.isImage(e)?"image":"document")).includes("document")&&le(!0),void me(n.length);t(),te("document"),m.getDocument(n[0]).promise.then((e=>{const t=e.numPages;me(t)}))}}),[n,x]);const Ne=e=>t.jsx(t.Fragment,{children:t.jsx(d.default,{label:`${he} ${p||"of"} ${e}`,className:f.twMerge("text-light-whiteSolid text-sm font-normal",v)})});return t.jsx(t.Fragment,{children:x&&ee?t.jsx("div",Object.assign({className:"flex flex-col fixed top-0 left-0 right-0 bottom-0 min-w-full min-h-screen z-[1000]"},{children:t.jsxs("div",Object.assign({className:"relative w-full h-full flex flex-col flex-grow"},{children:[t.jsx("div",{className:f.twMerge("fixed min-w-full min-h-screen bg-dark-blackCoral opacity-70 z-10",K)}),se?null:t.jsx(t.Fragment,{children:t.jsx(r.TransformWrapper,Object.assign({ref:we,disabled:ae,wheel:{smoothStep:.007}},{children:({zoomIn:e,zoomOut:i,resetTransform:a})=>t.jsxs(t.Fragment,{children:[t.jsx("div",Object.assign({className:"absolute top-0 left-0 flex flex-row  w-full z-30"},{children:t.jsxs("div",Object.assign({className:f.twMerge("relative w-full min-h-[56px] flex flex-row py-3 px-4",Q)},{children:[t.jsx("div",{className:"absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10"}),t.jsx(o.default,{label:J||"Preview",leftIcon:Z||"arrowbackleft",leftIconStyles:f.twMerge("fill-light-whiteSolid w-4 h-4 mr-4",V),onClick:ye,className:f.twMerge("bg-transparent border-none font-semibold text-base px-2 h-8 z-30 hover:bg-transparent",H)})]}))})),t.jsx("div",Object.assign({className:"flex flex-1 items-center justify-center w-full z-20"},{children:t.jsx(h,{children:t.jsx(r.TransformComponent,{children:t.jsx("div",Object.assign({className:"flex items-center justify-center w-full h-hull",onClick:()=>{ae&&ye()}},{children:t.jsx("div",Object.assign({className:s.default("max-w-[480px] max-h-[580px] flex items-center justify-center origin-center"),onMouseDown:je,onMouseUp:be,onMouseEnter:pe,onMouseLeave:ve,style:{cursor:re,transform:`rotate(${fe}deg)`}},{children:"image"===ee?t.jsx("img",{src:n[he-1],className:"object-cover max-w-full h-auto"}):t.jsx("canvas",{ref:ie,className:"w-full h-auto"},he)}))}))})})})),(n.length>1||ue>1)&&t.jsxs(t.Fragment,{children:[t.jsx("div",Object.assign({className:f.twMerge("absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30",1!==he?"visible":"invisible")},{children:t.jsx(c.default,{variant:"secondary",iconName:G||"chevronleft",iconStyles:f.twMerge("w-2 h-2",$),className:f.twMerge("",U),onClick:()=>{a(),1!==he&&(xe(0),ge(he-1))},isDisabledRipple:!0})})),t.jsx("div",Object.assign({className:f.twMerge("absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30",he!==ue?"visible":"invisible")},{children:t.jsx(c.default,{variant:"secondary",iconName:W||"chevronright",iconStyles:f.twMerge("w-2 h-2",E),className:f.twMerge("",A),onClick:()=>{a(),he!==ue&&(xe(0),ge(he+1))},isDisabledRipple:!0})}))]}),t.jsx("div",Object.assign({className:f.twMerge("absolute bottom-4 left-[50%] translate-x-[-50%] flex flex-row items-center min-h-[40px] z-30 rounded-full overflow-hidden",X)},{children:t.jsxs("div",Object.assign({className:"relative w-full h-full flex flex-row"},{children:[t.jsx("div",{className:f.twMerge("absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10",j)}),t.jsxs("div",Object.assign({className:"flex flex-row w-full h-full items-center p-2 z-20"},{children:[b&&t.jsxs(t.Fragment,{children:["document"===ee&&ue>1&&Ne(ue),"image"===ee&&n.length>1&&Ne(n.length)]}),N?t.jsxs(t.Fragment,{children:[("document"===ee&&ue>1||"image"===ee&&n.length>1)&&t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)}),t.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-4"},{children:[t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",k),onClick:()=>{a(),xe((e=>e-90))}},{children:t.jsx(u,{name:C||"rotateLeft",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",M)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",q),onClick:()=>{a(),xe((e=>e+90))}},{children:t.jsx(u,{name:R||"rotateRight",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",O)})}))]}))]}):null,S?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)}),t.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-4"},{children:[t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",B),onClick:()=>i()},{children:t.jsx(u,{name:_||"minus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",P)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",z),onClick:()=>e()},{children:t.jsx(u,{name:F||"plus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",L)})}))]}))]}):null,y?t.jsxs(t.Fragment,{children:[t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)}),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",I),onClick:()=>{w?w("document"===ee?n[0]:n[he-1]):new l({url:"document"===ee?`${n[0]}?x-request=xhr`:`${n[he-1]}?x-request=xhr`}).catch((()=>{window.open(n[0],"_blank")}))}},{children:t.jsx(u,{name:T||"download",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",D)})}))]}):null]}))]}))}))]})}))})]}))})):null})};
 //# sourceMappingURL=BasePreview.js.map

package/build/src/components/Preview/BasePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasePreview.js","sources":["../../../../src/components/Preview/BasePreview.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport JsFileDownloader from 'js-file-downloader';\nimport { useEffect, useRef, useState } from 'react';\nimport { pdfjs } from 'react-pdf';\nimport { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';\nimport styled from 'styled-components';\nimport { twMerge } from 'tailwind-merge';\n\nimport { isImage } from '../../utils/isImage';\nimport { BaseButton, BaseButtonIcon } from '../Button';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport type { BasePreviewInterface } from './BasePreview.type';\n\nconst CustomWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  height: 100vh;\n  justify-content: center;\n  width: 100%;\n\n  div:first-child {\n    height: 100vh;\n    width: 100%;\n  }\n`;\n\npdfjs.GlobalWorkerOptions.workerSrc = new URL(\n  'pdfjs-dist/build/pdf.worker.min.js',\n  import.meta.url\n).toString();\n\ntype FileType = 'image' | 'document';\n\nfunction BasePreview({\n  files,\n  isOpen,\n  onClose,\n  onClickDownload,\n  containerFooterStyles,\n  isShowPageIndicator = true,\n  ofLabel,\n  indicatorLabelStyles,\n  isDownloadable = true,\n  isRotateable = true,\n  isZoomable = true,\n  iconRotateLeftContainerStyles,\n  iconRotateLeftStyles,\n  iconRotateLeftName,\n  iconRotateRightContainerStyles,\n  iconRotateRightStyles,\n  iconRotateRighttName,\n  iconMinusContainerStyles,\n  iconMinusStyles,\n  iconMinusName,\n  iconPlusContainerStyles,\n  iconPlusStyles,\n  iconPlusName,\n  iconDownloadContainerStyles,\n  iconDownloadStyles,\n  iconDownloadName,\n  containerPrevStyles,\n  iconPrevStyles,\n  iconPrevName,\n  containerNextStyles,\n  iconNextStyles,\n  iconNextName,\n  containerPreviewStyles,\n  iconPreviewStyles,\n  iconPreviewName,\n  previewLabel,\n  overlayContainerStyles,\n  headerContainerStyles,\n  footerContainerStyles,\n  separatorStyles\n}: BasePreviewInterface) {\n  const [type, setType] = useState<FileType | undefined>();\n  const [isFileNotValid, setIsFielNotValid] = useState<boolean>(false);\n\n  // state and red for type document\n  const canvasRef = useRef(null);\n  const [cursorStyle, setCursorStyle] = useState('');\n  const [isDisabled, setIsDisabled] = useState<boolean>(true);\n  const [pdfData, setPdfData] = useState<Uint8Array | null>(null);\n  const [totalPages, setTotalPages] = useState<number>(0);\n  const [rotateDeg, setRotateDeg] = useState<number>(0);\n\n  const [indexNum, setIndexNum] = useState<number>(1);\n  const previewRef = useRef(null);\n\n  const resetState = () => {\n    setType(undefined);\n    setCursorStyle('');\n    setIsDisabled(true);\n    setPdfData(null);\n    setTotalPages(0);\n    setIndexNum(1);\n  };\n\n  const handleMouseDown = () => {\n    setCursorStyle('grabbing');\n  };\n\n  const handleMouseUp = () => {\n    setCursorStyle('grab');\n  };\n\n  const handleMouseEnter = () => {\n    setCursorStyle('grab');\n    setIsDisabled(false);\n  };\n\n  const handleMouseLeave = () => {\n    setCursorStyle('default');\n    setIsDisabled(true);\n  };\n\n  const onDownloadFile = () => {\n    if (onClickDownload) {\n      if (type === 'document') {\n        onClickDownload(files[0]);\n      } else {\n        onClickDownload(files[indexNum - 1]);\n      }\n    } else {\n      new JsFileDownloader({\n        url:\n          type === 'document' ? `${files[0]}?x-request=xhr` : `${files[indexNum - 1]}?x-request=xhr`\n      }).catch(() => {\n        window.open(files[0], '_blank');\n      });\n    }\n  };\n\n  const handlePrev = () => {\n    if (indexNum === 1) return;\n\n    setRotateDeg(0);\n    setIndexNum(indexNum - 1);\n  };\n\n  const handleNext = () => {\n    if (indexNum === totalPages) return;\n\n    setRotateDeg(0);\n    setIndexNum(indexNum + 1);\n  };\n\n  const handleClose = () => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (previewRef.current as any)?.resetTransform();\n    resetState();\n    onClose();\n  };\n\n  useEffect(() => {\n    if (pdfData) {\n      const canvas = canvasRef.current;\n      if (canvas) {\n        const scale = 1;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const context = (canvas as any).getContext('2d');\n        pdfjs.getDocument(files[0]).promise.then((pdf) => {\n          pdf.getPage(indexNum).then((page) => {\n            const viewport = page.getViewport({ scale });\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (canvas as any).width = viewport.width;\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (canvas as any).height = viewport.height;\n            page.render({\n              canvasContext: context,\n              viewport: viewport\n            });\n          });\n        });\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type, pdfData, indexNum]);\n\n  useEffect(() => {\n    const getDocument = async () => {\n      const reader = new FileReader();\n      reader.onload = async (event) => {\n        const pdfData = new Uint8Array(event.target?.result as ArrayBufferLike);\n        setPdfData(pdfData);\n      };\n      const blob = await fetch(files[0]).then((r) => r.blob());\n      reader.readAsArrayBuffer(blob);\n    };\n\n    const getImage = () => {\n      const tempFiles = files.map((file) => (isImage(file) ? 'image' : 'document'));\n\n      if (tempFiles.includes('document')) {\n        setIsFielNotValid(true);\n      }\n\n      setTotalPages(files.length);\n    };\n\n    if (files && isOpen) {\n      const tempType = isImage(files[0]) ? 'image' : 'document';\n\n      if (tempType === 'image') {\n        setType(tempType);\n        getImage();\n        return;\n      }\n\n      getDocument();\n      setType('document');\n\n      pdfjs.getDocument(files[0]).promise.then((pdf) => {\n        const totalPages = pdf.numPages;\n        setTotalPages(totalPages);\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [files, isOpen]);\n\n  const renderPageIndicator = (total: number) => (\n    <>\n      <BaseText\n        label={`${indexNum} ${ofLabel || 'of'} ${total}`}\n        className={twMerge('text-light-whiteSolid text-sm font-normal', indicatorLabelStyles)}\n      />\n    </>\n  );\n\n  return (\n    <>\n      {isOpen && type ? (\n        <div className='flex flex-col fixed top-0 left-0 right-0 bottom-0 min-w-full min-h-screen z-[1000]'>\n          <div className='relative w-full h-full flex flex-col flex-grow'>\n            {/* Overlay */}\n            <div\n              className={twMerge(\n                'fixed min-w-full min-h-screen bg-dark-blackCoral opacity-70 z-10',\n                overlayContainerStyles\n              )}\n            />\n\n            {!isFileNotValid ? (\n              <>\n                {/* Body */}\n                <TransformWrapper\n                  ref={previewRef}\n                  disabled={isDisabled}\n                  wheel={{ smoothStep: 0.007 }}\n                >\n                  {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n                  {({ zoomIn, zoomOut, resetTransform }) => (\n                    <>\n                      {/* Header */}\n                      <div className='absolute top-0 left-0 flex flex-row  w-full z-30'>\n                        <div\n                          className={twMerge(\n                            'relative w-full min-h-[56px] flex flex-row py-3 px-4',\n                            headerContainerStyles\n                          )}\n                        >\n                          <div className='absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10' />\n                          <BaseButton\n                            label={previewLabel || 'Preview'}\n                            leftIcon={iconPreviewName || 'arrowbackleft'}\n                            leftIconStyles={twMerge(\n                              'fill-light-whiteSolid w-4 h-4 mr-4',\n                              iconPreviewStyles\n                            )}\n                            onClick={handleClose}\n                            className={twMerge(\n                              'bg-transparent border-none font-semibold text-base px-2 h-8 z-30 hover:bg-transparent',\n                              containerPreviewStyles\n                            )}\n                          />\n                        </div>\n                      </div>\n                      <div className='flex flex-1 items-center justify-center w-full z-20'>\n                        <CustomWrapper>\n                          <TransformComponent>\n                            <div\n                              className='flex items-center justify-center w-full h-hull'\n                              onClick={() => {\n                                if (isDisabled) handleClose();\n                              }}\n                            >\n                              <div\n                                className={classNames(\n                                  'max-w-[480px] max-h-[580px] flex items-center justify-center origin-center'\n                                )}\n                                onMouseDown={handleMouseDown}\n                                onMouseUp={handleMouseUp}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                                style={{\n                                  cursor: cursorStyle,\n                                  transform: `rotate(${rotateDeg}deg)`\n                                }}\n                              >\n                                {type === 'image' ? (\n                                  <img\n                                    src={files[indexNum - 1]}\n                                    className='object-cover max-w-full h-auto'\n                                  />\n                                ) : (\n                                  <canvas\n                                    key={indexNum}\n                                    ref={canvasRef}\n                                    className='w-full h-auto'\n                                  />\n                                )}\n                              </div>\n                            </div>\n                          </TransformComponent>\n                        </CustomWrapper>\n                      </div>\n\n                      {(files.length > 1 || totalPages > 1) && (\n                        <>\n                          <div\n                            className={twMerge(\n                              'absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30',\n                              indexNum !== 1 ? 'visible' : 'invisible'\n                            )}\n                          >\n                            <BaseButtonIcon\n                              variant='secondary'\n                              iconName={iconPrevName || 'chevronleft'}\n                              iconStyles={twMerge('w-2 h-2', iconPrevStyles)}\n                              className={twMerge('', containerPrevStyles)}\n                              onClick={() => {\n                                resetTransform();\n                                handlePrev();\n                              }}\n                              isDisabledRipple\n                            />\n                          </div>\n                          <div\n                            className={twMerge(\n                              'absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30',\n                              indexNum !== totalPages ? 'visible' : 'invisible'\n                            )}\n                          >\n                            <BaseButtonIcon\n                              variant='secondary'\n                              iconName={iconNextName || 'chevronright'}\n                              iconStyles={twMerge('w-2 h-2', iconNextStyles)}\n                              className={twMerge('', containerNextStyles)}\n                              onClick={() => {\n                                resetTransform();\n                                handleNext();\n                              }}\n                              isDisabledRipple\n                            />\n                          </div>\n                        </>\n                      )}\n\n                      {/* Footer */}\n                      <div\n                        className={twMerge(\n                          'absolute bottom-4 left-[50%] translate-x-[-50%] flex flex-row items-center min-h-[40px] z-30 rounded-full overflow-hidden',\n                          footerContainerStyles\n                        )}\n                      >\n                        <div className='relative w-full h-full flex flex-row'>\n                          <div\n                            className={twMerge(\n                              'absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10',\n                              containerFooterStyles\n                            )}\n                          />\n                          <div className='flex flex-row w-full h-full items-center p-2 z-20'>\n                            {isShowPageIndicator && (\n                              <>\n                                {type === 'document' &&\n                                  totalPages > 1 &&\n                                  renderPageIndicator(totalPages)}\n                                {type === 'image' &&\n                                  files.length > 1 &&\n                                  renderPageIndicator(files.length)}\n                              </>\n                            )}\n                            {isRotateable ? (\n                              <>\n                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\n                                <div className='flex flex-row items-center gap-x-4'>\n                                  <div\n                                    className={twMerge(\n                                      // eslint-disable-next-line sonarjs/no-duplicate-string\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconRotateLeftContainerStyles\n                                    )}\n                                    onClick={() => {\n                                      resetTransform();\n                                      setRotateDeg((prev) => prev - 90);\n                                    }}\n                                  >\n                                    <Icon\n                                      name={iconRotateLeftName || 'rotateLeft'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-[15px] h-[15px]',\n                                        iconRotateLeftStyles\n                                      )}\n                                    />\n                                  </div>\n                                  <div\n                                    className={twMerge(\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconRotateRightContainerStyles\n                                    )}\n                                    onClick={() => {\n                                      resetTransform();\n                                      setRotateDeg((prev) => prev + 90);\n                                    }}\n                                  >\n                                    <Icon\n                                      name={iconRotateRighttName || 'rotateRight'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-[15px] h-[15px]',\n                                        iconRotateRightStyles\n                                      )}\n                                    />\n                                  </div>\n                                </div>\n                              </>\n                            ) : null}\n                            {isZoomable ? (\n                              <>\n                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\n                                <div className='flex flex-row items-center gap-x-4'>\n                                  <div\n                                    className={twMerge(\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconMinusContainerStyles\n                                    )}\n                                    onClick={() => zoomOut()}\n                                  >\n                                    <Icon\n                                      name={iconMinusName || 'minus'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-3 h-3',\n                                        iconMinusStyles\n                                      )}\n                                    />\n                                  </div>\n                                  <div\n                                    className={twMerge(\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconPlusContainerStyles\n                                    )}\n                                    onClick={() => zoomIn()}\n                                  >\n                                    <Icon\n                                      name={iconPlusName || 'plus'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-3 h-3',\n                                        iconPlusStyles\n                                      )}\n                                    />\n                                  </div>\n                                </div>\n                              </>\n                            ) : null}\n                            {isDownloadable ? (\n                              <>\n                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\n                                <div\n                                  className={twMerge(\n                                    'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                    iconDownloadContainerStyles\n                                  )}\n                                  onClick={() => onDownloadFile()}\n                                >\n                                  <Icon\n                                    name={iconDownloadName || 'download'}\n                                    className={twMerge(\n                                      'fill-light-whiteSolid w-[15px] h-[15px]',\n                                      iconDownloadStyles\n                                    )}\n                                  />\n                                </div>\n                              </>\n                            ) : null}\n                          </div>\n                        </div>\n                      </div>\n                    </>\n                  )}\n                </TransformWrapper>\n              </>\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nexport default BasePreview;\n"],"names":["CustomWrapper","styled","div","pdfjs","GlobalWorkerOptions","workerSrc","URL","document","require","__filename","href","currentScript","src","baseURI","toString","files","isOpen","onClose","onClickDownload","containerFooterStyles","isShowPageIndicator","ofLabel","indicatorLabelStyles","isDownloadable","isRotateable","isZoomable","iconRotateLeftContainerStyles","iconRotateLeftStyles","iconRotateLeftName","iconRotateRightContainerStyles","iconRotateRightStyles","iconRotateRighttName","iconMinusContainerStyles","iconMinusStyles","iconMinusName","iconPlusContainerStyles","iconPlusStyles","iconPlusName","iconDownloadContainerStyles","iconDownloadStyles","iconDownloadName","containerPrevStyles","iconPrevStyles","iconPrevName","containerNextStyles","iconNextStyles","iconNextName","containerPreviewStyles","iconPreviewStyles","iconPreviewName","previewLabel","overlayContainerStyles","headerContainerStyles","footerContainerStyles","separatorStyles","type","setType","useState","isFileNotValid","setIsFielNotValid","canvasRef","useRef","cursorStyle","setCursorStyle","isDisabled","setIsDisabled","pdfData","setPdfData","totalPages","setTotalPages","rotateDeg","setRotateDeg","indexNum","setIndexNum","previewRef","handleMouseDown","handleMouseUp","handleMouseEnter","handleMouseLeave","handleClose","_a","current","resetTransform","undefined","useEffect","canvas","scale","context","getContext","getDocument","promise","then","pdf","getPage","page","viewport","getViewport","width","height","render","canvasContext","__awaiter","this","reader","FileReader","onload","event","Uint8Array","target","result","blob","fetch","r","readAsArrayBuffer","tempType","isImage","map","file","includes","length","numPages","renderPageIndicator","total","_jsx","_Fragment","children","BaseText","label","className","twMerge","_jsxs","jsx","TransformWrapper","Object","assign","ref","disabled","wheel","smoothStep","zoomIn","zoomOut","Fragment","jsxs","BaseButton","leftIcon","leftIconStyles","onClick","TransformComponent","classNames","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","style","cursor","transform","BaseButtonIcon","variant","iconName","iconStyles","isDisabledRipple","prev","Icon","name","JsFileDownloader","url","catch","window","open"],"mappings":"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"}
+{"version":3,"file":"BasePreview.js","sources":["../../../../src/components/Preview/BasePreview.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport JsFileDownloader from 'js-file-downloader';\nimport { useEffect, useRef, useState } from 'react';\nimport { pdfjs } from 'react-pdf';\nimport { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';\nimport styled from 'styled-components';\nimport { twMerge } from 'tailwind-merge';\n\nimport { isImage } from '../../utils/isImage';\nimport { BaseButton, BaseButtonIcon } from '../Button';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport type { BasePreviewInterface } from './BasePreview.type';\n\nconst CustomWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  height: 100vh;\n  justify-content: center;\n  width: 100%;\n\n  div:first-child {\n    height: 100vh;\n    width: 100%;\n  }\n`;\n\npdfjs.GlobalWorkerOptions.workerSrc = new URL(\n  'pdfjs-dist/build/pdf.worker.min.js',\n  import.meta.url\n).toString();\n\ntype FileType = 'image' | 'document';\n\nfunction BasePreview({\n  files,\n  isOpen,\n  onClose,\n  onClickDownload,\n  containerFooterStyles,\n  isShowPageIndicator = true,\n  ofLabel,\n  indicatorLabelStyles,\n  isDownloadable = true,\n  isRotateable = true,\n  isZoomable = true,\n  iconRotateLeftContainerStyles,\n  iconRotateLeftStyles,\n  iconRotateLeftName,\n  iconRotateRightContainerStyles,\n  iconRotateRightStyles,\n  iconRotateRighttName,\n  iconMinusContainerStyles,\n  iconMinusStyles,\n  iconMinusName,\n  iconPlusContainerStyles,\n  iconPlusStyles,\n  iconPlusName,\n  iconDownloadContainerStyles,\n  iconDownloadStyles,\n  iconDownloadName,\n  containerPrevStyles,\n  iconPrevStyles,\n  iconPrevName,\n  containerNextStyles,\n  iconNextStyles,\n  iconNextName,\n  containerPreviewStyles,\n  iconPreviewStyles,\n  iconPreviewName,\n  previewLabel,\n  overlayContainerStyles,\n  headerContainerStyles,\n  footerContainerStyles,\n  separatorStyles\n}: BasePreviewInterface) {\n  const [type, setType] = useState<FileType | undefined>();\n  const [isFileNotValid, setIsFielNotValid] = useState<boolean>(false);\n\n  // state and red for type document\n  const canvasRef = useRef(null);\n  const [cursorStyle, setCursorStyle] = useState('');\n  const [isDisabled, setIsDisabled] = useState<boolean>(true);\n  const [pdfData, setPdfData] = useState<Uint8Array | null>(null);\n  const [totalPages, setTotalPages] = useState<number>(0);\n  const [rotateDeg, setRotateDeg] = useState<number>(0);\n\n  const [indexNum, setIndexNum] = useState<number>(1);\n  const previewRef = useRef(null);\n\n  const resetState = () => {\n    setType(undefined);\n    setCursorStyle('');\n    setIsDisabled(true);\n    setPdfData(null);\n    setTotalPages(0);\n    setIndexNum(1);\n  };\n\n  const handleMouseDown = () => {\n    setCursorStyle('grabbing');\n  };\n\n  const handleMouseUp = () => {\n    setCursorStyle('grab');\n  };\n\n  const handleMouseEnter = () => {\n    setCursorStyle('grab');\n    setIsDisabled(false);\n  };\n\n  const handleMouseLeave = () => {\n    setCursorStyle('default');\n    setIsDisabled(true);\n  };\n\n  const onDownloadFile = () => {\n    if (onClickDownload) {\n      if (type === 'document') {\n        onClickDownload(files[0]);\n      } else {\n        onClickDownload(files[indexNum - 1]);\n      }\n    } else {\n      new JsFileDownloader({\n        url:\n          type === 'document' ? `${files[0]}?x-request=xhr` : `${files[indexNum - 1]}?x-request=xhr`\n      }).catch(() => {\n        window.open(files[0], '_blank');\n      });\n    }\n  };\n\n  const handlePrev = () => {\n    if (indexNum === 1) return;\n\n    setRotateDeg(0);\n    setIndexNum(indexNum - 1);\n  };\n\n  const handleNext = () => {\n    if (indexNum === totalPages) return;\n\n    setRotateDeg(0);\n    setIndexNum(indexNum + 1);\n  };\n\n  const handleClose = () => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (previewRef.current as any)?.resetTransform();\n    resetState();\n    onClose();\n  };\n\n  useEffect(() => {\n    if (pdfData) {\n      const canvas = canvasRef.current;\n      if (canvas) {\n        const scale = 1;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const context = (canvas as any).getContext('2d');\n        pdfjs.getDocument(files[0]).promise.then((pdf) => {\n          pdf.getPage(indexNum).then((page) => {\n            const viewport = page.getViewport({ scale });\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (canvas as any).width = viewport.width;\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (canvas as any).height = viewport.height;\n            page.render({\n              canvasContext: context,\n              viewport: viewport\n            });\n          });\n        });\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type, pdfData, indexNum]);\n\n  useEffect(() => {\n    const getDocument = async () => {\n      const reader = new FileReader();\n      reader.onload = async (event) => {\n        const pdfData = new Uint8Array(event.target?.result as ArrayBufferLike);\n        setPdfData(pdfData);\n      };\n      const blob = await fetch(files[0]).then((r) => r.blob());\n      reader.readAsArrayBuffer(blob);\n    };\n\n    const getImage = () => {\n      const tempFiles = files.map((file) => (isImage(file) ? 'image' : 'document'));\n\n      if (tempFiles.includes('document')) {\n        setIsFielNotValid(true);\n      }\n\n      setTotalPages(files.length);\n    };\n\n    if (files && isOpen) {\n      const tempType = isImage(files[0]) ? 'image' : 'document';\n\n      if (tempType === 'image') {\n        setType(tempType);\n        getImage();\n        return;\n      }\n\n      getDocument();\n      setType('document');\n\n      pdfjs.getDocument(files[0]).promise.then((pdf) => {\n        const totalPages = pdf.numPages;\n        setTotalPages(totalPages);\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [files, isOpen]);\n\n  const renderPageIndicator = (total: number) => (\n    <>\n      <BaseText\n        label={`${indexNum} ${ofLabel || 'of'} ${total}`}\n        className={twMerge('text-light-whiteSolid text-sm font-normal', indicatorLabelStyles)}\n      />\n    </>\n  );\n\n  return (\n    <>\n      {isOpen && type ? (\n        <div className='flex flex-col fixed top-0 left-0 right-0 bottom-0 min-w-full min-h-screen z-[1000]'>\n          <div className='relative w-full h-full flex flex-col flex-grow'>\n            {/* Overlay */}\n            <div\n              className={twMerge(\n                'fixed min-w-full min-h-screen bg-dark-blackCoral opacity-70 z-10',\n                overlayContainerStyles\n              )}\n            />\n\n            {!isFileNotValid ? (\n              <>\n                {/* Body */}\n                <TransformWrapper\n                  ref={previewRef}\n                  disabled={isDisabled}\n                  wheel={{ smoothStep: 0.007 }}\n                >\n                  {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n                  {({ zoomIn, zoomOut, resetTransform }) => (\n                    <>\n                      {/* Header */}\n                      <div className='absolute top-0 left-0 flex flex-row  w-full z-30'>\n                        <div\n                          className={twMerge(\n                            'relative w-full min-h-[56px] flex flex-row py-3 px-4',\n                            headerContainerStyles\n                          )}\n                        >\n                          <div className='absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10' />\n                          <BaseButton\n                            label={previewLabel || 'Preview'}\n                            leftIcon={iconPreviewName || 'arrowbackleft'}\n                            leftIconStyles={twMerge(\n                              'fill-light-whiteSolid w-4 h-4 mr-4',\n                              iconPreviewStyles\n                            )}\n                            onClick={handleClose}\n                            className={twMerge(\n                              'bg-transparent border-none font-semibold text-base px-2 h-8 z-30 hover:bg-transparent',\n                              containerPreviewStyles\n                            )}\n                          />\n                        </div>\n                      </div>\n                      <div className='flex flex-1 items-center justify-center w-full z-20'>\n                        <CustomWrapper>\n                          <TransformComponent>\n                            <div\n                              className='flex items-center justify-center w-full h-hull'\n                              onClick={() => {\n                                if (isDisabled) handleClose();\n                              }}\n                            >\n                              <div\n                                className={classNames(\n                                  'max-w-[480px] max-h-[580px] flex items-center justify-center origin-center'\n                                )}\n                                onMouseDown={handleMouseDown}\n                                onMouseUp={handleMouseUp}\n                                onMouseEnter={handleMouseEnter}\n                                onMouseLeave={handleMouseLeave}\n                                style={{\n                                  cursor: cursorStyle,\n                                  transform: `rotate(${rotateDeg}deg)`\n                                }}\n                              >\n                                {type === 'image' ? (\n                                  <img\n                                    src={files[indexNum - 1]}\n                                    className='object-cover max-w-full h-auto'\n                                  />\n                                ) : (\n                                  <canvas\n                                    key={indexNum}\n                                    ref={canvasRef}\n                                    className='w-full h-auto'\n                                  />\n                                )}\n                              </div>\n                            </div>\n                          </TransformComponent>\n                        </CustomWrapper>\n                      </div>\n\n                      {(files.length > 1 || totalPages > 1) && (\n                        <>\n                          <div\n                            className={twMerge(\n                              'absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30',\n                              indexNum !== 1 ? 'visible' : 'invisible'\n                            )}\n                          >\n                            <BaseButtonIcon\n                              variant='secondary'\n                              iconName={iconPrevName || 'chevronleft'}\n                              iconStyles={twMerge('w-2 h-2', iconPrevStyles)}\n                              className={twMerge('', containerPrevStyles)}\n                              onClick={() => {\n                                resetTransform();\n                                handlePrev();\n                              }}\n                              isDisabledRipple\n                            />\n                          </div>\n                          <div\n                            className={twMerge(\n                              'absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30',\n                              indexNum !== totalPages ? 'visible' : 'invisible'\n                            )}\n                          >\n                            <BaseButtonIcon\n                              variant='secondary'\n                              iconName={iconNextName || 'chevronright'}\n                              iconStyles={twMerge('w-2 h-2', iconNextStyles)}\n                              className={twMerge('', containerNextStyles)}\n                              onClick={() => {\n                                resetTransform();\n                                handleNext();\n                              }}\n                              isDisabledRipple\n                            />\n                          </div>\n                        </>\n                      )}\n\n                      {/* Footer */}\n                      <div\n                        className={twMerge(\n                          'absolute bottom-4 left-[50%] translate-x-[-50%] flex flex-row items-center min-h-[40px] z-30 rounded-full overflow-hidden',\n                          footerContainerStyles\n                        )}\n                      >\n                        <div className='relative w-full h-full flex flex-row'>\n                          <div\n                            className={twMerge(\n                              'absolute top-0 left-0 w-full h-full bg-dark-blackCoral opacity-80 z-10',\n                              containerFooterStyles\n                            )}\n                          />\n                          <div className='flex flex-row w-full h-full items-center p-2 z-20'>\n                            {isShowPageIndicator && (\n                              <>\n                                {type === 'document' &&\n                                  totalPages > 1 &&\n                                  renderPageIndicator(totalPages)}\n                                {type === 'image' &&\n                                  files.length > 1 &&\n                                  renderPageIndicator(files.length)}\n                              </>\n                            )}\n                            {isRotateable ? (\n                              <>\n                                {((type === 'document' && totalPages > 1) ||\n                                  (type === 'image' && files.length > 1)) && (\n                                  <div\n                                    className={twMerge(\n                                      'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                      separatorStyles\n                                    )}\n                                  />\n                                )}\n                                <div className='flex flex-row items-center gap-x-4'>\n                                  <div\n                                    className={twMerge(\n                                      // eslint-disable-next-line sonarjs/no-duplicate-string\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconRotateLeftContainerStyles\n                                    )}\n                                    onClick={() => {\n                                      resetTransform();\n                                      setRotateDeg((prev) => prev - 90);\n                                    }}\n                                  >\n                                    <Icon\n                                      name={iconRotateLeftName || 'rotateLeft'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-[15px] h-[15px]',\n                                        iconRotateLeftStyles\n                                      )}\n                                    />\n                                  </div>\n                                  <div\n                                    className={twMerge(\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconRotateRightContainerStyles\n                                    )}\n                                    onClick={() => {\n                                      resetTransform();\n                                      setRotateDeg((prev) => prev + 90);\n                                    }}\n                                  >\n                                    <Icon\n                                      name={iconRotateRighttName || 'rotateRight'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-[15px] h-[15px]',\n                                        iconRotateRightStyles\n                                      )}\n                                    />\n                                  </div>\n                                </div>\n                              </>\n                            ) : null}\n                            {isZoomable ? (\n                              <>\n                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\n                                <div className='flex flex-row items-center gap-x-4'>\n                                  <div\n                                    className={twMerge(\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconMinusContainerStyles\n                                    )}\n                                    onClick={() => zoomOut()}\n                                  >\n                                    <Icon\n                                      name={iconMinusName || 'minus'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-3 h-3',\n                                        iconMinusStyles\n                                      )}\n                                    />\n                                  </div>\n                                  <div\n                                    className={twMerge(\n                                      'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                      iconPlusContainerStyles\n                                    )}\n                                    onClick={() => zoomIn()}\n                                  >\n                                    <Icon\n                                      name={iconPlusName || 'plus'}\n                                      className={twMerge(\n                                        'fill-light-whiteSolid w-3 h-3',\n                                        iconPlusStyles\n                                      )}\n                                    />\n                                  </div>\n                                </div>\n                              </>\n                            ) : null}\n                            {isDownloadable ? (\n                              <>\n                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\n                                <div\n                                  className={twMerge(\n                                    'flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer',\n                                    iconDownloadContainerStyles\n                                  )}\n                                  onClick={() => onDownloadFile()}\n                                >\n                                  <Icon\n                                    name={iconDownloadName || 'download'}\n                                    className={twMerge(\n                                      'fill-light-whiteSolid w-[15px] h-[15px]',\n                                      iconDownloadStyles\n                                    )}\n                                  />\n                                </div>\n                              </>\n                            ) : null}\n                          </div>\n                        </div>\n                      </div>\n                    </>\n                  )}\n                </TransformWrapper>\n              </>\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nexport default BasePreview;\n"],"names":["CustomWrapper","styled","div","pdfjs","GlobalWorkerOptions","workerSrc","URL","document","require","__filename","href","currentScript","src","baseURI","toString","files","isOpen","onClose","onClickDownload","containerFooterStyles","isShowPageIndicator","ofLabel","indicatorLabelStyles","isDownloadable","isRotateable","isZoomable","iconRotateLeftContainerStyles","iconRotateLeftStyles","iconRotateLeftName","iconRotateRightContainerStyles","iconRotateRightStyles","iconRotateRighttName","iconMinusContainerStyles","iconMinusStyles","iconMinusName","iconPlusContainerStyles","iconPlusStyles","iconPlusName","iconDownloadContainerStyles","iconDownloadStyles","iconDownloadName","containerPrevStyles","iconPrevStyles","iconPrevName","containerNextStyles","iconNextStyles","iconNextName","containerPreviewStyles","iconPreviewStyles","iconPreviewName","previewLabel","overlayContainerStyles","headerContainerStyles","footerContainerStyles","separatorStyles","type","setType","useState","isFileNotValid","setIsFielNotValid","canvasRef","useRef","cursorStyle","setCursorStyle","isDisabled","setIsDisabled","pdfData","setPdfData","totalPages","setTotalPages","rotateDeg","setRotateDeg","indexNum","setIndexNum","previewRef","handleMouseDown","handleMouseUp","handleMouseEnter","handleMouseLeave","handleClose","_a","current","resetTransform","undefined","useEffect","canvas","scale","context","getContext","getDocument","promise","then","pdf","getPage","page","viewport","getViewport","width","height","render","canvasContext","__awaiter","this","reader","FileReader","onload","event","Uint8Array","target","result","blob","fetch","r","readAsArrayBuffer","tempType","isImage","map","file","includes","length","numPages","renderPageIndicator","total","_jsx","_Fragment","children","BaseText","label","className","twMerge","_jsxs","jsx","TransformWrapper","Object","assign","ref","disabled","wheel","smoothStep","zoomIn","zoomOut","Fragment","jsxs","BaseButton","leftIcon","leftIconStyles","onClick","TransformComponent","classNames","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","style","cursor","transform","BaseButtonIcon","variant","iconName","iconStyles","isDisabledRipple","prev","Icon","name","JsFileDownloader","url","catch","window","open"],"mappings":"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"}

package/build/src/components/SelectPicker/BaseInfiniteSelectPicker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime");require("../../../node_modules/react-query/es/react/setBatchUpdatesFn.js"),require("../../../node_modules/react-query/es/react/setLogger.js");var t=require("../../../node_modules/react-query/es/react/QueryClientProvider.js"),s=require("./InfiniteSelectPicker.js");const i=new(require("../../../node_modules/react-query/es/core/queryClient.js").QueryClient)({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});module.exports=function(u){var{queryClient:n=i}=u,c=e.__rest(u,["queryClient"]);return r.jsx(t.QueryClientProvider,Object.assign({client:n},{children:r.jsx(s,Object.assign({},c))}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react-query"),t=require("./InfiniteSelectPicker.js");const n=new i.QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});module.exports=function(s){var{queryClient:u=n}=s,c=e.__rest(s,["queryClient"]);return r.jsx(i.QueryClientProvider,Object.assign({client:u},{children:r.jsx(t,Object.assign({},c))}))};
 //# sourceMappingURL=BaseInfiniteSelectPicker.js.map

package/build/src/components/SelectPicker/BaseInfiniteSelectPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInfiniteSelectPicker.js","sources":["../../../../src/components/SelectPicker/BaseInfiniteSelectPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { QueryClient, QueryClientProvider } from 'react-query';\n\nimport { BaseInfiniteSelectPickerInterface } from './BaseInfiniteSelectPicker.type';\nimport BaseInfiniteSelectPicker from './InfiniteSelectPicker';\n\n// Create a default query client\nconst defaultQueryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false\n    }\n  }\n});\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface BaseInfiniteSelectPickerWithProviderProps<T = any>\n  extends BaseInfiniteSelectPickerInterface<T> {\n  queryClient?: QueryClient;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction BaseInfiniteSelectPickerWithProvider<T = any>({\n  queryClient = defaultQueryClient,\n  ...props\n}: BaseInfiniteSelectPickerWithProviderProps<T>) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <BaseInfiniteSelectPicker {...props} />\n    </QueryClientProvider>\n  );\n}\n\nexport default BaseInfiniteSelectPickerWithProvider;\n"],"names":["defaultQueryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","_a","queryClient","props","__rest","_jsx","QueryClientProvider","Object","assign","client","children","BaseInfiniteSelectPicker"],"mappings":"iWAOA,MAAMA,EAAqB,wEAAIC,aAAY,CACzCC,eAAgB,CACdC,QAAS,CACPC,sBAAsB,qBAY5B,SAAuDC,OAAAC,YACrDA,EAAcN,GAAkBK,EAC7BE,EAAKC,EAAAA,OAAAH,EAF6C,iBAIrD,OACEI,EAAAA,IAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAACC,OAAQP,GAC3B,CAAAQ,SAAAL,EAAAA,IAACM,EAA6BJ,OAAAC,OAAA,CAAA,EAAAL,MAGpC"}
+{"version":3,"file":"BaseInfiniteSelectPicker.js","sources":["../../../../src/components/SelectPicker/BaseInfiniteSelectPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { QueryClient, QueryClientProvider } from 'react-query';\n\nimport { BaseInfiniteSelectPickerInterface } from './BaseInfiniteSelectPicker.type';\nimport BaseInfiniteSelectPicker from './InfiniteSelectPicker';\n\n// Create a default query client\nconst defaultQueryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false\n    }\n  }\n});\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface BaseInfiniteSelectPickerWithProviderProps<T = any>\n  extends BaseInfiniteSelectPickerInterface<T> {\n  queryClient?: QueryClient;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction BaseInfiniteSelectPickerWithProvider<T = any>({\n  queryClient = defaultQueryClient,\n  ...props\n}: BaseInfiniteSelectPickerWithProviderProps<T>) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <BaseInfiniteSelectPicker {...props} />\n    </QueryClientProvider>\n  );\n}\n\nexport default BaseInfiniteSelectPickerWithProvider;\n"],"names":["defaultQueryClient","QueryClient","defaultOptions","queries","refetchOnWindowFocus","_a","queryClient","props","__rest","_jsx","QueryClientProvider","Object","assign","client","children","BaseInfiniteSelectPicker"],"mappings":"yJAOA,MAAMA,EAAqB,IAAIC,EAAAA,YAAY,CACzCC,eAAgB,CACdC,QAAS,CACPC,sBAAsB,qBAY5B,SAAuDC,OAAAC,YACrDA,EAAcN,GAAkBK,EAC7BE,EAAKC,EAAAA,OAAAH,EAF6C,iBAIrD,OACEI,EAAAA,IAACC,EAAAA,oBAAmBC,OAAAC,OAAA,CAACC,OAAQP,GAC3B,CAAAQ,SAAAL,EAAAA,IAACM,EAA6BJ,OAAAC,OAAA,CAAA,EAAAL,MAGpC"}

package/build/src/components/SelectPicker/InfiniteSelectPicker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),r=require("../../../node_modules/classnames/index.js"),s=require("react");require("../../../node_modules/react-query/es/react/setBatchUpdatesFn.js"),require("../../../node_modules/react-query/es/react/setLogger.js");var l=require("../../../node_modules/react-query/es/react/QueryClientProvider.js"),a=require("../../hooks/useDebounce.js"),n=require("../../hooks/useInfinitePicker.js"),o=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var i=require("../Text/BaseText.js");require("../Text/Text.js");var d=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var u=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var c=require("../Icon/Icon.js"),x=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),f=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=function({fetchFn:m,queryKey:g,debounceMs:j=300,disabled:h=!1,pageSize:p=100,label:v,labelStyles:w,value:y,valueStyles:k,placeholder:q,placeholderStyles:N,containerStyles:S,activeContainerStyles:B,iconStyles:M,itemsContainerStyles:C,itemContainerStyles:O,oddBgColor:R,evenBgColor:L,isDisabled:F=!1,position:G="bottom-start",isAutoFlip:_,onSelectItem:I,onClean:T,isCleanable:E,isError:P,errorMessage:D,errorMessageStyles:z,helperMessage:$,helperMessageStyles:K,isSearchable:Q,searchContainerStyles:H,activeSearchStyles:A,searchPlaceholder:U,searchStyles:J,iconSearchStyles:V,isShowFooterButton:W,footerButtonContainerStyles:X,footerButtonLabel:Y,onClickFooterButton:Z,noResultsLabel:ee,noResultsLabelStyles:te,variant:re="box",data:se,isRequired:le,labelRequired:ae,labelRequiredStyles:ne,containerRequiredStyles:oe,onSearch:ie,itemTextStyles:de,listContainerStyles:ue,isClearSearchOnClose:ce,activeItemTextStyles:xe}){const be=l.useQueryClient(),fe=s.useRef(null),me=s.useRef(null),[ge,je]=s.useState(""),he=a.useDebounce(ge,j),[pe,ve]=s.useState(0),we=s.useRef(null),[ye,ke]=s.useState(!1),{data:qe,isLoading:Ne,isFetchingNextPage:Se,hasNextPage:Be,fetchNextPage:Me}=n.useInfinitePicker({fetchFn:m,queryKey:g,search:he,pageSize:p,enabled:!h}),Ce=s.useMemo((()=>qe||[]),[qe]),Oe=(t,s)=>e.jsx(b.ListboxOption,Object.assign({className:x.twMerge(r.default("relative cursor-default select-none list-none",o(O,"p-"),o(O,"px-"),o(O,"py-"))),value:t},{children:({active:l})=>e.jsx("div",Object.assign({className:x.twMerge(r.default("w-full flex items-center !min-h-[32px] p-2 cursor-pointer",O,(!!o(O,"p-")||!!o(O,"px-")||!!o(O,"py-"))&&"p-2")),style:{backgroundColor:s%2==0?R||"var(--dropdownList-background-odd)":L||"var(--dropdownList-background-even)"},onClick:e=>{e.preventDefault(),null==I||I(t)}},{children:e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(i.default,{label:t.label,className:x.twMerge(r.default("text-xs text-dropdownList-text-default leading-[14px]",`${l?x.twMerge("font-semibold text-dropdownList-text-hover",xe):"font-normal"}`),de)})}))}))}),`${t.value}-${s}`);s.useEffect((()=>{ie&&ie(ge)}),[ge]),s.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)ve(t.contentRect.width)}));return fe.current&&e.observe(fe.current),()=>{fe.current&&e.unobserve(fe.current)}}),[]),s.useEffect((()=>{const e=we.current,t=me.current;if(!e||!t||!Be||Se)return;const r=new IntersectionObserver((e=>{var t;(null===(t=e[0])||void 0===t?void 0:t.isIntersecting)&&Be&&!Se&&Me()}),{root:t,rootMargin:"50px",threshold:.1});return r.observe(e),()=>{r.disconnect()}}),[Be,Se,Me,Ce.length]);const Re=!o(S,"w-")||"w-full"===o(S,"w-")||!o(C,"w-")||"w-full"===o(C,"w-");return e.jsx(b.Listbox,{children:e.jsxs("div",Object.assign({ref:fe,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!v&&e.jsx(i.default,{label:v,className:x.twMerge("font-normal text-dark-gumbo text-[10px]",w)}),le&&e.jsx(d,{labelRequired:ae,labelRequiredStyles:ne,containerRequiredStyles:oe})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:G,flip:_},{children:[e.jsx(b.ListboxButton,Object.assign({className:x.twMerge(r.default("p-0 bg-transparent",F&&"cursor-not-allowed"),S?o(S,"w-"):void 0),onClick:e=>{F&&e.preventDefault()}},{children:({open:t})=>{var s;return e.jsxs("div",Object.assign({className:x.twMerge(r.default(x.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",S),"line"===re&&"border-b border-t-0 border-x-0 rounded-none",t&&B?B:t?"border-fields-border-focus":void 0,F&&"border-dark-bermudaGray bg-light-whiteSmoke",P&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!q&&!y&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(i.default,{label:q,variant:"small",className:x.twMerge(r.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),N)})})),!!y&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:e.jsx(i.default,{label:(null===(s=Ce.find((e=>e.value===y)))||void 0===s?void 0:s.label)||y,variant:"small",className:x.twMerge(r.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),k)})}))]})),E&&!!y&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==I||I({value:"",label:""}),je(""),null==T||T()}},{children:e.jsx(c,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(c,{name:t?"chevronup":"chevrondown",className:x.twMerge(r.default("fill-dark-bermudaGray w-3 h-3",`${F&&"fill-dark-bermudaGray"}`),M)})]}))}})),e.jsx(f.Transition,Object.assign({as:s.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(b.ListboxOptions,Object.assign({className:x.twMerge(r.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver bg-white z-50",S?o(S,"w-"):void 0),C),style:{width:Re?pe:void 0,height:"auto"}},{children:({open:t})=>(s.useEffect((()=>{!t&&ce&&je("")}),[t]),s.useEffect((()=>{if(t&&!ye){const e=[...g,he];be.resetQueries(e),ke(!0),me.current&&(me.current.scrollTop=0)}else!t&&ye&&ke(!1)}),[t]),e.jsxs(e.Fragment,{children:[Q?e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:x.twMerge(r.default(x.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",H),A||"border-fields-border-focus"))},{children:[e.jsx("input",{placeholder:U||"Search",className:x.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",J),onChange:e=>{je(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:ge}),e.jsx(c,{name:"search",className:x.twMerge("fill-dark-bermudaGray w-3 h-3",V)})]}))})):null,e.jsx("div",Object.assign({className:x.twMerge(r.default("p-0 overflow-hidden",o(C,"w-")?o(C,"w-"):o(S,"w-"))),style:{width:Re?pe:void 0}},{children:Ce.length>0?e.jsxs("div",Object.assign({ref:me,className:x.twMerge("max-h-80 overflow-y-auto scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",ue),style:{maxHeight:320}},{children:[Ce.map(((e,t)=>Oe(e,t))),Be&&e.jsx("div",Object.assign({ref:we,className:"w-full h-8 flex items-center justify-center"},{children:Se?e.jsx(i.default,{label:"Loading",className:"text-dark-bermudaGray font-normal text-xs text-center w-full"}):e.jsx("div",{className:"w-full h-1"})}))]})):Ne?e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(i.default,{label:"Loading",className:x.twMerge("text-dark-bermudaGray font-normal text-sm text-center",te)})})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(i.default,{label:ee||"No Results Found",className:x.twMerge("text-dark-bermudaGray font-normal text-sm",te)})}))})),W&&e.jsx(u.default,{variant:"tertiary",onClick:()=>{null==Z||Z()},label:Y||"Footer Button",className:x.twMerge("",X)})]}))}))}))]}))})),$&&!P&&e.jsx(i.default,{label:$,className:x.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",K)}),P&&!!D&&e.jsx(i.default,{label:D,className:x.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",z)})]}))})};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),r=require("../../../node_modules/classnames/index.js"),s=require("react"),l=require("react-query"),a=require("../../hooks/useDebounce.js"),n=require("../../hooks/useInfinitePicker.js"),i=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var o=require("../Text/BaseText.js");require("../Text/Text.js");var d=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var c=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var u=require("../Icon/Icon.js"),x=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),f=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=function({fetchFn:m,queryKey:g,debounceMs:j=300,disabled:h=!1,pageSize:p=100,label:v,labelStyles:w,value:y,valueStyles:k,placeholder:N,placeholderStyles:S,containerStyles:q,activeContainerStyles:B,iconStyles:M,itemsContainerStyles:O,itemContainerStyles:C,oddBgColor:R,evenBgColor:L,isDisabled:F=!1,position:G="bottom-start",isAutoFlip:I,onSelectItem:T,onClean:E,isCleanable:D,isError:P,errorMessage:_,errorMessageStyles:z,helperMessage:$,helperMessageStyles:K,isSearchable:H,searchContainerStyles:Q,activeSearchStyles:A,searchPlaceholder:J,searchStyles:U,iconSearchStyles:V,isShowFooterButton:W,footerButtonContainerStyles:X,footerButtonLabel:Y,onClickFooterButton:Z,noResultsLabel:ee,noResultsLabelStyles:te,variant:re="box",data:se,isRequired:le,labelRequired:ae,labelRequiredStyles:ne,containerRequiredStyles:ie,onSearch:oe,itemTextStyles:de,listContainerStyles:ce,isClearSearchOnClose:ue,activeItemTextStyles:xe}){const be=l.useQueryClient(),fe=s.useRef(null),me=s.useRef(null),[ge,je]=s.useState(""),he=a.useDebounce(ge,j),[pe,ve]=s.useState(0),we=s.useRef(null),[ye,ke]=s.useState(!1),{data:Ne,isLoading:Se,isFetchingNextPage:qe,hasNextPage:Be,fetchNextPage:Me}=n.useInfinitePicker({fetchFn:m,queryKey:g,search:he,pageSize:p,enabled:!h}),Oe=s.useMemo((()=>Ne||[]),[Ne]),Ce=(t,s)=>e.jsx(b.ListboxOption,Object.assign({className:x.twMerge(r.default("relative cursor-default select-none list-none",i(C,"p-"),i(C,"px-"),i(C,"py-"))),value:t},{children:({active:l})=>e.jsx("div",Object.assign({className:x.twMerge(r.default("w-full flex items-center !min-h-[32px] p-2 cursor-pointer",C,(!!i(C,"p-")||!!i(C,"px-")||!!i(C,"py-"))&&"p-2")),style:{backgroundColor:s%2==0?R||"var(--dropdownList-background-odd)":L||"var(--dropdownList-background-even)"},onClick:e=>{e.preventDefault(),null==T||T(t)}},{children:e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(o.default,{label:t.label,className:x.twMerge(r.default("text-xs text-dropdownList-text-default leading-[14px]",`${l?x.twMerge("font-semibold text-dropdownList-text-hover",xe):"font-normal"}`),de)})}))}))}),`${t.value}-${s}`);s.useEffect((()=>{oe&&oe(ge)}),[ge]),s.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)ve(t.contentRect.width)}));return fe.current&&e.observe(fe.current),()=>{fe.current&&e.unobserve(fe.current)}}),[]),s.useEffect((()=>{const e=we.current,t=me.current;if(!e||!t||!Be||qe)return;const r=new IntersectionObserver((e=>{var t;(null===(t=e[0])||void 0===t?void 0:t.isIntersecting)&&Be&&!qe&&Me()}),{root:t,rootMargin:"50px",threshold:.1});return r.observe(e),()=>{r.disconnect()}}),[Be,qe,Me,Oe.length]);const Re=!i(q,"w-")||"w-full"===i(q,"w-")||!i(O,"w-")||"w-full"===i(O,"w-");return e.jsx(b.Listbox,{children:e.jsxs("div",Object.assign({ref:fe,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!v&&e.jsx(o.default,{label:v,className:x.twMerge("font-normal text-dark-gumbo text-[10px]",w)}),le&&e.jsx(d,{labelRequired:ae,labelRequiredStyles:ne,containerRequiredStyles:ie})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:G,flip:I},{children:[e.jsx(b.ListboxButton,Object.assign({className:x.twMerge(r.default("p-0 bg-transparent",F&&"cursor-not-allowed"),q?i(q,"w-"):void 0),onClick:e=>{F&&e.preventDefault()}},{children:({open:t})=>{var s;return e.jsxs("div",Object.assign({className:x.twMerge(r.default(x.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",q),"line"===re&&"border-b border-t-0 border-x-0 rounded-none",t&&B?B:t?"border-fields-border-focus":void 0,F&&"border-dark-bermudaGray bg-light-whiteSmoke",P&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!N&&!y&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(o.default,{label:N,variant:"small",className:x.twMerge(r.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),S)})})),!!y&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:e.jsx(o.default,{label:(null===(s=Oe.find((e=>e.value===y)))||void 0===s?void 0:s.label)||y,variant:"small",className:x.twMerge(r.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),k)})}))]})),D&&!!y&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==T||T({value:"",label:""}),je(""),null==E||E()}},{children:e.jsx(u,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(u,{name:t?"chevronup":"chevrondown",className:x.twMerge(r.default("fill-dark-bermudaGray w-3 h-3",`${F&&"fill-dark-bermudaGray"}`),M)})]}))}})),e.jsx(f.Transition,Object.assign({as:s.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(b.ListboxOptions,Object.assign({className:x.twMerge(r.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver bg-white z-50",q?i(q,"w-"):void 0),O),style:{width:Re?pe:void 0,height:"auto"}},{children:({open:t})=>(s.useEffect((()=>{!t&&ue&&je("")}),[t]),s.useEffect((()=>{if(t&&!ye){const e=[...g,he];be.resetQueries(e),ke(!0),me.current&&(me.current.scrollTop=0)}else!t&&ye&&ke(!1)}),[t]),e.jsxs(e.Fragment,{children:[H?e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:x.twMerge(r.default(x.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",Q),A||"border-fields-border-focus"))},{children:[e.jsx("input",{placeholder:J||"Search",className:x.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",U),onChange:e=>{je(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:ge}),e.jsx(u,{name:"search",className:x.twMerge("fill-dark-bermudaGray w-3 h-3",V)})]}))})):null,e.jsx("div",Object.assign({className:x.twMerge(r.default("p-0 overflow-hidden",i(O,"w-")?i(O,"w-"):i(q,"w-"))),style:{width:Re?pe:void 0}},{children:Oe.length>0?e.jsxs("div",Object.assign({ref:me,className:x.twMerge("max-h-80 overflow-y-auto scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",ce),style:{maxHeight:320}},{children:[Oe.map(((e,t)=>Ce(e,t))),Be&&e.jsx("div",Object.assign({ref:we,className:"w-full h-8 flex items-center justify-center"},{children:qe?e.jsx(o.default,{label:"Loading",className:"text-dark-bermudaGray font-normal text-xs text-center w-full"}):e.jsx("div",{className:"w-full h-1"})}))]})):Se?e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(o.default,{label:"Loading",className:x.twMerge("text-dark-bermudaGray font-normal text-sm text-center",te)})})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(o.default,{label:ee||"No Results Found",className:x.twMerge("text-dark-bermudaGray font-normal text-sm",te)})}))})),W&&e.jsx(c.default,{variant:"tertiary",onClick:()=>{null==Z||Z()},label:Y||"Footer Button",className:x.twMerge("",X)})]}))}))}))]}))})),$&&!P&&e.jsx(o.default,{label:$,className:x.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",K)}),P&&!!_&&e.jsx(o.default,{label:_,className:x.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",z)})]}))})};
 //# sourceMappingURL=InfiniteSelectPicker.js.map