uangcermat-web-toolkit-v2 0.2.16 → 0.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/src/assets/icons/checkbox-fill.svg.js +1 -1
- package/build/src/assets/icons/radioButton.svg.js +1 -1
- package/build/src/components/Modal/BaseModal.d.ts +1 -1
- package/build/src/components/Modal/BaseModal.js +1 -1
- package/build/src/components/Modal/BaseModal.js.map +1 -1
- package/build/src/components/Modal/BaseModal.type.d.ts +1 -0
- package/build/src/components/SelectPicker/BaseSelectPicker.js +1 -1
- package/build/src/components/SelectPicker/BaseSelectPicker.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=r.createElement("path",{clipRule:"evenodd",d:"M1.333 0h9.334C11.4 0 12 .6 12 1.333v9.334C12 11.4 11.4 12 10.667 12H1.333C.6 12 0 11.4 0 10.667V1.333C0 .6.6 0 1.333 0zm8.459 3.943L5.079 8.657 2.25 5.828l.943-.943 1.886 1.886L8.849 3l.943.943z"})))};
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd"},e),t||(t=r.createElement("path",{clipRule:"evenodd",d:"M1.333 0h9.334C11.4 0 12 .6 12 1.333v9.334C12 11.4 11.4 12 10.667 12H1.333C.6 12 0 11.4 0 10.667V1.333C0 .6.6 0 1.333 0zm8.459 3.943L5.079 8.657 2.25 5.828l.943-.943 1.886 1.886L8.849 3l.943.943z"})))};
|
|
2
2
|
//# sourceMappingURL=checkbox-fill.svg.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(null,arguments)}exports.ReactComponent=function(e){return n.createElement("svg",c({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=n.createElement("path",{d:"M6.005 3.004c-1.68 0-3.001 1.32-3.001 3s1.32 3.001 3 3.001c1.681 0 3.001-1.32 3.001-3 0-1.681-1.32-3.001-3-3.001z"})),r||(r=n.createElement("path",{clipRule:"evenodd",d:"M12 6A6 6 0 110 6a6 6 0 0112 0zm-.9 0A5.1 5.1 0 11.9 6a5.1 5.1 0 0110.2 0z"})))};
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(null,arguments)}exports.ReactComponent=function(e){return n.createElement("svg",c({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd"},e),t||(t=n.createElement("path",{d:"M6.005 3.004c-1.68 0-3.001 1.32-3.001 3s1.32 3.001 3 3.001c1.681 0 3.001-1.32 3.001-3 0-1.681-1.32-3.001-3-3.001z"})),r||(r=n.createElement("path",{clipRule:"evenodd",d:"M12 6A6 6 0 110 6a6 6 0 0112 0zm-.9 0A5.1 5.1 0 11.9 6a5.1 5.1 0 0110.2 0z"})))};
|
|
2
2
|
//# sourceMappingURL=radioButton.svg.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseModalContentInterface, BaseModalFooterInterface, BaseModalHeaderInterface, BaseModalInterface } from './BaseModal.type';
|
|
2
2
|
declare const BaseModal: {
|
|
3
|
-
({ isOpen, overlayDisableClose, onClose, containerStyles, children }: BaseModalInterface): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ isOpen, overlayDisableClose, onClose, containerStyles, wrapperStyles, children }: BaseModalInterface): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Header: {
|
|
5
5
|
({ title, titleStyles, containerStyles, iconCloseContainerStyles, iconCloseStyles, onClose, children }: BaseModalHeaderInterface): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
displayName: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("../../utils/getChildrenOnDisplayName.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 n=require("../Text/BaseText.js");require("../Text/Text.js");var a=require("../Icon/Icon.js"),r=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js"),l=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js"),o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const c=({isOpen:i,overlayDisableClose:n,onClose:a,containerStyles:c,children:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("../../utils/getChildrenOnDisplayName.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 n=require("../Text/BaseText.js");require("../Text/Text.js");var a=require("../Icon/Icon.js"),r=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js"),l=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js"),o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const c=({isOpen:i,overlayDisableClose:n,onClose:a,containerStyles:c,wrapperStyles:d,children:u})=>{const j=s.getChildrenOnDisplayName(u,"Header"),m=s.getChildrenOnDisplayName(u,"Content"),g=s.getChildrenOnDisplayName(u,"Footer");return e.jsx(e.Fragment,{children:e.jsx(l.Transition,Object.assign({appear:!0,show:i,as:t.Fragment},{children:e.jsxs(r.Dialog,Object.assign({as:"div",className:"relative z-10",onClose:()=>{n||a()}},{children:[e.jsx(l.TransitionChild,Object.assign({as:t.Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"ease-in duration-200",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx("div",{className:"fixed inset-0 bg-black bg-opacity-25"})})),e.jsx("div",Object.assign({className:"fixed inset-0 overflow-y-auto"},{children:e.jsx("div",Object.assign({className:o.twMerge("flex min-h-full items-center justify-center p-4 text-center",d)},{children:e.jsx(l.TransitionChild,Object.assign({as:t.Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0 scale-95",enterTo:"opacity-100 scale-100",leave:"ease-in duration-200",leaveFrom:"opacity-100 scale-100",leaveTo:"opacity-0 scale-95"},{children:e.jsxs(r.DialogPanel,Object.assign({className:o.twMerge("flex flex-col w-full max-w-md transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all relative",c)},{children:[j,m,g]}))}))}))}))]}))}))})},d=({title:t,titleStyles:s,containerStyles:i,iconCloseContainerStyles:r,iconCloseStyles:l,onClose:c,children:d})=>e.jsx(e.Fragment,{children:d||e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:o.twMerge("position absolute top-2 right-2",r)},{children:e.jsx("button",Object.assign({className:"bg-white p-0",onClick:()=>c()},{children:e.jsx(a,{name:"close",className:o.twMerge("w-3 h-3",l)})}))})),e.jsx("div",Object.assign({className:o.twMerge("w-full px-6 pt-6 pb-4",i)},{children:e.jsx(n.default,{label:t||"",className:o.twMerge("text-center font-semibold text-lg text-popup-title-default",s)})}))]})});d.displayName="Header",c.Header=d;const u=({containerStyles:t,children:s})=>e.jsx(e.Fragment,{children:e.jsx("div",Object.assign({className:o.twMerge("flex flex-1 w-full px-6",t)},{children:s}))});u.displayName="Content",c.Content=u;const j=({containerStyles:t,onClose:s,children:n})=>e.jsx(e.Fragment,{children:e.jsx("div",Object.assign({className:o.twMerge("flex items-center justify-center w-full p-3 bg-light-whiteSmoke",t)},{children:n||e.jsx(i.default,{label:"Close",variant:"secondary",onClick:()=>s()})}))});j.displayName="Footer",c.Footer=j,module.exports=c;
|
|
2
2
|
//# sourceMappingURL=BaseModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseModal.js","sources":["../../../../src/components/Modal/BaseModal.tsx"],"sourcesContent":["import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';\nimport React, { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { BaseButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseModalContentInterface,\n BaseModalFooterInterface,\n BaseModalHeaderInterface,\n BaseModalInterface\n} from './BaseModal.type';\n\nconst BaseModal = ({\n isOpen,\n overlayDisableClose,\n onClose,\n containerStyles,\n children\n}: BaseModalInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const content = getChildrenOnDisplayName(children, 'Content');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n\n const onCloseModal = () => {\n onClose();\n };\n\n return (\n <>\n <Transition appear show={isOpen} as={Fragment}>\n <Dialog\n as='div'\n className='relative z-10'\n onClose={() => {\n if (!overlayDisableClose) onCloseModal();\n }}\n >\n <TransitionChild\n as={Fragment}\n enter='ease-out duration-300'\n enterFrom='opacity-0'\n enterTo='opacity-100'\n leave='ease-in duration-200'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <div className='fixed inset-0 bg-black bg-opacity-25' />\n </TransitionChild>\n\n <div className='fixed inset-0 overflow-y-auto'>\n <div
|
|
1
|
+
{"version":3,"file":"BaseModal.js","sources":["../../../../src/components/Modal/BaseModal.tsx"],"sourcesContent":["import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';\nimport React, { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { BaseButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseModalContentInterface,\n BaseModalFooterInterface,\n BaseModalHeaderInterface,\n BaseModalInterface\n} from './BaseModal.type';\n\nconst BaseModal = ({\n isOpen,\n overlayDisableClose,\n onClose,\n containerStyles,\n wrapperStyles,\n children\n}: BaseModalInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const content = getChildrenOnDisplayName(children, 'Content');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n\n const onCloseModal = () => {\n onClose();\n };\n\n return (\n <>\n <Transition appear show={isOpen} as={Fragment}>\n <Dialog\n as='div'\n className='relative z-10'\n onClose={() => {\n if (!overlayDisableClose) onCloseModal();\n }}\n >\n <TransitionChild\n as={Fragment}\n enter='ease-out duration-300'\n enterFrom='opacity-0'\n enterTo='opacity-100'\n leave='ease-in duration-200'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <div className='fixed inset-0 bg-black bg-opacity-25' />\n </TransitionChild>\n\n <div className='fixed inset-0 overflow-y-auto'>\n <div\n className={twMerge(\n 'flex min-h-full items-center justify-center p-4 text-center',\n wrapperStyles\n )}\n >\n <TransitionChild\n as={Fragment}\n enter='ease-out duration-300'\n enterFrom='opacity-0 scale-95'\n enterTo='opacity-100 scale-100'\n leave='ease-in duration-200'\n leaveFrom='opacity-100 scale-100'\n leaveTo='opacity-0 scale-95'\n >\n <DialogPanel\n className={twMerge(\n 'flex flex-col w-full max-w-md transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all relative',\n containerStyles\n )}\n >\n {header}\n {content}\n {footer}\n </DialogPanel>\n </TransitionChild>\n </div>\n </div>\n </Dialog>\n </Transition>\n </>\n );\n};\n\nconst Header = ({\n title,\n titleStyles,\n containerStyles,\n iconCloseContainerStyles,\n iconCloseStyles,\n onClose,\n children\n}: BaseModalHeaderInterface) => (\n <>\n {children ? (\n children\n ) : (\n <>\n <div className={twMerge('position absolute top-2 right-2', iconCloseContainerStyles)}>\n <button className='bg-white p-0' onClick={() => onClose()}>\n <Icon name='close' className={twMerge('w-3 h-3', iconCloseStyles)} />\n </button>\n </div>\n <div className={twMerge('w-full px-6 pt-6 pb-4', containerStyles)}>\n <BaseText\n label={title || ''}\n className={twMerge(\n 'text-center font-semibold text-lg text-popup-title-default',\n titleStyles\n )}\n />\n </div>\n </>\n )}\n </>\n);\nHeader.displayName = 'Header';\nBaseModal.Header = Header;\n\nconst Content = ({ containerStyles, children }: BaseModalContentInterface) => (\n <>\n <div className={twMerge('flex flex-1 w-full px-6', containerStyles)}>{children}</div>\n </>\n);\nContent.displayName = 'Content';\nBaseModal.Content = Content;\n\nconst Footer = ({ containerStyles, onClose, children }: BaseModalFooterInterface) => (\n <>\n <div\n className={twMerge(\n 'flex items-center justify-center w-full p-3 bg-light-whiteSmoke',\n containerStyles\n )}\n >\n {children ? (\n children\n ) : (\n <BaseButton label='Close' variant='secondary' onClick={() => onClose()} />\n )}\n </div>\n </>\n);\nFooter.displayName = 'Footer';\nBaseModal.Footer = Footer;\n\nexport default BaseModal;\n"],"names":["BaseModal","isOpen","overlayDisableClose","onClose","containerStyles","wrapperStyles","children","header","getChildrenOnDisplayName","content","footer","_jsx","jsx","_Fragment","Fragment","Transition","Object","assign","appear","show","as","_jsxs","Dialog","className","TransitionChild","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","twMerge","DialogPanel","Header","title","titleStyles","iconCloseContainerStyles","iconCloseStyles","onClick","Icon","name","BaseText","label","displayName","Content","Footer","BaseButton","variant"],"mappings":"2yBAeA,MAAMA,EAAY,EAChBC,SACAC,sBACAC,UACAC,kBACAC,gBACAC,eAEA,MAAMC,EAASC,EAAAA,yBAAyBF,EAAU,UAC5CG,EAAUD,EAAAA,yBAAyBF,EAAU,WAC7CI,EAASF,EAAAA,yBAAyBF,EAAU,UAMlD,OACEK,EAAAC,IAAAC,EAAAC,SAAA,CAAAR,SACEK,EAACC,IAAAG,EAAUA,WAACC,OAAAC,OAAA,CAAAC,QAAO,EAAAC,KAAMlB,EAAQmB,GAAIN,EAAQA,UAC3C,CAAAR,SAAAe,OAACC,EAAAA,OAAMN,OAAAC,OAAA,CACLG,GAAG,MACHG,UAAU,gBACVpB,QAAS,KACFD,GAVbC,GAUgD,GACzC,CAAAG,SAAA,CAEDK,EAAAA,IAACa,EAAeA,gBACdR,OAAAC,OAAA,CAAAG,GAAIN,EAAQA,SACZW,MAAM,wBACNC,UAAU,YACVC,QAAQ,cACRC,MAAM,uBACNC,UAAU,cACVC,QAAQ,aAER,CAAAxB,SAAAK,EAAAC,IAAA,MAAA,CAAKW,UAAU,4CAGjBZ,MAAA,MAAAK,OAAAC,OAAA,CAAKM,UAAU,iCACb,CAAAjB,SAAAK,EAAAA,IAAA,MAAAK,OAAAC,OAAA,CACEM,UAAWQ,EAAOA,QAChB,8DACA1B,IAGF,CAAAC,SAAAK,EAAAA,IAACa,EAAeA,gBACdR,OAAAC,OAAA,CAAAG,GAAIN,EAAQA,SACZW,MAAM,wBACNC,UAAU,qBACVC,QAAQ,wBACRC,MAAM,uBACNC,UAAU,wBACVC,QAAQ,sBAER,CAAAxB,SAAAe,EAAAA,KAACW,EAAAA,YAAWhB,OAAAC,OAAA,CACVM,UAAWQ,EAAAA,QACT,uIACA3B,IACD,CAAAE,SAAA,CAEAC,EACAE,EACAC,uBAQf,EAGEuB,EAAS,EACbC,QACAC,cACA/B,kBACAgC,2BACAC,kBACAlC,UACAG,cAEAK,EAAAA,IACGE,EAAAC,SAAA,CAAAR,SAAAA,GAGCe,OACER,EAAAA,SAAA,CAAAP,SAAA,CAAAK,EAAAA,IAAA,MAAAK,OAAAC,OAAA,CAAKM,UAAWQ,EAAOA,QAAC,kCAAmCK,IAAyB,CAAA9B,SAClFK,EAAQC,IAAA,SAAAI,OAAAC,OAAA,CAAAM,UAAU,eAAee,QAAS,IAAMnC,KAAS,CAAAG,SACvDK,MAAC4B,EAAK,CAAAC,KAAK,QAAQjB,UAAWQ,EAAOA,QAAC,UAAWM,WAGrD1B,EAAKC,IAAA,MAAAI,OAAAC,OAAA,CAAAM,UAAWQ,EAAOA,QAAC,wBAAyB3B,IAC/C,CAAAE,SAAAK,EAAAA,IAAC8B,EAAAA,QAAQ,CACPC,MAAOR,GAAS,GAChBX,UAAWQ,EAAAA,QACT,6DACAI,aAQdF,EAAOU,YAAc,SACrB3C,EAAUiC,OAASA,EAEnB,MAAMW,EAAU,EAAGxC,kBAAiBE,cAClCK,EAAAA,IAAAE,EAAAC,SAAA,CAAAR,SACEK,MAAK,MAAAK,OAAAC,OAAA,CAAAM,UAAWQ,EAAAA,QAAQ,0BAA2B3B,IAAgB,CAAAE,SAAGA,OAG1EsC,EAAQD,YAAc,UACtB3C,EAAU4C,QAAUA,EAEpB,MAAMC,EAAS,EAAGzC,kBAAiBD,UAASG,cAC1CK,EAAAC,IAAAC,WAAA,CAAAP,SACEK,EACEC,IAAA,MAAAI,OAAAC,OAAA,CAAAM,UAAWQ,EAAAA,QACT,kEACA3B,IACD,CAAAE,SAEAA,GAGCK,EAAAC,IAACkC,UAAU,CAACJ,MAAM,QAAQK,QAAQ,YAAYT,QAAS,IAAMnC,WAKrE0C,EAAOF,YAAc,SACrB3C,EAAU6C,OAASA"}
|
|
@@ -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"),
|
|
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)})]}))};
|
|
2
2
|
//# sourceMappingURL=BaseSelectPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSelectPicker.js","sources":["../../../../src/components/SelectPicker/BaseSelectPicker.tsx"],"sourcesContent":["import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport classNames from 'classnames';\nimport React, { 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 { 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\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 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 <Transition\n show={true}\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <MenuItems\n className={twMerge(\n classNames(\n '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 // 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\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 </Transition>\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","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","Transition","show","Fragment","leave","leaveFrom","leaveTo","MenuItems","_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 >\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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"}
|