@bikdotai/bik-component-library 0.0.640-beta.7 → 0.0.640-beta.help-attr.4

package/dist/esm/components/analytics-chips-and-dropdowns/chart/utils/calcPercentage.js

@@ -1 +0,0 @@
-function N(N,O,L){const E=N+O+L;return[N/E*100||0,O/E*100||0,L/E*100||0]}const O=N=>{if(Math.abs(N)<1e3)return n(N).toString();return n(N/1e3)+"K"},L=N=>{if(Math.abs(N)<1e4)return n(N).toString();return n(Number(N)/1e3)+"K"},E=N=>n(Number(N)/A.ONE_LAKH)+"L",e=N=>n(Number(N)/A.ONE_CRORE)+"C",r=N=>n(Number(N)/A.ONE_ARAB)+"A",I=N=>n(Number(N)/A.ONE_MILLION)+"M",_=N=>n(Number(N)/A.ONE_BILLION)+"B",t=N=>n(Number(N)/A.ONE_TRILLION)+"T",n=function(N){const O=10*(arguments.length>1&&void 0!==arguments[1]?arguments[1]:2);return Math.round((N+Number.EPSILON)*O)/O},u=N=>N<1e3?n(N):N>999&&N<A.ONE_MILLION?O(N):N>999999&&N<A.ONE_BILLION?I(N):N>999999999&&N<A.ONE_TRILLION?_(N):t(N),R=N=>N<1e3?n(N):N>999&&N<A.ONE_LAKH?O(N):N>99999&&N<A.ONE_CRORE?E(N):N>9999999&&N<A.ONE_ARAB?e(N):r(N);var A;!function(N){N[N.ONE_LAKH=1e5]="ONE_LAKH",N[N.ONE_CRORE=1e7]="ONE_CRORE",N[N.ONE_ARAB=1e9]="ONE_ARAB",N[N.ONE_MILLION=1e6]="ONE_MILLION",N[N.ONE_BILLION=1e9]="ONE_BILLION",N[N.ONE_TRILLION=1e12]="ONE_TRILLION"}(A||(A={}));export{A as TruncateValue,N as calculatePercentage,n as roundNumber,R as truncateValueForIndianStore,u as truncateValueForInternationalStore,L as truncateValueTo10K,r as truncateValueToA,_ as truncateValueToB,e as truncateValueToC,O as truncateValueToK,E as truncateValueToL,I as truncateValueToM,t as truncateValueToT};

package/dist/esm/components/analytics-chips-and-dropdowns/index.d.ts

@@ -1,19 +0,0 @@
-export * from './AnalyticsChip';
-export * from './AnalyticsDropdown';
-export * from './AnalyticsMultiChip';
-export * from './AnalyticsMetric';
-export * from './AnalyticsTrend';
-export * from './chart/LineChart/LineChart';
-export * from './chart/linearChipGroupedChart';
-export * from './chart/Pie/PieChartAnalytics';
-export * from './chart/Pie/PieChart';
-export * from './chart/HorizontalBarGraph/HorizontalGraph';
-export * from './chart/StackedBarChart/StackedBarChart';
-export * from './chart/StackedBarChart/StackedBarDistributionChart';
-export * from './chart/StackedBarChart/StackedBarDistributionChart.model';
-export * from './chart/VerticalBarGraph/VerticalGraph';
-export * from './chart/VerticalBarGraph/FunnelVerticalBarGraph';
-export * from './chart/heatmap/HeatMap';
-export * from './chart/heatmap/HeatMapVertical';
-export * from './chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph';
-export * from './chart/utils/calcPercentage';

package/dist/esm/components/avatar/Avatar.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from "./AvatarHelper";
-export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
-    SMALL: number;
-    MEDIUM: number;
-    INBOX: number;
-    LARGE: number;
-};
-export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
-    LIGHT: string;
-    DARK: string;
-};
-export type AvatarProps = {
-    type: AVATAR_TYPES;
-    size: SIZE;
-    background: AVATAR_BACKGROUND;
-    name?: string;
-    photoUrl?: string;
-    icon?: React.FC<{
-        width: number;
-        height: number;
-        color: string;
-    }>;
-    useNameFallback?: boolean;
-    channelName?: MESSAGE_CHANNELS;
-    borderRadius?: string;
-    inboxSettings?: {
-        isSelected: boolean;
-        isComments: boolean;
-    };
-};
-export declare const enum MESSAGE_CHANNELS {
-    INSTAGRAM = "instagram",
-    MESSENGER = "messenger",
-    WHATSAPP = "whatsapp",
-    GMAIL = "gmail",
-    LIVECHAT = "livechat",
-    GOOGLE_BUSINESS_CHAT = "gbm",
-    SHOPIFY = "shopify",
-    FACEBOOK = "facebook",
-    EMAIL = "email",
-    SMTP = "smtp",
-    FACEBOOK_CATALOG = "facebook-catalog",
-    TASKS = "tasks"
-}
-export declare const Avatar: React.FC<AvatarProps>;

