uangcermat-web-toolkit-v2 0.2.1 → 0.2.2

package/build/index.css

@@ -605102,7 +605102,7 @@
   --tabs-text-inactive: #8ea1ae;
   --tabs-text-disable: #52616b;
   --tabs-notification-background-default: #cc2027;
-  --tabs-notification-textAndIcon-default: #cc2027;
+  --tabs-notification-textAndIcon-default: #ffffff;
 
   --pagination-background-default: #f0f5f9;
   --pagination-background-hover: #eaedf0;

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, scrollbarStyles, 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 }: 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:N,evenBgColor:C,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,scrollbarStyles: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?N||"var(--dropdownList-background-odd)":C||"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 Ne=!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:Ne?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:Ne?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: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)})]}))}))};
 //# 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  scrollbarStyles,\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('max-h-80', dafaultScrollbarStyles, scrollbarStyles)}\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","scrollbarStyles","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}: 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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"}

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

@@ -58,7 +58,7 @@ export type BaseCheckPickerInterface = {
     selectedAllTextStyles?: string;
     activeCheckboxColor?: string;
     itemTextStyles?: string;
-    scrollbarStyles?: string;
+    listContainerStyles?: string;
     isClearSearchOnClose?: boolean;
     selectedItemTextStyles?: string;
     activeItemTextStyles?: string;

package/build/src/components/DatePicker/BaseDatePicker.d.ts

@@ -1,3 +1,3 @@
 import { BaseDatePickerInterface } from './BaseDatePicker.type';
-declare const BaseDatePicker: ({ 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, ...props }: BaseDatePickerInterface) => import("react/jsx-runtime").JSX.Element;
+declare const BaseDatePicker: ({ 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 }: BaseDatePickerInterface) => import("react/jsx-runtime").JSX.Element;
 export default BaseDatePicker;

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"),b=require("../../../node_modules/date-fns/esm/addDays/index.js");module.exports=g=>{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:P,language:Y="english",label:A,labelStyles:F,variant:I="box",isHideRangesOption:L,customRangesOption:z,isRequired:K,labelRequired:$,labelRequiredStyles:J,containerRequiredStyles:Q,isShowButtonToday:U=!0,isShowButtonYesterday:V=!0}=g,W=e.__rest(g,["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"]);const[X,Z]=l.useState(!1),ee={english:"en",bahasa:"id"};return l.useEffect((()=>{x||Z(!1)}),[x]),t.jsxs("div",Object.assign({className:"relative flex flex-col gap-y-1"},{children:[(X||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:[!!A&&t.jsx(i.default,{label:A,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[Y],oneTap:W.isOneTap,onChange:e=>{Z(!1),p(e)},onSelect:j,onClose:()=>Z(!1),onOk:()=>Z(!1),onBlur:()=>{null==C||C(void 0),Z(!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=>W.isDisableBefore?c(e,new Date):W.minDate||W.maxDate?c(e,W.minDate?new Date(W.minDate):void 0)||m(e,W.maxDate?new Date(W.maxDate):void 0):void 0,editable:!1,cleanable:B,ranges:L?[]:null!=z?z:[U&&{label:"english"===Y?"Today":"Hari ini",value:new Date,placement:"bottom"},V&&{label:"english"===Y?"Yesterday":"Kemarin",value:b(new Date,-1),placement:"bottom"}],hideHours:G,hideMinutes:H,hideSeconds:P,toggleAs:()=>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",X&&k?k:X?"border-fields-border-focus":void 0,D&&"border-dark-bermudaGray bg-light-whiteSmoke",S&&"border-red-fireEngineRed")),onClick:()=>{D||Z(!X)}},{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:ee[Y]}),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(),Z(!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"),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)})]}))};
 //# 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  ...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          <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      {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","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","toggleAs","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  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":"swBAmBwBA,IAAA,IAAAC,MACtBA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,aACPA,EAAYC,mBACZA,EAAkBC,cAClBA,EAAaC,oBACbA,EAAmBC,WACnBA,EAAUC,gBACVA,EAAeC,sBACfA,EAAqBC,YACrBA,EAAWC,kBACXA,EAAiBC,YACjBA,EAAWC,YACXA,EAAWC,QACXA,EAAOC,OACPA,EAAMC,KACNA,EAAIC,WACJA,EAAUC,UACVA,EAASC,YACTA,EAAWC,YACXA,EAAWC,SACXA,EAAW,UAASC,MACpBA,EAAKC,YACLA,EAAWC,QACXA,EAAU,MAAKC,mBACfA,EAAkBC,mBAClBA,EAAkBC,WAClBA,EAAUC,cACVA,EAAaC,oBACbA,EAAmBC,wBACnBA,EAAuBC,kBACvBA,GAAoB,EAAIC,sBACxBA,GAAwB,EAAIC,SAC5BA,GAAQrC,EACLsC,EAAKC,EAAAA,OAAAvC,EAtCc,siBAyCtB,MAAOwC,EAAQC,IAAaC,EAAQA,UAAU,GAgBxCC,GAA2D,CAC/DC,QAAS,KACTC,OAAQ,MASV,OANAC,EAAAA,WAAU,KACH7C,GACHwC,IAAU,EACX,GACA,CAACxC,IAGF8C,EAAAA,0BAAKC,UAAU,kCACZ,CAAAC,SAAA,EAACT,GAAU7B,IACVuC,aAAKF,UAAU,oEAEjBD,EAAAA,KAAK,MAAAI,OAAAC,OAAA,CAAAJ,UAAU,mCAAiC,CAAAC,SAAA,GAC3CvB,GACDwB,EAAAG,IAACC,EAAQ,QACP,CAAA5B,MAAOA,EACPsB,UAAWO,EAAOA,QAAC,0CAA2C5B,KAGjEI,GACCmB,EAAAA,IAACM,GACCxB,cAAeA,EACfC,oBAAqBA,EACrBC,wBAAyBA,QAI/BgB,EAACG,IAAAI,GACCxD,MAAOA,EACPyD,OAAQC,EAAUA,WAAClC,GACnBmC,OAAQtB,EAAMuB,SACdzD,SAAW0D,IACTrB,IAAU,GACVrC,EAAS0D,EAAK,EAEhBzD,SAAUA,EACV0D,QAAS,IAAMtB,IAAU,GACzBuB,KAAM,IAAMvB,IAAU,GACtBwB,OAAQ,KACN/C,SAAAA,OAAUgD,GACVzB,IAAU,EAAM,EAElBtB,OAAQA,EACRgD,UA9DoE,CACxE,YAAa,WACb,aAAc,MACd,UAAW,SACX,cAAe,aACf,eAAgB,QAChB,YAAa,WACb,eAAgB,cAChB,gBAAiB,SACjB,aAAc,YACd,aAAc,YACd,cAAe,OACf,WAAY,WAkDmBhE,GAC3BiE,kBAAoBN,GAClBxB,EAAM+B,gBACFC,EAAiBR,EAAM,IAAIS,MAC3BjC,EAAMkC,SAAWlC,EAAMmC,QACvBH,EAAiBR,EAAMxB,EAAMkC,QAAU,IAAID,KAAKjC,EAAMkC,cAAWN,IACjEQ,EAAgBZ,EAAMxB,EAAMmC,QAAU,IAAIF,KAAKjC,EAAMmC,cAAWP,QAChEA,EAENS,UAAU,EACVC,UAAW3D,EACX4D,OACEhD,EACI,GACAC,QAAAA,EAAsB,CACpBK,GAAqB,CACnBT,MAAoB,YAAbD,EAAyB,QAAU,WAC1CxB,MAAO,IAAIsE,KACXJ,UAAW,UAEb/B,GAAyB,CACvBV,MAAoB,YAAbD,EAAyB,YAAc,UAC9CxB,MAAO6E,EAAgB,IAAIP,MAAS,GACpCJ,UAAW,WAIrB7C,UAAWA,EACXC,YAAaA,EACbC,YAAaA,EACba,SACEA,GAGI,KACEU,EAAAA,KACE,MAAAI,OAAAC,OAAA,CAAAJ,UAAWO,UACTwB,EAAAA,QACExB,EAAAA,QACE,iIACA3C,GAEU,SAAZgB,GAAsB,8CACtBY,GAAU3B,EACNA,EACA2B,EACA,kCACA0B,EACJvD,GAAc,8CACdL,GAAW,6BAGf0E,QAAS,KACFrE,GAAY8B,IAAWD,EAAO,GACpC,CAAAS,SAAA,CAEDF,OAAK,MAAAI,OAAAC,OAAA,CAAAJ,UAAU,4BACVlC,IAAgBb,GACjBiD,EAAAG,IAAA,MAAAF,OAAAC,OAAA,CAAKJ,UAAU,eAAa,CAAAC,SAC1BC,EAACG,IAAAC,UACC,CAAA5B,MAAOZ,EACPc,QAAQ,QACRoB,UAAWO,EAAAA,QACTwB,EAAAA,QACE,mFAEFhE,UAMLd,GACDiD,MAAK,MAAAC,OAAAC,OAAA,CAAAJ,UAAU,eACb,CAAAC,SAAAC,EAAAG,IAACC,UACC,CAAA5B,MAAOuD,EAAAA,cAAchF,EAAOC,EAAQ,CAAEwD,OAAQf,GAAelB,KAC7DG,QAAQ,QACRoB,UAAWO,EAAAA,QACTwB,EAAAA,QACE,kFAEF/D,YAOTC,KAAiBhB,GAChBiD,EACEG,IAAA,MAAAF,OAAAC,OAAA,CAAAJ,UAAU,+DACVgC,QAAUE,IACRA,EAAEC,kBAEF1C,IAAU,GACVvB,SAAAA,OAAUgD,EAAU,GACrB,CAAAjB,SAEDC,MAACkC,EAAI,CAACC,KAAK,QAAQrC,UAAU,qCAGjCE,EAAAA,IAACkC,EACC,CAAAC,KAAMjE,GAAQ,YACd4B,UAAWO,EAAAA,QACTwB,EAAAA,QACE,gCACA,GAAGpE,GAAc,2BAEnBU,YAQfZ,IAAkBH,GACjB4C,EAACG,IAAAC,EAAQ,SACP5B,MAAOjB,EACPuC,UAAWO,EAAAA,QACT,6DACA7C,KAKLJ,KAAaC,GACZ2C,EAACG,IAAAC,EAAQ,SACP5B,MAAOnB,EACPyC,UAAWO,EAAAA,QACT,8DACA/C,QAKR"}

package/build/src/components/DatePicker/BaseDatePicker.type.d.ts

@@ -53,4 +53,5 @@ export type BaseDatePickerInterface = {
     isRequired?: boolean;
     isShowButtonToday?: boolean;
     isShowButtonYesterday?: boolean;
+    toggleAs?: React.ElementType;
 } & BaseBadgeRequiredInterface;

package/build/src/components/DatePicker/BaseDatePickerRange.d.ts

@@ -1,3 +1,3 @@
 import { BaseDatePickerRangeInterface } from './BaseDatePickerRange.type';
-declare const BaseDatePickerRange: ({ id, value, format, position, onChange, onSelect, isError, errorMessage, errorMessageStyles, helperMessage, helperMessageStyles, isDisabled, containerStyles, activeContainerStyles, placeholder, placeholderStyles, valueStyles, isCleanable, onClean, onOpen, icon, iconStyles, language, label, labelStyles, variant, isHideRangesOption, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, customRangesOption, ...props }: BaseDatePickerRangeInterface) => import("react/jsx-runtime").JSX.Element;
+declare const BaseDatePickerRange: ({ id, value, format, position, onChange, onSelect, isError, errorMessage, errorMessageStyles, helperMessage, helperMessageStyles, isDisabled, containerStyles, activeContainerStyles, placeholder, placeholderStyles, valueStyles, isCleanable, onClean, onOpen, icon, iconStyles, language, label, labelStyles, variant, isHideRangesOption, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, customRangesOption, toggleAs, ...props }: BaseDatePickerRangeInterface) => import("react/jsx-runtime").JSX.Element;
 export default BaseDatePickerRange;

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),r=require("../../constants/dateLocale.js"),s=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/DateRangePicker/DateRangePicker.js"),c=require("../../../node_modules/date-fns/esm/addDays/index.js"),m=require("../../../node_modules/date-fns/esm/isBefore/index.js"),g=require("../../../node_modules/date-fns/esm/isAfter/index.js");module.exports=b=>{var{id:x,value:f,format:p,position:j,onChange:h,onSelect:y,isError:v,errorMessage:S,errorMessageStyles:q,helperMessage:w,helperMessageStyles:D,isDisabled:R,containerStyles:k,activeContainerStyles:M,placeholder:N,placeholderStyles:O,valueStyles:C,isCleanable:_,onClean:E,onOpen:B,icon:G,iconStyles:T,language:F="english",label:H,labelStyles:I,variant:P="box",isHideRangesOption:$,isRequired:A,labelRequired:L,labelRequiredStyles:V,containerRequiredStyles:z,customRangesOption:K}=b,Y=e.__rest(b,["id","value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","language","label","labelStyles","variant","isHideRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","customRangesOption"]);const J=l.useId(),[Q,U]=l.useState(!1),W={english:"en",bahasa:"id"},X=({selectedValue:e})=>{if(null===e[0]||null===e[1])return;const a=s.dateFormatter(e[0],p,{locale:W[F]}),t=s.dateFormatter(e[1],p,{locale:W[F]});return a==t?a:`${a} ~ ${t}`};return l.useEffect((()=>{f||U(!1)}),[f]),a.jsxs("div",Object.assign({className:"relative flex flex-col gap-y-1"},{children:[(Q||R)&&a.jsx("div",{className:"absolute top-0 left-0 w-full h-full gap-y-1 z-20 bg-transparent cursor-pointer"}),a.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!H&&a.jsx(n.default,{label:H,className:d.twMerge("font-normal text-dark-gumbo text-[10px]",I)}),A&&a.jsx(i,{labelRequired:L,labelRequiredStyles:V,containerRequiredStyles:z})]})),a.jsx(u,{id:R||!Q?void 0:x||J,value:f||[null,null],locale:r.dateLocale[F],onChange:h,onSelect:y,onClose:()=>U(!1),onOpen:B,onOk:()=>U(!1),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"}[j],ranges:$?[]:null!=K?K:[{label:"english"===F?"Today":"Hari ini",value:[new Date,new Date],placement:"bottom"},{label:"english"===F?"Yesterday":"Kemarin",value:[c(new Date,-1),c(new Date,-1)],placement:"bottom"}],shouldDisableDate:e=>Y.isDisableBefore?m(e,new Date):Y.minDate||Y.maxDate?m(e,Y.minDate?new Date(Y.minDate):void 0)||g(e,Y.maxDate?new Date(Y.maxDate):void 0):void 0,editable:!1,placeholder:N,toggleAs:()=>a.jsxs("div",Object.assign({className:d.twMerge(t.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",k),"line"===P&&"border-b border-t-0 border-x-0 rounded-none",Q&&M?M:Q?"border-fields-border-focus":void 0,R&&"border-dark-bermudaGray bg-light-whiteSmoke",v&&"border-red-fireEngineRed")),onClick:()=>{U(!Q)}},{children:[a.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!N&&!f&&a.jsx("div",Object.assign({className:"flex flex-1"},{children:a.jsx(n.default,{label:N,variant:"small",className:d.twMerge(t.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),O)})})),!!f&&a.jsx("div",Object.assign({className:"flex flex-1"},{children:a.jsx(n.default,{label:X({selectedValue:f}),variant:"small",className:d.twMerge(t.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]"),C)})}))]})),_&&!!f&&a.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-",onClick:e=>{e.stopPropagation(),null==E||E(void 0),U(!1)}},{children:a.jsx(o,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),a.jsx(o,{name:G||"caretDate",className:d.twMerge(t.default("fill-dark-bermudaGray w-3 h-3",`${R&&"fill-dark-bermudaGray"}`),T)})]}))}),w&&!v&&a.jsx(n.default,{label:w,className:d.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",D)}),v&&!!S&&a.jsx(n.default,{label:S,className:d.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",q)})]}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("../../../node_modules/classnames/index.js"),l=require("react"),r=require("../../constants/dateLocale.js"),s=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/DateRangePicker/DateRangePicker.js"),c=require("../../../node_modules/date-fns/esm/addDays/index.js"),m=require("../../../node_modules/date-fns/esm/isBefore/index.js"),g=require("../../../node_modules/date-fns/esm/isAfter/index.js");module.exports=b=>{var{id:x,value:f,format:p,position:j,onChange:h,onSelect:y,isError:v,errorMessage:S,errorMessageStyles:q,helperMessage:w,helperMessageStyles:D,isDisabled:R,containerStyles:k,activeContainerStyles:M,placeholder:N,placeholderStyles:O,valueStyles:C,isCleanable:_,onClean:E,onOpen:B,icon:G,iconStyles:T,language:A="english",label:F,labelStyles:H,variant:I="box",isHideRangesOption:P,isRequired:$,labelRequired:L,labelRequiredStyles:V,containerRequiredStyles:z,customRangesOption:K,toggleAs:Y}=b,J=e.__rest(b,["id","value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","language","label","labelStyles","variant","isHideRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","customRangesOption","toggleAs"]);const Q=l.useId(),[U,W]=l.useState(!1),X={english:"en",bahasa:"id"},Z=({selectedValue:e})=>{if(null===e[0]||null===e[1])return;const t=s.dateFormatter(e[0],p,{locale:X[A]}),a=s.dateFormatter(e[1],p,{locale:X[A]});return t==a?t:`${t} ~ ${a}`};return l.useEffect((()=>{f||W(!1)}),[f]),t.jsxs("div",Object.assign({className:"relative flex flex-col gap-y-1"},{children:[(U||R)&&t.jsx("div",{className:"absolute top-0 left-0 w-full h-full gap-y-1 z-20 bg-transparent cursor-pointer"}),t.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!F&&t.jsx(n.default,{label:F,className:d.twMerge("font-normal text-dark-gumbo text-[10px]",H)}),$&&t.jsx(i,{labelRequired:L,labelRequiredStyles:V,containerRequiredStyles:z})]})),t.jsx(u,{id:R||!U?void 0:x||Q,value:f||[null,null],locale:r.dateLocale[A],onChange:h,onSelect:y,onClose:()=>W(!1),onOpen:B,onOk:()=>W(!1),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"}[j],ranges:P?[]:null!=K?K:[{label:"english"===A?"Today":"Hari ini",value:[new Date,new Date],placement:"bottom"},{label:"english"===A?"Yesterday":"Kemarin",value:[c(new Date,-1),c(new Date,-1)],placement:"bottom"}],shouldDisableDate:e=>J.isDisableBefore?m(e,new Date):J.minDate||J.maxDate?m(e,J.minDate?new Date(J.minDate):void 0)||g(e,J.maxDate?new Date(J.maxDate):void 0):void 0,editable:!1,placeholder:N,toggleAs:Y||(()=>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",k),"line"===I&&"border-b border-t-0 border-x-0 rounded-none",U&&M?M:U?"border-fields-border-focus":void 0,R&&"border-dark-bermudaGray bg-light-whiteSmoke",v&&"border-red-fireEngineRed")),onClick:()=>{W(!U)}},{children:[t.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!N&&!f&&t.jsx("div",Object.assign({className:"flex flex-1"},{children:t.jsx(n.default,{label:N,variant:"small",className:d.twMerge(a.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),O)})})),!!f&&t.jsx("div",Object.assign({className:"flex flex-1"},{children:t.jsx(n.default,{label:Z({selectedValue:f}),variant:"small",className:d.twMerge(a.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]"),C)})}))]})),_&&!!f&&t.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-",onClick:e=>{e.stopPropagation(),null==E||E(void 0),W(!1)}},{children:t.jsx(o,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),t.jsx(o,{name:G||"caretDate",className:d.twMerge(a.default("fill-dark-bermudaGray w-3 h-3",`${R&&"fill-dark-bermudaGray"}`),T)})]})))}),w&&!v&&t.jsx(n.default,{label:w,className:d.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",D)}),v&&!!S&&t.jsx(n.default,{label:S,className:d.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",q)})]}))};
 //# sourceMappingURL=BaseDatePickerRange.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDatePickerRange.js","sources":["../../../../src/components/DatePicker/BaseDatePickerRange.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport classNames from 'classnames';\nimport * as dateFns from 'date-fns';\nimport { useEffect, useId, useState } from 'react';\nimport { DateRangePicker as DateRangePickerRsuite } 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  BaseDatePickerRangeInterface,\n  BaseDatePickerRangeLocalType,\n  BaseDatePickerRangeValueType,\n  PickerPosition\n} from './BaseDatePickerRange.type';\n\nconst BaseDatePickerRange = ({\n  id,\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  language = 'english',\n  label,\n  labelStyles,\n  variant = 'box',\n  isHideRangesOption,\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  customRangesOption,\n  ...props\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nBaseDatePickerRangeInterface) => {\n  const defaultId = useId();\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<BaseDatePickerRangeLocalType, 'en' | 'id'> = {\n    english: 'en',\n    bahasa: 'id'\n  };\n\n  const formatValue = ({\n    selectedValue\n  }: {\n    selectedValue: BaseDatePickerRangeValueType;\n  }): string => {\n    if (selectedValue[0] === null || selectedValue[1] === null) return;\n\n    const startDate = dateFormatter(selectedValue[0] as Date, format, {\n      locale: LanguageMapper[language]\n    });\n    const endDate = dateFormatter(selectedValue[1] as Date, format, {\n      locale: LanguageMapper[language]\n    });\n    return startDate == endDate ? startDate : `${startDate} ~ ${endDate}`;\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 bg-transparent 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      <DateRangePickerRsuite\n        id={isDisabled || !isOpen ? undefined : id || defaultId}\n        value={!value ? [null, null] : value}\n        locale={dateLocale[language]}\n        onChange={onChange}\n        onSelect={onSelect}\n        onClose={() => setIsOpen(false)}\n        onOpen={onOpen}\n        onOk={() => setIsOpen(false)}\n        placement={PlacementMapper[position]}\n        ranges={\n          isHideRangesOption\n            ? []\n            : customRangesOption ?? [\n                {\n                  label: language === 'english' ? 'Today' : 'Hari ini',\n                  value: [new Date(), new Date()],\n                  placement: 'bottom'\n                },\n                {\n                  label: language === 'english' ? 'Yesterday' : 'Kemarin',\n                  value: [dateFns.addDays(new Date(), -1), dateFns.addDays(new Date(), -1)],\n                  placement: 'bottom'\n                }\n              ]\n        }\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        placeholder={placeholder}\n        toggleAs={() => (\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              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={formatValue({ selectedValue: value })}\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                  onClean?.(undefined);\n                  setIsOpen(false);\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      {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 BaseDatePickerRange;\n"],"names":["_a","id","value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","language","label","labelStyles","variant","isHideRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","customRangesOption","props","__rest","defaultId","useId","isOpen","setIsOpen","useState","LanguageMapper","english","bahasa","formatValue","selectedValue","startDate","dateFormatter","locale","endDate","useEffect","_jsxs","jsxs","Object","assign","className","children","_jsx","jsx","BaseText","twMerge","BaseBadgeRequired","DateRangePickerRsuite","undefined","dateLocale","onClose","onOk","placement","ranges","Date","dateFns.addDays","shouldDisableDate","date","isDisableBefore","dateFns.isBefore","minDate","maxDate","dateFns.isAfter","editable","toggleAs","classNames","onClick","e","stopPropagation","Icon","name"],"mappings":"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"}
