uangcermat-web-toolkit-v2 0.2.3 → 0.2.5

package/build/node_modules/date-fns/esm/subMonths/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../_lib/toInteger/index.js"),r=require("../addMonths/index.js"),i=require("../_lib/requiredArgs/index.js");module.exports=function(n,s){i(2,arguments);var t=e(s);return r(n,-t)};
+//# sourceMappingURL=index.js.map

package/build/node_modules/date-fns/esm/subMonths/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../node_modules/date-fns/esm/subMonths/index.js"],"sourcesContent":["import toInteger from \"../_lib/toInteger/index.js\";\nimport addMonths from \"../addMonths/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name subMonths\n * @category Month Helpers\n * @summary Subtract the specified number of months from the given date.\n *\n * @description\n * Subtract the specified number of months from the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.\n * @returns {Date} the new date with the months subtracted\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Subtract 5 months from 1 February 2015:\n * const result = subMonths(new Date(2015, 1, 1), 5)\n * //=> Mon Sep 01 2014 00:00:00\n */\nexport default function subMonths(dirtyDate, dirtyAmount) {\n  requiredArgs(2, arguments);\n  var amount = toInteger(dirtyAmount);\n  return addMonths(dirtyDate, -amount);\n}"],"names":["dirtyDate","dirtyAmount","requiredArgs","arguments","amount","toInteger","addMonths"],"mappings":"sJAqBe,SAAmBA,EAAWC,GAC3CC,EAAa,EAAGC,WAChB,IAAIC,EAASC,EAAUJ,GACvB,OAAOK,EAAUN,GAAYI,EAC/B"}

package/build/src/components/CheckPicker/BaseCheckPicker.d.ts

@@ -1,3 +1,3 @@
 import { BaseCheckPickerInterface } from './BaseCheckPicker.type';
-declare const BaseCheckPicker: ({ 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, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, onSearch, selectedAllText, selectedAllTextStyles, activeCheckboxColor, itemTextStyles, listContainerStyles, isClearSearchOnClose, selectedItemTextStyles, activeItemTextStyles }: BaseCheckPickerInterface) => import("react/jsx-runtime").JSX.Element;
+declare const BaseCheckPicker: ({ 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, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, onSearch, selectedAllText, selectedAllTextStyles, activeCheckboxColor, itemTextStyles, listContainerStyles, isClearSearchOnClose, selectedItemTextStyles, activeItemTextStyles, maxSelected }: BaseCheckPickerInterface) => import("react/jsx-runtime").JSX.Element;
 export default BaseCheckPicker;

package/build/src/components/CheckPicker/BaseCheckPicker.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"),r=require("react"),s=require("../../../node_modules/react-window/dist/index.esm.js"),a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var i=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var o=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 d=require("../Checkbox/Checkbox.js"),c=require("../Icon/Icon.js"),u=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),x=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({value:f,valueStyles:m,label:g,labelStyles:j,placeholder:h,placeholderStyles:p,containerStyles:w,activeContainerStyles:v,iconStyles:y,itemsContainerStyles:k,itemContainerStyles:S,oddBgColor:C,evenBgColor:N,isDisabled:q=!1,position:O="bottom-start",isAutoFlip:B,onSelectItem:M,onClean:R,isCleanable:L,isError:T,errorMessage:F,errorMessageStyles:G,helperMessage:E,helperMessageStyles:_,isSearchable:I,searchContainerStyles:D,activeSearchStyles:A,searchPlaceholder:z,searchStyles:P,iconSearchStyles:$,isShowFooterButton:H,footerButtonContainerStyles:K,footerButtonLabel:V,onClickFooterButton:W,noResultsLabel:J,noResultsLabelStyles:Q,badgeContainerStyles:U,badgeLabelStyles:X,variant:Y="box",data:Z,isRequired:ee,labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:re,onSearch:se,selectedAllText:ae,selectedAllTextStyles:ne,activeCheckboxColor:ie,itemTextStyles:oe,listContainerStyles:de,isClearSearchOnClose:ce,selectedItemTextStyles:ue,activeItemTextStyles:xe})=>{const be=r.useRef(null),fe=r.useRef(null),me=r.useRef({}),[ge,je]=r.useState(""),[he,pe]=r.useState(0),we=e=>me.current[e]||32,ve=r.useCallback(((e,t)=>{me.current=Object.assign(Object.assign({},me.current),{[e]:t}),fe.current&&fe.current.resetAfterIndex(e)}),[]),ye=r.useMemo((()=>{const e=Z;return""!==ge&&ge?e.filter((e=>e.label.toLowerCase().includes(ge.toLowerCase()))):e}),[ge,Z]),ke=r.useMemo((()=>{let e=0;return ye.length>0&&(e=34*ye.length),e}),[ye.length,ge]),Se=({data:t,index:s,style:i,windowWidth:o})=>{const c=r.useRef(null);return r.useEffect((()=>{c.current&&ve(s,c.current.getBoundingClientRect().height)}),[c,o]),e.jsx("div",Object.assign({className:x.twMerge(l.default("w-full flex items-center !min-h-[32px]",S,(!!a(S,"p-")||!!a(S,"px-")||!!a(S,"py-"))&&"p-0")),style:Object.assign(Object.assign({},i),{backgroundColor:s%2==0?C||"var(--dropdownList-background-odd)":N||"var(--dropdownList-background-even)"})},{children:e.jsx("div",Object.assign({ref:c,className:"w-full"},{children:e.jsx(u.ListboxOption,Object.assign({className:x.twMerge(l.default("relative cursor-default select-none p-2 bg-transparent list-none",a(S,"p-"),a(S,"px-"),a(S,"py-"))),value:t[s]},{children:({active:r})=>{const a=f.some((e=>e===t[s].value));return e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2 cursor-pointer",onClick:e=>{e.preventDefault();let l=f.slice();l=a?l.filter((e=>e!==t[s].value)):l.concat(t[s].value),null==M||M(l.filter((e=>""!==e)))}},{children:[e.jsx(d,{checked:a,variant:"small",color:ie||void 0}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:t[s].label,className:x.twMerge(l.default("text-xs text-dropdownList-text-default leading-[14px]",`${r?x.twMerge("font-semibold text-dropdownList-text-hover",xe):"font-normal"}`),a&&ue,oe)})}))]}))}}),s)}),s)}))};r.useEffect((()=>{se&&se(ge)}),[ge]),r.useEffect((()=>{se&&se(ge)}),[ge]),r.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)pe(t.contentRect.width)}));return be.current&&e.observe(be.current),()=>{be.current&&e.unobserve(be.current)}}),[]);const Ce=!a(w,"w-")||"w-full"===a(w,"w-")||!a(k,"w-")||"w-full"===a(k,"w-");return e.jsx(u.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({ref:be,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!g&&e.jsx(n.default,{label:g,className:x.twMerge("font-normal text-dark-gumbo text-[10px]",j)}),ee&&e.jsx(i,{labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:re})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:O,flip:B},{children:[e.jsx(u.ListboxButton,Object.assign({className:x.twMerge(l.default("p-0 bg-transparent",q&&"cursor-not-allowed"),re?a(w,"w-"):void 0),onClick:e=>{q&&e.preventDefault()}},{children:({open:t})=>e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",w),"line"===Y&&"border-b border-t-0 border-x-0 rounded-none",t&&v?v:t?"border-fields-border-focus":void 0,q&&"border-dark-bermudaGray bg-light-whiteSmoke",T&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!h&&""===f[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(n.default,{label:h,variant:"small",className:x.twMerge(l.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),p)})})),""!==f[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:f.length===Z.length?e.jsx(n.default,{label:ae||"All",variant:"small",className:x.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),ne)}):e.jsx(n.default,{label:Z.filter((e=>f.includes(e.value))).map((e=>e.label)).join(", "),variant:"small",className:x.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),m)})}))]})),""!==f[0]&&e.jsx("div",Object.assign({className:x.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]",U)},{children:e.jsx(n.default,{label:f.length.toString(),className:x.twMerge(l.default("font-normal text-[8px] leading-3"),X)})})),L&&""!==f[0]&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==M||M([]),je(""),null==R||R()}},{children:e.jsx(c,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(c,{name:t?"chevronup":"chevrondown",className:x.twMerge(l.default("fill-dark-bermudaGray w-3 h-3",`${q&&"fill-dark-bermudaGray"}`),y)})]}))})),e.jsx(b.Transition,Object.assign({as:r.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(u.ListboxOptions,Object.assign({className:x.twMerge(l.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50",w?a(w,"w-"):void 0),k),style:{width:Ce?he:void 0}},{children:({open:t})=>(r.useEffect((()=>{!t&&ce&&je("")}),[t]),e.jsxs(e.Fragment,{children:[I&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",D),t&&A?A:t?"border-fields-border-focus":void 0))},{children:[e.jsx("input",{placeholder:z||"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",P),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",$)})]}))})),e.jsx("div",Object.assign({className:x.twMerge(l.default("p-0 overflow-hidden",a(k,"w-")?a(k,"w-"):a(w,"w-"))),style:{width:Ce?he:void 0}},{children:ye.length>0?e.jsx(s.VariableSizeList,Object.assign({ref:fe,height:ke>320?320:ke,itemCount:ye.length,itemSize:we,width:"100%",className:x.twMerge("max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",de),itemData:ye},{children:Se})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(n.default,{label:J||"No Results Found",className:x.twMerge("text-dark-bermudaGray font-normal text-sm",Q)})}))})),H&&e.jsx(o.default,{variant:"tertiary",onClick:()=>{null==W||W()},label:V||"Footer Button",className:x.twMerge("",K)})]}))}))}))]}))})),E&&!T&&e.jsx(n.default,{label:E,className:x.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",_)}),T&&!!F&&e.jsx(n.default,{label:F,className:x.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",G)})]}))}))};
+"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"),r=require("react"),s=require("../../../node_modules/react-window/dist/index.esm.js"),a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var i=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var o=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 d=require("../Checkbox/Checkbox.js"),c=require("../Icon/Icon.js"),u=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),x=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({value:f,valueStyles:g,label:m,labelStyles:j,placeholder:h,placeholderStyles:w,containerStyles:p,activeContainerStyles:v,iconStyles:y,itemsContainerStyles:S,itemContainerStyles:k,oddBgColor:C,evenBgColor:N,isDisabled:q=!1,position:M="bottom-start",isAutoFlip:O,onSelectItem:B,onClean:R,isCleanable:L,isError:T,errorMessage:E,errorMessageStyles:F,helperMessage:G,helperMessageStyles:_,isSearchable:D,searchContainerStyles:I,activeSearchStyles:A,searchPlaceholder:z,searchStyles:P,iconSearchStyles:$,isShowFooterButton:H,footerButtonContainerStyles:K,footerButtonLabel:V,onClickFooterButton:W,noResultsLabel:J,noResultsLabelStyles:Q,badgeContainerStyles:U,badgeLabelStyles:X,variant:Y="box",data:Z,isRequired:ee,labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:re,onSearch:se,selectedAllText:ae,selectedAllTextStyles:ne,activeCheckboxColor:ie,itemTextStyles:oe,listContainerStyles:de,isClearSearchOnClose:ce,selectedItemTextStyles:ue,activeItemTextStyles:xe,maxSelected:be})=>{const fe=r.useRef(null),ge=r.useRef(null),me=r.useRef({}),[je,he]=r.useState(""),[we,pe]=r.useState(0),[ve,ye]=r.useState(!1),Se=e=>me.current[e]||32,ke=r.useCallback(((e,t)=>{me.current=Object.assign(Object.assign({},me.current),{[e]:t}),ge.current&&ge.current.resetAfterIndex(e)}),[]),Ce=r.useMemo((()=>{const e=Z;return""!==je&&je?e.filter((e=>e.label.toLowerCase().includes(je.toLowerCase()))):e}),[je,Z]),Ne=r.useMemo((()=>{let e=0;return Ce.length>0&&(e=34*Ce.length),e}),[Ce.length,je]);r.useEffect((()=>{const e=null==f?void 0:f.filter((e=>e));(null==e?void 0:e.length)>=be?ye(!0):ye(!1)}),[f,be]);const qe=({data:t,index:s,style:i,windowWidth:o})=>{const c=r.useRef(null);return r.useEffect((()=>{c.current&&ke(s,c.current.getBoundingClientRect().height)}),[c,o]),e.jsx("div",Object.assign({className:x.twMerge(l.default("w-full flex items-center !min-h-[32px]",k,(!!a(k,"p-")||!!a(k,"px-")||!!a(k,"py-"))&&"p-0")),style:Object.assign(Object.assign({},i),{backgroundColor:s%2==0?C||"var(--dropdownList-background-odd)":N||"var(--dropdownList-background-even)"})},{children:e.jsx("div",Object.assign({ref:c,className:"w-full"},{children:e.jsx(u.ListboxOption,Object.assign({className:x.twMerge(l.default("relative cursor-default select-none p-2 bg-transparent list-none",a(k,"p-"),a(k,"px-"),a(k,"py-"))),value:t[s]},{children:({active:r})=>{const a=f.some((e=>e===t[s].value));return e.jsxs("div",Object.assign({className:x.twMerge("flex flex-row items-center gap-x-2 cursor-pointer",ve&&!a?"cursor-not-allowed":""),onClick:e=>{if(e.preventDefault(),ve&&!a)return;let l=f.slice();l=a?l.filter((e=>e!==t[s].value)):l.concat(t[s].value),null==B||B(l.filter((e=>""!==e))),l.length===be?ye(!0):ye(!1)}},{children:[e.jsx(d,{checked:a,variant:"small",color:ie||void 0,isDisabled:ve&&!a}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:t[s].label,className:x.twMerge(l.default("text-xs text-dropdownList-text-default leading-[14px]",`${r&&!ve?x.twMerge("font-semibold text-dropdownList-text-hover",xe):"font-normal"}`),a&&ue,oe)})}))]}))}}),s)}),s)}))};r.useEffect((()=>{se&&se(je)}),[je]),r.useEffect((()=>{se&&se(je)}),[je]),r.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)pe(t.contentRect.width)}));return fe.current&&e.observe(fe.current),()=>{fe.current&&e.unobserve(fe.current)}}),[]);const Me=!a(p,"w-")||"w-full"===a(p,"w-")||!a(S,"w-")||"w-full"===a(S,"w-");return e.jsx(u.Listbox,Object.assign({multiple:!0},{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:[!!m&&e.jsx(n.default,{label:m,className:x.twMerge("font-normal text-dark-gumbo text-[10px]",j)}),ee&&e.jsx(i,{labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:re})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:M,flip:O},{children:[e.jsx(u.ListboxButton,Object.assign({className:x.twMerge(l.default("p-0 bg-transparent",q&&"cursor-not-allowed"),re?a(p,"w-"):void 0),onClick:e=>{q&&e.preventDefault()}},{children:({open:t})=>e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",p),"line"===Y&&"border-b border-t-0 border-x-0 rounded-none",t&&v?v:t?"border-fields-border-focus":void 0,q&&"border-dark-bermudaGray bg-light-whiteSmoke",T&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!h&&""===f[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(n.default,{label:h,variant:"small",className:x.twMerge(l.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),w)})})),""!==f[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:f.length===Z.length?e.jsx(n.default,{label:ae||"All",variant:"small",className:x.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),ne)}):e.jsx(n.default,{label:Z.filter((e=>f.includes(e.value))).map((e=>e.label)).join(", "),variant:"small",className:x.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),g)})}))]})),""!==f[0]&&e.jsx("div",Object.assign({className:x.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]",U)},{children:e.jsx(n.default,{label:f.length.toString(),className:x.twMerge(l.default("font-normal text-[8px] leading-3"),X)})})),L&&""!==f[0]&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==B||B([]),he(""),ye(!1),null==R||R()}},{children:e.jsx(c,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(c,{name:t?"chevronup":"chevrondown",className:x.twMerge(l.default("fill-dark-bermudaGray w-3 h-3",`${q&&"fill-dark-bermudaGray"}`),y)})]}))})),e.jsx(b.Transition,Object.assign({as:r.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(u.ListboxOptions,Object.assign({className:x.twMerge(l.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50",p?a(p,"w-"):void 0),S),style:{width:Me?we:void 0}},{children:({open:t})=>(r.useEffect((()=>{!t&&ce&&he("")}),[t]),e.jsxs(e.Fragment,{children:[D&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",I),t&&A?A:t?"border-fields-border-focus":void 0))},{children:[e.jsx("input",{placeholder:z||"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",P),onChange:e=>{he(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:je}),e.jsx(c,{name:"search",className:x.twMerge("fill-dark-bermudaGray w-3 h-3",$)})]}))})),e.jsx("div",Object.assign({className:x.twMerge(l.default("p-0 overflow-hidden",a(S,"w-")?a(S,"w-"):a(p,"w-"))),style:{width:Me?we:void 0}},{children:Ce.length>0?e.jsx(s.VariableSizeList,Object.assign({ref:ge,height:Ne>320?320:Ne,itemCount:Ce.length,itemSize:Se,width:"100%",className:x.twMerge("max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",de),itemData:Ce},{children:qe})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(n.default,{label:J||"No Results Found",className:x.twMerge("text-dark-bermudaGray font-normal text-sm",Q)})}))})),H&&e.jsx(o.default,{variant:"tertiary",onClick:()=>{null==W||W()},label:V||"Footer Button",className:x.twMerge("",K)})]}))}))}))]}))})),G&&!T&&e.jsx(n.default,{label:G,className:x.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",_)}),T&&!!E&&e.jsx(n.default,{label:E,className:x.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",F)})]}))}))};
 //# sourceMappingURL=BaseCheckPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseCheckPicker.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 { ListChildComponentProps, VariableSizeList as List } from 'react-window';\nimport { twMerge } from 'tailwind-merge';\n\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 { BaseCheckPickerDataInterface, BaseCheckPickerInterface } from './BaseCheckPicker.type';\n\ninterface RowProps extends ListChildComponentProps {\n  setSize: (index: number, size: number) => void;\n  windowWidth: number;\n}\nconst BaseCheckPicker = ({\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  data,\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  onSearch,\n  selectedAllText,\n  selectedAllTextStyles,\n  activeCheckboxColor,\n  itemTextStyles,\n  listContainerStyles,\n  isClearSearchOnClose,\n  selectedItemTextStyles,\n  activeItemTextStyles\n}: BaseCheckPickerInterface) => {\n  const rowHeight = 34;\n  const dafaultScrollbarStyles =\n    'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<List>(null);\n  const sizeMap = useRef<{ [key: number]: number }>({});\n\n  const [search, setSearch] = useState<string>('');\n  const [buttonWidth, setButtonWidth] = useState<number>(0);\n\n  const getSize = (index: number) => sizeMap.current[index] || 32;\n  const setSize = useCallback((index: number, size: number) => {\n    sizeMap.current = { ...sizeMap.current, [index]: size };\n    if (listRef.current) {\n      listRef.current.resetAfterIndex(index);\n    }\n  }, []);\n\n  const dataPicker: Array<BaseCheckPickerDataInterface> = useMemo(() => {\n    const temp: Array<BaseCheckPickerDataInterface> = data;\n    return search === '' || !search\n      ? temp\n      : temp.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));\n  }, [search, data]);\n\n  const dropdownListHeight = useMemo(() => {\n    let temp = 0;\n    if (dataPicker.length > 0) {\n      temp = rowHeight * dataPicker.length;\n    }\n    return temp;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dataPicker.length, search]);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  const RenderRow: React.FC = ({ data, index, style, windowWidth }: RowProps) => {\n    const rowRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (rowRef.current) {\n        setSize(index, rowRef.current.getBoundingClientRect().height);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [rowRef, windowWidth]);\n\n    return (\n      <div\n        className={twMerge(\n          classNames(\n            'w-full flex items-center !min-h-[32px]',\n            itemContainerStyles,\n            (!!extractClasses(itemContainerStyles, 'p-') ||\n              !!extractClasses(itemContainerStyles, 'px-') ||\n              !!extractClasses(itemContainerStyles, 'py-')) &&\n              'p-0'\n          )\n        )}\n        style={{\n          ...style,\n          backgroundColor:\n            index % 2 === 0\n              ? oddBgColor || 'var(--dropdownList-background-odd)'\n              : evenBgColor || 'var(--dropdownList-background-even)'\n        }}\n      >\n        <div ref={rowRef} key={index} className='w-full'>\n          <ListboxOption\n            key={index}\n            className={twMerge(\n              classNames(\n                'relative cursor-default select-none p-2 bg-transparent list-none',\n                extractClasses(itemContainerStyles, 'p-'),\n                extractClasses(itemContainerStyles, 'px-'),\n                extractClasses(itemContainerStyles, 'py-')\n              )\n            )}\n            value={data[index]}\n          >\n            {({ active }) => {\n              const selected = value.some((i) => i === data[index].value);\n              return (\n                <div\n                  className='flex flex-row items-center gap-x-2 cursor-pointer'\n                  onClick={(e) => {\n                    e.preventDefault();\n\n                    let temp = value.slice();\n                    if (selected) {\n                      temp = temp.filter((i) => i !== data[index].value);\n                    } else {\n                      temp = temp.concat(data[index].value);\n                    }\n\n                    onSelectItem?.(temp.filter((i) => i !== ''));\n                  }}\n                >\n                  <Checkbox\n                    checked={selected}\n                    variant='small'\n                    color={activeCheckboxColor || undefined}\n                  />\n\n                  <div className='flex flex-1'>\n                    <BaseText\n                      label={data[index].label}\n                      className={twMerge(\n                        classNames(\n                          'text-xs text-dropdownList-text-default leading-[14px]',\n                          `${\n                            active\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              );\n            }}\n          </ListboxOption>\n        </div>\n      </div>\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    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  const isWidthFull =\n    !extractClasses(containerStyles, 'w-') ||\n    extractClasses(containerStyles, 'w-') === 'w-full' ||\n    !extractClasses(itemsContainerStyles, 'w-') ||\n    extractClasses(itemsContainerStyles, 'w-') === 'w-full';\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 && value[0] === '' && (\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                    {value[0] !== '' && (\n                      <div className='flex flex-1 w-[calc(100%-52px)]'>\n                        {value.length === data.length ? (\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={data\n                              .filter((i: BaseCheckPickerDataInterface) => value.includes(i.value))\n                              .map((i) => i.label)\n                              .join(', ')}\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                  </div>\n\n                  {value[0] !== '' && (\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 && value[0] !== '' && (\n                    <div\n                      className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-1'\n                      onClick={(e) => {\n                        e.preventDefault();\n\n                        onSelectItem?.([]);\n                        setSearch('');\n                        onClean?.();\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 z-50',\n                    containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n                  ),\n                  itemsContainerStyles\n                )}\n                style={{ width: isWidthFull ? buttonWidth : undefined }}\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                  return (\n                    <>\n                      {isSearchable && (\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                                open && activeSearchStyles\n                                  ? activeSearchStyles\n                                  : open\n                                  ? 'border-fields-border-focus'\n                                  : undefined\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                      <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                          <List\n                            ref={listRef}\n                            height={dropdownListHeight > 320 ? 320 : dropdownListHeight}\n                            itemCount={dataPicker.length}\n                            itemSize={getSize}\n                            width={'100%'}\n                            className={twMerge(\n                              `max-h-80 ${dafaultScrollbarStyles}`,\n                              listContainerStyles\n                            )}\n                            itemData={dataPicker}\n                          >\n                            {RenderRow}\n                          </List>\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 BaseCheckPicker;\n"],"names":["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","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","selectedAllText","selectedAllTextStyles","activeCheckboxColor","itemTextStyles","listContainerStyles","isClearSearchOnClose","selectedItemTextStyles","activeItemTextStyles","containerRef","useRef","listRef","sizeMap","search","setSearch","useState","buttonWidth","setButtonWidth","getSize","index","current","setSize","useCallback","size","Object","assign","resetAfterIndex","dataPicker","useMemo","temp","filter","item","toLowerCase","includes","dropdownListHeight","length","RenderRow","style","windowWidth","rowRef","useEffect","getBoundingClientRect","height","_jsx","className","twMerge","classNames","extractClasses","backgroundColor","children","ref","ListboxOption","active","selected","some","i","_jsxs","jsxs","onClick","e","preventDefault","slice","concat","Checkbox","checked","color","undefined","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","unobserve","isWidthFull","jsx","Listbox","multiple","BaseBadgeRequired","Float","placement","flip","ListboxButton","open","map","join","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","_Fragment","onChange","target","onKeyDown","stopPropagation","List","itemCount","itemSize","itemData","BaseButton"],"mappings":"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"}
