npm - uangcermat-web-toolkit-v2 - Versions diffs - 0.1.21 → 0.1.23 - Mend

uangcermat-web-toolkit-v2 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/build/index.css CHANGED Viewed

@@ -430885,6 +430885,14 @@
     --tw-bg-opacity: 1;
     background-color: rgb(6 32 63 / var(--tw-bg-opacity));
 }
+.hover\:bg-red-500:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+.hover\:bg-red-americanRed:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(178 38 52 / var(--tw-bg-opacity));
+}
 .hover\:fill-blue-buttonBlue:hover {
     fill: #25A9EF;
 }
@@ -430899,6 +430907,10 @@
     --tw-text-opacity: 1;
     color: rgb(82 97 107 / var(--tw-text-opacity));
 }
+.hover\:text-red-linenRed:hover {
+    --tw-text-opacity: 1;
+    color: rgb(250 233 234 / var(--tw-text-opacity));
+}
 .hover\:underline:hover {
     text-decoration-line: underline;
 }

package/build/src/blocks/Sidebar/Sidebar.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SidebarFooterInterface, SidebarHeaderInterface, SidebarInterface, SidebarPopoverInterface, SidebarUserProfileInterface } from './Sidebar.type';
 declare const Sidebar: {
-    ({ activeId, activeParent, data, isCollapsed, notificationCountContainerStyles, notificationCountTextStyles, containerStyles, itemMenuContainerStyles, itemMenuIconStyles, itemMenuTitleStyles, itemMenuActiveBgColor, itemSubMenuContainerStyles, itemSubMenuActiveTextColor, onClickCollapsible, onClickNav, children }: SidebarInterface): import("react/jsx-runtime").JSX.Element;
+    ({ activeId, activeParent, data, isCollapsed, notificationCountContainerStyles, notificationCountTextStyles, containerStyles, itemMenuContainerStyles, itemMenuIconStyles, itemMenuTitleStyles, itemMenuActiveBgColor, itemSubMenuContainerStyles, itemSubMenuActiveTextColor, toggleButtonContainerStyles, toggleIconOpenName, toggleIconCloseName, toggleIconStyles, onClickCollapsible, onClickNav, children }: SidebarInterface): import("react/jsx-runtime").JSX.Element;
     Popover: {
         ({ isCollapsed, label, labelStyles, icon, iconStyles, notificationCount, notificationCountContainerStyles, notificationCountTextStyles, position, iconTriangleStyles, iconTriangleContainerStyles, panelContainerStyles, offsetX, offsetY, containerStyles, children }: SidebarPopoverInterface): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/build/src/blocks/Sidebar/Sidebar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),s=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var l=require("../../components/Badge/BaseBadge.js"),a=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 n=require("../../components/Button/BaseButton.js");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 o=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.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 i=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("../../../node_modules/react-ripples/esm/index.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/Uploader/BaseUploader.js");var r=require("../../utils/getChildrenOnDisplayName.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(s);const m=()=>e.jsx("div",{className:"w-full h-[1px] bg-light-whiteSolid"}),x=({id:n,title:i,titleStyles:r,icon:u,iconStyles:m,subMenu:x,isCollapsed:g,activeId:p,selectedId:f,notificationCountContainerStyles:b,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveBgColor:w,itemSubMenuContainerStyles:v,itemSubMenuActiveTextColor:y,onClickCollapsible:C,onExpand:S,onClickNav:N,notifcationCount:k})=>{const M=f===n,[P,B]=d.default.useState(!1);return s.useEffect((()=>{g?B(!1):setTimeout((()=>{B(!0)}),200)}),[g]),e.jsxs("div",Object.assign({className:c.twMerge("overflow-hidden hover:bg-blue-maastrichtBlue rounded-lg "+(M?"bg-blue-maastrichtBlue":"bg-transparent"),h),style:{backgroundColor:M?w:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{P||M||C(),S(M?"":n)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative"},{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(o,{name:u,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",m)})})),P&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",r)})})),!!k&&e.jsx(l,{label:k.toString(),labelStyles:c.twMerge("text-[10px]",j),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!P&&"absolute right-0 top-0"}`),b)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out pl-8 "+(M&&P?"max-h-screen bg-blue-maastrichtBlue":"max-h-0 "),style:{backgroundColor:M&&P?w:"transparent"}},{children:x.map(((t,s)=>e.jsx("button",Object.assign({onClick:()=>N(t),className:c.twMerge("flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue "+(t.navLink===p?"ml-3 text-blue-buttonBlue":""),v),style:{color:t.navLink===p?y:void 0}},{children:e.jsx(a.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===p?"font-semibold":""} `})}),s)))}))]}))},g=({activeId:t,activeParent:l,data:a,isCollapsed:n,notificationCountContainerStyles:i,notificationCountTextStyles:u,containerStyles:m,itemMenuContainerStyles:g,itemMenuIconStyles:p,itemMenuTitleStyles:f,itemMenuActiveBgColor:b,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,onClickCollapsible:w,onClickNav:v,children:y})=>{const C=r.getChildrenOnDisplayName(y,"Header"),S=r.getChildrenOnDisplayName(y,"Footer"),N=r.getChildrenOnDisplayName(y,"UserProfile"),[k,M]=d.default.useState(l),P=s.Children.toArray(y);return e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col relative bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]",m)},{children:[C,e.jsx("button",Object.assign({type:"button",onClick:()=>w(),className:"p-0 bg-transparent"},{children:e.jsx("div",Object.assign({className:"flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg"},{children:e.jsx(o,{name:n?"chevronDoubleArrowRight":"chevronDoubleArrowLeft",className:"w-3 h-3 fill-blue-yaleBlue"})}))})),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 h-full"},{children:a.map(((s,l)=>e.jsx(x,{selectedId:k,id:s.id,title:s.title,icon:s.icon,permission:s.permission,isCollapsed:n,activeId:t,subMenu:s.subMenu,onClickCollapsible:()=>w(),onExpand:e=>M(e),onClickNav:e=>v(e),notifcationCount:s.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:u,itemMenuActiveBgColor:b,itemMenuContainerStyles:g,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:p,titleStyles:f},l)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:s.Children.map(P,((t,s)=>{const l=r.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:l}),s)}))})),N,S]}))},p=({isCollapsed:n,label:u,labelStyles:m,icon:x,iconStyles:g,notificationCount:p,notificationCountContainerStyles:f,notificationCountTextStyles:b,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C,containerStyles:S,children:N})=>{const[k,M]=d.default.useState(!1);s.useEffect((()=>{n?M(!1):setTimeout((()=>{M(!0)}),200)}),[n]);const P=r.getChildrenOnDisplayName(N,"PopoverPanel");return e.jsxs(i,Object.assign({position:j||"right-center",iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2",S)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(o,{name:x,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",g)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:u,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",m)})})),!!p&&e.jsx(l,{label:p.toString(),labelStyles:c.twMerge("text-[10px]",b),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!k&&"absolute right-0 top-0"}`),f)})]}))}),e.jsx(i.Panel,{children:P})]}))};p.displayName="Popover",g.Popover=p;const f=({children:t})=>e.jsx(e.Fragment,{children:t});f.displayName="PopoverPanel",g.PopoverPanel=f;const b=({isCollapsed:t,appLogoClosed:l,appLogoClosedStyles:a,appLogoOpened:n,appLogoOpenedStyles:o,containerStyles:i,onClickHeaderSidebar:r,children:u})=>{const[m,x]=d.default.useState(!1);return s.useEffect((()=>{t?x(!1):setTimeout((()=>{x(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:u||e.jsx("div",Object.assign({className:c.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:m?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:n||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:c.twMerge("w-[113px] h-7",o)})})):e.jsx("img",{src:l||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-[22px] h-[22px]",a)})}))})};b.displayName="Header",g.Header=b;const j=({isCollapsed:t,userLabel:l,userLabelStyles:n,userAvatar:r,userAvatarFallback:u,userAvatarFallbackStyles:x,userAvatarStyles:g,containerStyles:p,panelContainerStyles:f,titleAtPanel:b,titleAtPanelStyles:j,userAvatarAtPanel:h,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:v,userAvatarFallbackAtPanelStyles:y,userLabelAtPanel:C,userLabelAtPanelStyles:S,userEmailAtPanel:N,userEmailAtPanelStyles:k,manageAccountLabelAtPanel:M,manageAccountLabelAtPanelStyles:P,iconManageAccountAtPanel:B,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,translationLabelAtPanel:A,translationLabelAtPanelStyles:T,iconTranslationAtPanel:L,iconTranslationAtPanelStyles:I,onClickTranslation:D,logoutLabelAtPanel:F,logoutLabelAtPanelStyles:E,iconLogoutAtPanel:R,iconLogoutAtPanelStyles:H,onClickLogout:_,children:z,offsetX:G,offsetY:U})=>{const[X,Y]=d.default.useState(!1);return s.useEffect((()=>{t?Y(!1):setTimeout((()=>{Y(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:z||e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col w-full",p)},{children:[e.jsx(m,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsxs(i,Object.assign({offsetX:G,offsetY:U},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer",p)},{children:[r?e.jsx("img",{src:r||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-6 h-6 bg-dark-gumbo rounded overflow-hidden object-cover",g)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",g)},{children:e.jsx(a.default,{label:u,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",x)})})),X&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:l||"",className:c.twMerge("text-light-whiteSolid line-clamp-1 w-full text-left",n)})}))]}))}),e.jsx(i.Panel,{children:e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",f)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(a.default,{label:b||"Account",className:c.twMerge("text-sm font-semibold text-dark-blackCoral",j)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[h?e.jsx("img",{src:h||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-8 h-8 bg-dark-gumbo rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-8 h-8 bg-dark-gumbo rounded",w)},{children:e.jsx(a.default,{label:v,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",y)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(a.default,{label:C||"",className:c.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",S)}),e.jsx(a.default,{label:N||"",className:c.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",k)})]}))]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",onClick:()=>null==O?void 0:O()},{children:[e.jsx(o,{name:B||"configuration",className:c.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(a.default,{label:M||"Manage Account",className:c.twMerge("text-sm font-normal text-dark-blackCoral",P)})]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",onClick:()=>null==D?void 0:D()},{children:[e.jsx(o,{name:L||"language",className:c.twMerge("w-4 h-4 fill-dark-gumbo",I)}),e.jsx(a.default,{label:A||"Translate Page",className:c.twMerge("text-sm font-normal text-dark-blackCoral",T)})]})),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:()=>null==_?void 0:_()},{children:[e.jsx(o,{name:R||"logout",className:c.twMerge("w-4 h-4 fill-dark-gumbo",H)}),e.jsx(a.default,{label:F||"Logout",className:c.twMerge("text-sm font-normal text-dark-blackCoral",E)})]}))]}))})]}))})),e.jsx(m,{})]}))})};j.displayName="UserProfile",g.UserProfile=j;const h=({isCollapsed:l,isShowCompanyProfile:o,companyName:i,companyNameStyles:r,companyLogo:u,companyLogoStyles:m,companyLogoFallback:x,companlogoFallbackStyles:g,companyLogoContainerStyles:p,isShowButtonChangeCompany:f,buttonChangeCompanyOnClick:b,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:w,buttonChangeCompanyIconStyles:v,appName:y,appVersion:C,children:S})=>{const[N,k]=d.default.useState(!1);return s.useEffect((()=>{l?k(!1):setTimeout((()=>{k(!0)}),200)}),[l]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[o&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[u?e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-gray-50 rounded",p)},{children:e.jsx("img",{src:u||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-4 h-4",m)})})):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",p)},{children:e.jsx(a.default,{label:x,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",g)})})),N&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i||"Gajicermat",className:c.twMerge("text-light-whiteSolid 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(n.default,{variant:"secondary",onClick:()=>null==b?void 0:b(),label:N?j||"Select Company":"",className:c.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0  border border-solid border-blue-yaleBlue text-blue-yaleBlue",N?"w-full":"w-6"),h),rightIcon:N?void 0:w||"refresh",rightIconStyles:c.twMerge("ml-0 w-3 h-3",v)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:N?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-right"})})),e.jsx("div",{className:"w-[1px] h-3 bg-light-whiteSolid"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:C||"Version 0.0.0",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};h.displayName="Footer",g.Footer=h,module.exports=g;
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),s=require("react");require("../../components/Avatar/Avatar.js"),require("../../components/Backdrop/Backdrop.js"),require("../../components/Badge/Badge.js");var l=require("../../components/Badge/BaseBadge.js"),a=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 n=require("../../components/Button/BaseButton.js");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 o=require("../../components/Icon/Icon.js");require("../../components/CheckPicker/CheckPicker.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 i=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("../../../node_modules/react-ripples/esm/index.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/Uploader/BaseUploader.js");var r=require("../../utils/getChildrenOnDisplayName.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(s);const m=()=>e.jsx("div",{className:"w-full h-[1px] bg-light-whiteSolid"}),g=({id:n,title:i,titleStyles:r,icon:u,iconStyles:m,subMenu:g,isCollapsed:x,activeId:p,selectedId:b,notificationCountContainerStyles:f,notificationCountTextStyles:j,itemMenuContainerStyles:h,itemMenuActiveContainerStyles:w,itemMenuActiveBgColor:v,itemSubMenuContainerStyles:y,itemSubMenuActiveContainerStyles:C,itemSubMenuActiveTextColor:S,onClickCollapsible:N,onExpand:k,onClickNav:M,notifcationCount:B})=>{const P=b===n,[q,O]=d.default.useState(!1);return s.useEffect((()=>{x?O(!1):setTimeout((()=>{O(!0)}),200)}),[x]),e.jsxs("div",Object.assign({className:c.twMerge(`overflow-hidden hover:bg-blue-maastrichtBlue rounded-lg ${P?w||"bg-blue-maastrichtBlue":"bg-transparent"}`,h),style:{backgroundColor:P?v:void 0}},{children:[e.jsx("button",Object.assign({onClick:()=>{q||P||N(),k(P?"":n)},className:"h-8 pr-4 pl-3 w-full bg-transparent relative"},{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(o,{name:u,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",m)})})),q&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",r)})})),!!B&&e.jsx(l,{label:B.toString(),labelStyles:c.twMerge("text-[10px]",j),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!q&&"absolute right-0 top-0"}`),f)})]}))})),e.jsx("div",Object.assign({className:"flex flex-col overflow-hidden transition-[max-height] duration-500 ease-in-out "+(P&&q?"max-h-screen bg-blue-maastrichtBlue":"max-h-0 "),style:{backgroundColor:P&&q?v:"transparent"}},{children:g.map(((t,s)=>e.jsx("button",Object.assign({onClick:()=>M(t),className:c.twMerge("flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue pl-8 "+(t.navLink===p?`pl-11 ${C||"text-blue-buttonBlue"}`:""),y),style:{color:t.navLink===p?S:void 0}},{children:e.jsx(a.default,{label:t.title,className:`text-xs text-left line-clamp-1 w-full ${t.navLink===p?"font-semibold":""} `})}),s)))}))]}))},x=({activeId:t,activeParent:l,data:a,isCollapsed:n,notificationCountContainerStyles:i,notificationCountTextStyles:u,containerStyles:m,itemMenuContainerStyles:x,itemMenuIconStyles:p,itemMenuTitleStyles:b,itemMenuActiveBgColor:f,itemSubMenuContainerStyles:j,itemSubMenuActiveTextColor:h,toggleButtonContainerStyles:w,toggleIconOpenName:v,toggleIconCloseName:y,toggleIconStyles:C,onClickCollapsible:S,onClickNav:N,children:k})=>{const M=r.getChildrenOnDisplayName(k,"Header"),B=r.getChildrenOnDisplayName(k,"Footer"),P=r.getChildrenOnDisplayName(k,"UserProfile"),[q,O]=d.default.useState(l),A=s.Children.toArray(k);return e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col relative bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]",m)},{children:[M,e.jsx("button",Object.assign({type:"button",onClick:()=>S(),className:"p-0 bg-transparent"},{children:e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg",w)},{children:e.jsx(o,{name:n?y||"chevronDoubleArrowRight":v||"chevronDoubleArrowLeft",className:c.twMerge("w-3 h-3 fill-blue-yaleBlue",C)})}))})),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 h-full"},{children:a.map(((s,l)=>e.jsx(g,{selectedId:q,id:s.id,title:s.title,icon:s.icon,permission:s.permission,isCollapsed:n,activeId:t,subMenu:s.subMenu,onClickCollapsible:()=>S(),onExpand:e=>O(e),onClickNav:e=>N(e),notifcationCount:s.notifcationCount,notificationCountContainerStyles:i,notificationCountTextStyles:u,itemMenuActiveBgColor:f,itemMenuContainerStyles:x,itemSubMenuActiveTextColor:h,itemSubMenuContainerStyles:j,iconStyles:p,titleStyles:b},l)))}))})),e.jsx("div",Object.assign({className:"mb-2"},{children:s.Children.map(A,((t,s)=>{const l=r.getChildrenOnDisplayName(t,"Popover");return e.jsx("div",Object.assign({className:"w-full"},{children:l}),s)}))})),P,B]}))},p=({isCollapsed:n,label:u,labelStyles:m,icon:g,iconStyles:x,notificationCount:p,notificationCountContainerStyles:b,notificationCountTextStyles:f,position:j,iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C,containerStyles:S,children:N})=>{const[k,M]=d.default.useState(!1);s.useEffect((()=>{n?M(!1):setTimeout((()=>{M(!0)}),200)}),[n]);const B=r.getChildrenOnDisplayName(N,"PopoverPanel");return e.jsxs(i,Object.assign({position:j||"right-center",iconTriangleStyles:h,iconTriangleContainerStyles:w,panelContainerStyles:v,offsetX:y,offsetY:C},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2",S)},{children:[e.jsx("div",Object.assign({className:"w-4 h-4"},{children:e.jsx(o,{name:g,className:c.twMerge("w-4 h-4 fill-light-whiteSolid",x)})})),k&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:u,className:c.twMerge("text-light-whiteSolid text-sm text-left line-clamp-1 w-full",m)})})),!!p&&e.jsx(l,{label:p.toString(),labelStyles:c.twMerge("text-[10px]",f),containerStyles:c.twMerge(t.default("flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5",`${!k&&"absolute right-0 top-0"}`),b)})]}))}),e.jsx(i.Panel,{children:B})]}))};p.displayName="Popover",x.Popover=p;const b=({children:t})=>e.jsx(e.Fragment,{children:t});b.displayName="PopoverPanel",x.PopoverPanel=b;const f=({isCollapsed:t,appLogoClosed:l,appLogoClosedStyles:a,appLogoOpened:n,appLogoOpenedStyles:o,containerStyles:i,onClickHeaderSidebar:r,children:u})=>{const[m,g]=d.default.useState(!1);return s.useEffect((()=>{t?g(!1):setTimeout((()=>{g(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:u||e.jsx("div",Object.assign({className:c.twMerge("flex flex-row items-center h-14 gap-x-2 p-2 cursor-pointer",i),onClick:()=>null==r?void 0:r()},{children:m?e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx("img",{src:n||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGc.svg",className:c.twMerge("w-[113px] h-7",o)})})):e.jsx("img",{src:l||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-[22px] h-[22px]",a)})}))})};f.displayName="Header",x.Header=f;const j=({isCollapsed:t,userLabel:l,userLabelStyles:n,userAvatar:r,userAvatarFallback:u,userAvatarFallbackStyles:g,userAvatarStyles:x,containerStyles:p,panelContainerStyles:b,titleAtPanel:f,titleAtPanelStyles:j,userAvatarAtPanel:h,userAvatarAtPanelStyles:w,userAvatarFallbackAtPanel:v,userAvatarFallbackAtPanelStyles:y,userLabelAtPanel:C,userLabelAtPanelStyles:S,userEmailAtPanel:N,userEmailAtPanelStyles:k,manageAccountLabelAtPanel:M,manageAccountLabelAtPanelStyles:B,iconManageAccountAtPanel:P,iconManageAccountAtPanelStyles:q,onClickManageAccount:O,translationLabelAtPanel:A,translationLabelAtPanelStyles:T,iconTranslationAtPanel:L,iconTranslationAtPanelStyles:I,onClickTranslation:D,logoutLabelAtPanel:F,logoutLabelAtPanelStyles:E,iconLogoutAtPanel:R,iconLogoutAtPanelStyles:H,onClickLogout:_,children:z,offsetX:G,offsetY:U})=>{const[$,X]=d.default.useState(!1);return s.useEffect((()=>{t?X(!1):setTimeout((()=>{X(!0)}),200)}),[t]),e.jsx(e.Fragment,{children:z||e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col w-full")},{children:[e.jsx(m,{}),e.jsx("div",Object.assign({className:"relative min-h-[56px] flex items-center w-full"},{children:e.jsxs(i,Object.assign({offsetX:G,offsetY:U},{children:[e.jsx(i.Button,{children:e.jsxs("div",Object.assign({className:c.twMerge("w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer",p)},{children:[r?e.jsx("img",{src:r||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-6 h-6 bg-dark-gumbo rounded overflow-hidden object-cover",x)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",x)},{children:e.jsx(a.default,{label:u,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",g)})})),$&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:l||"",className:c.twMerge("text-light-whiteSolid line-clamp-1 w-full text-left",n)})}))]}))}),e.jsx(i.Panel,{children:e.jsxs("div",Object.assign({className:c.twMerge("flex flex-col py-3 bg-dark-solitude rounded min-w-[240px]",b)},{children:[e.jsx("div",Object.assign({className:"px-4"},{children:e.jsx(a.default,{label:f||"Account",className:c.twMerge("text-sm font-semibold text-dark-blackCoral",j)})})),e.jsxs("div",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-2"},{children:[h?e.jsx("img",{src:h||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/avatar.png",className:c.twMerge("w-8 h-8 bg-dark-gumbo rounded overflow-hidden object-cover",w)}):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-8 h-8 bg-dark-gumbo rounded",w)},{children:e.jsx(a.default,{label:v,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",y)})})),e.jsxs("div",Object.assign({className:"flex flex-col"},{children:[e.jsx(a.default,{label:C||"",className:c.twMerge("w-full line-clamp-1 font-normal text-sm text-dark-blackCoral",S)}),e.jsx(a.default,{label:N||"",className:c.twMerge("w-full line-clamp-1 font-normal text-[10px] text-dark-gumbo",k)})]}))]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent",onClick:()=>null==O?void 0:O()},{children:[e.jsx(o,{name:P||"configuration",className:c.twMerge("w-4 h-4 fill-dark-gumbo",q)}),e.jsx(a.default,{label:M||"Manage Account",className:c.twMerge("text-sm font-normal text-dark-blackCoral",B)})]})),e.jsxs("button",Object.assign({className:"flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent",onClick:()=>null==D?void 0:D()},{children:[e.jsx(o,{name:L||"language",className:c.twMerge("w-4 h-4 fill-dark-gumbo",I)}),e.jsx(a.default,{label:A||"Translate Page",className:c.twMerge("text-sm font-normal text-dark-blackCoral",T)})]})),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:()=>null==_?void 0:_()},{children:[e.jsx(o,{name:R||"logout",className:c.twMerge("w-4 h-4 fill-dark-gumbo",H)}),e.jsx(a.default,{label:F||"Logout",className:c.twMerge("text-sm font-normal text-dark-blackCoral",E)})]}))]}))})]}))})),e.jsx(m,{})]}))})};j.displayName="UserProfile",x.UserProfile=j;const h=({isCollapsed:l,isShowCompanyProfile:o,companyName:i,companyNameStyles:r,companyLogo:u,companyLogoStyles:m,companyLogoFallback:g,companlogoFallbackStyles:x,companyLogoContainerStyles:p,isShowButtonChangeCompany:b,buttonChangeCompanyOnClick:f,buttonChangeCompanyLabel:j,buttonChangeCompanyStyles:h,buttonChangeCompanyIconName:w,buttonChangeCompanyIconStyles:v,appName:y,appVersion:C,children:S})=>{const[N,k]=d.default.useState(!1);return s.useEffect((()=>{l?k(!1):setTimeout((()=>{k(!0)}),200)}),[l]),e.jsx(e.Fragment,{children:S||e.jsxs("div",Object.assign({className:"pt-2 px-2"},{children:[o&&e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2"},{children:[u?e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-gray-50 rounded",p)},{children:e.jsx("img",{src:u||"https://s3.ap-southeast-1.amazonaws.com/assets.frontend/new-toolkit/logoGcSquare.svg",className:c.twMerge("w-4 h-4",m)})})):e.jsx("div",Object.assign({className:c.twMerge("flex items-center justify-center w-6 h-6 bg-dark-gumbo rounded",p)},{children:e.jsx(a.default,{label:g,className:c.twMerge("font-semibold text-light-whiteSolid text-[10px]",x)})})),N&&e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:i||"Gajicermat",className:c.twMerge("text-light-whiteSolid text-xs line-clamp-2",r)})}))]})),b&&e.jsx("div",Object.assign({className:"h-14 w-full flex flex-row items-center"},{children:e.jsx(n.default,{variant:"secondary",onClick:()=>null==f?void 0:f(),label:N?j||"Select Company":"",className:c.twMerge(t.default("flex items-center justify-center p-0 h-6 ml-0  border border-solid border-blue-yaleBlue text-blue-yaleBlue",N?"w-full":"w-6"),h),rightIcon:N?void 0:w||"refresh",rightIconStyles:c.twMerge("ml-0 w-3 h-3",v)})})),e.jsx("div",Object.assign({className:"flex flex-row items-center mt-2 gap-x-2 min-h-4 w-full"},{children:N?e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:y||"© Gajicermat Digital Mandiri",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-right"})})),e.jsx("div",{className:"w-[1px] h-3 bg-light-whiteSolid"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(a.default,{label:C||"Version 0.0.0",className:"text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left"})}))]}):e.jsx("div",{className:"w-[1px] h-3 "})}))]}))})};h.displayName="Footer",x.Footer=h,module.exports=x;
 //# sourceMappingURL=Sidebar.js.map

package/build/src/blocks/Sidebar/Sidebar.js.map CHANGED Viewed

	@@ -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 { BaseBadge, BaseButton, BasePopover, BaseText, Icon } 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-light-whiteSolid' />;\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 itemMenuActiveBgColor,\n itemSubMenuContainerStyles,\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\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-blue-maastrichtBlue rounded-lg ${\n expanded ? 'bg-blue-maastrichtBlue' : '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 >\n <div className='flex flex-row items-center gap-x-2'>\n <div className='w-4 h-4'>\n <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={title}\n className={twMerge(\n 'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n titleStyles\n )}\n />\n </div>\n )}\n {!!notifcationCount && (\n <BaseBadge\n label={notifcationCount.toString()}\n labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\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 pl-8 ${\n expanded && isShow ? 'max-h-screen bg-blue-maastrichtBlue' : '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 `flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue ${\n item.navLink === activeId ? 'ml-3 text-blue-buttonBlue' : ''\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' : ''\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 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 bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]',\n containerStyles\n )}\n >\n {/ Header /}\n {header}\n\n {/ Toggle /}\n <button type='button' onClick={() => onClickCollapsible()} className='p-0 bg-transparent'>\n <div className='flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg'>\n <Icon\n name={isCollapsed ? 'chevronDoubleArrowRight' : 'chevronDoubleArrowLeft'}\n className='w-3 h-3 fill-blue-yaleBlue'\n />\n </div>\n </button>\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 h-full'>\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 children\n}: SidebarPopoverInterface) => {\n const [isShow, setIsShow] = 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 const panel = getChildrenOnDisplayName(children, 'PopoverPanel');\n\n return (\n <BasePopover\n position={position \|\| 'right-center'}\n iconTriangleStyles={iconTriangleStyles}\n iconTriangleContainerStyles={iconTriangleContainerStyles}\n panelContainerStyles={panelContainerStyles}\n offsetX={offsetX}\n offsetY={offsetY}\n >\n <BasePopover.Button>\n <div\n className={twMerge(\n 'h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2',\n containerStyles\n )}\n >\n <div className='w-4 h-4'>\n <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={label}\n className={twMerge(\n 'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n labelStyles\n )}\n />\n </div>\n )}\n {!!notificationCount && (\n <BaseBadge\n label={notificationCount.toString()}\n labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </div>\n </BasePopover.Button>\n <BasePopover.Panel>{panel}</BasePopover.Panel>\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 translationLabelAtPanel,\n translationLabelAtPanelStyles,\n iconTranslationAtPanel,\n iconTranslationAtPanelStyles,\n onClickTranslation,\n logoutLabelAtPanel,\n logoutLabelAtPanelStyles,\n iconLogoutAtPanel,\n iconLogoutAtPanelStyles,\n onClickLogout,\n children,\n offsetX,\n offsetY\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', containerStyles)}>\n <Divider />\n <div className='relative min-h-[56px] flex items-center w-full'>\n <BasePopover offsetX={offsetX} offsetY={offsetY}>\n <BasePopover.Button>\n <div\n className={twMerge(\n 'w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer',\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-dark-gumbo 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-dark-gumbo rounded',\n userAvatarStyles\n )}\n >\n <BaseText\n label={userAvatarFallback}\n className={twMerge(\n 'font-semibold text-light-whiteSolid 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(\n 'text-light-whiteSolid line-clamp-1 w-full text-left',\n userLabelStyles\n )}\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-dark-gumbo 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-dark-gumbo rounded',\n userAvatarAtPanelStyles\n )}\n >\n <BaseText\n label={userAvatarFallbackAtPanel}\n className={twMerge(\n 'font-semibold text-light-whiteSolid 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='flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent'\n onClick={() => onClickManageAccount?.()}\n >\n <Icon\n name={iconManageAccountAtPanel \|\| 'configuration'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconManageAccountAtPanelStyles)}\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='flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent'\n onClick={() => onClickTranslation?.()}\n >\n <Icon\n name={iconTranslationAtPanel \|\| 'language'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconTranslationAtPanelStyles)}\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={() => onClickLogout?.()}\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 </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-gray-50 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-dark-gumbo rounded',\n companyLogoContainerStyles\n )}\n >\n <BaseText\n label={companyLogoFallback}\n className={twMerge(\n 'font-semibold text-light-whiteSolid 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-light-whiteSolid 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 border border-solid border-blue-yaleBlue text-blue-yaleBlue',\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-light-whiteSolid text-[10px] line-clamp-1 w-full text-right'\n />\n </div>\n <div className='w-[1px] h-3 bg-light-whiteSolid' />\n <div className='flex flex-1'>\n <BaseText\n label={appVersion \|\| 'Version 0.0.0'}\n className='text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left'\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","itemMenuActiveBgColor","itemSubMenuContainerStyles","itemSubMenuActiveTextColor","onClickCollapsible","onExpand","onClickNav","notifcationCount","expanded","isShow","setIsShow","React","useState","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","Icon","name","BaseText","label","jsx","BaseBadge","toString","labelStyles","containerStyles","classNames","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","type","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","panel","BasePopover","Button","Panel","displayName","PopoverPanel","_Fragment","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","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","variant","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 { BaseBadge, BaseButton, BasePopover, BaseText, Icon } 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-light-whiteSolid' />;\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\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-blue-maastrichtBlue rounded-lg ${\n expanded ? itemMenuActiveContainerStyles \|\| 'bg-blue-maastrichtBlue' : '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 >\n <div className='flex flex-row items-center gap-x-2'>\n <div className='w-4 h-4'>\n <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={title}\n className={twMerge(\n 'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n titleStyles\n )}\n />\n </div>\n )}\n {!!notifcationCount && (\n <BaseBadge\n label={notifcationCount.toString()}\n labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\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-blue-maastrichtBlue' : '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 `flex flex-1 py-2 bg-transparent text-light-whiteSolid hover:text-blue-buttonBlue pl-8 ${\n item.navLink === activeId\n ? `pl-11 ${itemSubMenuActiveContainerStyles \|\| 'text-blue-buttonBlue'}`\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' : ''\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 bg-blue-darkBlue h-full px-2 pb-2 ease-in-out duration-300 w-[220px]',\n containerStyles\n )}\n >\n {/ Header /}\n {header}\n\n {/ Toggle /}\n <button type='button' onClick={() => onClickCollapsible()} className='p-0 bg-transparent'>\n <div\n className={twMerge(\n 'flex items-center justify-center w-6 h-6 absolute top-14 -right-3 bg-light-whiteSolid rounded-lg',\n toggleButtonContainerStyles\n )}\n >\n <Icon\n name={\n isCollapsed\n ? toggleIconCloseName \|\| 'chevronDoubleArrowRight'\n : toggleIconOpenName \|\| 'chevronDoubleArrowLeft'\n }\n className={twMerge('w-3 h-3 fill-blue-yaleBlue', toggleIconStyles)}\n />\n </div>\n </button>\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 h-full'>\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 children\n}: SidebarPopoverInterface) => {\n const [isShow, setIsShow] = 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 const panel = getChildrenOnDisplayName(children, 'PopoverPanel');\n\n return (\n <BasePopover\n position={position \|\| 'right-center'}\n iconTriangleStyles={iconTriangleStyles}\n iconTriangleContainerStyles={iconTriangleContainerStyles}\n panelContainerStyles={panelContainerStyles}\n offsetX={offsetX}\n offsetY={offsetY}\n >\n <BasePopover.Button>\n <div\n className={twMerge(\n 'h-8 pr-4 pl-3 w-full bg-transparent relative flex flex-row items-center hover:bg-blue-maastrichtBlue rounded-lg gap-x-2',\n containerStyles\n )}\n >\n <div className='w-4 h-4'>\n <Icon name={icon} className={twMerge('w-4 h-4 fill-light-whiteSolid', iconStyles)} />\n </div>\n {isShow && (\n <div className='flex flex-1'>\n <BaseText\n label={label}\n className={twMerge(\n 'text-light-whiteSolid text-sm text-left line-clamp-1 w-full',\n labelStyles\n )}\n />\n </div>\n )}\n {!!notificationCount && (\n <BaseBadge\n label={notificationCount.toString()}\n labelStyles={twMerge('text-[10px]', notificationCountTextStyles)}\n containerStyles={twMerge(\n classNames(\n 'flex items-center justify-center bg-red-fireEngineRed min-w-[16px] h-4 rounded-full p-0.5',\n `${!isShow && 'absolute right-0 top-0'}`\n ),\n notificationCountContainerStyles\n )}\n />\n )}\n </div>\n </BasePopover.Button>\n <BasePopover.Panel>{panel}</BasePopover.Panel>\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 translationLabelAtPanel,\n translationLabelAtPanelStyles,\n iconTranslationAtPanel,\n iconTranslationAtPanelStyles,\n onClickTranslation,\n logoutLabelAtPanel,\n logoutLabelAtPanelStyles,\n iconLogoutAtPanel,\n iconLogoutAtPanelStyles,\n onClickLogout,\n children,\n offsetX,\n offsetY\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 offsetX={offsetX} offsetY={offsetY}>\n <BasePopover.Button>\n <div\n className={twMerge(\n 'w-full flex flex-row items-center h-10 gap-x-2 p-2 rounded-lg hover:bg-blue-maastrichtBlue cursor-pointer',\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-dark-gumbo 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-dark-gumbo rounded',\n userAvatarStyles\n )}\n >\n <BaseText\n label={userAvatarFallback}\n className={twMerge(\n 'font-semibold text-light-whiteSolid 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(\n 'text-light-whiteSolid line-clamp-1 w-full text-left',\n userLabelStyles\n )}\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-dark-gumbo 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-dark-gumbo rounded',\n userAvatarAtPanelStyles\n )}\n >\n <BaseText\n label={userAvatarFallbackAtPanel}\n className={twMerge(\n 'font-semibold text-light-whiteSolid 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='flex flex-row items-center px-4 gap-x-2 mt-3 bg-transparent'\n onClick={() => onClickManageAccount?.()}\n >\n <Icon\n name={iconManageAccountAtPanel \|\| 'configuration'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconManageAccountAtPanelStyles)}\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='flex flex-row items-center px-4 gap-x-2 mt-3 mb-4 bg-transparent'\n onClick={() => onClickTranslation?.()}\n >\n <Icon\n name={iconTranslationAtPanel \|\| 'language'}\n className={twMerge('w-4 h-4 fill-dark-gumbo', iconTranslationAtPanelStyles)}\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={() => onClickLogout?.()}\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 </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-gray-50 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-dark-gumbo rounded',\n companyLogoContainerStyles\n )}\n >\n <BaseText\n label={companyLogoFallback}\n className={twMerge(\n 'font-semibold text-light-whiteSolid 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-light-whiteSolid 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 border border-solid border-blue-yaleBlue text-blue-yaleBlue',\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-light-whiteSolid text-[10px] line-clamp-1 w-full text-right'\n />\n </div>\n <div className='w-[1px] h-3 bg-light-whiteSolid' />\n <div className='flex flex-1'>\n <BaseText\n label={appVersion \|\| 'Version 0.0.0'}\n className='text-light-whiteSolid text-[10px] line-clamp-1 w-full text-left'\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","useEffect","setTimeout","_jsxs","jsxs","Object","assign","twMerge","style","backgroundColor","undefined","children","onClick","jsx","Icon","name","BaseText","label","BaseBadge","toString","labelStyles","containerStyles","classNames","map","item","index","navLink","color","Sidebar","activeParent","data","itemMenuIconStyles","itemMenuTitleStyles","toggleButtonContainerStyles","toggleIconOpenName","toggleIconCloseName","toggleIconStyles","header","getChildrenOnDisplayName","footer","userProfile","setSelectedId","arrayChildren","Children","toArray","type","permission","child","Popover","notificationCount","position","iconTriangleStyles","iconTriangleContainerStyles","panelContainerStyles","offsetX","offsetY","panel","BasePopover","Button","Panel","displayName","PopoverPanel","_Fragment","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","translationLabelAtPanel","translationLabelAtPanelStyles","iconTranslationAtPanel","iconTranslationAtPanelStyles","onClickTranslation","logoutLabelAtPanel","logoutLabelAtPanelStyles","iconLogoutAtPanel","iconLogoutAtPanelStyles","onClickLogout","Footer","isShowCompanyProfile","companyName","companyNameStyles","companyLogo","companyLogoStyles","companyLogoFallback","companlogoFallbackStyles","companyLogoContainerStyles","isShowButtonChangeCompany","buttonChangeCompanyOnClick","buttonChangeCompanyLabel","buttonChangeCompanyStyles","buttonChangeCompanyIconName","buttonChangeCompanyIconStyles","appName","appVersion","BaseButton","variant","rightIcon","rightIconStyles"],"mappings":"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"}

package/build/src/blocks/Sidebar/Sidebar.type.d.ts CHANGED Viewed

@@ -14,8 +14,10 @@ export type SidebarMenuExtendedInterface = {
     notificationCountContainerStyles?: string;
     notificationCountTextStyles?: string;
     itemMenuContainerStyles?: string;
+    itemMenuActiveContainerStyles?: string;
     itemMenuActiveBgColor?: string;
     itemSubMenuContainerStyles?: string;
+    itemSubMenuActiveContainerStyles?: string;
     itemSubMenuActiveTextColor?: string;
     onClickCollapsible: () => void;
     onExpand: (id: string) => void;
@@ -128,6 +130,10 @@ export type SidebarInterface = {
     itemSubMenuActiveTextColor?: string;
     notificationCountContainerStyles?: string;
     notificationCountTextStyles?: string;
+    toggleButtonContainerStyles?: string;
+    toggleIconOpenName?: IconType;
+    toggleIconCloseName?: IconType;
+    toggleIconStyles?: string;
     containerStyles?: string;
     data: Array<SidebarMenuInterface>;
     onClickNav?: (navLink: SidebarMenuDefaultInterface) => void;

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

@@ -1,3 +1,3 @@
 import { BaseCheckPickerInterface } from './BaseCheckPicker.type';
-declare const BaseCheckPicker: ({ value, valueStyles, label, labelStyles, placeholder, placeholderStyles, containerStyles, activeContainerStyles, iconStyles, itemsContainerStyles, itemContainerStyles, isDisabled, position, onSelectItem, onClean, isCleanable, isError, errorMessage, errorMessageStyles, helperMessage, helperMessageStyles, isSearchable, searchContainerStyles, activeSearchStyles, searchPlaceholder, searchStyles, iconSearchStyles, isShowFooterButton, footerButtonContainerStyles, footerButtonLabel, onClickFooterButton, noResultsLabel, noResultsLabelStyles, badgeContainerStyles, badgeLabelStyles, variant, data, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles }: BaseCheckPickerInterface) => import("react/jsx-runtime").JSX.Element;
+declare const BaseCheckPicker: ({ value, valueStyles, label, labelStyles, placeholder, placeholderStyles, containerStyles, activeContainerStyles, iconStyles, itemsContainerStyles, itemContainerStyles, isDisabled, position, onSelectItem, onClean, isCleanable, isError, errorMessage, errorMessageStyles, helperMessage, helperMessageStyles, isSearchable, searchContainerStyles, activeSearchStyles, searchPlaceholder, searchStyles, iconSearchStyles, isShowFooterButton, footerButtonContainerStyles, footerButtonLabel, onClickFooterButton, noResultsLabel, noResultsLabelStyles, badgeContainerStyles, badgeLabelStyles, variant, data, isRequired, labelRequired, labelRequiredStyles, containerRequiredStyles, onSearch }: BaseCheckPickerInterface) => import("react/jsx-runtime").JSX.Element;
 export default BaseCheckPicker;

package/build/src/components/CheckPicker/BaseCheckPicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var r=require("../Text/BaseText.js");require("../Text/Text.js");var s=require("../Badge/BaseBadgeRequired.js"),n=require("../Checkbox/Checkbox.js"),o=require("../Icon/Icon.js"),i=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transitions/transition.js");module.exports=({value:u,valueStyles:x,label:b,labelStyles:m,placeholder:g,placeholderStyles:f,containerStyles:h,activeContainerStyles:j,iconStyles:p,itemsContainerStyles:w,itemContainerStyles:v,isDisabled:y=!1,position:S="bottom-start",onSelectItem:k,onClean:N,isCleanable:M,isError:O,errorMessage:C,errorMessageStyles:q,helperMessage:B,helperMessageStyles:R,isSearchable:L,searchContainerStyles:G,activeSearchStyles:F,searchPlaceholder:T,searchStyles:D,iconSearchStyles:_,isShowFooterButton:E,footerButtonContainerStyles:I,footerButtonLabel:P,onClickFooterButton:$,noResultsLabel:z,noResultsLabelStyles:K,badgeContainerStyles:A,badgeLabelStyles:H,variant:J="box",data:Q,isRequired:U,labelRequired:V,labelRequiredStyles:W,containerRequiredStyles:X})=>{const[Y,Z]=l.useState(""),ee=l.useMemo((()=>{const e=Q;return""!==Y&&Y?e.filter((e=>e.label.toLowerCase().includes(Y.toLowerCase()))):e}),[Y,Q]);return e.jsx(i.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!b&&e.jsx(r.default,{label:b,className:c.twMerge("font-normal text-dark-gumbo text-[10px]",m)}),U&&e.jsx(s,{labelRequired:V,labelRequiredStyles:W,containerRequiredStyles:X})]})),e.jsxs("div",Object.assign({className:"relative inline-block"},{children:[e.jsx("div",Object.assign({className:"flex flex-col gap-y-1"},{children:e.jsx(i.Listbox.Button,Object.assign({className:c.twMerge(t.default("p-0 bg-transparent",y&&"cursor-not-allowed"),X?a(h,"w-"):void 0),onClick:e=>{y&&e.preventDefault()}},{children:({open:l})=>e.jsxs("div",Object.assign({className:c.twMerge(t.default(c.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",h),"line"===J&&"border-b border-t-0 border-x-0 rounded-none",l&&j?j:l?"border-blue-buttonBlue":void 0,y&&"border-dark-bermudaGray bg-light-whiteSmoke",O&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!g&&""===u[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(r.default,{label:g,variant:"small",className:c.twMerge(t.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1"),f)})})),""!==u[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:e.jsx(r.default,{label:ee.filter((e=>u.includes(e.value))).map((e=>e.label)).join(", "),variant:"small",className:c.twMerge(t.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full"),x)})}))]})),""!==u[0]&&e.jsx("div",Object.assign({className:c.twMerge("flex flex-row justify-center w-3 h-3 bg-blue-buttonBlue rounded-full pt-[1px] pl-[0.5px]",A)},{children:e.jsx(r.default,{label:u.length.toString(),className:c.twMerge(t.default("font-normal text-light-whiteSolid text-[8px] leading-3"),H)})})),M&&""!==u[0]&&e.jsx("div",Object.assign({className:"cursor-pointer h-4 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==k||k([]),null==N||N()}},{children:e.jsx(o,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(o,{name:l?"chevronup":"chevrondown",className:c.twMerge(t.default("fill-dark-bermudaGray w-4 h-4",`${y&&"fill-dark-bermudaGray"}`),p)})]}))}))})),e.jsx(d.Transition,Object.assign({as:l.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(i.Listbox.Options,Object.assign({className:c.twMerge(`absolute rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50 ${{"top-start":"top-0 left-0 -translate-y-[calc(100%)]","top-center":"top-0 left-[50%] -translate-y-[calc(100%)] -translate-x-[calc(50%)]","top-end":"top-0 right-0 -translate-y-[calc(100%)]","right-start":"top-0 right-0 translate-x-[calc(100%)] -translate-y-[calc(100%)]","right-center":"top-[50%] right-0 translate-x-[calc(100%)] -translate-y-[calc(50%)]","right-end":"right-0 translate-x-[calc(100%)] mt-1","bottom-start":"left-0","bottom-center":"left-[50%] -translate-x-[calc(50%)]","bottom-end":"right-0","left-start":"top-0 left-0 -translate-x-[calc(100%)]","left-center":"top-[50%] left-0 -translate-x-[calc(100%)] -translate-y-[calc(50%)]","left-end":"left-0 -translate-x-[calc(100%)] mt-1"}[S]}`,w)},{children:({open:l})=>e.jsxs(e.Fragment,{children:[L&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:c.twMerge(t.default(c.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",G),l&&F?F:l?"border-blue-buttonBlue":void 0))},{children:[e.jsx("input",{placeholder:T||"Search",className:c.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",D),onChange:e=>{Z(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:Y}),e.jsx(o,{name:"search",className:c.twMerge("fill-dark-bermudaGray w-3 h-3",_)})]}))})),e.jsx("div",Object.assign({className:"p-0 overflow-auto max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude"},{children:ee.length>0?ee.map(((l,a)=>e.jsx(i.Listbox.Option,Object.assign({className:c.twMerge("relative cursor-default select-none p-2 even:bg-light-whiteSolid odd:bg-light-aliceBlue ",v),value:l},{children:({active:a})=>{const s=u.some((e=>e===l.value));return e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2 cursor-pointer",onClick:e=>{e.preventDefault();let t=u.slice();t=s?t.filter((e=>e!==l.value)):t.concat(l.value),null==k||k(t.filter((e=>""!==e)))}},{children:[e.jsx(n,{checked:s,variant:"small"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(r.default,{label:l.label,className:t.default("text-xs text-dark-gumbo",""+(a?"font-semibold":"font-normal"))})}))]}))}}),a))):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(r.default,{label:z||"No Results Found",className:c.twMerge("text-dark-bermudaGray font-normal text-sm",K)})}))})),E&&e.jsx("button",Object.assign({className:c.twMerge("flex items-center justify-center font-poppins py-2 px-3 bg-light-aliceBlue w-full text-sm font-normal text-blue-yaleBlue mt-auto",I),onClick:()=>{null==$||$()}},{children:P||"Footer Button"}))]})}))}))]})),B&&!O&&e.jsx(r.default,{label:B,className:c.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",R)}),O&&!!C&&e.jsx(r.default,{label:C,className:c.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",q)})]}))}))};
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/classnames/index.js"),l=require("react"),a=require("../../utils/extractClasses.js");require("../Badge/Badge.js");var r=require("../Text/BaseText.js");require("../Text/Text.js");var s=require("../Badge/BaseBadgeRequired.js"),n=require("../Checkbox/Checkbox.js"),o=require("../Icon/Icon.js"),i=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),c=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js"),d=require("../../../node_modules/@headlessui/react/dist/components/transitions/transition.js");module.exports=({value:u,valueStyles:x,label:b,labelStyles:m,placeholder:f,placeholderStyles:g,containerStyles:h,activeContainerStyles:j,iconStyles:p,itemsContainerStyles:w,itemContainerStyles:v,isDisabled:y=!1,position:S="bottom-start",onSelectItem:k,onClean:N,isCleanable:M,isError:O,errorMessage:C,errorMessageStyles:q,helperMessage:B,helperMessageStyles:R,isSearchable:L,searchContainerStyles:G,activeSearchStyles:F,searchPlaceholder:T,searchStyles:D,iconSearchStyles:E,isShowFooterButton:_,footerButtonContainerStyles:I,footerButtonLabel:P,onClickFooterButton:$,noResultsLabel:z,noResultsLabelStyles:K,badgeContainerStyles:A,badgeLabelStyles:H,variant:J="box",data:Q,isRequired:U,labelRequired:V,labelRequiredStyles:W,containerRequiredStyles:X,onSearch:Y})=>{const[Z,ee]=l.useState(""),te=l.useMemo((()=>{const e=Q;return""!==Z&&Z?e.filter((e=>e.label.toLowerCase().includes(Z.toLowerCase()))):e}),[Z,Q]);return l.useEffect((()=>{Y&&Y(Z)}),[Z]),e.jsx(i.Listbox,Object.assign({multiple:!0},{children:e.jsxs("div",Object.assign({className:"flex flex-col gap-y-1"},{children:[e.jsxs("div",Object.assign({className:"flex flex-row items-end gap-x-1"},{children:[!!b&&e.jsx(r.default,{label:b,className:c.twMerge("font-normal text-dark-gumbo text-[10px]",m)}),U&&e.jsx(s,{labelRequired:V,labelRequiredStyles:W,containerRequiredStyles:X})]})),e.jsxs("div",Object.assign({className:"relative inline-block"},{children:[e.jsx("div",Object.assign({className:"flex flex-col gap-y-1"},{children:e.jsx(i.Listbox.Button,Object.assign({className:c.twMerge(t.default("p-0 bg-transparent",y&&"cursor-not-allowed"),X?a(h,"w-"):void 0),onClick:e=>{y&&e.preventDefault()}},{children:({open:l})=>e.jsxs("div",Object.assign({className:c.twMerge(t.default(c.twMerge("flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid",h),"line"===J&&"border-b border-t-0 border-x-0 rounded-none",l&&j?j:l?"border-blue-buttonBlue":void 0,y&&"border-dark-bermudaGray bg-light-whiteSmoke",O&&"border-red-fireEngineRed"))},{children:[e.jsxs("div",Object.assign({className:"flex flex-1"},{children:[!!f&&""===u[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-full"},{children:e.jsx(r.default,{label:f,variant:"small",className:c.twMerge(t.default("font-normal text-dark-bermudaGray text-xs text-left line-clamp-1"),g)})})),""!==u[0]&&e.jsx("div",Object.assign({className:"flex flex-1 w-[calc(100%-52px)]"},{children:e.jsx(r.default,{label:te.filter((e=>u.includes(e.value))).map((e=>e.label)).join(", "),variant:"small",className:c.twMerge(t.default("font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full"),x)})}))]})),""!==u[0]&&e.jsx("div",Object.assign({className:c.twMerge("flex flex-row justify-center w-3 h-3 bg-blue-buttonBlue rounded-full pt-[1px] pl-[0.5px]",A)},{children:e.jsx(r.default,{label:u.length.toString(),className:c.twMerge(t.default("font-normal text-light-whiteSolid text-[8px] leading-3"),H)})})),M&&""!==u[0]&&e.jsx("div",Object.assign({className:"cursor-pointer h-4 w-3 flex items-center justify-center -mr-1",onClick:e=>{e.preventDefault(),null==k||k([]),ee(""),null==N||N()}},{children:e.jsx(o,{name:"close",className:"fill-dark-bermudaGray w-3 h-3"})})),e.jsx(o,{name:l?"chevronup":"chevrondown",className:c.twMerge(t.default("fill-dark-bermudaGray w-4 h-4",`${y&&"fill-dark-bermudaGray"}`),p)})]}))}))})),e.jsx(d.Transition,Object.assign({as:l.Fragment,leave:"transition ease-in duration-100",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx(i.Listbox.Options,Object.assign({className:c.twMerge(`absolute rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50 ${{"top-start":"top-0 left-0 -translate-y-[calc(100%)]","top-center":"top-0 left-[50%] -translate-y-[calc(100%)] -translate-x-[calc(50%)]","top-end":"top-0 right-0 -translate-y-[calc(100%)]","right-start":"top-0 right-0 translate-x-[calc(100%)] -translate-y-[calc(100%)]","right-center":"top-[50%] right-0 translate-x-[calc(100%)] -translate-y-[calc(50%)]","right-end":"right-0 translate-x-[calc(100%)] mt-1","bottom-start":"left-0","bottom-center":"left-[50%] -translate-x-[calc(50%)]","bottom-end":"right-0","left-start":"top-0 left-0 -translate-x-[calc(100%)]","left-center":"top-[50%] left-0 -translate-x-[calc(100%)] -translate-y-[calc(50%)]","left-end":"left-0 -translate-x-[calc(100%)] mt-1"}[S]}`,w)},{children:({open:l})=>e.jsxs(e.Fragment,{children:[L&&e.jsx("div",Object.assign({className:"p-2 bg-light-whiteSolid w-full"},{children:e.jsxs("div",Object.assign({className:c.twMerge(t.default(c.twMerge("flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1",G),l&&F?F:l?"border-blue-buttonBlue":void 0))},{children:[e.jsx("input",{placeholder:T||"Search",className:c.twMerge("flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs",D),onChange:e=>{ee(e.target.value)},onKeyDown:e=>e.stopPropagation(),value:Z}),e.jsx(o,{name:"search",className:c.twMerge("fill-dark-bermudaGray w-3 h-3",E)})]}))})),e.jsx("div",Object.assign({className:"p-0 overflow-auto max-h-80 scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude"},{children:te.length>0?te.map(((l,a)=>e.jsx(i.Listbox.Option,Object.assign({className:c.twMerge("relative cursor-default select-none p-2 even:bg-light-whiteSolid odd:bg-light-aliceBlue ",v),value:l},{children:({active:a})=>{const s=u.some((e=>e===l.value));return e.jsxs("div",Object.assign({className:"flex flex-row items-center gap-x-2 cursor-pointer",onClick:e=>{e.preventDefault();let t=u.slice();t=s?t.filter((e=>e!==l.value)):t.concat(l.value),null==k||k(t.filter((e=>""!==e)))}},{children:[e.jsx(n,{checked:s,variant:"small"}),e.jsx("div",Object.assign({className:"flex flex-1"},{children:e.jsx(r.default,{label:l.label,className:t.default("text-xs text-dark-gumbo",""+(a?"font-semibold":"font-normal"))})}))]}))}}),a))):e.jsx("div",Object.assign({className:"py-2 px-4 w-full"},{children:e.jsx(r.default,{label:z||"No Results Found",className:c.twMerge("text-dark-bermudaGray font-normal text-sm",K)})}))})),_&&e.jsx("button",Object.assign({className:c.twMerge("flex items-center justify-center font-poppins py-2 px-3 bg-light-aliceBlue w-full text-sm font-normal text-blue-yaleBlue mt-auto",I),onClick:()=>{null==$||$()}},{children:P||"Footer Button"}))]})}))}))]})),B&&!O&&e.jsx(r.default,{label:B,className:c.twMerge("font-normal text-dark-bermudaGray text-[10px] inline-block",R)}),O&&!!C&&e.jsx(r.default,{label:C,className:c.twMerge("font-normal text-red-fireEngineRed text-[10px] inline-block",q)})]}))}))};
 //# sourceMappingURL=BaseCheckPicker.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseCheckPicker.tsx"],"sourcesContent":["import { Listbox, Transition } from '@headlessui/react';\nimport classNames from 'classnames';\nimport { Fragment, useMemo, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { Checkbox } from '../Checkbox';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseCheckPickerDataInterface,\n BaseCheckPickerInterface,\n PickerPosition\n} from './BaseCheckPicker.type';\n\nconst BaseCheckPicker = ({\n value,\n valueStyles,\n label,\n labelStyles,\n placeholder,\n placeholderStyles,\n containerStyles,\n activeContainerStyles,\n iconStyles,\n itemsContainerStyles,\n itemContainerStyles,\n isDisabled = false,\n position = 'bottom-start',\n onSelectItem,\n onClean,\n isCleanable,\n isError,\n errorMessage,\n errorMessageStyles,\n helperMessage,\n helperMessageStyles,\n isSearchable,\n searchContainerStyles,\n activeSearchStyles,\n searchPlaceholder,\n searchStyles,\n iconSearchStyles,\n isShowFooterButton,\n footerButtonContainerStyles,\n footerButtonLabel,\n onClickFooterButton,\n noResultsLabel,\n noResultsLabelStyles,\n badgeContainerStyles,\n badgeLabelStyles,\n variant = 'box',\n data,\n isRequired,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles\n}: BaseCheckPickerInterface) => {\n const [search, setSearch] = useState<string>('');\n const dataPicker: Array<BaseCheckPickerDataInterface> = useMemo(() => {\n const temp: Array<BaseCheckPickerDataInterface> = data;\n return search === '' \|\| !search\n ? temp\n : temp.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));\n }, [search, data]);\n\n const PickerPositionMapper: Record<PickerPosition, string> = {\n 'top-start': 'top-0 left-0 -translate-y-[calc(100%)]',\n 'top-center': 'top-0 left-[50%] -translate-y-[calc(100%)] -translate-x-[calc(50%)]',\n 'top-end': 'top-0 right-0 -translate-y-[calc(100%)]',\n 'right-start': 'top-0 right-0 translate-x-[calc(100%)] -translate-y-[calc(100%)]',\n 'right-center': 'top-[50%] right-0 translate-x-[calc(100%)] -translate-y-[calc(50%)]',\n 'right-end': 'right-0 translate-x-[calc(100%)] mt-1',\n 'bottom-start': 'left-0',\n 'bottom-center': 'left-[50%] -translate-x-[calc(50%)]',\n 'bottom-end': 'right-0',\n 'left-start': 'top-0 left-0 -translate-x-[calc(100%)]',\n 'left-center': 'top-[50%] left-0 -translate-x-[calc(100%)] -translate-y-[calc(50%)]',\n 'left-end': 'left-0 -translate-x-[calc(100%)] mt-1'\n };\n\n const scrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n return (\n <Listbox multiple>\n <div className='flex flex-col gap-y-1'>\n <div className='flex flex-row items-end gap-x-1'>\n {!!label && (\n <BaseText\n label={label}\n className={twMerge('font-normal text-dark-gumbo text-[10px]', labelStyles)}\n />\n )}\n {isRequired && (\n <BaseBadgeRequired\n labelRequired={labelRequired}\n labelRequiredStyles={labelRequiredStyles}\n containerRequiredStyles={containerRequiredStyles}\n />\n )}\n </div>\n <div className='relative inline-block'>\n <div className='flex flex-col gap-y-1'>\n <Listbox.Button\n className={twMerge(\n classNames('p-0 bg-transparent', isDisabled && 'cursor-not-allowed'),\n containerRequiredStyles ? extractClasses(containerStyles, 'w-') : undefined\n )}\n onClick={(e) => {\n if (isDisabled) {\n e.preventDefault();\n }\n }}\n >\n {({ open }) => (\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid',\n containerStyles\n ),\n variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n open && activeContainerStyles\n ? activeContainerStyles\n : open\n ? 'border-blue-buttonBlue'\n : undefined,\n isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n isError && 'border-red-fireEngineRed'\n )\n )}\n >\n <div className='flex flex-1'>\n {!!placeholder && value[0] === '' && (\n <div className='flex flex-1 w-full'>\n <BaseText\n label={placeholder}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-bermudaGray text-xs text-left line-clamp-1'\n ),\n placeholderStyles\n )}\n />\n </div>\n )}\n\n {value[0] !== '' && (\n <div className='flex flex-1 w-[calc(100%-52px)]'>\n <BaseText\n label={dataPicker\n .filter((i) => value.includes(i.value))\n .map((i) => i.label)\n .join(', ')}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full'\n ),\n valueStyles\n )}\n />\n </div>\n )}\n </div>\n\n {value[0] !== '' && (\n <div\n className={twMerge(\n 'flex flex-row justify-center w-3 h-3 bg-blue-buttonBlue rounded-full pt-[1px] pl-[0.5px]',\n badgeContainerStyles\n )}\n >\n <BaseText\n label={value.length.toString()}\n className={twMerge(\n classNames('font-normal text-light-whiteSolid text-[8px] leading-3'),\n badgeLabelStyles\n )}\n />\n </div>\n )}\n\n {isCleanable && value[0] !== '' && (\n <div\n className='cursor-pointer h-4 w-3 flex items-center justify-center -mr-1'\n onClick={(e) => {\n e.preventDefault();\n\n onSelectItem?.([]);\n onClean?.();\n }}\n >\n <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n </div>\n )}\n <Icon\n name={open ? 'chevronup' : 'chevrondown'}\n className={twMerge(\n classNames(\n 'fill-dark-bermudaGray w-4 h-4',\n `${isDisabled && 'fill-dark-bermudaGray'}`\n ),\n iconStyles\n )}\n />\n </div>\n )}\n </Listbox.Button>\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <Listbox.Options\n className={twMerge(\n `absolute rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50 ${PickerPositionMapper[position]}`,\n itemsContainerStyles\n )}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open }) => (\n <>\n {isSearchable && (\n <div className='p-2 bg-light-whiteSolid w-full'>\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1',\n searchContainerStyles\n ),\n open && activeSearchStyles\n ? activeSearchStyles\n : open\n ? 'border-blue-buttonBlue'\n : undefined\n )\n )}\n >\n <input\n placeholder={searchPlaceholder \|\| 'Search'}\n className={twMerge(\n 'flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs',\n searchStyles\n )}\n onChange={(e) => {\n setSearch(e.target.value);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n value={search}\n />\n <Icon\n name='search'\n className={twMerge('fill-dark-bermudaGray w-3 h-3', iconSearchStyles)}\n />\n </div>\n </div>\n )}\n <div className={`p-0 overflow-auto max-h-80 ${scrollbarStyles}`}>\n {dataPicker.length > 0 ? (\n dataPicker.map((item, index) => (\n <Listbox.Option\n key={index}\n className={twMerge(\n 'relative cursor-default select-none p-2 even:bg-light-whiteSolid odd:bg-light-aliceBlue ',\n itemContainerStyles\n )}\n value={item}\n >\n {({ active }) => {\n const selected = value.some((i) => i === item.value);\n return (\n <div\n className='flex flex-row items-center gap-x-2 cursor-pointer'\n onClick={(e) => {\n e.preventDefault();\n\n let temp = value.slice();\n if (selected) {\n temp = temp.filter((i) => i !== item.value);\n } else {\n temp = temp.concat(item.value);\n }\n\n onSelectItem?.(temp.filter((i) => i !== ''));\n }}\n >\n <Checkbox checked={selected} variant='small' />\n\n <div className='flex flex-1'>\n <BaseText\n label={item.label}\n className={classNames(\n 'text-xs text-dark-gumbo',\n `${active ? 'font-semibold' : 'font-normal'}`\n )}\n />\n </div>\n </div>\n );\n }}\n </Listbox.Option>\n ))\n ) : (\n <div className='py-2 px-4 w-full'>\n <BaseText\n label={noResultsLabel \|\| 'No Results Found'}\n className={twMerge(\n 'text-dark-bermudaGray font-normal text-sm',\n noResultsLabelStyles\n )}\n />\n </div>\n )}\n </div>\n {isShowFooterButton && (\n <button\n className={twMerge(\n 'flex items-center justify-center font-poppins py-2 px-3 bg-light-aliceBlue w-full text-sm font-normal text-blue-yaleBlue mt-auto',\n footerButtonContainerStyles\n )}\n onClick={() => {\n onClickFooterButton?.();\n }}\n >\n {footerButtonLabel \|\| 'Footer Button'}\n </button>\n )}\n </>\n )}\n </Listbox.Options>\n </Transition>\n </div>\n\n {helperMessage && !isError && (\n <BaseText\n label={helperMessage}\n className={twMerge(\n 'font-normal text-dark-bermudaGray text-[10px] inline-block',\n helperMessageStyles\n )}\n />\n )}\n\n {isError && !!errorMessage && (\n <BaseText\n label={errorMessage}\n className={twMerge(\n 'font-normal text-red-fireEngineRed text-[10px] inline-block',\n errorMessageStyles\n )}\n />\n )}\n </div>\n </Listbox>\n );\n};\n\nexport default BaseCheckPicker;\n"],"names":["value","valueStyles","label","labelStyles","placeholder","placeholderStyles","containerStyles","activeContainerStyles","iconStyles","itemsContainerStyles","itemContainerStyles","isDisabled","position","onSelectItem","onClean","isCleanable","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isSearchable","searchContainerStyles","activeSearchStyles","searchPlaceholder","searchStyles","iconSearchStyles","isShowFooterButton","footerButtonContainerStyles","footerButtonLabel","onClickFooterButton","noResultsLabel","noResultsLabelStyles","badgeContainerStyles","badgeLabelStyles","variant","data","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","search","setSearch","useState","dataPicker","useMemo","temp","filter","item","toLowerCase","includes","_jsx","jsx","Listbox","Object","assign","multiple","_jsxs","className","children","jsxs","BaseText","twMerge","BaseBadgeRequired","Button","classNames","extractClasses","undefined","onClick","e","preventDefault","open","i","map","join","length","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","Options","_Fragment","onChange","target","onKeyDown","stopPropagation","index","Option","active","selected","some","slice","concat","Checkbox","checked"],"mappings":"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"}
1	+ {"version":3,"file":"BaseCheckPicker.js","sources":["../../../../src/components/CheckPicker/BaseCheckPicker.tsx"],"sourcesContent":["import { Listbox, Transition } from '@headlessui/react';\nimport classNames from 'classnames';\nimport { Fragment, useEffect, useMemo, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport extractClasses from '../../utils/extractClasses';\nimport { BaseBadgeRequired } from '../Badge';\nimport { Checkbox } from '../Checkbox';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseCheckPickerDataInterface,\n BaseCheckPickerInterface,\n PickerPosition\n} from './BaseCheckPicker.type';\n\nconst BaseCheckPicker = ({\n value,\n valueStyles,\n label,\n labelStyles,\n placeholder,\n placeholderStyles,\n containerStyles,\n activeContainerStyles,\n iconStyles,\n itemsContainerStyles,\n itemContainerStyles,\n isDisabled = false,\n position = 'bottom-start',\n onSelectItem,\n onClean,\n isCleanable,\n isError,\n errorMessage,\n errorMessageStyles,\n helperMessage,\n helperMessageStyles,\n isSearchable,\n searchContainerStyles,\n activeSearchStyles,\n searchPlaceholder,\n searchStyles,\n iconSearchStyles,\n isShowFooterButton,\n footerButtonContainerStyles,\n footerButtonLabel,\n onClickFooterButton,\n noResultsLabel,\n noResultsLabelStyles,\n badgeContainerStyles,\n badgeLabelStyles,\n variant = 'box',\n data,\n isRequired,\n labelRequired,\n labelRequiredStyles,\n containerRequiredStyles,\n onSearch\n}: BaseCheckPickerInterface) => {\n const [search, setSearch] = useState<string>('');\n const dataPicker: Array<BaseCheckPickerDataInterface> = useMemo(() => {\n const temp: Array<BaseCheckPickerDataInterface> = data;\n return search === '' \|\| !search\n ? temp\n : temp.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));\n }, [search, data]);\n\n const PickerPositionMapper: Record<PickerPosition, string> = {\n 'top-start': 'top-0 left-0 -translate-y-[calc(100%)]',\n 'top-center': 'top-0 left-[50%] -translate-y-[calc(100%)] -translate-x-[calc(50%)]',\n 'top-end': 'top-0 right-0 -translate-y-[calc(100%)]',\n 'right-start': 'top-0 right-0 translate-x-[calc(100%)] -translate-y-[calc(100%)]',\n 'right-center': 'top-[50%] right-0 translate-x-[calc(100%)] -translate-y-[calc(50%)]',\n 'right-end': 'right-0 translate-x-[calc(100%)] mt-1',\n 'bottom-start': 'left-0',\n 'bottom-center': 'left-[50%] -translate-x-[calc(50%)]',\n 'bottom-end': 'right-0',\n 'left-start': 'top-0 left-0 -translate-x-[calc(100%)]',\n 'left-center': 'top-[50%] left-0 -translate-x-[calc(100%)] -translate-y-[calc(50%)]',\n 'left-end': 'left-0 -translate-x-[calc(100%)] mt-1'\n };\n\n const scrollbarStyles =\n 'scrollbar scrollbar-thumb-dark-blackCoral scrollbar-thumb-rounded-full scrollbar-w-2 scrollbar-h-2 scrollbar-track-dark-solitude';\n\n useEffect(() => {\n if (onSearch) onSearch(search);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [search]);\n\n return (\n <Listbox multiple>\n <div className='flex flex-col gap-y-1'>\n <div className='flex flex-row items-end gap-x-1'>\n {!!label && (\n <BaseText\n label={label}\n className={twMerge('font-normal text-dark-gumbo text-[10px]', labelStyles)}\n />\n )}\n {isRequired && (\n <BaseBadgeRequired\n labelRequired={labelRequired}\n labelRequiredStyles={labelRequiredStyles}\n containerRequiredStyles={containerRequiredStyles}\n />\n )}\n </div>\n <div className='relative inline-block'>\n <div className='flex flex-col gap-y-1'>\n <Listbox.Button\n className={twMerge(\n classNames('p-0 bg-transparent', isDisabled && 'cursor-not-allowed'),\n containerRequiredStyles ? extractClasses(containerStyles, 'w-') : undefined\n )}\n onClick={(e) => {\n if (isDisabled) {\n e.preventDefault();\n }\n }}\n >\n {({ open }) => (\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 rounded gap-x-1 border border-solid border-dark-gumbo bg-light-whiteSolid',\n containerStyles\n ),\n variant === 'line' && 'border-b border-t-0 border-x-0 rounded-none',\n open && activeContainerStyles\n ? activeContainerStyles\n : open\n ? 'border-blue-buttonBlue'\n : undefined,\n isDisabled && 'border-dark-bermudaGray bg-light-whiteSmoke',\n isError && 'border-red-fireEngineRed'\n )\n )}\n >\n <div className='flex flex-1'>\n {!!placeholder && value[0] === '' && (\n <div className='flex flex-1 w-full'>\n <BaseText\n label={placeholder}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-bermudaGray text-xs text-left line-clamp-1'\n ),\n placeholderStyles\n )}\n />\n </div>\n )}\n\n {value[0] !== '' && (\n <div className='flex flex-1 w-[calc(100%-52px)]'>\n <BaseText\n label={dataPicker\n .filter((i) => value.includes(i.value))\n .map((i) => i.label)\n .join(', ')}\n variant='small'\n className={twMerge(\n classNames(\n 'font-normal text-dark-blackCoral text-xs text-left line-clamp-1 w-full'\n ),\n valueStyles\n )}\n />\n </div>\n )}\n </div>\n\n {value[0] !== '' && (\n <div\n className={twMerge(\n 'flex flex-row justify-center w-3 h-3 bg-blue-buttonBlue rounded-full pt-[1px] pl-[0.5px]',\n badgeContainerStyles\n )}\n >\n <BaseText\n label={value.length.toString()}\n className={twMerge(\n classNames('font-normal text-light-whiteSolid text-[8px] leading-3'),\n badgeLabelStyles\n )}\n />\n </div>\n )}\n\n {isCleanable && value[0] !== '' && (\n <div\n className='cursor-pointer h-4 w-3 flex items-center justify-center -mr-1'\n onClick={(e) => {\n e.preventDefault();\n\n onSelectItem?.([]);\n setSearch('');\n onClean?.();\n }}\n >\n <Icon name='close' className='fill-dark-bermudaGray w-3 h-3' />\n </div>\n )}\n <Icon\n name={open ? 'chevronup' : 'chevrondown'}\n className={twMerge(\n classNames(\n 'fill-dark-bermudaGray w-4 h-4',\n `${isDisabled && 'fill-dark-bermudaGray'}`\n ),\n iconStyles\n )}\n />\n </div>\n )}\n </Listbox.Button>\n </div>\n <Transition\n as={Fragment}\n leave='transition ease-in duration-100'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <Listbox.Options\n className={twMerge(\n `absolute rounded p-0 min-w-full flex flex-col overflow-hidden border border-solid border-dark-silver z-50 ${PickerPositionMapper[position]}`,\n itemsContainerStyles\n )}\n >\n {/* eslint-disable-next-line sonarjs/cognitive-complexity */}\n {({ open }) => (\n <>\n {isSearchable && (\n <div className='p-2 bg-light-whiteSolid w-full'>\n <div\n className={twMerge(\n classNames(\n twMerge(\n 'flex flex-row items-center p-2 border border-solid border-dark-gumbo rounded gap-x-1',\n searchContainerStyles\n ),\n open && activeSearchStyles\n ? activeSearchStyles\n : open\n ? 'border-blue-buttonBlue'\n : undefined\n )\n )}\n >\n <input\n placeholder={searchPlaceholder \|\| 'Search'}\n className={twMerge(\n 'flex flex-1 line-clamp-1 placeholder:text-dark-bermudaGray p-0 bg-transparent border-none outline-none font-poppins text-dark-blackCoral text-xs',\n searchStyles\n )}\n onChange={(e) => {\n setSearch(e.target.value);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n value={search}\n />\n <Icon\n name='search'\n className={twMerge('fill-dark-bermudaGray w-3 h-3', iconSearchStyles)}\n />\n </div>\n </div>\n )}\n <div className={`p-0 overflow-auto max-h-80 ${scrollbarStyles}`}>\n {dataPicker.length > 0 ? (\n dataPicker.map((item, index) => (\n <Listbox.Option\n key={index}\n className={twMerge(\n 'relative cursor-default select-none p-2 even:bg-light-whiteSolid odd:bg-light-aliceBlue ',\n itemContainerStyles\n )}\n value={item}\n >\n {({ active }) => {\n const selected = value.some((i) => i === item.value);\n return (\n <div\n className='flex flex-row items-center gap-x-2 cursor-pointer'\n onClick={(e) => {\n e.preventDefault();\n\n let temp = value.slice();\n if (selected) {\n temp = temp.filter((i) => i !== item.value);\n } else {\n temp = temp.concat(item.value);\n }\n\n onSelectItem?.(temp.filter((i) => i !== ''));\n }}\n >\n <Checkbox checked={selected} variant='small' />\n\n <div className='flex flex-1'>\n <BaseText\n label={item.label}\n className={classNames(\n 'text-xs text-dark-gumbo',\n `${active ? 'font-semibold' : 'font-normal'}`\n )}\n />\n </div>\n </div>\n );\n }}\n </Listbox.Option>\n ))\n ) : (\n <div className='py-2 px-4 w-full'>\n <BaseText\n label={noResultsLabel \|\| 'No Results Found'}\n className={twMerge(\n 'text-dark-bermudaGray font-normal text-sm',\n noResultsLabelStyles\n )}\n />\n </div>\n )}\n </div>\n {isShowFooterButton && (\n <button\n className={twMerge(\n 'flex items-center justify-center font-poppins py-2 px-3 bg-light-aliceBlue w-full text-sm font-normal text-blue-yaleBlue mt-auto',\n footerButtonContainerStyles\n )}\n onClick={() => {\n onClickFooterButton?.();\n }}\n >\n {footerButtonLabel \|\| 'Footer Button'}\n </button>\n )}\n </>\n )}\n </Listbox.Options>\n </Transition>\n </div>\n\n {helperMessage && !isError && (\n <BaseText\n label={helperMessage}\n className={twMerge(\n 'font-normal text-dark-bermudaGray text-[10px] inline-block',\n helperMessageStyles\n )}\n />\n )}\n\n {isError && !!errorMessage && (\n <BaseText\n label={errorMessage}\n className={twMerge(\n 'font-normal text-red-fireEngineRed text-[10px] inline-block',\n errorMessageStyles\n )}\n />\n )}\n </div>\n </Listbox>\n );\n};\n\nexport default BaseCheckPicker;\n"],"names":["value","valueStyles","label","labelStyles","placeholder","placeholderStyles","containerStyles","activeContainerStyles","iconStyles","itemsContainerStyles","itemContainerStyles","isDisabled","position","onSelectItem","onClean","isCleanable","isError","errorMessage","errorMessageStyles","helperMessage","helperMessageStyles","isSearchable","searchContainerStyles","activeSearchStyles","searchPlaceholder","searchStyles","iconSearchStyles","isShowFooterButton","footerButtonContainerStyles","footerButtonLabel","onClickFooterButton","noResultsLabel","noResultsLabelStyles","badgeContainerStyles","badgeLabelStyles","variant","data","isRequired","labelRequired","labelRequiredStyles","containerRequiredStyles","onSearch","search","setSearch","useState","dataPicker","useMemo","temp","filter","item","toLowerCase","includes","useEffect","_jsx","jsx","Listbox","Object","assign","multiple","_jsxs","className","children","jsxs","BaseText","twMerge","BaseBadgeRequired","Button","classNames","extractClasses","undefined","onClick","e","preventDefault","open","i","map","join","length","toString","Icon","name","Transition","as","Fragment","leave","leaveFrom","leaveTo","Options","_Fragment","onChange","target","onKeyDown","stopPropagation","index","Option","active","selected","some","slice","concat","Checkbox","checked"],"mappings":"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"}

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

@@ -52,4 +52,5 @@ export type BaseCheckPickerInterface = {
     badgeLabelStyles?: string;
     variant?: FormVariantType;
     isRequired?: boolean;
+    onSearch?: (searchKeyword: string) => void;
 } & BaseBadgeRequiredInterface;

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

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