+{"version":3,"file":"BaseDatePickerRange.js","sources":["../../../../src/components/DatePicker/BaseDatePickerRange.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport classNames from 'classnames';\nimport * as dateFns from 'date-fns';\nimport { useEffect, useId, useState } from 'react';\nimport { DateRangePicker as DateRangePickerRsuite } 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  BaseDatePickerRangeInterface,\n  BaseDatePickerRangeLocalType,\n  BaseDatePickerRangeValueType,\n  PickerPosition\n} from './BaseDatePickerRange.type';\n\nconst BaseDatePickerRange = ({\n  id,\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  language = 'english',\n  label,\n  labelStyles,\n  variant = 'box',\n  isHideRangesOption,\n  isRequired,\n  labelRequired,\n  labelRequiredStyles,\n  containerRequiredStyles,\n  customRangesOption,\n  toggleAs,\n  ...props\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nBaseDatePickerRangeInterface) => {\n  const defaultId = useId();\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<BaseDatePickerRangeLocalType, 'en' | 'id'> = {\n    english: 'en',\n    bahasa: 'id'\n  };\n\n  const formatValue = ({\n    selectedValue\n  }: {\n    selectedValue: BaseDatePickerRangeValueType;\n  }): string => {\n    if (selectedValue[0] === null || selectedValue[1] === null) return;\n\n    const startDate = dateFormatter(selectedValue[0] as Date, format, {\n      locale: LanguageMapper[language]\n    });\n    const endDate = dateFormatter(selectedValue[1] as Date, format, {\n      locale: LanguageMapper[language]\n    });\n    return startDate == endDate ? startDate : `${startDate} ~ ${endDate}`;\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 bg-transparent 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      <DateRangePickerRsuite\n        id={isDisabled || !isOpen ? undefined : id || defaultId}\n        value={!value ? [null, null] : value}\n        locale={dateLocale[language]}\n        onChange={onChange}\n        onSelect={onSelect}\n        onClose={() => setIsOpen(false)}\n        onOpen={onOpen}\n        onOk={() => setIsOpen(false)}\n        placement={PlacementMapper[position]}\n        ranges={\n          isHideRangesOption\n            ? []\n            : customRangesOption ?? [\n                {\n                  label: language === 'english' ? 'Today' : 'Hari ini',\n                  value: [new Date(), new Date()],\n                  placement: 'bottom'\n                },\n                {\n                  label: language === 'english' ? 'Yesterday' : 'Kemarin',\n                  value: [dateFns.addDays(new Date(), -1), dateFns.addDays(new Date(), -1)],\n                  placement: 'bottom'\n                }\n              ]\n        }\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        placeholder={placeholder}\n        toggleAs={\n          toggleAs\n            ? toggleAs\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                    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={formatValue({ selectedValue: value })}\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                        onClean?.(undefined);\n                        setIsOpen(false);\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 BaseDatePickerRange;\n"],"names":["_a","id","value","format","position","onChange","onSelect","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isDisabled","containerStyles","activeContainerStyles","placeholder","placeholderStyles","valueStyles","isCleanable","onClean","onOpen","icon","iconStyles","language","label","labelStyles","variant","isHideRangesOption","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","customRangesOption","toggleAs","props","__rest","defaultId","useId","isOpen","setIsOpen","useState","LanguageMapper","english","bahasa","formatValue","selectedValue","startDate","dateFormatter","locale","endDate","useEffect","_jsxs","jsxs","Object","assign","className","children","_jsx","jsx","BaseText","twMerge","BaseBadgeRequired","DateRangePickerRsuite","undefined","dateLocale","onClose","onOk","placement","ranges","Date","dateFns.addDays","shouldDisableDate","date","isDisableBefore","dateFns.isBefore","minDate","maxDate","dateFns.isAfter","editable","classNames","onClick","e","stopPropagation","Icon","name"],"mappings":"gxBAoB6BA,IAAA,IAAAC,GAC3BA,EAAEC,MACFA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,aACPA,EAAYC,mBACZA,EAAkBC,cAClBA,EAAaC,oBACbA,EAAmBC,WACnBA,EAAUC,gBACVA,EAAeC,sBACfA,EAAqBC,YACrBA,EAAWC,kBACXA,EAAiBC,YACjBA,EAAWC,YACXA,EAAWC,QACXA,EAAOC,OACPA,EAAMC,KACNA,EAAIC,WACJA,EAAUC,SACVA,EAAW,UAASC,MACpBA,EAAKC,YACLA,EAAWC,QACXA,EAAU,MAAKC,mBACfA,EAAkBC,WAClBA,EAAUC,cACVA,EAAaC,oBACbA,EAAmBC,wBACnBA,EAAuBC,mBACvBA,EAAkBC,SAClBA,GAG0BjC,EAFvBkC,EAAKC,EAAAA,OAAAnC,EAlCmB,udAqC3B,MAAMoC,EAAYC,EAAAA,SACXC,EAAQC,GAAaC,EAAQA,UAAU,GAgBxCC,EAAoE,CACxEC,QAAS,KACTC,OAAQ,MAGJC,EAAc,EAClBC,oBAIA,GAAyB,OAArBA,EAAc,IAAoC,OAArBA,EAAc,GAAa,OAE5D,MAAMC,EAAYC,EAAaA,cAACF,EAAc,GAAY1C,EAAQ,CAChE6C,OAAQP,EAAelB,KAEnB0B,EAAUF,EAAaA,cAACF,EAAc,GAAY1C,EAAQ,CAC9D6C,OAAQP,EAAelB,KAEzB,OAAOuB,GAAaG,EAAUH,EAAY,GAAGA,OAAeG,GAAS,EASvE,OANAC,EAAAA,WAAU,KACHhD,GACHqC,GAAU,EACX,GACA,CAACrC,IAGFiD,EAAAC,KAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAU,kCACZ,CAAAC,SAAA,EAAClB,GAAU1B,IACV6C,EAAAC,IAAA,MAAA,CAAKH,UAAU,mFAEjBJ,EAAKC,KAAA,MAAAC,OAAAC,OAAA,CAAAC,UAAU,gDACV/B,GACDiC,MAACE,EAAAA,QACC,CAAAnC,MAAOA,EACP+B,UAAWK,UAAQ,0CAA2CnC,KAGjEG,GACC6B,MAACI,EAAiB,CAChBhC,cAAeA,EACfC,oBAAqBA,EACrBC,wBAAyBA,QAI/B0B,MAACK,EAAqB,CACpB7D,GAAIW,IAAe0B,OAASyB,EAAY9D,GAAMmC,EAC9ClC,MAAQA,GAAQ,CAAC,KAAM,MACvB8C,OAAQgB,aAAWzC,GACnBlB,SAAUA,EACVC,SAAUA,EACV2D,QAAS,IAAM1B,GAAU,GACzBnB,OAAQA,EACR8C,KAAM,IAAM3B,GAAU,GACtB4B,UAvEoE,CACxE,YAAa,WACb,aAAc,MACd,UAAW,SACX,cAAe,aACf,eAAgB,QAChB,YAAa,WACb,eAAgB,cAChB,gBAAiB,SACjB,aAAc,YACd,aAAc,YACd,cAAe,OACf,WAAY,WA2DmB/D,GAC3BgE,OACEzC,EACI,GACAK,QAAAA,EAAsB,CACpB,CACER,MAAoB,YAAbD,EAAyB,QAAU,WAC1CrB,MAAO,CAAC,IAAImE,KAAQ,IAAIA,MACxBF,UAAW,UAEb,CACE3C,MAAoB,YAAbD,EAAyB,YAAc,UAC9CrB,MAAO,CAACoE,EAAgB,IAAID,MAAS,GAAIC,EAAgB,IAAID,MAAS,IACtEF,UAAW,WAIrBI,kBAAoBC,GAClBtC,EAAMuC,gBACFC,EAAiBF,EAAM,IAAIH,MAC3BnC,EAAMyC,SAAWzC,EAAM0C,QACvBF,EAAiBF,EAAMtC,EAAMyC,QAAU,IAAIN,KAAKnC,EAAMyC,cAAWZ,IACjEc,EAAgBL,EAAMtC,EAAM0C,QAAU,IAAIP,KAAKnC,EAAM0C,cAAWb,QAChEA,EAENe,UAAU,EACV/D,YAAaA,EACbkB,SACEA,GAEI,KACEkB,EAAAA,KACE,MAAAE,OAAAC,OAAA,CAAAC,UAAWK,UACTmB,EAAAA,QACEnB,EAAAA,QACE,iIACA/C,GAEU,SAAZa,GAAsB,8CACtBY,GAAUxB,EACNA,EACAwB,EACA,kCACAyB,EACJnD,GAAc,8CACdL,GAAW,6BAGfyE,QAAS,KACPzC,GAAWD,EAAO,GACnB,CAAAkB,SAAA,CAEDL,4BAAKI,UAAU,eACZ,CAAAC,SAAA,GAAEzC,IAAgBb,GACjBuD,MAAK,MAAAJ,OAAAC,OAAA,CAAAC,UAAU,yBACbE,EAACC,IAAAC,EAAQ,QACP,CAAAnC,MAAOT,EACPW,QAAQ,QACR6B,UAAWK,UACTmB,EAAAA,QACE,mFAEF/D,UAMLd,GACDuD,EAAAA,IAAA,MAAAJ,OAAAC,OAAA,CAAKC,UAAU,eACb,CAAAC,SAAAC,MAACE,EAAAA,QACC,CAAAnC,MAAOoB,EAAY,CAAEC,cAAe3C,IACpCwB,QAAQ,QACR6B,UAAWK,EAAOA,QAChBmB,EAAU,QACR,kFAEF9D,YAOTC,KAAiBhB,GAChBuD,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CACEC,UAAU,+DACVyB,QAAUC,IACRA,EAAEC,kBAEF/D,SAAAA,OAAU4C,GACVxB,GAAU,EAAM,GACjB,CAAAiB,SAEDC,MAAC0B,EAAI,CAACC,KAAK,QAAQ7B,UAAU,qCAGjCE,EAAAA,IAAC0B,EACC,CAAAC,KAAM/D,GAAQ,YACdkC,UAAWK,EAAAA,QACTmB,EAAAA,QACE,gCACA,GAAGnE,GAAc,2BAEnBU,YAQfZ,IAAkBH,GACjBkD,EAACC,IAAAC,EAAQ,SACPnC,MAAOd,EACP6C,UAAWK,EAAAA,QACT,6DACAjD,KAKLJ,KAAaC,GACZiD,EAACC,IAAAC,EAAQ,SACPnC,MAAOhB,EACP+C,UAAWK,EAAAA,QACT,8DACAnD,QAKR"}

