@bikdotai/bik-component-library 0.0.590-beta.2 → 0.0.590-sb-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/BikSidebar.js +1 -1
- package/dist/cjs/components/bik-layout/SimpleSidebar.d.ts +1 -0
- package/dist/cjs/components/bik-layout/SimpleSidebar.js +1 -1
- package/dist/cjs/components/toaster/Toaster.js +1 -1
- package/dist/esm/components/bik-layout/BikSidebar.js +1 -1
- package/dist/esm/components/bik-layout/SimpleSidebar.d.ts +1 -0
- package/dist/esm/components/bik-layout/SimpleSidebar.js +1 -1
- package/dist/esm/components/toaster/Toaster.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../assets/icons/Bik_logo.svg.js"),n=require("react"),t=require("../progress-bar/CircularProgressBar.js"),o=require("../../constants/Theme.js"),s=require("../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarPopup.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../assets/icons/Bik_logo.svg.js"),n=require("react"),t=require("../progress-bar/CircularProgressBar.js"),o=require("../../constants/Theme.js"),s=require("../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarPopup.js"),r=require("./SidebarStyles.js"),d=require("./SimpleSidebar.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:s,hoverStateIcon:l,isHovered:r}=i,d=n,a=s,u=l;return e.jsx(e.Fragment,{children:t?e.jsx(a,{width:20,height:20}):r?e.jsx(u,{width:20,height:20,color:o.COLORS.surface.standard}):e.jsx(d,{width:20,height:20,color:o.COLORS.surface.standard})})};exports.BikSidebar=o=>{const{logoSvg:u,allMenuList:c,activeMainMenu:v,activeSubMenu:g,router:m,onClickingMainMenu:h,onClickingSubMenu:p,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:k,popupMinHeight:b,isNewSidebar:j}=o,[S,x]=n.useState(v),[w,M]=n.useState(),[f,N]=n.useState(g),[O,C]=n.useState(!1),[L,E]=n.useState(),[B,I]=n.useState(),[P,q]=n.useState(),[H,_]=n.useState(null),A=n.useMemo((()=>c.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[c]);n.useEffect((()=>{x(v)}),[v]),n.useEffect((()=>{N(g)}),[g]);const R=n.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(E(void 0),M(void 0),C(!0),x(e),e.path||h(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?N(null==e?void 0:e.children[0]):N({}),M(void 0),setTimeout((()=>{C(!1)}),1e3))}),[h]),$=n.useCallback((e=>{var i,n;if(K(),M(void 0),E(void 0),"popup"==(null==e?void 0:e.layout)){const i=z();i&&I(i),E(e)}else{const t=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(t){const e=F(t);q(e)}M(e),D()}}),[]),F=e=>{const i=e.getBoundingClientRect();let n=i.top;const t=e.querySelectorAll("div");let o=null;if(window.innerHeight<=768)return n;if(t.forEach((e=>{e.className.includes("sticky")&&(o=e)})),o){const e=window.innerHeight-i.bottom;n=i.top+e-140}return n},T=(i,n)=>{var t,o,s,l,r,d;return e.jsxs("div",Object.assign({id:(null===(o=null===(t=i.displayName)||void 0===t?void 0:t.split(" "))||void 0===o?void 0:o.join(""))||i.key.toString(),className:"main--sidebar",onClick:()=>R(i),onMouseEnter:()=>{!O&&$(i)},onMouseOver:()=>{!O&&$(i)},onMouseLeave:()=>{var e;(null===(e=null==i?void 0:i.children)||void 0===e?void 0:e.length)||(M(void 0),E(void 0))},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:[i.isNew&&e.jsx("div",Object.assign({className:"new-tag "+(i.isLastSticky?"tag-sticky":"")},{children:"NEW"})),e.jsxs("div",Object.assign({id:(null===(l=null===(s=i.displayName)||void 0===s?void 0:s.split(" "))||void 0===l?void 0:l.join(""))+"_sub"||i.key.toString()+"_sub",className:`sidebar-menu-item \n\t\t\t\t\t${(null==S?void 0:S.key)===i.key?"main-menu-active-class":""} \n\t\t\t\t\t${i.isLastSticky?"sticky-menu-int":""} \n\t\t\t\t\t${i.is2ndLastSticky?"sticky-menu":""} \n\t\t\t\t\t${i.key===(null==w?void 0:w.key)?"sidebar-menu-item-hover":""} \n\t\t\t\t\t${i.isNew?"new-menu-item":""}`},{children:[e.jsx(a,{icon:i.icon,isActive:i.key==(null==S?void 0:S.key),activeStateIcon:null!==(r=i.activeIcon)&&void 0!==r?r:{},hoverStateIcon:null!==(d=i.hoverIcon)&&void 0!==d?d:{},isHovered:i.key==(null==w?void 0:w.key)||i.key==(null==L?void 0:L.key)}),e.jsx("div",Object.assign({className:"menu-item-container"},{children:e.jsx("p",Object.assign({className:"menu-item-text "+((null==i?void 0:i.key)===(null==S?void 0:S.key)?"active-menu-item-text":"")},{children:i.displayName}))}))]}),n)]}),n)};n.useEffect((()=>{const e=()=>{const e=z();e&&I(e),U()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const U=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},z=()=>{var e,i;if(L){const n=(null===(i=null===(e=L.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||L.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.getBoundingClientRect();let i=e.top;const n=null!=b?b:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}},D=()=>{K();const e=setTimeout((()=>M(void 0)),5e3);_(e)},K=()=>{clearTimeout(H)};return e.jsxs(r.SideBarContainer,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:u||e.jsx(i.default,{})})),e.jsxs(r.SibeBarMenuItem,{children:[null==c?void 0:c.map(((i,t)=>{var o,r;return e.jsxs(n.Fragment,{children:[i.path?e.jsx(s.NavigationHyperlink,Object.assign({href:i.path,router:m},{children:T(i,t)})):T(i,t),e.jsxs(e.Fragment,{children:["popup"===i.layout&&(null===(o=null==L?void 0:L.children)||void 0===o?void 0:o.length)&&e.jsx(l.SidebarPopup,{top:null!=B?B:void 0,menuList:null==L?void 0:L.children,onClickingPopupMenu:e=>{k&&k(e),E(void 0)},onMouseLeaveOnMenu:()=>E(void 0)}),(null===(r=null==w?void 0:w.children)||void 0===r?void 0:r.length)&&e.jsx(d.SimpleSidebar,{menuList:null==w?void 0:w.children,activeMenu:f,onMouseEnterOnMenu:()=>K(),onMouseLeaveOnMenu:()=>M(void 0),left:j?92:88,postion:"fixed",header:w.displayName,theme:"brand",router:m,showAccessUpgradePanel:w.showAccessUpgradePanel,onMenuClick:(e,i)=>{N(e),x(w),M(void 0),E(void 0),i&&p(e)},onUpgrade:y,top:j&&P||0,isNewSidebar:j})]})]},t)})),"number"==typeof o.onboardingPercentage&&e.jsx("div",Object.assign({className:"main--sidebar"},{children:e.jsx("div",Object.assign({id:"bik-onboarding__checklist",className:"sidebar-menu-item "+(0===A?"sticky-menu":1===A?"sticky-menu-int":"sticky-menu-three")},{children:e.jsx(t.default,{percentage:o.onboardingPercentage,width:48})}))}))]})]})};
|
|
@@ -21,6 +21,7 @@ export interface SimpleSidebarProps {
|
|
|
21
21
|
top?: number;
|
|
22
22
|
router: any;
|
|
23
23
|
onMouseLeaveOnMenu?: () => void;
|
|
24
|
+
onMouseEnterOnMenu?: () => void;
|
|
24
25
|
onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
|
|
25
26
|
onUpgrade?: () => void;
|
|
26
27
|
isNewSidebar?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),i=require("../../constants/Theme.js"),a=require("../button/Button.js"),n=require("../navigation-hyperlink/NavigationHyperlink.js"),t=require("../TypographyStyle.js"),r=require("./SidebarStyles.js");exports.SimpleSidebar=l=>{const{menuList:d,activeMenu:c,theme:o,showAccessUpgradePanel:u=!1,header:h,width:p,zIndex:b,left:j,postion:m,top:v,router:g,onMouseLeaveOnMenu:y,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),i=require("../../constants/Theme.js"),a=require("../button/Button.js"),n=require("../navigation-hyperlink/NavigationHyperlink.js"),t=require("../TypographyStyle.js"),r=require("./SidebarStyles.js");exports.SimpleSidebar=l=>{const{menuList:d,activeMenu:c,theme:o,showAccessUpgradePanel:u=!1,header:h,width:p,zIndex:b,left:j,postion:m,top:v,router:g,onMouseLeaveOnMenu:y,onMouseEnterOnMenu:x,onMenuClick:N,onUpgrade:O,isNewSidebar:S}=l,[k,w]=s.useState(c),M=(s,i)=>e.jsxs("div",Object.assign({className:"sub-child-menu "+((null==k?void 0:k.key)==(null==s?void 0:s.key)?"sub-child-active-menu":""),onClick:()=>{w(s),N(s,!s.page)},"aria-hidden":"true"},{children:[e.jsx("span",{className:(null==k?void 0:k.key)==(null==s?void 0:s.key)&&"brand"==o?"sub-child-active-text":""}),e.jsx(t.BodySecondary,Object.assign({className:"sub-child-text "+((null==k?void 0:k.key)==(null==s?void 0:s.key)&&"white"==o?"active-bold-weight":"")},{children:null==s?void 0:s.displayName})),s.isNew&&e.jsx("div",Object.assign({className:"sub-child-new-tag"},{children:"NEW"}))]}),i);return e.jsx(r.SimpleSidebarContainer,Object.assign({width:p,zIndex:b,left:j,theme:o,postion:m,top:v,isNewSidebar:S},{children:e.jsxs("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:y,onMouseEnter:x},{children:[e.jsxs("div",{children:[!S&&e.jsx(t.BodySecondary,Object.assign({className:"sub-child-display-name"},{children:h})),null==d?void 0:d.map(((s,i)=>s.page?e.jsx(n.NavigationHyperlink,Object.assign({href:s.page,router:g},{children:M(s,i)})):M(s,i)))]}),u&&e.jsxs("div",Object.assign({className:"lower-sticky-panel"},{children:[e.jsx(t.TitleSmall,Object.assign({className:"title-text",style:{color:i.COLORS.surface.standard}},{children:"Upgrade plan to access this feature."})),e.jsx(a.Button,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>O?O():""})]}))]}),"_sub-menu")}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/alert_triangle.svg.js"),e=require("../../assets/icons/check.svg.js"),n=require("../../assets/icons/cross.svg.js"),s=require("../../assets/icons/errorInfo.svg.js"),i=require("../../assets/icons/info.svg.js"),l=require("react"),r=require("react-dom"),u=require("react-toastify"),d=require("../button/Button.js"),c=require("./Toaster.styled.js"),a=require("../TypographyStyle.js"),x=require("../../constants/Theme.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../../assets/icons/alert_triangle.svg.js"),e=require("../../assets/icons/check.svg.js"),n=require("../../assets/icons/cross.svg.js"),s=require("../../assets/icons/errorInfo.svg.js"),i=require("../../assets/icons/info.svg.js"),l=require("react"),r=require("react-dom"),u=require("react-toastify"),d=require("../button/Button.js"),c=require("./Toaster.styled.js"),a=require("../TypographyStyle.js"),x=require("../../constants/Theme.js");function h(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=h(l),y=h(r);const v=o=>{const e=(o.type,x.COLORS.content.secondary);return t.jsx("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",cursor:"pointer",alignSelf:""+(o.alignTop?"flex-start":"center")},onClick:o.closeToast,onKeyDown:t=>{"Enter"===t.key&&o.closeToast&&o.closeToast()}},{children:t.jsx(n.default,{height:20,width:20,color:e})}))},g=o=>{var e,n;const s=x.COLORS.content.placeholder,{toasterText:i}=l.useContext(f);return t.jsx(t.Fragment,{children:t.jsxs("div",Object.assign({style:{display:"flex",flexGrow:1}},{children:[t.jsx("div",Object.assign({style:{flexGrow:1,marginRight:32,display:"flex",alignItems:"center"}},{children:t.jsxs("div",{children:[o.subText?t.jsx(a.TitleSmall,Object.assign({color:"inherit"},{children:null!==(e=o.toastText)&&void 0!==e?e:i})):t.jsx(a.BodySecondary,Object.assign({color:"inherit"},{children:null!==(n=o.toastText)&&void 0!==n?n:i})),o.subText&&t.jsx("div",Object.assign({style:{marginTop:2}},{children:t.jsx(a.BodyCaption,Object.assign({color:x.COLORS.content.secondary},{children:o.subText}))}))]})})),o.showButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px",marginRight:{showSecondButton:4,showButton:0}[o.showSecondButton?"showSecondButton":"showButton"]}},{children:t.jsx(d.Button,{buttonText:o.buttonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:o.onButtonClick})})),o.showSecondButton&&t.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px"}},{children:t.jsx(d.Button,{buttonText:o.secondButtonText,buttonType:"tertiaryGray",color:x.COLORS.content.secondary,onClick:o.onSecondButtonClick})})),o.showButton||o.showSecondButton?t.jsx("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${s}`,borderRadius:1}}):null]}))})},f=p.default.createContext({toasterText:""});exports.Toaster=n=>{const r=l.useRef(n.toastId||"default-toast"),[d,a]=l.useState(n.text),h=u.cssTransition({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),p="default"===n.type?null:"success"===n.type?t.jsx(e.default,{width:20,height:20,color:x.COLORS.content.positive}):"error"===n.type?t.jsx(s.default,{width:20,height:20,color:x.COLORS.content.negative}):"warning"===n.type?t.jsx(o.default,{width:20,height:20,color:x.COLORS.content.warning}):t.jsx(i.default,{width:20,height:20,color:x.COLORS.content.brand});l.useEffect((()=>{r.current&&r.current===n.toastId?(a(n.text),u.toast.update(r.current,{autoClose:n.autoClose})):r.current&&r.current!==n.toastId&&b(n.text)}),[n.toastId,n.text]);const b=o=>{var e,s,i,l,d,c,a,x,y,f,b,j,T,B,C,w;void 0!==n.hideLeftIcon||n.leftIcon?u.toast(t.jsx(g,{toastText:o,type:n.type||"info",buttonText:null===(e=n.buttonProps)||void 0===e?void 0:e.buttonText,secondButtonText:null===(s=n.secondButtonProps)||void 0===s?void 0:s.buttonText,showButton:null===(i=n.buttonProps)||void 0===i?void 0:i.showButton,showSecondButton:null===(l=n.secondButtonProps)||void 0===l?void 0:l.showButton,onButtonClick:null===(d=n.buttonProps)||void 0===d?void 0:d.onButtonClick,onSecondButtonClick:null===(c=n.secondButtonProps)||void 0===c?void 0:c.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),icon:!0!==n.hideLeftIcon&&(n.leftIcon?n.leftIcon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p}))),type:n.type,closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(a=n.buttonProps)||void 0===a?void 0:a.showButton)||(null===(x=n.secondButtonProps)||void 0===x?void 0:x.showButton))}),toastId:n.toastId||"default-toast",transition:h}):r.current=u.toast(t.jsx(g,{toastText:o,type:n.type||"info",buttonText:null===(y=n.buttonProps)||void 0===y?void 0:y.buttonText,secondButtonText:null===(f=n.secondButtonProps)||void 0===f?void 0:f.buttonText,showButton:null===(b=n.buttonProps)||void 0===b?void 0:b.showButton,showSecondButton:null===(j=n.secondButtonProps)||void 0===j?void 0:j.showButton,onButtonClick:null===(T=n.buttonProps)||void 0===T?void 0:T.onButtonClick,onSecondButtonClick:null===(B=n.secondButtonProps)||void 0===B?void 0:B.onButtonClick,subText:n.subText}),{onClose:n.onCloseToast?n.onCloseToast:()=>({}),type:n.type,icon:"default"!==n.type&&t.jsx("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:p})),closeButton:t.jsx(v,{type:n.type||"default",alignTop:!(!n.subText||(null===(C=n.buttonProps)||void 0===C?void 0:C.showButton)||(null===(w=n.secondButtonProps)||void 0===w?void 0:w.showButton))}),toastId:n.toastId||"default-toast",transition:h})};return l.useEffect((()=>{b()}),[]),y.default.createPortal(t.jsx(c.ToasterStyled,Object.assign({width:n.width,height:n.height,zIndex:n.zIndex,isSubTextIncluded:!!n.subText,type:n.type},{children:t.jsx(f.Provider,Object.assign({value:{toasterText:d}},{children:t.jsx(u.ToastContainer,{position:n.position||"top-right",closeOnClick:n.closeOnClick||!1,hideProgressBar:n.hideProgressBar||!1,draggable:!1,autoClose:n.autoClose||!1,theme:"colored"})}))})),document.body)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import t from"../../assets/icons/Bik_logo.svg.js";import{useState as o,
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import t from"../../assets/icons/Bik_logo.svg.js";import{useState as o,useMemo as l,useEffect as s,useCallback as d,Fragment as r}from"react";import a from"../progress-bar/CircularProgressBar.js";import{COLORS as c}from"../../constants/Theme.js";import{NavigationHyperlink as u}from"../navigation-hyperlink/NavigationHyperlink.js";import{SidebarPopup as v}from"./SidebarPopup.js";import{SideBarContainer as m,SibeBarMenuItem as g}from"./SidebarStyles.js";import{SimpleSidebar as h}from"./SimpleSidebar.js";const p=c=>{const{logoSvg:p,allMenuList:k,activeMainMenu:b,activeSubMenu:w,router:S,onClickingMainMenu:f,onClickingSubMenu:j,onClickingAccessUpgradePanel:M,onClickingPopupMenuItem:N,popupMinHeight:L,isNewSidebar:O}=c,[C,I]=o(b),[E,H]=o(),[P,B]=o(w),[_,A]=o(!1),[x,$]=o(),[T,U]=o(),[R,z]=o(),[F,q]=o(null),D=l((()=>k.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[k]);s((()=>{I(b)}),[b]),s((()=>{B(w)}),[w]);const K=d((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&($(void 0),H(void 0),A(!0),I(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?B(null==e?void 0:e.children[0]):B({}),H(void 0),setTimeout((()=>{A(!1)}),1e3))}),[f]),W=d((e=>{var i,n;if(Y(),H(void 0),$(void 0),"popup"==(null==e?void 0:e.layout)){const i=V();i&&U(i),$(e)}else{const t=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(t){const e=G(t);z(e)}H(e),X()}}),[]),G=e=>{const i=e.getBoundingClientRect();let n=i.top;const t=e.querySelectorAll("div");let o=null;if(window.innerHeight<=768)return n;if(t.forEach((e=>{e.className.includes("sticky")&&(o=e)})),o){const e=window.innerHeight-i.bottom;n=i.top+e-140}return n},J=(n,t)=>{var o,l,s,d,r,a;return e("div",Object.assign({id:(null===(l=null===(o=n.displayName)||void 0===o?void 0:o.split(" "))||void 0===l?void 0:l.join(""))||n.key.toString(),className:"main--sidebar",onClick:()=>K(n),onMouseEnter:()=>{!_&&W(n)},onMouseOver:()=>{!_&&W(n)},onMouseLeave:()=>{var e;(null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.length)||(H(void 0),$(void 0))},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:[n.isNew&&i("div",Object.assign({className:"new-tag "+(n.isLastSticky?"tag-sticky":"")},{children:"NEW"})),e("div",Object.assign({id:(null===(d=null===(s=n.displayName)||void 0===s?void 0:s.split(" "))||void 0===d?void 0:d.join(""))+"_sub"||n.key.toString()+"_sub",className:`sidebar-menu-item \n\t\t\t\t\t${(null==C?void 0:C.key)===n.key?"main-menu-active-class":""} \n\t\t\t\t\t${n.isLastSticky?"sticky-menu-int":""} \n\t\t\t\t\t${n.is2ndLastSticky?"sticky-menu":""} \n\t\t\t\t\t${n.key===(null==E?void 0:E.key)?"sidebar-menu-item-hover":""} \n\t\t\t\t\t${n.isNew?"new-menu-item":""}`},{children:[i(y,{icon:n.icon,isActive:n.key==(null==C?void 0:C.key),activeStateIcon:null!==(r=n.activeIcon)&&void 0!==r?r:{},hoverStateIcon:null!==(a=n.hoverIcon)&&void 0!==a?a:{},isHovered:n.key==(null==E?void 0:E.key)||n.key==(null==x?void 0:x.key)}),i("div",Object.assign({className:"menu-item-container"},{children:i("p",Object.assign({className:"menu-item-text "+((null==n?void 0:n.key)===(null==C?void 0:C.key)?"active-menu-item-text":"")},{children:n.displayName}))}))]}),t)]}),t)};s((()=>{const e=()=>{const e=V();e&&U(e),Q()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const Q=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&z(window.innerHeight-i)},V=()=>{var e,i;if(x){const n=(null===(i=null===(e=x.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||x.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.getBoundingClientRect();let i=e.top;const n=null!=L?L:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}},X=()=>{Y();const e=setTimeout((()=>H(void 0)),5e3);q(e)},Y=()=>{clearTimeout(F)};return e(m,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:p||i(t,{})})),e(g,{children:[null==k?void 0:k.map(((t,o)=>{var l,s;return e(r,{children:[t.path?i(u,Object.assign({href:t.path,router:S},{children:J(t,o)})):J(t,o),e(n,{children:["popup"===t.layout&&(null===(l=null==x?void 0:x.children)||void 0===l?void 0:l.length)&&i(v,{top:null!=T?T:void 0,menuList:null==x?void 0:x.children,onClickingPopupMenu:e=>{N&&N(e),$(void 0)},onMouseLeaveOnMenu:()=>$(void 0)}),(null===(s=null==E?void 0:E.children)||void 0===s?void 0:s.length)&&i(h,{menuList:null==E?void 0:E.children,activeMenu:P,onMouseEnterOnMenu:()=>Y(),onMouseLeaveOnMenu:()=>H(void 0),left:O?92:88,postion:"fixed",header:E.displayName,theme:"brand",router:S,showAccessUpgradePanel:E.showAccessUpgradePanel,onMenuClick:(e,i)=>{B(e),I(E),H(void 0),$(void 0),i&&j(e)},onUpgrade:M,top:O&&R||0,isNewSidebar:O})]})]},o)})),"number"==typeof c.onboardingPercentage&&i("div",Object.assign({className:"main--sidebar"},{children:i("div",Object.assign({id:"bik-onboarding__checklist",className:"sidebar-menu-item "+(0===D?"sticky-menu":1===D?"sticky-menu-int":"sticky-menu-three")},{children:i(a,{percentage:c.onboardingPercentage,width:48})}))}))]})]})},y=e=>{const{icon:t,isActive:o,activeStateIcon:l,hoverStateIcon:s,isHovered:d}=e,r=t,a=s;return i(n,{children:o?i(l,{width:20,height:20}):i(d?a:r,{width:20,height:20,color:c.surface.standard})})};export{p as BikSidebar};
|
|
@@ -21,6 +21,7 @@ export interface SimpleSidebarProps {
|
|
|
21
21
|
top?: number;
|
|
22
22
|
router: any;
|
|
23
23
|
onMouseLeaveOnMenu?: () => void;
|
|
24
|
+
onMouseEnterOnMenu?: () => void;
|
|
24
25
|
onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
|
|
25
26
|
onUpgrade?: () => void;
|
|
26
27
|
isNewSidebar?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s}from"react";import{COLORS as
|
|
1
|
+
import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as t}from"../button/Button.js";import{NavigationHyperlink as a}from"../navigation-hyperlink/NavigationHyperlink.js";import{BodySecondary as l,TitleSmall as r}from"../TypographyStyle.js";import{SimpleSidebarContainer as o}from"./SidebarStyles.js";const c=c=>{const{menuList:d,activeMenu:u,theme:m,showAccessUpgradePanel:p=!1,header:h,width:b,zIndex:g,left:v,postion:y,top:j,router:N,onMouseLeaveOnMenu:f,onMouseEnterOnMenu:k,onMenuClick:O,onUpgrade:w,isNewSidebar:x}=c,[M,S]=s(u),T=(s,n)=>i("div",Object.assign({className:"sub-child-menu "+((null==M?void 0:M.key)==(null==s?void 0:s.key)?"sub-child-active-menu":""),onClick:()=>{S(s),O(s,!s.page)},"aria-hidden":"true"},{children:[e("span",{className:(null==M?void 0:M.key)==(null==s?void 0:s.key)&&"brand"==m?"sub-child-active-text":""}),e(l,Object.assign({className:"sub-child-text "+((null==M?void 0:M.key)==(null==s?void 0:s.key)&&"white"==m?"active-bold-weight":"")},{children:null==s?void 0:s.displayName})),s.isNew&&e("div",Object.assign({className:"sub-child-new-tag"},{children:"NEW"}))]}),n);return e(o,Object.assign({width:b,zIndex:g,left:v,theme:m,postion:y,top:j,isNewSidebar:x},{children:i("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:f,onMouseEnter:k},{children:[i("div",{children:[!x&&e(l,Object.assign({className:"sub-child-display-name"},{children:h})),null==d?void 0:d.map(((i,s)=>i.page?e(a,Object.assign({href:i.page,router:N},{children:T(i,s)})):T(i,s)))]}),p&&i("div",Object.assign({className:"lower-sticky-panel"},{children:[e(r,Object.assign({className:"title-text",style:{color:n.surface.standard}},{children:"Upgrade plan to access this feature."})),e(t,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>w?w():""})]}))]}),"_sub-menu")}))};export{c as SimpleSidebar};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import n from"../../assets/icons/alert_triangle.svg.js";import s from"../../assets/icons/check.svg.js";import i from"../../assets/icons/cross.svg.js";import l from"../../assets/icons/errorInfo.svg.js";import r from"../../assets/icons/info.svg.js";import d,{useRef as c,useState as u,useEffect as a,useContext as p}from"react";import h from"react-dom";import{cssTransition as
|
|
1
|
+
import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import n from"../../assets/icons/alert_triangle.svg.js";import s from"../../assets/icons/check.svg.js";import i from"../../assets/icons/cross.svg.js";import l from"../../assets/icons/errorInfo.svg.js";import r from"../../assets/icons/info.svg.js";import d,{useRef as c,useState as u,useEffect as a,useContext as p}from"react";import h from"react-dom";import{cssTransition as x,toast as g,ToastContainer as y}from"react-toastify";import{Button as v}from"../button/Button.js";import{ToasterStyled as f}from"./Toaster.styled.js";import{TitleSmall as b,BodySecondary as T,BodyCaption as B}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const w=o=>{const e=(o.type,m.content.secondary);return t("div",Object.assign({tabIndex:0,role:"button",style:{width:20,display:"flex",cursor:"pointer",alignSelf:""+(o.alignTop?"flex-start":"center")},onClick:o.closeToast,onKeyDown:t=>{"Enter"===t.key&&o.closeToast&&o.closeToast()}},{children:t(i,{height:20,width:20,color:e})}))},C=n=>{var s,i;const l=m.content.placeholder,{toasterText:r}=p(I);return t(o,{children:e("div",Object.assign({style:{display:"flex",flexGrow:1}},{children:[t("div",Object.assign({style:{flexGrow:1,marginRight:32,display:"flex",alignItems:"center"}},{children:e("div",{children:[n.subText?t(b,Object.assign({color:"inherit"},{children:null!==(s=n.toastText)&&void 0!==s?s:r})):t(T,Object.assign({color:"inherit"},{children:null!==(i=n.toastText)&&void 0!==i?i:r})),n.subText&&t("div",Object.assign({style:{marginTop:2}},{children:t(B,Object.assign({color:m.content.secondary},{children:n.subText}))}))]})})),n.showButton&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px",marginRight:{showSecondButton:4,showButton:0}[n.showSecondButton?"showSecondButton":"showButton"]}},{children:t(v,{buttonText:n.buttonText,buttonType:"tertiaryGray",color:m.content.secondary,onClick:n.onButtonClick})})),n.showSecondButton&&t("div",Object.assign({style:{display:"flex",flexDirection:"column",alignSelf:"center",padding:"6px 4px"}},{children:t(v,{buttonText:n.secondButtonText,buttonType:"tertiaryGray",color:m.content.secondary,onClick:n.onSecondButtonClick})})),n.showButton||n.showSecondButton?t("div",{style:{height:28,alignSelf:"center",marginLeft:8,marginRight:8,borderRight:`1px solid ${l}`,borderRadius:1}}):null]}))})},j=o=>{const e=c(o.toastId||"default-toast"),[i,d]=u(o.text),p=x({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit"}),v="default"===o.type?null:"success"===o.type?t(s,{width:20,height:20,color:m.content.positive}):"error"===o.type?t(l,{width:20,height:20,color:m.content.negative}):"warning"===o.type?t(n,{width:20,height:20,color:m.content.warning}):t(r,{width:20,height:20,color:m.content.brand});a((()=>{e.current&&e.current===o.toastId?(d(o.text),g.update(e.current,{autoClose:o.autoClose})):e.current&&e.current!==o.toastId&&b(o.text)}),[o.toastId,o.text]);const b=n=>{var s,i,l,r,d,c,u,a,h,x,y,f,b,T,B,m;void 0!==o.hideLeftIcon||o.leftIcon?g(t(C,{toastText:n,type:o.type||"info",buttonText:null===(s=o.buttonProps)||void 0===s?void 0:s.buttonText,secondButtonText:null===(i=o.secondButtonProps)||void 0===i?void 0:i.buttonText,showButton:null===(l=o.buttonProps)||void 0===l?void 0:l.showButton,showSecondButton:null===(r=o.secondButtonProps)||void 0===r?void 0:r.showButton,onButtonClick:null===(d=o.buttonProps)||void 0===d?void 0:d.onButtonClick,onSecondButtonClick:null===(c=o.secondButtonProps)||void 0===c?void 0:c.onButtonClick,subText:o.subText}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),icon:!0!==o.hideLeftIcon&&(o.leftIcon?o.leftIcon:"default"!==o.type&&t("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:v}))),type:o.type,closeButton:t(w,{type:o.type||"default",alignTop:!(!o.subText||(null===(u=o.buttonProps)||void 0===u?void 0:u.showButton)||(null===(a=o.secondButtonProps)||void 0===a?void 0:a.showButton))}),toastId:o.toastId||"default-toast",transition:p}):e.current=g(t(C,{toastText:n,type:o.type||"info",buttonText:null===(h=o.buttonProps)||void 0===h?void 0:h.buttonText,secondButtonText:null===(x=o.secondButtonProps)||void 0===x?void 0:x.buttonText,showButton:null===(y=o.buttonProps)||void 0===y?void 0:y.showButton,showSecondButton:null===(f=o.secondButtonProps)||void 0===f?void 0:f.showButton,onButtonClick:null===(b=o.buttonProps)||void 0===b?void 0:b.onButtonClick,onSecondButtonClick:null===(T=o.secondButtonProps)||void 0===T?void 0:T.onButtonClick,subText:o.subText}),{onClose:o.onCloseToast?o.onCloseToast:()=>({}),type:o.type,icon:"default"!==o.type&&t("div",Object.assign({style:{display:"flex",alignItems:"flex-start"}},{children:v})),closeButton:t(w,{type:o.type||"default",alignTop:!(!o.subText||(null===(B=o.buttonProps)||void 0===B?void 0:B.showButton)||(null===(m=o.secondButtonProps)||void 0===m?void 0:m.showButton))}),toastId:o.toastId||"default-toast",transition:p})};return a((()=>{b()}),[]),h.createPortal(t(f,Object.assign({width:o.width,height:o.height,zIndex:o.zIndex,isSubTextIncluded:!!o.subText,type:o.type},{children:t(I.Provider,Object.assign({value:{toasterText:i}},{children:t(y,{position:o.position||"top-right",closeOnClick:o.closeOnClick||!1,hideProgressBar:o.hideProgressBar||!1,draggable:!1,autoClose:o.autoClose||!1,theme:"colored"})}))})),document.body)},I=d.createContext({toasterText:""});export{j as Toaster};
|