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

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/bik-layout/BikHeader.js

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

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

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

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

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

package/dist/cjs/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/cjs/components/bik-layout/BikSidebar.js

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

package/dist/cjs/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>, {}>;