package/build/src/components/DatePicker/BaseDatePickerRange.type.d.ts

@@ -49,4 +49,5 @@ export type BaseDatePickerRangeInterface = {
     variant?: FormVariantType;
     isRequired?: boolean;
     customRangesOption?: Array<customRangesOptionInterface>;
+    toggleAs?: React.ElementType;
 } & BaseBadgeRequiredInterface;

package/build/src/components/Menu/BaseMenuDropdown.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"),o=require("../../../node_modules/classnames/index.js"),r=require("react");require("../../styles/BorderRadius.js");var n=require("../../styles/Colors.js");require("../../styles/Spacing.js");var a=require("../Icon/Icon.js"),i=require("../Text/BaseText.js");require("../Text/Text.js");var l=require("../../../node_modules/@headlessui/react/dist/components/menu/menu.js"),s=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(r);module.exports=({label:c,activeLabelColor:b,inactiveLabelColor:m,activeBgColor:v,inactiveBgColor:w,activeIconColor:x,hoverIconColor:h,inactiveIconColor:f,containerStyles:g,labelStyles:p,iconStyles:j,itemsContainerStyles:S,itemContainerStyles:y,isDisabled:k=!1,position:I="bottom-start",isAutoFlip:C,data:M,activeItemTextStyles:q})=>{const[N,A]=u.default.useState(!1),[L,O]=u.default.useState(!1);return e.jsx(l.Menu,Object.assign({as:"div",className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:I,flip:C},{children:[e.jsx("div",{children:e.jsx(l.MenuButton,Object.assign({className:"p-0",disabled:k},{children:({open:t,active:r})=>e.jsxs("div",Object.assign({className:s.twMerge(o.default("\n                    flex flex-row items-center py-2 px-3 rounded gap-x-1\n                    bg-dropdownSwitcher-button-background-default active:bg-dropdownSwitcher-button-background-active hover:bg-dropdownSwitcher-button-background-hover\n                    text-dropdownSwitcher-button-textAndIcon-default active:text-dropdownSwitcher-button-textAndIcon-active hover:text-dropdownSwitcher-button-textAndIcon-hover\n                    ",r&&"bg-dropdownSwitcher-button-background-active text-dropdownSwitcher-button-textAndIcon-active",k&&"cursor-not-allowed bg-light-whiteSmoke hover:bg-light-whiteSmoke text-dark-bermudaGray hover:text-dark-bermudaGray"),g),onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1),onMouseDown:()=>O(!0),onMouseUp:()=>O(!1),style:{backgroundColor:k?n.ColorLight.whiteSmoke:t?v:w}},{children:[!!c&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(i.default,{label:c,variant:"small",className:s.twMerge(o.default("font-semibold"),p),color:k?n.ColorDark.bermudaGray:t?b:m})})),e.jsx(a,{name:t?"chevronup":"chevrondown",className:s.twMerge("w-4 h-4",o.default(f?`fill-[${f}]`:"fill-dropdownSwitcher-button-textAndIcon-default",N&&(h?`fill-[${h}]`:"fill-dropdownSwitcher-button-textAndIcon-hover"),L&&(x?`fill-[${x}]`:"fill-dropdownSwitcher-button-textAndIcon-active"),r&&(x?`fill-[${x}]`:"fill-dropdownSwitcher-button-textAndIcon-active"),k&&"fill-dark-bermudaGray",j)),color:k?n.ColorLight.whiteSmoke:t?x:f})]}))}))}),e.jsx(d.Transition,Object.assign({as:r.Fragment,enter:"transition ease-out duration-100",enterFrom:"transform opacity-0 scale-95",enterTo:"transform opacity-100 scale-100",leave:"transition ease-in duration-75",leaveFrom:"transform opacity-100 scale-100",leaveTo:"transform opacity-0 scale-95"},{children:e.jsx(l.MenuItems,Object.assign({className:s.twMerge("rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver",S)},{children:e.jsx("div",Object.assign({className:"p-0 bg-transparent overflow-auto"},{children:M.map(((t,r)=>e.jsx(l.MenuItem,{children:({active:r})=>e.jsx("button",Object.assign({className:s.twMerge("flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even",y),onClick:()=>{var e;return null===(e=t.onSelectItem)||void 0===e?void 0:e.call(t)}},{children:e.jsx(i.default,{label:t.label,variant:"small",className:s.twMerge(o.default("text-dropdownList-text-default text-left",`${r?s.twMerge("font-semibold text-dropdownList-text-hover",q):"font-normal"}`),t.labelStyles)})}))},r)))}))}))}))]}))}))};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),o=require("../../../node_modules/classnames/index.js"),r=require("react");require("../../styles/BorderRadius.js");var n=require("../../styles/Colors.js");require("../../styles/Spacing.js");var a=require("../Icon/Icon.js"),i=require("../Text/BaseText.js");require("../Text/Text.js");var l=require("../../../node_modules/@headlessui/react/dist/components/menu/menu.js"),s=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(r);module.exports=({label:c,activeLabelColor:b,inactiveLabelColor:m,activeBgColor:v,inactiveBgColor:w,activeIconColor:x,hoverIconColor:h,inactiveIconColor:f,containerStyles:g,labelStyles:p,iconStyles:j,itemsContainerStyles:S,itemContainerStyles:y,isDisabled:k=!1,position:I="bottom-start",isAutoFlip:C,data:M,activeItemTextStyles:q})=>{const[N,A]=u.default.useState(!1),[L,O]=u.default.useState(!1);return e.jsx(l.Menu,Object.assign({as:"div",className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:I,flip:C},{children:[e.jsx("div",{children:e.jsx(l.MenuButton,Object.assign({className:"p-0",disabled:k},{children:({open:t,active:r})=>e.jsxs("div",Object.assign({className:s.twMerge(o.default("\n                    flex flex-row items-center py-2 px-3 rounded gap-x-1\n                    bg-dropdownSwitcher-button-background-default active:bg-dropdownSwitcher-button-background-active hover:bg-dropdownSwitcher-button-background-hover\n                    text-dropdownSwitcher-button-textAndIcon-default active:text-dropdownSwitcher-button-textAndIcon-active hover:text-dropdownSwitcher-button-textAndIcon-hover\n                    ",r&&"bg-dropdownSwitcher-button-background-active text-dropdownSwitcher-button-textAndIcon-active",k&&"cursor-not-allowed bg-light-whiteSmoke hover:bg-light-whiteSmoke text-dark-bermudaGray hover:text-dark-bermudaGray"),g),onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1),onMouseDown:()=>O(!0),onMouseUp:()=>O(!1),style:{backgroundColor:k?n.ColorLight.whiteSmoke:t?v:w}},{children:[!!c&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(i.default,{label:c,variant:"small",className:s.twMerge(o.default("font-semibold"),p),color:k?n.ColorDark.bermudaGray:t?b:m})})),e.jsx(a,{name:t?"chevronup":"chevrondown",className:s.twMerge("w-4 h-4",o.default(f?`fill-[${f}]`:"fill-dropdownSwitcher-button-textAndIcon-default",N&&(h?`fill-[${h}]`:"fill-dropdownSwitcher-button-textAndIcon-hover"),L&&(x?`fill-[${x}]`:"fill-dropdownSwitcher-button-textAndIcon-active"),r&&(x?`fill-[${x}]`:"fill-dropdownSwitcher-button-textAndIcon-active"),k&&"fill-dark-bermudaGray",j)),color:k?n.ColorLight.whiteSmoke:t?x:f})]}))}))}),e.jsx(d.Transition,Object.assign({as:r.Fragment,enter:"transition ease-out duration-100",enterFrom:"transform opacity-0 scale-95",enterTo:"transform opacity-100 scale-100",leave:"transition ease-in duration-75",leaveFrom:"transform opacity-100 scale-100",leaveTo:"transform opacity-0 scale-95"},{children:e.jsx(l.MenuItems,Object.assign({className:s.twMerge("rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver",S)},{children:e.jsx("div",Object.assign({className:"p-0 bg-transparent overflow-auto"},{children:M.map(((t,r)=>e.jsx(l.MenuItem,{children:({active:r})=>e.jsx("button",Object.assign({className:s.twMerge("flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even",y),onClick:()=>{var e;return null===(e=t.onSelectItem)||void 0===e?void 0:e.call(t)}},{children:e.jsx(i.default,{label:t.label,variant:"small",className:s.twMerge(o.default("text-dropdownList-text-default text-left",`${r?s.twMerge("font-semibold text-dropdownList-text-hover",q):"font-normal"}`),t.labelStyles)})}))},`menu-item-${r}`)))}))}))}))]}))}))};
 //# sourceMappingURL=BaseMenuDropdown.js.map

