@bikdotai/bik-component-library 0.0.445-beta.1 → 0.0.445-beta.2

package/dist/esm/components/bik-layout/BikLayout.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{BikLayoutContainer as o}from"./CommonStyles.js";import{FeatureModal as i}from"./FeatureModal.js";import{PageLoader as a}from"./PageLoader.js";const t=t=>{const{isLoading:s,isFeatureModalEnabled:d=!1,isDisabled:l=!1,loadingAnimation:c,hidePadding:p=!1,height:m,children:g,containerStyles:h,onClickingCrossOnFeatureModal:j,onUpgrade:b,extraContentForModal:u,featureModalProps:C,type:f}=t;return s?e(o,{children:c||e(a,{})}):e(r,{children:n(o,Object.assign({type:f},{children:[e("div",{className:""+(l?"disabled--wrapper":"")}),e("div",Object.assign({className:""+(p?"inner-wrapper":"inner-wrapper pd-24"),style:Object.assign({height:`${m||""}`},null!=h?h:{})},{children:g})),d&&e(i,Object.assign({showBookADemo:!0,onClickingCross:()=>j?j():"",onUpgrade:b},C,{otherContent:u}))]}))})};export{t as BikLayout};
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import{BikLayoutContainer as n}from"./CommonStyles.js";import{FeatureModal as a}from"./FeatureModal.js";import{FeatureModalV2 as t}from"./FeatureModalV2.js";import{PageLoader as i}from"./PageLoader.js";const s=s=>{const{isLoading:d,isFeatureModalEnabled:l=!1,isDisabled:c=!1,loadingAnimation:p,hidePadding:m=!1,height:g,children:h,containerStyles:u,onClickingCrossOnFeatureModal:j,onUpgrade:b,extraContentForModal:C,featureModalProps:M,type:f,useFeautureModalV2:F}=s;return d?e(n,{children:p||e(i,{})}):e(r,{children:o(n,Object.assign({type:f},{children:[e("div",{className:""+(c?"disabled--wrapper":"")}),e("div",Object.assign({className:""+(m?"inner-wrapper":"inner-wrapper pd-24"),style:Object.assign({height:`${g||""}`},null!=u?u:{})},{children:h})),l&&e(r,{children:F?e(t,Object.assign({onUpgrade:b},M,{otherContent:C})):e(a,Object.assign({showBookADemo:!0,onClickingCross:()=>j?j():"",onUpgrade:b},M,{otherContent:C}))})]}))})};export{s as BikLayout};

package/dist/esm/components/bik-layout/BikProfile.js

