@bikdotai/bik-component-library 0.0.738-0 → 0.0.738-5

package/dist/esm/components/bik-chatbot-examples/SimpleJsonChatDemo.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Simple JSON Chatbot Demo - Assistant returns JSON in text
+ *
+ * This demonstrates:
+ * - responseFormat='json' behavior
+ * - Chat bubble shows parsed.response
+ * - onMessageReceived receives full parsed JSON
+ */
+import React from 'react';
+export interface SimpleJsonChatbotDemoProps {
+    height?: string;
+    className?: string;
+    conversationId?: string;
+}
+export declare const SimpleJsonChatbotDemo: React.FC<SimpleJsonChatbotDemoProps>;
+export default SimpleJsonChatbotDemo;

package/dist/esm/components/bik-chatbot-examples/services/MockRequestExecutor.d.ts

@@ -0,0 +1,17 @@
+export interface MockSendDataOptions {
+    apiPath: string;
+    apiMethod?: 'POST' | 'GET' | 'PUT' | 'PATCH' | 'DELETE';
+    requestBody?: unknown;
+    requestHeader?: Record<string, string>;
+    skipStoreId?: boolean;
+    abortController?: AbortController;
+}
+type MockExecutorResult<T> = {
+    status: number;
+    data?: T;
+    error?: unknown;
+};
+export declare const MockRequestExecutor: {
+    sendData<T>({ apiPath, apiMethod, requestBody, requestHeader, abortController, }: MockSendDataOptions): Promise<MockExecutorResult<T>>;
+};
+export default MockRequestExecutor;

package/dist/esm/components/bik-chatbot-examples/types.ts/examples.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Example Types
+ *
+ * Type definitions for example components and their data structures.
+ */
+export interface Campaign {
+    id: string;
+    name: string;
+    description: string;
+    category: string;
+    tags?: string[];
+    timeline?: string;
+    eventName?: string;
+    trendingMoment?: string;
+    relevanceScore?: string;
+    goal?: string;
+}
+export interface TemplateRecommendation {
+    templateType: string;
+    templateName: string;
+    templateCategory: string;
+    templateDescription: string;
+    suggestedElements: {
+        headerText?: string;
+        bodyText: string;
+        footerText?: string;
+        buttonTexts: string[];
+        mediaType: string;
+    };
+}
+export interface AnalyticsData {
+    deliveryRate: number;
+    engagementRate: number;
+    bounceRate: number;
+    openRate: number;
+    clickRate?: number;
+    unsubscribeRate?: number;
+}
+export interface AnalyticsAnalysis {
+    response: string;
+    suggestions: string[];
+    insights: string[];
+    metrics: AnalyticsData;
+}
+export interface CampaignAIProps {
+    storeId: string;
+    onCampaignsGenerated: (campaigns: Campaign[]) => void;
+    height?: string;
+    className?: string;
+}
+export interface TemplateAIProps {
+    campaign: Campaign;
+    onTemplatesGenerated: (templates: TemplateRecommendation[]) => void;
+    height?: string;
+    className?: string;
+}
+export interface AnalyticsAdvisorProps {
+    onAnalysisReceived: (analysis: AnalyticsAnalysis) => void;
+    height?: string;
+    className?: string;
+}

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