package/dist/esm/components/avatar/Avatar.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as r,AVATAR_BACKGROUND as o,AVATAR_TYPES as a,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import m from"../../assets/icons/CheckSquareOffset.svg.js";import g from"../../assets/icons/email-channel.svg.js";import p from"../../assets/icons/facebook_channel.svg.js";import A from"../../assets/icons/gmail.svg.js";import b from"../../assets/icons/instagram-channel.svg.js";import u from"../../assets/icons/whatsapp_color.svg.js";const S={[r.SMALL]:16,[r.MEDIUM]:20,[r.INBOX]:24,[r.LARGE]:32},f={[o.LIGHT]:h.content.secondary,[o.DARK]:h.surface.standard};var I;!function(e){e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks"}(I||(I={}));const y=o=>{const[y,O]=s(!1),j=()=>{const e=(o.name||"").split(".").join(" ").split(" ").map((e=>e.charAt(0).toUpperCase())).slice(0,2).join("");return o.size===r.SMALL?t(c,Object.assign({style:{color:f[o.background]}},{children:e})):o.size===r.MEDIUM||o.size===r.INBOX?t(l,Object.assign({style:{color:f[o.background]}},{children:e})):o.size===r.LARGE?t(d,Object.assign({style:{color:f[o.background]}},{children:e})):void 0};return e("div",Object.assign({style:{position:"relative"}},{children:[e(i,Object.assign({type:o.type===a.IMAGE&&y&&o.useNameFallback&&o.name?a.INITIALS:o.type,size:o.size,background:o.background},{children:[o.type===a.IMAGE&&(o.useNameFallback&&!y?t("img",{alt:"",width:n[o.size],height:n[o.size],style:{borderRadius:(null==o?void 0:o.borderRadius)||"50%",objectFit:"contain"},src:o.photoUrl,onError:()=>{O(!0)}}):o.useNameFallback&&y&&o.name?t("div",{children:j()}):t("img",{alt:"",width:n[o.size],height:n[o.size],style:{borderRadius:(null==o?void 0:o.borderRadius)||"50%",objectFit:"contain"},src:o.photoUrl})),o.type===a.INITIALS&&t("div",{children:j()}),o.type===a.ICON&&o.icon&&t(o.icon,{width:S[o.size],height:S[o.size],color:f[o.background]})]})),o.inboxSettings&&t("div",Object.assign({style:{position:"absolute",left:"20px",top:"20px",width:14,height:14,borderRadius:(null==o?void 0:o.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:o.inboxSettings.isSelected?o.inboxSettings.isComments?h.content.primary:h.background.brandLight:o.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(o.channelName){case I.EMAIL:case I.SMTP:return t(g,{width:11,height:11});case I.FACEBOOK:case I.FACEBOOK_CATALOG:case I.MESSENGER:return t(p,{width:11,height:11});case I.INSTAGRAM:return t(b,{width:11,height:11});case I.WHATSAPP:return t(u,{width:11,height:11});case I.GMAIL:return t(A,{width:11,height:11});case I.TASKS:return t(m,{width:11,height:11})}})()}))]}))};export{S as AVATAR_SIZE_VS_ICON_SIZE_MAP,y as Avatar,f as BACKGROUND_VS_TEXT_COLOR_MAP,I as MESSAGE_CHANNELS};

package/dist/esm/components/avatar/Avatar.styled.d.ts

@@ -1,6 +0,0 @@
-import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from "./AvatarHelper";
-export declare const AvatarStyle: import("styled-components").StyledComponent<"div", any, {
-    size: SIZE;
-    background: AVATAR_BACKGROUND;
-    type: AVATAR_TYPES;
-}, never>;

package/dist/esm/components/avatar/Avatar.styled.js

@@ -1,10 +0,0 @@
-import r from"styled-components";import{AVATAR_SIZE_MAP as e,AVATAR_TYPES as o,AVATAR_BACKGROUND as t}from"./AvatarHelper.js";import{COLORS as n}from"../../constants/Theme.js";const s=r.div`
-	width: ${r=>e[r.size]+"px"};
-	height: ${r=>e[r.size]+"px"};
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: ${r=>r.type===o.IMAGE?"null":r.background===t.LIGHT?n.background.base:n.background.inverse};
-	border: ${r=>r.background===t.LIGHT?"1px solid "+n.stroke.primary:0};
-	border-radius: 50%;
-`;export{s as AvatarStyle};

package/dist/esm/components/avatar/AvatarHelper.d.ts

@@ -1,21 +0,0 @@
-export declare enum AVATAR_TYPES {
-    IMAGE = "IMAGE",
-    INITIALS = "INITIALS",
-    ICON = "ICON"
-}
-export declare enum SIZE {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE",
-    INBOX = "INBOX"
-}
-export declare enum AVATAR_BACKGROUND {
-    LIGHT = "LIGHT",
-    DARK = "DARK"
-}
-export declare const AVATAR_SIZE_MAP: {
-    SMALL: number;
-    MEDIUM: number;
-    LARGE: number;
-    INBOX: number;
-};

package/dist/esm/components/avatar/AvatarHelper.js

@@ -1 +0,0 @@
-var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK"}(A||(A={}));const M={[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};

package/dist/esm/components/avatar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Avatar';
-export * from './AvatarHelper';

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { CurtainProps } from "../curtain";
-export interface HeaderProps {
-    header: string;
-    subHeader?: string;
-    hideBackButton?: boolean;
-    rightActionButton?: JSX.Element;
-    leftLayout?: JSX.Element;
-    onClickingBackButton?: () => void;
-    secondaryHeader?: JSX.Element;
-    curtainProps?: CurtainProps;
-    curtainZIndex?: number;
-    headerStyles?: React.CSSProperties;
-}
-export declare const BikHeader: React.FC<HeaderProps>;

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

@@ -1 +0,0 @@
-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 c,TitleMedium as o,TitleRegular as a}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}=h,[v,w]=s(!!y);return e(l,Object.assign({style:Object.assign({},O)},{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(c,Object.assign({className:"brand"},{children:m})):i(o,{children:m}),i(a,{children:g})]})]})),i("div",Object.assign({className:"row--flex right-container"},{children:j}))]}),v&&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:()=>{w(!1)}}))})),i("div",{style:{height:20}})]}),null!=f?f:i(t,{})]}))};export{h as BikHeader};

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

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-export interface BikLayoutProps {
-    isLoading: boolean;
-    isFeatureModalEnabled?: boolean;
-    isDisabled?: boolean;
-    hidePadding?: boolean;
-    loadingAnimation?: JSX.Element;
-    height?: string;
-    children?: React.ReactNode;
-    containerStyles?: React.CSSProperties;
-    onClickingCrossOnFeatureModal?: () => void;
-    onUpgrade?: () => void;
-    extraContentForModal?: JSX.Element;
-    type?: 'overflow-within' | 'overflow-body';
-    featureModalProps?: {
-        title?: string;
-        subTitle?: string;
-        showBookADemo?: boolean;
-        demoLink?: string;
-        featureImage?: string;
-    };
-    useFeautureModalV2?: boolean;
-    backgroundColor?: string;
-}
-export declare const BikLayout: React.FC<BikLayoutProps>;

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