@@ -1 +1 @@
-import{jsx as i,jsxs as e,Fragment as t}from"react/jsx-runtime";import n from"../../assets/icons/log_out.svg.js";import{useState as o}from"react";import{Dropdown as s,OverlayTrigger as r}from"react-bootstrap";import{COLORS as a,DEFAULT_THEME as c}from"../../constants/Theme.js";import"@tippyjs/react";import"../tooltips/TooltipInternal.js";import{BodyCaption as l,TitleSmall as d,BodySecondary as m}from"../TypographyStyle.js";import{StyledDropdown as g}from"../floating-action-button/FloatingActionButton.styles.js";import{StyledTooltip as p,MenuInnerContainer as h,UserInfoContainer as b,UserStatusContainer as j,UserNameTitleSmall as v,StatusContainer as u,StyledBodyCaption as O,ProfileDropdownToggleContainer as A,ProfileDropdownInnerContainer as y,UserAvatarContainer as f}from"./CommonStyles.js";const w=A=>{const[y,f]=o(!1),{userName:w,hideLogout:N=!1,photoUrl:C,isActiveAwayStatus:x=!0,isAvailable:D=!1,extraJSX:S,onProfileClicked:T,onLogout:k}=A,L=i=>{const e=(i||"").split("."),t=e[1]||e[0];if(!t)return"";return t.split(" ").map((i=>i.charAt(0).toUpperCase())).slice(0,2).join("")},B=i(p,Object.assign({id:"tooltip"},{children:i(l,{children:w})}));return e(g,Object.assign({onToggle:i=>{f(i)}},{children:[i(I,{isDropdownOpen:y,imageUrl:C,initialsAsIcon:C?"":L(w)}),i(s.Menu,{children:e(h,{children:[e(b,Object.assign({onClick:T},{children:[i(U,{imageUrl:C,initialsAsIcon:C?"":L(w)}),e(j,{children:[i(r,Object.assign({delay:{show:100,hide:400},placement:"top",overlay:B},{children:i(v,{children:i(d,{children:w})})})),x&&e(u,Object.assign({isAvailable:D},{children:[i("div",{className:"availability--container"}),!D&&i(O,Object.assign({isAvailable:D},{children:"Away"})),D&&i(O,Object.assign({isAvailable:D},{children:"Active"}))]}))]})]})),S&&e(t,{children:[i("div",{className:"divider"}),S]}),!N&&e(t,{children:[i("div",{className:"divider"}),e("div",Object.assign({className:"logout--container",onClick:k,onKeyDown:k,role:"button",tabIndex:0},{children:[i(n,{color:a.content.negative,height:17,width:17}),i(m,Object.assign({style:{color:c.colorsV2.content.negative}},{children:"Logout"}))]}))]})]})})]}))},I=e=>{const{isDropdownOpen:t,imageUrl:n,initialsAsIcon:o}=e;return i(A,Object.assign({id:"dropdown-basic"},{children:i(y,Object.assign({isDropdownOpen:t},{children:i(U,{imageUrl:n,initialsAsIcon:o})}))}))},U=e=>{const{imageUrl:n,initialsAsIcon:o}=e;return i(t,{children:(o||n)&&i(f,{children:n?i("img",{src:n,alt:"general-icon"}):i("div",Object.assign({className:"avatar--container"},{children:i(m,Object.assign({style:{color:a.surface.standard}},{children:o}))}))})})};export{w as BikProfile};
+import{jsx as i,jsxs as e,Fragment as n}from"react/jsx-runtime";import t from"../../assets/icons/log_out.svg.js";import{useState as o}from"react";import{Dropdown as s,OverlayTrigger as r}from"react-bootstrap";import{COLORS as a,DEFAULT_THEME as c}from"../../constants/Theme.js";import"../tooltips/Tooltip.js";import{BodyCaption as l,TitleSmall as d,BodySecondary as m}from"../TypographyStyle.js";import{StyledDropdown as g}from"../floating-action-button/FloatingActionButton.styles.js";import{StyledTooltip as h,MenuInnerContainer as p,UserInfoContainer as b,UserStatusContainer as j,UserNameTitleSmall as v,StatusContainer as u,StyledBodyCaption as O,ProfileDropdownToggleContainer as A,ProfileDropdownInnerContainer as y,UserAvatarContainer as f}from"./CommonStyles.js";const w=A=>{const[y,f]=o(!1),{userName:w,hideLogout:N=!1,photoUrl:C,isActiveAwayStatus:x=!0,isAvailable:D=!1,extraJSX:S,onProfileClicked:T,onLogout:k}=A,L=i=>{const e=(i||"").split("."),n=e[1]||e[0];if(!n)return"";return n.split(" ").map((i=>i.charAt(0).toUpperCase())).slice(0,2).join("")},B=i(h,Object.assign({id:"tooltip"},{children:i(l,{children:w})}));return e(g,Object.assign({onToggle:i=>{f(i)}},{children:[i(U,{isDropdownOpen:y,imageUrl:C,initialsAsIcon:C?"":L(w)}),i(s.Menu,{children:e(p,{children:[e(b,Object.assign({onClick:T},{children:[i(I,{imageUrl:C,initialsAsIcon:C?"":L(w)}),e(j,{children:[i(r,Object.assign({delay:{show:100,hide:400},placement:"top",overlay:B},{children:i(v,{children:i(d,{children:w})})})),x&&e(u,Object.assign({isAvailable:D},{children:[i("div",{className:"availability--container"}),!D&&i(O,Object.assign({isAvailable:D},{children:"Away"})),D&&i(O,Object.assign({isAvailable:D},{children:"Active"}))]}))]})]})),S&&e(n,{children:[i("div",{className:"divider"}),S]}),!N&&e(n,{children:[i("div",{className:"divider"}),e("div",Object.assign({className:"logout--container",onClick:k,onKeyDown:k,role:"button",tabIndex:0},{children:[i(t,{color:a.content.negative,height:17,width:17}),i(m,Object.assign({style:{color:c.colorsV2.content.negative}},{children:"Logout"}))]}))]})]})})]}))},U=e=>{const{isDropdownOpen:n,imageUrl:t,initialsAsIcon:o}=e;return i(A,Object.assign({id:"dropdown-basic"},{children:i(y,Object.assign({isDropdownOpen:n},{children:i(I,{imageUrl:t,initialsAsIcon:o})}))}))},I=e=>{const{imageUrl:t,initialsAsIcon:o}=e;return i(n,{children:(o||t)&&i(f,{children:t?i("img",{src:t,alt:"general-icon"}):i("div",Object.assign({className:"avatar--container"},{children:i(m,Object.assign({style:{color:a.surface.standard}},{children:o}))}))})})};export{w as BikProfile};

package/dist/esm/components/bik-layout/BikSidebar.d.ts

