uangcermat-web-toolkit-v2 0.2.23 → 0.2.24
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/equals.svg.js +2 -0
- package/build/src/assets/icons/equals.svg.js.map +1 -0
- package/build/src/assets/icons/index.d.ts +1 -0
- package/build/src/blocks/Sidebar/Sidebar.js +1 -1
- package/build/src/blocks/Sidebar/Sidebar.js.map +1 -1
- package/build/src/components/Icon/Icon.js +4 -4
- package/build/src/components/Icon/Icon.js.map +1 -1
- package/build/src/components/Icon/Icon.type.d.ts +1 -1
- package/build/src/components/Tooltip/BaseTooltip.js +1 -1
- package/build/src/components/Tooltip/BaseTooltip.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +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",{fillRule:"evenodd",clipRule:"evenodd",d:"M1.1 3.4c0-.22.18-.4.4-.4h9c.221 0 .4.18.4.4v1a.4.4 0 01-.4.4h-9a.4.4 0 01-.4-.4v-1zm0 4c0-.22.18-.4.4-.4h9c.221 0 .4.18.4.4v1a.4.4 0 01-.4.4h-9a.4.4 0 01-.4-.4v-1z",fill:"#52616B"})))};
|
|
2
|
+
//# sourceMappingURL=equals.svg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"equals.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -59,6 +59,7 @@ export { ReactComponent as DownloadIcon } from './download.svg';
|
|
|
59
59
|
export { ReactComponent as EditIcon } from './edit.svg';
|
|
60
60
|
export { ReactComponent as ElectricShieldCircleIcon } from './electric-shield-circle.svg';
|
|
61
61
|
export { ReactComponent as EmptyNotification } from './empty-notification.svg';
|
|
62
|
+
export { ReactComponent as EqualsIcon } from './equals.svg';
|
|
62
63
|
export { ReactComponent as ExpenseIcon } from './expense.svg';
|
|
63
64
|
export { ReactComponent as EyeOffIcon } from './eye-off.svg';
|
|
64
65
|
export { ReactComponent as EyeOnIcon } from './eye-on.svg';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),a=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var s=require("../../components/Badge/BaseBadge.js"),n=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js");var o=require("../../components/Button/BaseButton.js"),l=require("../../components/Button/BaseButtonIcon.js");require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js");var i=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js");var r=require("../../components/Popover/BasePopover.js");require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Tooltip/BaseTooltip.js"),require("../../components/Uploader/BaseUploader.js");var c=require("../../utils/getChildrenOnDisplayName.js"),u=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(a);const x=()=>e.jsx("div",{className:"w-full h-[1px] bg-sidebar-separator-default"}),g=({id:o,title:l,titleStyles:r,icon:c,iconStyles:d,subMenu:x,isCollapsed:g,activeId:b,selectedId:f,notificationCountContainerStyles:p,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveContainerStyles:v,itemMenuActiveBgColor:w,itemSubMenuContainerStyles:y,itemSubMenuActiveContainerStyles:C,itemSubMenuActiveTextColor:S,onClickCollapsible:k,onExpand:N,onClickNav:M,notifcationCount:A})=>{const B=f===o,[P,q]=m.default.useState(!1),[O,T]=m.default.useState(!1),[I,L]=m.default.useState(!1);return a.useEffect((()=>{g?q(!1):setTimeout((()=>{q(!0)}),200)}),[g]),e.jsxs("div",Object.assign({className:u.twMerge(`overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${B?v||"bg-sidebar-menu-background-active":"bg-transparent"}`,h),style:{backgroundColor:B?w:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{P||B||k(),N(B?"":o)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative",onMouseDown:()=>L(!0),onMouseUp:()=>L(!1),onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:c,className:u.twMerge(t.default("w-4 h-4 fill-sidebar-menu-textAndIcon-default",O&&"fill-sidebar-menu-textAndIcon-hover",I&&"fill-sidebar-menu-textAndIcon-active"),d)})})),P&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l,className:u.twMerge(t.default("text-sidebar-menu-textAndIcon-default text-sm text-left line-clamp-1 w-full",O&&"text-sidebar-menu-textAndIcon-hover",I&&"text-sidebar-menu-textAndIcon-active"),r)})})),!!A&&e.jsx(s,{label:A.toString(),labelStyles:u.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",j),containerStyles:u.twMerge(t.default("flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default",`${!P&&"absolute right-0 top-0"}`),p)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out "+(B&&P?"max-h-screen bg-sidebar-submenu-background-default":"max-h-0 "),style:{backgroundColor:B&&P?w:"transparent"}},{children:x.map(((t,a)=>e.jsx("button",Object.assign({onClick:()=>M(t),className:u.twMerge("\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 "+(t.navLink===b?`pl-11 ${C||"text-sidebar-submenu-textAndIcon-active"}`:""),y),style:{color:t.navLink===b?S:void 0}},{children:e.jsx(n.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===b?"font-semibold":"font-normal"} `})}),a)))}))]}))},b=({activeId:t,activeParent:s,data:n,isCollapsed:o,notificationCountContainerStyles:i,notificationCountTextStyles:r,containerStyles:d,itemMenuContainerStyles:x,itemMenuIconStyles:b,itemMenuTitleStyles:f,itemMenuActiveBgColor:p,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,toggleButtonContainerStyles:v,toggleIconOpenName:w,toggleIconCloseName:y,toggleIconStyles:C,onClickCollapsible:S,onClickNav:k,children:N})=>{const M=c.getChildrenOnDisplayName(N,"Header"),A=c.getChildrenOnDisplayName(N,"Footer"),B=c.getChildrenOnDisplayName(N,"UserProfile"),[P,q]=m.default.useState(s),O=a.Children.toArray(N);return e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default",d)},{children:[M,e.jsx(l.default,{variant:"tertiary",onClick:()=>S(),iconName:o?y||"chevronDoubleArrowRight":w||"chevronDoubleArrowLeft",iconStyles:u.twMerge("w-[7.5px] h-[7.5px]",C),className:u.twMerge("w-6 h-6 absolute top-14 -right-3",v)}),e.jsx("div",Object.assign({className:"flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none"},{children:e.jsx("div",Object.assign({className:"flex flex-col justify-start flex-1"},{children:n.map(((a,s)=>e.jsx(g,{selectedId:P,id:a.id,title:a.title,icon:a.icon,permission:a.permission,isCollapsed:o,activeId:t,subMenu:a.subMenu,onClickCollapsible:()=>S(),onExpand:e=>q(e),onClickNav:e=>k(e),notifcationCount:a.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:r,itemMenuActiveBgColor:p,itemMenuContainerStyles:x,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:b,titleStyles:f},s)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:a.Children.map(O,((t,a)=>{const s=c.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:s}),a)}))})),B,A]}))},f=({isCollapsed:o,label:l,labelStyles:d,icon:x,iconStyles:g,notificationCount:b,notificationCountContainerStyles:f,notificationCountTextStyles:p,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,containerStyles:S,isAutoFlip:k,children:N})=>{const[M,A]=m.default.useState(!1),[B,P]=m.default.useState(!1),[q,O]=m.default.useState(!1);return a.useEffect((()=>{o?A(!1):setTimeout((()=>{A(!0)}),200)}),[o]),e.jsx(r,Object.assign({position:j||"right-start",iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,isAutoFlip:k},{children:({open:a,close:o})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("button",Object.assign({className:u.twMerge(t.default("\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),S),onMouseDown:()=>O(!0),onMouseUp:()=>O(!1),onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:x,className:u.twMerge(t.default("w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default",B&&"fill-sidebar-notificationButton-textAndIcon-hover",q&&"fill-sidebar-notificationButton-textAndIcon-active"),g)})})),M&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l,className:u.twMerge("text-sm text-left line-clamp-1 w-full",d)})})),!!b&&e.jsx(s,{label:b.toString(),labelStyles:u.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",p),containerStyles:u.twMerge(t.default("flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5",`${!M&&"absolute right-0 top-0"}`),f)})]}))}),e.jsx(r.Panel,{children:c.getChildrenOnDisplayName("function"==typeof N?N({open:a,close:o}):N,"PopoverPanel")})]})}))};f.displayName="Popover",b.Popover=f;const p=({children:t})=>e.jsx(e.Fragment,{children:t});p.displayName="PopoverPanel",b.PopoverPanel=p;const j=({isCollapsed:t,appLogoClosed:s,appLogoClosedStyles:n,appLogoOpened:o,appLogoOpenedStyles:l,containerStyles:i,onClickHeaderSidebar:r,children:c})=>{const[d,x]=m.default.useState(!1);return a.useEffect((()=>{t?x(!1):setTimeout((()=>{x(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:c||e.jsx("div",Object.assign({className:u.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:d?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:o||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:u.twMerge("w-[113px] h-7",l)})})):e.jsx("img",{src:s||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:u.twMerge("w-[22px] h-[22px]",n)})}))})};j.displayName="Header",b.Header=j;const h=({isCollapsed:s,userLabel:o,userLabelStyles:l,userAvatar:c,userAvatarFallback:d,userAvatarFallbackStyles:g,userAvatarStyles:b,containerStyles:f,panelContainerStyles:p,titleAtPanel:j,titleAtPanelStyles:h,userAvatarAtPanel:v,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:y,userAvatarFallbackAtPanelStyles:C,userLabelAtPanel:S,userLabelAtPanelStyles:k,userEmailAtPanel:N,userEmailAtPanelStyles:M,manageAccountLabelAtPanel:A,manageAccountLabelAtPanelStyles:B,iconManageAccountAtPanel:P,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,manageAccountContainerStyles:T,translationLabelAtPanel:I,translationLabelAtPanelStyles:L,iconTranslationAtPanel:F,iconTranslationAtPanelStyles:D,onClickTranslation:E,translationContainerStyles:H,logoutLabelAtPanel:R,logoutLabelAtPanelStyles:U,iconLogoutAtPanel:z,iconLogoutAtPanelStyles:G,onClickLogout:V,children:$,offsetX:_,offsetY:X,position:Y,isAutoFlip:J})=>{const[K,Q]=m.default.useState(!1);return a.useEffect((()=>{s?Q(!1):setTimeout((()=>{Q(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:$||e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col w-full")},{children:[e.jsx(x,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsx(r,Object.assign({offsetX:_,offsetY:X,isAutoFlip:J,panelContainerStyles:p,containerStyles:"w-full",position:Y},{children:({open:a,close:s})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("div",Object.assign({className:u.twMerge(t.default("\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),f)},{children:[c?e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:u.twMerge("w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",b)}):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:d,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),K&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:o||"",className:u.twMerge("line-clamp-1 w-full text-left",l)})}))]}))}),e.jsx(r.Panel,{children:e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",p)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(n.default,{label:j||"Account",className:u.twMerge("text-sm font-semibold text-dark-blackCoral",h)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[v?e.jsx("img",{src:v||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:u.twMerge("w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded",w)},{children:e.jsx(n.default,{label:y,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",C)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(n.default,{label:S||"",className:u.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",k)}),e.jsx(n.default,{label:N||"",className:u.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",M)})]}))]})),e.jsxs("button",Object.assign({className:u.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",T),onClick:()=>{s(),null==O||O()}},{children:[e.jsx(i,{name:P||"configuration",className:u.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(n.default,{label:A||"Manage Account",className:u.twMerge("text-sm font-normal text-dark-blackCoral",B)})]})),e.jsxs("button",Object.assign({className:u.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",H),onClick:()=>{s(),null==E||E()}},{children:[e.jsx(i,{name:F||"language",className:u.twMerge("w-4 h-4 fill-dark-gumbo",D)}),e.jsx(n.default,{label:I||"Translate Page",className:u.twMerge("text-sm font-normal text-dark-blackCoral",L)})]})),e.jsx("div",{className:"h-[1px] w-full bg-dark-silver"}),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent",onClick:()=>{s(),null==V||V()}},{children:[e.jsx(i,{name:z||"logout",className:u.twMerge("w-4 h-4 fill-dark-gumbo",G)}),e.jsx(n.default,{label:R||"Logout",className:u.twMerge("text-sm font-normal text-dark-blackCoral",U)})]}))]}))})]})}))})),e.jsx(x,{})]}))})};h.displayName="UserProfile",b.UserProfile=h;const v=({isCollapsed:s,isShowCompanyProfile:l,companyName:i,companyNameStyles:r,companyLogo:c,companyLogoStyles:d,companyLogoFallback:x,companlogoFallbackStyles:g,companyLogoContainerStyles:b,isShowButtonChangeCompany:f,buttonChangeCompanyOnClick:p,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:v,buttonChangeCompanyIconStyles:w,appName:y,appVersion:C,children:S})=>{const[k,N]=m.default.useState(!1);return a.useEffect((()=>{s?N(!1):setTimeout((()=>{N(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[l&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[c?e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:u.twMerge("w-4 h-4",d)})})):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:x,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:i||"Gajicermat",className:u.twMerge("text-sidebar-companyNameText-default text-xs line-clamp-2",r)})}))]})),f&&e.jsx("div",Object.assign({className:"h-14 w-full flex flex-row items-center"},{children:e.jsx(o.default,{variant:"secondary",onClick:()=>null==p?void 0:p(),label:k?j||"Select Company":"",className:u.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0",k?"w-full":"w-6"),h),rightIcon:k?void 0:v||"refresh",rightIconStyles:u.twMerge("ml-0 w-3 h-3",w)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:k?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal"})})),e.jsx("div",{className:"w-[1px] h-3 bg-sidebar-appVersionText-default"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:C||"Version 0.0.0",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};v.displayName="Footer",b.Footer=v,module.exports=b;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),a=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var s=require("../../components/Badge/BaseBadge.js"),n=require("../../components/Text/BaseText.js");require("../../components/Text/Text.js"),require("../../components/Breadcrumbs/BaseBreadcrumbs.js"),require("../../components/Breadcrumbs/Breadcrumbs.js"),require("../../components/Button/ButtonHyperlink.js");var o=require("../../components/Button/BaseButton.js"),l=require("../../components/Button/BaseButtonIcon.js");require("../../components/Button/Button.js"),require("../../components/Button/ButtonConfirmation.js"),require("../../components/Button/ButtonLink.js"),require("../../components/Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js"),require("../../components/Card/InfoCard.js"),require("../../components/Checkbox/Checkbox.js");var i=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.js"),require("../../components/Container/BaseCollapsibleContainer.js"),require("../../components/DatePicker/DatePicker.js"),require("../../components/DatePicker/DatePickerRange.js"),require("../../components/DatePicker/DatePickerTime.js"),require("../../components/Heading/Heading.js"),require("../../components/IconProduct/IconProduct.js"),require("../../components/Image/Image.js"),require("../../components/LoadingIndicator/LoadingIndicator.js"),require("../../components/LoadingIndicator/LoadingIndicatorBox.js"),require("../../styles/BorderRadius.js"),require("../../styles/Spacing.js"),require("../../components/MessageBox/MessageBox.js"),require("../../components/Modal/BaseModal.js"),require("../../components/Modal/Modal.js");var r=require("../../components/Popover/BasePopover.js");require("../../components/Preview/BasePreview.js"),require("../../components/ProgressBar/ProgressBar.js"),require("../../components/ProgressIndicator/ProgressIndicator.js"),require("../../components/RadioButton/RadioButton.js"),require("../../components/SelectPicker/SelectPicker.js"),require("../../components/Table/TablePage.js"),require("../../components/Table/TableResponsive.js"),require("../../components/Tabs/BaseAccordionTabs.js"),require("../../components/Tabs/Tabs.js"),require("../../components/Textarea/Textarea.js"),require("../../components/TextInput/TextInput.js"),require("../../components/TimePicker/TimePicker.js"),require("../../../node_modules/react-hot-toast/dist/index.mjs.js"),require("../../components/ToggleButton/ToggleButton.js"),require("../../components/Tooltip/BaseTooltip.js"),require("../../components/Uploader/BaseUploader.js");var c=require("../../utils/getChildrenOnDisplayName.js"),u=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(a);const x=()=>e.jsx("div",{className:"w-full h-[1px] bg-sidebar-separator-default"}),g=({id:o,title:l,titleStyles:r,icon:c,iconStyles:d,subMenu:x,isCollapsed:g,activeId:b,selectedId:f,notificationCountContainerStyles:p,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveContainerStyles:v,itemMenuActiveBgColor:w,itemSubMenuContainerStyles:y,itemSubMenuActiveContainerStyles:C,itemSubMenuActiveTextColor:S,onClickCollapsible:k,onExpand:N,onClickNav:M,notifcationCount:A})=>{const B=f===o,[P,q]=m.default.useState(!1),[O,T]=m.default.useState(!1),[I,L]=m.default.useState(!1);return a.useEffect((()=>{g?q(!1):setTimeout((()=>{q(!0)}),200)}),[g]),e.jsxs("div",Object.assign({className:u.twMerge(`overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${B?v||"bg-sidebar-menu-background-active":"bg-transparent"}`,h),style:{backgroundColor:B?w:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{P||B||k(),N(B?"":o)},className:"relative w-full pl-3 pr-4 bg-transparent min-h-8",onMouseDown:()=>L(!0),onMouseUp:()=>L(!1),onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1)},{children:e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:c,className:u.twMerge(t.default("w-4 h-4 fill-sidebar-menu-textAndIcon-default",O&&"fill-sidebar-menu-textAndIcon-hover",I&&"fill-sidebar-menu-textAndIcon-active"),d)})})),P&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l,className:u.twMerge(t.default("text-sidebar-menu-textAndIcon-default text-sm text-left w-full line-clamp-1",O&&"text-sidebar-menu-textAndIcon-hover",I&&"text-sidebar-menu-textAndIcon-active"),r)})})),!!A&&e.jsx(s,{label:A.toString(),labelStyles:u.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",j),containerStyles:u.twMerge(t.default("flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default",`${!P&&"absolute right-0 top-0"}`),p)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out "+(B&&P?"max-h-screen bg-sidebar-submenu-background-default":"max-h-0 "),style:{backgroundColor:B&&P?w:"transparent"}},{children:x.map(((t,a)=>e.jsx("button",Object.assign({onClick:()=>M(t),className:u.twMerge("\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 "+(t.navLink===b?`pl-11 ${C||"text-sidebar-submenu-textAndIcon-active"}`:""),y),style:{color:t.navLink===b?S:void 0}},{children:e.jsx(n.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===b?"font-semibold":"font-normal"} `})}),a)))}))]}))},b=({activeId:t,activeParent:s,data:n,isCollapsed:o,notificationCountContainerStyles:i,notificationCountTextStyles:r,containerStyles:d,itemMenuContainerStyles:x,itemMenuIconStyles:b,itemMenuTitleStyles:f,itemMenuActiveBgColor:p,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,toggleButtonContainerStyles:v,toggleIconOpenName:w,toggleIconCloseName:y,toggleIconStyles:C,onClickCollapsible:S,onClickNav:k,children:N})=>{const M=c.getChildrenOnDisplayName(N,"Header"),A=c.getChildrenOnDisplayName(N,"Footer"),B=c.getChildrenOnDisplayName(N,"UserProfile"),[P,q]=m.default.useState(s),O=a.Children.toArray(N);return e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default",d)},{children:[M,e.jsx(l.default,{variant:"tertiary",onClick:()=>S(),iconName:o?y||"chevronDoubleArrowRight":w||"chevronDoubleArrowLeft",iconStyles:u.twMerge("w-[7.5px] h-[7.5px]",C),className:u.twMerge("w-6 h-6 absolute top-14 -right-3",v)}),e.jsx("div",Object.assign({className:"flex flex-col flex-1 mb-4 overflow-auto scrollbar scrollbar-none"},{children:e.jsx("div",Object.assign({className:"flex flex-col justify-start flex-1"},{children:n.map(((a,s)=>e.jsx(g,{selectedId:P,id:a.id,title:a.title,icon:a.icon,permission:a.permission,isCollapsed:o,activeId:t,subMenu:a.subMenu,onClickCollapsible:()=>S(),onExpand:e=>q(e),onClickNav:e=>k(e),notifcationCount:a.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:r,itemMenuActiveBgColor:p,itemMenuContainerStyles:x,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:b,titleStyles:f},s)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:a.Children.map(O,((t,a)=>{const s=c.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:s}),a)}))})),B,A]}))},f=({isCollapsed:o,label:l,labelStyles:d,icon:x,iconStyles:g,notificationCount:b,notificationCountContainerStyles:f,notificationCountTextStyles:p,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,containerStyles:S,isAutoFlip:k,children:N})=>{const[M,A]=m.default.useState(!1),[B,P]=m.default.useState(!1),[q,O]=m.default.useState(!1);return a.useEffect((()=>{o?A(!1):setTimeout((()=>{A(!0)}),200)}),[o]),e.jsx(r,Object.assign({position:j||"right-start",iconTriangleStyles:h,iconTriangleContainerStyles:v,panelContainerStyles:w,offsetX:y,offsetY:C,isAutoFlip:k},{children:({open:a,close:o})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("button",Object.assign({className:u.twMerge(t.default("\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),S),onMouseDown:()=>O(!0),onMouseUp:()=>O(!1),onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(i,{name:x,className:u.twMerge(t.default("w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default",B&&"fill-sidebar-notificationButton-textAndIcon-hover",q&&"fill-sidebar-notificationButton-textAndIcon-active"),g)})})),M&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:l,className:u.twMerge("text-sm text-left line-clamp-1 w-full",d)})})),!!b&&e.jsx(s,{label:b.toString(),labelStyles:u.twMerge("text-[10px] text-sidebar-notificationBadge-textAndIcon-default",p),containerStyles:u.twMerge(t.default("flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5",`${!M&&"absolute right-0 top-0"}`),f)})]}))}),e.jsx(r.Panel,{children:c.getChildrenOnDisplayName("function"==typeof N?N({open:a,close:o}):N,"PopoverPanel")})]})}))};f.displayName="Popover",b.Popover=f;const p=({children:t})=>e.jsx(e.Fragment,{children:t});p.displayName="PopoverPanel",b.PopoverPanel=p;const j=({isCollapsed:t,appLogoClosed:s,appLogoClosedStyles:n,appLogoOpened:o,appLogoOpenedStyles:l,containerStyles:i,onClickHeaderSidebar:r,children:c})=>{const[d,x]=m.default.useState(!1);return a.useEffect((()=>{t?x(!1):setTimeout((()=>{x(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:c||e.jsx("div",Object.assign({className:u.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:d?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:o||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:u.twMerge("w-[113px] h-7",l)})})):e.jsx("img",{src:s||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:u.twMerge("w-[22px] h-[22px]",n)})}))})};j.displayName="Header",b.Header=j;const h=({isCollapsed:s,userLabel:o,userLabelStyles:l,userAvatar:c,userAvatarFallback:d,userAvatarFallbackStyles:g,userAvatarStyles:b,containerStyles:f,panelContainerStyles:p,titleAtPanel:j,titleAtPanelStyles:h,userAvatarAtPanel:v,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:y,userAvatarFallbackAtPanelStyles:C,userLabelAtPanel:S,userLabelAtPanelStyles:k,userEmailAtPanel:N,userEmailAtPanelStyles:M,manageAccountLabelAtPanel:A,manageAccountLabelAtPanelStyles:B,iconManageAccountAtPanel:P,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,manageAccountContainerStyles:T,translationLabelAtPanel:I,translationLabelAtPanelStyles:L,iconTranslationAtPanel:F,iconTranslationAtPanelStyles:D,onClickTranslation:E,translationContainerStyles:H,logoutLabelAtPanel:R,logoutLabelAtPanelStyles:U,iconLogoutAtPanel:z,iconLogoutAtPanelStyles:G,onClickLogout:V,children:$,offsetX:_,offsetY:X,position:Y,isAutoFlip:J})=>{const[K,Q]=m.default.useState(!1);return a.useEffect((()=>{s?Q(!1):setTimeout((()=>{Q(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:$||e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col w-full")},{children:[e.jsx(x,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsx(r,Object.assign({offsetX:_,offsetY:X,isAutoFlip:J,panelContainerStyles:p,containerStyles:"w-full",position:Y},{children:({open:a,close:s})=>e.jsxs(e.Fragment,{children:[e.jsx(r.Button,{children:e.jsxs("div",Object.assign({className:u.twMerge(t.default("\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n ",a&&"bg-sidebar-profile-background-active text-sidebar-profile-text-active"),f)},{children:[c?e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:u.twMerge("w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",b)}):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:d,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),K&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:o||"",className:u.twMerge("line-clamp-1 w-full text-left",l)})}))]}))}),e.jsx(r.Panel,{children:e.jsxs("div",Object.assign({className:u.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",p)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(n.default,{label:j||"Account",className:u.twMerge("text-sm font-semibold text-dark-blackCoral",h)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 mt-2 gap-x-2"},{children:[v?e.jsx("img",{src:v||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:u.twMerge("w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded",w)},{children:e.jsx(n.default,{label:y,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",C)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(n.default,{label:S||"",className:u.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",k)}),e.jsx(n.default,{label:N||"",className:u.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",M)})]}))]})),e.jsxs("button",Object.assign({className:u.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",T),onClick:()=>{s(),null==O||O()}},{children:[e.jsx(i,{name:P||"configuration",className:u.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(n.default,{label:A||"Manage Account",className:u.twMerge("text-sm font-normal text-dark-blackCoral",B)})]})),e.jsxs("button",Object.assign({className:u.twMerge("flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",H),onClick:()=>{s(),null==E||E()}},{children:[e.jsx(i,{name:F||"language",className:u.twMerge("w-4 h-4 fill-dark-gumbo",D)}),e.jsx(n.default,{label:I||"Translate Page",className:u.twMerge("text-sm font-normal text-dark-blackCoral",L)})]})),e.jsx("div",{className:"h-[1px] w-full bg-dark-silver"}),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent",onClick:()=>{s(),null==V||V()}},{children:[e.jsx(i,{name:z||"logout",className:u.twMerge("w-4 h-4 fill-dark-gumbo",G)}),e.jsx(n.default,{label:R||"Logout",className:u.twMerge("text-sm font-normal text-dark-blackCoral",U)})]}))]}))})]})}))})),e.jsx(x,{})]}))})};h.displayName="UserProfile",b.UserProfile=h;const v=({isCollapsed:s,isShowCompanyProfile:l,companyName:i,companyNameStyles:r,companyLogo:c,companyLogoStyles:d,companyLogoFallback:x,companlogoFallbackStyles:g,companyLogoContainerStyles:b,isShowButtonChangeCompany:f,buttonChangeCompanyOnClick:p,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:v,buttonChangeCompanyIconStyles:w,appName:y,appVersion:C,children:S})=>{const[k,N]=m.default.useState(!1);return a.useEffect((()=>{s?N(!1):setTimeout((()=>{N(!0)}),200)}),[s]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"px-2 pt-2"},{children:[l&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[c?e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx("img",{src:c||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:u.twMerge("w-4 h-4",d)})})):e.jsx("div",Object.assign({className:u.twMerge("flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded",b)},{children:e.jsx(n.default,{label:x,className:u.twMerge("font-semibold text-sidebar-avatar-text-default text-[10px]",g)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:i||"Gajicermat",className:u.twMerge("text-sidebar-companyNameText-default text-xs line-clamp-2",r)})}))]})),f&&e.jsx("div",Object.assign({className:"flex flex-row items-center w-full h-14"},{children:e.jsx(o.default,{variant:"secondary",onClick:()=>null==p?void 0:p(),label:k?j||"Select Company":"",className:u.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0",k?"w-full":"w-6"),h),rightIcon:k?void 0:v||"refresh",rightIconStyles:u.twMerge("ml-0 w-3 h-3",w)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center w-full mt-2 gap-x-2 min-h-4"},{children:k?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal"})})),e.jsx("div",{className:"w-[1px] h-3 bg-sidebar-appVersionText-default"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(n.default,{label:C||"Version 0.0.0",className:"text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};v.displayName="Footer",b.Footer=v,module.exports=b;
|
|
2
2
|
//# sourceMappingURL=Sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../../src/blocks/Sidebar/Sidebar.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-identical-functions */\nimport classNames from 'classnames';\nimport React, { Children, useEffect } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n BaseBadge,\n BaseButton,\n BaseButtonIcon,\n BasePopover,\n BaseText,\n Icon\n} from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport {\n SidebarFooterInterface,\n SidebarHeaderInterface,\n SidebarInterface,\n SidebarMenuExtendedInterface,\n SidebarMenuInterface,\n SidebarPopoverInterface,\n SidebarUserProfileInterface\n} from './Sidebar.type';\n\nconst Divider = () => <div className='w-full h-[1px] bg-sidebar-separator-default' />;\n\n// TODO: tidy up interface\nconst SidebarMenu = ({\n id,\n title,\n titleStyles,\n icon,\n iconStyles,\n subMenu,\n isCollapsed,\n activeId,\n selectedId,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n itemMenuContainerStyles,\n itemMenuActiveContainerStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveContainerStyles,\n itemSubMenuActiveTextColor,\n onClickCollapsible,\n onExpand,\n onClickNav,\n notifcationCount\n}: SidebarMenuInterface & SidebarMenuExtendedInterface) => {\n const expanded = selectedId === id;\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMenuMouseEnter, setIsMenuMouseEnter] = React.useState<boolean>(false);\n const [isMenuMouseDown, setIsMenuMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <div\n className={twMerge(\n `overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${\n expanded\n ? itemMenuActiveContainerStyles || 'bg-sidebar-menu-background-active'\n : 'bg-transparent'\n }`,\n itemMenuContainerStyles\n )}\n style={{ backgroundColor: expanded ? itemMenuActiveBgColor : undefined }}\n >\n <button\n onClick={() => {\n if (!isShow && !expanded) onClickCollapsible();\n\n if (expanded) {\n onExpand('');\n return;\n }\n\n onExpand(id);\n }}\n className='h-8 pr-4 pl-3 w-full bg-transparent relative'\n onMouseDown={() => setIsMenuMouseDown(true)}\n onMouseUp={() => setIsMenuMouseDown(false)}\n onMouseEnter={() => setIsMenuMouseEnter(true)}\n onMouseLeave={() => setIsMenuMouseEnter(false)}\n >\n <div className='flex flex-row items-center gap-x-2'>\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-menu-textAndIcon-default',\n isMenuMouseEnter && 'fill-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'fill-sidebar-menu-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={title}\n className={twMerge(\n classNames(\n 'text-sidebar-menu-textAndIcon-default text-sm text-left line-clamp-1 w-full',\n isMenuMouseEnter && 'text-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'text-sidebar-menu-textAndIcon-active'\n ),\n titleStyles\n )}\n />\n </div>\n )}\n {!!notifcationCount && (\n <BaseBadge\n label={notifcationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </div>\n </button>\n\n <div\n className={`flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out ${\n expanded && isShow ? 'max-h-screen bg-sidebar-submenu-background-default' : 'max-h-0 '\n }`}\n style={{ backgroundColor: expanded && isShow ? itemMenuActiveBgColor : 'transparent' }}\n >\n {subMenu.map((item, index) => (\n <button\n key={index}\n onClick={() => onClickNav(item)}\n className={twMerge(\n `\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 ${\n item.navLink === activeId\n ? `pl-11 ${\n itemSubMenuActiveContainerStyles || 'text-sidebar-submenu-textAndIcon-active'\n }`\n : ''\n }`,\n itemSubMenuContainerStyles\n )}\n style={{ color: item.navLink === activeId ? itemSubMenuActiveTextColor : undefined }}\n >\n <BaseText\n label={item.title}\n className={`text-xs text-left line-clamp-1 w-full ${\n item.navLink === activeId ? 'font-semibold' : 'font-normal'\n } `}\n />\n </button>\n ))}\n </div>\n </div>\n );\n};\n\nconst Sidebar = ({\n activeId,\n activeParent,\n data,\n isCollapsed,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n containerStyles,\n itemMenuContainerStyles,\n itemMenuIconStyles,\n itemMenuTitleStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveTextColor,\n toggleButtonContainerStyles,\n toggleIconOpenName,\n toggleIconCloseName,\n toggleIconStyles,\n onClickCollapsible,\n onClickNav,\n children\n}: SidebarInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n const userProfile = getChildrenOnDisplayName(children, 'UserProfile');\n\n const [selectedId, setSelectedId] = React.useState<string>(activeParent);\n\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={twMerge(\n 'flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default',\n containerStyles\n )}\n >\n {/* Header */}\n {header}\n\n <BaseButtonIcon\n variant='tertiary'\n onClick={() => onClickCollapsible()}\n iconName={\n isCollapsed\n ? toggleIconCloseName || 'chevronDoubleArrowRight'\n : toggleIconOpenName || 'chevronDoubleArrowLeft'\n }\n iconStyles={twMerge('w-[7.5px] h-[7.5px]', toggleIconStyles)}\n className={twMerge('w-6 h-6 absolute top-14 -right-3', toggleButtonContainerStyles)}\n />\n\n {/* Content */}\n <div className='flex flex-1 flex-col overflow-auto mb-4 scrollbar scrollbar-none'>\n <div className='flex flex-col justify-start flex-1'>\n {data.map((item, index) => (\n <SidebarMenu\n key={index}\n selectedId={selectedId}\n id={item.id}\n title={item.title}\n icon={item.icon}\n permission={item.permission}\n isCollapsed={isCollapsed}\n activeId={activeId}\n subMenu={item.subMenu}\n onClickCollapsible={() => onClickCollapsible()}\n onExpand={(id) => setSelectedId(id)}\n onClickNav={(navLink) => onClickNav(navLink)}\n notifcationCount={item.notifcationCount}\n notificationCountContainerStyles={notificationCountContainerStyles}\n notificationCountTextStyles={notificationCountTextStyles}\n itemMenuActiveBgColor={itemMenuActiveBgColor}\n itemMenuContainerStyles={itemMenuContainerStyles}\n itemSubMenuActiveTextColor={itemSubMenuActiveTextColor}\n itemSubMenuContainerStyles={itemSubMenuContainerStyles}\n iconStyles={itemMenuIconStyles}\n titleStyles={itemMenuTitleStyles}\n />\n ))}\n </div>\n </div>\n\n <div className='mb-2'>\n {Children.map(arrayChildren, (item, index) => {\n const child = getChildrenOnDisplayName(item, 'Popover');\n return (\n <div key={index} className='w-full'>\n {child}\n </div>\n );\n })}\n </div>\n\n {/* User */}\n {userProfile}\n\n {/* Company */}\n {footer}\n </div>\n );\n};\n\nconst Popover = ({\n isCollapsed,\n label,\n labelStyles,\n icon,\n iconStyles,\n notificationCount,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n position,\n iconTriangleStyles,\n iconTriangleContainerStyles,\n panelContainerStyles,\n offsetX,\n offsetY,\n containerStyles,\n isAutoFlip,\n children\n}: SidebarPopoverInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);\n const [isMouseDown, setIsMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <BasePopover\n position={position || 'right-start'}\n iconTriangleStyles={iconTriangleStyles}\n iconTriangleContainerStyles={iconTriangleContainerStyles}\n panelContainerStyles={panelContainerStyles}\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n >\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <button\n className={twMerge(\n classNames(\n `\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n `,\n open && 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n onMouseDown={() => setIsMouseDown(true)}\n onMouseUp={() => setIsMouseDown(false)}\n onMouseEnter={() => setIsMouseEnter(true)}\n onMouseLeave={() => setIsMouseEnter(false)}\n >\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default',\n isMouseEnter && 'fill-sidebar-notificationButton-textAndIcon-hover',\n isMouseDown && 'fill-sidebar-notificationButton-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={label}\n className={twMerge('text-sm text-left line-clamp-1 w-full', labelStyles)}\n />\n </div>\n )}\n {!!notificationCount && (\n <BaseBadge\n label={notificationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </button>\n </BasePopover.Button>\n <BasePopover.Panel>\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'PopoverPanel'\n )}\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n );\n};\nPopover.displayName = 'Popover';\nSidebar.Popover = Popover;\n\nconst PopoverPanel = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\nPopoverPanel.displayName = 'PopoverPanel';\nSidebar.PopoverPanel = PopoverPanel;\n\nconst Header = ({\n isCollapsed,\n appLogoClosed,\n appLogoClosedStyles,\n appLogoOpened,\n appLogoOpenedStyles,\n containerStyles,\n onClickHeaderSidebar,\n children\n}: SidebarHeaderInterface) => {\n // TODO: create hooks for code below\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div\n className={twMerge(\n 'flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer',\n containerStyles\n )}\n onClick={() => onClickHeaderSidebar?.()}\n >\n {isShow ? (\n <div className='flex flex-1'>\n <img\n src={\n appLogoOpened ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg'\n }\n className={twMerge('w-[113px] h-7', appLogoOpenedStyles)}\n />\n </div>\n ) : (\n <img\n src={\n appLogoClosed ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-[22px] h-[22px]', appLogoClosedStyles)}\n />\n )}\n </div>\n )}\n </>\n );\n};\nHeader.displayName = 'Header';\nSidebar.Header = Header;\n\nconst UserProfile = ({\n isCollapsed,\n userLabel,\n userLabelStyles,\n userAvatar,\n userAvatarFallback,\n userAvatarFallbackStyles,\n userAvatarStyles,\n containerStyles,\n // Panel\n panelContainerStyles,\n titleAtPanel,\n titleAtPanelStyles,\n userAvatarAtPanel,\n userAvatarAtPanelStyles,\n userAvatarFallbackAtPanel,\n userAvatarFallbackAtPanelStyles,\n userLabelAtPanel,\n userLabelAtPanelStyles,\n userEmailAtPanel,\n userEmailAtPanelStyles,\n manageAccountLabelAtPanel,\n manageAccountLabelAtPanelStyles,\n iconManageAccountAtPanel,\n iconManageAccountAtPanelStyles,\n onClickManageAccount,\n manageAccountContainerStyles,\n translationLabelAtPanel,\n translationLabelAtPanelStyles,\n iconTranslationAtPanel,\n iconTranslationAtPanelStyles,\n onClickTranslation,\n translationContainerStyles,\n logoutLabelAtPanel,\n logoutLabelAtPanelStyles,\n iconLogoutAtPanel,\n iconLogoutAtPanelStyles,\n onClickLogout,\n children,\n offsetX,\n offsetY,\n position,\n isAutoFlip\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarUserProfileInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className={twMerge('flex flex-col w-full')}>\n <Divider />\n <div className='relative min-h-[56px] flex items-center w-full'>\n <BasePopover\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n panelContainerStyles={panelContainerStyles}\n containerStyles='w-full'\n position={position}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <div\n className={twMerge(\n classNames(\n `\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n `,\n open &&\n 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n >\n {userAvatar ? (\n <img\n src={\n userAvatar ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n userAvatarStyles\n )}\n >\n <BaseText\n label={userAvatarFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackStyles\n )}\n />\n </div>\n )}\n\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={userLabel || ''}\n className={twMerge('line-clamp-1 w-full text-left', userLabelStyles)}\n />\n </div>\n )}\n </div>\n </BasePopover.Button>\n <BasePopover.Panel>\n <div\n className={twMerge(\n 'flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]',\n panelContainerStyles\n )}\n >\n <div className='px-4'>\n <BaseText\n label={titleAtPanel || 'Account'}\n className={twMerge(\n 'text-sm font-semibold text-dark-blackCoral',\n titleAtPanelStyles\n )}\n />\n </div>\n <div className='flex flex-row items-center px-4 gap-x-2 mt-2'>\n {userAvatarAtPanel ? (\n <img\n src={\n userAvatarAtPanel ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarAtPanelStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded',\n userAvatarAtPanelStyles\n )}\n >\n <BaseText\n label={userAvatarFallbackAtPanel}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackAtPanelStyles\n )}\n />\n </div>\n )}\n\n <div className='flex flex-col'>\n <BaseText\n label={userLabelAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-sm text-dark-blackCoral',\n userLabelAtPanelStyles\n )}\n />\n <BaseText\n label={userEmailAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo',\n userEmailAtPanelStyles\n )}\n />\n </div>\n </div>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent',\n manageAccountContainerStyles\n )}\n onClick={() => {\n close();\n onClickManageAccount?.();\n }}\n >\n <Icon\n name={iconManageAccountAtPanel || 'configuration'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconManageAccountAtPanelStyles\n )}\n />\n <BaseText\n label={manageAccountLabelAtPanel || 'Manage Account'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n manageAccountLabelAtPanelStyles\n )}\n />\n </button>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent',\n translationContainerStyles\n )}\n onClick={() => {\n close();\n onClickTranslation?.();\n }}\n >\n <Icon\n name={iconTranslationAtPanel || 'language'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconTranslationAtPanelStyles\n )}\n />\n <BaseText\n label={translationLabelAtPanel || 'Translate Page'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n translationLabelAtPanelStyles\n )}\n />\n </button>\n <div className='h-[1px] w-full bg-dark-silver' />\n <button\n className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent'\n onClick={() => {\n close();\n onClickLogout?.();\n }}\n >\n <Icon\n name={iconLogoutAtPanel || 'logout'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconLogoutAtPanelStyles)}\n />\n <BaseText\n label={logoutLabelAtPanel || 'Logout'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n logoutLabelAtPanelStyles\n )}\n />\n </button>\n </div>\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n </div>\n <Divider />\n </div>\n )}\n </>\n );\n};\nUserProfile.displayName = 'UserProfile';\nSidebar.UserProfile = UserProfile;\n\nconst Footer = ({\n isCollapsed,\n isShowCompanyProfile,\n companyName,\n companyNameStyles,\n companyLogo,\n companyLogoStyles,\n companyLogoFallback,\n companlogoFallbackStyles,\n companyLogoContainerStyles,\n isShowButtonChangeCompany,\n buttonChangeCompanyOnClick,\n buttonChangeCompanyLabel,\n buttonChangeCompanyStyles,\n buttonChangeCompanyIconName,\n buttonChangeCompanyIconStyles,\n appName,\n appVersion,\n children\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarFooterInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className='pt-2 px-2'>\n {isShowCompanyProfile && (\n <div className='flex flex-row items-center gap-x-2'>\n {companyLogo ? (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <img\n src={\n companyLogo ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-4 h-4', companyLogoStyles)}\n />\n </div>\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <BaseText\n label={companyLogoFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n companlogoFallbackStyles\n )}\n />\n </div>\n )}\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={companyName || 'Gajicermat'}\n className={twMerge(\n 'text-sidebar-companyNameText-default text-xs line-clamp-2',\n companyNameStyles\n )}\n />\n </div>\n )}\n </div>\n )}\n\n {isShowButtonChangeCompany && (\n <div className='h-14 w-full flex flex-row items-center'>\n <BaseButton\n variant='secondary'\n onClick={() => buttonChangeCompanyOnClick?.()}\n label={isShow ? buttonChangeCompanyLabel || 'Select Company' : ''}\n className={twMerge(\n classNames(\n 'flex items-center justify-center p-0 h-6 ml-0',\n isShow ? 'w-full' : 'w-6'\n ),\n buttonChangeCompanyStyles\n )}\n rightIcon={isShow ? undefined : buttonChangeCompanyIconName || 'refresh'}\n rightIconStyles={twMerge('ml-0 w-3 h-3', buttonChangeCompanyIconStyles)}\n />\n </div>\n )}\n\n <div className='flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full'>\n {isShow ? (\n <>\n <div className='flex flex-1'>\n <BaseText\n label={appName || '© Gajicermat Digital Mandiri'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal'\n />\n </div>\n <div className='w-[1px] h-3 bg-sidebar-appVersionText-default' />\n <div className='flex flex-1'>\n <BaseText\n label={appVersion || 'Version 0.0.0'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal'\n />\n </div>\n </>\n ) : (\n <div className='w-[1px] h-3 ' />\n )}\n </div>\n </div>\n )}\n </>\n );\n};\nFooter.displayName = 'Footer';\nSidebar.Footer = Footer;\n\nexport default Sidebar;\n"],"names":["Divider","_jsx","className","SidebarMenu","id","title","titleStyles","icon","iconStyles","subMenu","isCollapsed","activeId","selectedId","notificationCountContainerStyles","notificationCountTextStyles","itemMenuContainerStyles","itemMenuActiveContainerStyles","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","isMenuMouseEnter","setIsMenuMouseEnter","isMenuMouseDown","setIsMenuMouseDown","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","jsx","Icon","name","classNames","BaseText","label","BaseBadge","toString","labelStyles","containerStyles","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","toggleButtonContainerStyles","toggleIconOpenName","toggleIconCloseName","toggleIconStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","BaseButtonIcon","variant","iconName","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","isAutoFlip","isMouseEnter","setIsMouseEnter","isMouseDown","setIsMouseDown","BasePopover","open","close","_Fragment","Button","Panel","displayName","PopoverPanel","Fragment","Header","appLogoClosed","appLogoClosedStyles","appLogoOpened","appLogoOpenedStyles","onClickHeaderSidebar","src","UserProfile","userLabel","userLabelStyles","userAvatar","userAvatarFallback","userAvatarFallbackStyles","userAvatarStyles","titleAtPanel","titleAtPanelStyles","userAvatarAtPanel","userAvatarAtPanelStyles","userAvatarFallbackAtPanel","userAvatarFallbackAtPanelStyles","userLabelAtPanel","userLabelAtPanelStyles","userEmailAtPanel","userEmailAtPanelStyles","manageAccountLabelAtPanel","manageAccountLabelAtPanelStyles","iconManageAccountAtPanel","iconManageAccountAtPanelStyles","onClickManageAccount","manageAccountContainerStyles","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","translationContainerStyles","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","rightIcon","rightIconStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../../src/blocks/Sidebar/Sidebar.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-identical-functions */\nimport classNames from 'classnames';\nimport React, { Children, useEffect } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n BaseBadge,\n BaseButton,\n BaseButtonIcon,\n BasePopover,\n BaseText,\n Icon\n} from '../../components';\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport {\n SidebarFooterInterface,\n SidebarHeaderInterface,\n SidebarInterface,\n SidebarMenuExtendedInterface,\n SidebarMenuInterface,\n SidebarPopoverInterface,\n SidebarUserProfileInterface\n} from './Sidebar.type';\n\nconst Divider = () => <div className='w-full h-[1px] bg-sidebar-separator-default' />;\n\n// TODO: tidy up interface\nconst SidebarMenu = ({\n id,\n title,\n titleStyles,\n icon,\n iconStyles,\n subMenu,\n isCollapsed,\n activeId,\n selectedId,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n itemMenuContainerStyles,\n itemMenuActiveContainerStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveContainerStyles,\n itemSubMenuActiveTextColor,\n onClickCollapsible,\n onExpand,\n onClickNav,\n notifcationCount\n}: SidebarMenuInterface & SidebarMenuExtendedInterface) => {\n const expanded = selectedId === id;\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMenuMouseEnter, setIsMenuMouseEnter] = React.useState<boolean>(false);\n const [isMenuMouseDown, setIsMenuMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <div\n className={twMerge(\n `overflow-hidden hover:bg-sidebar-menu-background-hover rounded-lg ${\n expanded\n ? itemMenuActiveContainerStyles || 'bg-sidebar-menu-background-active'\n : 'bg-transparent'\n }`,\n itemMenuContainerStyles\n )}\n style={{ backgroundColor: expanded ? itemMenuActiveBgColor : undefined }}\n >\n <button\n onClick={() => {\n if (!isShow && !expanded) onClickCollapsible();\n\n if (expanded) {\n onExpand('');\n return;\n }\n\n onExpand(id);\n }}\n className='relative w-full pl-3 pr-4 bg-transparent min-h-8'\n onMouseDown={() => setIsMenuMouseDown(true)}\n onMouseUp={() => setIsMenuMouseDown(false)}\n onMouseEnter={() => setIsMenuMouseEnter(true)}\n onMouseLeave={() => setIsMenuMouseEnter(false)}\n >\n <div className='flex flex-row items-center gap-x-2'>\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-menu-textAndIcon-default',\n isMenuMouseEnter && 'fill-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'fill-sidebar-menu-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={title}\n className={twMerge(\n classNames(\n 'text-sidebar-menu-textAndIcon-default text-sm text-left w-full line-clamp-1',\n isMenuMouseEnter && 'text-sidebar-menu-textAndIcon-hover',\n isMenuMouseDown && 'text-sidebar-menu-textAndIcon-active'\n ),\n titleStyles\n )}\n />\n </div>\n )}\n {!!notifcationCount && (\n <BaseBadge\n label={notifcationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center min-w-[16px] h-4 rounded-full p-0.5 bg-sidebar-notificationBadge-background-default',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </div>\n </button>\n\n <div\n className={`flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out ${\n expanded && isShow ? 'max-h-screen bg-sidebar-submenu-background-default' : 'max-h-0 '\n }`}\n style={{ backgroundColor: expanded && isShow ? itemMenuActiveBgColor : 'transparent' }}\n >\n {subMenu.map((item, index) => (\n <button\n key={index}\n onClick={() => onClickNav(item)}\n className={twMerge(\n `\n flex flex-1 py-2 \n bg-sidebar-submenu-background-default active:bg-sidebar-submenu-background-active hover:bg-sidebar-submenu-background-hover \n text-sidebar-submenu-textAndIcon-default active:text-sidebar-submenu-textAndIcon-active hover:text-sidebar-submenu-textAndIcon-hover \n pl-8 ${\n item.navLink === activeId\n ? `pl-11 ${\n itemSubMenuActiveContainerStyles || 'text-sidebar-submenu-textAndIcon-active'\n }`\n : ''\n }`,\n itemSubMenuContainerStyles\n )}\n style={{ color: item.navLink === activeId ? itemSubMenuActiveTextColor : undefined }}\n >\n <BaseText\n label={item.title}\n className={`text-xs text-left line-clamp-1 w-full ${\n item.navLink === activeId ? 'font-semibold' : 'font-normal'\n } `}\n />\n </button>\n ))}\n </div>\n </div>\n );\n};\n\nconst Sidebar = ({\n activeId,\n activeParent,\n data,\n isCollapsed,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n containerStyles,\n itemMenuContainerStyles,\n itemMenuIconStyles,\n itemMenuTitleStyles,\n itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\n itemSubMenuActiveTextColor,\n toggleButtonContainerStyles,\n toggleIconOpenName,\n toggleIconCloseName,\n toggleIconStyles,\n onClickCollapsible,\n onClickNav,\n children\n}: SidebarInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n const userProfile = getChildrenOnDisplayName(children, 'UserProfile');\n\n const [selectedId, setSelectedId] = React.useState<string>(activeParent);\n\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={twMerge(\n 'flex flex-col relative h-full px-2 pb-2 ease-in-out duration-300 w-[220px] bg-sidebar-background-default',\n containerStyles\n )}\n >\n {/* Header */}\n {header}\n\n <BaseButtonIcon\n variant='tertiary'\n onClick={() => onClickCollapsible()}\n iconName={\n isCollapsed\n ? toggleIconCloseName || 'chevronDoubleArrowRight'\n : toggleIconOpenName || 'chevronDoubleArrowLeft'\n }\n iconStyles={twMerge('w-[7.5px] h-[7.5px]', toggleIconStyles)}\n className={twMerge('w-6 h-6 absolute top-14 -right-3', toggleButtonContainerStyles)}\n />\n\n {/* Content */}\n <div className='flex flex-col flex-1 mb-4 overflow-auto scrollbar scrollbar-none'>\n <div className='flex flex-col justify-start flex-1'>\n {data.map((item, index) => (\n <SidebarMenu\n key={index}\n selectedId={selectedId}\n id={item.id}\n title={item.title}\n icon={item.icon}\n permission={item.permission}\n isCollapsed={isCollapsed}\n activeId={activeId}\n subMenu={item.subMenu}\n onClickCollapsible={() => onClickCollapsible()}\n onExpand={(id) => setSelectedId(id)}\n onClickNav={(navLink) => onClickNav(navLink)}\n notifcationCount={item.notifcationCount}\n notificationCountContainerStyles={notificationCountContainerStyles}\n notificationCountTextStyles={notificationCountTextStyles}\n itemMenuActiveBgColor={itemMenuActiveBgColor}\n itemMenuContainerStyles={itemMenuContainerStyles}\n itemSubMenuActiveTextColor={itemSubMenuActiveTextColor}\n itemSubMenuContainerStyles={itemSubMenuContainerStyles}\n iconStyles={itemMenuIconStyles}\n titleStyles={itemMenuTitleStyles}\n />\n ))}\n </div>\n </div>\n\n <div className='mb-2'>\n {Children.map(arrayChildren, (item, index) => {\n const child = getChildrenOnDisplayName(item, 'Popover');\n return (\n <div key={index} className='w-full'>\n {child}\n </div>\n );\n })}\n </div>\n\n {/* User */}\n {userProfile}\n\n {/* Company */}\n {footer}\n </div>\n );\n};\n\nconst Popover = ({\n isCollapsed,\n label,\n labelStyles,\n icon,\n iconStyles,\n notificationCount,\n notificationCountContainerStyles,\n notificationCountTextStyles,\n position,\n iconTriangleStyles,\n iconTriangleContainerStyles,\n panelContainerStyles,\n offsetX,\n offsetY,\n containerStyles,\n isAutoFlip,\n children\n}: SidebarPopoverInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n const [isMouseEnter, setIsMouseEnter] = React.useState<boolean>(false);\n const [isMouseDown, setIsMouseDown] = React.useState<boolean>(false);\n\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <BasePopover\n position={position || 'right-start'}\n iconTriangleStyles={iconTriangleStyles}\n iconTriangleContainerStyles={iconTriangleContainerStyles}\n panelContainerStyles={panelContainerStyles}\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n >\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <button\n className={twMerge(\n classNames(\n `\n h-8 pr-4 pl-3 w-full relative flex flex-row items-center rounded-lg gap-x-2\n bg-sidebar-notificationButton-background-default active:bg-sidebar-notificationButton-background-active hover:bg-sidebar-notificationButton-background-hover\n text-sidebar-notificationButton-textAndIcon-default active:text-sidebar-notificationButton-textAndIcon-active hover:text-sidebar-notificationButton-textAndIcon-hover\n `,\n open && 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n onMouseDown={() => setIsMouseDown(true)}\n onMouseUp={() => setIsMouseDown(false)}\n onMouseEnter={() => setIsMouseEnter(true)}\n onMouseLeave={() => setIsMouseEnter(false)}\n >\n <div className='w-4 h-4'>\n <Icon\n name={icon}\n className={twMerge(\n classNames(\n 'w-4 h-4 fill-sidebar-notificationButton-textAndIcon-default',\n isMouseEnter && 'fill-sidebar-notificationButton-textAndIcon-hover',\n isMouseDown && 'fill-sidebar-notificationButton-textAndIcon-active'\n ),\n iconStyles\n )}\n />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={label}\n className={twMerge('text-sm text-left line-clamp-1 w-full', labelStyles)}\n />\n </div>\n )}\n {!!notificationCount && (\n <BaseBadge\n label={notificationCount.toString()}\n labelStyles={twMerge(\n 'text-[10px] text-sidebar-notificationBadge-textAndIcon-default',\n notificationCountTextStyles\n )}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-sidebar-notificationBadge-background-default min-w-[16px] h-4 rounded-full p-0.5',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </button>\n </BasePopover.Button>\n <BasePopover.Panel>\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'PopoverPanel'\n )}\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n );\n};\nPopover.displayName = 'Popover';\nSidebar.Popover = Popover;\n\nconst PopoverPanel = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\nPopoverPanel.displayName = 'PopoverPanel';\nSidebar.PopoverPanel = PopoverPanel;\n\nconst Header = ({\n isCollapsed,\n appLogoClosed,\n appLogoClosedStyles,\n appLogoOpened,\n appLogoOpenedStyles,\n containerStyles,\n onClickHeaderSidebar,\n children\n}: SidebarHeaderInterface) => {\n // TODO: create hooks for code below\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div\n className={twMerge(\n 'flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer',\n containerStyles\n )}\n onClick={() => onClickHeaderSidebar?.()}\n >\n {isShow ? (\n <div className='flex flex-1'>\n <img\n src={\n appLogoOpened ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg'\n }\n className={twMerge('w-[113px] h-7', appLogoOpenedStyles)}\n />\n </div>\n ) : (\n <img\n src={\n appLogoClosed ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-[22px] h-[22px]', appLogoClosedStyles)}\n />\n )}\n </div>\n )}\n </>\n );\n};\nHeader.displayName = 'Header';\nSidebar.Header = Header;\n\nconst UserProfile = ({\n isCollapsed,\n userLabel,\n userLabelStyles,\n userAvatar,\n userAvatarFallback,\n userAvatarFallbackStyles,\n userAvatarStyles,\n containerStyles,\n // Panel\n panelContainerStyles,\n titleAtPanel,\n titleAtPanelStyles,\n userAvatarAtPanel,\n userAvatarAtPanelStyles,\n userAvatarFallbackAtPanel,\n userAvatarFallbackAtPanelStyles,\n userLabelAtPanel,\n userLabelAtPanelStyles,\n userEmailAtPanel,\n userEmailAtPanelStyles,\n manageAccountLabelAtPanel,\n manageAccountLabelAtPanelStyles,\n iconManageAccountAtPanel,\n iconManageAccountAtPanelStyles,\n onClickManageAccount,\n manageAccountContainerStyles,\n translationLabelAtPanel,\n translationLabelAtPanelStyles,\n iconTranslationAtPanel,\n iconTranslationAtPanelStyles,\n onClickTranslation,\n translationContainerStyles,\n logoutLabelAtPanel,\n logoutLabelAtPanelStyles,\n iconLogoutAtPanel,\n iconLogoutAtPanelStyles,\n onClickLogout,\n children,\n offsetX,\n offsetY,\n position,\n isAutoFlip\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarUserProfileInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className={twMerge('flex flex-col w-full')}>\n <Divider />\n <div className='relative min-h-[56px] flex items-center w-full'>\n <BasePopover\n offsetX={offsetX}\n offsetY={offsetY}\n isAutoFlip={isAutoFlip}\n panelContainerStyles={panelContainerStyles}\n containerStyles='w-full'\n position={position}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open, close }) => {\n return (\n <>\n <BasePopover.Button>\n <div\n className={twMerge(\n classNames(\n `\n w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg \n bg-sidebar-profile-background-default active:bg-sidebar-profile-background-active hover:bg-sidebar-profile-background-hover \n text-sidebar-profile-text-default active:text-sidebar-profile-text-active hover:text-sidebar-profile-text-hover\n cursor-pointer\n `,\n open &&\n 'bg-sidebar-profile-background-active text-sidebar-profile-text-active'\n ),\n containerStyles\n )}\n >\n {userAvatar ? (\n <img\n src={\n userAvatar ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-6 h-6 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n userAvatarStyles\n )}\n >\n <BaseText\n label={userAvatarFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackStyles\n )}\n />\n </div>\n )}\n\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={userLabel || ''}\n className={twMerge('line-clamp-1 w-full text-left', userLabelStyles)}\n />\n </div>\n )}\n </div>\n </BasePopover.Button>\n <BasePopover.Panel>\n <div\n className={twMerge(\n 'flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]',\n panelContainerStyles\n )}\n >\n <div className='px-4'>\n <BaseText\n label={titleAtPanel || 'Account'}\n className={twMerge(\n 'text-sm font-semibold text-dark-blackCoral',\n titleAtPanelStyles\n )}\n />\n </div>\n <div className='flex flex-row items-center px-4 mt-2 gap-x-2'>\n {userAvatarAtPanel ? (\n <img\n src={\n userAvatarAtPanel ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png'\n }\n className={twMerge(\n 'w-8 h-8 bg-sidebar-avatar-background-default rounded overflow-hidden object-cover',\n userAvatarAtPanelStyles\n )}\n />\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-8 h-8 bg-sidebar-avatar-background-default rounded',\n userAvatarAtPanelStyles\n )}\n >\n <BaseText\n label={userAvatarFallbackAtPanel}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n userAvatarFallbackAtPanelStyles\n )}\n />\n </div>\n )}\n\n <div className='flex flex-col'>\n <BaseText\n label={userLabelAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-sm text-dark-blackCoral',\n userLabelAtPanelStyles\n )}\n />\n <BaseText\n label={userEmailAtPanel || ''}\n className={twMerge(\n 'w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo',\n userEmailAtPanelStyles\n )}\n />\n </div>\n </div>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent',\n manageAccountContainerStyles\n )}\n onClick={() => {\n close();\n onClickManageAccount?.();\n }}\n >\n <Icon\n name={iconManageAccountAtPanel || 'configuration'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconManageAccountAtPanelStyles\n )}\n />\n <BaseText\n label={manageAccountLabelAtPanel || 'Manage Account'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n manageAccountLabelAtPanelStyles\n )}\n />\n </button>\n <button\n className={twMerge(\n 'flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent',\n translationContainerStyles\n )}\n onClick={() => {\n close();\n onClickTranslation?.();\n }}\n >\n <Icon\n name={iconTranslationAtPanel || 'language'}\n className={twMerge(\n 'w-4 h-4 fill-dark-gumbo',\n iconTranslationAtPanelStyles\n )}\n />\n <BaseText\n label={translationLabelAtPanel || 'Translate Page'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n translationLabelAtPanelStyles\n )}\n />\n </button>\n <div className='h-[1px] w-full bg-dark-silver' />\n <button\n className='flex flex-row items-center px-4 gap-x-2 mt-3 mb-0.5 bg-transparent'\n onClick={() => {\n close();\n onClickLogout?.();\n }}\n >\n <Icon\n name={iconLogoutAtPanel || 'logout'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconLogoutAtPanelStyles)}\n />\n <BaseText\n label={logoutLabelAtPanel || 'Logout'}\n className={twMerge(\n 'text-sm font-normal text-dark-blackCoral',\n logoutLabelAtPanelStyles\n )}\n />\n </button>\n </div>\n </BasePopover.Panel>\n </>\n );\n }}\n </BasePopover>\n </div>\n <Divider />\n </div>\n )}\n </>\n );\n};\nUserProfile.displayName = 'UserProfile';\nSidebar.UserProfile = UserProfile;\n\nconst Footer = ({\n isCollapsed,\n isShowCompanyProfile,\n companyName,\n companyNameStyles,\n companyLogo,\n companyLogoStyles,\n companyLogoFallback,\n companlogoFallbackStyles,\n companyLogoContainerStyles,\n isShowButtonChangeCompany,\n buttonChangeCompanyOnClick,\n buttonChangeCompanyLabel,\n buttonChangeCompanyStyles,\n buttonChangeCompanyIconName,\n buttonChangeCompanyIconStyles,\n appName,\n appVersion,\n children\n}: // eslint-disable-next-line sonarjs/cognitive-complexity\nSidebarFooterInterface) => {\n const [isShow, setIsShow] = React.useState<boolean>(false);\n useEffect(() => {\n if (!isCollapsed) {\n setTimeout(() => {\n setIsShow(true);\n }, 200);\n } else {\n setIsShow(false);\n }\n }, [isCollapsed]);\n\n return (\n <>\n {children ? (\n children\n ) : (\n <div className='px-2 pt-2'>\n {isShowCompanyProfile && (\n <div className='flex flex-row items-center gap-x-2'>\n {companyLogo ? (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <img\n src={\n companyLogo ||\n 'https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg'\n }\n className={twMerge('w-4 h-4', companyLogoStyles)}\n />\n </div>\n ) : (\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 bg-sidebar-avatar-background-default rounded',\n companyLogoContainerStyles\n )}\n >\n <BaseText\n label={companyLogoFallback}\n className={twMerge(\n 'font-semibold text-sidebar-avatar-text-default text-[10px]',\n companlogoFallbackStyles\n )}\n />\n </div>\n )}\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={companyName || 'Gajicermat'}\n className={twMerge(\n 'text-sidebar-companyNameText-default text-xs line-clamp-2',\n companyNameStyles\n )}\n />\n </div>\n )}\n </div>\n )}\n\n {isShowButtonChangeCompany && (\n <div className='flex flex-row items-center w-full h-14'>\n <BaseButton\n variant='secondary'\n onClick={() => buttonChangeCompanyOnClick?.()}\n label={isShow ? buttonChangeCompanyLabel || 'Select Company' : ''}\n className={twMerge(\n classNames(\n 'flex items-center justify-center p-0 h-6 ml-0',\n isShow ? 'w-full' : 'w-6'\n ),\n buttonChangeCompanyStyles\n )}\n rightIcon={isShow ? undefined : buttonChangeCompanyIconName || 'refresh'}\n rightIconStyles={twMerge('ml-0 w-3 h-3', buttonChangeCompanyIconStyles)}\n />\n </div>\n )}\n\n <div className='flex flex-row items-center w-full mt-2 gap-x-2 min-h-4'>\n {isShow ? (\n <>\n <div className='flex flex-1'>\n <BaseText\n label={appName || '© Gajicermat Digital Mandiri'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-right font-normal'\n />\n </div>\n <div className='w-[1px] h-3 bg-sidebar-appVersionText-default' />\n <div className='flex flex-1'>\n <BaseText\n label={appVersion || 'Version 0.0.0'}\n className='text-sidebar-appVersionText-default text-[10px] line-clamp-1 w-full text-left font-normal'\n />\n </div>\n </>\n ) : (\n <div className='w-[1px] h-3 ' />\n )}\n </div>\n </div>\n )}\n </>\n );\n};\nFooter.displayName = 'Footer';\nSidebar.Footer = Footer;\n\nexport default Sidebar;\n"],"names":["Divider","_jsx","className","SidebarMenu","id","title","titleStyles","icon","iconStyles","subMenu","isCollapsed","activeId","selectedId","notificationCountContainerStyles","notificationCountTextStyles","itemMenuContainerStyles","itemMenuActiveContainerStyles","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","isMenuMouseEnter","setIsMenuMouseEnter","isMenuMouseDown","setIsMenuMouseDown","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","jsx","Icon","name","classNames","BaseText","label","BaseBadge","toString","labelStyles","containerStyles","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","toggleButtonContainerStyles","toggleIconOpenName","toggleIconCloseName","toggleIconStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","BaseButtonIcon","variant","iconName","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","isAutoFlip","isMouseEnter","setIsMouseEnter","isMouseDown","setIsMouseDown","BasePopover","open","close","_Fragment","Button","Panel","displayName","PopoverPanel","Fragment","Header","appLogoClosed","appLogoClosedStyles","appLogoOpened","appLogoOpenedStyles","onClickHeaderSidebar","src","UserProfile","userLabel","userLabelStyles","userAvatar","userAvatarFallback","userAvatarFallbackStyles","userAvatarStyles","titleAtPanel","titleAtPanelStyles","userAvatarAtPanel","userAvatarAtPanelStyles","userAvatarFallbackAtPanel","userAvatarFallbackAtPanelStyles","userLabelAtPanel","userLabelAtPanelStyles","userEmailAtPanel","userEmailAtPanelStyles","manageAccountLabelAtPanel","manageAccountLabelAtPanelStyles","iconManageAccountAtPanel","iconManageAccountAtPanelStyles","onClickManageAccount","manageAccountContainerStyles","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","translationContainerStyles","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","rightIcon","rightIconStyles"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";var s=require("react/jsx-runtime"),e=require("../../../node_modules/prop-types/index.js"),t=require("react"),n=require("styled-components"),o=require("../../assets/icons/active-loan.svg.js"),i=require("../../assets/icons/activity.svg.js"),a=require("../../assets/icons/add.svg.js"),c=require("../../assets/icons/add-circle-line.svg.js"),r=require("../../assets/icons/addImage.svg.js"),j=require("../../assets/icons/administration.svg.js"),g=require("../../assets/icons/arrow-back-left.svg.js"),l=require("../../assets/icons/arrow-down.svg.js"),u=require("../../assets/icons/arrow-down-circle.svg.js"),p=require("../../assets/icons/arrow-down-fill.svg.js"),m=require("../../assets/icons/arrow-left.svg.js"),b=require("../../assets/icons/arrow-left-circle.svg.js"),v=require("../../assets/icons/arrow-right.svg.js"),x=require("../../assets/icons/arrow-right-circle.svg.js"),C=require("../../assets/icons/arrow-right-fill.svg.js"),q=require("../../assets/icons/arrow-up.svg.js"),R=require("../../assets/icons/arrow-up-circle.svg.js"),O=require("../../assets/icons/arrow-up-fill.svg.js"),d=require("../../assets/icons/attendance.svg.js"),h=require("../../assets/icons/available.svg.js"),f=require("../../assets/icons/avatar.svg.js"),w=require("../../assets/icons/bank.svg.js"),k=require("../../assets/icons/breakTime.svg.js"),y=require("../../assets/icons/building.svg.js"),T=require("../../assets/icons/business.svg.js"),z=require("../../assets/icons/calendar.svg.js"),D=require("../../assets/icons/calendar-check-in.svg.js"),F=require("../../assets/icons/calendar-check-out.svg.js"),$=require("../../assets/icons/calendar-leave.svg.js"),L=require("../../assets/icons/calendar-monthly.svg.js"),S=require("../../assets/icons/calendar-schedule.svg.js"),N=require("../../assets/icons/cancel.svg.js"),B=require("../../assets/icons/caret-date.svg.js"),E=require("../../assets/icons/check-circle.svg.js"),I=require("../../assets/icons/check-circle-fill.svg.js"),A=require("../../assets/icons/check-fill.svg.js"),G=require("../../assets/icons/checkbox-fill.svg.js"),H=require("../../assets/icons/checkbox-indeterminate-fill.svg.js"),P=require("../../assets/icons/chevron-double-arrow-left.svg.js"),U=require("../../assets/icons/chevron-double-arrow-right.svg.js"),X=require("../../assets/icons/chevron-down.svg.js"),_=require("../../assets/icons/chevron-left.svg.js"),J=require("../../assets/icons/chevron-right.svg.js"),K=require("../../assets/icons/chevron-up.svg.js"),M=require("../../assets/icons/client.svg.js"),Q=require("../../assets/icons/clipboard-check.svg.js"),V=require("../../assets/icons/close.svg.js"),W=require("../../assets/icons/close-circle.svg.js"),Y=require("../../assets/icons/close-circle-fill.svg.js"),Z=require("../../assets/icons/close-circle-x-fill.svg.js"),ss=require("../../assets/icons/configuration.svg.js"),es=require("../../assets/icons/consultant.svg.js"),ts=require("../../assets/icons/copy-fill.svg.js"),ns=require("../../assets/icons/dashboard.svg.js"),os=require("../../assets/icons/delete.svg.js"),is=require("../../assets/icons/document.svg.js"),as=require("../../assets/icons/document-alt.svg.js"),cs=require("../../assets/icons/download.svg.js"),rs=require("../../assets/icons/edit.svg.js"),js=require("../../assets/icons/electric-shield-circle.svg.js"),gs=require("../../assets/icons/empty-notification.svg.js"),ls=require("../../assets/icons/
|
|
1
|
+
"use strict";var s=require("react/jsx-runtime"),e=require("../../../node_modules/prop-types/index.js"),t=require("react"),n=require("styled-components"),o=require("../../assets/icons/active-loan.svg.js"),i=require("../../assets/icons/activity.svg.js"),a=require("../../assets/icons/add.svg.js"),c=require("../../assets/icons/add-circle-line.svg.js"),r=require("../../assets/icons/addImage.svg.js"),j=require("../../assets/icons/administration.svg.js"),g=require("../../assets/icons/arrow-back-left.svg.js"),l=require("../../assets/icons/arrow-down.svg.js"),u=require("../../assets/icons/arrow-down-circle.svg.js"),p=require("../../assets/icons/arrow-down-fill.svg.js"),m=require("../../assets/icons/arrow-left.svg.js"),b=require("../../assets/icons/arrow-left-circle.svg.js"),v=require("../../assets/icons/arrow-right.svg.js"),x=require("../../assets/icons/arrow-right-circle.svg.js"),C=require("../../assets/icons/arrow-right-fill.svg.js"),q=require("../../assets/icons/arrow-up.svg.js"),R=require("../../assets/icons/arrow-up-circle.svg.js"),O=require("../../assets/icons/arrow-up-fill.svg.js"),d=require("../../assets/icons/attendance.svg.js"),h=require("../../assets/icons/available.svg.js"),f=require("../../assets/icons/avatar.svg.js"),w=require("../../assets/icons/bank.svg.js"),k=require("../../assets/icons/breakTime.svg.js"),y=require("../../assets/icons/building.svg.js"),T=require("../../assets/icons/business.svg.js"),z=require("../../assets/icons/calendar.svg.js"),D=require("../../assets/icons/calendar-check-in.svg.js"),F=require("../../assets/icons/calendar-check-out.svg.js"),$=require("../../assets/icons/calendar-leave.svg.js"),L=require("../../assets/icons/calendar-monthly.svg.js"),S=require("../../assets/icons/calendar-schedule.svg.js"),N=require("../../assets/icons/cancel.svg.js"),B=require("../../assets/icons/caret-date.svg.js"),E=require("../../assets/icons/check-circle.svg.js"),I=require("../../assets/icons/check-circle-fill.svg.js"),A=require("../../assets/icons/check-fill.svg.js"),G=require("../../assets/icons/checkbox-fill.svg.js"),H=require("../../assets/icons/checkbox-indeterminate-fill.svg.js"),P=require("../../assets/icons/chevron-double-arrow-left.svg.js"),U=require("../../assets/icons/chevron-double-arrow-right.svg.js"),X=require("../../assets/icons/chevron-down.svg.js"),_=require("../../assets/icons/chevron-left.svg.js"),J=require("../../assets/icons/chevron-right.svg.js"),K=require("../../assets/icons/chevron-up.svg.js"),M=require("../../assets/icons/client.svg.js"),Q=require("../../assets/icons/clipboard-check.svg.js"),V=require("../../assets/icons/close.svg.js"),W=require("../../assets/icons/close-circle.svg.js"),Y=require("../../assets/icons/close-circle-fill.svg.js"),Z=require("../../assets/icons/close-circle-x-fill.svg.js"),ss=require("../../assets/icons/configuration.svg.js"),es=require("../../assets/icons/consultant.svg.js"),ts=require("../../assets/icons/copy-fill.svg.js"),ns=require("../../assets/icons/dashboard.svg.js"),os=require("../../assets/icons/delete.svg.js"),is=require("../../assets/icons/document.svg.js"),as=require("../../assets/icons/document-alt.svg.js"),cs=require("../../assets/icons/download.svg.js"),rs=require("../../assets/icons/edit.svg.js"),js=require("../../assets/icons/electric-shield-circle.svg.js"),gs=require("../../assets/icons/empty-notification.svg.js"),ls=require("../../assets/icons/equals.svg.js"),us=require("../../assets/icons/expense.svg.js"),ps=require("../../assets/icons/eye-off.svg.js"),ms=require("../../assets/icons/eye-on.svg.js"),bs=require("../../assets/icons/file-list.svg.js"),vs=require("../../assets/icons/filter.svg.js"),xs=require("../../assets/icons/inbox.svg.js"),Cs=require("../../assets/icons/information.svg.js"),qs=require("../../assets/icons/information-circle.svg.js"),Rs=require("../../assets/icons/information-circle-fill.svg.js"),Os=require("../../assets/icons/language.svg.js"),ds=require("../../assets/icons/link.svg.js"),hs=require("../../assets/icons/list.svg.js"),fs=require("../../assets/icons/lock.svg.js"),ws=require("../../assets/icons/logout.svg.js"),ks=require("../../assets/icons/marker.svg.js"),ys=require("../../assets/icons/menu-grid.svg.js"),Ts=require("../../assets/icons/menu-line.svg.js"),zs=require("../../assets/icons/message.svg.js"),Ds=require("../../assets/icons/minus.svg.js"),Fs=require("../../assets/icons/more.svg.js"),$s=require("../../assets/icons/more-horizontal.svg.js"),Ls=require("../../assets/icons/note-fill.svg.js"),Ss=require("../../assets/icons/note-list.svg.js"),Ns=require("../../assets/icons/note-search.svg.js"),Bs=require("../../assets/icons/notebook.svg.js"),Es=require("../../assets/icons/notification.svg.js"),Is=require("../../assets/icons/notification-fill.svg.js"),As=require("../../assets/icons/payroll.svg.js"),Gs=require("../../assets/icons/payslip.svg.js"),Hs=require("../../assets/icons/pencil-fill.svg.js"),Ps=require("../../assets/icons/percentage-struct.svg.js"),Us=require("../../assets/icons/percentage-struct-circle.svg.js"),Xs=require("../../assets/icons/phone.svg.js"),_s=require("../../assets/icons/photos.svg.js"),Js=require("../../assets/icons/plus.svg.js"),Ks=require("../../assets/icons/plus-shield-circle.svg.js"),Ms=require("../../assets/icons/product.svg.js"),Qs=require("../../assets/icons/product/no-record.svg.js"),Vs=require("../../assets/icons/project.svg.js"),Ws=require("../../assets/icons/radioButton.svg.js"),Ys=require("../../assets/icons/refresh.svg.js"),Zs=require("../../assets/icons/room.svg.js"),se=require("../../assets/icons/rotate-left.svg.js"),ee=require("../../assets/icons/rotate-right.svg.js"),te=require("../../assets/icons/save.svg.js"),ne=require("../../assets/icons/search.svg.js"),oe=require("../../assets/icons/setting.svg.js"),ie=require("../../assets/icons/sort.svg.js"),ae=require("../../assets/icons/star.svg.js"),ce=require("../../assets/icons/table/no-record.svg.js"),re=require("../../assets/icons/time.svg.js"),je=require("../../assets/icons/triangle-left.svg.js"),ge=require("../../assets/icons/undo.svg.js"),le=require("../../assets/icons/upload.svg.js"),ue=require("../../assets/icons/user.svg.js"),pe=require("../../assets/icons/user-group.svg.js"),me=require("../../assets/icons/user-unfollow.svg.js"),be=require("../../assets/icons/warning.svg.js"),ve=require("../../assets/icons/warning-circle-fill.svg.js"),xe=require("../../assets/icons/warning-fill.svg.js"),Ce=require("../../assets/icons/work.svg.js"),qe=require("../../styles/BorderRadius.js"),Re=require("../../styles/Colors.js");function Oe(s){return s&&"object"==typeof s&&"default"in s?s:{default:s}}require("../../styles/Spacing.js");var de=Oe(n);const he={"extra-large":48,large:40,medium:32,small:24,"extra-small":16,micro:12},fe={circle:qe.BorderRadiusType.round,square:qe.BorderRadiusType.small},we=de.default.div`
|
|
2
2
|
align-items: center;
|
|
3
|
-
background-color: ${s=>s.shapeColor||
|
|
4
|
-
border-radius: ${({shapeType:s})=>
|
|
3
|
+
background-color: ${s=>s.shapeColor||Re.ColorDark.silver};
|
|
4
|
+
border-radius: ${({shapeType:s})=>fe[s]};
|
|
5
5
|
display: flex;
|
|
6
6
|
height: ${s=>s.size};
|
|
7
7
|
justify-content: center;
|
|
8
8
|
width: ${s=>s.size};
|
|
9
|
-
`,
|
|
9
|
+
`,ke=e=>{const n={fill:e.color||Re.ColorDark.gumbo,height:e.shapeType?he[e.size]/1.8+"px":`${he[e.size]||he.medium}px`,width:e.shapeType?he[e.size]/1.8+"px":`${he[e.size]||he.medium}px`},qe={addImage:s.jsx(r.ReactComponent,Object.assign({},n)),filelist:s.jsx(bs.ReactComponent,Object.assign({},n)),save:s.jsx(te.ReactComponent,Object.assign({},n)),payslip:s.jsx(Gs.ReactComponent,Object.assign({},n)),activeloan:s.jsx(o.ReactComponent,Object.assign({},n)),activity:s.jsx(i.ReactComponent,Object.assign({},n)),add:s.jsx(a.ReactComponent,Object.assign({},n)),consultant:s.jsx(es.ReactComponent,Object.assign({},n)),available:s.jsx(h.ReactComponent,Object.assign({},n)),addCircleLine:s.jsx(c.ReactComponent,Object.assign({},n)),arrowbackleft:s.jsx(g.ReactComponent,Object.assign({},n)),arrowdown:s.jsx(l.ReactComponent,Object.assign({},n)),arrowdowncircle:s.jsx(u.ReactComponent,Object.assign({},n)),arrowdownfill:s.jsx(p.ReactComponent,Object.assign({},n)),arrowleft:s.jsx(m.ReactComponent,Object.assign({},n)),arrowleftcircle:s.jsx(b.ReactComponent,Object.assign({},n)),arrowright:s.jsx(v.ReactComponent,Object.assign({},n)),arrowrightcircle:s.jsx(x.ReactComponent,Object.assign({},n)),arrowrightfill:s.jsx(C.ReactComponent,Object.assign({},n)),arrowup:s.jsx(q.ReactComponent,Object.assign({},n)),arrowupcircle:s.jsx(R.ReactComponent,Object.assign({},n)),arrowupfill:s.jsx(O.ReactComponent,Object.assign({},n)),attendance:s.jsx(d.ReactComponent,Object.assign({},n)),avatar:s.jsx(f.ReactComponent,Object.assign({},n)),bank:s.jsx(w.ReactComponent,Object.assign({},n)),building:s.jsx(y.ReactComponent,Object.assign({},n)),business:s.jsx(T.ReactComponent,Object.assign({},n)),calendar:s.jsx(z.ReactComponent,Object.assign({},n)),calendarcheckin:s.jsx(D.ReactComponent,Object.assign({},n)),calendarcheckout:s.jsx(F.ReactComponent,Object.assign({},n)),calendarLeave:s.jsx($.ReactComponent,Object.assign({},n)),calendarmonthly:s.jsx(L.ReactComponent,Object.assign({},n)),calendarSchedule:s.jsx(S.ReactComponent,Object.assign({},n)),cancel:s.jsx(N.ReactComponent,Object.assign({},n)),caretDate:s.jsx(B.ReactComponent,Object.assign({},n)),check:s.jsx(A.ReactComponent,Object.assign({},n)),checkboxFill:s.jsx(G.ReactComponent,Object.assign({},n)),checkboxIndeterminateFill:s.jsx(H.ReactComponent,Object.assign({},n)),checkcircle:s.jsx(E.ReactComponent,Object.assign({},n)),checkcirclefill:s.jsx(I.ReactComponent,Object.assign({},n)),chevronDoubleArrowLeft:s.jsx(P.ReactComponent,Object.assign({},n)),chevronDoubleArrowRight:s.jsx(U.ReactComponent,Object.assign({},n)),chevrondown:s.jsx(X.ReactComponent,Object.assign({},n)),chevronleft:s.jsx(_.ReactComponent,Object.assign({},n)),chevronright:s.jsx(J.ReactComponent,Object.assign({},n)),chevronup:s.jsx(K.ReactComponent,Object.assign({},n)),configuration:s.jsx(ss.ReactComponent,Object.assign({},n)),client:s.jsx(M.ReactComponent,Object.assign({},n)),clipboardCheck:s.jsx(Q.ReactComponent,Object.assign({},n)),close:s.jsx(V.ReactComponent,Object.assign({},n)),closecircle:s.jsx(W.ReactComponent,Object.assign({},n)),closecirclefill:s.jsx(Y.ReactComponent,Object.assign({},n)),closeCircleXFill:s.jsx(Z.ReactComponent,Object.assign({},n)),dashboard:s.jsx(ns.ReactComponent,Object.assign({},n)),delete:s.jsx(os.ReactComponent,Object.assign({},n)),document:s.jsx(is.ReactComponent,Object.assign({},n)),documentalt:s.jsx(as.ReactComponent,Object.assign({},n)),download:s.jsx(cs.ReactComponent,Object.assign({},n)),edit:s.jsx(rs.ReactComponent,Object.assign({},n)),electricShieldCircle:s.jsx(js.ReactComponent,Object.assign({},n)),eyeoff:s.jsx(ps.ReactComponent,Object.assign({},n)),eyeon:s.jsx(ms.ReactComponent,Object.assign({},n)),expense:s.jsx(us.ReactComponent,Object.assign({},n)),inbox:s.jsx(xs.ReactComponent,Object.assign({},n)),information:s.jsx(Cs.ReactComponent,Object.assign({},n)),informationcircle:s.jsx(qs.ReactComponent,Object.assign({},n)),informationfill:s.jsx(Rs.ReactComponent,Object.assign({},n)),link:s.jsx(ds.ReactComponent,Object.assign({},n)),list:s.jsx(hs.ReactComponent,Object.assign({},n)),lock:s.jsx(fs.ReactComponent,Object.assign({},n)),noteFill:s.jsx(Ls.ReactComponent,Object.assign({},n)),noteList:s.jsx(Ss.ReactComponent,Object.assign({},n)),noteSearch:s.jsx(Ns.ReactComponent,Object.assign({},n)),norecord:s.jsx(Qs.ReactComponent,Object.assign({},n)),percentageStruct:s.jsx(Ps.ReactComponent,Object.assign({},n)),percentageStructCircle:s.jsx(Us.ReactComponent,Object.assign({},n)),phone:s.jsx(Xs.ReactComponent,Object.assign({},n)),photo:s.jsx(_s.ReactComponent,Object.assign({},n)),plusShieldCircle:s.jsx(Ks.ReactComponent,Object.assign({},n)),radioButton:s.jsx(Ws.ReactComponent,Object.assign({},n)),rotateLeft:s.jsx(se.ReactComponent,Object.assign({},n)),rotateRight:s.jsx(ee.ReactComponent,Object.assign({},n)),search:s.jsx(ne.ReactComponent,Object.assign({},n)),setting:s.jsx(oe.ReactComponent,Object.assign({},n)),sort:s.jsx(ie.ReactComponent,Object.assign({},n)),star:s.jsx(ae.ReactComponent,Object.assign({},n)),triangleLeft:s.jsx(je.ReactComponent,Object.assign({},n)),undo:s.jsx(ge.ReactComponent,Object.assign({},n)),upload:s.jsx(le.ReactComponent,Object.assign({},n)),user:s.jsx(ue.ReactComponent,Object.assign({},n)),userUnfollow:s.jsx(me.ReactComponent,Object.assign({},n)),warning:s.jsx(be.ReactComponent,Object.assign({},n)),warningfill:s.jsx(xe.ReactComponent,Object.assign({},n)),work:s.jsx(Ce.ReactComponent,Object.assign({},n)),room:s.jsx(Zs.ReactComponent,Object.assign({},n)),marker:s.jsx(ks.ReactComponent,Object.assign({},n)),message:s.jsx(zs.ReactComponent,Object.assign({},n)),menuGrid:s.jsx(ys.ReactComponent,Object.assign({},n)),menuLine:s.jsx(Ts.ReactComponent,Object.assign({},n)),minus:s.jsx(Ds.ReactComponent,Object.assign({},n)),more:s.jsx(Fs.ReactComponent,Object.assign({},n)),moreHorizontal:s.jsx($s.ReactComponent,Object.assign({},n)),project:s.jsx(Vs.ReactComponent,Object.assign({},n)),product:s.jsx(Ms.ReactComponent,Object.assign({},n)),usergroup:s.jsx(pe.ReactComponent,Object.assign({},n)),notebook:s.jsx(Bs.ReactComponent,Object.assign({},n)),payroll:s.jsx(As.ReactComponent,Object.assign({},n)),plus:s.jsx(Js.ReactComponent,Object.assign({},n)),copyFill:s.jsx(ts.ReactComponent,Object.assign({},n)),notification:s.jsx(Es.ReactComponent,Object.assign({},n)),notificationFill:s.jsx(Is.ReactComponent,Object.assign({},n)),pencilFill:s.jsx(Hs.ReactComponent,Object.assign({},n)),emptyNotification:s.jsx(gs.ReactComponent,Object.assign({},n)),breakTime:s.jsx(k.ReactComponent,Object.assign({},n)),time:s.jsx(re.ReactComponent,Object.assign({},n)),warningCircleFill:s.jsx(ve.ReactComponent,Object.assign({},n)),filter:s.jsx(vs.ReactComponent,Object.assign({},n)),refresh:s.jsx(Ys.ReactComponent,Object.assign({},n)),logout:s.jsx(ws.ReactComponent,Object.assign({},n)),language:s.jsx(Os.ReactComponent,Object.assign({},n)),administration:s.jsx(j.ReactComponent,Object.assign({},n)),tableNoRecord:s.jsx(ce.ReactComponent,{}),equals:s.jsx(ls.ReactComponent,{})},Oe={size:`${he[e.size]}px`||`${he.medium}px`,shapeColor:e.shapeColor||Re.ColorDark.silver,shapeType:e.shapeType};return e.shapeType?s.jsx(we,Object.assign({"data-test-id":e.dataTestId},Oe,{children:t.cloneElement(qe[e.name],{className:e.className})})):t.cloneElement(qe[e.name],{className:e.className})};ke.prototype={size:e.propTypesExports.string,color:e.propTypesExports.string,shapeColor:e.propTypesExports.string},ke.defaultProps={size:"medium",color:Re.ColorDark.blackCoral,shapeColor:Re.ColorDark.silver},module.exports=ke;
|
|
10
10
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import * as PropTypes from 'prop-types';\nimport { cloneElement } from 'react';\nimport styled from 'styled-components';\n\nimport {\n ActiveLoanIcon,\n ActivityIcon,\n AddCircleLineIcon,\n AddIcon,\n AddImage,\n AdministrationIcon,\n ArrowBackLeftIcon,\n ArrowDownCircleIcon,\n ArrowDownFillIcon,\n ArrowDownIcon,\n ArrowLeftCircleIcon,\n ArrowLeftIcon,\n ArrowRightCircleIcon,\n ArrowRightFillIcon,\n ArrowRightIcon,\n ArrowUpCircleIcon,\n ArrowUpFillIcon,\n ArrowUpIcon,\n AttendanceIcon,\n AvailableIcon,\n AvatarIcon,\n BankIcon,\n BreakTimeIcon,\n BuildingIcon,\n BusinessIcon,\n CalendarCheckInIcon,\n CalendarCheckOutIcon,\n CalendarIcon,\n CalendarLeaveIcon,\n CalendarMonthlyIcon,\n CalendarScheduleIcon,\n CancelIcon,\n CaretDateIcon,\n CheckboxFillIcon,\n CheckboxIndeterminateFillIcon,\n CheckCircleFillIcon,\n CheckCircleIcon,\n CheckIcon,\n ChevronDoubleArrowLeftIcon,\n ChevronDoubleArrowRightIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n ClientIcon,\n ClipboardCheck,\n CloseCircleFillIcon,\n CloseCircleIcon,\n CloseCircleXFillIcon,\n CloseIcon,\n ConfigurationIcon,\n ConsultantIcon,\n CopyFillIcon,\n DashboardIcon,\n DeleteIcon,\n DocumentAltIcon,\n DocumentIcon,\n DownloadIcon,\n EditIcon,\n ElectricShieldCircleIcon,\n EmptyNotification,\n ExpenseIcon,\n EyeOffIcon,\n EyeOnIcon,\n FileListIcon,\n FilterIcon,\n InboxIcon,\n InformationCircleIcon,\n InformationFillIcon,\n InformationIcon,\n LanguageIcon,\n LinkIcon,\n ListIcon,\n LockIcon,\n LogoutIcon,\n MarkerIcon,\n MenuGridIcon,\n MenuLineIcon,\n MessageIcon,\n MinusIcon,\n MoreHorizontalIcon,\n MoreIcon,\n NoRecordIcon,\n NotebookIcon,\n NoteFillIcon,\n NoteListIcon,\n NoteSearchIcon,\n NotificationFillIcon,\n NotificationIcon,\n PayrollIcon,\n PayslipIcon,\n PencilFillIcon,\n PercentageStructCircleIcon,\n PercentageStructIcon,\n PhoneIcon,\n PhotosIcon,\n PlusIcon,\n PlusShieldCircleIcon,\n ProductIcon,\n ProjectIcon,\n RadioButtonIcon,\n RefreshIcon,\n RoomIcon,\n RotateLefttIcon,\n RotateRightIcon,\n SaveIcon,\n SearchIcon,\n SettingIcon,\n SortIcon,\n StarIcon,\n TableNoRecordIcon,\n TimeIcon,\n TriangleLeftIcon,\n UndoIcon,\n UploadIcon,\n UserGroupIcon,\n UserIcon,\n UserUnfollowIcon,\n WarningCircleFillIcon,\n WarningFillIcon,\n WarningIcon,\n WorkIcon\n} from '../../assets/icons';\nimport { BorderRadiusType, ColorDark } from '../../styles';\nimport {\n IconInterface,\n IconShapeType,\n IconSizeType,\n IconSizeValueType,\n IconType\n} from './Icon.type';\n\ninterface IconShapeInterface {\n shapeColor?: string;\n size?: string;\n shapeType?: IconShapeType;\n}\n\ninterface SvgIconInterface {\n fill: string;\n height: string;\n width: string;\n}\n\nconst iconSizeMapper: Record<IconSizeType, IconSizeValueType> = {\n 'extra-large': 48,\n large: 40,\n medium: 32,\n small: 24,\n 'extra-small': 16,\n micro: 12\n};\n\nconst iconShapeMapper: Record<IconShapeType, BorderRadiusType> = {\n circle: BorderRadiusType['round'],\n square: BorderRadiusType['small']\n};\n\nconst IconContainer = styled.div`\n align-items: center;\n background-color: ${(props: IconShapeInterface) => props.shapeColor || ColorDark.silver};\n border-radius: ${({ shapeType }: IconShapeInterface) => iconShapeMapper[shapeType]};\n display: flex;\n height: ${(props: IconShapeInterface) => props.size};\n justify-content: center;\n width: ${(props: IconShapeInterface) => props.size};\n`;\n\n// FIXME : fix fill color for noteFill icon\nconst Icon = (props: IconInterface) => {\n const svgIconProps: SvgIconInterface = {\n fill: props.color || ColorDark.gumbo,\n height: props.shapeType\n ? `${iconSizeMapper[props.size] / 1.8}px`\n : `${iconSizeMapper[props.size] || iconSizeMapper['medium']}px`,\n width: props.shapeType\n ? `${iconSizeMapper[props.size] / 1.8}px`\n : `${iconSizeMapper[props.size] || iconSizeMapper['medium']}px`\n };\n\n const iconMapper: Record<IconType, JSX.Element> = {\n addImage: <AddImage {...svgIconProps} />,\n filelist: <FileListIcon {...svgIconProps} />,\n save: <SaveIcon {...svgIconProps} />,\n payslip: <PayslipIcon {...svgIconProps} />,\n activeloan: <ActiveLoanIcon {...svgIconProps} />,\n activity: <ActivityIcon {...svgIconProps} />,\n add: <AddIcon {...svgIconProps} />,\n consultant: <ConsultantIcon {...svgIconProps} />,\n available: <AvailableIcon {...svgIconProps} />,\n addCircleLine: <AddCircleLineIcon {...svgIconProps} />,\n arrowbackleft: <ArrowBackLeftIcon {...svgIconProps} />,\n arrowdown: <ArrowDownIcon {...svgIconProps} />,\n arrowdowncircle: <ArrowDownCircleIcon {...svgIconProps} />,\n arrowdownfill: <ArrowDownFillIcon {...svgIconProps} />,\n arrowleft: <ArrowLeftIcon {...svgIconProps} />,\n arrowleftcircle: <ArrowLeftCircleIcon {...svgIconProps} />,\n arrowright: <ArrowRightIcon {...svgIconProps} />,\n arrowrightcircle: <ArrowRightCircleIcon {...svgIconProps} />,\n arrowrightfill: <ArrowRightFillIcon {...svgIconProps} />,\n arrowup: <ArrowUpIcon {...svgIconProps} />,\n arrowupcircle: <ArrowUpCircleIcon {...svgIconProps} />,\n arrowupfill: <ArrowUpFillIcon {...svgIconProps} />,\n attendance: <AttendanceIcon {...svgIconProps} />,\n avatar: <AvatarIcon {...svgIconProps} />,\n bank: <BankIcon {...svgIconProps} />,\n building: <BuildingIcon {...svgIconProps} />,\n business: <BusinessIcon {...svgIconProps} />,\n calendar: <CalendarIcon {...svgIconProps} />,\n calendarcheckin: <CalendarCheckInIcon {...svgIconProps} />,\n calendarcheckout: <CalendarCheckOutIcon {...svgIconProps} />,\n calendarLeave: <CalendarLeaveIcon {...svgIconProps} />,\n calendarmonthly: <CalendarMonthlyIcon {...svgIconProps} />,\n calendarSchedule: <CalendarScheduleIcon {...svgIconProps} />,\n cancel: <CancelIcon {...svgIconProps} />,\n caretDate: <CaretDateIcon {...svgIconProps} />,\n check: <CheckIcon {...svgIconProps} />,\n checkboxFill: <CheckboxFillIcon {...svgIconProps} />,\n checkboxIndeterminateFill: <CheckboxIndeterminateFillIcon {...svgIconProps} />,\n checkcircle: <CheckCircleIcon {...svgIconProps} />,\n checkcirclefill: <CheckCircleFillIcon {...svgIconProps} />,\n chevronDoubleArrowLeft: <ChevronDoubleArrowLeftIcon {...svgIconProps} />,\n chevronDoubleArrowRight: <ChevronDoubleArrowRightIcon {...svgIconProps} />,\n chevrondown: <ChevronDownIcon {...svgIconProps} />,\n chevronleft: <ChevronLeftIcon {...svgIconProps} />,\n chevronright: <ChevronRightIcon {...svgIconProps} />,\n chevronup: <ChevronUpIcon {...svgIconProps} />,\n configuration: <ConfigurationIcon {...svgIconProps} />,\n client: <ClientIcon {...svgIconProps} />,\n clipboardCheck: <ClipboardCheck {...svgIconProps} />,\n close: <CloseIcon {...svgIconProps} />,\n closecircle: <CloseCircleIcon {...svgIconProps} />,\n closecirclefill: <CloseCircleFillIcon {...svgIconProps} />,\n closeCircleXFill: <CloseCircleXFillIcon {...svgIconProps} />,\n dashboard: <DashboardIcon {...svgIconProps} />,\n delete: <DeleteIcon {...svgIconProps} />,\n document: <DocumentIcon {...svgIconProps} />,\n documentalt: <DocumentAltIcon {...svgIconProps} />,\n download: <DownloadIcon {...svgIconProps} />,\n edit: <EditIcon {...svgIconProps} />,\n electricShieldCircle: <ElectricShieldCircleIcon {...svgIconProps} />,\n eyeoff: <EyeOffIcon {...svgIconProps} />,\n eyeon: <EyeOnIcon {...svgIconProps} />,\n expense: <ExpenseIcon {...svgIconProps} />,\n inbox: <InboxIcon {...svgIconProps} />,\n information: <InformationIcon {...svgIconProps} />,\n informationcircle: <InformationCircleIcon {...svgIconProps} />,\n informationfill: <InformationFillIcon {...svgIconProps} />,\n link: <LinkIcon {...svgIconProps} />,\n list: <ListIcon {...svgIconProps} />,\n lock: <LockIcon {...svgIconProps} />,\n noteFill: <NoteFillIcon {...svgIconProps} />,\n noteList: <NoteListIcon {...svgIconProps} />,\n noteSearch: <NoteSearchIcon {...svgIconProps} />,\n norecord: <NoRecordIcon {...svgIconProps} />,\n percentageStruct: <PercentageStructIcon {...svgIconProps} />,\n percentageStructCircle: <PercentageStructCircleIcon {...svgIconProps} />,\n phone: <PhoneIcon {...svgIconProps} />,\n photo: <PhotosIcon {...svgIconProps} />,\n plusShieldCircle: <PlusShieldCircleIcon {...svgIconProps} />,\n radioButton: <RadioButtonIcon {...svgIconProps} />,\n rotateLeft: <RotateLefttIcon {...svgIconProps} />,\n rotateRight: <RotateRightIcon {...svgIconProps} />,\n search: <SearchIcon {...svgIconProps} />,\n setting: <SettingIcon {...svgIconProps} />,\n sort: <SortIcon {...svgIconProps} />,\n star: <StarIcon {...svgIconProps} />,\n triangleLeft: <TriangleLeftIcon {...svgIconProps} />,\n undo: <UndoIcon {...svgIconProps} />,\n upload: <UploadIcon {...svgIconProps} />,\n user: <UserIcon {...svgIconProps} />,\n userUnfollow: <UserUnfollowIcon {...svgIconProps} />,\n warning: <WarningIcon {...svgIconProps} />,\n warningfill: <WarningFillIcon {...svgIconProps} />,\n work: <WorkIcon {...svgIconProps} />,\n room: <RoomIcon {...svgIconProps} />,\n marker: <MarkerIcon {...svgIconProps} />,\n message: <MessageIcon {...svgIconProps} />,\n menuGrid: <MenuGridIcon {...svgIconProps} />,\n menuLine: <MenuLineIcon {...svgIconProps} />,\n minus: <MinusIcon {...svgIconProps} />,\n more: <MoreIcon {...svgIconProps} />,\n moreHorizontal: <MoreHorizontalIcon {...svgIconProps} />,\n project: <ProjectIcon {...svgIconProps} />,\n product: <ProductIcon {...svgIconProps} />,\n usergroup: <UserGroupIcon {...svgIconProps} />,\n notebook: <NotebookIcon {...svgIconProps} />,\n payroll: <PayrollIcon {...svgIconProps} />,\n plus: <PlusIcon {...svgIconProps} />,\n copyFill: <CopyFillIcon {...svgIconProps} />,\n notification: <NotificationIcon {...svgIconProps} />,\n notificationFill: <NotificationFillIcon {...svgIconProps} />,\n pencilFill: <PencilFillIcon {...svgIconProps} />,\n emptyNotification: <EmptyNotification {...svgIconProps} />,\n breakTime: <BreakTimeIcon {...svgIconProps} />,\n time: <TimeIcon {...svgIconProps} />,\n warningCircleFill: <WarningCircleFillIcon {...svgIconProps} />,\n filter: <FilterIcon {...svgIconProps} />,\n refresh: <RefreshIcon {...svgIconProps} />,\n logout: <LogoutIcon {...svgIconProps} />,\n language: <LanguageIcon {...svgIconProps} />,\n administration: <AdministrationIcon {...svgIconProps} />,\n tableNoRecord: <TableNoRecordIcon />\n };\n\n const iconShapeProps: IconShapeInterface = {\n size: `${iconSizeMapper[props.size]}px` || `${iconSizeMapper['medium']}px`,\n shapeColor: props.shapeColor || ColorDark.silver,\n shapeType: props.shapeType\n };\n\n if (props.shapeType) {\n return (\n <IconContainer data-test-id={props.dataTestId} {...iconShapeProps}>\n {cloneElement(iconMapper[props.name], { className: props.className })}\n </IconContainer>\n );\n }\n\n return cloneElement(iconMapper[props.name], { className: props.className });\n};\n\nIcon.prototype = {\n size: PropTypes.string,\n color: PropTypes.string,\n shapeColor: PropTypes.string\n};\n\nIcon.defaultProps = {\n size: 'medium',\n color: ColorDark.blackCoral,\n shapeColor: ColorDark.silver\n};\n\nexport default Icon;\n"],"names":["iconSizeMapper","large","medium","small","micro","iconShapeMapper","circle","BorderRadiusType","square","IconContainer","styled","div","props","shapeColor","ColorDark","silver","shapeType","size","Icon","svgIconProps","fill","color","gumbo","height","width","iconMapper","addImage","_jsx","jsx","AddImage","Object","assign","filelist","FileListIcon","save","SaveIcon","payslip","PayslipIcon","activeloan","ActiveLoanIcon","activity","ActivityIcon","add","AddIcon","consultant","ConsultantIcon","available","AvailableIcon","addCircleLine","AddCircleLineIcon","arrowbackleft","ArrowBackLeftIcon","arrowdown","ArrowDownIcon","arrowdowncircle","ArrowDownCircleIcon","arrowdownfill","ArrowDownFillIcon","arrowleft","ArrowLeftIcon","arrowleftcircle","ArrowLeftCircleIcon","arrowright","ArrowRightIcon","arrowrightcircle","ArrowRightCircleIcon","arrowrightfill","ArrowRightFillIcon","arrowup","ArrowUpIcon","arrowupcircle","ArrowUpCircleIcon","arrowupfill","ArrowUpFillIcon","attendance","AttendanceIcon","avatar","AvatarIcon","bank","BankIcon","building","BuildingIcon","business","BusinessIcon","calendar","CalendarIcon","calendarcheckin","CalendarCheckInIcon","calendarcheckout","CalendarCheckOutIcon","calendarLeave","CalendarLeaveIcon","calendarmonthly","CalendarMonthlyIcon","calendarSchedule","CalendarScheduleIcon","cancel","CancelIcon","caretDate","CaretDateIcon","check","CheckIcon","checkboxFill","CheckboxFillIcon","checkboxIndeterminateFill","CheckboxIndeterminateFillIcon","checkcircle","CheckCircleIcon","checkcirclefill","CheckCircleFillIcon","chevronDoubleArrowLeft","ChevronDoubleArrowLeftIcon","chevronDoubleArrowRight","ChevronDoubleArrowRightIcon","chevrondown","ChevronDownIcon","chevronleft","ChevronLeftIcon","chevronright","ChevronRightIcon","chevronup","ChevronUpIcon","configuration","ConfigurationIcon","client","ClientIcon","clipboardCheck","ClipboardCheck","close","CloseIcon","closecircle","CloseCircleIcon","closecirclefill","CloseCircleFillIcon","closeCircleXFill","CloseCircleXFillIcon","dashboard","DashboardIcon","delete","DeleteIcon","document","DocumentIcon","documentalt","DocumentAltIcon","download","DownloadIcon","edit","EditIcon","electricShieldCircle","ElectricShieldCircleIcon","eyeoff","EyeOffIcon","eyeon","EyeOnIcon","expense","ExpenseIcon","inbox","InboxIcon","information","InformationIcon","informationcircle","InformationCircleIcon","informationfill","InformationFillIcon","link","LinkIcon","list","ListIcon","lock","LockIcon","noteFill","NoteFillIcon","noteList","NoteListIcon","noteSearch","NoteSearchIcon","norecord","NoRecordIcon","percentageStruct","PercentageStructIcon","percentageStructCircle","PercentageStructCircleIcon","phone","PhoneIcon","photo","PhotosIcon","plusShieldCircle","PlusShieldCircleIcon","radioButton","RadioButtonIcon","rotateLeft","RotateLefttIcon","rotateRight","RotateRightIcon","search","SearchIcon","setting","SettingIcon","sort","SortIcon","star","StarIcon","triangleLeft","TriangleLeftIcon","undo","UndoIcon","upload","UploadIcon","user","UserIcon","userUnfollow","UserUnfollowIcon","warning","WarningIcon","warningfill","WarningFillIcon","work","WorkIcon","room","RoomIcon","marker","MarkerIcon","message","MessageIcon","menuGrid","MenuGridIcon","menuLine","MenuLineIcon","minus","MinusIcon","more","MoreIcon","moreHorizontal","MoreHorizontalIcon","project","ProjectIcon","product","ProductIcon","usergroup","UserGroupIcon","notebook","NotebookIcon","payroll","PayrollIcon","plus","PlusIcon","copyFill","CopyFillIcon","notification","NotificationIcon","notificationFill","NotificationFillIcon","pencilFill","PencilFillIcon","emptyNotification","EmptyNotification","breakTime","BreakTimeIcon","time","TimeIcon","warningCircleFill","WarningCircleFillIcon","filter","FilterIcon","refresh","RefreshIcon","logout","LogoutIcon","language","LanguageIcon","administration","AdministrationIcon","tableNoRecord","TableNoRecordIcon","ReactComponent","iconShapeProps","dataTestId","children","cloneElement","name","className","prototype","PropTypes.string","propTypesExports","string","defaultProps","blackCoral"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import * as PropTypes from 'prop-types';\nimport { cloneElement } from 'react';\nimport styled from 'styled-components';\n\nimport {\n ActiveLoanIcon,\n ActivityIcon,\n AddCircleLineIcon,\n AddIcon,\n AddImage,\n AdministrationIcon,\n ArrowBackLeftIcon,\n ArrowDownCircleIcon,\n ArrowDownFillIcon,\n ArrowDownIcon,\n ArrowLeftCircleIcon,\n ArrowLeftIcon,\n ArrowRightCircleIcon,\n ArrowRightFillIcon,\n ArrowRightIcon,\n ArrowUpCircleIcon,\n ArrowUpFillIcon,\n ArrowUpIcon,\n AttendanceIcon,\n AvailableIcon,\n AvatarIcon,\n BankIcon,\n BreakTimeIcon,\n BuildingIcon,\n BusinessIcon,\n CalendarCheckInIcon,\n CalendarCheckOutIcon,\n CalendarIcon,\n CalendarLeaveIcon,\n CalendarMonthlyIcon,\n CalendarScheduleIcon,\n CancelIcon,\n CaretDateIcon,\n CheckboxFillIcon,\n CheckboxIndeterminateFillIcon,\n CheckCircleFillIcon,\n CheckCircleIcon,\n CheckIcon,\n ChevronDoubleArrowLeftIcon,\n ChevronDoubleArrowRightIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n ClientIcon,\n ClipboardCheck,\n CloseCircleFillIcon,\n CloseCircleIcon,\n CloseCircleXFillIcon,\n CloseIcon,\n ConfigurationIcon,\n ConsultantIcon,\n CopyFillIcon,\n DashboardIcon,\n DeleteIcon,\n DocumentAltIcon,\n DocumentIcon,\n DownloadIcon,\n EditIcon,\n ElectricShieldCircleIcon,\n EmptyNotification,\n EqualsIcon,\n ExpenseIcon,\n EyeOffIcon,\n EyeOnIcon,\n FileListIcon,\n FilterIcon,\n InboxIcon,\n InformationCircleIcon,\n InformationFillIcon,\n InformationIcon,\n LanguageIcon,\n LinkIcon,\n ListIcon,\n LockIcon,\n LogoutIcon,\n MarkerIcon,\n MenuGridIcon,\n MenuLineIcon,\n MessageIcon,\n MinusIcon,\n MoreHorizontalIcon,\n MoreIcon,\n NoRecordIcon,\n NotebookIcon,\n NoteFillIcon,\n NoteListIcon,\n NoteSearchIcon,\n NotificationFillIcon,\n NotificationIcon,\n PayrollIcon,\n PayslipIcon,\n PencilFillIcon,\n PercentageStructCircleIcon,\n PercentageStructIcon,\n PhoneIcon,\n PhotosIcon,\n PlusIcon,\n PlusShieldCircleIcon,\n ProductIcon,\n ProjectIcon,\n RadioButtonIcon,\n RefreshIcon,\n RoomIcon,\n RotateLefttIcon,\n RotateRightIcon,\n SaveIcon,\n SearchIcon,\n SettingIcon,\n SortIcon,\n StarIcon,\n TableNoRecordIcon,\n TimeIcon,\n TriangleLeftIcon,\n UndoIcon,\n UploadIcon,\n UserGroupIcon,\n UserIcon,\n UserUnfollowIcon,\n WarningCircleFillIcon,\n WarningFillIcon,\n WarningIcon,\n WorkIcon\n} from '../../assets/icons';\nimport { BorderRadiusType, ColorDark } from '../../styles';\nimport {\n IconInterface,\n IconShapeType,\n IconSizeType,\n IconSizeValueType,\n IconType\n} from './Icon.type';\n\ninterface IconShapeInterface {\n shapeColor?: string;\n size?: string;\n shapeType?: IconShapeType;\n}\n\ninterface SvgIconInterface {\n fill: string;\n height: string;\n width: string;\n}\n\nconst iconSizeMapper: Record<IconSizeType, IconSizeValueType> = {\n 'extra-large': 48,\n large: 40,\n medium: 32,\n small: 24,\n 'extra-small': 16,\n micro: 12\n};\n\nconst iconShapeMapper: Record<IconShapeType, BorderRadiusType> = {\n circle: BorderRadiusType['round'],\n square: BorderRadiusType['small']\n};\n\nconst IconContainer = styled.div`\n align-items: center;\n background-color: ${(props: IconShapeInterface) => props.shapeColor || ColorDark.silver};\n border-radius: ${({ shapeType }: IconShapeInterface) => iconShapeMapper[shapeType]};\n display: flex;\n height: ${(props: IconShapeInterface) => props.size};\n justify-content: center;\n width: ${(props: IconShapeInterface) => props.size};\n`;\n\n// FIXME : fix fill color for noteFill icon\nconst Icon = (props: IconInterface) => {\n const svgIconProps: SvgIconInterface = {\n fill: props.color || ColorDark.gumbo,\n height: props.shapeType\n ? `${iconSizeMapper[props.size] / 1.8}px`\n : `${iconSizeMapper[props.size] || iconSizeMapper['medium']}px`,\n width: props.shapeType\n ? `${iconSizeMapper[props.size] / 1.8}px`\n : `${iconSizeMapper[props.size] || iconSizeMapper['medium']}px`\n };\n\n const iconMapper: Record<IconType, JSX.Element> = {\n addImage: <AddImage {...svgIconProps} />,\n filelist: <FileListIcon {...svgIconProps} />,\n save: <SaveIcon {...svgIconProps} />,\n payslip: <PayslipIcon {...svgIconProps} />,\n activeloan: <ActiveLoanIcon {...svgIconProps} />,\n activity: <ActivityIcon {...svgIconProps} />,\n add: <AddIcon {...svgIconProps} />,\n consultant: <ConsultantIcon {...svgIconProps} />,\n available: <AvailableIcon {...svgIconProps} />,\n addCircleLine: <AddCircleLineIcon {...svgIconProps} />,\n arrowbackleft: <ArrowBackLeftIcon {...svgIconProps} />,\n arrowdown: <ArrowDownIcon {...svgIconProps} />,\n arrowdowncircle: <ArrowDownCircleIcon {...svgIconProps} />,\n arrowdownfill: <ArrowDownFillIcon {...svgIconProps} />,\n arrowleft: <ArrowLeftIcon {...svgIconProps} />,\n arrowleftcircle: <ArrowLeftCircleIcon {...svgIconProps} />,\n arrowright: <ArrowRightIcon {...svgIconProps} />,\n arrowrightcircle: <ArrowRightCircleIcon {...svgIconProps} />,\n arrowrightfill: <ArrowRightFillIcon {...svgIconProps} />,\n arrowup: <ArrowUpIcon {...svgIconProps} />,\n arrowupcircle: <ArrowUpCircleIcon {...svgIconProps} />,\n arrowupfill: <ArrowUpFillIcon {...svgIconProps} />,\n attendance: <AttendanceIcon {...svgIconProps} />,\n avatar: <AvatarIcon {...svgIconProps} />,\n bank: <BankIcon {...svgIconProps} />,\n building: <BuildingIcon {...svgIconProps} />,\n business: <BusinessIcon {...svgIconProps} />,\n calendar: <CalendarIcon {...svgIconProps} />,\n calendarcheckin: <CalendarCheckInIcon {...svgIconProps} />,\n calendarcheckout: <CalendarCheckOutIcon {...svgIconProps} />,\n calendarLeave: <CalendarLeaveIcon {...svgIconProps} />,\n calendarmonthly: <CalendarMonthlyIcon {...svgIconProps} />,\n calendarSchedule: <CalendarScheduleIcon {...svgIconProps} />,\n cancel: <CancelIcon {...svgIconProps} />,\n caretDate: <CaretDateIcon {...svgIconProps} />,\n check: <CheckIcon {...svgIconProps} />,\n checkboxFill: <CheckboxFillIcon {...svgIconProps} />,\n checkboxIndeterminateFill: <CheckboxIndeterminateFillIcon {...svgIconProps} />,\n checkcircle: <CheckCircleIcon {...svgIconProps} />,\n checkcirclefill: <CheckCircleFillIcon {...svgIconProps} />,\n chevronDoubleArrowLeft: <ChevronDoubleArrowLeftIcon {...svgIconProps} />,\n chevronDoubleArrowRight: <ChevronDoubleArrowRightIcon {...svgIconProps} />,\n chevrondown: <ChevronDownIcon {...svgIconProps} />,\n chevronleft: <ChevronLeftIcon {...svgIconProps} />,\n chevronright: <ChevronRightIcon {...svgIconProps} />,\n chevronup: <ChevronUpIcon {...svgIconProps} />,\n configuration: <ConfigurationIcon {...svgIconProps} />,\n client: <ClientIcon {...svgIconProps} />,\n clipboardCheck: <ClipboardCheck {...svgIconProps} />,\n close: <CloseIcon {...svgIconProps} />,\n closecircle: <CloseCircleIcon {...svgIconProps} />,\n closecirclefill: <CloseCircleFillIcon {...svgIconProps} />,\n closeCircleXFill: <CloseCircleXFillIcon {...svgIconProps} />,\n dashboard: <DashboardIcon {...svgIconProps} />,\n delete: <DeleteIcon {...svgIconProps} />,\n document: <DocumentIcon {...svgIconProps} />,\n documentalt: <DocumentAltIcon {...svgIconProps} />,\n download: <DownloadIcon {...svgIconProps} />,\n edit: <EditIcon {...svgIconProps} />,\n electricShieldCircle: <ElectricShieldCircleIcon {...svgIconProps} />,\n eyeoff: <EyeOffIcon {...svgIconProps} />,\n eyeon: <EyeOnIcon {...svgIconProps} />,\n expense: <ExpenseIcon {...svgIconProps} />,\n inbox: <InboxIcon {...svgIconProps} />,\n information: <InformationIcon {...svgIconProps} />,\n informationcircle: <InformationCircleIcon {...svgIconProps} />,\n informationfill: <InformationFillIcon {...svgIconProps} />,\n link: <LinkIcon {...svgIconProps} />,\n list: <ListIcon {...svgIconProps} />,\n lock: <LockIcon {...svgIconProps} />,\n noteFill: <NoteFillIcon {...svgIconProps} />,\n noteList: <NoteListIcon {...svgIconProps} />,\n noteSearch: <NoteSearchIcon {...svgIconProps} />,\n norecord: <NoRecordIcon {...svgIconProps} />,\n percentageStruct: <PercentageStructIcon {...svgIconProps} />,\n percentageStructCircle: <PercentageStructCircleIcon {...svgIconProps} />,\n phone: <PhoneIcon {...svgIconProps} />,\n photo: <PhotosIcon {...svgIconProps} />,\n plusShieldCircle: <PlusShieldCircleIcon {...svgIconProps} />,\n radioButton: <RadioButtonIcon {...svgIconProps} />,\n rotateLeft: <RotateLefttIcon {...svgIconProps} />,\n rotateRight: <RotateRightIcon {...svgIconProps} />,\n search: <SearchIcon {...svgIconProps} />,\n setting: <SettingIcon {...svgIconProps} />,\n sort: <SortIcon {...svgIconProps} />,\n star: <StarIcon {...svgIconProps} />,\n triangleLeft: <TriangleLeftIcon {...svgIconProps} />,\n undo: <UndoIcon {...svgIconProps} />,\n upload: <UploadIcon {...svgIconProps} />,\n user: <UserIcon {...svgIconProps} />,\n userUnfollow: <UserUnfollowIcon {...svgIconProps} />,\n warning: <WarningIcon {...svgIconProps} />,\n warningfill: <WarningFillIcon {...svgIconProps} />,\n work: <WorkIcon {...svgIconProps} />,\n room: <RoomIcon {...svgIconProps} />,\n marker: <MarkerIcon {...svgIconProps} />,\n message: <MessageIcon {...svgIconProps} />,\n menuGrid: <MenuGridIcon {...svgIconProps} />,\n menuLine: <MenuLineIcon {...svgIconProps} />,\n minus: <MinusIcon {...svgIconProps} />,\n more: <MoreIcon {...svgIconProps} />,\n moreHorizontal: <MoreHorizontalIcon {...svgIconProps} />,\n project: <ProjectIcon {...svgIconProps} />,\n product: <ProductIcon {...svgIconProps} />,\n usergroup: <UserGroupIcon {...svgIconProps} />,\n notebook: <NotebookIcon {...svgIconProps} />,\n payroll: <PayrollIcon {...svgIconProps} />,\n plus: <PlusIcon {...svgIconProps} />,\n copyFill: <CopyFillIcon {...svgIconProps} />,\n notification: <NotificationIcon {...svgIconProps} />,\n notificationFill: <NotificationFillIcon {...svgIconProps} />,\n pencilFill: <PencilFillIcon {...svgIconProps} />,\n emptyNotification: <EmptyNotification {...svgIconProps} />,\n breakTime: <BreakTimeIcon {...svgIconProps} />,\n time: <TimeIcon {...svgIconProps} />,\n warningCircleFill: <WarningCircleFillIcon {...svgIconProps} />,\n filter: <FilterIcon {...svgIconProps} />,\n refresh: <RefreshIcon {...svgIconProps} />,\n logout: <LogoutIcon {...svgIconProps} />,\n language: <LanguageIcon {...svgIconProps} />,\n administration: <AdministrationIcon {...svgIconProps} />,\n tableNoRecord: <TableNoRecordIcon />,\n equals: <EqualsIcon />\n };\n\n const iconShapeProps: IconShapeInterface = {\n size: `${iconSizeMapper[props.size]}px` || `${iconSizeMapper['medium']}px`,\n shapeColor: props.shapeColor || ColorDark.silver,\n shapeType: props.shapeType\n };\n\n if (props.shapeType) {\n return (\n <IconContainer data-test-id={props.dataTestId} {...iconShapeProps}>\n {cloneElement(iconMapper[props.name], { className: props.className })}\n </IconContainer>\n );\n }\n\n return cloneElement(iconMapper[props.name], { className: props.className });\n};\n\nIcon.prototype = {\n size: PropTypes.string,\n color: PropTypes.string,\n shapeColor: PropTypes.string\n};\n\nIcon.defaultProps = {\n size: 'medium',\n color: ColorDark.blackCoral,\n shapeColor: ColorDark.silver\n};\n\nexport default Icon;\n"],"names":["iconSizeMapper","large","medium","small","micro","iconShapeMapper","circle","BorderRadiusType","square","IconContainer","styled","div","props","shapeColor","ColorDark","silver","shapeType","size","Icon","svgIconProps","fill","color","gumbo","height","width","iconMapper","addImage","_jsx","jsx","AddImage","Object","assign","filelist","FileListIcon","save","SaveIcon","payslip","PayslipIcon","activeloan","ActiveLoanIcon","activity","ActivityIcon","add","AddIcon","consultant","ConsultantIcon","available","AvailableIcon","addCircleLine","AddCircleLineIcon","arrowbackleft","ArrowBackLeftIcon","arrowdown","ArrowDownIcon","arrowdowncircle","ArrowDownCircleIcon","arrowdownfill","ArrowDownFillIcon","arrowleft","ArrowLeftIcon","arrowleftcircle","ArrowLeftCircleIcon","arrowright","ArrowRightIcon","arrowrightcircle","ArrowRightCircleIcon","arrowrightfill","ArrowRightFillIcon","arrowup","ArrowUpIcon","arrowupcircle","ArrowUpCircleIcon","arrowupfill","ArrowUpFillIcon","attendance","AttendanceIcon","avatar","AvatarIcon","bank","BankIcon","building","BuildingIcon","business","BusinessIcon","calendar","CalendarIcon","calendarcheckin","CalendarCheckInIcon","calendarcheckout","CalendarCheckOutIcon","calendarLeave","CalendarLeaveIcon","calendarmonthly","CalendarMonthlyIcon","calendarSchedule","CalendarScheduleIcon","cancel","CancelIcon","caretDate","CaretDateIcon","check","CheckIcon","checkboxFill","CheckboxFillIcon","checkboxIndeterminateFill","CheckboxIndeterminateFillIcon","checkcircle","CheckCircleIcon","checkcirclefill","CheckCircleFillIcon","chevronDoubleArrowLeft","ChevronDoubleArrowLeftIcon","chevronDoubleArrowRight","ChevronDoubleArrowRightIcon","chevrondown","ChevronDownIcon","chevronleft","ChevronLeftIcon","chevronright","ChevronRightIcon","chevronup","ChevronUpIcon","configuration","ConfigurationIcon","client","ClientIcon","clipboardCheck","ClipboardCheck","close","CloseIcon","closecircle","CloseCircleIcon","closecirclefill","CloseCircleFillIcon","closeCircleXFill","CloseCircleXFillIcon","dashboard","DashboardIcon","delete","DeleteIcon","document","DocumentIcon","documentalt","DocumentAltIcon","download","DownloadIcon","edit","EditIcon","electricShieldCircle","ElectricShieldCircleIcon","eyeoff","EyeOffIcon","eyeon","EyeOnIcon","expense","ExpenseIcon","inbox","InboxIcon","information","InformationIcon","informationcircle","InformationCircleIcon","informationfill","InformationFillIcon","link","LinkIcon","list","ListIcon","lock","LockIcon","noteFill","NoteFillIcon","noteList","NoteListIcon","noteSearch","NoteSearchIcon","norecord","NoRecordIcon","percentageStruct","PercentageStructIcon","percentageStructCircle","PercentageStructCircleIcon","phone","PhoneIcon","photo","PhotosIcon","plusShieldCircle","PlusShieldCircleIcon","radioButton","RadioButtonIcon","rotateLeft","RotateLefttIcon","rotateRight","RotateRightIcon","search","SearchIcon","setting","SettingIcon","sort","SortIcon","star","StarIcon","triangleLeft","TriangleLeftIcon","undo","UndoIcon","upload","UploadIcon","user","UserIcon","userUnfollow","UserUnfollowIcon","warning","WarningIcon","warningfill","WarningFillIcon","work","WorkIcon","room","RoomIcon","marker","MarkerIcon","message","MessageIcon","menuGrid","MenuGridIcon","menuLine","MenuLineIcon","minus","MinusIcon","more","MoreIcon","moreHorizontal","MoreHorizontalIcon","project","ProjectIcon","product","ProductIcon","usergroup","UserGroupIcon","notebook","NotebookIcon","payroll","PayrollIcon","plus","PlusIcon","copyFill","CopyFillIcon","notification","NotificationIcon","notificationFill","NotificationFillIcon","pencilFill","PencilFillIcon","emptyNotification","EmptyNotification","breakTime","BreakTimeIcon","time","TimeIcon","warningCircleFill","WarningCircleFillIcon","filter","FilterIcon","refresh","RefreshIcon","logout","LogoutIcon","language","LanguageIcon","administration","AdministrationIcon","tableNoRecord","TableNoRecordIcon","ReactComponent","equals","EqualsIcon","iconShapeProps","dataTestId","children","cloneElement","name","className","prototype","PropTypes.string","propTypesExports","string","defaultProps","blackCoral"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const IconTypeArr: readonly ["add", "addImage", "available", "addCircleLine", "arrowbackleft", "arrowdown", "arrowdowncircle", "arrowdownfill", "arrowleft", "arrowleftcircle", "arrowright", "arrowrightcircle", "arrowrightfill", "arrowup", "arrowupcircle", "arrowupfill", "attendance", "avatar", "bank", "building", "business", "breakTime", "calendar", "calendarcheckin", "calendarcheckout", "calendarLeave", "calendarmonthly", "calendarSchedule", "cancel", "check", "checkboxFill", "checkboxIndeterminateFill", "checkcircle", "checkcirclefill", "chevronDoubleArrowLeft", "chevronDoubleArrowRight", "chevrondown", "chevronleft", "chevronright", "chevronup", "client", "close", "closecircle", "closecirclefill", "closeCircleXFill", "configuration", "dashboard", "delete", "document", "documentalt", "download", "edit", "electricShieldCircle", "expense", "eyeoff", "eyeon", "filter", "inbox", "information", "informationcircle", "informationfill", "link", "list", "lock", "minus", "more", "moreHorizontal", "noteFill", "norecord", "percentageStruct", "percentageStructCircle", "phone", "plusShieldCircle", "radioButton", "rotateLeft", "rotateRight", "star", "search", "setting", "sort", "time", "undo", "upload", "user", "warning", "warningfill", "work", "notebook", "usergroup", "plus", "project", "message", "menuGrid", "menuLine", "payroll", "product", "consultant", "activeloan", "room", "copyFill", "pencilFill", "activity", "filelist", "payslip", "caretDate", "notification", "notificationFill", "save", "triangleLeft", "noteSearch", "noteList", "photo", "emptyNotification", "marker", "userUnfollow", "clipboardCheck", "warningCircleFill", "refresh", "logout", "language", "administration", "tableNoRecord"];
|
|
1
|
+
export declare const IconTypeArr: readonly ["add", "addImage", "available", "addCircleLine", "arrowbackleft", "arrowdown", "arrowdowncircle", "arrowdownfill", "arrowleft", "arrowleftcircle", "arrowright", "arrowrightcircle", "arrowrightfill", "arrowup", "arrowupcircle", "arrowupfill", "attendance", "avatar", "bank", "building", "business", "breakTime", "calendar", "calendarcheckin", "calendarcheckout", "calendarLeave", "calendarmonthly", "calendarSchedule", "cancel", "check", "checkboxFill", "checkboxIndeterminateFill", "checkcircle", "checkcirclefill", "chevronDoubleArrowLeft", "chevronDoubleArrowRight", "chevrondown", "chevronleft", "chevronright", "chevronup", "client", "close", "closecircle", "closecirclefill", "closeCircleXFill", "configuration", "dashboard", "delete", "document", "documentalt", "download", "edit", "electricShieldCircle", "expense", "eyeoff", "eyeon", "filter", "inbox", "information", "informationcircle", "informationfill", "link", "list", "lock", "minus", "more", "moreHorizontal", "noteFill", "norecord", "percentageStruct", "percentageStructCircle", "phone", "plusShieldCircle", "radioButton", "rotateLeft", "rotateRight", "star", "search", "setting", "sort", "time", "undo", "upload", "user", "warning", "warningfill", "work", "notebook", "usergroup", "plus", "project", "message", "menuGrid", "menuLine", "payroll", "product", "consultant", "activeloan", "room", "copyFill", "pencilFill", "activity", "filelist", "payslip", "caretDate", "notification", "notificationFill", "save", "triangleLeft", "noteSearch", "noteList", "photo", "emptyNotification", "marker", "userUnfollow", "clipboardCheck", "warningCircleFill", "refresh", "logout", "language", "administration", "tableNoRecord", "equals"];
|
|
2
2
|
export type IconType = (typeof IconTypeArr)[number];
|
|
3
3
|
export type IconSizeType = 'extra-large' | 'large' | 'medium' | 'small' | 'extra-small' | 'micro';
|
|
4
4
|
export type IconSizeValueType = 48 | 40 | 32 | 24 | 16 | 12;
|
|
@@ -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("react"),n=require("../../utils/getChildrenOnDisplayName.js"),i=require("../Icon/Icon.js"),s=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),l=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.js"),a=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");const c=({iconTriangleContainerStyles:s,iconTriangleStyles:c,panelContainerStyles:u,offsetX:p=0,offsetY:d=0,children:f,position:m="right-start",isAutoFlip:g,containerStyles:h})=>{const j=r.useRef(null),[x,b]=r.useState(!1),[v,w]=r.useState(!1),y=r.useRef(),N=r.useRef(!1),T=r.useRef(!0),O={"top-start":"justify-center w-full -top-[9px] origin-center -rotate-90",top:"justify-center w-full -top-[9px] origin-center -rotate-90","top-end":"justify-center w-full -top-[9px] origin-center -rotate-90","right-start":"items-center h-full top-0 -right-[9px]",right:"items-center h-full top-0 -right-[9px]","right-end":"items-center h-full top-0 -right-[9px]","bottom-start":"justify-center w-full -bottom-[9px] origin-center rotate-90",bottom:"justify-center w-full -bottom-[9px] origin-center rotate-90","bottom-end":"justify-center w-full -bottom-[9px] origin-center rotate-90","left-start":"items-center h-full origin-center rotate-180 top-0 -left-[9px]",left:"items-center h-full origin-center rotate-180 top-0 -left-[9px]","left-end":"items-center h-full origin-center rotate-180 top-0 -left-[9px]"},q={"top-start":"pb-1.5",top:"pb-1.5","top-end":"pb-1.5","right-start":"pl-1.5",right:"pl-1.5","right-end":"pl-1.5","bottom-start":"pt-1.5",bottom:"pt-1.5","bottom-end":"pt-1.5","left-start":"pr-1.5",left:"pr-1.5","left-end":"pr-1.5"},M=e=>{const[t]=e.split("-");return"right"===t||"left"===t},P=e=>{y.current&&clearTimeout(y.current),y.current=setTimeout((()=>{x||v||N.current||e(),N.current=!1}),100)};return r.useEffect((()=>{var e;T.current?T.current=!1:x||v||null===(e=j.current)||void 0===e||e.click()}),[x,v]),e.jsx(l.Popover,Object.assign({className:o.twMerge("relative",h)},{children:({open:h,close:x})=>e.jsxs(t.Float,Object.assign({placement:m,flip:g,offset:{crossAxis:M(m)?d:p,mainAxis:M(m)?p:d}},{children:[e.jsxs("div",Object.assign({className:"relative"},{children:[e.jsx(l.PopoverButton,Object.assign({ref:j,className:"p-0 bg-transparent outline-none
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@headlessui-float/react/dist/headlessui-float.mjs.js"),r=require("react"),n=require("../../utils/getChildrenOnDisplayName.js"),i=require("../Icon/Icon.js"),s=require("../Text/BaseText.js");require("../Text/Text.js");var o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),l=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.js"),a=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js");const c=({iconTriangleContainerStyles:s,iconTriangleStyles:c,panelContainerStyles:u,offsetX:p=0,offsetY:d=0,children:f,position:m="right-start",isAutoFlip:g,containerStyles:h})=>{const j=r.useRef(null),[x,b]=r.useState(!1),[v,w]=r.useState(!1),y=r.useRef(),N=r.useRef(!1),T=r.useRef(!0),O={"top-start":"justify-center w-full -top-[9px] origin-center -rotate-90",top:"justify-center w-full -top-[9px] origin-center -rotate-90","top-end":"justify-center w-full -top-[9px] origin-center -rotate-90","right-start":"items-center h-full top-0 -right-[9px]",right:"items-center h-full top-0 -right-[9px]","right-end":"items-center h-full top-0 -right-[9px]","bottom-start":"justify-center w-full -bottom-[9px] origin-center rotate-90",bottom:"justify-center w-full -bottom-[9px] origin-center rotate-90","bottom-end":"justify-center w-full -bottom-[9px] origin-center rotate-90","left-start":"items-center h-full origin-center rotate-180 top-0 -left-[9px]",left:"items-center h-full origin-center rotate-180 top-0 -left-[9px]","left-end":"items-center h-full origin-center rotate-180 top-0 -left-[9px]"},q={"top-start":"pb-1.5",top:"pb-1.5","top-end":"pb-1.5","right-start":"pl-1.5",right:"pl-1.5","right-end":"pl-1.5","bottom-start":"pt-1.5",bottom:"pt-1.5","bottom-end":"pt-1.5","left-start":"pr-1.5",left:"pr-1.5","left-end":"pr-1.5"},M=e=>{const[t]=e.split("-");return"right"===t||"left"===t},P=e=>{y.current&&clearTimeout(y.current),y.current=setTimeout((()=>{x||v||N.current||e(),N.current=!1}),100)};return r.useEffect((()=>{var e;T.current?T.current=!1:x||v||null===(e=j.current)||void 0===e||e.click()}),[x,v]),e.jsx(l.Popover,Object.assign({className:o.twMerge("relative",h)},{children:({open:h,close:x})=>e.jsxs(t.Float,Object.assign({placement:m,flip:g,offset:{crossAxis:M(m)?d:p,mainAxis:M(m)?p:d}},{children:[e.jsxs("div",Object.assign({className:"relative"},{children:[e.jsx(l.PopoverButton,Object.assign({ref:j,className:"z-10 w-full p-0 bg-transparent outline-none",onMouseEnter:()=>{var e;y.current&&clearTimeout(y.current),b(!0),h||null===(e=j.current)||void 0===e||e.click()},onMouseLeave:()=>{h&&(b(!1),P(x))}},{children:n.getChildrenOnDisplayName("function"==typeof f?f({open:h,close:x}):f,"Button")})),h&&e.jsx("div",Object.assign({className:o.twMerge(`absolute flex z-20 transition ease-in duration-100 ${O[m]}`,s)},{children:e.jsx(i,{name:"triangleLeft",className:o.twMerge("w-3 h-3 fill-dark-solitude shadow-lg",c)})}))]})),e.jsx(a.Transition,Object.assign({as:r.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(l.PopoverPanel,Object.assign({className:o.twMerge(`${q[m]}`),onMouseEnter:()=>{y.current&&clearTimeout(y.current),w(!0)},onMouseLeave:e=>{const t=j.current;if(t){const r=t.getBoundingClientRect(),n=e.clientX>=r.left&&e.clientX<=r.right&&e.clientY>=r.top&&e.clientY<=r.bottom;N.current=n}w(!1),P(x)}},{children:e.jsx("div",Object.assign({className:o.twMerge("rounded-lg min-w-0 bg-white flex flex-col overflow-hidden border-dark-silver z-20",u)},{children:n.getChildrenOnDisplayName("function"==typeof f?f({open:h,close:x}):f,"Panel")}))}))}))]}))}))},u=({children:t})=>e.jsx(e.Fragment,{children:t||e.jsx(s.default,{label:"Popover"})});u.displayName="Button",c.Button=u;const p=({children:t})=>e.jsx(e.Fragment,{children:t||e.jsx("div",{className:"w-52 h-52 bg-dark-solitude"})});p.displayName="Panel",c.Panel=p,module.exports=c;
|
|
2
2
|
//# sourceMappingURL=BaseTooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTooltip.js","sources":["../../../../src/components/Tooltip/BaseTooltip.tsx"],"sourcesContent":["import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseTooltipButtonInterface,\n BaseTooltipInterface,\n BaseTooltipPanelInterface,\n PickerPosition\n} from './BaseTooltip.type';\n\nconst BaseTooltip = ({\n iconTriangleContainerStyles,\n iconTriangleStyles,\n panelContainerStyles,\n offsetX = 0,\n offsetY = 0,\n children,\n position = 'right-start',\n isAutoFlip,\n containerStyles\n}: BaseTooltipInterface) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [isButtonHovered, setIsButtonHovered] = useState(false);\n const [isPanelHovered, setIsPanelHovered] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout>();\n const isMovingToButtonRef = useRef(false);\n const isFirstRender = useRef(true);\n\n const TriangleTransformMapper: Record<PickerPosition, string> = {\n 'top-start': 'justify-center w-full -top-[9px] origin-center -rotate-90',\n top: 'justify-center w-full -top-[9px] origin-center -rotate-90',\n 'top-end': 'justify-center w-full -top-[9px] origin-center -rotate-90',\n 'right-start': 'items-center h-full top-0 -right-[9px]',\n right: 'items-center h-full top-0 -right-[9px]',\n 'right-end': 'items-center h-full top-0 -right-[9px]',\n 'bottom-start': 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n bottom: 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n 'bottom-end': 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n 'left-start': 'items-center h-full origin-center rotate-180 top-0 -left-[9px]',\n left: 'items-center h-full origin-center rotate-180 top-0 -left-[9px]',\n 'left-end': 'items-center h-full origin-center rotate-180 top-0 -left-[9px]'\n };\n\n const PickerPositionMapper: Record<PickerPosition, string> = {\n 'top-start': 'pb-1.5',\n top: 'pb-1.5',\n 'top-end': 'pb-1.5',\n 'right-start': 'pl-1.5',\n right: 'pl-1.5',\n 'right-end': 'pl-1.5',\n 'bottom-start': 'pt-1.5',\n bottom: 'pt-1.5',\n 'bottom-end': 'pt-1.5',\n 'left-start': 'pr-1.5',\n left: 'pr-1.5',\n 'left-end': 'pr-1.5'\n };\n\n const checkPosition = (position: string): boolean => {\n const [direction] = position.split('-');\n return direction === 'right' || direction === 'left';\n };\n\n const handleClosePanel = (close: () => void) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n timeoutRef.current = setTimeout(() => {\n if (!isButtonHovered && !isPanelHovered && !isMovingToButtonRef.current) {\n close();\n }\n isMovingToButtonRef.current = false;\n }, 100);\n };\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return;\n }\n\n if (!isButtonHovered && !isPanelHovered) {\n buttonRef.current?.click();\n }\n }, [isButtonHovered, isPanelHovered]);\n\n return (\n <Popover className={twMerge('relative', containerStyles)}>\n {({ open, close }) => (\n <Float\n placement={position}\n flip={isAutoFlip}\n offset={{\n crossAxis: checkPosition(position) ? offsetY : offsetX,\n mainAxis: checkPosition(position) ? offsetX : offsetY\n }}\n >\n <div className='relative'>\n <PopoverButton\n ref={buttonRef}\n className='p-0 bg-transparent outline-none w-full z-10'\n onMouseEnter={() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsButtonHovered(true);\n if (!open) {\n buttonRef.current?.click();\n }\n }}\n onMouseLeave={() => {\n setIsButtonHovered(false);\n handleClosePanel(close);\n }}\n >\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'Button'\n )}\n </PopoverButton>\n {open && (\n <div\n className={twMerge(\n `absolute flex z-20 transition ease-in duration-100 ${TriangleTransformMapper[position]}`,\n iconTriangleContainerStyles\n )}\n >\n <Icon\n name='triangleLeft'\n className={twMerge('w-3 h-3 fill-dark-solitude shadow-lg', iconTriangleStyles)}\n />\n </div>\n )}\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <PopoverPanel\n className={twMerge(`${PickerPositionMapper[position]}`)}\n onMouseEnter={() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsPanelHovered(true);\n }}\n onMouseLeave={(e) => {\n // Check if we're moving to the button\n const buttonElement = buttonRef.current;\n if (buttonElement) {\n const buttonRect = buttonElement.getBoundingClientRect();\n const isMovingToward =\n e.clientX >= buttonRect.left &&\n e.clientX <= buttonRect.right &&\n e.clientY >= buttonRect.top &&\n e.clientY <= buttonRect.bottom;\n isMovingToButtonRef.current = isMovingToward;\n }\n\n setIsPanelHovered(false);\n handleClosePanel(close);\n }}\n >\n <div\n className={twMerge(\n 'rounded-lg min-w-0 bg-white flex flex-col overflow-hidden border-dark-silver z-20',\n panelContainerStyles\n )}\n >\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'Panel'\n )}\n </div>\n </PopoverPanel>\n </Transition>\n </Float>\n )}\n </Popover>\n );\n};\n\n// Button and Panel components remain unchanged\nconst Button = ({ children }: BaseTooltipButtonInterface) => {\n return <>{children ? children : <BaseText label='Popover' />}</>;\n};\nButton.displayName = 'Button';\nBaseTooltip.Button = Button;\n\nconst Panel = ({ children }: BaseTooltipPanelInterface) => {\n return <>{children ? children : <div className='w-52 h-52 bg-dark-solitude' />}</>;\n};\nPanel.displayName = 'Panel';\nBaseTooltip.Panel = Panel;\n\nexport default BaseTooltip;\n"],"names":["BaseTooltip","iconTriangleContainerStyles","iconTriangleStyles","panelContainerStyles","offsetX","offsetY","children","position","isAutoFlip","containerStyles","buttonRef","useRef","isButtonHovered","setIsButtonHovered","useState","isPanelHovered","setIsPanelHovered","timeoutRef","isMovingToButtonRef","isFirstRender","TriangleTransformMapper","top","right","bottom","left","PickerPositionMapper","checkPosition","direction","split","handleClosePanel","close","current","clearTimeout","setTimeout","useEffect","_a","click","_jsx","Popover","Object","assign","className","twMerge","open","_jsxs","Float","placement","flip","offset","crossAxis","mainAxis","PopoverButton","ref","onMouseEnter","onMouseLeave","getChildrenOnDisplayName","jsx","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","PopoverPanel","e","buttonElement","buttonRect","getBoundingClientRect","isMovingToward","clientX","clientY","Button","BaseText","label","displayName","Panel","_Fragment"],"mappings":"8iBAeA,MAAMA,EAAc,EAClBC,8BACAC,qBACAC,uBACAC,UAAU,EACVC,UAAU,EACVC,WACAC,WAAW,cACXC,aACAC,sBAEA,MAAMC,EAAYC,SAA0B,OACrCC,EAAiBC,GAAsBC,EAAQA,UAAC,IAChDC,EAAgBC,GAAqBF,EAAQA,UAAC,GAC/CG,EAAaN,EAAAA,SACbO,EAAsBP,UAAO,GAC7BQ,EAAgBR,UAAO,GAEvBS,EAA0D,CAC9D,YAAa,4DACbC,IAAK,4DACL,UAAW,4DACX,cAAe,yCACfC,MAAO,yCACP,YAAa,yCACb,eAAgB,8DAChBC,OAAQ,8DACR,aAAc,8DACd,aAAc,iEACdC,KAAM,iEACN,WAAY,kEAGRC,EAAuD,CAC3D,YAAa,SACbJ,IAAK,SACL,UAAW,SACX,cAAe,SACfC,MAAO,SACP,YAAa,SACb,eAAgB,SAChBC,OAAQ,SACR,aAAc,SACd,aAAc,SACdC,KAAM,SACN,WAAY,UAGRE,EAAiBnB,IACrB,MAAOoB,GAAapB,EAASqB,MAAM,KACnC,MAAqB,UAAdD,GAAuC,SAAdA,CAAoB,EAGhDE,EAAoBC,IACpBb,EAAWc,SACbC,aAAaf,EAAWc,SAG1Bd,EAAWc,QAAUE,YAAW,KACzBrB,GAAoBG,GAAmBG,EAAoBa,SAC9DD,IAEFZ,EAAoBa,SAAU,CAAK,GAClC,IAAI,EAcT,OAXAG,EAAAA,WAAU,WACJf,EAAcY,QAChBZ,EAAcY,SAAU,EAIrBnB,GAAoBG,GACJ,QAAnBoB,EAAAzB,EAAUqB,eAAS,IAAAI,GAAAA,EAAAC,OACpB,GACA,CAACxB,EAAiBG,IAGnBsB,MAACC,EAAAA,QAAOC,OAAAC,OAAA,CAACC,UAAWC,EAAOA,QAAC,WAAYjC,IACrC,CAAAH,SAAA,EAAGqC,OAAMb,WACRc,OAACC,EAAAA,MACCN,OAAAC,OAAA,CAAAM,UAAWvC,EACXwC,KAAMvC,EACNwC,OAAQ,CACNC,UAAWvB,EAAcnB,GAAYF,EAAUD,EAC/C8C,SAAUxB,EAAcnB,GAAYH,EAAUC,IAC/C,CAAAC,SAAA,CAEDsC,4BAAKH,UAAU,YACb,CAAAnC,SAAA,CAAA+B,MAACc,EAAAA,cACCZ,OAAAC,OAAA,CAAAY,IAAK1C,EACL+B,UAAU,8CACVY,aAAc,WACRpC,EAAWc,SACbC,aAAaf,EAAWc,SAE1BlB,GAAmB,GACd8B,GACgB,QAAnBR,EAAAzB,EAAUqB,eAAS,IAAAI,GAAAA,EAAAC,OACpB,EAEHkB,aAAc,KACZzC,GAAmB,GACnBgB,EAAiBC,EAAM,GACxB,CAAAxB,SAEAiD,EAAwBA,yBACH,mBAAbjD,EAA0BA,EAAS,CAAEqC,OAAMb,UAAWxB,EAC7D,aAGHqC,GACCN,2BACEI,UAAWC,EAAAA,QACT,sDAAsDtB,EAAwBb,KAC9EN,cAGFoC,EAACmB,IAAAC,EACC,CAAAC,KAAK,eACLjB,UAAWC,EAAAA,QAAQ,uCAAwCxC,YAKnEmC,EAACmB,IAAAG,EAAUA,0BACTC,GAAIC,WACJC,MAAM,kCACNC,UAAU,cACVC,QAAQ,uBAER3B,EAAAA,IAAC4B,EAAAA,aACC1B,OAAAC,OAAA,CAAAC,UAAWC,EAAAA,QAAQ,GAAGjB,EAAqBlB,MAC3C8C,aAAc,KACRpC,EAAWc,SACbC,aAAaf,EAAWc,SAE1Bf,GAAkB,EAAK,EAEzBsC,aAAeY,IAEb,MAAMC,EAAgBzD,EAAUqB,QAChC,GAAIoC,EAAe,CACjB,MAAMC,EAAaD,EAAcE,wBAC3BC,EACJJ,EAAEK,SAAWH,EAAW5C,MACxB0C,EAAEK,SAAWH,EAAW9C,OACxB4C,EAAEM,SAAWJ,EAAW/C,KACxB6C,EAAEM,SAAWJ,EAAW7C,OAC1BL,EAAoBa,QAAUuC,CAC/B,CAEDtD,GAAkB,GAClBa,EAAiBC,EAAM,aAGzBO,EAAAA,IACE,MAAAE,OAAAC,OAAA,CAAAC,UAAWC,EAAAA,QACT,oFACAvC,IAGD,CAAAG,SAAAiD,EAAwBA,yBACH,mBAAbjD,EAA0BA,EAAS,CAAEqC,OAAMb,UAAWxB,EAC7D,wBAQd,EAIEmE,EAAS,EAAGnE,cACT+B,2BAAG/B,GAAsB+B,MAACqC,EAAAA,QAAS,CAAAC,MAAM,cAElDF,EAAOG,YAAc,SACrB5E,EAAYyE,OAASA,EAErB,MAAMI,EAAQ,EAAGvE,cACR+B,EAAGmB,IAAAsB,EAAAjB,SAAA,CAAAvD,SAAAA,GAAsB+B,aAAKI,UAAU,iCAEjDoC,EAAMD,YAAc,QACpB5E,EAAY6E,MAAQA"}
|
|
1
|
+
{"version":3,"file":"BaseTooltip.js","sources":["../../../../src/components/Tooltip/BaseTooltip.tsx"],"sourcesContent":["/* eslint-disable sonarjs/cognitive-complexity */\nimport { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react';\nimport { Float } from '@headlessui-float/react';\nimport React, { Fragment, useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseTooltipButtonInterface,\n BaseTooltipInterface,\n BaseTooltipPanelInterface,\n PickerPosition\n} from './BaseTooltip.type';\n\nconst BaseTooltip = ({\n iconTriangleContainerStyles,\n iconTriangleStyles,\n panelContainerStyles,\n offsetX = 0,\n offsetY = 0,\n children,\n position = 'right-start',\n isAutoFlip,\n containerStyles\n}: BaseTooltipInterface) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [isButtonHovered, setIsButtonHovered] = useState(false);\n const [isPanelHovered, setIsPanelHovered] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout>();\n const isMovingToButtonRef = useRef(false);\n const isFirstRender = useRef(true);\n\n const TriangleTransformMapper: Record<PickerPosition, string> = {\n 'top-start': 'justify-center w-full -top-[9px] origin-center -rotate-90',\n top: 'justify-center w-full -top-[9px] origin-center -rotate-90',\n 'top-end': 'justify-center w-full -top-[9px] origin-center -rotate-90',\n 'right-start': 'items-center h-full top-0 -right-[9px]',\n right: 'items-center h-full top-0 -right-[9px]',\n 'right-end': 'items-center h-full top-0 -right-[9px]',\n 'bottom-start': 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n bottom: 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n 'bottom-end': 'justify-center w-full -bottom-[9px] origin-center rotate-90',\n 'left-start': 'items-center h-full origin-center rotate-180 top-0 -left-[9px]',\n left: 'items-center h-full origin-center rotate-180 top-0 -left-[9px]',\n 'left-end': 'items-center h-full origin-center rotate-180 top-0 -left-[9px]'\n };\n\n const PickerPositionMapper: Record<PickerPosition, string> = {\n 'top-start': 'pb-1.5',\n top: 'pb-1.5',\n 'top-end': 'pb-1.5',\n 'right-start': 'pl-1.5',\n right: 'pl-1.5',\n 'right-end': 'pl-1.5',\n 'bottom-start': 'pt-1.5',\n bottom: 'pt-1.5',\n 'bottom-end': 'pt-1.5',\n 'left-start': 'pr-1.5',\n left: 'pr-1.5',\n 'left-end': 'pr-1.5'\n };\n\n const checkPosition = (position: string): boolean => {\n const [direction] = position.split('-');\n return direction === 'right' || direction === 'left';\n };\n\n const handleClosePanel = (close: () => void) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n timeoutRef.current = setTimeout(() => {\n if (!isButtonHovered && !isPanelHovered && !isMovingToButtonRef.current) {\n close();\n }\n isMovingToButtonRef.current = false;\n }, 100);\n };\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false;\n return;\n }\n\n if (!isButtonHovered && !isPanelHovered) {\n buttonRef.current?.click();\n }\n }, [isButtonHovered, isPanelHovered]);\n\n return (\n <Popover className={twMerge('relative', containerStyles)}>\n {({ open, close }) => (\n <Float\n placement={position}\n flip={isAutoFlip}\n offset={{\n crossAxis: checkPosition(position) ? offsetY : offsetX,\n mainAxis: checkPosition(position) ? offsetX : offsetY\n }}\n >\n <div className='relative'>\n <PopoverButton\n ref={buttonRef}\n className='z-10 w-full p-0 bg-transparent outline-none'\n onMouseEnter={() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsButtonHovered(true);\n if (!open) {\n buttonRef.current?.click();\n }\n }}\n onMouseLeave={() => {\n if (open) {\n setIsButtonHovered(false);\n handleClosePanel(close);\n }\n }}\n >\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'Button'\n )}\n </PopoverButton>\n {open && (\n <div\n className={twMerge(\n `absolute flex z-20 transition ease-in duration-100 ${TriangleTransformMapper[position]}`,\n iconTriangleContainerStyles\n )}\n >\n <Icon\n name='triangleLeft'\n className={twMerge('w-3 h-3 fill-dark-solitude shadow-lg', iconTriangleStyles)}\n />\n </div>\n )}\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <PopoverPanel\n className={twMerge(`${PickerPositionMapper[position]}`)}\n onMouseEnter={() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsPanelHovered(true);\n }}\n onMouseLeave={(e) => {\n // Check if we're moving to the button\n const buttonElement = buttonRef.current;\n if (buttonElement) {\n const buttonRect = buttonElement.getBoundingClientRect();\n const isMovingToward =\n e.clientX >= buttonRect.left &&\n e.clientX <= buttonRect.right &&\n e.clientY >= buttonRect.top &&\n e.clientY <= buttonRect.bottom;\n isMovingToButtonRef.current = isMovingToward;\n }\n\n setIsPanelHovered(false);\n handleClosePanel(close);\n }}\n >\n <div\n className={twMerge(\n 'rounded-lg min-w-0 bg-white flex flex-col overflow-hidden border-dark-silver z-20',\n panelContainerStyles\n )}\n >\n {getChildrenOnDisplayName(\n typeof children === 'function' ? children({ open, close }) : children,\n 'Panel'\n )}\n </div>\n </PopoverPanel>\n </Transition>\n </Float>\n )}\n </Popover>\n );\n};\n\n// Button and Panel components remain unchanged\nconst Button = ({ children }: BaseTooltipButtonInterface) => {\n return <>{children ? children : <BaseText label='Popover' />}</>;\n};\nButton.displayName = 'Button';\nBaseTooltip.Button = Button;\n\nconst Panel = ({ children }: BaseTooltipPanelInterface) => {\n return <>{children ? children : <div className='w-52 h-52 bg-dark-solitude' />}</>;\n};\nPanel.displayName = 'Panel';\nBaseTooltip.Panel = Panel;\n\nexport default BaseTooltip;\n"],"names":["BaseTooltip","iconTriangleContainerStyles","iconTriangleStyles","panelContainerStyles","offsetX","offsetY","children","position","isAutoFlip","containerStyles","buttonRef","useRef","isButtonHovered","setIsButtonHovered","useState","isPanelHovered","setIsPanelHovered","timeoutRef","isMovingToButtonRef","isFirstRender","TriangleTransformMapper","top","right","bottom","left","PickerPositionMapper","checkPosition","direction","split","handleClosePanel","close","current","clearTimeout","setTimeout","useEffect","_a","click","_jsx","Popover","Object","assign","className","twMerge","open","_jsxs","Float","placement","flip","offset","crossAxis","mainAxis","PopoverButton","ref","onMouseEnter","onMouseLeave","getChildrenOnDisplayName","jsx","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","PopoverPanel","e","buttonElement","buttonRect","getBoundingClientRect","isMovingToward","clientX","clientY","Button","BaseText","label","displayName","Panel","_Fragment"],"mappings":"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"}
|