@@ -1 +0,0 @@
-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.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export interface BikProfileProps {
-    userName: string;
-    hideLogout?: boolean;
-    photoUrl?: string;
-    isActiveAwayStatus?: boolean;
-    isAvailable?: boolean;
-    onProfileClicked?: () => void;
-    onLogout?: () => void;
-    extraJSX?: JSX.Element;
-}
-export declare const BikProfile: React.FC<BikProfileProps>;

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

@@ -1 +0,0 @@
-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,32 +0,0 @@
-import React from 'react';
-import { Menu } from './SimpleSidebar';
-export interface MenuItem {
-    key: string | number;
-    displayName: string;
-    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    activeIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    hoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    isLastSticky?: boolean;
-    is2ndLastSticky?: boolean;
-    children?: Menu[];
-    showAccessUpgradePanel?: boolean;
-    path?: string;
-    layout?: 'fullScreen' | 'popup' | string | undefined;
-    isNew?: boolean;
-    isLocked?: boolean;
-}
-export interface BikSidebarProps {
-    logoSvg?: JSX.Element;
-    allMenuList: MenuItem[];
-    activeMainMenu: MenuItem;
-    activeSubMenu: Menu;
-    router: any;
-    onClickingMainMenu: (menu: MenuItem) => void;
-    onClickingSubMenu: (subMenu: Menu) => void;
-    onClickingAccessUpgradePanel?: () => void;
-    onClickingPopupMenuItem?: (menu: Menu) => void;
-    popupMinHeight?: number;
-    isNewSidebar?: boolean;
-    onboardingPercentage?: number;
-}
-export declare const BikSidebar: React.FC<BikSidebarProps>;

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