package/build/src/components/Menu/BaseMenuDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseMenuDropdown.js","sources":["../../../../src/components/Menu/BaseMenuDropdown.tsx"],"sourcesContent":["import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport React, { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { ColorDark, ColorLight } from '../../styles';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseMenuDropdownInterface } from './BaseMenuDropdown.type';\n\nconst BaseMenuDropdown = ({\n  label,\n  activeLabelColor,\n  inactiveLabelColor,\n  activeBgColor,\n  inactiveBgColor,\n  activeIconColor,\n  hoverIconColor,\n  inactiveIconColor,\n  containerStyles,\n  labelStyles,\n  iconStyles,\n  itemsContainerStyles,\n  itemContainerStyles,\n  isDisabled = false,\n  position = 'bottom-start',\n  isAutoFlip,\n  data,\n  activeItemTextStyles\n}: BaseMenuDropdownInterface) => {\n  const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);\n  const [isMouseDown, setIsMouseDown] = React.useState<boolean>(false);\n\n  return (\n    <Menu as='div' className='relative inline-block'>\n      <Float placement={position} flip={isAutoFlip}>\n        <div>\n          <MenuButton className='p-0' disabled={isDisabled}>\n            {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n            {({ open, active }) => (\n              <div\n                className={twMerge(\n                  classNames(\n                    `\n                    flex flex-row items-center py-2 px-3 rounded gap-x-1\n                    bg-dropdownSwitcher-button-background-default active:bg-dropdownSwitcher-button-background-active hover:bg-dropdownSwitcher-button-background-hover\n                    text-dropdownSwitcher-button-textAndIcon-default active:text-dropdownSwitcher-button-textAndIcon-active hover:text-dropdownSwitcher-button-textAndIcon-hover\n                    `,\n                    active &&\n                      'bg-dropdownSwitcher-button-background-active text-dropdownSwitcher-button-textAndIcon-active',\n                    isDisabled &&\n                      'cursor-not-allowed bg-light-whiteSmoke hover:bg-light-whiteSmoke text-dark-bermudaGray hover:text-dark-bermudaGray'\n                  ),\n                  containerStyles\n                )}\n                onMouseEnter={() => setIsMouseEnter(true)}\n                onMouseLeave={() => setIsMouseEnter(false)}\n                onMouseDown={() => setIsMouseDown(true)}\n                onMouseUp={() => setIsMouseDown(false)}\n                style={{\n                  backgroundColor: isDisabled\n                    ? ColorLight.whiteSmoke\n                    : open\n                    ? activeBgColor\n                    : inactiveBgColor\n                }}\n              >\n                {!!label && (\n                  <div className='flex flex-1'>\n                    <BaseText\n                      label={label}\n                      variant='small'\n                      className={twMerge(classNames('font-semibold'), labelStyles)}\n                      color={\n                        isDisabled\n                          ? ColorDark.bermudaGray\n                          : open\n                          ? activeLabelColor\n                          : inactiveLabelColor\n                      }\n                    />\n                  </div>\n                )}\n                <Icon\n                  name={open ? 'chevronup' : 'chevrondown'}\n                  className={twMerge(\n                    'w-4 h-4',\n                    classNames(\n                      inactiveIconColor\n                        ? `fill-[${inactiveIconColor}]`\n                        : 'fill-dropdownSwitcher-button-textAndIcon-default',\n                      isMouseEnter &&\n                        (hoverIconColor\n                          ? `fill-[${hoverIconColor}]`\n                          : 'fill-dropdownSwitcher-button-textAndIcon-hover'),\n                      isMouseDown &&\n                        (activeIconColor\n                          ? `fill-[${activeIconColor}]`\n                          : 'fill-dropdownSwitcher-button-textAndIcon-active'),\n                      active &&\n                        (activeIconColor\n                          ? `fill-[${activeIconColor}]`\n                          : 'fill-dropdownSwitcher-button-textAndIcon-active'),\n                      isDisabled && 'fill-dark-bermudaGray',\n                      iconStyles\n                    )\n                  )}\n                  color={\n                    isDisabled ? ColorLight.whiteSmoke : open ? activeIconColor : inactiveIconColor\n                  }\n                />\n              </div>\n            )}\n          </MenuButton>\n        </div>\n        <Transition\n          as={Fragment}\n          enter='transition ease-out duration-100'\n          enterFrom='transform opacity-0 scale-95'\n          enterTo='transform opacity-100 scale-100'\n          leave='transition ease-in duration-75'\n          leaveFrom='transform opacity-100 scale-100'\n          leaveTo='transform opacity-0 scale-95'\n        >\n          <MenuItems\n            className={twMerge(\n              'rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver',\n              itemsContainerStyles\n            )}\n          >\n            <div className='p-0 bg-transparent overflow-auto'>\n              {data.map((item, index) => (\n                <MenuItem key={index}>\n                  {({ active }) => {\n                    return (\n                      <button\n                        className={twMerge(\n                          'flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n                          itemContainerStyles\n                        )}\n                        onClick={() => item.onSelectItem?.()}\n                      >\n                        <BaseText\n                          label={item.label}\n                          variant='small'\n                          className={twMerge(\n                            classNames(\n                              'text-dropdownList-text-default text-left',\n                              `${\n                                active\n                                  ? twMerge(\n                                      'font-semibold text-dropdownList-text-hover',\n                                      activeItemTextStyles\n                                    )\n                                  : 'font-normal'\n                              }`\n                            ),\n                            item.labelStyles\n                          )}\n                        />\n                      </button>\n                    );\n                  }}\n                </MenuItem>\n              ))}\n            </div>\n          </MenuItems>\n        </Transition>\n      </Float>\n    </Menu>\n  );\n};\n\nexport default BaseMenuDropdown;\n"],"names":["label","activeLabelColor","inactiveLabelColor","activeBgColor","inactiveBgColor","activeIconColor","hoverIconColor","inactiveIconColor","containerStyles","labelStyles","iconStyles","itemsContainerStyles","itemContainerStyles","isDisabled","position","isAutoFlip","data","activeItemTextStyles","isMouseEnter","setIsMouseEnter","React","useState","isMouseDown","setIsMouseDown","_jsx","Menu","Object","assign","as","className","_jsxs","Float","placement","flip","children","jsx","MenuButton","disabled","open","active","twMerge","classNames","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","style","backgroundColor","ColorLight","whiteSmoke","BaseText","variant","color","ColorDark","bermudaGray","Icon","name","Transition","Fragment","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","MenuItems","map","item","index","MenuItem","onClick","_a","onSelectItem","call"],"mappings":"mwBAWyB,EACvBA,QACAC,mBACAC,qBACAC,gBACAC,kBACAC,kBACAC,iBACAC,oBACAC,kBACAC,cACAC,aACAC,uBACAC,sBACAC,cAAa,EACbC,WAAW,eACXC,aACAC,OACAC,2BAEA,MAAOC,EAAcC,GAAmBC,EAAAA,QAAMC,UAAkB,IACzDC,EAAaC,GAAkBH,EAAAA,QAAMC,UAAkB,GAE9D,OACEG,MAACC,EAAAA,KAAIC,OAAAC,OAAA,CAACC,GAAG,MAAMC,UAAU,mCACvBC,OAACC,EAAAA,MAAML,OAAAC,OAAA,CAAAK,UAAWlB,EAAUmB,KAAMlB,GAAU,CAAAmB,SAAA,CAC1CV,EAAAA,IACE,MAAA,CAAAU,SAAAV,EAAAW,IAACC,aAAWV,OAAAC,OAAA,CAAAE,UAAU,MAAMQ,SAAUxB,GAAU,CAAAqB,SAE7C,EAAGI,OAAMC,YACRT,EAAAA,KAAA,MAAAJ,OAAAC,OAAA,CACEE,UAAWW,EAAOA,QAChBC,EAAU,QACR,8bAKAF,GACE,+FACF1B,GACE,sHAEJL,GAEFkC,aAAc,IAAMvB,GAAgB,GACpCwB,aAAc,IAAMxB,GAAgB,GACpCyB,YAAa,IAAMrB,GAAe,GAClCsB,UAAW,IAAMtB,GAAe,GAChCuB,MAAO,CACLC,gBAAiBlC,EACbmC,EAAAA,WAAWC,WACXX,EACAnC,EACAC,IACL,CAAA8B,SAAA,GAEElC,GACDwB,EAAKW,IAAA,MAAAT,OAAAC,OAAA,CAAAE,UAAU,yBACbL,MAAC0B,EAAAA,QACC,CAAAlD,MAAOA,EACPmD,QAAQ,QACRtB,UAAWW,EAAOA,QAACC,EAAU,QAAC,iBAAkBhC,GAChD2C,MACEvC,EACIwC,EAAAA,UAAUC,YACVhB,EACArC,EACAC,OAKZsB,EAACW,IAAAoB,EACC,CAAAC,KAAMlB,EAAO,YAAc,cAC3BT,UAAWW,EAAAA,QACT,UACAC,EAAAA,QACElC,EACI,SAASA,KACT,mDACJW,IACGZ,EACG,SAASA,KACT,kDACNgB,IACGjB,EACG,SAASA,KACT,mDACNkC,IACGlC,EACG,SAASA,KACT,mDACNQ,GAAc,wBACdH,IAGJ0C,MACEvC,EAAamC,EAAUA,WAACC,WAAaX,EAAOjC,EAAkBE,aAO1EiB,MAACiC,EAAUA,WAAA/B,OAAAC,OAAA,CACTC,GAAI8B,EAAQA,SACZC,MAAM,mCACNC,UAAU,+BACVC,QAAQ,kCACRC,MAAM,iCACNC,UAAU,kCACVC,QAAQ,gCAA8B,CAAA9B,SAEtCV,EAACW,IAAA8B,EAASA,UACRvC,OAAAC,OAAA,CAAAE,UAAWW,EAAOA,QAChB,mGACA7B,cAGFa,MAAK,MAAAE,OAAAC,OAAA,CAAAE,UAAU,oCACZ,CAAAK,SAAAlB,EAAKkD,KAAI,CAACC,EAAMC,IACf5C,EAAAA,IAAC6C,EAAQA,SAAA,CAAAnC,SACN,EAAGK,YAEAf,8BACEK,UAAWW,EAAAA,QACT,8GACA5B,GAEF0D,QAAS,KAAK,IAAAC,EAAC,OAAqB,QAArBA,EAAAJ,EAAKK,oBAAgB,IAAAD,OAAA,EAAAA,EAAAE,KAAAN,EAAA,GAEpC,CAAAjC,SAAAV,EAAAW,IAACe,UACC,CAAAlD,MAAOmE,EAAKnE,MACZmD,QAAQ,QACRtB,UAAWW,EAAAA,QACTC,EAAU,QACR,2CACA,GACEF,EACIC,EAAOA,QACL,6CACAvB,GAEF,iBAGRkD,EAAK1D,mBAzBF2D,oBAsC3B"}
+{"version":3,"file":"BaseMenuDropdown.js","sources":["../../../../src/components/Menu/BaseMenuDropdown.tsx"],"sourcesContent":["import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport React, { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { ColorDark, ColorLight } from '../../styles';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseMenuDropdownInterface } from './BaseMenuDropdown.type';\n\nconst BaseMenuDropdown = ({\n  label,\n  activeLabelColor,\n  inactiveLabelColor,\n  activeBgColor,\n  inactiveBgColor,\n  activeIconColor,\n  hoverIconColor,\n  inactiveIconColor,\n  containerStyles,\n  labelStyles,\n  iconStyles,\n  itemsContainerStyles,\n  itemContainerStyles,\n  isDisabled = false,\n  position = 'bottom-start',\n  isAutoFlip,\n  data,\n  activeItemTextStyles\n}: BaseMenuDropdownInterface) => {\n  const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);\n  const [isMouseDown, setIsMouseDown] = React.useState<boolean>(false);\n\n  return (\n    <Menu as='div' className='relative inline-block'>\n      <Float placement={position} flip={isAutoFlip}>\n        <div>\n          <MenuButton className='p-0' disabled={isDisabled}>\n            {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n            {({ open, active }) => (\n              <div\n                className={twMerge(\n                  classNames(\n                    `\n                    flex flex-row items-center py-2 px-3 rounded gap-x-1\n                    bg-dropdownSwitcher-button-background-default active:bg-dropdownSwitcher-button-background-active hover:bg-dropdownSwitcher-button-background-hover\n                    text-dropdownSwitcher-button-textAndIcon-default active:text-dropdownSwitcher-button-textAndIcon-active hover:text-dropdownSwitcher-button-textAndIcon-hover\n                    `,\n                    active &&\n                      'bg-dropdownSwitcher-button-background-active text-dropdownSwitcher-button-textAndIcon-active',\n                    isDisabled &&\n                      'cursor-not-allowed bg-light-whiteSmoke hover:bg-light-whiteSmoke text-dark-bermudaGray hover:text-dark-bermudaGray'\n                  ),\n                  containerStyles\n                )}\n                onMouseEnter={() => setIsMouseEnter(true)}\n                onMouseLeave={() => setIsMouseEnter(false)}\n                onMouseDown={() => setIsMouseDown(true)}\n                onMouseUp={() => setIsMouseDown(false)}\n                style={{\n                  backgroundColor: isDisabled\n                    ? ColorLight.whiteSmoke\n                    : open\n                    ? activeBgColor\n                    : inactiveBgColor\n                }}\n              >\n                {!!label && (\n                  <div className='flex flex-1'>\n                    <BaseText\n                      label={label}\n                      variant='small'\n                      className={twMerge(classNames('font-semibold'), labelStyles)}\n                      color={\n                        isDisabled\n                          ? ColorDark.bermudaGray\n                          : open\n                          ? activeLabelColor\n                          : inactiveLabelColor\n                      }\n                    />\n                  </div>\n                )}\n                <Icon\n                  name={open ? 'chevronup' : 'chevrondown'}\n                  className={twMerge(\n                    'w-4 h-4',\n                    classNames(\n                      inactiveIconColor\n                        ? `fill-[${inactiveIconColor}]`\n                        : 'fill-dropdownSwitcher-button-textAndIcon-default',\n                      isMouseEnter &&\n                        (hoverIconColor\n                          ? `fill-[${hoverIconColor}]`\n                          : 'fill-dropdownSwitcher-button-textAndIcon-hover'),\n                      isMouseDown &&\n                        (activeIconColor\n                          ? `fill-[${activeIconColor}]`\n                          : 'fill-dropdownSwitcher-button-textAndIcon-active'),\n                      active &&\n                        (activeIconColor\n                          ? `fill-[${activeIconColor}]`\n                          : 'fill-dropdownSwitcher-button-textAndIcon-active'),\n                      isDisabled && 'fill-dark-bermudaGray',\n                      iconStyles\n                    )\n                  )}\n                  color={\n                    isDisabled ? ColorLight.whiteSmoke : open ? activeIconColor : inactiveIconColor\n                  }\n                />\n              </div>\n            )}\n          </MenuButton>\n        </div>\n        <Transition\n          as={Fragment}\n          enter='transition ease-out duration-100'\n          enterFrom='transform opacity-0 scale-95'\n          enterTo='transform opacity-100 scale-100'\n          leave='transition ease-in duration-75'\n          leaveFrom='transform opacity-100 scale-100'\n          leaveTo='transform opacity-0 scale-95'\n        >\n          <MenuItems\n            className={twMerge(\n              'rounded min-w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver',\n              itemsContainerStyles\n            )}\n          >\n            <div className='p-0 bg-transparent overflow-auto'>\n              {data.map((item, index) => (\n                <MenuItem key={`menu-item-${index}`}>\n                  {({ active }) => {\n                    return (\n                      <button\n                        className={twMerge(\n                          'flex justify-start w-full px-4 py-2 odd:bg-dropdownList-background-odd even:bg-dropdownList-background-even',\n                          itemContainerStyles\n                        )}\n                        onClick={() => item.onSelectItem?.()}\n                      >\n                        <BaseText\n                          label={item.label}\n                          variant='small'\n                          className={twMerge(\n                            classNames(\n                              'text-dropdownList-text-default text-left',\n                              `${\n                                active\n                                  ? twMerge(\n                                      'font-semibold text-dropdownList-text-hover',\n                                      activeItemTextStyles\n                                    )\n                                  : 'font-normal'\n                              }`\n                            ),\n                            item.labelStyles\n                          )}\n                        />\n                      </button>\n                    );\n                  }}\n                </MenuItem>\n              ))}\n            </div>\n          </MenuItems>\n        </Transition>\n      </Float>\n    </Menu>\n  );\n};\n\nexport default BaseMenuDropdown;\n"],"names":["label","activeLabelColor","inactiveLabelColor","activeBgColor","inactiveBgColor","activeIconColor","hoverIconColor","inactiveIconColor","containerStyles","labelStyles","iconStyles","itemsContainerStyles","itemContainerStyles","isDisabled","position","isAutoFlip","data","activeItemTextStyles","isMouseEnter","setIsMouseEnter","React","useState","isMouseDown","setIsMouseDown","_jsx","Menu","Object","assign","as","className","_jsxs","Float","placement","flip","children","jsx","MenuButton","disabled","open","active","twMerge","classNames","onMouseEnter","onMouseLeave","onMouseDown","onMouseUp","style","backgroundColor","ColorLight","whiteSmoke","BaseText","variant","color","ColorDark","bermudaGray","Icon","name","Transition","Fragment","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","MenuItems","map","item","index","MenuItem","onClick","_a","onSelectItem","call"],"mappings":"mwBAWyB,EACvBA,QACAC,mBACAC,qBACAC,gBACAC,kBACAC,kBACAC,iBACAC,oBACAC,kBACAC,cACAC,aACAC,uBACAC,sBACAC,cAAa,EACbC,WAAW,eACXC,aACAC,OACAC,2BAEA,MAAOC,EAAcC,GAAmBC,EAAAA,QAAMC,UAAkB,IACzDC,EAAaC,GAAkBH,EAAAA,QAAMC,UAAkB,GAE9D,OACEG,MAACC,EAAAA,KAAIC,OAAAC,OAAA,CAACC,GAAG,MAAMC,UAAU,mCACvBC,OAACC,EAAAA,MAAML,OAAAC,OAAA,CAAAK,UAAWlB,EAAUmB,KAAMlB,GAAU,CAAAmB,SAAA,CAC1CV,EAAAA,IACE,MAAA,CAAAU,SAAAV,EAAAW,IAACC,aAAWV,OAAAC,OAAA,CAAAE,UAAU,MAAMQ,SAAUxB,GAAU,CAAAqB,SAE7C,EAAGI,OAAMC,YACRT,EAAAA,KAAA,MAAAJ,OAAAC,OAAA,CACEE,UAAWW,EAAOA,QAChBC,EAAU,QACR,8bAKAF,GACE,+FACF1B,GACE,sHAEJL,GAEFkC,aAAc,IAAMvB,GAAgB,GACpCwB,aAAc,IAAMxB,GAAgB,GACpCyB,YAAa,IAAMrB,GAAe,GAClCsB,UAAW,IAAMtB,GAAe,GAChCuB,MAAO,CACLC,gBAAiBlC,EACbmC,EAAAA,WAAWC,WACXX,EACAnC,EACAC,IACL,CAAA8B,SAAA,GAEElC,GACDwB,EAAKW,IAAA,MAAAT,OAAAC,OAAA,CAAAE,UAAU,yBACbL,MAAC0B,EAAAA,QACC,CAAAlD,MAAOA,EACPmD,QAAQ,QACRtB,UAAWW,EAAOA,QAACC,EAAU,QAAC,iBAAkBhC,GAChD2C,MACEvC,EACIwC,EAAAA,UAAUC,YACVhB,EACArC,EACAC,OAKZsB,EAACW,IAAAoB,EACC,CAAAC,KAAMlB,EAAO,YAAc,cAC3BT,UAAWW,EAAAA,QACT,UACAC,EAAAA,QACElC,EACI,SAASA,KACT,mDACJW,IACGZ,EACG,SAASA,KACT,kDACNgB,IACGjB,EACG,SAASA,KACT,mDACNkC,IACGlC,EACG,SAASA,KACT,mDACNQ,GAAc,wBACdH,IAGJ0C,MACEvC,EAAamC,EAAUA,WAACC,WAAaX,EAAOjC,EAAkBE,aAO1EiB,MAACiC,EAAUA,WAAA/B,OAAAC,OAAA,CACTC,GAAI8B,EAAQA,SACZC,MAAM,mCACNC,UAAU,+BACVC,QAAQ,kCACRC,MAAM,iCACNC,UAAU,kCACVC,QAAQ,gCAA8B,CAAA9B,SAEtCV,EAACW,IAAA8B,EAASA,UACRvC,OAAAC,OAAA,CAAAE,UAAWW,EAAOA,QAChB,mGACA7B,cAGFa,MAAK,MAAAE,OAAAC,OAAA,CAAAE,UAAU,oCACZ,CAAAK,SAAAlB,EAAKkD,KAAI,CAACC,EAAMC,IACf5C,EAAAA,IAAC6C,EAAQA,SAAA,CAAAnC,SACN,EAAGK,YAEAf,8BACEK,UAAWW,EAAAA,QACT,8GACA5B,GAEF0D,QAAS,KAAK,IAAAC,EAAC,OAAqB,QAArBA,EAAAJ,EAAKK,oBAAgB,IAAAD,OAAA,EAAAA,EAAAE,KAAAN,EAAA,GAEpC,CAAAjC,SAAAV,EAAAW,IAACe,UACC,CAAAlD,MAAOmE,EAAKnE,MACZmD,QAAQ,QACRtB,UAAWW,EAAAA,QACTC,EAAU,QACR,2CACA,GACEF,EACIC,EAAOA,QACL,6CACAvB,GAEF,iBAGRkD,EAAK1D,mBAzBF,aAAa2D,sBAsCxC"}

package/build/src/components/SelectPicker/BaseSelectPicker.d.ts

@@ -1,3 +1,3 @@
 import { BaseSelectPickerInterface } from './BaseSelectPicker.type';
-declare const BaseSelectPicker: ({ label, labelStyles, value, valueStyles, 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, variant, data, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, onSearch, itemTextStyles, scrollbarStyles, isClearSearchOnClose, activeItemTextStyles }: BaseSelectPickerInterface) => import("react/jsx-runtime").JSX.Element;
+declare const BaseSelectPicker: ({ label, labelStyles, value, valueStyles, 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, variant, data, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, onSearch, itemTextStyles, listContainerStyles, isClearSearchOnClose, activeItemTextStyles }: BaseSelectPickerInterface) => import("react/jsx-runtime").JSX.Element;
 export default BaseSelectPicker;