@@ -1 +1 @@
-import{j as s}from"../../node_modules/react/jsx-runtime.js";import e from"../../assets/icons/arrow_left.svg.js";import{useState as t}from"react";import{Curtain as r}from"../curtain/Curtain.js";import{BodyCaption as i,TitleMedium as n,TitleRegular as a}from"../TypographyStyle.js";import{BikHeaderWrapper as o,BikHeaderContainer as c}from"./CommonStyles.js";const l=l=>{const{header:d,subHeader:j,hideBackButton:h=!0,rightActionButton:m,onClickingBackButton:x,secondaryHeader:g,curtainProps:u,curtainZIndex:p,headerStyles:f,leftLayout:y,dataTest:b}=l,[O,k]=t(!!u);return s.jsxs(o,Object.assign({style:Object.assign({},f),"data-test":b},{children:[s.jsxs(c,{children:[y?s.jsxs(s.Fragment,{children:[!h&&s.jsx(e,{className:"cursor",height:24,width:24,onClick:x}),y]}):s.jsxs("div",Object.assign({className:"row--flex left-container"},{children:[!h&&s.jsx(e,{className:"cursor",height:24,width:24,onClick:x}),s.jsxs("div",{children:[j?s.jsx(i,Object.assign({className:"brand"},{children:d})):s.jsx(n,{children:d}),s.jsx(a,{children:j})]})]})),s.jsx("div",Object.assign({className:"row--flex right-container"},{children:m}))]}),O&&u&&s.jsxs(s.Fragment,{children:[s.jsx("div",Object.assign({style:{position:"sticky",top:0,width:"auto",zIndex:p||6}},{children:s.jsx(r,Object.assign({},u,{onCloseHandler:()=>{k(!1)}}))})),s.jsx("div",{style:{height:20}})]}),null!=g?g:s.jsx(s.Fragment,{})]}))};export{l as BikHeader};
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import r from"../../assets/icons/arrow_left.svg.js";import{useState as s}from"react";import{Curtain as n}from"../curtain/Curtain.js";import{BodyCaption as a,TitleMedium as c,TitleRegular as o}from"../TypographyStyle.js";import{BikHeaderWrapper as l,BikHeaderContainer as d}from"./CommonStyles.js";const h=h=>{const{header:m,subHeader:g,hideBackButton:u=!0,rightActionButton:j,onClickingBackButton:p,secondaryHeader:f,curtainProps:y,curtainZIndex:b,headerStyles:O,leftLayout:k,dataTest:v}=h,[w,x]=s(!!y);return e(l,Object.assign({style:Object.assign({},O),"data-test":v},{children:[e(d,{children:[k?e(t,{children:[!u&&i(r,{className:"cursor",height:24,width:24,onClick:p}),k]}):e("div",Object.assign({className:"row--flex left-container"},{children:[!u&&i(r,{className:"cursor",height:24,width:24,onClick:p}),e("div",{children:[g?i(a,Object.assign({className:"brand"},{children:m})):i(c,{children:m}),i(o,{children:g})]})]})),i("div",Object.assign({className:"row--flex right-container"},{children:j}))]}),w&&y&&e(t,{children:[i("div",Object.assign({style:{position:"sticky",top:0,width:"auto",zIndex:b||6}},{children:i(n,Object.assign({},y,{onCloseHandler:()=>{x(!1)}}))})),i("div",{style:{height:20}})]}),null!=f?f:i(t,{})]}))};export{h as BikHeader};

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from './SimpleSidebar';
+import { Menu } from './Sidebar.model';
 export interface MenuItem {
     key: string | number;
     displayName: string;

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

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

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

@@ -1,43 +1,43 @@
 /// <reference types="react" />
 export declare const GlobalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const LoadingMessageWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikLayoutContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     type?: "overflow-within" | "overflow-body" | undefined;
     backgroundColor?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BikHeaderContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const MenuInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProfileDropdownToggleContainer: import("@emotion/styled").StyledComponent<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps & {
+export declare const ProfileDropdownToggleContainer: import("@emotion/styled").StyledComponent<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const ProfileDropdownInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isDropdownOpen: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -55,24 +55,24 @@ export declare const UserNameTitleSmall: import("@emotion/styled").StyledCompone
 }, {}, {}>;
 export declare const UserAvatarContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("react-bootstrap").TooltipProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const UserInfoContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StatusContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isAvailable: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const UserStatusContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledBodyCaption: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -90,7 +90,7 @@ export declare const StyledBodyCaption: import("@emotion/styled").StyledComponen
 }, {}, {}>;
 export declare const FeatureModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     zIndex?: number | undefined;
     resetHeight?: boolean | undefined;
@@ -98,13 +98,13 @@ export declare const FeatureModalContainer: import("@emotion/styled").StyledComp
 }, 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;