uangcermat-web-toolkit-v2 0.2.18 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/src/components/CheckPicker/BaseCheckPicker.js +1 -1
  2. package/build/src/components/CheckPicker/BaseCheckPicker.js.map +1 -1
  3. package/build/src/components/SelectPicker/BaseSelectPicker.js +1 -1
  4. package/build/src/components/SelectPicker/BaseSelectPicker.js.map +1 -1
  5. package/build/src/components/Tabs/BaseAccordionTabs.js +1 -1
  6. package/build/src/components/Tabs/BaseAccordionTabs.js.map +1 -1
  7. package/package.json +1 -1
package/build/src/components/CheckPicker/BaseCheckPicker.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),l=require("../../../node_modules/classnames/index.js"),r=require("react"),s=require("../../../node_modules/react-window/dist/index.esm.js"),a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var i=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var o=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var d=require("../Checkbox/Checkbox.js"),c=require("../Icon/Icon.js"),u=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),x=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({value:f,valueStyles:g,label:m,labelStyles:j,placeholder:h,placeholderStyles:w,containerStyles:p,activeContainerStyles:v,iconStyles:y,itemsContainerStyles:S,itemContainerStyles:k,oddBgColor:C,evenBgColor:N,isDisabled:q=!1,position:M="bottom-start",isAutoFlip:O,onSelectItem:B,onClean:R,isCleanable:L,isError:T,errorMessage:E,errorMessageStyles:F,helperMessage:G,helperMessageStyles:_,isSearchable:D,searchContainerStyles:I,activeSearchStyles:A,searchPlaceholder:z,searchStyles:P,iconSearchStyles:$,isShowFooterButton:H,footerButtonContainerStyles:K,footerButtonLabel:V,onClickFooterButton:W,noResultsLabel:J,noResultsLabelStyles:Q,badgeContainerStyles:U,badgeLabelStyles:X,variant:Y="box",data:Z,isRequired:ee,labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:re,onSearch:se,selectedAllText:ae,selectedAllTextStyles:ne,activeCheckboxColor:ie,itemTextStyles:oe,listContainerStyles:de,isClearSearchOnClose:ce,selectedItemTextStyles:ue,activeItemTextStyles:xe,maxSelected:be})=>{const fe=r.useRef(null),ge=r.useRef(null),me=r.useRef({}),[je,he]=r.useState(""),[we,pe]=r.useState(0),[ve,ye]=r.useState(!1),Se=e=>me.current[e]||32,ke=r.useCallback(((e,t)=>{me.current=Object.assign(Object.assign({},me.current),{[e]:t}),ge.current&&ge.current.resetAfterIndex(e)}),[]),Ce=r.useMemo((()=>{const e=Z;return""!==je&&je?e.filter((e=>e.label.toLowerCase().includes(je.toLowerCase()))):e}),[je,Z]),Ne=r.useMemo((()=>{let e=0;return Ce.length>0&&(e=34*Ce.length),e}),[Ce.length,je]);r.useEffect((()=>{const e=null==f?void 0:f.filter((e=>e));(null==e?void 0:e.length)>=be?ye(!0):ye(!1)}),[f,be]);const qe=({data:t,index:s,style:i,windowWidth:o})=>{const c=r.useRef(null);return r.useEffect((()=>{c.current&&ke(s,c.current.getBoundingClientRect().height)}),[c,o]),e.jsx("div",Object.assign({className:x.twMerge(l.default("w-full flex items-center !min-h-[32px]",k,(!!a(k,"p-")||!!a(k,"px-")||!!a(k,"py-"))&&"p-0")),style:Object.assign(Object.assign({},i),{backgroundColor:s%2==0?C||"var(--dropdownList-background-odd)":N||"var(--dropdownList-background-even)"})},{children:e.jsx("div",Object.assign({ref:c,className:"w-full"},{children:e.jsx(u.ListboxOption,Object.assign({className:x.twMerge(l.default("relative cursor-default select-none p-2 bg-transparent list-none",a(k,"p-"),a(k,"px-"),a(k,"py-"))),value:t[s]},{children:({active:r})=>{const a=f.some((e=>e===t[s].value));return e.jsxs("div",Object.assign({className:x.twMerge("flex flex-row items-center gap-x-2 cursor-pointer",ve&&!a?"cursor-not-allowed":""),onClick:e=>{if(e.preventDefault(),ve&&!a)return;let l=f.slice();l=a?l.filter((e=>e!==t[s].value)):l.concat(t[s].value),null==B||B(l.filter((e=>""!==e))),l.length===be?ye(!0):ye(!1)}},{children:[e.jsx(d,{checked:a,variant:"small",color:ie||void 0,isDisabled:ve&&!a}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:t[s].label,className:x.twMerge(l.default("text-xs text-dropdownList-text-default leading-[14px]",`${r&&!ve?x.twMerge("font-semibold text-dropdownList-text-hover",xe):"font-normal"}`),a&&ue,oe)})}))]}))}}),s)}),s)}))};r.useEffect((()=>{se&&se(je)}),[je]),r.useEffect((()=>{se&&se(je)}),[je]),r.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)pe(t.contentRect.width)}));return fe.current&&e.observe(fe.current),()=>{fe.current&&e.unobserve(fe.current)}}),[]);const Me=!a(p,"w-")||"w-full"===a(p,"w-")||!a(S,"w-")||"w-full"===a(S,"w-");return e.jsx(u.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({ref:fe,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!m&&e.jsx(n.default,{label:m,className:x.twMerge("font-normal text-dark-gumbo text-[10px]",j)}),ee&&e.jsx(i,{labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:re})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:M,flip:O},{children:[e.jsx(u.ListboxButton,Object.assign({className:x.twMerge(l.default("p-0 bg-transparent",q&&"cursor-not-allowed"),re?a(p,"w-"):void 0),onClick:e=>{q&&e.preventDefault()}},{children:({open:t})=>e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",p),"line"===Y&&"border-b border-t-0 border-x-0 rounded-none",t&&v?v:t?"border-fields-border-focus":void 0,q&&"border-dark-bermudaGray bg-light-whiteSmoke",T&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!h&&""===f[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(n.default,{label:h,variant:"small",className:x.twMerge(l.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),w)})})),""!==f[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:f.length===Z.length?e.jsx(n.default,{label:ae||"All",variant:"small",className:x.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),ne)}):e.jsx(n.default,{label:Z.filter((e=>f.includes(e.value))).map((e=>e.label)).join(", "),variant:"small",className:x.twMerge(l.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]"),g)})}))]})),""!==f[0]&&e.jsx("div",Object.assign({className:x.twMerge("flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]",U)},{children:e.jsx(n.default,{label:f.length.toString(),className:x.twMerge(l.default("font-normal text-[8px] leading-3"),X)})})),L&&""!==f[0]&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==B||B([]),he(""),ye(!1),null==R||R()}},{children:e.jsx(c,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(c,{name:t?"chevronup":"chevrondown",className:x.twMerge(l.default("fill-dark-bermudaGray w-3 h-3",`${q&&"fill-dark-bermudaGray"}`),y)})]}))})),e.jsx(b.Transition,Object.assign({as:r.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(u.ListboxOptions,Object.assign({className:x.twMerge(l.default("rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50",p?a(p,"w-"):void 0),S),style:{width:Me?we:void 0}},{children:({open:t})=>(r.useEffect((()=>{!t&&ce&&he("")}),[t]),e.jsxs(e.Fragment,{children:[D&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",I),t&&A?A:t?"border-fields-border-focus":void 0))},{children:[e.jsx("input",{placeholder:z||"Search",className:x.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",P),onChange:e=>{he(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:je}),e.jsx(c,{name:"search",className:x.twMerge("fill-dark-bermudaGray w-3 h-3",$)})]}))})),e.jsx("div",Object.assign({className:x.twMerge(l.default("p-0 overflow-hidden",a(S,"w-")?a(S,"w-"):a(p,"w-"))),style:{width:Me?we:void 0}},{children:Ce.length>0?e.jsx(s.VariableSizeList,Object.assign({ref:ge,height:Ne>320?320:Ne,itemCount:Ce.length,itemSize:Se,width:"100%",className:x.twMerge("max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",de),itemData:Ce},{children:qe})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(n.default,{label:J||"No Results Found",className:x.twMerge("text-dark-bermudaGray font-normal text-sm",Q)})}))})),H&&e.jsx(o.default,{variant:"tertiary",onClick:()=>{null==W||W()},label:V||"Footer Button",className:x.twMerge("",K)})]}))}))}))]}))})),G&&!T&&e.jsx(n.default,{label:G,className:x.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",_)}),T&&!!E&&e.jsx(n.default,{label:E,className:x.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",F)})]}))}))};
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),l=require("../../../node_modules/classnames/index.js"),s=require("react"),r=require("../../../node_modules/react-window/dist/index.esm.js"),a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var i=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var o=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var d=require("../Checkbox/Checkbox.js"),c=require("../Icon/Icon.js"),u=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),x=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),b=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");module.exports=({value:f,valueStyles:g,label:m,labelStyles:j,placeholder:h,placeholderStyles:p,containerStyles:w,activeContainerStyles:v,iconStyles:y,itemsContainerStyles:S,itemContainerStyles:k,oddBgColor:C,evenBgColor:N,isDisabled:B=!1,position:q="bottom-start",isAutoFlip:M,onSelectItem:O,onClean:R,isCleanable:L,isError:T,errorMessage:E,errorMessageStyles:F,helperMessage:G,helperMessageStyles:_,isSearchable:D,searchContainerStyles:I,activeSearchStyles:A,searchPlaceholder:z,searchStyles:P,iconSearchStyles:$,isShowFooterButton:H,footerButtonContainerStyles:K,footerButtonLabel:V,onClickFooterButton:W,noResultsLabel:J,noResultsLabelStyles:Q,badgeContainerStyles:U,badgeLabelStyles:X,variant:Y="box",data:Z,isRequired:ee,labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:se,onSearch:re,selectedAllText:ae,selectedAllTextStyles:ne,activeCheckboxColor:ie,itemTextStyles:oe,listContainerStyles:de,isClearSearchOnClose:ce,selectedItemTextStyles:ue,activeItemTextStyles:xe,maxSelected:be})=>{const fe=s.useRef(null),ge=s.useRef(null),me=s.useRef({}),[je,he]=s.useState(""),[pe,we]=s.useState(0),[ve,ye]=s.useState(!1),Se=e=>me.current[e]||32,ke=s.useCallback(((e,t)=>{me.current=Object.assign(Object.assign({},me.current),{[e]:t}),ge.current&&ge.current.resetAfterIndex(e)}),[]),Ce=s.useMemo((()=>{const e=Z;return""!==je&&je?e.filter((e=>e.label.toLowerCase().includes(je.toLowerCase()))):e}),[je,Z]),Ne=s.useMemo((()=>{let e=0;return Ce.length>0&&(e=34*Ce.length),e}),[Ce.length,je]);s.useEffect((()=>{const e=null==f?void 0:f.filter((e=>e));(null==e?void 0:e.length)>=be?ye(!0):ye(!1)}),[f,be]);const Be=({data:t,index:r,style:i,windowWidth:o})=>{const c=s.useRef(null);return s.useEffect((()=>{c.current&&ke(r,c.current.getBoundingClientRect().height)}),[c,o]),e.jsx("div",Object.assign({className:x.twMerge(l.default("w-full flex items-center !min-h-[32px]",k,(!!a(k,"p-")||!!a(k,"px-")||!!a(k,"py-"))&&"p-0")),style:Object.assign(Object.assign({},i),{backgroundColor:r%2==0?C||"var(--dropdownList-background-odd)":N||"var(--dropdownList-background-even)"})},{children:e.jsx("div",Object.assign({ref:c,className:"w-full"},{children:e.jsx(u.ListboxOption,Object.assign({className:x.twMerge(l.default("relative cursor-default select-none p-2 bg-transparent list-none",a(k,"p-"),a(k,"px-"),a(k,"py-"))),value:t[r]},{children:({active:s})=>{const a=f.some((e=>e===t[r].value));return e.jsxs("div",Object.assign({className:x.twMerge("flex flex-row items-center gap-x-2 cursor-pointer",ve&&!a?"cursor-not-allowed":""),onClick:e=>{if(e.preventDefault(),ve&&!a)return;let l=f.slice();l=a?l.filter((e=>e!==t[r].value)):l.concat(t[r].value),null==O||O(l.filter((e=>""!==e))),l.length===be?ye(!0):ye(!1)}},{children:[e.jsx(d,{checked:a,variant:"small",color:ie||void 0,isDisabled:ve&&!a}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:t[r].label,className:x.twMerge(l.default("text-xs text-dropdownList-text-default leading-[14px]",`${s&&!ve?x.twMerge("font-semibold text-dropdownList-text-hover",xe):"font-normal"}`),a&&ue,oe)})}))]}))}}),r)}),r)}))};s.useEffect((()=>{re&&re(je)}),[je]),s.useEffect((()=>{re&&re(je)}),[je]),s.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)we(t.contentRect.width)}));return fe.current&&e.observe(fe.current),()=>{fe.current&&e.unobserve(fe.current)}}),[]);const qe=!a(w,"w-")||"w-full"===a(w,"w-")||!a(S,"w-")||"w-full"===a(S,"w-");return e.jsx(u.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({ref:fe,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!m&&e.jsx(n.default,{label:m,className:x.twMerge("font-normal text-dark-gumbo text-[10px]",j)}),ee&&e.jsx(i,{labelRequired:te,labelRequiredStyles:le,containerRequiredStyles:se})]})),e.jsx("div",Object.assign({className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:q,flip:M},{children:[e.jsx(u.ListboxButton,Object.assign({className:x.twMerge(l.default("p-0 bg-transparent",B&&"cursor-not-allowed"),se?a(w,"w-"):void 0),onClick:e=>{B&&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,B&&"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]"),g)})}))]})),""!==f[0]&&e.jsx("div",Object.assign({className:x.twMerge("flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]",U)},{children:e.jsx(n.default,{label:f.length.toString(),className:x.twMerge(l.default("font-normal text-[8px] leading-3"),X)})})),L&&""!==f[0]&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==O||O([]),he(""),ye(!1),null==R||R()}},{children:e.jsx(c,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(c,{name:t?"chevronup":"chevrondown",className:x.twMerge(l.default("fill-dark-bermudaGray w-3 h-3",`${B&&"fill-dark-bermudaGray"}`),y)})]}))})),e.jsx(b.Transition,Object.assign({as:s.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),S),style:{width:qe?pe:void 0,height:"auto",paddingTop:"1px",paddingBottom:"1px"}},{children:({open:t})=>(s.useEffect((()=>{!t&&ce&&he("")}),[t]),e.jsxs(e.Fragment,{children:[D&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:x.twMerge(l.default(x.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",I),t&&A?A:t?"border-fields-border-focus":void 0))},{children:[e.jsx("input",{placeholder:z||"Search",className:x.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",P),onChange:e=>{he(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:je}),e.jsx(c,{name:"search",className:x.twMerge("fill-dark-bermudaGray w-3 h-3",$)})]}))})),e.jsx("div",Object.assign({className:x.twMerge(l.default("p-0 overflow-hidden",a(S,"w-")?a(S,"w-"):a(w,"w-"))),style:{width:qe?pe:void 0}},{children:Ce.length>0?e.jsx(r.VariableSizeList,Object.assign({ref:ge,height:Ne>320?320:Ne,itemCount:Ce.length,itemSize:Se,width:"100%",className:x.twMerge("max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",de),itemData:Ce,style:{height:"auto",paddingTop:"1px",paddingBottom:"1px"}},{children:Be})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(n.default,{label:J||"No Results Found",className:x.twMerge("text-dark-bermudaGray font-normal text-sm",Q)})}))})),H&&e.jsx(o.default,{variant:"tertiary",onClick:()=>{null==W||W()},label:V||"Footer Button",className:x.twMerge("",K)})]}))}))}))]}))})),G&&!T&&e.jsx(n.default,{label:G,className:x.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",_)}),T&&!!E&&e.jsx(n.default,{label:E,className:x.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",F)})]}))}))};
2
2
  //# sourceMappingURL=BaseCheckPicker.js.map
package/build/src/components/CheckPicker/BaseCheckPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseCheckPicker.tsx"],"sourcesContent":["import {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { ListChildComponentProps, VariableSizeList as List } from 'react-window';\nimport { twMerge } from 'tailwind-merge';\n\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { BaseButton } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseCheckPickerDataInterface, BaseCheckPickerInterface } from './BaseCheckPicker.type';\n\ninterface RowProps extends ListChildComponentProps {\n setSize: (index: number, size: number) => void;\n windowWidth: number;\n}\nconst BaseCheckPicker = ({\n value,\n valueStyles,\n label,\n labelStyles,\n placeholder,\n placeholderStyles,\n containerStyles,\n activeContainerStyles,\n iconStyles,\n itemsContainerStyles,\n itemContainerStyles,\n oddBgColor,\n evenBgColor,\n isDisabled = false,\n position = 'bottom-start',\n isAutoFlip,\n onSelectItem,\n onClean,\n isCleanable,\n isError,\n errorMessage,\n errorMessageStyles,\n helperMessage,\n helperMessageStyles,\n isSearchable,\n searchContainerStyles,\n activeSearchStyles,\n searchPlaceholder,\n searchStyles,\n iconSearchStyles,\n isShowFooterButton,\n footerButtonContainerStyles,\n footerButtonLabel,\n onClickFooterButton,\n noResultsLabel,\n noResultsLabelStyles,\n badgeContainerStyles,\n badgeLabelStyles,\n variant = 'box',\n data,\n isRequired,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n onSearch,\n selectedAllText,\n selectedAllTextStyles,\n activeCheckboxColor,\n itemTextStyles,\n listContainerStyles,\n isClearSearchOnClose,\n selectedItemTextStyles,\n activeItemTextStyles,\n maxSelected\n}: BaseCheckPickerInterface) => {\n const rowHeight = 34;\n const dafaultScrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<List>(null);\n const sizeMap = useRef<{ [key: number]: number }>({});\n\n const [search, setSearch] = useState<string>('');\n const [buttonWidth, setButtonWidth] = useState<number>(0);\n const [isDisableSelected, setIsDisableSelected] = useState<boolean>(false);\n\n const getSize = (index: number) => sizeMap.current[index] || 32;\n const setSize = useCallback((index: number, size: number) => {\n sizeMap.current = { ...sizeMap.current, [index]: size };\n if (listRef.current) {\n listRef.current.resetAfterIndex(index);\n }\n }, []);\n\n const dataPicker: Array<BaseCheckPickerDataInterface> = useMemo(() => {\n const temp: Array<BaseCheckPickerDataInterface> = data;\n return search === '' || !search\n ? temp\n : temp.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));\n }, [search, data]);\n\n const dropdownListHeight = useMemo(() => {\n let temp = 0;\n if (dataPicker.length > 0) {\n temp = rowHeight * dataPicker.length;\n }\n return temp;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dataPicker.length, search]);\n\n useEffect(() => {\n const filteredValue = value?.filter((item) => item);\n if (filteredValue?.length >= maxSelected) {\n setIsDisableSelected(true);\n } else {\n setIsDisableSelected(false);\n }\n }, [value, maxSelected]);\n\n // eslint-disable-next-line sonarjs/cognitive-complexity\n const RenderRow: React.FC = ({ data, index, style, windowWidth }: RowProps) => {\n const rowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (rowRef.current) {\n setSize(index, rowRef.current.getBoundingClientRect().height);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rowRef, windowWidth]);\n\n return (\n <div\n className={twMerge(\n classNames(\n 'w-full flex items-center !min-h-[32px]',\n itemContainerStyles,\n (!!extractClasses(itemContainerStyles, 'p-') ||\n !!extractClasses(itemContainerStyles, 'px-') ||\n !!extractClasses(itemContainerStyles, 'py-')) &&\n 'p-0'\n )\n )}\n style={{\n ...style,\n backgroundColor:\n index % 2 === 0\n ? oddBgColor || 'var(--dropdownList-background-odd)'\n : evenBgColor || 'var(--dropdownList-background-even)'\n }}\n >\n <div ref={rowRef} key={index} className='w-full'>\n <ListboxOption\n key={index}\n className={twMerge(\n classNames(\n 'relative cursor-default select-none p-2 bg-transparent list-none',\n extractClasses(itemContainerStyles, 'p-'),\n extractClasses(itemContainerStyles, 'px-'),\n extractClasses(itemContainerStyles, 'py-')\n )\n )}\n value={data[index]}\n >\n {({ active }) => {\n const selected = value.some((i) => i === data[index].value);\n return (\n <div\n className={twMerge(\n 'flex flex-row items-center gap-x-2 cursor-pointer',\n isDisableSelected && !selected ? 'cursor-not-allowed' : ''\n )}\n onClick={(e) => {\n e.preventDefault();\n\n if (isDisableSelected && !selected) return;\n\n let temp = value.slice();\n if (selected) {\n temp = temp.filter((i) => i !== data[index].value);\n } else {\n temp = temp.concat(data[index].value);\n }\n\n onSelectItem?.(temp.filter((i) => i !== ''));\n\n if (temp.length === maxSelected) {\n setIsDisableSelected(true);\n } else {\n setIsDisableSelected(false);\n }\n }}\n >\n <Checkbox\n checked={selected}\n variant='small'\n color={activeCheckboxColor || undefined}\n isDisabled={isDisableSelected && !selected}\n />\n\n <div className='flex flex-1'>\n <BaseText\n label={data[index].label}\n className={twMerge(\n classNames(\n 'text-xs text-dropdownList-text-default leading-[14px]',\n `${\n active && !isDisableSelected\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : 'font-normal'\n }`\n ),\n selected && selectedItemTextStyles,\n itemTextStyles\n )}\n />\n </div>\n </div>\n );\n }}\n </ListboxOption>\n </div>\n </div>\n );\n };\n\n useEffect(() => {\n if (onSearch) onSearch(search);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [search]);\n\n useEffect(() => {\n if (onSearch) onSearch(search);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [search]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setButtonWidth(entry.contentRect.width);\n }\n });\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n resizeObserver.unobserve(containerRef.current);\n }\n };\n }, []);\n\n const isWidthFull =\n !extractClasses(containerStyles, 'w-') ||\n extractClasses(containerStyles, 'w-') === 'w-full' ||\n !extractClasses(itemsContainerStyles, 'w-') ||\n extractClasses(itemsContainerStyles, 'w-') === 'w-full';\n\n return (\n <Listbox multiple>\n <div ref={containerRef} className='flex flex-col gap-y-1'>\n <div className='flex flex-row items-end gap-x-1'>\n {!!label && (\n <BaseText\n label={label}\n className={twMerge('font-normal text-dark-gumbo text-[10px]', labelStyles)}\n />\n )}\n {isRequired && (\n <BaseBadgeRequired\n labelRequired={labelRequired}\n labelRequiredStyles={labelRequiredStyles}\n containerRequiredStyles={containerRequiredStyles}\n />\n )}\n </div>\n <div className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <ListboxButton\n className={twMerge(\n classNames('p-0 bg-transparent', isDisabled && 'cursor-not-allowed'),\n containerRequiredStyles ? extractClasses(containerStyles, 'w-') : undefined\n )}\n onClick={(e) => {\n if (isDisabled) {\n e.preventDefault();\n }\n }}\n >\n {({ open }) => (\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid',\n containerStyles\n ),\n variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n open && activeContainerStyles\n ? activeContainerStyles\n : open\n ? 'border-fields-border-focus'\n : undefined,\n isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n isError && 'border-red-fireEngineRed'\n )\n )}\n >\n <div className='flex flex-1'>\n {!!placeholder && value[0] === '' && (\n <div className='flex flex-1 w-full'>\n <BaseText\n label={placeholder}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]'\n ),\n placeholderStyles\n )}\n />\n </div>\n )}\n\n {value[0] !== '' && (\n <div className='flex flex-1 w-[calc(100%-52px)]'>\n {value.length === data.length ? (\n <BaseText\n label={selectedAllText || 'All'}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n ),\n selectedAllTextStyles\n )}\n />\n ) : (\n <BaseText\n label={data\n .filter((i: BaseCheckPickerDataInterface) => value.includes(i.value))\n .map((i) => i.label)\n .join(', ')}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n ),\n valueStyles\n )}\n />\n )}\n </div>\n )}\n </div>\n\n {value[0] !== '' && (\n <div\n className={twMerge(\n 'flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]',\n badgeContainerStyles\n )}\n >\n <BaseText\n label={value.length.toString()}\n className={twMerge(\n classNames('font-normal text-[8px] leading-3'),\n badgeLabelStyles\n )}\n />\n </div>\n )}\n\n {isCleanable && value[0] !== '' && (\n <div\n className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-1'\n onClick={(e) => {\n e.preventDefault();\n\n onSelectItem?.([]);\n setSearch('');\n setIsDisableSelected(false);\n onClean?.();\n }}\n >\n <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n </div>\n )}\n <Icon\n name={open ? 'chevronup' : 'chevrondown'}\n className={twMerge(\n classNames(\n 'fill-dark-bermudaGray w-3 h-3',\n `${isDisabled && 'fill-dark-bermudaGray'}`\n ),\n iconStyles\n )}\n />\n </div>\n )}\n </ListboxButton>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <ListboxOptions\n className={twMerge(\n classNames(\n 'rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n ),\n itemsContainerStyles\n )}\n style={{ width: isWidthFull ? buttonWidth : undefined }}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open }) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (!open && isClearSearchOnClose) setSearch('');\n }, [open]);\n\n return (\n <>\n {isSearchable && (\n <div className='p-2 bg-light-whiteSolid w-full'>\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1',\n searchContainerStyles\n ),\n open && activeSearchStyles\n ? activeSearchStyles\n : open\n ? 'border-fields-border-focus'\n : undefined\n )\n )}\n >\n <input\n placeholder={searchPlaceholder || 'Search'}\n className={twMerge(\n 'flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs',\n searchStyles\n )}\n onChange={(e) => {\n setSearch(e.target.value);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n value={search}\n />\n <Icon\n name='search'\n className={twMerge('fill-dark-bermudaGray w-3 h-3', iconSearchStyles)}\n />\n </div>\n </div>\n )}\n <div\n className={twMerge(\n classNames(\n 'p-0 overflow-hidden',\n extractClasses(itemsContainerStyles, 'w-')\n ? extractClasses(itemsContainerStyles, 'w-')\n : extractClasses(containerStyles, 'w-')\n )\n )}\n style={{ width: isWidthFull ? buttonWidth : undefined }}\n >\n {dataPicker.length > 0 ? (\n <List\n ref={listRef}\n height={dropdownListHeight > 320 ? 320 : dropdownListHeight}\n itemCount={dataPicker.length}\n itemSize={getSize}\n width={'100%'}\n className={twMerge(\n `max-h-80 ${dafaultScrollbarStyles}`,\n listContainerStyles\n )}\n itemData={dataPicker}\n >\n {RenderRow}\n </List>\n ) : (\n <div className='py-2 px-4 w-full'>\n <BaseText\n label={noResultsLabel || 'No Results Found'}\n className={twMerge(\n 'text-dark-bermudaGray font-normal text-sm',\n noResultsLabelStyles\n )}\n />\n </div>\n )}\n </div>\n {isShowFooterButton && (\n <BaseButton\n variant='tertiary'\n onClick={() => {\n onClickFooterButton?.();\n }}\n label={footerButtonLabel || 'Footer Button'}\n className={twMerge('', footerButtonContainerStyles)}\n />\n )}\n </>\n );\n }}\n </ListboxOptions>\n </Transition>\n </Float>\n </div>\n\n {helperMessage && !isError && (\n <BaseText\n label={helperMessage}\n className={twMerge(\n 'font-normal text-dark-bermudaGray text-[10px] inline-block',\n helperMessageStyles\n )}\n />\n )}\n\n {isError && !!errorMessage && (\n <BaseText\n label={errorMessage}\n className={twMerge(\n 'font-normal text-red-fireEngineRed text-[10px] inline-block',\n errorMessageStyles\n )}\n />\n )}\n </div>\n </Listbox>\n );\n};\n\nexport default BaseCheckPicker;\n"],"names":["value","valueStyles","label","labelStyles","placeholder","placeholderStyles","containerStyles","activeContainerStyles","iconStyles","itemsContainerStyles","itemContainerStyles","oddBgColor","evenBgColor","isDisabled","position","isAutoFlip","onSelectItem","onClean","isCleanable","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isSearchable","searchContainerStyles","activeSearchStyles","searchPlaceholder","searchStyles","iconSearchStyles","isShowFooterButton","footerButtonContainerStyles","footerButtonLabel","onClickFooterButton","noResultsLabel","noResultsLabelStyles","badgeContainerStyles","badgeLabelStyles","variant","data","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","selectedAllText","selectedAllTextStyles","activeCheckboxColor","itemTextStyles","listContainerStyles","isClearSearchOnClose","selectedItemTextStyles","activeItemTextStyles","maxSelected","containerRef","useRef","listRef","sizeMap","search","setSearch","useState","buttonWidth","setButtonWidth","isDisableSelected","setIsDisableSelected","getSize","index","current","setSize","useCallback","size","Object","assign","resetAfterIndex","dataPicker","useMemo","temp","filter","item","toLowerCase","includes","dropdownListHeight","length","useEffect","filteredValue","RenderRow","style","windowWidth","rowRef","getBoundingClientRect","height","_jsx","className","twMerge","classNames","extractClasses","backgroundColor","children","ref","ListboxOption","active","selected","some","i","_jsxs","onClick","e","preventDefault","slice","concat","jsx","Checkbox","checked","color","undefined","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","unobserve","isWidthFull","Listbox","multiple","jsxs","BaseBadgeRequired","Float","placement","flip","ListboxButton","open","map","join","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","_Fragment","onChange","target","onKeyDown","stopPropagation","List","itemCount","itemSize","itemData","BaseButton"],"mappings":"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"}
1
+ {"version":3,"file":"BaseCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseCheckPicker.tsx"],"sourcesContent":["import {\n Listbox,\n ListboxButton,\n ListboxOption,\n ListboxOptions,\n Transition\n} from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { ListChildComponentProps, VariableSizeList as List } from 'react-window';\nimport { twMerge } from 'tailwind-merge';\n\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { BaseButton } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseCheckPickerDataInterface, BaseCheckPickerInterface } from './BaseCheckPicker.type';\n\ninterface RowProps extends ListChildComponentProps {\n setSize: (index: number, size: number) => void;\n windowWidth: number;\n}\nconst BaseCheckPicker = ({\n value,\n valueStyles,\n label,\n labelStyles,\n placeholder,\n placeholderStyles,\n containerStyles,\n activeContainerStyles,\n iconStyles,\n itemsContainerStyles,\n itemContainerStyles,\n oddBgColor,\n evenBgColor,\n isDisabled = false,\n position = 'bottom-start',\n isAutoFlip,\n onSelectItem,\n onClean,\n isCleanable,\n isError,\n errorMessage,\n errorMessageStyles,\n helperMessage,\n helperMessageStyles,\n isSearchable,\n searchContainerStyles,\n activeSearchStyles,\n searchPlaceholder,\n searchStyles,\n iconSearchStyles,\n isShowFooterButton,\n footerButtonContainerStyles,\n footerButtonLabel,\n onClickFooterButton,\n noResultsLabel,\n noResultsLabelStyles,\n badgeContainerStyles,\n badgeLabelStyles,\n variant = 'box',\n data,\n isRequired,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n onSearch,\n selectedAllText,\n selectedAllTextStyles,\n activeCheckboxColor,\n itemTextStyles,\n listContainerStyles,\n isClearSearchOnClose,\n selectedItemTextStyles,\n activeItemTextStyles,\n maxSelected\n}: BaseCheckPickerInterface) => {\n const rowHeight = 34;\n const dafaultScrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<List>(null);\n const sizeMap = useRef<{ [key: number]: number }>({});\n\n const [search, setSearch] = useState<string>('');\n const [buttonWidth, setButtonWidth] = useState<number>(0);\n const [isDisableSelected, setIsDisableSelected] = useState<boolean>(false);\n\n const getSize = (index: number) => sizeMap.current[index] || 32;\n const setSize = useCallback((index: number, size: number) => {\n sizeMap.current = { ...sizeMap.current, [index]: size };\n if (listRef.current) {\n listRef.current.resetAfterIndex(index);\n }\n }, []);\n\n const dataPicker: Array<BaseCheckPickerDataInterface> = useMemo(() => {\n const temp: Array<BaseCheckPickerDataInterface> = data;\n return search === '' || !search\n ? temp\n : temp.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));\n }, [search, data]);\n\n const dropdownListHeight = useMemo(() => {\n let temp = 0;\n if (dataPicker.length > 0) {\n temp = rowHeight * dataPicker.length;\n }\n return temp;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [dataPicker.length, search]);\n\n useEffect(() => {\n const filteredValue = value?.filter((item) => item);\n if (filteredValue?.length >= maxSelected) {\n setIsDisableSelected(true);\n } else {\n setIsDisableSelected(false);\n }\n }, [value, maxSelected]);\n\n // eslint-disable-next-line sonarjs/cognitive-complexity\n const RenderRow: React.FC = ({ data, index, style, windowWidth }: RowProps) => {\n const rowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (rowRef.current) {\n setSize(index, rowRef.current.getBoundingClientRect().height);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rowRef, windowWidth]);\n\n return (\n <div\n className={twMerge(\n classNames(\n 'w-full flex items-center !min-h-[32px]',\n itemContainerStyles,\n (!!extractClasses(itemContainerStyles, 'p-') ||\n !!extractClasses(itemContainerStyles, 'px-') ||\n !!extractClasses(itemContainerStyles, 'py-')) &&\n 'p-0'\n )\n )}\n style={{\n ...style,\n backgroundColor:\n index % 2 === 0\n ? oddBgColor || 'var(--dropdownList-background-odd)'\n : evenBgColor || 'var(--dropdownList-background-even)'\n }}\n >\n <div ref={rowRef} key={index} className='w-full'>\n <ListboxOption\n key={index}\n className={twMerge(\n classNames(\n 'relative cursor-default select-none p-2 bg-transparent list-none',\n extractClasses(itemContainerStyles, 'p-'),\n extractClasses(itemContainerStyles, 'px-'),\n extractClasses(itemContainerStyles, 'py-')\n )\n )}\n value={data[index]}\n >\n {({ active }) => {\n const selected = value.some((i) => i === data[index].value);\n return (\n <div\n className={twMerge(\n 'flex flex-row items-center gap-x-2 cursor-pointer',\n isDisableSelected && !selected ? 'cursor-not-allowed' : ''\n )}\n onClick={(e) => {\n e.preventDefault();\n\n if (isDisableSelected && !selected) return;\n\n let temp = value.slice();\n if (selected) {\n temp = temp.filter((i) => i !== data[index].value);\n } else {\n temp = temp.concat(data[index].value);\n }\n\n onSelectItem?.(temp.filter((i) => i !== ''));\n\n if (temp.length === maxSelected) {\n setIsDisableSelected(true);\n } else {\n setIsDisableSelected(false);\n }\n }}\n >\n <Checkbox\n checked={selected}\n variant='small'\n color={activeCheckboxColor || undefined}\n isDisabled={isDisableSelected && !selected}\n />\n\n <div className='flex flex-1'>\n <BaseText\n label={data[index].label}\n className={twMerge(\n classNames(\n 'text-xs text-dropdownList-text-default leading-[14px]',\n `${\n active && !isDisableSelected\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : 'font-normal'\n }`\n ),\n selected && selectedItemTextStyles,\n itemTextStyles\n )}\n />\n </div>\n </div>\n );\n }}\n </ListboxOption>\n </div>\n </div>\n );\n };\n\n useEffect(() => {\n if (onSearch) onSearch(search);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [search]);\n\n useEffect(() => {\n if (onSearch) onSearch(search);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [search]);\n\n useEffect(() => {\n const resizeObserver = new ResizeObserver((entries) => {\n for (const entry of entries) {\n setButtonWidth(entry.contentRect.width);\n }\n });\n\n if (containerRef.current) {\n resizeObserver.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n resizeObserver.unobserve(containerRef.current);\n }\n };\n }, []);\n\n const isWidthFull =\n !extractClasses(containerStyles, 'w-') ||\n extractClasses(containerStyles, 'w-') === 'w-full' ||\n !extractClasses(itemsContainerStyles, 'w-') ||\n extractClasses(itemsContainerStyles, 'w-') === 'w-full';\n\n return (\n <Listbox multiple>\n <div ref={containerRef} className='flex flex-col gap-y-1'>\n <div className='flex flex-row items-end gap-x-1'>\n {!!label && (\n <BaseText\n label={label}\n className={twMerge('font-normal text-dark-gumbo text-[10px]', labelStyles)}\n />\n )}\n {isRequired && (\n <BaseBadgeRequired\n labelRequired={labelRequired}\n labelRequiredStyles={labelRequiredStyles}\n containerRequiredStyles={containerRequiredStyles}\n />\n )}\n </div>\n <div className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <ListboxButton\n className={twMerge(\n classNames('p-0 bg-transparent', isDisabled && 'cursor-not-allowed'),\n containerRequiredStyles ? extractClasses(containerStyles, 'w-') : undefined\n )}\n onClick={(e) => {\n if (isDisabled) {\n e.preventDefault();\n }\n }}\n >\n {({ open }) => (\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid',\n containerStyles\n ),\n variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n open && activeContainerStyles\n ? activeContainerStyles\n : open\n ? 'border-fields-border-focus'\n : undefined,\n isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n isError && 'border-red-fireEngineRed'\n )\n )}\n >\n <div className='flex flex-1'>\n {!!placeholder && value[0] === '' && (\n <div className='flex flex-1 w-full'>\n <BaseText\n label={placeholder}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]'\n ),\n placeholderStyles\n )}\n />\n </div>\n )}\n\n {value[0] !== '' && (\n <div className='flex flex-1 w-[calc(100%-52px)]'>\n {value.length === data.length ? (\n <BaseText\n label={selectedAllText || 'All'}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n ),\n selectedAllTextStyles\n )}\n />\n ) : (\n <BaseText\n label={data\n .filter((i: BaseCheckPickerDataInterface) => value.includes(i.value))\n .map((i) => i.label)\n .join(', ')}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full leading-[14px]'\n ),\n valueStyles\n )}\n />\n )}\n </div>\n )}\n </div>\n\n {value[0] !== '' && (\n <div\n className={twMerge(\n 'flex flex-row justify-center w-3 h-3 bg-fields-badge-background-default text-fields-badge-text-default rounded-full pt-[1px] pl-[0.5px]',\n badgeContainerStyles\n )}\n >\n <BaseText\n label={value.length.toString()}\n className={twMerge(\n classNames('font-normal text-[8px] leading-3'),\n badgeLabelStyles\n )}\n />\n </div>\n )}\n\n {isCleanable && value[0] !== '' && (\n <div\n className='cursor-pointer h-3 w-3 flex items-center justify-center -mr-1'\n onClick={(e) => {\n e.preventDefault();\n\n onSelectItem?.([]);\n setSearch('');\n setIsDisableSelected(false);\n onClean?.();\n }}\n >\n <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n </div>\n )}\n <Icon\n name={open ? 'chevronup' : 'chevrondown'}\n className={twMerge(\n classNames(\n 'fill-dark-bermudaGray w-3 h-3',\n `${isDisabled && 'fill-dark-bermudaGray'}`\n ),\n iconStyles\n )}\n />\n </div>\n )}\n </ListboxButton>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <ListboxOptions\n className={twMerge(\n classNames(\n 'rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n ),\n itemsContainerStyles\n )}\n style={{\n width: isWidthFull ? buttonWidth : undefined,\n height: 'auto',\n paddingTop: '1px',\n paddingBottom: '1px'\n }}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open }) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (!open && isClearSearchOnClose) setSearch('');\n }, [open]);\n\n 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 style={{\n height: 'auto',\n paddingTop: '1px',\n paddingBottom: '1px'\n }}\n >\n {RenderRow}\n </List>\n ) : (\n <div className='py-2 px-4 w-full'>\n <BaseText\n label={noResultsLabel || 'No Results Found'}\n className={twMerge(\n 'text-dark-bermudaGray font-normal text-sm',\n noResultsLabelStyles\n )}\n />\n </div>\n )}\n </div>\n {isShowFooterButton && (\n <BaseButton\n variant='tertiary'\n onClick={() => {\n onClickFooterButton?.();\n }}\n label={footerButtonLabel || 'Footer Button'}\n className={twMerge('', footerButtonContainerStyles)}\n />\n )}\n </>\n );\n }}\n </ListboxOptions>\n </Transition>\n </Float>\n </div>\n\n {helperMessage && !isError && (\n <BaseText\n label={helperMessage}\n className={twMerge(\n 'font-normal text-dark-bermudaGray text-[10px] inline-block',\n helperMessageStyles\n )}\n />\n )}\n\n {isError && !!errorMessage && (\n <BaseText\n label={errorMessage}\n className={twMerge(\n 'font-normal text-red-fireEngineRed text-[10px] inline-block',\n errorMessageStyles\n )}\n />\n )}\n </div>\n </Listbox>\n );\n};\n\nexport default BaseCheckPicker;\n"],"names":["value","valueStyles","label","labelStyles","placeholder","placeholderStyles","containerStyles","activeContainerStyles","iconStyles","itemsContainerStyles","itemContainerStyles","oddBgColor","evenBgColor","isDisabled","position","isAutoFlip","onSelectItem","onClean","isCleanable","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isSearchable","searchContainerStyles","activeSearchStyles","searchPlaceholder","searchStyles","iconSearchStyles","isShowFooterButton","footerButtonContainerStyles","footerButtonLabel","onClickFooterButton","noResultsLabel","noResultsLabelStyles","badgeContainerStyles","badgeLabelStyles","variant","data","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","selectedAllText","selectedAllTextStyles","activeCheckboxColor","itemTextStyles","listContainerStyles","isClearSearchOnClose","selectedItemTextStyles","activeItemTextStyles","maxSelected","containerRef","useRef","listRef","sizeMap","search","setSearch","useState","buttonWidth","setButtonWidth","isDisableSelected","setIsDisableSelected","getSize","index","current","setSize","useCallback","size","Object","assign","resetAfterIndex","dataPicker","useMemo","temp","filter","item","toLowerCase","includes","dropdownListHeight","length","useEffect","filteredValue","RenderRow","style","windowWidth","rowRef","getBoundingClientRect","height","_jsx","className","twMerge","classNames","extractClasses","backgroundColor","children","ref","ListboxOption","active","selected","some","i","_jsxs","onClick","e","preventDefault","slice","concat","jsx","Checkbox","checked","color","undefined","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","unobserve","isWidthFull","Listbox","multiple","jsxs","BaseBadgeRequired","Float","placement","flip","ListboxButton","open","map","join","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","ListboxOptions","paddingTop","paddingBottom","_Fragment","onChange","target","onKeyDown","stopPropagation","List","itemCount","itemSize","itemData","BaseButton"],"mappings":"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"}
package/build/src/components/SelectPicker/BaseSelectPicker.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),r=require("../../../node_modules/classnames/index.js"),l=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 o=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var i=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("../Icon/Icon.js"),u=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),c=require("../../../node_modules/@headlessui/react/dist/components/menu/menu.js");module.exports=({label:b,labelStyles:x,value:f,valueStyles:m,placeholder:g,placeholderStyles:j,containerStyles:h,activeContainerStyles:w,iconStyles:p,itemsContainerStyles:v,itemContainerStyles:y,oddBgColor:k,evenBgColor:S,isDisabled:C=!1,position:M="bottom-start",isAutoFlip:B,onSelectItem:q,onClean:N,isCleanable:O,isError:R,errorMessage:L,errorMessageStyles:G,helperMessage:I,helperMessageStyles:E,isSearchable:F,searchContainerStyles:_,activeSearchStyles:T,searchPlaceholder:P,searchStyles:z,iconSearchStyles:D,isShowFooterButton:A,footerButtonContainerStyles:$,footerButtonLabel:H,onClickFooterButton:K,noResultsLabel:V,noResultsLabelStyles:W,variant:J="box",data:Q,isRequired:U,labelRequired:X,labelRequiredStyles:Y,containerRequiredStyles:Z,onSearch:ee,itemTextStyles:te,listContainerStyles:re,isClearSearchOnClose:le,activeItemTextStyles:se})=>{const ae=l.useRef(null),ne=l.useRef(null),oe=l.useRef({}),[ie,de]=l.useState(""),[ue,ce]=l.useState(0),[be,xe]=l.useState(!1),fe=e=>oe.current[e]||32,me=l.useCallback(((e,t)=>{oe.current=Object.assign(Object.assign({},oe.current),{[e]:t}),ne.current&&ne.current.resetAfterIndex(e)}),[]),ge=l.useMemo((()=>{const e=Q;return""!==ie&&ie?e.filter((e=>e.label.toLowerCase().includes(ie.toLowerCase()))):e}),[ie,Q]),je=l.useMemo((()=>{let e=0;return ge.length>0&&(e=32*ge.length),e}),[ge.length,ie]),he=({data:t,index:s,style:o,windowWidth:i})=>{const d=l.useRef(null);return l.useEffect((()=>{d.current&&me(s,d.current.getBoundingClientRect().height)}),[d,i]),e.jsx("div",Object.assign({className:u.twMerge(r.default("w-full items-center !min-h-[32px]",y,(!!a(y,"p-")||!!a(y,"px-")||!!a(y,"py-"))&&"p-0")),style:Object.assign(Object.assign({},o),{backgroundColor:s%2==0?k||"var(--dropdownList-background-odd)":S||"var(--dropdownList-background-even)"})},{children:e.jsx(c.MenuItem,Object.assign({as:"div",ref:d},{children:({active:l})=>e.jsx("button",Object.assign({className:u.twMerge(r.default("bg-transparent py-2 px-4 flex justify-start w-full",a(y,"p-"),a(y,"px-"),a(y,"py-"))),style:{backgroundColor:s%2==0?k||"var(--dropdownList-background-odd)":S||"var(--dropdownList-background-even)"},onClick:()=>{null==q||q(t[s])}},{children:e.jsx(n.default,{label:t[s].label,variant:"small",className:u.twMerge(r.default("text-dropdownList-text-default w-full text-left",`${l?u.twMerge("font-semibold text-dropdownList-text-hover",se):"font-normal"}`),te)})}))}),s)}))};l.useEffect((()=>{ee&&ee(ie)}),[ie]),l.useEffect((()=>{!be&&le&&de("")}),[le,be]),l.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)ce(t.contentRect.width)}));return ae.current&&e.observe(ae.current),()=>{ae.current&&e.unobserve(ae.current)}}),[]);const we=!a(h,"w-")||"w-full"===a(h,"w-")||!a(v,"w-")||"w-full"===a(v,"w-");return e.jsxs("div",Object.assign({ref:ae,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!b&&e.jsx(n.default,{label:b,className:u.twMerge("font-normal text-dark-gumbo text-[10px]",x)}),U&&e.jsx(o,{labelRequired:X,labelRequiredStyles:Y,containerRequiredStyles:Z})]})),e.jsx(c.Menu,Object.assign({as:"div",className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:M,flip:B},{children:[e.jsx(c.MenuButton,Object.assign({className:u.twMerge("p-0 bg-transparent",h?a(h,"w-"):void 0),onClick:e=>{e.stopPropagation()},disabled:C},{children:({open:t})=>{var l;return e.jsxs("div",Object.assign({className:u.twMerge(r.default(u.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",h),"line"===J&&"border-b border-t-0 border-x-0 rounded-none",t&&w?w:t?"border-fields-border-focus":void 0,C&&"border-dark-bermudaGray bg-light-whiteSmoke",R&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!g&&!f&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:g,variant:"small",className:u.twMerge(r.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),j)})})),!!f&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:null===(l=Q.filter((e=>e.value===f))[0])||void 0===l?void 0:l.label,variant:"small",className:u.twMerge(r.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]"),m)})}))]})),O&&!!f&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center",onClick:e=>{e.preventDefault(),null==q||q({value:"",label:""}),de(""),null==N||N()}},{children:e.jsx(d,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(d,{name:t?"chevronup":"chevrondown",className:u.twMerge(r.default("fill-dark-bermudaGray w-3 h-3",`${C&&"fill-dark-bermudaGray"}`),p)})]}))}})),e.jsx(c.MenuItems,Object.assign({static:!0,transition:!0,className:u.twMerge(r.default("transition ease-in duration-100 data-closed:opacity-0 rounded w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver z-50",h?a(h,"w-"):void 0),v),style:{width:we?ue:void 0}},{children:({open:t})=>(t!==be&&xe(t),e.jsxs(e.Fragment,{children:[F&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full",onClick:e=>e.stopPropagation()},{children:e.jsxs("div",Object.assign({className:u.twMerge(r.default(u.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",_),t&&T?T:t?"border-fields-border-focus":void 0)),onClick:e=>e.stopPropagation()},{children:[e.jsx("input",{type:"text",placeholder:P||"Search",className:u.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",z),onChange:e=>{de(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:ie}),e.jsx(d,{name:"search",className:u.twMerge("fill-dark-bermudaGray w-3 h-3",D)})]}))})),e.jsx("div",Object.assign({className:u.twMerge(r.default("p-0 overflow-hidden",a(v,"w-")?a(v,"w-"):a(h,"w-"))),style:{width:we?ue:void 0}},{children:ge.length>0?e.jsx(s.VariableSizeList,Object.assign({ref:ne,height:je>320?320:je,itemCount:ge.length,itemSize:fe,width:"100%",className:u.twMerge("max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",re),itemData:ge},{children:he})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(n.default,{label:V||"No Results Found",className:u.twMerge("text-dark-bermudaGray font-normal text-sm",W)})}))})),A&&e.jsx(i.default,{variant:"tertiary",onClick:()=>{null==K||K()},label:H||"Footer Button",className:u.twMerge("",$)})]}))}))]}))})),I&&!R&&e.jsx(n.default,{label:I,className:u.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",E)}),R&&!!L&&e.jsx(n.default,{label:L,className:u.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",G)})]}))};
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),r=require("../../../node_modules/classnames/index.js"),l=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 o=require("../Badge/BaseBadgeRequired.js");require("../Button/ButtonHyperlink.js");var i=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("../Icon/Icon.js"),u=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),c=require("../../../node_modules/@headlessui/react/dist/components/menu/menu.js");module.exports=({label:b,labelStyles:x,value:g,valueStyles:m,placeholder:f,placeholderStyles:j,containerStyles:h,activeContainerStyles:p,iconStyles:w,itemsContainerStyles:v,itemContainerStyles:y,oddBgColor:k,evenBgColor:S,isDisabled:C=!1,position:B="bottom-start",isAutoFlip:M,onSelectItem:q,onClean:N,isCleanable:O,isError:R,errorMessage:L,errorMessageStyles:G,helperMessage:I,helperMessageStyles:E,isSearchable:F,searchContainerStyles:T,activeSearchStyles:_,searchPlaceholder:P,searchStyles:z,iconSearchStyles:D,isShowFooterButton:A,footerButtonContainerStyles:$,footerButtonLabel:H,onClickFooterButton:K,noResultsLabel:V,noResultsLabelStyles:W,variant:J="box",data:Q,isRequired:U,labelRequired:X,labelRequiredStyles:Y,containerRequiredStyles:Z,onSearch:ee,itemTextStyles:te,listContainerStyles:re,isClearSearchOnClose:le,activeItemTextStyles:se})=>{const ae=l.useRef(null),ne=l.useRef(null),oe=l.useRef({}),[ie,de]=l.useState(""),[ue,ce]=l.useState(0),[be,xe]=l.useState(!1),ge=e=>oe.current[e]||32,me=l.useCallback(((e,t)=>{oe.current=Object.assign(Object.assign({},oe.current),{[e]:t}),ne.current&&ne.current.resetAfterIndex(e)}),[]),fe=l.useMemo((()=>{const e=Q;return""!==ie&&ie?e.filter((e=>e.label.toLowerCase().includes(ie.toLowerCase()))):e}),[ie,Q]),je=l.useMemo((()=>{let e=0;return fe.length>0&&(e=32*fe.length),e}),[fe.length,ie]),he=({data:t,index:s,style:o,windowWidth:i})=>{const d=l.useRef(null);return l.useEffect((()=>{d.current&&me(s,d.current.getBoundingClientRect().height)}),[d,i]),e.jsx("div",Object.assign({className:u.twMerge(r.default("w-full items-center !min-h-[32px]",y,(!!a(y,"p-")||!!a(y,"px-")||!!a(y,"py-"))&&"p-0")),style:Object.assign(Object.assign({},o),{backgroundColor:s%2==0?k||"var(--dropdownList-background-odd)":S||"var(--dropdownList-background-even)"})},{children:e.jsx(c.MenuItem,Object.assign({as:"div",ref:d},{children:({active:l})=>e.jsx("button",Object.assign({className:u.twMerge(r.default("bg-transparent py-2 px-4 flex justify-start w-full",a(y,"p-"),a(y,"px-"),a(y,"py-"))),style:{backgroundColor:s%2==0?k||"var(--dropdownList-background-odd)":S||"var(--dropdownList-background-even)"},onClick:()=>{null==q||q(t[s])}},{children:e.jsx(n.default,{label:t[s].label,variant:"small",className:u.twMerge(r.default("text-dropdownList-text-default w-full text-left",`${l?u.twMerge("font-semibold text-dropdownList-text-hover",se):"font-normal"}`),te)})}))}),s)}))};l.useEffect((()=>{ee&&ee(ie)}),[ie]),l.useEffect((()=>{!be&&le&&de("")}),[le,be]),l.useEffect((()=>{const e=new ResizeObserver((e=>{for(const t of e)ce(t.contentRect.width)}));return ae.current&&e.observe(ae.current),()=>{ae.current&&e.unobserve(ae.current)}}),[]);const pe=!a(h,"w-")||"w-full"===a(h,"w-")||!a(v,"w-")||"w-full"===a(v,"w-");return e.jsxs("div",Object.assign({ref:ae,className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!b&&e.jsx(n.default,{label:b,className:u.twMerge("font-normal text-dark-gumbo text-[10px]",x)}),U&&e.jsx(o,{labelRequired:X,labelRequiredStyles:Y,containerRequiredStyles:Z})]})),e.jsx(c.Menu,Object.assign({as:"div",className:"relative inline-block"},{children:e.jsxs(t.Float,Object.assign({placement:B,flip:M},{children:[e.jsx(c.MenuButton,Object.assign({className:u.twMerge("p-0 bg-transparent",h?a(h,"w-"):void 0),onClick:e=>{e.stopPropagation()},disabled:C},{children:({open:t})=>{var l;return e.jsxs("div",Object.assign({className:u.twMerge(r.default(u.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",h),"line"===J&&"border-b border-t-0 border-x-0 rounded-none",t&&p?p:t?"border-fields-border-focus":void 0,C&&"border-dark-bermudaGray bg-light-whiteSmoke",R&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!f&&!g&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:f,variant:"small",className:u.twMerge(r.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1 leading-[14px]"),j)})})),!!g&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:null===(l=Q.filter((e=>e.value===g))[0])||void 0===l?void 0:l.label,variant:"small",className:u.twMerge(r.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 leading-[14px]"),m)})}))]})),O&&!!g&&e.jsx("div",Object.assign({className:"cursor-pointer h-3 w-3 flex items-center justify-center",onClick:e=>{e.preventDefault(),null==q||q({value:"",label:""}),de(""),null==N||N()}},{children:e.jsx(d,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(d,{name:t?"chevronup":"chevrondown",className:u.twMerge(r.default("fill-dark-bermudaGray w-3 h-3",`${C&&"fill-dark-bermudaGray"}`),w)})]}))}})),e.jsx(c.MenuItems,Object.assign({static:!0,transition:!0,className:u.twMerge(r.default("transition ease-in duration-100 data-closed:opacity-0 rounded w-full bg-white flex flex-col overflow-hidden border border-solid border-dark-silver z-50",h?a(h,"w-"):void 0),v),style:{width:pe?ue:void 0}},{children:({open:t})=>(t!==be&&xe(t),e.jsxs(e.Fragment,{children:[F&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full",onClick:e=>e.stopPropagation()},{children:e.jsxs("div",Object.assign({className:u.twMerge(r.default(u.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",T),t&&_?_:t?"border-fields-border-focus":void 0)),onClick:e=>e.stopPropagation()},{children:[e.jsx("input",{type:"text",placeholder:P||"Search",className:u.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",z),onChange:e=>{de(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:ie}),e.jsx(d,{name:"search",className:u.twMerge("fill-dark-bermudaGray w-3 h-3",D)})]}))})),e.jsx("div",Object.assign({className:u.twMerge(r.default("p-0 overflow-hidden",a(v,"w-")?a(v,"w-"):a(h,"w-"))),style:{width:pe?ue:void 0}},{children:fe.length>0?e.jsx(s.VariableSizeList,Object.assign({ref:ne,height:je>320?320:je,itemCount:fe.length,itemSize:ge,width:"100%",className:u.twMerge("max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude",re),itemData:fe,style:{height:"auto",paddingTop:"1px",paddingBottom:"1px"}},{children:he})):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(n.default,{label:V||"No Results Found",className:u.twMerge("text-dark-bermudaGray font-normal text-sm",W)})}))})),A&&e.jsx(i.default,{variant:"tertiary",onClick:()=>{null==K||K()},label:H||"Footer Button",className:u.twMerge("",$)})]}))}))]}))})),I&&!R&&e.jsx(n.default,{label:I,className:u.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",E)}),R&&!!L&&e.jsx(n.default,{label:L,className:u.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",G)})]}))};
2
2
  //# sourceMappingURL=BaseSelectPicker.js.map
