@bikdotai/bik-component-library 0.0.735-beta.1 → 0.0.736-beta.0

package/dist/esm/components/bik-chatbot/utils/guardrails.d.ts

@@ -1,6 +1,6 @@
-export declare function sanitizeUserInput(text: string): string;
-export declare function injectSafetyPrompt(prompt: string): string;
-export declare function validateOutput(msg: unknown): boolean;
-export declare function validateFunctionCall(fnCall: unknown, allowedFunctions?: Array<{
-    name: string;
-}>): boolean;
+export declare function sanitizeUserInput(text: string): string;
+export declare function injectSafetyPrompt(prompt: string): string;
+export declare function validateOutput(msg: unknown): boolean;
+export declare function validateFunctionCall(fnCall: unknown, allowedFunctions?: Array<{
+    name: string;
+}>): boolean;

package/dist/esm/components/bik-chatbot/utils/markdown.d.ts

@@ -1 +1 @@
-export declare function renderMarkdownLite(text: string): string;
+export declare function renderMarkdownLite(text: string): string;

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

@@ -1,8 +1,8 @@
-import React from 'react';
-export interface AnalyticsAdvisorProps {
-    storeId?: string;
-    height?: string;
-    fullHeight?: boolean;
-}
-export declare const AnalyticsAdvisor: React.FC<AnalyticsAdvisorProps>;
-export default AnalyticsAdvisor;
+import React from 'react';
+export interface AnalyticsAdvisorProps {
+    storeId?: string;
+    height?: string;
+    fullHeight?: boolean;
+}
+export declare const AnalyticsAdvisor: React.FC<AnalyticsAdvisorProps>;
+export default AnalyticsAdvisor;

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

@@ -1,12 +1,12 @@
-/**
- * Content Ideas Demo - Multi-step tool flow
- * getTrends() -> generate 5 ideas -> updateIdeas({ ideas }) -> final JSON reply
- */
-import React from 'react';
-export interface ContentIdeasDemoProps {
-    height?: string;
-    className?: string;
-    conversationId?: string;
-}
-export declare const ContentIdeasDemo: React.FC<ContentIdeasDemoProps>;
-export default ContentIdeasDemo;
+/**
+ * Content Ideas Demo - Multi-step tool flow
+ * getTrends() -> generate 5 ideas -> updateIdeas({ ideas }) -> final JSON reply
+ */
+import React from 'react';
+export interface ContentIdeasDemoProps {
+    height?: string;
+    className?: string;
+    conversationId?: string;
+}
+export declare const ContentIdeasDemo: React.FC<ContentIdeasDemoProps>;
+export default ContentIdeasDemo;

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

@@ -1,17 +1,17 @@
-/**
- * Silent Function Calls Demo - Testing that custom function calls don't show in chat
- *
- * This demonstrates:
- * - Function calls execute silently (no chat bubbles for function execution)
- * - Only final JSON data is displayed (not in chat)
- * - Follows workflow: User Input → Function Call (SILENT) → Handler → Display Data
- * - Perfect for testing the silent function call behavior
- */
-import React from 'react';
-export interface SilentModeDemoProps {
-    height?: string;
-    className?: string;
-    conversationId?: string;
-}
-export declare const SilentModeDemo: React.FC<SilentModeDemoProps>;
-export default SilentModeDemo;
+/**
+ * Silent Function Calls Demo - Testing that custom function calls don't show in chat
+ *
+ * This demonstrates:
+ * - Function calls execute silently (no chat bubbles for function execution)
+ * - Only final JSON data is displayed (not in chat)
+ * - Follows workflow: User Input → Function Call (SILENT) → Handler → Display Data
+ * - Perfect for testing the silent function call behavior
+ */
+import React from 'react';
+export interface SilentModeDemoProps {
+    height?: string;
+    className?: string;
+    conversationId?: string;
+}
+export declare const SilentModeDemo: React.FC<SilentModeDemoProps>;
+export default SilentModeDemo;

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

@@ -1,17 +1,17 @@
-/**
- * Simple Chatbot Demo - Basic text conversation without functions
- *
- * This demonstrates:
- * - Plain text chatbot
- * - No functions or structured data
- * - Basic AI interaction
- * - Web search capability (via Responses API)
- */
-import React from 'react';
-export interface SimpleChatbotDemoProps {
-    height?: string;
-    className?: string;
-    conversationId?: string;
-}
-export declare const SimpleChatbotDemo: React.FC<SimpleChatbotDemoProps>;
-export default SimpleChatbotDemo;
+/**
+ * Simple Chatbot Demo - Basic text conversation without functions
+ *
+ * This demonstrates:
+ * - Plain text chatbot
+ * - No functions or structured data
+ * - Basic AI interaction
+ * - Web search capability (via Responses API)
+ */
+import React from 'react';
+export interface SimpleChatbotDemoProps {
+    height?: string;
+    className?: string;
+    conversationId?: string;
+}
+export declare const SimpleChatbotDemo: React.FC<SimpleChatbotDemoProps>;
+export default SimpleChatbotDemo;

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

@@ -1,16 +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;
+/**
+ * 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

@@ -1,17 +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;
+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

@@ -1,61 +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;
-}
+/**
+ * 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.d.ts

@@ -1,16 +1,16 @@
-import React from 'react';
-import { CurtainProps } from '@src/components/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;
-    dataTest?: string;
-}
-export declare const BikHeader: React.FC<HeaderProps>;
+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;
+    dataTest?: string;
+}
+export declare const BikHeader: React.FC<HeaderProps>;

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

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

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

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

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

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