@@ -1 +0,0 @@
-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:f,onClickingSubMenu:j,onClickingAccessUpgradePanel:L,onClickingPopupMenuItem:N,popupMinHeight:C,isNewSidebar:H}=o,[O,P]=l(b),[I,A]=l(),[E,x]=l(w),[B,F]=l(!1),[_,$]=l(),[D,T]=l(),[U,R]=l(),[z,q]=l(null),K=s((()=>k.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[k]);d((()=>{P(b)}),[b]),d((()=>{x(w)}),[w]);const W=r((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&($(void 0),A(void 0),F(!0),P(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?x(null==e?void 0:e.children[0]):x({}),A(void 0),setTimeout((()=>{F(!1)}),1e3))}),[f]),G=r((e=>{var i,n;if(Y(),A(void 0),$(void 0),"popup"==(null==e?void 0:e.layout)){const i=V();i&&T(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=J(t);R(e)}A(e),X()}}),[]),J=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};d((()=>{const e=()=>{const e=V();e&&T(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&&R(window.innerHeight-i)},V=()=>{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}},X=()=>{Y();const e=setTimeout((()=>A(void 0)),1e4);q(e)},Y=()=>{clearTimeout(z)};return e(p,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:u||i(t,{})})),e(g,{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:W,setHandleHoverForFullLayout:G,isDisabled:B,setHoveredComp:A,setPopupMenu:$,mainActiveMenu:O,hoveredComp:I,popupMenu:_})})):i(M,{option:t,index:o,onClickMainMenuLogic:W,setHandleHoverForFullLayout:G,isDisabled:B,setHoveredComp:A,setPopupMenu:$,mainActiveMenu:O,hoveredComp:I,popupMenu:_}),e(n,{children:["popup"===t.layout&&(null===(l=null==_?void 0:_.children)||void 0===l?void 0:l.length)&&i(m,{top:null!=D?D:void 0,menuList:null==_?void 0:_.children,onClickingPopupMenu:e=>{N&&N(e),$(void 0)},onMouseLeaveOnMenu:()=>$(void 0)}),(null===(s=null==I?void 0:I.children)||void 0===s?void 0:s.length)&&i(y,{menuList:null==I?void 0:I.children,activeMenu:E,onMouseEnterOnMenu:()=>Y(),onMouseLeaveOnMenu:()=>{Y(),A(void 0)},left:H?92:88,postion:"fixed",header:I.displayName,theme:"brand",router:S,showAccessUpgradePanel:I.showAccessUpgradePanel,onMenuClick:(e,i)=>{x(e),P(I),A(void 0),$(void 0),i&&j(e)},onUpgrade:L,top:H&&U||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===K?"sticky-menu":1===K?"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:()=>{console.log(";")},"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,110 +0,0 @@
-/// <reference types="react" />
-export declare const GlobalContainer: 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 LoaderWrapper: 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 LoadingMessageWrapper: 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 BikLayoutContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | 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;
-}, 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;
-}, 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;
-}, 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 & {
-    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;
-} & {
-    isDropdownOpen: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UserNameTitleSmall: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const UserAvatarContainer: 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 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;
-}, 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;
-} & {
-    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;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledBodyCaption: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    isAvailable: boolean;
-}, {}, {}>;
-export declare const FeatureModalContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    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>, {}>;