package/build/src/components/SelectPicker/BaseSelectPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseSelectPicker.js","sources":["../../../../src/components/SelectPicker/BaseSelectPicker.tsx"],"sourcesContent":["import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport React, { 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 { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseSelectPickerDataInterface, BaseSelectPickerInterface } from './BaseSelectPicker.type';\n\ninterface RowProps extends ListChildComponentProps {\n setSize: (index: number, size: number) => void;\n windowWidth: number;\n}\n\nconst BaseSelectPicker = ({\n label,\n labelStyles,\n value,\n valueStyles,\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 variant = 'box',\n data,\n isRequired,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n onSearch,\n itemTextStyles,\n listContainerStyles,\n isClearSearchOnClose,\n activeItemTextStyles\n}: BaseSelectPickerInterface) => {\n const rowHeight = 32;\n const dafaultScrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<List>(null);\n const sizeMap = useRef<{ [key: number]: number }>({});\n\n const [search, setSearch] = useState<string>('');\n const [buttonWidth, setButtonWidth] = useState<number>(0);\n const [isMenuItemsOpen, setIsMenuItemOpen] = useState(false);\n\n const getSize = (index: number) => sizeMap.current[index] || 32;\n const setSize = useCallback((index: number, size: number) => {\n sizeMap.current = { ...sizeMap.current, [index]: size };\n if (listRef.current) {\n listRef.current.resetAfterIndex(index);\n }\n }, []);\n\n const dataPicker: Array<BaseSelectPickerDataInterface> = useMemo(() => {\n const temp: Array<BaseSelectPickerDataInterface> = 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 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 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 <MenuItem as='div' ref={rowRef} key={index}>\n {({ active }) => {\n return (\n <button\n className={twMerge(\n classNames(\n 'bg-transparent py-2 px-4 flex justify-start w-full',\n extractClasses(itemContainerStyles, 'p-'),\n extractClasses(itemContainerStyles, 'px-'),\n extractClasses(itemContainerStyles, 'py-')\n )\n )}\n style={{\n backgroundColor:\n index % 2 === 0\n ? oddBgColor || 'var(--dropdownList-background-odd)'\n : evenBgColor || 'var(--dropdownList-background-even)'\n }}\n onClick={() => {\n onSelectItem?.(data[index]);\n }}\n >\n <BaseText\n label={data[index].label}\n variant='small'\n className={twMerge(\n classNames(\n 'text-dropdownList-text-default w-full text-left',\n `${\n active\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : 'font-normal'\n }`\n ),\n itemTextStyles\n )}\n />\n </button>\n );\n }}\n </MenuItem>\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 (!isMenuItemsOpen && isClearSearchOnClose) {\n setSearch('');\n }\n }, [isClearSearchOnClose, isMenuItemsOpen]);\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 <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 <Menu as='div' className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <MenuButton\n className={twMerge(\n 'p-0 bg-transparent',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n )}\n onClick={(e) => {\n e.stopPropagation();\n }}\n disabled={isDisabled}\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 && (\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={\n data.filter(\n (item: BaseSelectPickerDataInterface) => item.value === value\n )[0]?.label\n }\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'\n onClick={(e) => {\n e.preventDefault();\n\n onSelectItem?.({ value: '', label: '' });\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 </MenuButton>\n\n <MenuItems\n static\n transition\n className={twMerge(\n classNames(\n 'transition ease-in duration-100 data-closed:opacity-0 rounded w-full bg-white 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 if (open !== isMenuItemsOpen) {\n setIsMenuItemOpen(open);\n }\n\n return (\n <>\n {isSearchable && (\n <div\n className='p-2 bg-light-whiteSolid w-full'\n onClick={(e) => e.stopPropagation()}\n >\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 onClick={(e) => e.stopPropagation()}\n >\n <input\n type='text'\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 </MenuItems>\n </Float>\n </Menu>\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 BaseSelectPicker;\n"],"names":["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","containerRef","useRef","listRef","sizeMap","search","setSearch","useState","buttonWidth","setButtonWidth","isMenuItemsOpen","setIsMenuItemOpen","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","jsx","MenuItem","as","ref","children","active","onClick","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","unobserve","isWidthFull","_jsxs","jsxs","BaseBadgeRequired","Menu","Float","placement","flip","MenuButton","undefined","e","stopPropagation","disabled","open","_a","preventDefault","Icon","name","MenuItems","static","transition","_Fragment","type","onChange","target","onKeyDown","List","itemCount","itemSize","itemData","BaseButton"],"mappings":"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"}
1
+ {"version":3,"file":"BaseSelectPicker.js","sources":["../../../../src/components/SelectPicker/BaseSelectPicker.tsx"],"sourcesContent":["import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport React, { 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 { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport { BaseSelectPickerDataInterface, BaseSelectPickerInterface } from './BaseSelectPicker.type';\n\ninterface RowProps extends ListChildComponentProps {\n setSize: (index: number, size: number) => void;\n windowWidth: number;\n}\n\nconst BaseSelectPicker = ({\n label,\n labelStyles,\n value,\n valueStyles,\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 variant = 'box',\n data,\n isRequired,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n onSearch,\n itemTextStyles,\n listContainerStyles,\n isClearSearchOnClose,\n activeItemTextStyles\n}: BaseSelectPickerInterface) => {\n const rowHeight = 32;\n const dafaultScrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<List>(null);\n const sizeMap = useRef<{ [key: number]: number }>({});\n\n const [search, setSearch] = useState<string>('');\n const [buttonWidth, setButtonWidth] = useState<number>(0);\n const [isMenuItemsOpen, setIsMenuItemOpen] = useState(false);\n\n const getSize = (index: number) => sizeMap.current[index] || 32;\n const setSize = useCallback((index: number, size: number) => {\n sizeMap.current = { ...sizeMap.current, [index]: size };\n if (listRef.current) {\n listRef.current.resetAfterIndex(index);\n }\n }, []);\n\n const dataPicker: Array<BaseSelectPickerDataInterface> = useMemo(() => {\n const temp: Array<BaseSelectPickerDataInterface> = 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 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 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 <MenuItem as='div' ref={rowRef} key={index}>\n {({ active }) => {\n return (\n <button\n className={twMerge(\n classNames(\n 'bg-transparent py-2 px-4 flex justify-start w-full',\n extractClasses(itemContainerStyles, 'p-'),\n extractClasses(itemContainerStyles, 'px-'),\n extractClasses(itemContainerStyles, 'py-')\n )\n )}\n style={{\n backgroundColor:\n index % 2 === 0\n ? oddBgColor || 'var(--dropdownList-background-odd)'\n : evenBgColor || 'var(--dropdownList-background-even)'\n }}\n onClick={() => {\n onSelectItem?.(data[index]);\n }}\n >\n <BaseText\n label={data[index].label}\n variant='small'\n className={twMerge(\n classNames(\n 'text-dropdownList-text-default w-full text-left',\n `${\n active\n ? twMerge(\n 'font-semibold text-dropdownList-text-hover',\n activeItemTextStyles\n )\n : 'font-normal'\n }`\n ),\n itemTextStyles\n )}\n />\n </button>\n );\n }}\n </MenuItem>\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 (!isMenuItemsOpen && isClearSearchOnClose) {\n setSearch('');\n }\n }, [isClearSearchOnClose, isMenuItemsOpen]);\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 <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 <Menu as='div' className='relative inline-block'>\n <Float placement={position} flip={isAutoFlip}>\n <MenuButton\n className={twMerge(\n 'p-0 bg-transparent',\n containerStyles ? extractClasses(containerStyles, 'w-') : undefined\n )}\n onClick={(e) => {\n e.stopPropagation();\n }}\n disabled={isDisabled}\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 && (\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={\n data.filter(\n (item: BaseSelectPickerDataInterface) => item.value === value\n )[0]?.label\n }\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'\n onClick={(e) => {\n e.preventDefault();\n\n onSelectItem?.({ value: '', label: '' });\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 </MenuButton>\n\n <MenuItems\n static\n transition\n className={twMerge(\n classNames(\n 'transition ease-in duration-100 data-closed:opacity-0 rounded w-full bg-white 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 if (open !== isMenuItemsOpen) {\n setIsMenuItemOpen(open);\n }\n\n return (\n <>\n {isSearchable && (\n <div\n className='p-2 bg-light-whiteSolid w-full'\n onClick={(e) => e.stopPropagation()}\n >\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 onClick={(e) => e.stopPropagation()}\n >\n <input\n type='text'\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 style={{\n height: 'auto',\n paddingTop: '1px',\n paddingBottom: '1px'\n }}\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 </MenuItems>\n </Float>\n </Menu>\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 BaseSelectPicker;\n"],"names":["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","containerRef","useRef","listRef","sizeMap","search","setSearch","useState","buttonWidth","setButtonWidth","isMenuItemsOpen","setIsMenuItemOpen","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","jsx","MenuItem","as","ref","children","active","onClick","BaseText","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","unobserve","isWidthFull","_jsxs","jsxs","BaseBadgeRequired","Menu","Float","placement","flip","MenuButton","undefined","e","stopPropagation","disabled","open","_a","preventDefault","Icon","name","MenuItems","static","transition","_Fragment","type","onChange","target","onKeyDown","List","itemCount","itemSize","itemData","paddingTop","paddingBottom","BaseButton"],"mappings":"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"}
package/build/src/components/Tabs/BaseAccordionTabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("../../../node_modules/@formkit/auto-animate/index.mjs.js"),r=require("../../../node_modules/classnames/index.js"),o=require("react"),a=require("../../utils/getChildrenOnDisplayName.js");require("../Button/ButtonHyperlink.js");var s=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("../../styles/Colors.js"),require("../Text/BaseText.js"),require("../Text/Text.js");var i=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const c=({containerStyles:e,children:r})=>{const s=o.useRef();o.useEffect((()=>{s.current&&n.default(s.current)}),[s]);const c=a.getChildrenOnDisplayName(r,"ListTabs"),d=a.getChildrenOnDisplayName(r,"ItemContent"),l=a.getChildrenOnDisplayName(r,"MidTabs"),u=a.getChildrenOnDisplayName(r,"RightTabs");return t.jsxs("div",Object.assign({ref:s,className:i.twMerge("flex flex-col w-full p-2 rounded-lg bg-accordionTabs-container-background-default",e)},{children:[t.jsxs("div",Object.assign({className:"flex flex-row items-center space-x-1"},{children:[c,l&&t.jsx(t.Fragment,{children:l}),u&&t.jsx(t.Fragment,{children:u})]})),d]}))},d=({children:e,containerStyles:n})=>{const r=o.Children.toArray(e);return t.jsx("div",Object.assign({className:i.twMerge("flex flex-row flex-1",n)},{children:o.Children.map(r,((e,n)=>{const r=a.getChildrenOnDisplayName(e,"ItemTabs");return t.jsx("div",Object.assign({className:"flex flex-row items-center"},{children:r}),n)}))}))};d.displayName="ListTabs",c.ListTabs=d;const l=({children:e,containerStyles:n})=>t.jsx(t.Fragment,{children:e?t.jsx("div",Object.assign({className:i.twMerge("flex flex-row flex-1",n)},{children:e})):null});l.displayName="MidTabs",c.MidTabs=l;const u=({children:e,containerStyles:n})=>t.jsx(t.Fragment,{children:e?t.jsx("div",Object.assign({className:i.twMerge("flex flex-row flex-1",n)},{children:e})):null});u.displayName="RightTabs",c.RightTabs=u;const b=n=>{var{children:a,isActive:c}=n,d=e.__rest(n,["children","isActive"]);const[l,u]=o.useState(!1),[b,x]=o.useState(!1);return t.jsx(t.Fragment,{children:a||t.jsx("div",Object.assign({onMouseDown:()=>x(!0),onMouseUp:()=>x(!1),onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1)},{children:t.jsx(s.default,Object.assign({},d,{leftIconStyles:i.twMerge(r.default("fill-accordionTabs-button-textAndIcon-default",l&&"fill-accordionTabs-button-textAndIcon-hover",(b||c)&&"fill-accordionTabs-button-textAndIcon-active"),d.leftIconStyles),rightIcon:c?"chevronup":d.rightIcon||"chevrondown",rightIconStyles:i.twMerge(r.default("fill-accordionTabs-button-textAndIcon-default",l&&"fill-accordionTabs-button-textAndIcon-hover",(b||c)&&"fill-accordionTabs-button-textAndIcon-active"),d.rightIconStyles),className:i.twMerge(r.default("\n bg-accordionTabs-button-background-default active:bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-hover \n border-accordionTabs-button-border-default active:border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-hover \n text-accordionTabs-button-textAndIcon-default active:text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-hover\n ",c&&"\n bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-active \n border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-active \n text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-active\n "),d.className)}))}))})};b.displayName="ItemTabs",c.ItemTabs=b;const x=({children:e})=>t.jsx(t.Fragment,{children:e});x.displayName="ItemContent",c.ItemContent=x,module.exports=c;
1
+ "use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("../../../node_modules/@formkit/auto-animate/index.mjs.js"),r=require("../../../node_modules/classnames/index.js"),o=require("react"),s=require("../../utils/getChildrenOnDisplayName.js");require("../Button/ButtonHyperlink.js");var a=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("../../styles/Colors.js"),require("../Text/BaseText.js"),require("../Text/Text.js");var i=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const c=({containerStyles:e,children:r})=>{const a=o.useRef();o.useEffect((()=>{a.current&&n.default(a.current)}),[a]);const c=s.getChildrenOnDisplayName(r,"ListTabs"),d=s.getChildrenOnDisplayName(r,"ItemContent"),l=s.getChildrenOnDisplayName(r,"MidTabs"),u=s.getChildrenOnDisplayName(r,"RightTabs");return t.jsxs("div",Object.assign({ref:a,className:i.twMerge("flex flex-col w-full p-2 rounded-lg bg-accordionTabs-container-background-default",e)},{children:[t.jsxs("div",Object.assign({className:"flex flex-row items-center space-x-1"},{children:[c,l&&t.jsx(t.Fragment,{children:l}),u&&t.jsx(t.Fragment,{children:u})]})),d]}))},d=({children:e,containerStyles:n})=>{const r=o.Children.toArray(e);return t.jsx("div",Object.assign({className:i.twMerge("flex flex-row flex-1",n)},{children:o.Children.map(r,((e,n)=>{const r=s.getChildrenOnDisplayName(e,"ItemTabs");return t.jsx("div",Object.assign({className:"flex flex-row items-center"},{children:r}),n)}))}))};d.displayName="ListTabs",c.ListTabs=d;const l=({children:e,containerStyles:n})=>t.jsx(t.Fragment,{children:e?t.jsx("div",Object.assign({className:i.twMerge("flex flex-row flex-1",n)},{children:e})):null});l.displayName="MidTabs",c.MidTabs=l;const u=({children:e,containerStyles:n})=>t.jsx(t.Fragment,{children:e?t.jsx("div",Object.assign({className:i.twMerge("flex flex-row flex-1",n)},{children:e})):null});u.displayName="RightTabs",c.RightTabs=u;const b=n=>{var{children:s,isActive:c}=n,d=e.__rest(n,["children","isActive"]);const[l,u]=o.useState(!1),[b,x]=o.useState(!1),m=o.useRef(null);return o.useEffect((()=>{const e=()=>{x(!1),m.current&&!m.current.matches(":hover")&&u(!1)};return b&&document.addEventListener("mouseup",e),()=>{document.removeEventListener("mouseup",e)}}),[b]),t.jsx(t.Fragment,{children:s||t.jsx("div",Object.assign({ref:m,onMouseDown:()=>x(!0),onMouseEnter:()=>u(!0),onMouseLeave:()=>{b||u(!1)}},{children:t.jsx(a.default,Object.assign({},d,{leftIconStyles:i.twMerge(r.default("fill-accordionTabs-button-textAndIcon-default",l&&"fill-accordionTabs-button-textAndIcon-hover",(b||c)&&"fill-accordionTabs-button-textAndIcon-active"),d.leftIconStyles),rightIcon:c?"chevronup":d.rightIcon||"chevrondown",rightIconStyles:i.twMerge(r.default("fill-accordionTabs-button-textAndIcon-default",l&&"fill-accordionTabs-button-textAndIcon-hover",(b||c)&&"fill-accordionTabs-button-textAndIcon-active"),d.rightIconStyles),className:i.twMerge(r.default("\n bg-accordionTabs-button-background-default active:bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-hover \n border-accordionTabs-button-border-default active:border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-hover \n text-accordionTabs-button-textAndIcon-default active:text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-hover\n ",c&&"\n bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-active \n border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-active \n text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-active\n "),d.className)}))}))})};b.displayName="ItemTabs",c.ItemTabs=b;const x=({children:e})=>t.jsx(t.Fragment,{children:e});x.displayName="ItemContent",c.ItemContent=x,module.exports=c;
2
2
  //# sourceMappingURL=BaseAccordionTabs.js.map
package/build/src/components/Tabs/BaseAccordionTabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseAccordionTabs.js","sources":["../../../../src/components/Tabs/BaseAccordionTabs.tsx"],"sourcesContent":["import autoAnimate from '@formkit/auto-animate';\nimport classNames from 'classnames';\nimport { Children, useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { BaseButton } from '../Button';\nimport {\n BaseAccordionItemContentInterface,\n BaseAccordionItemTabsInterface,\n BaseAccordionListTabsInterface,\n BaseAccordionMidTabsInterface,\n BaseAccordionRightTabsInterface,\n BaseAccordionTabsInterface\n} from './BaseAccordionTabs.type';\n\nconst BaseAccordionTabs = ({ containerStyles, children }: BaseAccordionTabsInterface) => {\n const parentRef = useRef();\n\n useEffect(() => {\n if (parentRef.current) {\n autoAnimate(parentRef.current);\n }\n }, [parentRef]);\n\n const listTabs = getChildrenOnDisplayName(children, 'ListTabs');\n const itemContent = getChildrenOnDisplayName(children, 'ItemContent');\n const midTabs = getChildrenOnDisplayName(children, 'MidTabs');\n const rightTabs = getChildrenOnDisplayName(children, 'RightTabs');\n\n return (\n <div\n ref={parentRef}\n className={twMerge(\n 'flex flex-col w-full p-2 rounded-lg bg-accordionTabs-container-background-default',\n containerStyles\n )}\n >\n <div className='flex flex-row items-center space-x-1'>\n {listTabs}\n {midTabs && <>{midTabs}</>}\n {rightTabs && <>{rightTabs}</>}\n </div>\n\n {itemContent}\n </div>\n );\n};\n\nconst ListTabs = ({ children, containerStyles }: BaseAccordionListTabsInterface) => {\n const arrListTabs = Children.toArray(children);\n return (\n <div className={twMerge('flex flex-row flex-1', containerStyles)}>\n {Children.map(arrListTabs, (item, index) => {\n const tab = getChildrenOnDisplayName(item, 'ItemTabs');\n return (\n <div key={index} className='flex flex-row items-center'>\n {tab}\n </div>\n );\n })}\n </div>\n );\n};\nListTabs.displayName = 'ListTabs';\nBaseAccordionTabs.ListTabs = ListTabs;\n\nconst MidTabs = ({ children, containerStyles }: BaseAccordionMidTabsInterface) => {\n return (\n <>\n {children ? (\n <div className={twMerge('flex flex-row flex-1', containerStyles)}>{children}</div>\n ) : null}\n </>\n );\n};\nMidTabs.displayName = 'MidTabs';\nBaseAccordionTabs.MidTabs = MidTabs;\n\n// eslint-disable-next-line sonarjs/no-identical-functions\nconst RightTabs = ({ children, containerStyles }: BaseAccordionRightTabsInterface) => {\n return (\n <>\n {children ? (\n <div className={twMerge('flex flex-row flex-1', containerStyles)}>{children}</div>\n ) : null}\n </>\n );\n};\n\nRightTabs.displayName = 'RightTabs';\nBaseAccordionTabs.RightTabs = RightTabs;\n\nconst ItemTabs = ({ children, isActive, ...props }: BaseAccordionItemTabsInterface) => {\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false);\n const [isMouseDown, setIsMouseDown] = useState<boolean>(false);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div\n onMouseDown={() => setIsMouseDown(true)}\n onMouseUp={() => setIsMouseDown(false)}\n onMouseEnter={() => setIsMouseEnter(true)}\n onMouseLeave={() => setIsMouseEnter(false)}\n >\n <BaseButton\n {...props}\n leftIconStyles={twMerge(\n classNames(\n 'fill-accordionTabs-button-textAndIcon-default',\n isMouseEnter && 'fill-accordionTabs-button-textAndIcon-hover',\n (isMouseDown || isActive) && 'fill-accordionTabs-button-textAndIcon-active'\n ),\n props.leftIconStyles\n )}\n rightIcon={isActive ? 'chevronup' : props.rightIcon || 'chevrondown'}\n rightIconStyles={twMerge(\n classNames(\n 'fill-accordionTabs-button-textAndIcon-default',\n isMouseEnter && 'fill-accordionTabs-button-textAndIcon-hover',\n (isMouseDown || isActive) && 'fill-accordionTabs-button-textAndIcon-active'\n ),\n props.rightIconStyles\n )}\n className={twMerge(\n classNames(\n `\n bg-accordionTabs-button-background-default active:bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-hover \n border-accordionTabs-button-border-default active:border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-hover \n text-accordionTabs-button-textAndIcon-default active:text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-hover\n `,\n isActive &&\n `\n bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-active \n border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-active \n text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-active\n `\n ),\n props.className\n )}\n />\n </div>\n )}\n </>\n );\n};\nItemTabs.displayName = 'ItemTabs';\nBaseAccordionTabs.ItemTabs = ItemTabs;\n\nconst ItemContent = ({ children }: BaseAccordionItemContentInterface) => {\n return <>{children}</>;\n};\nItemContent.displayName = 'ItemContent';\nBaseAccordionTabs.ItemContent = ItemContent;\n\nexport default BaseAccordionTabs;\n"],"names":["BaseAccordionTabs","containerStyles","children","parentRef","useRef","useEffect","current","autoAnimate","listTabs","getChildrenOnDisplayName","itemContent","midTabs","rightTabs","_jsxs","jsxs","Object","assign","ref","className","twMerge","_jsx","jsx","_Fragment","Fragment","ListTabs","arrListTabs","Children","toArray","map","item","index","tab","displayName","MidTabs","RightTabs","ItemTabs","_a","isActive","props","__rest","isMouseEnter","setIsMouseEnter","useState","isMouseDown","setIsMouseDown","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","BaseButton","leftIconStyles","classNames","rightIcon","rightIconStyles","ItemContent"],"mappings":"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"}
1
+ {"version":3,"file":"BaseAccordionTabs.js","sources":["../../../../src/components/Tabs/BaseAccordionTabs.tsx"],"sourcesContent":["import autoAnimate from '@formkit/auto-animate';\nimport classNames from 'classnames';\nimport { Children, useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { BaseButton } from '../Button';\nimport {\n BaseAccordionItemContentInterface,\n BaseAccordionItemTabsInterface,\n BaseAccordionListTabsInterface,\n BaseAccordionMidTabsInterface,\n BaseAccordionRightTabsInterface,\n BaseAccordionTabsInterface\n} from './BaseAccordionTabs.type';\n\nconst BaseAccordionTabs = ({ containerStyles, children }: BaseAccordionTabsInterface) => {\n const parentRef = useRef();\n\n useEffect(() => {\n if (parentRef.current) {\n autoAnimate(parentRef.current);\n }\n }, [parentRef]);\n\n const listTabs = getChildrenOnDisplayName(children, 'ListTabs');\n const itemContent = getChildrenOnDisplayName(children, 'ItemContent');\n const midTabs = getChildrenOnDisplayName(children, 'MidTabs');\n const rightTabs = getChildrenOnDisplayName(children, 'RightTabs');\n\n return (\n <div\n ref={parentRef}\n className={twMerge(\n 'flex flex-col w-full p-2 rounded-lg bg-accordionTabs-container-background-default',\n containerStyles\n )}\n >\n <div className='flex flex-row items-center space-x-1'>\n {listTabs}\n {midTabs && <>{midTabs}</>}\n {rightTabs && <>{rightTabs}</>}\n </div>\n\n {itemContent}\n </div>\n );\n};\n\nconst ListTabs = ({ children, containerStyles }: BaseAccordionListTabsInterface) => {\n const arrListTabs = Children.toArray(children);\n return (\n <div className={twMerge('flex flex-row flex-1', containerStyles)}>\n {Children.map(arrListTabs, (item, index) => {\n const tab = getChildrenOnDisplayName(item, 'ItemTabs');\n return (\n <div key={index} className='flex flex-row items-center'>\n {tab}\n </div>\n );\n })}\n </div>\n );\n};\nListTabs.displayName = 'ListTabs';\nBaseAccordionTabs.ListTabs = ListTabs;\n\nconst MidTabs = ({ children, containerStyles }: BaseAccordionMidTabsInterface) => {\n return (\n <>\n {children ? (\n <div className={twMerge('flex flex-row flex-1', containerStyles)}>{children}</div>\n ) : null}\n </>\n );\n};\nMidTabs.displayName = 'MidTabs';\nBaseAccordionTabs.MidTabs = MidTabs;\n\n// eslint-disable-next-line sonarjs/no-identical-functions\nconst RightTabs = ({ children, containerStyles }: BaseAccordionRightTabsInterface) => {\n return (\n <>\n {children ? (\n <div className={twMerge('flex flex-row flex-1', containerStyles)}>{children}</div>\n ) : null}\n </>\n );\n};\n\nRightTabs.displayName = 'RightTabs';\nBaseAccordionTabs.RightTabs = RightTabs;\n\nconst ItemTabs = ({ children, isActive, ...props }: BaseAccordionItemTabsInterface) => {\n const [isMouseEnter, setIsMouseEnter] = useState<boolean>(false);\n const [isMouseDown, setIsMouseDown] = useState<boolean>(false);\n const containerRef = useRef(null);\n\n useEffect(() => {\n const handleMouseUp = () => {\n setIsMouseDown(false);\n if (containerRef.current && !containerRef.current.matches(':hover')) {\n setIsMouseEnter(false);\n }\n };\n\n if (isMouseDown) {\n document.addEventListener('mouseup', handleMouseUp);\n }\n return () => {\n document.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isMouseDown]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div\n ref={containerRef}\n onMouseDown={() => setIsMouseDown(true)}\n onMouseEnter={() => setIsMouseEnter(true)}\n onMouseLeave={() => {\n if (!isMouseDown) {\n setIsMouseEnter(false);\n }\n }}\n >\n <BaseButton\n {...props}\n leftIconStyles={twMerge(\n classNames(\n 'fill-accordionTabs-button-textAndIcon-default',\n isMouseEnter && 'fill-accordionTabs-button-textAndIcon-hover',\n (isMouseDown || isActive) && 'fill-accordionTabs-button-textAndIcon-active'\n ),\n props.leftIconStyles\n )}\n rightIcon={isActive ? 'chevronup' : props.rightIcon || 'chevrondown'}\n rightIconStyles={twMerge(\n classNames(\n 'fill-accordionTabs-button-textAndIcon-default',\n isMouseEnter && 'fill-accordionTabs-button-textAndIcon-hover',\n (isMouseDown || isActive) && 'fill-accordionTabs-button-textAndIcon-active'\n ),\n props.rightIconStyles\n )}\n className={twMerge(\n classNames(\n `\n bg-accordionTabs-button-background-default active:bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-hover \n border-accordionTabs-button-border-default active:border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-hover \n text-accordionTabs-button-textAndIcon-default active:text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-hover\n `,\n isActive &&\n `\n bg-accordionTabs-button-background-active hover:bg-accordionTabs-button-background-active \n border-accordionTabs-button-border-active hover:border-accordionTabs-button-border-active \n text-accordionTabs-button-textAndIcon-active hover:text-accordionTabs-button-textAndIcon-active\n `\n ),\n props.className\n )}\n />\n </div>\n )}\n </>\n );\n};\nItemTabs.displayName = 'ItemTabs';\nBaseAccordionTabs.ItemTabs = ItemTabs;\n\nconst ItemContent = ({ children }: BaseAccordionItemContentInterface) => {\n return <>{children}</>;\n};\nItemContent.displayName = 'ItemContent';\nBaseAccordionTabs.ItemContent = ItemContent;\n\nexport default BaseAccordionTabs;\n"],"names":["BaseAccordionTabs","containerStyles","children","parentRef","useRef","useEffect","current","autoAnimate","listTabs","getChildrenOnDisplayName","itemContent","midTabs","rightTabs","_jsxs","jsxs","Object","assign","ref","className","twMerge","_jsx","jsx","_Fragment","Fragment","ListTabs","arrListTabs","Children","toArray","map","item","index","tab","displayName","MidTabs","RightTabs","ItemTabs","_a","isActive","props","__rest","isMouseEnter","setIsMouseEnter","useState","isMouseDown","setIsMouseDown","containerRef","handleMouseUp","matches","document","addEventListener","removeEventListener","onMouseDown","onMouseEnter","onMouseLeave","BaseButton","leftIconStyles","classNames","rightIcon","rightIconStyles","ItemContent"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uangcermat-web-toolkit-v2",
3
- "version": "0.2.18",
3
+ "version": "0.2.20",
4
4
  "outputDir": "build",
5
5
  "main": "build/src/index.js",
6
6
  "types": "build/src/index.d.ts",