+{"version":3,"file":"BaseCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseCheckPicker.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 { ListChildComponentProps, VariableSizeList as List } from 'react-window';\nimport { twMerge } from 'tailwind-merge';\n\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 { BaseCheckPickerDataInterface, BaseCheckPickerInterface } from './BaseCheckPicker.type';\n\ninterface RowProps extends ListChildComponentProps {\n  setSize: (index: number, size: number) => void;\n  windowWidth: number;\n}\nconst BaseCheckPicker = ({\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  data,\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  onSearch,\n  selectedAllText,\n  selectedAllTextStyles,\n  activeCheckboxColor,\n  itemTextStyles,\n  listContainerStyles,\n  isClearSearchOnClose,\n  selectedItemTextStyles,\n  activeItemTextStyles,\n  maxSelected\n}: BaseCheckPickerInterface) => {\n  const rowHeight = 34;\n  const dafaultScrollbarStyles =\n    'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<List>(null);\n  const sizeMap = useRef<{ [key: number]: number }>({});\n\n  const [search, setSearch] = useState<string>('');\n  const [buttonWidth, setButtonWidth] = useState<number>(0);\n  const [isDisableSelected, setIsDisableSelected] = useState<boolean>(false);\n\n  const getSize = (index: number) => sizeMap.current[index] || 32;\n  const setSize = useCallback((index: number, size: number) => {\n    sizeMap.current = { ...sizeMap.current, [index]: size };\n    if (listRef.current) {\n      listRef.current.resetAfterIndex(index);\n    }\n  }, []);\n\n  const dataPicker: Array<BaseCheckPickerDataInterface> = useMemo(() => {\n    const temp: Array<BaseCheckPickerDataInterface> = data;\n    return search === '' || !search\n      ? temp\n      : temp.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));\n  }, [search, data]);\n\n  const dropdownListHeight = useMemo(() => {\n    let temp = 0;\n    if (dataPicker.length > 0) {\n      temp = rowHeight * dataPicker.length;\n    }\n    return temp;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dataPicker.length, search]);\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  // eslint-disable-next-line sonarjs/cognitive-complexity\n  const RenderRow: React.FC = ({ data, index, style, windowWidth }: RowProps) => {\n    const rowRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (rowRef.current) {\n        setSize(index, rowRef.current.getBoundingClientRect().height);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [rowRef, windowWidth]);\n\n    return (\n      <div\n        className={twMerge(\n          classNames(\n            'w-full flex items-center !min-h-[32px]',\n            itemContainerStyles,\n            (!!extractClasses(itemContainerStyles, 'p-') ||\n              !!extractClasses(itemContainerStyles, 'px-') ||\n              !!extractClasses(itemContainerStyles, 'py-')) &&\n              'p-0'\n          )\n        )}\n        style={{\n          ...style,\n          backgroundColor:\n            index % 2 === 0\n              ? oddBgColor || 'var(--dropdownList-background-odd)'\n              : evenBgColor || 'var(--dropdownList-background-even)'\n        }}\n      >\n        <div ref={rowRef} key={index} className='w-full'>\n          <ListboxOption\n            key={index}\n            className={twMerge(\n              classNames(\n                'relative cursor-default select-none p-2 bg-transparent list-none',\n                extractClasses(itemContainerStyles, 'p-'),\n                extractClasses(itemContainerStyles, 'px-'),\n                extractClasses(itemContainerStyles, 'py-')\n              )\n            )}\n            value={data[index]}\n          >\n            {({ active }) => {\n              const selected = value.some((i) => i === data[index].value);\n              return (\n                <div\n                  className={twMerge(\n                    'flex flex-row items-center gap-x-2 cursor-pointer',\n                    isDisableSelected && !selected ? 'cursor-not-allowed' : ''\n                  )}\n                  onClick={(e) => {\n                    e.preventDefault();\n\n                    if (isDisableSelected && !selected) return;\n\n                    let temp = value.slice();\n                    if (selected) {\n                      temp = temp.filter((i) => i !== data[index].value);\n                    } else {\n                      temp = temp.concat(data[index].value);\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                >\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={data[index].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              );\n            }}\n          </ListboxOption>\n        </div>\n      </div>\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    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  const isWidthFull =\n    !extractClasses(containerStyles, 'w-') ||\n    extractClasses(containerStyles, 'w-') === 'w-full' ||\n    !extractClasses(itemsContainerStyles, 'w-') ||\n    extractClasses(itemsContainerStyles, 'w-') === 'w-full';\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 && value[0] === '' && (\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                    {value[0] !== '' && (\n                      <div className='flex flex-1 w-[calc(100%-52px)]'>\n                        {value.length === data.length ? (\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={data\n                              .filter((i: BaseCheckPickerDataInterface) => value.includes(i.value))\n                              .map((i) => i.label)\n                              .join(', ')}\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                  </div>\n\n                  {value[0] !== '' && (\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 && value[0] !== '' && (\n                    <div\n                      className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-1'\n                      onClick={(e) => {\n                        e.preventDefault();\n\n                        onSelectItem?.([]);\n                        setSearch('');\n                        setIsDisableSelected(false);\n                        onClean?.();\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 z-50',\n                    containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n                  ),\n                  itemsContainerStyles\n                )}\n                style={{ width: isWidthFull ? buttonWidth : undefined }}\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                  return (\n                    <>\n                      {isSearchable && (\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                                open && activeSearchStyles\n                                  ? activeSearchStyles\n                                  : open\n                                  ? 'border-fields-border-focus'\n                                  : undefined\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                      <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                          <List\n                            ref={listRef}\n                            height={dropdownListHeight > 320 ? 320 : dropdownListHeight}\n                            itemCount={dataPicker.length}\n                            itemSize={getSize}\n                            width={'100%'}\n                            className={twMerge(\n                              `max-h-80 ${dafaultScrollbarStyles}`,\n                              listContainerStyles\n                            )}\n                            itemData={dataPicker}\n                          >\n                            {RenderRow}\n                          </List>\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 BaseCheckPicker;\n"],"names":["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","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","selectedAllText","selectedAllTextStyles","activeCheckboxColor","itemTextStyles","listContainerStyles","isClearSearchOnClose","selectedItemTextStyles","activeItemTextStyles","maxSelected","containerRef","useRef","listRef","sizeMap","search","setSearch","useState","buttonWidth","setButtonWidth","isDisableSelected","setIsDisableSelected","getSize","index","current","setSize","useCallback","size","Object","assign","resetAfterIndex","dataPicker","useMemo","temp","filter","item","toLowerCase","includes","dropdownListHeight","length","useEffect","filteredValue","RenderRow","style","windowWidth","rowRef","getBoundingClientRect","height","_jsx","className","twMerge","classNames","extractClasses","backgroundColor","children","ref","ListboxOption","active","selected","some","i","_jsxs","onClick","e","preventDefault","slice","concat","jsx","Checkbox","checked","color","undefined","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","unobserve","isWidthFull","Listbox","multiple","jsxs","BaseBadgeRequired","Float","placement","flip","ListboxButton","open","map","join","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","_Fragment","onChange","target","onKeyDown","stopPropagation","List","itemCount","itemSize","itemData","BaseButton"],"mappings":"onCAyBwB,EACtBA,QACAC,cACAC,QACAC,cACAC,cACAC,oBACAC,kBACAC,wBACAC,aACAC,uBACAC,sBACAC,aACAC,cACAC,cAAa,EACbC,WAAW,eACXC,aACAC,eACAC,UACAC,cACAC,UACAC,eACAC,qBACAC,gBACAC,sBACAC,eACAC,wBACAC,qBACAC,oBACAC,eACAC,mBACAC,qBACAC,8BACAC,oBACAC,sBACAC,iBACAC,uBACAC,uBACAC,mBACAC,UAAU,MACVC,OACAC,cACAC,iBACAC,uBACAC,2BACAC,YACAC,mBACAC,yBACAC,uBACAC,kBACAC,uBACAC,wBACAC,0BACAC,wBACAC,mBAEA,MAIMC,GAAeC,SAAuB,MACtCC,GAAUD,SAAa,MACvBE,GAAUF,SAAkC,CAAA,IAE3CG,GAAQC,IAAaC,EAAQA,SAAS,KACtCC,GAAaC,IAAkBF,EAAQA,SAAS,IAChDG,GAAmBC,IAAwBJ,EAAQA,UAAU,GAE9DK,GAAWC,GAAkBT,GAAQU,QAAQD,IAAU,GACvDE,GAAUC,EAAAA,aAAY,CAACH,EAAeI,KAC1Cb,GAAQU,QAAeI,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAf,GAAQU,SAAS,CAAAD,CAACA,GAAQI,IAC7Cd,GAAQW,SACVX,GAAQW,QAAQM,gBAAgBP,EACjC,GACA,IAEGQ,GAAkDC,EAAAA,SAAQ,KAC9D,MAAMC,EAA4CrC,EAClD,MAAkB,KAAXmB,IAAkBA,GAErBkB,EAAKC,QAAQC,GAASA,EAAK5E,MAAM6E,cAAcC,SAAStB,GAAOqB,iBAD/DH,CAC8E,GACjF,CAAClB,GAAQnB,IAEN0C,GAAqBN,EAAAA,SAAQ,KACjC,IAAIC,EAAO,EAIX,OAHIF,GAAWQ,OAAS,IACtBN,EA9Bc,GA8BKF,GAAWQ,QAEzBN,CAAI,GAEV,CAACF,GAAWQ,OAAQxB,KAEvByB,EAAAA,WAAU,KACR,MAAMC,EAAgBpF,eAAAA,EAAO6E,QAAQC,GAASA,KAC1CM,aAAa,EAAbA,EAAeF,SAAU7B,GAC3BW,IAAqB,GAErBA,IAAqB,EACtB,GACA,CAAChE,EAAOqD,KAGX,MAAMgC,GAAsB,EAAG9C,OAAM2B,MAAAA,EAAOoB,QAAOC,kBACjD,MAAMC,EAASjC,SAAuB,MAStC,OAPA4B,EAAAA,WAAU,KACJK,EAAOrB,SACTC,GAAQF,EAAOsB,EAAOrB,QAAQsB,wBAAwBC,OACvD,GAEA,CAACF,EAAQD,IAGVI,EAAAA,yBACEC,UAAWC,EAAOA,QAChBC,EAAU,QACR,yCACApF,KACGqF,EAAerF,EAAqB,SACnCqF,EAAerF,EAAqB,UACpCqF,EAAerF,EAAqB,SACtC,QAGN4E,MACKf,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAc,GACH,CAAAU,gBACE9B,EAAQ,GAAM,EACVvD,GAAc,qCACdC,GAAe,yCAGvB,CAAAqF,SAAAN,EAAAA,IAAA,MAAApB,OAAAC,OAAA,CAAK0B,IAAKV,EAAoBI,UAAU,UAAQ,CAAAK,SAC9CN,MAACQ,EAAAA,cAEC5B,OAAAC,OAAA,CAAAoB,UAAWC,EAAAA,QACTC,EAAAA,QACE,mEACAC,EAAerF,EAAqB,MACpCqF,EAAerF,EAAqB,OACpCqF,EAAerF,EAAqB,SAGxCV,MAAOuC,EAAK2B,IAEX,CAAA+B,SAAA,EAAGG,aACF,MAAMC,EAAWrG,EAAMsG,MAAMC,GAAMA,IAAMhE,EAAK2B,GAAOlE,QACrD,OACEwG,EAAAA,KACE,MAAAjC,OAAAC,OAAA,CAAAoB,UAAWC,UACT,oDACA9B,KAAsBsC,EAAW,qBAAuB,IAE1DI,QAAUC,IAGR,GAFAA,EAAEC,iBAEE5C,KAAsBsC,EAAU,OAEpC,IAAIzB,EAAO5E,EAAM4G,QAEfhC,EADEyB,EACKzB,EAAKC,QAAQ0B,GAAMA,IAAMhE,EAAK2B,GAAOlE,QAErC4E,EAAKiC,OAAOtE,EAAK2B,GAAOlE,OAGjCgB,SAAAA,EAAe4D,EAAKC,QAAQ0B,GAAY,KAANA,KAE9B3B,EAAKM,SAAW7B,GAClBW,IAAqB,GAErBA,IAAqB,EACtB,GACF,CAAAiC,SAAA,CAEDN,EAACmB,IAAAC,EACC,CAAAC,QAASX,EACT/D,QAAQ,QACR2E,MAAOlE,SAAuBmE,EAC9BrG,WAAYkD,KAAsBsC,IAGpCV,EAAAmB,IAAA,MAAAvC,OAAAC,OAAA,CAAKoB,UAAU,eACb,CAAAK,SAAAN,MAACwB,EAAAA,QAAQ,CACPjH,MAAOqC,EAAK2B,GAAOhE,MACnB0F,UAAWC,EAAOA,QAChBC,EAAU,QACR,wDACA,GACEM,IAAWrC,GACP8B,EAAOA,QACL,6CACAzC,IAEF,iBAGRiD,GAAYlD,GACZH,YAKR,IApECkB,KAFcA,KA2EzB,EAGJiB,EAAAA,WAAU,KACJvC,IAAUA,GAASc,GAAO,GAE7B,CAACA,KAEJyB,EAAAA,WAAU,KACJvC,IAAUA,GAASc,GAAO,GAE7B,CAACA,KAEJyB,EAAAA,WAAU,KACR,MAAMiC,EAAiB,IAAIC,gBAAgBC,IACzC,IAAK,MAAMC,KAASD,EAClBxD,GAAeyD,EAAMC,YAAYC,MAClC,IAOH,OAJInE,GAAaa,SACfiD,EAAeM,QAAQpE,GAAaa,SAG/B,KACDb,GAAaa,SAEfiD,EAAeO,UAAUrE,GAAaa,QACvC,CACF,GACA,IAEH,MAAMyD,IACH7B,EAAezF,EAAiB,OACS,WAA1CyF,EAAezF,EAAiB,QAC/ByF,EAAetF,EAAsB,OACS,WAA/CsF,EAAetF,EAAsB,MAEvC,OACEkF,EAACmB,IAAAe,UAAQtD,OAAAC,OAAA,CAAAsD,UACP,GAAA,CAAA7B,SAAAO,OAAA,MAAAjC,OAAAC,OAAA,CAAK0B,IAAK5C,GAAcsC,UAAU,yBAChC,CAAAK,SAAA,CAAAO,EAAAuB,KAAA,MAAAxD,OAAAC,OAAA,CAAKoB,UAAU,mCAAiC,CAAAK,SAAA,GAC3C/F,GACDyF,EAAAA,IAACwB,EAAQ,QAAA,CACPjH,MAAOA,EACP0F,UAAWC,EAAOA,QAAC,0CAA2C1F,KAGjEqC,IACCmD,EAACmB,IAAAkB,EACC,CAAAvF,cAAeA,GACfC,oBAAqBA,GACrBC,wBAAyBA,SAI/BgD,EAAAA,IAAA,MAAApB,OAAAC,OAAA,CAAKoB,UAAU,yBAAuB,CAAAK,SACpCO,EAACuB,KAAAE,QAAM1D,OAAAC,OAAA,CAAA0D,UAAWpH,EAAUqH,KAAMpH,GAAU,CAAAkF,SAAA,CAC1CN,EAAAA,IAACyC,EAAaA,cACZ7D,OAAAC,OAAA,CAAAoB,UAAWC,EAAOA,QAChBC,UAAW,qBAAsBjF,GAAc,sBAC/C8B,GAA0BoD,EAAezF,EAAiB,WAAQ4G,GAEpET,QAAUC,IACJ7F,GACF6F,EAAEC,gBACH,GAGF,CAAAV,SAAA,EAAGoC,UACF7B,EAAAA,KAAA,MAAAjC,OAAAC,OAAA,CACEoB,UAAWC,EAAAA,QACTC,EAAU,QACRD,UACE,2GACAvF,GAEU,SAAZgC,GAAsB,8CACtB+F,GAAQ9H,EACJA,EACA8H,EACA,kCACAnB,EACJrG,GAAc,8CACdM,GAAW,8BAEd,CAAA8E,SAAA,CAEDO,EAAAA,KAAK,MAAAjC,OAAAC,OAAA,CAAAoB,UAAU,eACZ,CAAAK,SAAA,GAAE7F,GAA4B,KAAbJ,EAAM,IACtB2F,MAAK,MAAApB,OAAAC,OAAA,CAAAoB,UAAU,sBACb,CAAAK,SAAAN,EAAAmB,IAACK,EAAQ,QAAA,CACPjH,MAAOE,EACPkC,QAAQ,QACRsD,UAAWC,UACTC,EAAAA,QACE,mFAEFzF,QAMM,KAAbL,EAAM,IACL2F,EAAKmB,IAAA,MAAAvC,OAAAC,OAAA,CAAAoB,UAAU,mCACZ,CAAAK,SAAAjG,EAAMkF,SAAW3C,EAAK2C,OACrBS,EAAAA,IAACwB,EAAAA,QACC,CAAAjH,MAAO2C,IAAmB,MAC1BP,QAAQ,QACRsD,UAAWC,EAAOA,QAChBC,UACE,yFAEFhD,MAIJ6C,MAACwB,EAAAA,QAAQ,CACPjH,MAAOqC,EACJsC,QAAQ0B,GAAoCvG,EAAMgF,SAASuB,EAAEvG,SAC7DsI,KAAK/B,GAAMA,EAAErG,QACbqI,KAAK,MACRjG,QAAQ,QACRsD,UAAWC,EAAOA,QAChBC,UACE,yFAEF7F,YAQE,KAAbD,EAAM,IACL2F,2BACEC,UAAWC,EAAAA,QACT,0IACAzD,cAGFuD,EAAAA,IAACwB,EAAAA,QACC,CAAAjH,MAAOF,EAAMkF,OAAOsD,WACpB5C,UAAWC,EAAAA,QACTC,EAAAA,QAAW,oCACXzD,QAMPnB,GAA4B,KAAblB,EAAM,IACpB2F,EAAAA,yBACEC,UAAU,gEACVa,QAAUC,IACRA,EAAEC,iBAEF3F,SAAAA,EAAe,IACf2C,GAAU,IACVK,IAAqB,GACrB/C,SAAAA,GAAW,GACZ,CAAAgF,SAEDN,EAACmB,IAAA2B,EAAK,CAAAC,KAAK,QAAQ9C,UAAU,qCAGjCD,EAACmB,IAAA2B,EACC,CAAAC,KAAML,EAAO,YAAc,cAC3BzC,UAAWC,EAAAA,QACTC,EAAAA,QACE,gCACA,GAAGjF,GAAc,2BAEnBL,YAMVmF,EAAAmB,IAAC6B,EAAUA,WAAApE,OAAAC,OAAA,CACToE,GAAIC,EAAQA,SACZC,MAAM,kCACNC,UAAU,cACVC,QAAQ,aAER,CAAA/C,SAAAN,EAAAA,IAACsD,EAAAA,eAAc1E,OAAAC,OAAA,CACboB,UAAWC,EAAOA,QAChBC,UACE,mGACAxF,EAAkByF,EAAezF,EAAiB,WAAQ4G,GAE5DzG,GAEF6E,MAAO,CAAEmC,MAAOG,GAAc/D,QAAcqD,IAG3C,CAAAjB,SAAA,EAAGoC,WAEFlD,EAAAA,WAAU,MACHkD,GAAQnF,IAAsBS,GAAU,GAAG,GAC/C,CAAC0E,IAGF7B,EACGuB,KAAAmB,EAAAL,SAAA,CAAA5C,SAAA,CAAAzE,GACCmE,EAAAA,IAAK,MAAApB,OAAAC,OAAA,CAAAoB,UAAU,kCACb,CAAAK,SAAAO,EAAAA,KAAA,MAAAjC,OAAAC,OAAA,CACEoB,UAAWC,EAAAA,QACTC,EAAU,QACRD,EAAOA,QACL,uFACApE,GAEF4G,GAAQ3G,EACJA,EACA2G,EACA,kCACAnB,KAEP,CAAAjB,SAAA,CAEDN,EACEmB,IAAA,QAAA,CAAA1G,YAAauB,GAAqB,SAClCiE,UAAWC,UACT,mJACAjE,GAEFuH,SAAWzC,IACT/C,GAAU+C,EAAE0C,OAAOpJ,MAAM,EAE3BqJ,UAAY3C,GAAMA,EAAE4C,kBACpBtJ,MAAO0D,KAETiC,EAAAmB,IAAC2B,EACC,CAAAC,KAAK,SACL9C,UAAWC,EAAOA,QAAC,gCAAiChE,YAK5D8D,EAAAA,IACE,MAAApB,OAAAC,OAAA,CAAAoB,UAAWC,EAAAA,QACTC,EAAU,QACR,sBACAC,EAAetF,EAAsB,MACjCsF,EAAetF,EAAsB,MACrCsF,EAAezF,EAAiB,QAGxCgF,MAAO,CAAEmC,MAAOG,GAAc/D,QAAcqD,IAE3C,CAAAjB,SAAAvB,GAAWQ,OAAS,EACnBS,EAAAA,IAAC4D,EAAAA,iBAAIhF,OAAAC,OAAA,CACH0B,IAAK1C,GACLkC,OAAQT,GAAqB,IAAM,IAAMA,GACzCuE,UAAW9E,GAAWQ,OACtBuE,SAAUxF,GACVwD,MAAO,OACP7B,UAAWC,EAAOA,QAChB,4IACA5C,IAEFyG,SAAUhF,IAAU,CAAAuB,SAEnBZ,MAGHM,EAAAA,IAAA,MAAApB,OAAAC,OAAA,CAAKoB,UAAU,oBAAkB,CAAAK,SAC/BN,EAAAA,IAACwB,EAAQ,QAAA,CACPjH,MAAOgC,GAAkB,mBACzB0D,UAAWC,EAAAA,QACT,4CACA1D,WAMTL,GACC6D,MAACgE,EAAAA,QAAU,CACTrH,QAAQ,WACRmE,QAAS,KACPxE,SAAAA,GAAuB,EAEzB/B,MAAO8B,GAAqB,gBAC5B4D,UAAWC,EAAAA,QAAQ,GAAI9D,sBAWxCT,IAAkBH,GACjBwE,EAACmB,IAAAK,EAAQ,SACPjH,MAAOoB,EACPsE,UAAWC,EAAAA,QACT,6DACAtE,KAKLJ,KAAaC,GACZuE,EAAAA,IAACwB,EAAQ,QAAA,CACPjH,MAAOkB,EACPwE,UAAWC,UACT,8DACAxE,WAMV"}