@@ -11,6 +11,8 @@ export interface MenuItem {
     children?: Menu[];
     showAccessUpgradePanel?: boolean;
     path?: string;
+    layout?: 'fullScreen' | 'popup' | string | undefined;
+    isNew?: boolean;
 }
 export interface BikSidebarProps {
     logoSvg?: JSX.Element;
@@ -21,5 +23,8 @@ export interface BikSidebarProps {
     onClickingMainMenu: (menu: MenuItem) => void;
     onClickingSubMenu: (subMenu: Menu) => void;
     onClickingAccessUpgradePanel?: () => void;
+    onClickingPopupMenuItem?: (menu: Menu) => void;
+    popupMinHeight?: number;
+    isNewSidebar?: boolean;
 }
 export declare const BikSidebar: React.FC<BikSidebarProps>;

package/dist/esm/components/bik-layout/BikSidebar.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/Bik_logo.svg.js";import{useState as t,useEffect as l,Fragment as a}from"react";import{COLORS as r}from"../../constants/Theme.js";import{NavigationHyperlink as s}from"../navigation-hyperlink/NavigationHyperlink.js";import{SideBarContainer as d,SibeBarMenuItem as c}from"./SidebarStyles.js";import{SimpleSidebar as v}from"./SimpleSidebar.js";const u=r=>{const{logoSvg:u,allMenuList:h,activeMainMenu:g,activeSubMenu:k,router:p,onClickingMainMenu:y,onClickingSubMenu:b,onClickingAccessUpgradePanel:M}=r,[S,j]=t(g),[f,N]=t(),[O,C]=t(k),[I,L]=t(!1);l((()=>{j(g)}),[g]),l((()=>{C(k)}),[k]);const w=(n,o)=>{var t,l,a,r;return i("div",Object.assign({id:(null===(l=null===(t=n.displayName)||void 0===t?void 0:t.split(" "))||void 0===l?void 0:l.join(""))||n.key.toString(),className:"main--sidebar",onClick:()=>(e=>{var i;N(void 0),L(!0),j(e),!e.path&&y(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?C(null==e?void 0:e.children[0]):C({}),N(void 0),setTimeout((()=>{L(!1)}),1e3)})(n),onMouseEnter:()=>{!I&&N(n)},onMouseOver:()=>{!I&&N(n)},onMouseLeave:()=>{var e;!(null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.length)&&N(void 0)},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:e("div",Object.assign({className:`sidebar-menu-item ${(null==S?void 0:S.key)==n.key?" main-menu-active-class":""}  ${n.isLastSticky?"sticky-menu-int":""} ${n.is2ndLastSticky?"sticky-menu":""}\n\t\t\t${n.key==(null==f?void 0:f.key)?"sidebar-menu-item-hover":""}`},{children:[i(m,{icon:n.icon,isActive:n.key==(null==S?void 0:S.key),activeStateIcon:null!==(a=n.activeIcon)&&void 0!==a?a:{},hoverStateIcon:null!==(r=n.hoverIcon)&&void 0!==r?r:{},isHovered:n.key==(null==f?void 0:f.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==S?void 0:S.key)?"active-menu-item-text":"")},{children:n.displayName}))}))]}),o)}),o)};return e(d,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:u||i(o,{})})),i(c,{children:null==h?void 0:h.map(((o,t)=>{var l;return e(a,{children:[o.path?i(s,Object.assign({href:o.path,router:p},{children:w(o,t)})):w(o,t),i(n,{children:(null===(l=null==f?void 0:f.children)||void 0===l?void 0:l.length)&&i(v,{menuList:null==f?void 0:f.children,activeMenu:O,onMouseLeaveOnMenu:()=>N(void 0),left:88,postion:"fixed",header:f.displayName,theme:"brand",router:p,showAccessUpgradePanel:f.showAccessUpgradePanel,onMenuClick:(e,i)=>{C(e),j(f),N(void 0),i&&b(e)},onUpgrade:M})})]},t)}))})]})},m=e=>{const{icon:o,isActive:t,activeStateIcon:l,hoverStateIcon:a,isHovered:s}=e,d=o,c=a;return i(n,{children:t?i(l,{width:20,height:20}):i(s?c:d,{width:20,height:20,color:r.surface.standard})})};export{u as BikSidebar};
+import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/Bik_logo.svg.js";import{useState as t,useEffect as l,Fragment as d}from"react";import{COLORS as s}from"../../constants/Theme.js";import{NavigationHyperlink as r}from"../navigation-hyperlink/NavigationHyperlink.js";import{SidebarPopup as a}from"./SidebarPopup.js";import{SideBarContainer as u,SibeBarMenuItem as c}from"./SidebarStyles.js";import{SimpleSidebar as v}from"./SimpleSidebar.js";const m=s=>{const{logoSvg:m,allMenuList:h,activeMainMenu:g,activeSubMenu:y,router:k,onClickingMainMenu:b,onClickingSubMenu:w,onClickingAccessUpgradePanel:S,onClickingPopupMenuItem:M,popupMinHeight:j,isNewSidebar:N}=s,[f,C]=t(g),[I,L]=t(),[O,B]=t(y),[E,H]=t(!1),[P,_]=t(),[x,A]=t(),[$,U]=t();l((()=>{C(g)}),[g]),l((()=>{B(y)}),[y]);const R=e=>{var i,n;if(L(void 0),_(void 0),"popup"==(null==e?void 0:e.layout)){const i=T();i&&A(i),_(e)}else{const o=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(o){const e=o.getBoundingClientRect().top;U(e)}L(e)}},z=(n,o)=>{var t,l,d,s,r,a;return e("div",Object.assign({id:(null===(l=null===(t=n.displayName)||void 0===t?void 0:t.split(" "))||void 0===l?void 0:l.join(""))||n.key.toString(),className:"main--sidebar",onClick:()=>(e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(_(void 0),L(void 0),H(!0),C(e),!e.path&&b(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({}),L(void 0),setTimeout((()=>{H(!1)}),1e3))})(n),onMouseEnter:()=>{!E&&R(n)},onMouseOver:()=>{!E&&R(n)},onMouseLeave:()=>{var e;(null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.length)||(L(void 0),_(void 0))},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:[n.isNew&&i("div",Object.assign({className:"new-tag"},{children:" NEW"})),e("div",Object.assign({id:(null===(s=null===(d=n.displayName)||void 0===d?void 0:d.split(" "))||void 0===s?void 0:s.join(""))+"_sub"||n.key.toString()+"_sub",className:`sidebar-menu-item ${(null==f?void 0:f.key)==n.key?" main-menu-active-class":""}  ${n.isLastSticky?"sticky-menu-int":""} ${n.is2ndLastSticky?"sticky-menu":""}\n\t\t\t\t\t${n.key==(null==I?void 0:I.key)?"sidebar-menu-item-hover":""}\`}\n\t\t\t\t\t${n.isNew?"new-menu-item":""}`},{children:[i(p,{icon:n.icon,isActive:n.key==(null==f?void 0:f.key),activeStateIcon:null!==(r=n.activeIcon)&&void 0!==r?r:{},hoverStateIcon:null!==(a=n.hoverIcon)&&void 0!==a?a:{},isHovered:n.key==(null==I?void 0:I.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==f?void 0:f.key)?"active-menu-item-text":"")},{children:n.displayName}))}))]}),o)]}),o)};l((()=>{const e=()=>{const e=T();e&&A(e),F()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const F=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&U(window.innerHeight-i)},T=()=>{var e,i;if(P){const n=(null===(i=null===(e=P.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||P.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=j?j:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(u,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:m||i(o,{})})),i(c,{children:null==h?void 0:h.map(((o,t)=>{var l,s;return e(d,{children:[o.path?i(r,Object.assign({href:o.path,router:k},{children:z(o,t)})):z(o,t),e(n,{children:["popup"===o.layout&&(null===(l=null==P?void 0:P.children)||void 0===l?void 0:l.length)&&i(a,{top:null!=x?x:void 0,menuList:null==P?void 0:P.children,onClickingPopupMenu:e=>{M&&M(e),_(void 0)},onMouseLeaveOnMenu:()=>_(void 0)}),(null===(s=null==I?void 0:I.children)||void 0===s?void 0:s.length)&&i(v,{menuList:null==I?void 0:I.children,activeMenu:O,onMouseLeaveOnMenu:()=>L(void 0),left:N?92:88,postion:"fixed",header:I.displayName,theme:"brand",router:k,showAccessUpgradePanel:I.showAccessUpgradePanel,onMenuClick:(e,i)=>{B(e),C(I),L(void 0),_(void 0),i&&w(e)},onUpgrade:S,top:N&&$||0,isNewSidebar:N})]})]},t)}))})]})},p=e=>{const{icon:o,isActive:t,activeStateIcon:l,hoverStateIcon:d,isHovered:r}=e,a=o,u=d;return i(n,{children:t?i(l,{width:20,height:20}):i(r?u:a,{width:20,height:20,color:s.surface.standard})})};export{m as BikSidebar};

package/dist/esm/components/bik-layout/CommonStyles.d.ts

@@ -92,8 +92,18 @@ export declare const FeatureModalContainer: import("@emotion/styled").StyledComp
     as?: import("react").ElementType<any> | undefined;
 } & {
     zIndex?: number | undefined;
+    resetHeight?: boolean | undefined;
+    relativePostion?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InnerModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RelativeModalContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FeatureModalV2Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;