package/build/src/components/CheckPicker/BaseCheckPicker.type.d.ts

@@ -62,4 +62,5 @@ export type BaseCheckPickerInterface = {
     isClearSearchOnClose?: boolean;
     selectedItemTextStyles?: string;
     activeItemTextStyles?: string;
+    maxSelected?: number;
 } & BaseBadgeRequiredInterface;

package/build/src/components/DatePicker/BaseDatePicker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../../node_modules/classnames/index.js"),l=require("react"),s=require("../../constants/dateLocale.js"),r=require("../../utils/dateFormatter.js");require("../Badge/Badge.js");var i=require("../Text/BaseText.js");require("../Text/Text.js");var n=require("../Badge/BaseBadgeRequired.js"),o=require("../Icon/Icon.js"),d=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),u=require("../../../node_modules/rsuite/esm/DatePicker/DatePicker.js"),c=require("../../../node_modules/date-fns/esm/isBefore/index.js"),m=require("../../../node_modules/date-fns/esm/isAfter/index.js"),g=require("../../../node_modules/date-fns/esm/addDays/index.js");module.exports=b=>{var{value:x,format:f,position:h,onChange:p,onSelect:j,isError:S,errorMessage:y,errorMessageStyles:v,helperMessage:q,helperMessageStyles:w,isDisabled:D,containerStyles:M,activeContainerStyles:k,placeholder:R,placeholderStyles:O,valueStyles:N,isCleanable:B,onClean:C,onOpen:_,icon:E,iconStyles:T,hideHours:G,hideMinutes:H,hideSeconds:A,language:P="english",label:Y,labelStyles:F,variant:I="box",isHideRangesOption:L,customRangesOption:z,isRequired:K,labelRequired:$,labelRequiredStyles:J,containerRequiredStyles:Q,isShowButtonToday:U=!0,isShowButtonYesterday:V=!0,toggleAs:W}=b,X=e.__rest(b,["value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","hideHours","hideMinutes","hideSeconds","language","label","labelStyles","variant","isHideRangesOption","customRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","isShowButtonToday","isShowButtonYesterday","toggleAs"]);const[Z,ee]=l.useState(!1),te={english:"en",bahasa:"id"};return l.useEffect((()=>{x||ee(!1)}),[x]),t.jsxs("div",Object.assign({className:"relative flex flex-col gap-y-1"},{children:[(Z||D)&&t.jsx("div",{className:"absolute top-0 left-0 w-full h-full gap-y-1 z-20 cursor-pointer"}),t.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!Y&&t.jsx(i.default,{label:Y,className:d.twMerge("font-normal text-dark-gumbo text-[10px]",F)}),K&&t.jsx(n,{labelRequired:$,labelRequiredStyles:J,containerRequiredStyles:Q})]})),t.jsx(u,{value:x,locale:s.dateLocale[P],oneTap:X.isOneTap,onChange:e=>{ee(!1),p(e)},onSelect:j,onClose:()=>ee(!1),onOk:()=>ee(!1),onBlur:()=>{null==C||C(void 0),ee(!1)},onOpen:_,placement:{"top-start":"topStart","top-center":"top","top-end":"topEnd","right-start":"rightStart","right-center":"right","right-end":"rightEnd","bottom-start":"bottomStart","bottom-center":"bottom","bottom-end":"bottomEnd","left-start":"leftStart","left-center":"left","left-end":"leftEnd"}[h],shouldDisableDate:e=>X.isDisableBefore?c(e,new Date):X.minDate||X.maxDate?c(e,X.minDate?new Date(X.minDate):void 0)||m(e,X.maxDate?new Date(X.maxDate):void 0):void 0,editable:!1,cleanable:B,ranges:L?[]:null!=z?z:[U&&{label:"english"===P?"Today":"Hari ini",value:new Date,placement:"bottom"},V&&{label:"english"===P?"Yesterday":"Kemarin",value:g(new Date,-1),placement:"bottom"}],hideHours:G,hideMinutes:H,hideSeconds:A,toggleAs:W||(()=>t.jsxs("div",Object.assign({className:d.twMerge(a.default(d.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid w-full cursor-pointer",M),"line"===I&&"border-b border-t-0 border-x-0 rounded-none",Z&&k?k:Z?"border-fields-border-focus":void 0,D&&"border-dark-bermudaGray bg-light-whiteSmoke",S&&"border-red-fireEngineRed")),onClick:()=>{D||ee(!Z)}},{children:[t.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!R&&!x&&t.jsx("div",Object.assign({className:"flex flex-1"},{children:t.jsx(i.default,{label:R,variant:"small",className:d.twMerge(a.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),O)})})),!!x&&t.jsx("div",Object.assign({className:"flex flex-1"},{children:t.jsx(i.default,{label:r.dateFormatter(x,f,{locale:te[P]}),variant:"small",className:d.twMerge(a.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]"),N)})}))]})),B&&!!x&&t.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-",onClick:e=>{e.stopPropagation(),ee(!1),null==C||C(void 0)}},{children:t.jsx(o,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),t.jsx(o,{name:E||"caretDate",className:d.twMerge(a.default("fill-dark-bermudaGray w-3 h-3",`${D&&"fill-dark-bermudaGray"}`),T)})]})))}),q&&!S&&t.jsx(i.default,{label:q,className:d.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",w)}),S&&!!y&&t.jsx(i.default,{label:y,className:d.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",v)})]}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../../node_modules/classnames/index.js"),s=require("react"),r=require("../../constants/dateLocale.js"),l=require("../../utils/dateFormatter.js");require("../Badge/Badge.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var i=require("../Badge/BaseBadgeRequired.js"),o=require("../Icon/Icon.js"),d=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),u=require("../../../node_modules/rsuite/esm/DatePicker/DatePicker.js"),m=require("../../../node_modules/date-fns/esm/setYear/index.js"),c=require("../../../node_modules/date-fns/esm/getDate/index.js"),g=require("../../../node_modules/date-fns/esm/subMonths/index.js"),x=require("../../../node_modules/date-fns/esm/isBefore/index.js"),b=require("../../../node_modules/date-fns/esm/isAfter/index.js"),f=require("../../../node_modules/date-fns/esm/addDays/index.js"),h=require("../../../node_modules/date-fns/esm/setMonth/index.js"),j=require("../../../node_modules/date-fns/esm/getMonth/index.js"),p=require("../../../node_modules/date-fns/esm/getYear/index.js"),S=require("../../../node_modules/date-fns/esm/setDate/index.js"),y=require("../../../node_modules/date-fns/esm/addMonths/index.js");module.exports=q=>{var{value:w,format:v,position:D,onChange:M,onSelect:k,isError:R,errorMessage:_,errorMessageStyles:O,helperMessage:N,helperMessageStyles:B,isDisabled:C,containerStyles:E,activeContainerStyles:T,placeholder:G,placeholderStyles:H,valueStyles:Y,isCleanable:A,onClean:P,onOpen:F,icon:I,iconStyles:L,hideHours:z,hideMinutes:K,hideSeconds:$,language:J="english",label:Q,labelStyles:U,variant:V="box",isHideRangesOption:W,customRangesOption:X,isRequired:Z,labelRequired:ee,labelRequiredStyles:te,containerRequiredStyles:ae,isShowButtonToday:se=!0,isShowButtonYesterday:re=!0,toggleAs:le}=q,ne=e.__rest(q,["value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","hideHours","hideMinutes","hideSeconds","language","label","labelStyles","variant","isHideRangesOption","customRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","isShowButtonToday","isShowButtonYesterday","toggleAs"]);const[ie,oe]=s.useState(!1),de={english:"en",bahasa:"id"};return s.useEffect((()=>{w||oe(!1)}),[w]),t.jsxs("div",Object.assign({className:"relative flex flex-col gap-y-1"},{children:[(ie||C)&&t.jsx("div",{className:"absolute top-0 left-0 w-full h-full gap-y-1 z-20 cursor-pointer"}),t.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!Q&&t.jsx(n.default,{label:Q,className:d.twMerge("font-normal text-dark-gumbo text-[10px]",U)}),Z&&t.jsx(i,{labelRequired:ee,labelRequiredStyles:te,containerRequiredStyles:ae})]})),t.jsx(u,{value:w,locale:r.dateLocale[J],oneTap:ne.isOneTap,onChange:e=>{const{maxDate:t,minDate:a}=ne;let s=e;t&&b(e,new Date(t))&&(s=((e,t)=>{let a=h(m(e,p(t)),j(t));return a=S(a,c(e)),b(a,t)&&(a=g(a,1)),a})(e,new Date(t)),a&&x(s,new Date(a)))||a&&x(e,new Date(a))&&(s=((e,t)=>{let a=h(m(e,p(t)),j(t));return a=S(a,c(e)),x(a,t)&&(a=y(a,1)),a})(e,new Date(a)),x(s,new Date(a)))||(oe(!1),M(s))},onSelect:k,onClose:()=>oe(!1),onOk:()=>oe(!1),onBlur:()=>{null==P||P(void 0),oe(!1)},onOpen:F,placement:{"top-start":"topStart","top-center":"top","top-end":"topEnd","right-start":"rightStart","right-center":"right","right-end":"rightEnd","bottom-start":"bottomStart","bottom-center":"bottom","bottom-end":"bottomEnd","left-start":"leftStart","left-center":"left","left-end":"leftEnd"}[D],shouldDisableDate:e=>ne.isDisableBefore?x(e,new Date):ne.minDate||ne.maxDate?x(e,ne.minDate?new Date(ne.minDate):void 0)||b(e,ne.maxDate?new Date(ne.maxDate):void 0):void 0,editable:!1,cleanable:A,ranges:W?[]:null!=X?X:[se&&{label:"english"===J?"Today":"Hari ini",value:new Date,placement:"bottom"},re&&{label:"english"===J?"Yesterday":"Kemarin",value:f(new Date,-1),placement:"bottom"}],hideHours:z,hideMinutes:K,hideSeconds:$,toggleAs:le||(()=>t.jsxs("div",Object.assign({className:d.twMerge(a.default(d.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid w-full cursor-pointer",E),"line"===V&&"border-b border-t-0 border-x-0 rounded-none",ie&&T?T:ie?"border-fields-border-focus":void 0,C&&"border-dark-bermudaGray bg-light-whiteSmoke",R&&"border-red-fireEngineRed")),onClick:()=>{C||oe(!ie)}},{children:[t.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!G&&!w&&t.jsx("div",Object.assign({className:"flex flex-1"},{children:t.jsx(n.default,{label:G,variant:"small",className:d.twMerge(a.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),H)})})),!!w&&t.jsx("div",Object.assign({className:"flex flex-1"},{children:t.jsx(n.default,{label:l.dateFormatter(w,v,{locale:de[J]}),variant:"small",className:d.twMerge(a.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]"),Y)})}))]})),A&&!!w&&t.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-",onClick:e=>{e.stopPropagation(),oe(!1),null==P||P(void 0)}},{children:t.jsx(o,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),t.jsx(o,{name:I||"caretDate",className:d.twMerge(a.default("fill-dark-bermudaGray w-3 h-3",`${C&&"fill-dark-bermudaGray"}`),L)})]})))}),N&&!R&&t.jsx(n.default,{label:N,className:d.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",B)}),R&&!!_&&t.jsx(n.default,{label:_,className:d.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",O)})]}))};
 //# sourceMappingURL=BaseDatePicker.js.map

package/build/src/components/DatePicker/BaseDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDatePicker.js","sources":["../../../../src/components/DatePicker/BaseDatePicker.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport classNames from 'classnames';\nimport * as dateFns from 'date-fns';\nimport { useEffect, useState } from 'react';\nimport { DatePicker as DatePickerRsuite } from 'rsuite';\nimport { TypeAttributes } from 'rsuite/esm/@types/common';\nimport { twMerge } from 'tailwind-merge';\n\nimport { dateLocale } from '../../constants/dateLocale';\nimport { dateFormatter } from '../../utils/dateFormatter';\nimport { BaseBadgeRequired } from '../Badge';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n  BaseDatePickerInterface,\n  DatePickerLocalType,\n  PickerPosition\n} from './BaseDatePicker.type';\n\nconst BaseDatePicker = ({\n  value,\n  format,\n  position,\n  onChange,\n  onSelect,\n  isError,\n  errorMessage,\n  errorMessageStyles,\n  helperMessage,\n  helperMessageStyles,\n  isDisabled,\n  containerStyles,\n  activeContainerStyles,\n  placeholder,\n  placeholderStyles,\n  valueStyles,\n  isCleanable,\n  onClean,\n  onOpen,\n  icon,\n  iconStyles,\n  hideHours,\n  hideMinutes,\n  hideSeconds,\n  language = 'english',\n  label,\n  labelStyles,\n  variant = 'box',\n  isHideRangesOption,\n  customRangesOption,\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  isShowButtonToday = true,\n  isShowButtonYesterday = true,\n  toggleAs,\n  ...props\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nBaseDatePickerInterface) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const PlacementMapper: Record<PickerPosition, TypeAttributes.Placement> = {\n    'top-start': 'topStart',\n    'top-center': 'top',\n    'top-end': 'topEnd',\n    'right-start': 'rightStart',\n    'right-center': 'right',\n    'right-end': 'rightEnd',\n    'bottom-start': 'bottomStart',\n    'bottom-center': 'bottom',\n    'bottom-end': 'bottomEnd',\n    'left-start': 'leftStart',\n    'left-center': 'left',\n    'left-end': 'leftEnd'\n  };\n\n  const LanguageMapper: Record<DatePickerLocalType, 'en' | 'id'> = {\n    english: 'en',\n    bahasa: 'id'\n  };\n\n  useEffect(() => {\n    if (!value) {\n      setIsOpen(false);\n    }\n  }, [value]);\n\n  return (\n    <div className='relative flex flex-col gap-y-1'>\n      {(isOpen || isDisabled) && (\n        <div className='absolute top-0 left-0 w-full h-full gap-y-1 z-20 cursor-pointer'></div>\n      )}\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      <DatePickerRsuite\n        value={value}\n        locale={dateLocale[language]}\n        oneTap={props.isOneTap}\n        onChange={(date: Date) => {\n          setIsOpen(false);\n          onChange(date);\n        }}\n        onSelect={onSelect}\n        onClose={() => setIsOpen(false)}\n        onOk={() => setIsOpen(false)}\n        onBlur={() => {\n          onClean?.(undefined);\n          setIsOpen(false);\n        }}\n        onOpen={onOpen}\n        placement={PlacementMapper[position]}\n        shouldDisableDate={(date: Date) =>\n          props.isDisableBefore\n            ? dateFns.isBefore(date, new Date())\n            : props.minDate || props.maxDate\n            ? dateFns.isBefore(date, props.minDate ? new Date(props.minDate) : undefined) ||\n              dateFns.isAfter(date, props.maxDate ? new Date(props.maxDate) : undefined)\n            : undefined\n        }\n        editable={false}\n        cleanable={isCleanable}\n        ranges={\n          isHideRangesOption\n            ? []\n            : customRangesOption ?? [\n                isShowButtonToday && {\n                  label: language === 'english' ? 'Today' : 'Hari ini',\n                  value: new Date(),\n                  placement: 'bottom'\n                },\n                isShowButtonYesterday && {\n                  label: language === 'english' ? 'Yesterday' : 'Kemarin',\n                  value: dateFns.addDays(new Date(), -1),\n                  placement: 'bottom'\n                }\n              ]\n        }\n        hideHours={hideHours}\n        hideMinutes={hideMinutes}\n        hideSeconds={hideSeconds}\n        toggleAs={\n          toggleAs\n            ? toggleAs\n            : // eslint-disable-next-line sonarjs/cognitive-complexity\n              () => (\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 w-full cursor-pointer',\n                        containerStyles\n                      ),\n                      variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n                      isOpen && activeContainerStyles\n                        ? activeContainerStyles\n                        : isOpen\n                        ? 'border-fields-border-focus'\n                        : undefined,\n                      isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n                      isError && 'border-red-fireEngineRed'\n                    )\n                  )}\n                  onClick={() => {\n                    if (!isDisabled) setIsOpen(!isOpen);\n                  }}\n                >\n                  <div className='flex flex-1'>\n                    {!!placeholder && !value && (\n                      <div className='flex flex-1'>\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                    {!!value && (\n                      <div className='flex flex-1'>\n                        <BaseText\n                          label={dateFormatter(value, format, { locale: LanguageMapper[language] })}\n                          variant='small'\n                          className={twMerge(\n                            classNames(\n                              'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]'\n                            ),\n                            valueStyles\n                          )}\n                        />\n                      </div>\n                    )}\n                  </div>\n\n                  {isCleanable && !!value && (\n                    <div\n                      className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-'\n                      onClick={(e) => {\n                        e.stopPropagation();\n\n                        setIsOpen(false);\n                        onClean?.(undefined);\n                      }}\n                    >\n                      <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n                    </div>\n                  )}\n                  <Icon\n                    name={icon || 'caretDate'}\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        }\n      />\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  );\n};\n\nexport default BaseDatePicker;\n"],"names":["_a","value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","hideHours","hideMinutes","hideSeconds","language","label","labelStyles","variant","isHideRangesOption","customRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","isShowButtonToday","isShowButtonYesterday","toggleAs","props","__rest","isOpen","setIsOpen","useState","LanguageMapper","english","bahasa","useEffect","_jsxs","className","children","_jsx","Object","assign","jsx","BaseText","twMerge","BaseBadgeRequired","DatePickerRsuite","locale","dateLocale","oneTap","isOneTap","date","onClose","onOk","onBlur","undefined","placement","shouldDisableDate","isDisableBefore","dateFns.isBefore","Date","minDate","maxDate","dateFns.isAfter","editable","cleanable","ranges","dateFns.addDays","classNames","onClick","dateFormatter","e","stopPropagation","Icon","name"],"mappings":"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"}
+{"version":3,"file":"BaseDatePicker.js","sources":["../../../../src/components/DatePicker/BaseDatePicker.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport classNames from 'classnames';\nimport * as dateFns from 'date-fns';\nimport { useEffect, useState } from 'react';\nimport { DatePicker as DatePickerRsuite } from 'rsuite';\nimport { TypeAttributes } from 'rsuite/esm/@types/common';\nimport { twMerge } from 'tailwind-merge';\n\nimport { dateLocale } from '../../constants/dateLocale';\nimport { dateFormatter } from '../../utils/dateFormatter';\nimport { BaseBadgeRequired } from '../Badge';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n  BaseDatePickerInterface,\n  DatePickerLocalType,\n  PickerPosition\n} from './BaseDatePicker.type';\n\nconst BaseDatePicker = ({\n  value,\n  format,\n  position,\n  onChange,\n  onSelect,\n  isError,\n  errorMessage,\n  errorMessageStyles,\n  helperMessage,\n  helperMessageStyles,\n  isDisabled,\n  containerStyles,\n  activeContainerStyles,\n  placeholder,\n  placeholderStyles,\n  valueStyles,\n  isCleanable,\n  onClean,\n  onOpen,\n  icon,\n  iconStyles,\n  hideHours,\n  hideMinutes,\n  hideSeconds,\n  language = 'english',\n  label,\n  labelStyles,\n  variant = 'box',\n  isHideRangesOption,\n  customRangesOption,\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  isShowButtonToday = true,\n  isShowButtonYesterday = true,\n  toggleAs,\n  ...props\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nBaseDatePickerInterface) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const PlacementMapper: Record<PickerPosition, TypeAttributes.Placement> = {\n    'top-start': 'topStart',\n    'top-center': 'top',\n    'top-end': 'topEnd',\n    'right-start': 'rightStart',\n    'right-center': 'right',\n    'right-end': 'rightEnd',\n    'bottom-start': 'bottomStart',\n    'bottom-center': 'bottom',\n    'bottom-end': 'bottomEnd',\n    'left-start': 'leftStart',\n    'left-center': 'left',\n    'left-end': 'leftEnd'\n  };\n\n  const LanguageMapper: Record<DatePickerLocalType, 'en' | 'id'> = {\n    english: 'en',\n    bahasa: 'id'\n  };\n\n  const adjustDateToMax = (date: Date, maxDate: Date): Date => {\n    let adjustedDate = dateFns.setMonth(\n      dateFns.setYear(date, dateFns.getYear(maxDate)),\n      dateFns.getMonth(maxDate)\n    );\n    adjustedDate = dateFns.setDate(adjustedDate, dateFns.getDate(date));\n\n    if (dateFns.isAfter(adjustedDate, maxDate)) {\n      adjustedDate = dateFns.subMonths(adjustedDate, 1);\n    }\n\n    return adjustedDate;\n  };\n\n  const adjustDateToMin = (date: Date, minDate: Date): Date => {\n    let adjustedDate = dateFns.setMonth(\n      dateFns.setYear(date, dateFns.getYear(minDate)),\n      dateFns.getMonth(minDate)\n    );\n    adjustedDate = dateFns.setDate(adjustedDate, dateFns.getDate(date));\n    if (dateFns.isBefore(adjustedDate, minDate)) {\n      adjustedDate = dateFns.addMonths(adjustedDate, 1);\n    }\n\n    return adjustedDate;\n  };\n\n  const onChangeHandler = (date: Date): void => {\n    const { maxDate, minDate } = props;\n    let adjustedDate = date;\n\n    if (maxDate && dateFns.isAfter(date, new Date(maxDate))) {\n      adjustedDate = adjustDateToMax(date, new Date(maxDate));\n\n      if (minDate && dateFns.isBefore(adjustedDate, new Date(minDate))) {\n        return;\n      }\n    }\n\n    if (minDate && dateFns.isBefore(date, new Date(minDate))) {\n      adjustedDate = adjustDateToMin(date, new Date(minDate));\n\n      if (dateFns.isBefore(adjustedDate, new Date(minDate))) {\n        return;\n      }\n    }\n\n    setIsOpen(false);\n    onChange(adjustedDate);\n  };\n\n  useEffect(() => {\n    if (!value) {\n      setIsOpen(false);\n    }\n  }, [value]);\n\n  return (\n    <div className='relative flex flex-col gap-y-1'>\n      {(isOpen || isDisabled) && (\n        <div className='absolute top-0 left-0 w-full h-full gap-y-1 z-20 cursor-pointer'></div>\n      )}\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      <DatePickerRsuite\n        value={value}\n        locale={dateLocale[language]}\n        oneTap={props.isOneTap}\n        onChange={onChangeHandler}\n        onSelect={onSelect}\n        onClose={() => setIsOpen(false)}\n        onOk={() => setIsOpen(false)}\n        onBlur={() => {\n          onClean?.(undefined);\n          setIsOpen(false);\n        }}\n        onOpen={onOpen}\n        placement={PlacementMapper[position]}\n        shouldDisableDate={(date: Date) =>\n          props.isDisableBefore\n            ? dateFns.isBefore(date, new Date())\n            : props.minDate || props.maxDate\n            ? dateFns.isBefore(date, props.minDate ? new Date(props.minDate) : undefined) ||\n              dateFns.isAfter(date, props.maxDate ? new Date(props.maxDate) : undefined)\n            : undefined\n        }\n        editable={false}\n        cleanable={isCleanable}\n        ranges={\n          isHideRangesOption\n            ? []\n            : customRangesOption ?? [\n                isShowButtonToday && {\n                  label: language === 'english' ? 'Today' : 'Hari ini',\n                  value: new Date(),\n                  placement: 'bottom'\n                },\n                isShowButtonYesterday && {\n                  label: language === 'english' ? 'Yesterday' : 'Kemarin',\n                  value: dateFns.addDays(new Date(), -1),\n                  placement: 'bottom'\n                }\n              ]\n        }\n        hideHours={hideHours}\n        hideMinutes={hideMinutes}\n        hideSeconds={hideSeconds}\n        toggleAs={\n          toggleAs\n            ? toggleAs\n            : // eslint-disable-next-line sonarjs/cognitive-complexity\n              () => (\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 w-full cursor-pointer',\n                        containerStyles\n                      ),\n                      variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n                      isOpen && activeContainerStyles\n                        ? activeContainerStyles\n                        : isOpen\n                        ? 'border-fields-border-focus'\n                        : undefined,\n                      isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n                      isError && 'border-red-fireEngineRed'\n                    )\n                  )}\n                  onClick={() => {\n                    if (!isDisabled) setIsOpen(!isOpen);\n                  }}\n                >\n                  <div className='flex flex-1'>\n                    {!!placeholder && !value && (\n                      <div className='flex flex-1'>\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                    {!!value && (\n                      <div className='flex flex-1'>\n                        <BaseText\n                          label={dateFormatter(value, format, { locale: LanguageMapper[language] })}\n                          variant='small'\n                          className={twMerge(\n                            classNames(\n                              'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]'\n                            ),\n                            valueStyles\n                          )}\n                        />\n                      </div>\n                    )}\n                  </div>\n\n                  {isCleanable && !!value && (\n                    <div\n                      className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-'\n                      onClick={(e) => {\n                        e.stopPropagation();\n\n                        setIsOpen(false);\n                        onClean?.(undefined);\n                      }}\n                    >\n                      <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n                    </div>\n                  )}\n                  <Icon\n                    name={icon || 'caretDate'}\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        }\n      />\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  );\n};\n\nexport default BaseDatePicker;\n"],"names":["_a","value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","hideHours","hideMinutes","hideSeconds","language","label","labelStyles","variant","isHideRangesOption","customRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","isShowButtonToday","isShowButtonYesterday","toggleAs","props","__rest","isOpen","setIsOpen","useState","LanguageMapper","english","bahasa","useEffect","_jsxs","Object","assign","className","children","_jsx","BaseText","twMerge","BaseBadgeRequired","jsx","DatePickerRsuite","locale","dateLocale","oneTap","isOneTap","date","maxDate","minDate","adjustedDate","dateFns.isAfter","Date","dateFns.setMonth","dateFns.setYear","dateFns.getYear","dateFns.getMonth","dateFns.setDate","dateFns.getDate","dateFns.subMonths","adjustDateToMax","dateFns.isBefore","dateFns.addMonths","adjustDateToMin","onClose","onOk","onBlur","undefined","placement","shouldDisableDate","isDisableBefore","editable","cleanable","ranges","dateFns.addDays","classNames","onClick","dateFormatter","e","stopPropagation","Icon","name"],"mappings":"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"}

package/build/src/components/DatePicker/DatePicker.js

@@ -1,28 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../node_modules/prop-types/index.js"),o=require("react"),t=require("styled-components"),i=require("../../constants/dateLocale.js"),a=require("../../styles/BorderRadius.js"),s=require("../../styles/Colors.js"),n=require("../../../node_modules/rsuite/esm/DatePicker/DatePicker.js"),d=require("../../../node_modules/date-fns/esm/isBefore/index.js"),l=require("../../../node_modules/date-fns/esm/isAfter/index.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=p(t).default(n)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../node_modules/prop-types/index.js"),t=require("react"),o=require("styled-components"),s=require("../../constants/dateLocale.js"),a=require("../../styles/BorderRadius.js"),i=require("../../styles/Colors.js"),n=require("../../../node_modules/rsuite/esm/DatePicker/DatePicker.js"),d=require("../../../node_modules/date-fns/esm/isBefore/index.js"),l=require("../../../node_modules/date-fns/esm/isAfter/index.js"),p=require("../../../node_modules/date-fns/esm/setMonth/index.js"),u=require("../../../node_modules/date-fns/esm/getMonth/index.js"),m=require("../../../node_modules/date-fns/esm/setYear/index.js"),x=require("../../../node_modules/date-fns/esm/getYear/index.js"),b=require("../../../node_modules/date-fns/esm/setDate/index.js"),c=require("../../../node_modules/date-fns/esm/getDate/index.js"),D=require("../../../node_modules/date-fns/esm/subMonths/index.js"),f=require("../../../node_modules/date-fns/esm/addMonths/index.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const y=g(o).default(n)`
   width: ${({width:e})=>e};
   .rs-picker-toggle {
-    ${({variant:e,iserror:r,isDisabled:o})=>{const i=r?s.ColorRed.fireEngineRed:o?s.ColorDark.bermudaGray:s.ColorDark.gumbo;return"line"===e?t.css`
+    ${({variant:e,iserror:r,isDisabled:t})=>{const s=r?i.ColorRed.fireEngineRed:t?i.ColorDark.bermudaGray:i.ColorDark.gumbo;return"line"===e?o.css`
           border: 0px !important;
-          border-bottom: 1px solid ${i} !important;
+          border-bottom: 1px solid ${s} !important;
           border-radius: ${a.BorderRadiusType.none} !important;
-        `:t.css`
-          border: 1px solid ${i} !important;
+        `:o.css`
+          border: 1px solid ${s} !important;
           border-radius: ${a.BorderRadiusType.medium} !important;
         `}}
   }
   .rs-picker-toggle-active,
   .rs-picker.rs-picker-focused {
-    ${({variant:e})=>{if("line"===e)return t.css`
+    ${({variant:e})=>{if("line"===e)return o.css`
           -webkit-box-shadow: 0 0 0 0;
           -webkit-box-shadow: 0 0 0 0;
           border: 0px !important;
-          border-bottom: 1px solid ${s.ColorDark.gumbo} !important;
-          border-color: ${s.ColorBlue.buttonBlue} !important;
+          border-bottom: 1px solid ${i.ColorDark.gumbo} !important;
+          border-color: ${i.ColorBlue.buttonBlue} !important;
           border-radius: 4px !important;
           border-radius: ${a.BorderRadiusType.none} !important;
           box-shadow: 0 0 0 0;
           box-shadow: 0 0 0 0;
         `}}
   }
-`,m=r=>{const[t,a]=o.useState(!1),s=o.useRef(null);return e.jsx("div",Object.assign({ref:r.isDisabledFloating?s:void 0,style:r.isDisabledFloating?{position:"relative",width:"100%"}:{width:r.isFullWidth?"100%":void 0}},{children:e.jsx(u,{container:r.isDisabledFloating?()=>s.current:void 0,locale:i.dateLocale[r.language],oneTap:r.isOneTap,disabled:r.isDisabled,open:r.isOpen,disabledDate:e=>r.isDisableBefore?d(e,new Date):r.minDate||r.maxDate?d(e,r.minDate?new Date(r.minDate):void 0)||l(e,r.maxDate?new Date(r.maxDate):void 0):void 0,placeholder:r.placeholder,"data-test-id":r.dataTestId,value:r.value,onSelect:r.onSelect,onChange:r.onChange,defaultValue:r.defaultValue,format:t&&"dd MMM"===r.format?"dd MMM yyyy":r.format,ranges:r.isHideRangesOption?[]:void 0,placement:r.placement,variant:r.variant,iserror:r.isError?"error":void 0,onBlur:r.onBlur,width:r.isFullWidth?"100%":r.width,onOpen:()=>{"dd MMM"===r.format&&a(!0)},onClose:()=>{"dd MMM"===r.format&&a(!1)},cleanable:r.isCleanable,onClean:r.onClean,editable:!1})}))};m.prototype={placeholder:r.propTypesExports.string,isOneTap:r.propTypesExports.bool,variant:r.propTypesExports.string,isDisableBefore:r.propTypesExports.bool,format:r.propTypesExports.string,language:r.propTypesExports.string,width:r.propTypesExports.string,minDate:r.propTypesExports.string,maxDate:r.propTypesExports.string,isHideRangesOption:r.propTypesExports.bool},m.defaultProps={placeholder:"Select Date",isOneTap:!1,variant:"box",isDisableBefore:!1,format:"dd MMMM yyyy",language:"english",width:"200px",minDate:"",maxDate:"",isHideRangesOption:!1,isCleanable:!0},exports.DatePickerRsuiteStyled=u,exports.default=m;
+`,h=r=>{const[o,a]=t.useState(!1),i=t.useRef(null);return e.jsx("div",Object.assign({ref:r.isDisabledFloating?i:void 0,style:r.isDisabledFloating?{position:"relative",width:"100%"}:{width:r.isFullWidth?"100%":void 0}},{children:e.jsx(y,{container:r.isDisabledFloating?()=>i.current:void 0,locale:s.dateLocale[r.language],oneTap:r.isOneTap,disabled:r.isDisabled,open:r.isOpen,disabledDate:e=>r.isDisableBefore?d(e,new Date):r.minDate||r.maxDate?d(e,r.minDate?new Date(r.minDate):void 0)||l(e,r.maxDate?new Date(r.maxDate):void 0):void 0,placeholder:r.placeholder,"data-test-id":r.dataTestId,value:r.value,onSelect:r.onSelect,onChange:e=>{const{maxDate:t,minDate:o}=r;let s=e;t&&l(e,new Date(t))&&(s=((e,r)=>{let t=p(m(e,x(r)),u(r));return t=b(t,c(e)),l(t,r)&&(t=D(t,1)),t})(e,new Date(t)),o&&d(s,new Date(o)))||o&&d(e,new Date(o))&&(s=((e,r)=>{let t=p(m(e,x(r)),u(r));return t=b(t,c(e)),d(t,r)&&(t=f(t,1)),t})(e,new Date(o)),d(s,new Date(o)))||r.onChange(s)},defaultValue:r.defaultValue,format:o&&"dd MMM"===r.format?"dd MMM yyyy":r.format,ranges:r.isHideRangesOption?[]:void 0,placement:r.placement,variant:r.variant,iserror:r.isError?"error":void 0,onBlur:r.onBlur,width:r.isFullWidth?"100%":r.width,onOpen:()=>{"dd MMM"===r.format&&a(!0)},onClose:()=>{"dd MMM"===r.format&&a(!1)},cleanable:r.isCleanable,onClean:r.onClean,editable:!1})}))};h.prototype={placeholder:r.propTypesExports.string,isOneTap:r.propTypesExports.bool,variant:r.propTypesExports.string,isDisableBefore:r.propTypesExports.bool,format:r.propTypesExports.string,language:r.propTypesExports.string,width:r.propTypesExports.string,minDate:r.propTypesExports.string,maxDate:r.propTypesExports.string,isHideRangesOption:r.propTypesExports.bool},h.defaultProps={placeholder:"Select Date",isOneTap:!1,variant:"box",isDisableBefore:!1,format:"dd MMMM yyyy",language:"english",width:"200px",minDate:"",maxDate:"",isHideRangesOption:!1,isCleanable:!0},exports.DatePickerRsuiteStyled=y,exports.default=h;
 //# sourceMappingURL=DatePicker.js.map

package/build/src/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as dateFns from 'date-fns';\nimport * as PropTypes from 'prop-types';\nimport { useRef, useState } from 'react';\nimport { DatePicker as DatePickerRsuite } from 'rsuite';\nimport styled, { css } from 'styled-components';\n\nimport { FormVariantType } from '../../blocks/Form/Form.type';\nimport { dateLocale } from '../../constants/dateLocale';\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { ColorBlue, ColorDark, ColorRed } from '../../styles/Colors';\nimport { DatePickerInterface } from './DatePicker.type';\n\ninterface DatePickerStyleInterface {\n  iserror?: string;\n  variant?: FormVariantType;\n  disabled?: boolean;\n}\n\nexport const DatePickerRsuiteStyled = styled(DatePickerRsuite)`\n  width: ${({ width }: DatePickerInterface) => width};\n  .rs-picker-toggle {\n    ${({ variant, iserror, isDisabled }: DatePickerStyleInterface & DatePickerInterface) => {\n      const borderColor = iserror\n        ? ColorRed.fireEngineRed\n        : isDisabled\n        ? ColorDark.bermudaGray\n        : ColorDark.gumbo;\n\n      if (variant === 'line') {\n        return css`\n          border: 0px !important;\n          border-bottom: 1px solid ${borderColor} !important;\n          border-radius: ${BorderRadiusType.none} !important;\n        `;\n      } else {\n        return css`\n          border: 1px solid ${borderColor} !important;\n          border-radius: ${BorderRadiusType.medium} !important;\n        `;\n      }\n    }}\n  }\n  .rs-picker-toggle-active,\n  .rs-picker.rs-picker-focused {\n    ${({ variant }: DatePickerStyleInterface) => {\n      if (variant === 'line') {\n        return css`\n          -webkit-box-shadow: 0 0 0 0;\n          -webkit-box-shadow: 0 0 0 0;\n          border: 0px !important;\n          border-bottom: 1px solid ${ColorDark.gumbo} !important;\n          border-color: ${ColorBlue.buttonBlue} !important;\n          border-radius: 4px !important;\n          border-radius: ${BorderRadiusType.none} !important;\n          box-shadow: 0 0 0 0;\n          box-shadow: 0 0 0 0;\n        `;\n      }\n    }}\n  }\n`;\n\n// FIXME: Warning: Received `false` for a non-boolean attribute `iserror`.\n// FIXME: rsuite change to pure component\nconst DatePicker = (props: DatePickerInterface) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const containerRef = useRef(null);\n\n  return (\n    <div\n      ref={props.isDisabledFloating ? containerRef : undefined}\n      style={\n        props.isDisabledFloating\n          ? { position: 'relative', width: '100%' }\n          : { width: props.isFullWidth ? '100%' : undefined }\n      }\n    >\n      <DatePickerRsuiteStyled\n        container={props.isDisabledFloating ? () => containerRef.current : undefined}\n        // FIXME: date format on month select still with format value\n        locale={dateLocale[props.language]}\n        oneTap={props.isOneTap}\n        disabled={props.isDisabled}\n        open={props.isOpen}\n        disabledDate={(date: Date) =>\n          props.isDisableBefore\n            ? dateFns.isBefore(date, new Date())\n            : props.minDate || props.maxDate\n            ? dateFns.isBefore(date, props.minDate ? new Date(props.minDate) : undefined) ||\n              dateFns.isAfter(date, props.maxDate ? new Date(props.maxDate) : undefined)\n            : undefined\n        }\n        placeholder={props.placeholder}\n        data-test-id={props.dataTestId}\n        value={props.value}\n        onSelect={props.onSelect}\n        onChange={props.onChange}\n        defaultValue={props.defaultValue}\n        format={isOpen && props.format === 'dd MMM' ? 'dd MMM yyyy' : props.format}\n        ranges={props.isHideRangesOption ? [] : undefined}\n        placement={props.placement}\n        variant={props.variant}\n        iserror={props.isError ? 'error' : undefined}\n        onBlur={props.onBlur}\n        width={props.isFullWidth ? '100%' : props.width}\n        onOpen={() => {\n          if (props.format === 'dd MMM') {\n            setIsOpen(true);\n          }\n        }}\n        onClose={() => {\n          if (props.format === 'dd MMM') {\n            setIsOpen(false);\n          }\n        }}\n        cleanable={props.isCleanable}\n        onClean={props.onClean}\n        editable={false}\n      />\n    </div>\n  );\n};\n\nDatePicker.prototype = {\n  placeholder: PropTypes.string,\n  isOneTap: PropTypes.bool,\n  variant: PropTypes.string,\n  isDisableBefore: PropTypes.bool,\n  format: PropTypes.string,\n  language: PropTypes.string,\n  width: PropTypes.string,\n  minDate: PropTypes.string,\n  maxDate: PropTypes.string,\n  isHideRangesOption: PropTypes.bool\n};\n\nDatePicker.defaultProps = {\n  placeholder: 'Select Date',\n  isOneTap: false,\n  variant: 'box',\n  isDisableBefore: false,\n  format: 'dd MMMM yyyy',\n  language: 'english',\n  width: '200px',\n  minDate: '',\n  maxDate: '',\n  isHideRangesOption: false,\n  isCleanable: true\n};\n\nexport default DatePicker;\n"],"names":["DatePickerRsuiteStyled","styled","DatePickerRsuite","width","variant","iserror","isDisabled","borderColor","ColorRed","fireEngineRed","ColorDark","bermudaGray","gumbo","css","BorderRadiusType","none","medium","ColorBlue","buttonBlue","DatePicker","props","isOpen","setIsOpen","useState","containerRef","useRef","_jsx","ref","isDisabledFloating","undefined","style","position","isFullWidth","children","jsx","container","current","locale","dateLocale","language","oneTap","isOneTap","disabled","open","disabledDate","date","isDisableBefore","dateFns.isBefore","Date","minDate","maxDate","dateFns.isAfter","placeholder","dataTestId","value","onSelect","onChange","defaultValue","format","ranges","isHideRangesOption","placement","isError","onBlur","onOpen","onClose","cleanable","isCleanable","onClean","editable","prototype","PropTypes.string","propTypesExports","string","PropTypes.bool","bool","defaultProps"],"mappings":"imBAkBaA,OAAyBC,QAAOC,EAAiB;WACnD,EAAGC,WAAiCA;;MAEzC,EAAGC,UAASC,UAASC,iBACrB,MAAMC,EAAcF,EAChBG,EAAAA,SAASC,cACTH,EACAI,EAAAA,UAAUC,YACVD,EAAAA,UAAUE,MAEd,MAAgB,SAAZR,EACKS,EAAGA,GAAA;;qCAEmBN;2BACVO,EAAAA,iBAAiBC;UAG7BF,EAAGA,GAAA;8BACYN;2BACHO,EAAAA,iBAAiBE;SAErC;;;;MAKD,EAAGZ,cACH,GAAgB,SAAZA,EACF,OAAOS,EAAGA,GAAA;;;;qCAImBH,EAAAA,UAAUE;0BACrBK,EAAAA,UAAUC;;2BAETJ,EAAAA,iBAAiBC;;;SAIrC;;EAODI,EAAcC,IAClB,MAAOC,EAAQC,GAAaC,EAAQA,UAAU,GACxCC,EAAeC,SAAO,MAE5B,OACEC,2BACEC,IAAKP,EAAMQ,mBAAqBJ,OAAeK,EAC/CC,MACEV,EAAMQ,mBACF,CAAEG,SAAU,WAAY5B,MAAO,QAC/B,CAAEA,MAAOiB,EAAMY,YAAc,YAASH,IAG5C,CAAAI,SAAAP,EAAAQ,IAAClC,EAAsB,CACrBmC,UAAWf,EAAMQ,mBAAqB,IAAMJ,EAAaY,aAAUP,EAEnEQ,OAAQC,EAAUA,WAAClB,EAAMmB,UACzBC,OAAQpB,EAAMqB,SACdC,SAAUtB,EAAMd,WAChBqC,KAAMvB,EAAMC,OACZuB,aAAeC,GACbzB,EAAM0B,gBACFC,EAAiBF,EAAM,IAAIG,MAC3B5B,EAAM6B,SAAW7B,EAAM8B,QACvBH,EAAiBF,EAAMzB,EAAM6B,QAAU,IAAID,KAAK5B,EAAM6B,cAAWpB,IACjEsB,EAAgBN,EAAMzB,EAAM8B,QAAU,IAAIF,KAAK5B,EAAM8B,cAAWrB,QAChEA,EAENuB,YAAahC,EAAMgC,YAAW,eAChBhC,EAAMiC,WACpBC,MAAOlC,EAAMkC,MACbC,SAAUnC,EAAMmC,SAChBC,SAAUpC,EAAMoC,SAChBC,aAAcrC,EAAMqC,aACpBC,OAAQrC,GAA2B,WAAjBD,EAAMsC,OAAsB,cAAgBtC,EAAMsC,OACpEC,OAAQvC,EAAMwC,mBAAqB,QAAK/B,EACxCgC,UAAWzC,EAAMyC,UACjBzD,QAASgB,EAAMhB,QACfC,QAASe,EAAM0C,QAAU,aAAUjC,EACnCkC,OAAQ3C,EAAM2C,OACd5D,MAAOiB,EAAMY,YAAc,OAASZ,EAAMjB,MAC1C6D,OAAQ,KACe,WAAjB5C,EAAMsC,QACRpC,GAAU,EACX,EAEH2C,QAAS,KACc,WAAjB7C,EAAMsC,QACRpC,GAAU,EACX,EAEH4C,UAAW9C,EAAM+C,YACjBC,QAAShD,EAAMgD,QACfC,UAAU,MAGd,EAGJlD,EAAWmD,UAAY,CACrBlB,YAAamB,EAAgBC,iBAAAC,OAC7BhC,SAAUiC,EAAcF,iBAAAG,KACxBvE,QAASmE,EAAgBC,iBAAAC,OACzB3B,gBAAiB4B,EAAcF,iBAAAG,KAC/BjB,OAAQa,EAAgBC,iBAAAC,OACxBlC,SAAUgC,EAAgBC,iBAAAC,OAC1BtE,MAAOoE,EAAgBC,iBAAAC,OACvBxB,QAASsB,EAAgBC,iBAAAC,OACzBvB,QAASqB,EAAgBC,iBAAAC,OACzBb,mBAAoBc,EAAcF,iBAAAG,MAGpCxD,EAAWyD,aAAe,CACxBxB,YAAa,cACbX,UAAU,EACVrC,QAAS,MACT0C,iBAAiB,EACjBY,OAAQ,eACRnB,SAAU,UACVpC,MAAO,QACP8C,QAAS,GACTC,QAAS,GACTU,oBAAoB,EACpBO,aAAa"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as dateFns from 'date-fns';\nimport * as PropTypes from 'prop-types';\nimport { useRef, useState } from 'react';\nimport { DatePicker as DatePickerRsuite } from 'rsuite';\nimport styled, { css } from 'styled-components';\n\nimport { FormVariantType } from '../../blocks/Form/Form.type';\nimport { dateLocale } from '../../constants/dateLocale';\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { ColorBlue, ColorDark, ColorRed } from '../../styles/Colors';\nimport { DatePickerInterface } from './DatePicker.type';\n\ninterface DatePickerStyleInterface {\n  iserror?: string;\n  variant?: FormVariantType;\n  disabled?: boolean;\n}\n\nexport const DatePickerRsuiteStyled = styled(DatePickerRsuite)`\n  width: ${({ width }: DatePickerInterface) => width};\n  .rs-picker-toggle {\n    ${({ variant, iserror, isDisabled }: DatePickerStyleInterface & DatePickerInterface) => {\n      const borderColor = iserror\n        ? ColorRed.fireEngineRed\n        : isDisabled\n        ? ColorDark.bermudaGray\n        : ColorDark.gumbo;\n\n      if (variant === 'line') {\n        return css`\n          border: 0px !important;\n          border-bottom: 1px solid ${borderColor} !important;\n          border-radius: ${BorderRadiusType.none} !important;\n        `;\n      } else {\n        return css`\n          border: 1px solid ${borderColor} !important;\n          border-radius: ${BorderRadiusType.medium} !important;\n        `;\n      }\n    }}\n  }\n  .rs-picker-toggle-active,\n  .rs-picker.rs-picker-focused {\n    ${({ variant }: DatePickerStyleInterface) => {\n      if (variant === 'line') {\n        return css`\n          -webkit-box-shadow: 0 0 0 0;\n          -webkit-box-shadow: 0 0 0 0;\n          border: 0px !important;\n          border-bottom: 1px solid ${ColorDark.gumbo} !important;\n          border-color: ${ColorBlue.buttonBlue} !important;\n          border-radius: 4px !important;\n          border-radius: ${BorderRadiusType.none} !important;\n          box-shadow: 0 0 0 0;\n          box-shadow: 0 0 0 0;\n        `;\n      }\n    }}\n  }\n`;\n\n// FIXME: Warning: Received `false` for a non-boolean attribute `iserror`.\n// FIXME: rsuite change to pure component\nconst DatePicker = (props: DatePickerInterface) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const containerRef = useRef(null);\n\n  const adjustDateToMax = (date: Date, maxDate: Date): Date => {\n    let adjustedDate = dateFns.setMonth(\n      dateFns.setYear(date, dateFns.getYear(maxDate)),\n      dateFns.getMonth(maxDate)\n    );\n    adjustedDate = dateFns.setDate(adjustedDate, dateFns.getDate(date));\n\n    if (dateFns.isAfter(adjustedDate, maxDate)) {\n      adjustedDate = dateFns.subMonths(adjustedDate, 1);\n    }\n\n    return adjustedDate;\n  };\n\n  const adjustDateToMin = (date: Date, minDate: Date): Date => {\n    let adjustedDate = dateFns.setMonth(\n      dateFns.setYear(date, dateFns.getYear(minDate)),\n      dateFns.getMonth(minDate)\n    );\n    adjustedDate = dateFns.setDate(adjustedDate, dateFns.getDate(date));\n    if (dateFns.isBefore(adjustedDate, minDate)) {\n      adjustedDate = dateFns.addMonths(adjustedDate, 1);\n    }\n\n    return adjustedDate;\n  };\n\n  const onChangeHandler = (date: Date): void => {\n    const { maxDate, minDate } = props;\n    let adjustedDate = date;\n\n    if (maxDate && dateFns.isAfter(date, new Date(maxDate))) {\n      adjustedDate = adjustDateToMax(date, new Date(maxDate));\n\n      if (minDate && dateFns.isBefore(adjustedDate, new Date(minDate))) {\n        return;\n      }\n    }\n\n    if (minDate && dateFns.isBefore(date, new Date(minDate))) {\n      adjustedDate = adjustDateToMin(date, new Date(minDate));\n\n      if (dateFns.isBefore(adjustedDate, new Date(minDate))) {\n        return;\n      }\n    }\n\n    props.onChange(adjustedDate);\n  };\n\n  return (\n    <div\n      ref={props.isDisabledFloating ? containerRef : undefined}\n      style={\n        props.isDisabledFloating\n          ? { position: 'relative', width: '100%' }\n          : { width: props.isFullWidth ? '100%' : undefined }\n      }\n    >\n      <DatePickerRsuiteStyled\n        container={props.isDisabledFloating ? () => containerRef.current : undefined}\n        // FIXME: date format on month select still with format value\n        locale={dateLocale[props.language]}\n        oneTap={props.isOneTap}\n        disabled={props.isDisabled}\n        open={props.isOpen}\n        disabledDate={(date: Date) =>\n          props.isDisableBefore\n            ? dateFns.isBefore(date, new Date())\n            : props.minDate || props.maxDate\n            ? dateFns.isBefore(date, props.minDate ? new Date(props.minDate) : undefined) ||\n              dateFns.isAfter(date, props.maxDate ? new Date(props.maxDate) : undefined)\n            : undefined\n        }\n        placeholder={props.placeholder}\n        data-test-id={props.dataTestId}\n        value={props.value}\n        onSelect={props.onSelect}\n        onChange={onChangeHandler}\n        defaultValue={props.defaultValue}\n        format={isOpen && props.format === 'dd MMM' ? 'dd MMM yyyy' : props.format}\n        ranges={props.isHideRangesOption ? [] : undefined}\n        placement={props.placement}\n        variant={props.variant}\n        iserror={props.isError ? 'error' : undefined}\n        onBlur={props.onBlur}\n        width={props.isFullWidth ? '100%' : props.width}\n        onOpen={() => {\n          if (props.format === 'dd MMM') {\n            setIsOpen(true);\n          }\n        }}\n        onClose={() => {\n          if (props.format === 'dd MMM') {\n            setIsOpen(false);\n          }\n        }}\n        cleanable={props.isCleanable}\n        onClean={props.onClean}\n        editable={false}\n      />\n    </div>\n  );\n};\n\nDatePicker.prototype = {\n  placeholder: PropTypes.string,\n  isOneTap: PropTypes.bool,\n  variant: PropTypes.string,\n  isDisableBefore: PropTypes.bool,\n  format: PropTypes.string,\n  language: PropTypes.string,\n  width: PropTypes.string,\n  minDate: PropTypes.string,\n  maxDate: PropTypes.string,\n  isHideRangesOption: PropTypes.bool\n};\n\nDatePicker.defaultProps = {\n  placeholder: 'Select Date',\n  isOneTap: false,\n  variant: 'box',\n  isDisableBefore: false,\n  format: 'dd MMMM yyyy',\n  language: 'english',\n  width: '200px',\n  minDate: '',\n  maxDate: '',\n  isHideRangesOption: false,\n  isCleanable: true\n};\n\nexport default DatePicker;\n"],"names":["DatePickerRsuiteStyled","styled","DatePickerRsuite","width","variant","iserror","isDisabled","borderColor","ColorRed","fireEngineRed","ColorDark","bermudaGray","gumbo","css","BorderRadiusType","none","medium","ColorBlue","buttonBlue","DatePicker","props","isOpen","setIsOpen","useState","containerRef","useRef","_jsx","ref","isDisabledFloating","undefined","style","position","isFullWidth","children","jsx","container","current","locale","dateLocale","language","oneTap","isOneTap","disabled","open","disabledDate","date","isDisableBefore","dateFns.isBefore","Date","minDate","maxDate","dateFns.isAfter","placeholder","dataTestId","value","onSelect","onChange","adjustedDate","dateFns.setMonth","dateFns.setYear","dateFns.getYear","dateFns.getMonth","dateFns.setDate","dateFns.getDate","dateFns.subMonths","adjustDateToMax","dateFns.addMonths","adjustDateToMin","defaultValue","format","ranges","isHideRangesOption","placement","isError","onBlur","onOpen","onClose","cleanable","isCleanable","onClean","editable","prototype","PropTypes.string","propTypesExports","string","PropTypes.bool","bool","defaultProps"],"mappings":"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"}

package/build/src/components/Preview/BasePreview.d.ts

@@ -1,3 +1,3 @@
 import { BasePreviewInterface } from './BasePreview.type';
-declare function BasePreview({ files, isOpen, onClose, onClickDownload, containerFooterStyles, isShowPageIndicator, pageLabel, ofLabel, indicatorLabelStyles, isRotateable, 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 }: BasePreviewInterface): import("react/jsx-runtime").JSX.Element;
+declare function BasePreview({ files, isOpen, onClose, onClickDownload, containerFooterStyles, isShowPageIndicator, ofLabel, indicatorLabelStyles, isRotateable, 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 }: BasePreviewInterface): import("react/jsx-runtime").JSX.Element;
 export default BasePreview;

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,pageLabel:p,ofLabel:v,indicatorLabelStyles:y,isRotateable:N=!0,iconRotateLeftContainerStyles:S,iconRotateLeftStyles:k,iconRotateLeftName:C,iconRotateRightContainerStyles:M,iconRotateRightStyles:q,iconRotateRighttName:O,iconMinusContainerStyles:R,iconMinusStyles:B,iconMinusName:P,iconPlusContainerStyles:_,iconPlusStyles:z,iconPlusName:L,iconDownloadContainerStyles:I,iconDownloadStyles:D,iconDownloadName:F,containerPrevStyles:T,iconPrevStyles:$,iconPrevName:U,containerNextStyles:G,iconNextStyles:A,iconNextName:E,containerPreviewStyles:W,iconPreviewStyles:H,iconPreviewName:V,previewLabel:J,overlayContainerStyles:K,headerContainerStyles:Q,footerContainerStyles:X,separatorStyles:Y}){const[Z,ee]=l.useState(),[te,se]=l.useState(!1),re=l.useRef(null),[le,ie]=l.useState(""),[ne,ae]=l.useState(!0),[oe,ce]=l.useState(null),[de,ue]=l.useState(0),[me,fe]=l.useState(0),[xe,he]=l.useState(1),ge=l.useRef(null),we=()=>{ie("grabbing")},je=()=>{ie("grab")},be=()=>{ie("grab"),ae(!1)},pe=()=>{ie("default"),ae(!0)},ve=()=>{ge.current.resetTransform(),ee(void 0),ie(""),ae(!0),ce(null),ue(0),he(1),g()};return l.useEffect((()=>{if(oe){const e=re.current;if(e){const t=1,s=e.getContext("2d");m.getDocument(n[0]).promise.then((r=>{r.getPage(xe).then((r=>{const l=r.getViewport({scale:t});e.width=l.width,e.height=l.height,r.render({canvasContext:s,viewport:l})}))}))}}}),[Z,oe,xe]),l.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*(){const e=new Uint8Array(t.target.result);ce(e)}));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 ee(e),n.map((e=>a.isImage(e)?"image":"document")).includes("document")&&se(!0),void ue(n.length);t(),ee("document"),m.getDocument(n[0]).promise.then((e=>{const t=e.numPages;ue(t)}))}}),[n,x]),t.jsx(t.Fragment,{children:x&&Z?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)}),te?null:t.jsx(t.Fragment,{children:t.jsx(i.TransformWrapper,Object.assign({ref:ge,disabled:ne,wheel:{smoothStep:.007}},{children:({zoomIn:e,zoomOut:l,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:V||"arrowbackleft",leftIconStyles:f.twMerge("fill-light-whiteSolid w-4 h-4 mr-4",H),onClick:ve,className:f.twMerge("bg-transparent border-none font-semibold text-base px-2 h-8 z-30 hover:bg-transparent",W)})]}))})),t.jsx("div",Object.assign({className:"flex flex-1 items-center justify-center w-full z-20"},{children:t.jsx(h,{children:t.jsx(i.TransformComponent,{children:t.jsx("div",Object.assign({className:"flex items-center justify-center w-full h-hull",onClick:()=>{ne&&ve()}},{children:t.jsx("div",Object.assign({className:s.default("max-w-[480px] max-h-[580px] flex items-center justify-center origin-center"),onMouseDown:we,onMouseUp:je,onMouseEnter:be,onMouseLeave:pe,style:{cursor:le,transform:`rotate(${me}deg)`}},{children:"image"===Z?t.jsx("img",{src:n[xe-1],className:"object-cover max-w-full h-auto"}):t.jsx("canvas",{ref:re,className:"w-full h-auto"},xe)}))}))})})})),(n.length>1||"document"===Z)&&t.jsxs(t.Fragment,{children:[1!==xe&&t.jsx("div",Object.assign({className:"absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30"},{children:t.jsx(c.default,{variant:"secondary",iconName:U||"chevronleft",iconStyles:f.twMerge("w-2 h-2",$),className:f.twMerge("",T),onClick:()=>{a(),1!==xe&&(fe(0),he(xe-1))},isDisabledRipple:!0})})),xe!==de&&t.jsx("div",Object.assign({className:"absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30"},{children:t.jsx(c.default,{variant:"secondary",iconName:E||"chevronright",iconStyles:f.twMerge("w-2 h-2",A),className:f.twMerge("",G),onClick:()=>{a(),xe!==de&&(fe(0),he(xe+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||"document"===Z&&t.jsxs(t.Fragment,{children:[t.jsx(d.default,{label:`${p||"Page"} ${xe} ${v||"of"} ${de}`,className:f.twMerge("text-light-whiteSolid text-sm font-normal",y)}),t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",Y)})]}),N&&t.jsxs(t.Fragment,{children:[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",S),onClick:()=>{a(),fe((e=>e-90))}},{children:t.jsx(u,{name:C||"rotateLeft",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",k)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",M),onClick:()=>{a(),fe((e=>e+90))}},{children:t.jsx(u,{name:O||"rotateRight",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",q)})}))]})),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",R),onClick:()=>l()},{children:t.jsx(u,{name:P||"minus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",B)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",_),onClick:()=>e()},{children:t.jsx(u,{name:L||"plus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",z)})}))]})),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"===Z?n[0]:n[xe-1]):new r({url:"document"===Z?`${n[0]}?x-request=xhr`:`${n[xe-1]}?x-request=xhr`}).catch((()=>{window.open(n[0],"_blank")}))}},{children:t.jsx(u,{name:F||"download",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",D)})}))]}))]}))}))]})}))})]}))})):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,isRotateable:y=!0,iconRotateLeftContainerStyles:N,iconRotateLeftStyles:S,iconRotateLeftName:k,iconRotateRightContainerStyles:C,iconRotateRightStyles:M,iconRotateRighttName:q,iconMinusContainerStyles:O,iconMinusStyles:R,iconMinusName:B,iconPlusContainerStyles:P,iconPlusStyles:_,iconPlusName:z,iconDownloadContainerStyles:L,iconDownloadStyles:I,iconDownloadName:D,containerPrevStyles:F,iconPrevStyles:T,iconPrevName:U,containerNextStyles:$,iconNextStyles:G,iconNextName:A,containerPreviewStyles:E,iconPreviewStyles:W,iconPreviewName:H,previewLabel:V,overlayContainerStyles:J,headerContainerStyles:K,footerContainerStyles:Q,separatorStyles:X}){const[Y,Z]=l.useState(),[ee,te]=l.useState(!1),se=l.useRef(null),[re,le]=l.useState(""),[ie,ne]=l.useState(!0),[ae,oe]=l.useState(null),[ce,de]=l.useState(0),[ue,me]=l.useState(0),[fe,xe]=l.useState(1),he=l.useRef(null),ge=()=>{le("grabbing")},we=()=>{le("grab")},je=()=>{le("grab"),ne(!1)},be=()=>{le("default"),ne(!0)},pe=()=>{he.current.resetTransform(),Z(void 0),le(""),ne(!0),oe(null),de(0),xe(1),g()};l.useEffect((()=>{if(ae){const e=se.current;if(e){const t=1,s=e.getContext("2d");m.getDocument(n[0]).promise.then((r=>{r.getPage(fe).then((r=>{const l=r.getViewport({scale:t});e.width=l.width,e.height=l.height,r.render({canvasContext:s,viewport:l})}))}))}}}),[Y,ae,fe]),l.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*(){const e=new Uint8Array(t.target.result);oe(e)}));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 Z(e),n.map((e=>a.isImage(e)?"image":"document")).includes("document")&&te(!0),void de(n.length);t(),Z("document"),m.getDocument(n[0]).promise.then((e=>{const t=e.numPages;de(t)}))}}),[n,x]);const ve=e=>t.jsxs(t.Fragment,{children:[t.jsx(d.default,{label:`${fe} ${p||"of"} ${e}`,className:f.twMerge("text-light-whiteSolid text-sm font-normal",v)}),t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",X)})]});return t.jsx(t.Fragment,{children:x&&Y?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",J)}),ee?null:t.jsx(t.Fragment,{children:t.jsx(i.TransformWrapper,Object.assign({ref:he,disabled:ie,wheel:{smoothStep:.007}},{children:({zoomIn:e,zoomOut:l,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",K)},{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:V||"Preview",leftIcon:H||"arrowbackleft",leftIconStyles:f.twMerge("fill-light-whiteSolid w-4 h-4 mr-4",W),onClick:pe,className:f.twMerge("bg-transparent border-none font-semibold text-base px-2 h-8 z-30 hover:bg-transparent",E)})]}))})),t.jsx("div",Object.assign({className:"flex flex-1 items-center justify-center w-full z-20"},{children:t.jsx(h,{children:t.jsx(i.TransformComponent,{children:t.jsx("div",Object.assign({className:"flex items-center justify-center w-full h-hull",onClick:()=>{ie&&pe()}},{children:t.jsx("div",Object.assign({className:s.default("max-w-[480px] max-h-[580px] flex items-center justify-center origin-center"),onMouseDown:ge,onMouseUp:we,onMouseEnter:je,onMouseLeave:be,style:{cursor:re,transform:`rotate(${ue}deg)`}},{children:"image"===Y?t.jsx("img",{src:n[fe-1],className:"object-cover max-w-full h-auto"}):t.jsx("canvas",{ref:se,className:"w-full h-auto"},fe)}))}))})})})),(n.length>1||ce>1)&&t.jsxs(t.Fragment,{children:[1!==fe&&t.jsx("div",Object.assign({className:"absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30"},{children:t.jsx(c.default,{variant:"secondary",iconName:U||"chevronleft",iconStyles:f.twMerge("w-2 h-2",T),className:f.twMerge("",F),onClick:()=>{a(),1!==fe&&(me(0),xe(fe-1))},isDisabledRipple:!0})})),fe!==ce&&t.jsx("div",Object.assign({className:"absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30"},{children:t.jsx(c.default,{variant:"secondary",iconName:A||"chevronright",iconStyles:f.twMerge("w-2 h-2",G),className:f.twMerge("",$),onClick:()=>{a(),fe!==ce&&(me(0),xe(fe+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",Q)},{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"===Y&&ce>1&&ve(ce),"image"===Y&&n.length>1&&ve(n.length)]}),y&&t.jsxs(t.Fragment,{children:[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",N),onClick:()=>{a(),me((e=>e-90))}},{children:t.jsx(u,{name:k||"rotateLeft",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",S)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",C),onClick:()=>{a(),me((e=>e+90))}},{children:t.jsx(u,{name:q||"rotateRight",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",M)})}))]})),t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",X)})]}),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",O),onClick:()=>l()},{children:t.jsx(u,{name:B||"minus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",R)})})),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",P),onClick:()=>e()},{children:t.jsx(u,{name:z||"plus",className:f.twMerge("fill-light-whiteSolid w-3 h-3",_)})}))]})),t.jsx("div",{className:f.twMerge("w-[1px] h-8 bg-dark-bermudaGray mx-3",X)}),t.jsx("div",Object.assign({className:f.twMerge("flex items-center justify-center w-6 h-6 bg-dark-blackCoral rounded-full cursor-pointer",L),onClick:()=>{w?w("document"===Y?n[0]:n[fe-1]):new r({url:"document"===Y?`${n[0]}?x-request=xhr`:`${n[fe-1]}?x-request=xhr`}).catch((()=>{window.open(n[0],"_blank")}))}},{children:t.jsx(u,{name:D||"download",className:f.twMerge("fill-light-whiteSolid w-[15px] h-[15px]",I)})}))]}))]}))}))]})}))})]}))})):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 { 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,\n  pageLabel,\n  ofLabel,\n  indicatorLabelStyles,\n  isRotateable = 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(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    previewRef.current.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        const context = canvas.getContext('2d');\n        pdfjs.getDocument(files[0]).promise.then((pdf) => {\n          pdf.getPage(indexNum).then((page) => {\n            const viewport = page.getViewport({ scale });\n            canvas.width = viewport.width;\n            canvas.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  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 || type === 'document') && (\n                        <>\n                          {indexNum !== 1 && (\n                            <div className='absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30'>\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                          )}\n\n                          {indexNum !== totalPages && (\n                            <div className='absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30'>\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\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                              (type === 'document' && (\n                                <>\n                                  <BaseText\n                                    label={`${pageLabel || 'Page'} ${indexNum} ${\n                                      ofLabel || 'of'\n                                    } ${totalPages}`}\n                                    className={twMerge(\n                                      'text-light-whiteSolid text-sm font-normal',\n                                      indicatorLabelStyles\n                                    )}\n                                  />\n\n                                  <div\n                                    className={twMerge(\n                                      'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                      separatorStyles\n                                    )}\n                                  />\n                                </>\n                              ))}\n                            {isRotateable && (\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                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\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                            <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                          </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","pageLabel","ofLabel","indicatorLabelStyles","isRotateable","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","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","_jsx","_Fragment","children","className","_jsxs","twMerge","jsx","TransformWrapper","Object","assign","ref","disabled","wheel","smoothStep","zoomIn","zoomOut","Fragment","jsxs","BaseButton","label","leftIcon","leftIconStyles","onClick","TransformComponent","classNames","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","style","cursor","transform","BaseButtonIcon","variant","iconName","iconStyles","isDisabledRipple","BaseText","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 { 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\n  ofLabel,\n  indicatorLabelStyles,\n  isRotateable = 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(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    previewRef.current.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        const context = canvas.getContext('2d');\n        pdfjs.getDocument(files[0]).promise.then((pdf) => {\n          pdf.getPage(indexNum).then((page) => {\n            const viewport = page.getViewport({ scale });\n            canvas.width = viewport.width;\n            canvas.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      <div className={twMerge('w-[1px] h-8 bg-dark-bermudaGray mx-3', separatorStyles)} />\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                          {indexNum !== 1 && (\n                            <div className='absolute left-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30'>\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                          )}\n\n                          {indexNum !== totalPages && (\n                            <div className='absolute right-2 top-[50%] translate-y-[-50%] flex flex-row items-center min-h-[40px] z-30'>\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\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 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                                <div\n                                  className={twMerge(\n                                    'w-[1px] h-8 bg-dark-bermudaGray mx-3',\n                                    separatorStyles\n                                  )}\n                                />\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                            <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                          </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","isRotateable","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","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","_jsxs","jsxs","_Fragment","Fragment","children","_jsx","BaseText","label","className","twMerge","jsx","TransformWrapper","Object","assign","ref","disabled","wheel","smoothStep","zoomIn","zoomOut","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/Table/TablePage.js

@@ -144,12 +144,12 @@
     }
 
     [data-sticky-last-left-td] {
-      box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.16);
+      box-shadow: 4px 0px 4px 0px rgba(82, 97, 107, 0.15);
       clip-path: inset(0px -15px 0px 0px);
     }
 
     [data-sticky-first-right-td] {
-      box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.16);
+      box-shadow: 4px 0px 4px 0px rgba(82, 97, 107, 0.15);
       clip-path: inset(0px -15px 0px 0px);
     }
   }

package/build/src/components/Table/TablePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePage.js","sources":["../../../../src/components/Table/TablePage.tsx"],"sourcesContent":["import * as PropTypes from 'prop-types';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n  TableCellProps,\n  useBlockLayout,\n  usePagination,\n  useRowSelect,\n  useSortBy,\n  useTable\n} from 'react-table';\nimport { useSticky } from 'react-table-sticky';\nimport styled, { css } from 'styled-components';\n\nimport { useDidMountEffect } from '../../hooks/useDidMountEffect';\nimport { ColorBlue, ColorDark, ColorLight } from '../../styles/Colors';\nimport { MarginType } from '../../styles/Spacing';\nimport freezeColumn from '../../utils/freezeColumn';\nimport { ButtonLink } from '../Button';\nimport { Icon } from '../Icon';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { fontFamilyMapper, Text, TextAlign } from '../Text';\nimport { TableHeaderInterface, TablePageInterface, TableVariantInterface } from './';\nimport { TableStyleInterface } from './Table.type';\nimport {\n  CellContainerContentStyled,\n  CellContainerHeaderStyled,\n  defaultPropGetter,\n  EmptyData,\n  getIsExcludedSortable,\n  SortIcon,\n  tableHooks,\n  TableLoaderContainer,\n  tableSizeMapper\n} from './TableBase';\nimport { TableContainerStyledProps } from './TablePage.type';\n\nconst defaultValue: {\n  pageIndex: number;\n  pageSize: number;\n  textAlign: TextAlign;\n} = {\n  pageIndex: 0,\n  pageSize: 10,\n  textAlign: 'left'\n};\n\nconst TablePageContainer = styled.div<{ $isLoading?: boolean }>`\n  ${({ $isLoading }) => {\n    if (!$isLoading) return null;\n    return css`\n      display: flex;\n      position: relative;\n      > div {\n        &:nth-child(2) {\n          left: 50%;\n          position: absolute;\n          top: 50%;\n          transform: translate(-50%, -50%);\n        }\n      }\n    `;\n  }}\n`;\n\nconst TableHeaderStyled = styled.thead`\n  tr {\n    z-index: 4;\n    box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 25%);\n    clip-path: inset(-10px 0px);\n    :first-child {\n      th {\n        display: flex !important;\n      }\n    }\n  }\n  th {\n    border-bottom: 1px solid ${ColorDark.silver};\n    box-sizing: border-box !important;\n    :last-child {\n      border-right: 0;\n    }\n    p {\n      width: auto;\n    }\n  }\n`;\n\nconst TableHeader = (props: TableHeaderInterface) => {\n  return (\n    <TableHeaderStyled>\n      {props.headerGroups.map((headerGroup, i) => (\n        <tr key={`headerGroup-${i}`} {...headerGroup.getHeaderGroupProps()}>\n          {headerGroup.headers.map((column) => (\n            <th\n              {...column.getHeaderProps(\n                getIsExcludedSortable(column) && column.getSortByToggleProps()\n              )}\n              key={column.id}\n            >\n              <CellContainerHeaderStyled\n                textAlign={column.textAlign || defaultValue.textAlign}\n                variant={props.variant}\n              >\n                {typeof column.Header.valueOf() !== 'string' ? (\n                  column.render('Header')\n                ) : (\n                  <>\n                    <Text\n                      textAlign={column.textAlign || defaultValue.textAlign}\n                      label={column.Header.toString()}\n                      variant={tableSizeMapper[props.variant].fontSize}\n                      fontWeight='semi-bold'\n                    />\n                    {!column.columns && (\n                      <span\n                        style={{\n                          display: 'flex',\n                          justifyContent: 'center',\n                          alignItems: 'center'\n                        }}\n                      >\n                        {!column.disableSortBy && (\n                          <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} />\n                        )}\n                      </span>\n                    )}\n                  </>\n                )}\n              </CellContainerHeaderStyled>\n            </th>\n          ))}\n        </tr>\n      ))}\n    </TableHeaderStyled>\n  );\n};\n\nconst TableBodyStyled = styled.tbody`\n  tr {\n    cursor: pointer;\n    :hover {\n      p {\n        font-family: ${fontFamilyMapper['semi-bold']};\n      }\n    }\n    td {\n      box-sizing: border-box !important;\n      :last-child {\n        border-right: 0;\n      }\n    }\n  }\n`;\n\nconst ContainerPaginationButton = styled.div<{\n  isDisableChangePage?: boolean;\n  isCurrentPage?: boolean;\n  activePageColor?: string;\n}>`\n  align-items: center;\n  background-color: ${(props) => (props.isDisableChangePage ? ColorDark.silver : undefined)};\n  border: 1px solid;\n  border-color: ${(props) =>\n    props.isCurrentPage ? props.activePageColor ?? ColorBlue.yaleBlue : ColorDark.silver};\n  border-radius: ${MarginType['micro']};\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  margin-right: ${MarginType['micro']};\n  width: 32px;\n`;\n\nconst ActivePageText = styled(Text)<{ activePageColor?: string }>`\n  color: ${(props) =>\n    props.theme?.table?.pagination?.activePageNumberText ||\n    (props.activePageColor ?? ColorBlue.yaleBlue)};\n`;\n\nconst PaginationNextFooter = ({\n  pageIndexLabel,\n  gotoPage,\n  page\n}: {\n  pageIndexLabel: number;\n  gotoPage: (page: number) => void;\n  page: number;\n}) => {\n  return (\n    <ContainerPaginationButton>\n      <ButtonLink onClick={() => gotoPage(page)} onMouseDown={() => gotoPage(page)}>\n        <div style={{ margin: `0 ${MarginType['extra-small']}` }}>\n          <Text label={'' + pageIndexLabel} variant='small' />\n        </div>\n      </ButtonLink>\n    </ContainerPaginationButton>\n  );\n};\n\nconst PaginationPreviousFooter = ({\n  pageIndexLabel,\n  gotoPage,\n  page\n}: {\n  pageIndexLabel: number;\n  gotoPage: (page: number) => void;\n  page: number;\n}) => {\n  return (\n    <ContainerPaginationButton>\n      <ButtonLink onClick={() => gotoPage(page)}>\n        <div style={{ margin: `0 ${MarginType['extra-small']}` }}>\n          <Text label={'' + pageIndexLabel} variant='small' />\n        </div>\n      </ButtonLink>\n    </ContainerPaginationButton>\n  );\n};\n\nconst PaginationFooter = ({\n  totalData,\n  pageIndex,\n  canPreviousPage,\n  canNextPage,\n  onClick,\n  totalPage,\n  activePageColor\n}: {\n  totalData: number;\n  pageIndex: number;\n  canPreviousPage: boolean;\n  canNextPage: boolean;\n  onClick: {\n    first: () => void;\n    prev: () => void;\n    next: () => void;\n    last: () => void;\n    gotoPage: (page: number) => void;\n  };\n  totalPage: number;\n  activePageColor?: string;\n}) => (\n  <div\n    style={{\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginTop: 8\n    }}\n  >\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        position: 'sticky',\n        left: 0\n      }}\n    >\n      <Text label={`Total: ${totalData}`} variant='small' color={ColorDark.gumbo} />\n    </div>\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        position: 'sticky',\n        right: 0\n      }}\n    >\n      <ContainerPaginationButton isDisableChangePage={!canPreviousPage}>\n        <ButtonLink onClick={onClick.first}>\n          <Icon\n            name='chevronDoubleArrowLeft'\n            size='extra-small'\n            color={canPreviousPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n      <ContainerPaginationButton isDisableChangePage={!canPreviousPage}>\n        <ButtonLink onClick={onClick.prev}>\n          <Icon\n            name='chevronleft'\n            size='extra-small'\n            color={canPreviousPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n      {canPreviousPage && pageIndex !== 1 && (\n        <PaginationPreviousFooter\n          pageIndexLabel={pageIndex - 1}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex - 2}\n        />\n      )}\n      {canPreviousPage && (\n        <PaginationPreviousFooter\n          pageIndexLabel={pageIndex}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex - 1}\n        />\n      )}\n      <ContainerPaginationButton isCurrentPage activePageColor={activePageColor}>\n        <div style={{ margin: `0 ${MarginType['extra-small']}` }}>\n          <ActivePageText\n            label={'' + (pageIndex + 1)}\n            variant='small'\n            activePageColor={activePageColor}\n          />\n        </div>\n      </ContainerPaginationButton>\n      {canNextPage && (\n        <PaginationNextFooter\n          pageIndexLabel={pageIndex + 2}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex + 1}\n        />\n      )}\n      {canNextPage && pageIndex + 2 !== totalPage && (\n        <PaginationNextFooter\n          pageIndexLabel={pageIndex + 3}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex + 2}\n        />\n      )}\n      <ContainerPaginationButton isDisableChangePage={!canNextPage}>\n        <ButtonLink onClick={onClick.next} onMouseDown={onClick.next}>\n          <Icon\n            name='chevronright'\n            size='extra-small'\n            color={canNextPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n      <ContainerPaginationButton isDisableChangePage={!canNextPage}>\n        <ButtonLink onClick={onClick.last} onMouseDown={onClick.last}>\n          <Icon\n            name='chevronDoubleArrowRight'\n            size='extra-small'\n            color={canNextPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n    </div>\n  </div>\n);\n\ninterface TableStyledInterface extends TableVariantInterface, TableStyleInterface {\n  freezeHeader?: boolean;\n}\n\ninterface CustomCellProps extends TableCellProps {\n  checkboxIsDisabled?: boolean;\n}\n\nconst TableStyled = styled.table<TableStyledInterface>`\n  thead:first-child {\n    ${({ freezeHeader }) =>\n      freezeHeader && 'position: sticky !important;  top: 0 !important; z-index: 5 !important'}\n  }\n  border-spacing: 0;\n  margin-top: ${MarginType['extra-small']};\n  width: 100%;\n  th {\n    padding: 0px 8px;\n    background-color: ${ColorLight.whiteSolid};\n    height: ${({ variant }) => tableSizeMapper[variant].thHeight};\n  }\n  td {\n    min-height: ${({ variant }) => tableSizeMapper[variant].tdMinHeight};\n    max-height: ${({ variant }) => tableSizeMapper[variant].tdMaxHeight};\n    :last-child {\n      border-right: 0;\n    }\n  }\n  tr {\n    :nth-child(odd) {\n      background-color: ${({ rowEvenColor }) => rowEvenColor};\n    }\n    :nth-child(even) {\n      background-color: ${({ rowOddColor }) => rowOddColor};\n    }\n    :last-child {\n      td {\n        border-bottom: 0;\n      }\n    }\n  }\n`;\n\nconst TableContainerStyled = styled.div<TableContainerStyledProps>`\n  overflow: ${({ $isOverflowAuto }) => ($isOverflowAuto ? 'auto' : 'visible')};\n  width: 100%;\n\n  ${({ $isLoading, $isEmpty }) => {\n    if ($isLoading) {\n      return css`\n        display: flex;\n        height: 100%;\n        max-height: 60vh;\n        min-height: 380px;\n        opacity: 0.5;\n        overflow: hidden;\n        pointer-events: none;\n      `;\n    }\n\n    if ($isEmpty) {\n      return css`\n        display: flex;\n        min-height: 100px;\n      `;\n    }\n\n    return css`\n      display: flex;\n      height: 100%;\n      max-height: 60vh;\n      min-height: 380px;\n      overflow: auto;\n    `;\n  }}\n\n  table {\n    tr {\n      :hover {\n        background-color: ${ColorLight.whiteSmoke};\n        p {\n          font-family: ${fontFamilyMapper['semi-bold']};\n        }\n        td {\n          background-color: ${ColorLight.whiteSmoke};\n        }\n      }\n      :last-child {\n        td {\n          border-bottom: 0;\n        }\n      }\n      :nth-child(odd) {\n        td {\n          background-color: ${({ rowEvenColor }) => rowEvenColor};\n        }\n      }\n      :nth-child(even) {\n        td {\n          background-color: ${({ rowOddColor }) => rowOddColor};\n        }\n      }\n    }\n\n    [data-sticky-last-left-td] {\n      box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.16);\n      clip-path: inset(0px -15px 0px 0px);\n    }\n\n    [data-sticky-first-right-td] {\n      box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.16);\n      clip-path: inset(0px -15px 0px 0px);\n    }\n  }\n`;\n\nconst TextStyled = styled(Text)`\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  display: -webkit-inline-box;\n  overflow: hidden;\n  white-space: normal;\n`;\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst Table = ({ getCellProps = defaultPropGetter, ...props }: TablePageInterface) => {\n  // FIXME: pindahin logic di component ke custom hooks\n  const { onPageChange, isManualPagination, totalData, isManualSort, onSort, activePageColor } =\n    props;\n  const charTotal = tableSizeMapper[props.variant].charTotal;\n  const data = useMemo(() => props.data, [props.data]);\n  const columns = useMemo(\n    () => freezeColumn({ header: props.header, freezedColumn: props.freezedColumn }),\n    [props.freezedColumn, props.header]\n  );\n  const sortBy = useMemo(() => {\n    if (props.sortBy && isManualSort) return [props.sortBy];\n    return [];\n  }, [props.sortBy, isManualSort]);\n\n  const [pageCountState, setPageCountState] = useState(\n    isManualPagination ? Math.ceil(totalData / props.pageSize) : undefined\n  );\n  const [countCellSpan, setCountCellSpan] = useState<number>(0);\n\n  const {\n    canNextPage,\n    canPreviousPage,\n    getTableProps,\n    getTableBodyProps,\n    gotoPage,\n    headerGroups,\n    nextPage,\n    page,\n    pageCount,\n    prepareRow,\n    previousPage,\n    selectedFlatRows,\n    setHiddenColumns,\n    state: {\n      pageIndex,\n      pageSize,\n      sortBy: [sortByState]\n    }\n  } = useTable(\n    {\n      columns,\n      data,\n      manualSortBy: isManualSort,\n      manualPagination: isManualPagination,\n      pageCount: pageCountState,\n      initialState: {\n        sortBy,\n        pageIndex: isManualPagination ? props.pageIndex : defaultValue.pageIndex,\n        pageSize: props.pageSize,\n        hiddenColumns: []\n      }\n    },\n    useBlockLayout,\n    useSortBy,\n    usePagination,\n    useRowSelect,\n    useSticky,\n    (hooks) =>\n      tableHooks({\n        hooks,\n        isSelectable: props.isSelectable,\n        hideRowIndex: props.hideRowIndex,\n        rowIndexAlign: props.rowIndexAlign,\n        variant: props.variant,\n        rowActions: props.rowActions,\n        actionLabel: props.actionLabel,\n        freezedColumn: props.freezedColumn\n      })\n  );\n\n  const indexRowAddition = useMemo(() => {\n    if (!isManualPagination) return 0;\n    return pageSize * pageIndex;\n  }, [isManualPagination, pageIndex, pageSize]);\n\n  useDidMountEffect(() => {\n    if (typeof props.onSelectedRow === 'function' && props.isSelectable) {\n      props.onSelectedRow(selectedFlatRows);\n    }\n  }, [props.onSelectedRow, selectedFlatRows]);\n\n  // FIXME: find better implementation for hidden columns\n  useEffect(() => {\n    if (props.hiddenColumns) setHiddenColumns(props.hiddenColumns || []);\n  }, [props.hiddenColumns, setHiddenColumns]);\n\n  useEffect(() => {\n    if (typeof onPageChange === 'function') {\n      onPageChange({ pageIndex, pageSize });\n    }\n  }, [onPageChange, pageIndex, pageSize]);\n\n  useEffect(() => {\n    if (isManualPagination) {\n      setPageCountState(Math.ceil(totalData / pageSize));\n    }\n  }, [pageSize, totalData, isManualPagination]);\n\n  useEffect(() => {\n    if (typeof onSort === 'function') {\n      onSort({ sortBy: sortByState });\n    }\n  }, [onSort, sortByState]);\n\n  useEffect(() => {\n    const filterHasArray: Array<number> = [];\n    page.forEach((row) => {\n      row.cells.forEach((item) => {\n        if (Array.isArray(item.value)) {\n          filterHasArray.push(item.value.length);\n        }\n      });\n    });\n    const countCellData = filterHasArray.length > 0 ? Math.max(...filterHasArray) : 0;\n    setCountCellSpan(countCellData);\n  }, [page]);\n\n  const isOverflowAuto = !!props.freezedColumn || !!props.freezeHeader;\n  const isEmpty = data.length === 0;\n\n  return (\n    <TablePageContainer $isLoading={props.isLoading}>\n      <TableContainerStyled\n        $isOverflowAuto={!isOverflowAuto}\n        $isLoading={props.isLoading}\n        $isEmpty={isEmpty}\n        rowEvenColor={props.rowEvenColor}\n        rowOddColor={props.rowOddColor}\n        variant={props.variant}\n      >\n        <TableStyled\n          {...getTableProps()}\n          freezeHeader={props.freezeHeader}\n          variant={props.variant}\n          data-test-id={props.dataTestId}\n          rowOddColor={props.rowOddColor}\n          rowEvenColor={props.rowEvenColor}\n        >\n          <TableHeader\n            headerGroups={headerGroups}\n            variant={props.variant}\n            freezeHeader={props.freezeHeader}\n          />\n          <TableBodyStyled {...getTableBodyProps()}>\n            {\n              // eslint-disable-next-line sonarjs/cognitive-complexity\n              page.map((row, i) => {\n                prepareRow(row);\n                const onClick = () => props.onClickRow && props.onClickRow(row.original);\n                return (\n                  <tr key={i} {...row.getRowProps()}>\n                    {row.cells.map((cell) => {\n                      const { checkboxIsDisabled, ...restCellProps } = cell.getCellProps(\n                        getCellProps(cell)\n                      ) as CustomCellProps;\n                      return (\n                        <td key={cell.row.id} {...restCellProps}>\n                          {cell.column.type === 'custom' ? (\n                            <CellContainerContentStyled\n                              variant={props.variant}\n                              isBaseline\n                              onClick={cell.column.disableClick ? null : onClick}\n                            >\n                              {cell.render('Cell', {\n                                numberAddition: indexRowAddition,\n                                ...(cell.column.accessor === 'selectable'\n                                  ? { checkboxIsDisabled }\n                                  : {})\n                              })}\n                            </CellContainerContentStyled>\n                          ) : (\n                            <>\n                              {Array.isArray(cell.value) ? (\n                                cell.value.map((valueCell, index) => (\n                                  <CellContainerContentStyled\n                                    variant={props.variant}\n                                    key={index}\n                                    isBaseline\n                                    countArrayValue={countCellSpan}\n                                    isColSpan\n                                    onClick={cell.column.disableClick ? null : onClick}\n                                  >\n                                    <TextStyled\n                                      textAlign={cell.column.textAlign || defaultValue.textAlign}\n                                      label={\n                                        cell.column.isCanShowEmptyCell\n                                          ? valueCell\n                                          : valueCell || '-'\n                                      }\n                                      variant='medium'\n                                      ellipsis={cell.value ? cell.value.length >= charTotal : false}\n                                      {...cell.column.textStyle}\n                                    />\n                                  </CellContainerContentStyled>\n                                ))\n                              ) : (\n                                <CellContainerContentStyled\n                                  variant={props.variant}\n                                  isBaseline\n                                  onClick={cell.column.disableClick ? null : onClick}\n                                >\n                                  <TextStyled\n                                    textAlign={cell.column.textAlign || defaultValue.textAlign}\n                                    label={\n                                      cell.column.isCanShowEmptyCell\n                                        ? cell.value\n                                        : cell.value || '-'\n                                    }\n                                    variant='medium'\n                                    ellipsis={cell.value ? cell.value.length >= charTotal : false}\n                                    {...cell.column.textStyle}\n                                  />\n                                </CellContainerContentStyled>\n                              )}\n                            </>\n                          )}\n                        </td>\n                      );\n                    })}\n                  </tr>\n                );\n              })\n            }\n          </TableBodyStyled>\n        </TableStyled>\n      </TableContainerStyled>\n\n      {props.isLoading ? (\n        <TableLoaderContainer\n          style={{\n            height: props.emptyTableHeight\n          }}\n        >\n          <LoadingIndicator size='small' />\n        </TableLoaderContainer>\n      ) : (\n        <>\n          {isEmpty && (\n            <EmptyData\n              emptyTableHeight={props.emptyTableHeight}\n              noRecordLabel={props.noRecordLabel}\n            />\n          )}\n          {!!pageCount && (\n            <PaginationFooter\n              canPreviousPage={canPreviousPage}\n              canNextPage={canNextPage}\n              totalData={isManualPagination ? totalData : data.length}\n              pageIndex={pageIndex}\n              onClick={{\n                first: () => gotoPage(0),\n                prev: previousPage,\n                next: nextPage,\n                last: () => gotoPage(pageCount - 1),\n                gotoPage: (page) => gotoPage(page)\n              }}\n              totalPage={pageCount}\n              activePageColor={activePageColor}\n            />\n          )}\n        </>\n      )}\n    </TablePageContainer>\n  );\n};\n\nTable.prototype = {\n  pageSize: PropTypes.number,\n  emptyTableHeight: PropTypes.number,\n  onClickRow: PropTypes.func,\n  variant: PropTypes.string,\n  isSelectable: PropTypes.bool,\n  freezedColumn: PropTypes.number,\n  freezeHeader: PropTypes.bool,\n  hideRowIndex: PropTypes.bool\n};\n\nTable.defaultProps = {\n  pageSize: defaultValue.pageSize,\n  pageIndex: defaultValue.pageIndex,\n  emptyTableHeight: 200,\n  onClickRow: undefined,\n  variant: 'regular',\n  isSelectable: false,\n  freezedColumn: 0,\n  freezeHeader: false,\n  hideRowIndex: false\n};\n\nexport default Table;\n"],"names":["defaultValue","TablePageContainer","styled","div","$isLoading","css","TableHeaderStyled","thead","ColorDark","silver","TableHeader","props","_jsx","jsx","children","headerGroups","map","headerGroup","i","Object","assign","getHeaderGroupProps","headers","column","_createElement","getHeaderProps","getIsExcludedSortable","getSortByToggleProps","key","id","CellContainerHeaderStyled","textAlign","variant","Header","valueOf","render","_jsxs","_Fragment","Text","label","toString","tableSizeMapper","fontSize","fontWeight","columns","style","display","justifyContent","alignItems","disableSortBy","SortIcon","isSorted","isSortedDesc","TableBodyStyled","tbody","fontFamilyMapper","ContainerPaginationButton","isDisableChangePage","undefined","_a","isCurrentPage","activePageColor","ColorBlue","yaleBlue","MarginType","ActivePageText","_c","_b","theme","table","pagination","activePageNumberText","_d","PaginationNextFooter","pageIndexLabel","gotoPage","page","ButtonLink","onClick","onMouseDown","margin","PaginationPreviousFooter","PaginationFooter","totalData","pageIndex","canPreviousPage","canNextPage","totalPage","marginTop","position","left","color","gumbo","right","first","Icon","name","size","solitude","prev","next","last","TableStyled","freezeHeader","ColorLight","whiteSolid","thHeight","tdMinHeight","tdMaxHeight","rowEvenColor","rowOddColor","TableContainerStyled","$isOverflowAuto","$isEmpty","whiteSmoke","TextStyled","Table","getCellProps","defaultPropGetter","__rest","onPageChange","isManualPagination","isManualSort","onSort","charTotal","data","useMemo","freezeColumn","header","freezedColumn","sortBy","pageCountState","setPageCountState","useState","Math","ceil","pageSize","countCellSpan","setCountCellSpan","getTableProps","getTableBodyProps","nextPage","pageCount","prepareRow","previousPage","selectedFlatRows","setHiddenColumns","state","sortByState","useTable","manualSortBy","manualPagination","initialState","hiddenColumns","useBlockLayout","useSortBy","usePagination","reactTableExports","useRowSelect","useSticky","hooks","tableHooks","isSelectable","hideRowIndex","rowIndexAlign","rowActions","actionLabel","indexRowAddition","useDidMountEffect","onSelectedRow","useEffect","filterHasArray","forEach","row","cells","item","Array","isArray","value","push","length","countCellData","max","isOverflowAuto","isEmpty","isLoading","dataTestId","onClickRow","original","getRowProps","cell","checkboxIsDisabled","restCellProps","type","CellContainerContentStyled","isBaseline","disableClick","numberAddition","accessor","Fragment","valueCell","index","countArrayValue","isColSpan","isCanShowEmptyCell","ellipsis","textStyle","TableLoaderContainer","height","emptyTableHeight","LoadingIndicator","EmptyData","noRecordLabel","prototype","PropTypes.number","propTypesExports","number","PropTypes.func","func","PropTypes.string","string","PropTypes.bool","bool","defaultProps"],"mappings":"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"}
+{"version":3,"file":"TablePage.js","sources":["../../../../src/components/Table/TablePage.tsx"],"sourcesContent":["import * as PropTypes from 'prop-types';\nimport { useEffect, useMemo, useState } from 'react';\nimport {\n  TableCellProps,\n  useBlockLayout,\n  usePagination,\n  useRowSelect,\n  useSortBy,\n  useTable\n} from 'react-table';\nimport { useSticky } from 'react-table-sticky';\nimport styled, { css } from 'styled-components';\n\nimport { useDidMountEffect } from '../../hooks/useDidMountEffect';\nimport { ColorBlue, ColorDark, ColorLight } from '../../styles/Colors';\nimport { MarginType } from '../../styles/Spacing';\nimport freezeColumn from '../../utils/freezeColumn';\nimport { ButtonLink } from '../Button';\nimport { Icon } from '../Icon';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { fontFamilyMapper, Text, TextAlign } from '../Text';\nimport { TableHeaderInterface, TablePageInterface, TableVariantInterface } from './';\nimport { TableStyleInterface } from './Table.type';\nimport {\n  CellContainerContentStyled,\n  CellContainerHeaderStyled,\n  defaultPropGetter,\n  EmptyData,\n  getIsExcludedSortable,\n  SortIcon,\n  tableHooks,\n  TableLoaderContainer,\n  tableSizeMapper\n} from './TableBase';\nimport { TableContainerStyledProps } from './TablePage.type';\n\nconst defaultValue: {\n  pageIndex: number;\n  pageSize: number;\n  textAlign: TextAlign;\n} = {\n  pageIndex: 0,\n  pageSize: 10,\n  textAlign: 'left'\n};\n\nconst TablePageContainer = styled.div<{ $isLoading?: boolean }>`\n  ${({ $isLoading }) => {\n    if (!$isLoading) return null;\n    return css`\n      display: flex;\n      position: relative;\n      > div {\n        &:nth-child(2) {\n          left: 50%;\n          position: absolute;\n          top: 50%;\n          transform: translate(-50%, -50%);\n        }\n      }\n    `;\n  }}\n`;\n\nconst TableHeaderStyled = styled.thead`\n  tr {\n    z-index: 4;\n    box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 25%);\n    clip-path: inset(-10px 0px);\n    :first-child {\n      th {\n        display: flex !important;\n      }\n    }\n  }\n  th {\n    border-bottom: 1px solid ${ColorDark.silver};\n    box-sizing: border-box !important;\n    :last-child {\n      border-right: 0;\n    }\n    p {\n      width: auto;\n    }\n  }\n`;\n\nconst TableHeader = (props: TableHeaderInterface) => {\n  return (\n    <TableHeaderStyled>\n      {props.headerGroups.map((headerGroup, i) => (\n        <tr key={`headerGroup-${i}`} {...headerGroup.getHeaderGroupProps()}>\n          {headerGroup.headers.map((column) => (\n            <th\n              {...column.getHeaderProps(\n                getIsExcludedSortable(column) && column.getSortByToggleProps()\n              )}\n              key={column.id}\n            >\n              <CellContainerHeaderStyled\n                textAlign={column.textAlign || defaultValue.textAlign}\n                variant={props.variant}\n              >\n                {typeof column.Header.valueOf() !== 'string' ? (\n                  column.render('Header')\n                ) : (\n                  <>\n                    <Text\n                      textAlign={column.textAlign || defaultValue.textAlign}\n                      label={column.Header.toString()}\n                      variant={tableSizeMapper[props.variant].fontSize}\n                      fontWeight='semi-bold'\n                    />\n                    {!column.columns && (\n                      <span\n                        style={{\n                          display: 'flex',\n                          justifyContent: 'center',\n                          alignItems: 'center'\n                        }}\n                      >\n                        {!column.disableSortBy && (\n                          <SortIcon isSorted={column.isSorted} isSortedDesc={column.isSortedDesc} />\n                        )}\n                      </span>\n                    )}\n                  </>\n                )}\n              </CellContainerHeaderStyled>\n            </th>\n          ))}\n        </tr>\n      ))}\n    </TableHeaderStyled>\n  );\n};\n\nconst TableBodyStyled = styled.tbody`\n  tr {\n    cursor: pointer;\n    :hover {\n      p {\n        font-family: ${fontFamilyMapper['semi-bold']};\n      }\n    }\n    td {\n      box-sizing: border-box !important;\n      :last-child {\n        border-right: 0;\n      }\n    }\n  }\n`;\n\nconst ContainerPaginationButton = styled.div<{\n  isDisableChangePage?: boolean;\n  isCurrentPage?: boolean;\n  activePageColor?: string;\n}>`\n  align-items: center;\n  background-color: ${(props) => (props.isDisableChangePage ? ColorDark.silver : undefined)};\n  border: 1px solid;\n  border-color: ${(props) =>\n    props.isCurrentPage ? props.activePageColor ?? ColorBlue.yaleBlue : ColorDark.silver};\n  border-radius: ${MarginType['micro']};\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  margin-right: ${MarginType['micro']};\n  width: 32px;\n`;\n\nconst ActivePageText = styled(Text)<{ activePageColor?: string }>`\n  color: ${(props) =>\n    props.theme?.table?.pagination?.activePageNumberText ||\n    (props.activePageColor ?? ColorBlue.yaleBlue)};\n`;\n\nconst PaginationNextFooter = ({\n  pageIndexLabel,\n  gotoPage,\n  page\n}: {\n  pageIndexLabel: number;\n  gotoPage: (page: number) => void;\n  page: number;\n}) => {\n  return (\n    <ContainerPaginationButton>\n      <ButtonLink onClick={() => gotoPage(page)} onMouseDown={() => gotoPage(page)}>\n        <div style={{ margin: `0 ${MarginType['extra-small']}` }}>\n          <Text label={'' + pageIndexLabel} variant='small' />\n        </div>\n      </ButtonLink>\n    </ContainerPaginationButton>\n  );\n};\n\nconst PaginationPreviousFooter = ({\n  pageIndexLabel,\n  gotoPage,\n  page\n}: {\n  pageIndexLabel: number;\n  gotoPage: (page: number) => void;\n  page: number;\n}) => {\n  return (\n    <ContainerPaginationButton>\n      <ButtonLink onClick={() => gotoPage(page)}>\n        <div style={{ margin: `0 ${MarginType['extra-small']}` }}>\n          <Text label={'' + pageIndexLabel} variant='small' />\n        </div>\n      </ButtonLink>\n    </ContainerPaginationButton>\n  );\n};\n\nconst PaginationFooter = ({\n  totalData,\n  pageIndex,\n  canPreviousPage,\n  canNextPage,\n  onClick,\n  totalPage,\n  activePageColor\n}: {\n  totalData: number;\n  pageIndex: number;\n  canPreviousPage: boolean;\n  canNextPage: boolean;\n  onClick: {\n    first: () => void;\n    prev: () => void;\n    next: () => void;\n    last: () => void;\n    gotoPage: (page: number) => void;\n  };\n  totalPage: number;\n  activePageColor?: string;\n}) => (\n  <div\n    style={{\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginTop: 8\n    }}\n  >\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        position: 'sticky',\n        left: 0\n      }}\n    >\n      <Text label={`Total: ${totalData}`} variant='small' color={ColorDark.gumbo} />\n    </div>\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        position: 'sticky',\n        right: 0\n      }}\n    >\n      <ContainerPaginationButton isDisableChangePage={!canPreviousPage}>\n        <ButtonLink onClick={onClick.first}>\n          <Icon\n            name='chevronDoubleArrowLeft'\n            size='extra-small'\n            color={canPreviousPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n      <ContainerPaginationButton isDisableChangePage={!canPreviousPage}>\n        <ButtonLink onClick={onClick.prev}>\n          <Icon\n            name='chevronleft'\n            size='extra-small'\n            color={canPreviousPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n      {canPreviousPage && pageIndex !== 1 && (\n        <PaginationPreviousFooter\n          pageIndexLabel={pageIndex - 1}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex - 2}\n        />\n      )}\n      {canPreviousPage && (\n        <PaginationPreviousFooter\n          pageIndexLabel={pageIndex}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex - 1}\n        />\n      )}\n      <ContainerPaginationButton isCurrentPage activePageColor={activePageColor}>\n        <div style={{ margin: `0 ${MarginType['extra-small']}` }}>\n          <ActivePageText\n            label={'' + (pageIndex + 1)}\n            variant='small'\n            activePageColor={activePageColor}\n          />\n        </div>\n      </ContainerPaginationButton>\n      {canNextPage && (\n        <PaginationNextFooter\n          pageIndexLabel={pageIndex + 2}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex + 1}\n        />\n      )}\n      {canNextPage && pageIndex + 2 !== totalPage && (\n        <PaginationNextFooter\n          pageIndexLabel={pageIndex + 3}\n          gotoPage={onClick.gotoPage}\n          page={pageIndex + 2}\n        />\n      )}\n      <ContainerPaginationButton isDisableChangePage={!canNextPage}>\n        <ButtonLink onClick={onClick.next} onMouseDown={onClick.next}>\n          <Icon\n            name='chevronright'\n            size='extra-small'\n            color={canNextPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n      <ContainerPaginationButton isDisableChangePage={!canNextPage}>\n        <ButtonLink onClick={onClick.last} onMouseDown={onClick.last}>\n          <Icon\n            name='chevronDoubleArrowRight'\n            size='extra-small'\n            color={canNextPage ? ColorDark.silver : ColorDark.solitude}\n          />\n        </ButtonLink>\n      </ContainerPaginationButton>\n    </div>\n  </div>\n);\n\ninterface TableStyledInterface extends TableVariantInterface, TableStyleInterface {\n  freezeHeader?: boolean;\n}\n\ninterface CustomCellProps extends TableCellProps {\n  checkboxIsDisabled?: boolean;\n}\n\nconst TableStyled = styled.table<TableStyledInterface>`\n  thead:first-child {\n    ${({ freezeHeader }) =>\n      freezeHeader && 'position: sticky !important;  top: 0 !important; z-index: 5 !important'}\n  }\n  border-spacing: 0;\n  margin-top: ${MarginType['extra-small']};\n  width: 100%;\n  th {\n    padding: 0px 8px;\n    background-color: ${ColorLight.whiteSolid};\n    height: ${({ variant }) => tableSizeMapper[variant].thHeight};\n  }\n  td {\n    min-height: ${({ variant }) => tableSizeMapper[variant].tdMinHeight};\n    max-height: ${({ variant }) => tableSizeMapper[variant].tdMaxHeight};\n    :last-child {\n      border-right: 0;\n    }\n  }\n  tr {\n    :nth-child(odd) {\n      background-color: ${({ rowEvenColor }) => rowEvenColor};\n    }\n    :nth-child(even) {\n      background-color: ${({ rowOddColor }) => rowOddColor};\n    }\n    :last-child {\n      td {\n        border-bottom: 0;\n      }\n    }\n  }\n`;\n\nconst TableContainerStyled = styled.div<TableContainerStyledProps>`\n  overflow: ${({ $isOverflowAuto }) => ($isOverflowAuto ? 'auto' : 'visible')};\n  width: 100%;\n\n  ${({ $isLoading, $isEmpty }) => {\n    if ($isLoading) {\n      return css`\n        display: flex;\n        height: 100%;\n        max-height: 60vh;\n        min-height: 380px;\n        opacity: 0.5;\n        overflow: hidden;\n        pointer-events: none;\n      `;\n    }\n\n    if ($isEmpty) {\n      return css`\n        display: flex;\n        min-height: 100px;\n      `;\n    }\n\n    return css`\n      display: flex;\n      height: 100%;\n      max-height: 60vh;\n      min-height: 380px;\n      overflow: auto;\n    `;\n  }}\n\n  table {\n    tr {\n      :hover {\n        background-color: ${ColorLight.whiteSmoke};\n        p {\n          font-family: ${fontFamilyMapper['semi-bold']};\n        }\n        td {\n          background-color: ${ColorLight.whiteSmoke};\n        }\n      }\n      :last-child {\n        td {\n          border-bottom: 0;\n        }\n      }\n      :nth-child(odd) {\n        td {\n          background-color: ${({ rowEvenColor }) => rowEvenColor};\n        }\n      }\n      :nth-child(even) {\n        td {\n          background-color: ${({ rowOddColor }) => rowOddColor};\n        }\n      }\n    }\n\n    [data-sticky-last-left-td] {\n      box-shadow: 4px 0px 4px 0px rgba(82, 97, 107, 0.15);\n      clip-path: inset(0px -15px 0px 0px);\n    }\n\n    [data-sticky-first-right-td] {\n      box-shadow: 4px 0px 4px 0px rgba(82, 97, 107, 0.15);\n      clip-path: inset(0px -15px 0px 0px);\n    }\n  }\n`;\n\nconst TextStyled = styled(Text)`\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  display: -webkit-inline-box;\n  overflow: hidden;\n  white-space: normal;\n`;\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst Table = ({ getCellProps = defaultPropGetter, ...props }: TablePageInterface) => {\n  // FIXME: pindahin logic di component ke custom hooks\n  const { onPageChange, isManualPagination, totalData, isManualSort, onSort, activePageColor } =\n    props;\n  const charTotal = tableSizeMapper[props.variant].charTotal;\n  const data = useMemo(() => props.data, [props.data]);\n  const columns = useMemo(\n    () => freezeColumn({ header: props.header, freezedColumn: props.freezedColumn }),\n    [props.freezedColumn, props.header]\n  );\n  const sortBy = useMemo(() => {\n    if (props.sortBy && isManualSort) return [props.sortBy];\n    return [];\n  }, [props.sortBy, isManualSort]);\n\n  const [pageCountState, setPageCountState] = useState(\n    isManualPagination ? Math.ceil(totalData / props.pageSize) : undefined\n  );\n  const [countCellSpan, setCountCellSpan] = useState<number>(0);\n\n  const {\n    canNextPage,\n    canPreviousPage,\n    getTableProps,\n    getTableBodyProps,\n    gotoPage,\n    headerGroups,\n    nextPage,\n    page,\n    pageCount,\n    prepareRow,\n    previousPage,\n    selectedFlatRows,\n    setHiddenColumns,\n    state: {\n      pageIndex,\n      pageSize,\n      sortBy: [sortByState]\n    }\n  } = useTable(\n    {\n      columns,\n      data,\n      manualSortBy: isManualSort,\n      manualPagination: isManualPagination,\n      pageCount: pageCountState,\n      initialState: {\n        sortBy,\n        pageIndex: isManualPagination ? props.pageIndex : defaultValue.pageIndex,\n        pageSize: props.pageSize,\n        hiddenColumns: []\n      }\n    },\n    useBlockLayout,\n    useSortBy,\n    usePagination,\n    useRowSelect,\n    useSticky,\n    (hooks) =>\n      tableHooks({\n        hooks,\n        isSelectable: props.isSelectable,\n        hideRowIndex: props.hideRowIndex,\n        rowIndexAlign: props.rowIndexAlign,\n        variant: props.variant,\n        rowActions: props.rowActions,\n        actionLabel: props.actionLabel,\n        freezedColumn: props.freezedColumn\n      })\n  );\n\n  const indexRowAddition = useMemo(() => {\n    if (!isManualPagination) return 0;\n    return pageSize * pageIndex;\n  }, [isManualPagination, pageIndex, pageSize]);\n\n  useDidMountEffect(() => {\n    if (typeof props.onSelectedRow === 'function' && props.isSelectable) {\n      props.onSelectedRow(selectedFlatRows);\n    }\n  }, [props.onSelectedRow, selectedFlatRows]);\n\n  // FIXME: find better implementation for hidden columns\n  useEffect(() => {\n    if (props.hiddenColumns) setHiddenColumns(props.hiddenColumns || []);\n  }, [props.hiddenColumns, setHiddenColumns]);\n\n  useEffect(() => {\n    if (typeof onPageChange === 'function') {\n      onPageChange({ pageIndex, pageSize });\n    }\n  }, [onPageChange, pageIndex, pageSize]);\n\n  useEffect(() => {\n    if (isManualPagination) {\n      setPageCountState(Math.ceil(totalData / pageSize));\n    }\n  }, [pageSize, totalData, isManualPagination]);\n\n  useEffect(() => {\n    if (typeof onSort === 'function') {\n      onSort({ sortBy: sortByState });\n    }\n  }, [onSort, sortByState]);\n\n  useEffect(() => {\n    const filterHasArray: Array<number> = [];\n    page.forEach((row) => {\n      row.cells.forEach((item) => {\n        if (Array.isArray(item.value)) {\n          filterHasArray.push(item.value.length);\n        }\n      });\n    });\n    const countCellData = filterHasArray.length > 0 ? Math.max(...filterHasArray) : 0;\n    setCountCellSpan(countCellData);\n  }, [page]);\n\n  const isOverflowAuto = !!props.freezedColumn || !!props.freezeHeader;\n  const isEmpty = data.length === 0;\n\n  return (\n    <TablePageContainer $isLoading={props.isLoading}>\n      <TableContainerStyled\n        $isOverflowAuto={!isOverflowAuto}\n        $isLoading={props.isLoading}\n        $isEmpty={isEmpty}\n        rowEvenColor={props.rowEvenColor}\n        rowOddColor={props.rowOddColor}\n        variant={props.variant}\n      >\n        <TableStyled\n          {...getTableProps()}\n          freezeHeader={props.freezeHeader}\n          variant={props.variant}\n          data-test-id={props.dataTestId}\n          rowOddColor={props.rowOddColor}\n          rowEvenColor={props.rowEvenColor}\n        >\n          <TableHeader\n            headerGroups={headerGroups}\n            variant={props.variant}\n            freezeHeader={props.freezeHeader}\n          />\n          <TableBodyStyled {...getTableBodyProps()}>\n            {\n              // eslint-disable-next-line sonarjs/cognitive-complexity\n              page.map((row, i) => {\n                prepareRow(row);\n                const onClick = () => props.onClickRow && props.onClickRow(row.original);\n                return (\n                  <tr key={i} {...row.getRowProps()}>\n                    {row.cells.map((cell) => {\n                      const { checkboxIsDisabled, ...restCellProps } = cell.getCellProps(\n                        getCellProps(cell)\n                      ) as CustomCellProps;\n                      return (\n                        <td key={cell.row.id} {...restCellProps}>\n                          {cell.column.type === 'custom' ? (\n                            <CellContainerContentStyled\n                              variant={props.variant}\n                              isBaseline\n                              onClick={cell.column.disableClick ? null : onClick}\n                            >\n                              {cell.render('Cell', {\n                                numberAddition: indexRowAddition,\n                                ...(cell.column.accessor === 'selectable'\n                                  ? { checkboxIsDisabled }\n                                  : {})\n                              })}\n                            </CellContainerContentStyled>\n                          ) : (\n                            <>\n                              {Array.isArray(cell.value) ? (\n                                cell.value.map((valueCell, index) => (\n                                  <CellContainerContentStyled\n                                    variant={props.variant}\n                                    key={index}\n                                    isBaseline\n                                    countArrayValue={countCellSpan}\n                                    isColSpan\n                                    onClick={cell.column.disableClick ? null : onClick}\n                                  >\n                                    <TextStyled\n                                      textAlign={cell.column.textAlign || defaultValue.textAlign}\n                                      label={\n                                        cell.column.isCanShowEmptyCell\n                                          ? valueCell\n                                          : valueCell || '-'\n                                      }\n                                      variant='medium'\n                                      ellipsis={cell.value ? cell.value.length >= charTotal : false}\n                                      {...cell.column.textStyle}\n                                    />\n                                  </CellContainerContentStyled>\n                                ))\n                              ) : (\n                                <CellContainerContentStyled\n                                  variant={props.variant}\n                                  isBaseline\n                                  onClick={cell.column.disableClick ? null : onClick}\n                                >\n                                  <TextStyled\n                                    textAlign={cell.column.textAlign || defaultValue.textAlign}\n                                    label={\n                                      cell.column.isCanShowEmptyCell\n                                        ? cell.value\n                                        : cell.value || '-'\n                                    }\n                                    variant='medium'\n                                    ellipsis={cell.value ? cell.value.length >= charTotal : false}\n                                    {...cell.column.textStyle}\n                                  />\n                                </CellContainerContentStyled>\n                              )}\n                            </>\n                          )}\n                        </td>\n                      );\n                    })}\n                  </tr>\n                );\n              })\n            }\n          </TableBodyStyled>\n        </TableStyled>\n      </TableContainerStyled>\n\n      {props.isLoading ? (\n        <TableLoaderContainer\n          style={{\n            height: props.emptyTableHeight\n          }}\n        >\n          <LoadingIndicator size='small' />\n        </TableLoaderContainer>\n      ) : (\n        <>\n          {isEmpty && (\n            <EmptyData\n              emptyTableHeight={props.emptyTableHeight}\n              noRecordLabel={props.noRecordLabel}\n            />\n          )}\n          {!!pageCount && (\n            <PaginationFooter\n              canPreviousPage={canPreviousPage}\n              canNextPage={canNextPage}\n              totalData={isManualPagination ? totalData : data.length}\n              pageIndex={pageIndex}\n              onClick={{\n                first: () => gotoPage(0),\n                prev: previousPage,\n                next: nextPage,\n                last: () => gotoPage(pageCount - 1),\n                gotoPage: (page) => gotoPage(page)\n              }}\n              totalPage={pageCount}\n              activePageColor={activePageColor}\n            />\n          )}\n        </>\n      )}\n    </TablePageContainer>\n  );\n};\n\nTable.prototype = {\n  pageSize: PropTypes.number,\n  emptyTableHeight: PropTypes.number,\n  onClickRow: PropTypes.func,\n  variant: PropTypes.string,\n  isSelectable: PropTypes.bool,\n  freezedColumn: PropTypes.number,\n  freezeHeader: PropTypes.bool,\n  hideRowIndex: PropTypes.bool\n};\n\nTable.defaultProps = {\n  pageSize: defaultValue.pageSize,\n  pageIndex: defaultValue.pageIndex,\n  emptyTableHeight: 200,\n  onClickRow: undefined,\n  variant: 'regular',\n  isSelectable: false,\n  freezedColumn: 0,\n  freezeHeader: false,\n  hideRowIndex: false\n};\n\nexport default Table;\n"],"names":["defaultValue","TablePageContainer","styled","div","$isLoading","css","TableHeaderStyled","thead","ColorDark","silver","TableHeader","props","_jsx","jsx","children","headerGroups","map","headerGroup","i","Object","assign","getHeaderGroupProps","headers","column","_createElement","getHeaderProps","getIsExcludedSortable","getSortByToggleProps","key","id","CellContainerHeaderStyled","textAlign","variant","Header","valueOf","render","_jsxs","_Fragment","Text","label","toString","tableSizeMapper","fontSize","fontWeight","columns","style","display","justifyContent","alignItems","disableSortBy","SortIcon","isSorted","isSortedDesc","TableBodyStyled","tbody","fontFamilyMapper","ContainerPaginationButton","isDisableChangePage","undefined","_a","isCurrentPage","activePageColor","ColorBlue","yaleBlue","MarginType","ActivePageText","_c","_b","theme","table","pagination","activePageNumberText","_d","PaginationNextFooter","pageIndexLabel","gotoPage","page","ButtonLink","onClick","onMouseDown","margin","PaginationPreviousFooter","PaginationFooter","totalData","pageIndex","canPreviousPage","canNextPage","totalPage","marginTop","position","left","color","gumbo","right","first","Icon","name","size","solitude","prev","next","last","TableStyled","freezeHeader","ColorLight","whiteSolid","thHeight","tdMinHeight","tdMaxHeight","rowEvenColor","rowOddColor","TableContainerStyled","$isOverflowAuto","$isEmpty","whiteSmoke","TextStyled","Table","getCellProps","defaultPropGetter","__rest","onPageChange","isManualPagination","isManualSort","onSort","charTotal","data","useMemo","freezeColumn","header","freezedColumn","sortBy","pageCountState","setPageCountState","useState","Math","ceil","pageSize","countCellSpan","setCountCellSpan","getTableProps","getTableBodyProps","nextPage","pageCount","prepareRow","previousPage","selectedFlatRows","setHiddenColumns","state","sortByState","useTable","manualSortBy","manualPagination","initialState","hiddenColumns","useBlockLayout","useSortBy","usePagination","reactTableExports","useRowSelect","useSticky","hooks","tableHooks","isSelectable","hideRowIndex","rowIndexAlign","rowActions","actionLabel","indexRowAddition","useDidMountEffect","onSelectedRow","useEffect","filterHasArray","forEach","row","cells","item","Array","isArray","value","push","length","countCellData","max","isOverflowAuto","isEmpty","isLoading","dataTestId","onClickRow","original","getRowProps","cell","checkboxIsDisabled","restCellProps","type","CellContainerContentStyled","isBaseline","disableClick","numberAddition","accessor","Fragment","valueCell","index","countArrayValue","isColSpan","isCanShowEmptyCell","ellipsis","textStyle","TableLoaderContainer","height","emptyTableHeight","LoadingIndicator","EmptyData","noRecordLabel","prototype","PropTypes.number","propTypesExports","number","PropTypes.func","func","PropTypes.string","string","PropTypes.bool","bool","defaultProps"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uangcermat-web-toolkit-v2",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "outputDir": "build",
   "main": "build/src/index.js",
   "types": "build/src/index.d.ts",