@bikdotai/bik-component-library 0.0.786-beta.0 → 0.0.786-beta.10

package/dist/cjs/components/ProgressChecklist/ProgressChecklist.d.ts

@@ -33,6 +33,8 @@ export interface SingleChecklistItemType {
     buttonDisabled?: boolean;
     hideRedirectButton?: boolean;
     hideSetupButton?: boolean;
+    /** Custom node to render in place of the default setup button. */
+    customSetupButton?: React.ReactNode;
 }
 export interface ProgressChecklistProps {
     header?: string;

package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var r=require("../../assets/icons/chevronRight.svg.js"),l=require("../../assets/icons/info.svg.js"),n=require("react"),o=require("../../constants/Theme.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),g=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),u=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=v=>{let{header:y,subheader:b,items:m=[],progressBarColor:T,headerAction:f,showProgressBar:S=!0,noBorder:O=!1}=v;const[k,A]=n.useState(m);n.useEffect((()=>{A(m)}),[m]);const I=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?I/q*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:y}),f&&e.jsx("div",{children:f})]})),e.jsx(j.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:b}))]}),S&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(g.ProgressBarV2,{progress:Math.round(B),type:g.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:o.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:o.COLORS.content.secondary,textAlign:"right"}},{children:[I," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((n=>{var g,j,v,y,b,m,T,f;if("single"===n.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:n.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:n.isCompleted?null!==(g=n.completedIcon)&&void 0!==g?g:e.jsx(s.CompletedChecklistIcon,{}):n.isActive?null!==(j=n.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=n.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!n.isCompleted,isActive:!!n.isActive},{children:n.header})),(null===(y=n.tag)||void 0===y?void 0:y.tagText)&&(n.tag.tooltip?e.jsx(u.Tooltip,Object.assign({},n.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme})}))})):e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:n.subheader})]}),n.isCompleted&&!n.hideRedirectButton&&e.jsx("div",Object.assign({onClick:n.onSetup,style:{cursor:"pointer"}},{children:e.jsx(r.default,{style:{marginLeft:"12px"},width:12,height:12,color:o.COLORS.content.secondary})})),!n.isCompleted&&n.isActive&&!n.hideSetupButton&&e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=n.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=n.buttonType)&&void 0!==m?m:"primary",onClick:n.onSetup,disabled:null!==(T=n.buttonDisabled)&&void 0!==T&&T})})]}),n.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:n.alertText,type:null!==(f=n.alertType)&&void 0!==f?f:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:n.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(l.default,Object.assign({},t))})})]}),n.id);if("multiple"===n.type){const t=n.steps&&n.steps.length>0?n.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${n.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${n.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${n.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${n.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:n},{children:e.jsx(C.default,{steps:t,isStepperActive:n.isActive})}),n.id)}}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var r=require("../../assets/icons/chevronRight.svg.js"),l=require("../../assets/icons/info.svg.js"),n=require("react"),o=require("../../constants/Theme.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),u=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),g=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=v=>{let{header:y,subheader:b,items:m=[],progressBarColor:T,headerAction:S,showProgressBar:f=!0,noBorder:O=!1}=v;const[k,A]=n.useState(m);n.useEffect((()=>{A(m)}),[m]);const I=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?I/q*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:y}),S&&e.jsx("div",{children:S})]})),e.jsx(j.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:b}))]}),f&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(u.ProgressBarV2,{progress:Math.round(B),type:u.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:o.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:o.COLORS.content.secondary,textAlign:"right"}},{children:[I," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((n=>{var u,j,v,y,b,m,T,S;if("single"===n.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:n.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:n.isCompleted?null!==(u=n.completedIcon)&&void 0!==u?u:e.jsx(s.CompletedChecklistIcon,{}):n.isActive?null!==(j=n.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=n.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!n.isCompleted,isActive:!!n.isActive},{children:n.header})),(null===(y=n.tag)||void 0===y?void 0:y.tagText)&&(n.tag.tooltip?e.jsx(g.Tooltip,Object.assign({},n.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme})}))})):e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:n.subheader})]}),n.isCompleted&&!n.hideRedirectButton&&e.jsx("div",Object.assign({onClick:n.onSetup,style:{cursor:"pointer"}},{children:e.jsx(r.default,{style:{marginLeft:"12px"},width:12,height:12,color:o.COLORS.content.secondary})})),!n.isCompleted&&n.isActive&&!n.hideSetupButton&&(n.customSetupButton?n.customSetupButton:e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=n.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=n.buttonType)&&void 0!==m?m:"primary",onClick:n.onSetup,disabled:null!==(T=n.buttonDisabled)&&void 0!==T&&T})}))]}),n.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:n.alertText,type:null!==(S=n.alertType)&&void 0!==S?S:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:n.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(l.default,Object.assign({},t))})})]}),n.id);if("multiple"===n.type){const t=n.steps&&n.steps.length>0?n.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${n.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${n.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${n.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${n.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:n},{children:e.jsx(C.default,{steps:t,isStepperActive:n.isActive})}),n.id)}}))}))]}))};

package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Menu } from './SidebarV2.model';
+export interface MenuItemV2 {
+    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 BikSidebarV2Props {
+    logoSvg?: JSX.Element;
+    allMenuList: MenuItemV2[];
+    activeMainMenu: MenuItemV2;
+    activeSubMenu: Menu;
+    router: any;
+    onClickingMainMenu: (menu: MenuItemV2) => void;
+    onClickingSubMenu: (subMenu: Menu) => void;
+    onClickingAccessUpgradePanel?: () => void;
+    onClickingPopupMenuItem?: (menu: Menu) => void;
+    popupMinHeight?: number;
+    isNewSidebar?: boolean;
+    onboardingPercentage?: number;
+    menuStyle?: React.CSSProperties;
+}
+export declare const BikSidebarV2: React.FC<BikSidebarV2Props>;

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

@@ -0,0 +1 @@
+"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"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o,hoverStateIcon:r,isHovered:l}=i,u=n,d=o,a=r;return e.jsx(e.Fragment,{children:t&&l||t?e.jsx(d,{width:16,height:16,color:s.COLORS.content.primaryInverse}):l?e.jsx(a,{width:16,height:16,color:s.COLORS.content.primaryInverse}):e.jsx(u,{width:16,height:16,color:s.COLORS.content.secondaryInverse})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:l,mainActiveMenu:d,hoveredComp:c,popupMenu:v,onMouseLeaveMenuItem:p}=i;var g,h,S,y,k,m;return e.jsx(u.SibeBarV2MenuItem,{children:e.jsxs(u.SidebarMainMenu,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(),onClick:()=>!l&&s(t),onMouseEnter:()=>{r(t)},onMouseLeave:p,onFocus:()=>{},"aria-hidden":"true"},{children:[t.isNew&&e.jsx(u.SidebarNewTag,Object.assign({isLastSticky:t.isLastSticky},{children:"NEW"})),t.isLocked&&e.jsx(u.SidebarLockedChannel,Object.assign({isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky},{children:e.jsx(n.default,{height:16,width:16})})),e.jsxs(u.SidebarMenuItemInner,Object.assign({id:(null===(y=null===(S=t.displayName)||void 0===S?void 0:S.split(" "))||void 0===y?void 0:y.join(""))+"_sub"||t.key.toString()+"_sub",isActive:(null==d?void 0:d.key)===t.key,isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky,isHovered:t.key===(null==c?void 0:c.key),isNew:t.isNew},{children:[e.jsx(a,{icon:t.icon,isActive:t.key==(null==d?void 0:d.key),activeStateIcon:null!==(k=t.activeIcon)&&void 0!==k?k:{},hoverStateIcon:null!==(m=t.hoverIcon)&&void 0!==m?m:{},isHovered:t.key==(null==c?void 0:c.key)||t.key==(null==v?void 0:v.key)}),e.jsx(u.SidebarMenuItemContainer,{children:e.jsx(u.SidebarMenuItemText,Object.assign({isActive:(null==t?void 0:t.key)===(null==d?void 0:d.key)},{children:t.displayName}))})]}),o)]}),o)})};exports.BikSidebarV2=n=>{const{logoSvg:s,allMenuList:a,activeMainMenu:v,activeSubMenu:p,router:g,onClickingMainMenu:h,onClickingSubMenu:S,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:k,popupMinHeight:m,isNewSidebar:M,menuStyle:b}=n,[j,x]=t.useState(v),[L,C]=t.useState(),[w,I]=t.useState(p),[f,O]=t.useState(!1),[H,N]=t.useState(),[B,P]=t.useState(),[E,q]=t.useState(),A=t.useRef(null),F=t.useMemo((()=>a.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[a]);t.useEffect((()=>{x(v)}),[v]),t.useEffect((()=>{I(p)}),[p]);const V=t.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(N(void 0),C(void 0),O(!0),x(e),e.path||h(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?I(null==e?void 0:e.children[0]):I({}),C(void 0),setTimeout((()=>{O(!1)}),1e3))}),[h]),_=t.useCallback((e=>{var i,n;if(D(),C(void 0),N(void 0),"popup"==(null==e?void 0:e.layout)){const i=z();i&&P(i),N(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 i=R(t,e);q(i)}C(e)}}),[]),R=(e,i)=>{const n=e.getBoundingClientRect();let t=n.top;if(window.innerHeight<=768)return t;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;t=n.top+e-200}return t};t.useEffect((()=>{const e=()=>{const e=z();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&&q(window.innerHeight-i)},D=t.useCallback((()=>{A.current&&(clearTimeout(A.current),A.current=null)}),[]),U=t.useCallback((()=>{D(),A.current=setTimeout((()=>{C(void 0),N(void 0)}),150)}),[D]),z=()=>{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!=m?m:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e.jsxs(u.SideBarV2Container,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:s||e.jsx(i.default,{})})),e.jsxs(u.MainSideBarV2MenuWrapper,Object.assign({style:b},{children:[null==a?void 0:a.map(((i,n)=>{var o,s;return e.jsxs(t.Fragment,{children:[i.path?e.jsx(r.NavigationHyperlink,Object.assign({href:i.path,router:g},{children:e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:f,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:H,onMouseLeaveMenuItem:U})})):e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:f,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:H,onMouseLeaveMenuItem:U}),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(l.SidebarV2Popup,{top:null!=B?B:void 0,menuList:null==H?void 0:H.children,onClickingPopupMenu:e=>{k&&k(e),N(void 0)},onMouseEnterOnMenu:D,onMouseLeaveOnMenu:U}),(null===(s=null==L?void 0:L.children)||void 0===s?void 0:s.length)&&e.jsx(d.SimpleSidebarV2,{menuList:null==L?void 0:L.children,width:200,activeMenu:w,onMouseEnterOnMenu:D,onMouseLeaveOnMenu:()=>C(void 0),left:78,postion:"fixed",header:L.displayName,theme:"brand",router:g,showAccessUpgradePanel:L.showAccessUpgradePanel,onMenuClick:(e,i)=>{I(e),x(L),C(void 0),N(void 0),i&&S(e)},onUpgrade:y,top:M&&E||0,isNewSidebar:M})]})]},n)})),"number"==typeof n.onboardingPercentage&&e.jsx(u.SibeBarV2MenuItem,{children:e.jsx(u.SidebarMainMenu,{children:e.jsx(u.SidebarMenuItemInner,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===F?0:1===F?64:128},{children:e.jsx(o.default,{percentage:n.onboardingPercentage,width:48})}))})})]}))]})};

package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2.model.d.ts

@@ -0,0 +1,27 @@
+export interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+export type SidebarV2Theme = 'brand' | 'white';
+export interface SimpleSidebarV2Props {
+    menuList: Menu[];
+    activeMenu: Menu;
+    theme: SidebarV2Theme;
+    showAccessUpgradePanel?: boolean;
+    header?: string;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    postion?: 'fixed' | 'sticky';
+    top?: number;
+    router: any;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
+    onUpgrade?: () => void;
+    isNewSidebar?: boolean;
+}

package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Menu } from './SidebarV2.model';
+export interface SidebarV2PopupI {
+    menuList: Menu[];
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    top?: number;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onClickingPopupMenu: (menuSelected: Menu, reDirect?: boolean) => void;
+}
+export declare const SidebarV2Popup: React.FC<SidebarV2PopupI>;

package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Popup.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../TypographyStyle.js"),s=require("./SidebarV2Styles.js");exports.SidebarV2Popup=i=>{const{top:t,menuList:r,zIndex:o,left:a,onMouseLeaveOnMenu:u,onMouseEnterOnMenu:l,onClickingPopupMenu:d}=i;return e.jsx(s.SidebarV2PopupContainer,Object.assign({top:t,theme:"white",zIndex:o,left:null!=a?a:78,postion:"fixed"},{children:e.jsx("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseEnter:l,onMouseLeave:u},{children:null==r?void 0:r.map(((s,i)=>e.jsxs("div",Object.assign({className:"each-menu",style:{borderBottom:i==r.length-1?"none":void 0},onClick:()=>d(s)},{children:[e.jsx(n.TitleRegular,Object.assign({style:{fontSize:14}},{children:s.displayName})),e.jsx(n.BodySecondary,Object.assign({style:{fontSize:12}},{children:s.description}))]}),i)))}),"_sub-menu")}))};

package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.d.ts

@@ -0,0 +1,44 @@
+import { SidebarV2Theme } from './SidebarV2.model';
+export declare const SideBarV2Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainSideBarV2MenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SibeBarV2MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarMainMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarNewTag: import("styled-components").StyledComponent<"div", any, {
+    isLastSticky?: boolean | undefined;
+}, never>;
+export declare const SidebarLockedChannel: import("styled-components").StyledComponent<"div", any, {
+    isLastSticky?: boolean | undefined;
+    is2ndLastSticky?: boolean | undefined;
+}, never>;
+export declare const SidebarMenuItemInner: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+    isHovered?: boolean | undefined;
+    isNew?: boolean | undefined;
+    isLastSticky?: boolean | undefined;
+    is2ndLastSticky?: boolean | undefined;
+    stickyBottom?: number | undefined;
+}, never>;
+export declare const SidebarMenuItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidebarMenuItemText: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+} & {
+    isActive?: boolean | undefined;
+}, never>;
+export declare const SimpleSidebarV2Container: import("styled-components").StyledComponent<"div", any, {
+    postion?: "fixed" | "sticky" | undefined;
+    top?: number | undefined;
+    theme: SidebarV2Theme;
+    width?: number | undefined;
+    zIndex?: number | undefined;
+    left?: number | undefined;
+    isNewSidebar?: boolean | undefined;
+}, never>;
+export declare const SidebarV2PopupContainer: import("styled-components").StyledComponent<"div", any, {
+    postion?: "fixed" | "sticky" | undefined;
+    top?: number | undefined;
+    theme: SidebarV2Theme;
+    zIndex?: number | undefined;
+    left?: number | undefined;
+    bottom?: number | undefined;
+}, never>;

package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js

@@ -0,0 +1,282 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const n=o.default.div`
+	background-color: #28034e;
+	width: 72px;
+	justify-content: space-between;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	overflow-y: hidden;
+	height: 100vh;
+
+	.bik-header-logo {
+		padding: 8px 8px 0 8px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		cursor: pointer;
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: container;
+		}
+	}
+`,a=o.default.div`
+	margin: 0px 0px 16px;
+`,d=o.default.div``,s=o.default.div`
+	position: relative;
+	padding: 0px 6px;
+	margin-bottom: 6px;
+	> * {
+		gap: 4px;
+	}
+`,p=o.default.div`
+	position: absolute;
+	right: 5px;
+	background: ${i.COLORS.stroke.warning.vibrant} !important;
+	font-size: 7.7px;
+	font-family: 'Inter';
+	line-height: 10px;
+	padding: 2px 9.27px 2px 9.27px;
+	border-radius: 16px 16px 0px 16px;
+	background: ${i.COLORS.background.inverse};
+	${t=>{let{isLastSticky:i}=t;return i&&e.css`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}}
+`,b=o.default.div`
+	position: absolute;
+	right: 10px;
+	margin-top: -5px;
+	${t=>{let{isLastSticky:i}=t;return i&&e.css`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}}
+	${t=>{let{is2ndLastSticky:i}=t;return i&&e.css`
+			@media (min-height: 768px) {
+				bottom: 48px;
+				z-index: 1;
+			}
+		`}}
+`,c=o.default.div`
+	display: flex;
+	flex-direction: column;
+	border-radius: 10px;
+	align-items: center;
+	justify-content: space-around;
+	cursor: pointer;
+	> * {
+		gap: 10px;
+	}
+	padding: 8px;
+
+	${t=>{let{isNew:i}=t;return i&&e.css`
+			padding-top: 14px;
+		`}}
+
+	${t=>{let{isActive:r}=t;return r&&e.css`
+			border-radius: 8px;
+			background-color: ${i.BASE_COLORS.brand[850]};
+			color: ${i.COLORS.content.primaryInverse};
+			box-shadow: inset 0 0 0 1px ${i.COLORS.stroke.brandSubdued};
+		`}}
+
+	${t=>{let{isHovered:r}=t;return r&&e.css`
+			background: ${i.COLORS.background.brandHovered};
+			border-radius: 8px;
+		`}}
+
+	${t=>{let{isActive:r,isHovered:o}=t;return r&&o&&e.css`
+			background-color: ${i.BASE_COLORS.brand[700]};
+		`}}
+
+
+	${t=>{let{isLastSticky:i}=t;return i&&e.css`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 64px;
+				width: 100%;
+			}
+		`}}
+
+	${t=>{let{is2ndLastSticky:i}=t;return i&&e.css`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 0px;
+				width: 100%;
+			}
+		`}}
+
+	${t=>{let{stickyBottom:i}=t;return void 0!==i&&e.css`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: ${i}px;
+				width: 100%;
+			}
+		`}}
+`,u=o.default.div`
+	display: flex;
+	flex-direction: row;
+	cursor: pointer;
+`,x=o.default(t.BodyTiny)`
+	user-select: none;
+	color: ${e=>{let{isActive:t}=e;return t?i.COLORS.content.primaryInverse:i.COLORS.content.secondaryInverse}};
+	margin-bottom: 0px;
+	text-align: center;
+`,l=o.default.div`
+	.transform-class {
+		position: relative;
+		animation: animatebottom 0.2s;
+		transition-timing-function: ease-out;
+	}
+	@keyframes animatebottom {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+	.sidebar-right-menu {
+		position: ${e=>e.postion?e.postion:"sticky"};
+		top: ${e=>e.top?e.top:0}px;
+		left: ${e=>e.left?e.left:0}px; //72
+		width: ${e=>e.width?e.width:240}px;
+		z-index: ${e=>e.zIndex?e.zIndex:2};
+		background-color: ${e=>"brand"==e.theme?i.COLORS.background.inverse:i.COLORS.surface.standard};
+		height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
+		display: flex;
+		flex-direction: column;
+		padding: 4px;
+		border-radius: ${e=>e.isNewSidebar?"8px":""};
+
+		.sidebar-bridge {
+			position: absolute;
+			right: 100%;
+			top: 0;
+			width: 6px;
+			height: 100%;
+		}
+	}
+
+	.sub-child-menu {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
+		cursor: pointer;
+		background: ${e=>"brand"==e.theme?i.COLORS.background.inverse:"transparent"};
+		border-radius: 4px;
+		.sub-child-text {
+			color: ${e=>"brand"==e.theme?i.COLORS.surface.standard:""};
+			margin-bottom: 0px;
+			padding: 8px 12px;
+			font-size: ${i.FONTS.caption.fontSize}px;
+			line-height: ${i.FONTS.caption.lineHeight}px;
+			font-weight: ${i.FONTS.caption.fontWeight};
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.sub-child-new-tag {
+			padding: 2px 9px 2px 9px;
+			border-radius: 16px;
+			background-color: rgba(254, 192, 45, 1);
+			font-family: Inter;
+			font-size: 7px;
+			font-weight: 600;
+			line-height: 10px;
+			color: rgba(40, 3, 78, 1);
+		}
+		.sub-child-active-text {
+			display: none;
+		}
+		.active-bold-weight {
+			font-weight: 600;
+			color: ${e=>e.isNewSidebar?i.COLORS.background.warning.vibrant:""};
+		}
+		.sub-child-active-menu-style {
+			color: ${e=>e.isNewSidebar?i.COLORS.background.warning.vibrant:""};
+		}
+	}
+	.sub-child-menu:hover {
+		background: ${e=>"brand"==e.theme?i.COLORS.background.brandHovered:i.COLORS.background.base};
+		border-radius: 4px;
+	}
+	.sub-child-active-menu {
+		background: ${e=>"brand"==e.theme?i.COLORS.background.brandHovered:i.COLORS.background.base};
+		border-radius: 4px;
+		border: ${e=>"brand"==e.theme?`1px solid ${i.COLORS.stroke.brandSubdued}`:"none"};
+		.sub-child-active-text {
+			background: ${e=>"brand"==e.theme?i.COLORS.stroke.brandSubdued:i.COLORS.background.warning.vibrant};
+		}
+	}
+	.sub-child-active-menu:hover {
+		background: ${e=>"brand"==e.theme?i.COLORS.background.inverseLight:i.COLORS.background.base};
+		border-radius: 4px;
+		border: ${e=>"brand"==e.theme?`1px solid ${i.COLORS.stroke.brandSubdued}`:"none"};
+		.sub-child-active-text {
+			background: ${e=>"brand"==e.theme?i.COLORS.stroke.brandSubdued:i.COLORS.background.warning.vibrant};
+		}
+	}
+	.sub-child-display-name {
+		padding: 14px 12px;
+		color: ${e=>"brand"==e.theme?i.COLORS.content.secondaryInverse:i.COLORS.text.secondary};
+	}
+	.lower-sticky-panel {
+		position: ${e=>e.isNewSidebar?"relative":"absolute"};
+		bottom: ${e=>e.isNewSidebar?"":"16px"};
+		margin-top: ${e=>e.isNewSidebar?"auto":""};
+		margin-bottom: ${e=>e.isNewSidebar?"16px":""};
+		.title-text {
+			padding: 8px 12px;
+			text-align: center;
+		}
+		.upgrade-button {
+			margin: auto;
+		}
+	}
+	.sidebar-skeleton {
+		padding: 8px;
+	}
+`,g=o.default.div`
+	.sidebar-right-menu {
+		border-radius: 8px;
+		border: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);
+		box-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);
+		position: ${e=>e.postion?e.postion:"sticky"};
+		top: ${e=>e.top?e.top:void 0}px;
+		bottom: 10px;
+		left: ${e=>e.left?e.left:0}px; //72
+		z-index: ${e=>e.zIndex?e.zIndex:2};
+		background-color: ${e=>"brand"==e.theme?"#381062":i.COLORS.surface.standard};
+		display: flex;
+		flex-direction: column;
+		padding: 4px;
+		gap: 4px;
+		min-height: 100px;
+		overflow-y: auto;
+	}
+	.each-menu {
+		padding: 8px;
+		gap: 4px;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		border-bottom: 0.5px solid #e0e0e0;
+		cursor: pointer;
+		max-width: 320px;
+		&:hover {
+			background-color: ${i.COLORS.background.base};
+			border-radius: 8px;
+		}
+	}
+`;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=u,exports.SidebarMenuItemInner=c,exports.SidebarMenuItemText=x,exports.SidebarNewTag=p,exports.SidebarV2PopupContainer=g,exports.SimpleSidebarV2Container=l;

package/dist/cjs/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SimpleSidebarV2Props } from './SidebarV2.model';
+export declare const SimpleSidebarV2: React.FC<SimpleSidebarV2Props>;

package/dist/cjs/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("react"),i=require("../../../constants/Theme.js"),a=require("../../button/Button.js"),n=require("../../navigation-hyperlink/NavigationHyperlink.js"),t=require("../../TypographyStyle.js"),r=require("./SidebarV2Styles.js");exports.SimpleSidebarV2=l=>{const{menuList:d,activeMenu:c,theme:o,showAccessUpgradePanel:u=!1,header:p,width:b,zIndex:h,left:j,postion:m,top:v,router:g,onMouseLeaveOnMenu:x,onMouseEnterOnMenu:y,onMenuClick:N,onUpgrade:O,isNewSidebar:k}=l,[S,w]=s.useState(c),M=(s,i)=>e.jsxs("div",Object.assign({className:"sub-child-menu  "+((null==S?void 0:S.key)==(null==s?void 0:s.key)?"sub-child-active-menu":""),onClick:()=>{w(s),N(s,!s.page)},"aria-hidden":"true"},{children:[e.jsx("span",{className:(null==S?void 0:S.key)==(null==s?void 0:s.key)&&"brand"==o?"sub-child-active-text":""}),e.jsx(t.BodyCaption,Object.assign({className:"sub-child-text "+((null==S?void 0:S.key)==(null==s?void 0:s.key)&&"white"==o?"active-bold-weight":"")},{children:null==s?void 0:s.displayName})),s.isNew&&e.jsx("div",Object.assign({className:"sub-child-new-tag"},{children:"NEW"}))]}),i);return e.jsx(r.SimpleSidebarV2Container,Object.assign({width:b,zIndex:h,left:j,theme:o,postion:m,top:v,isNewSidebar:k},{children:e.jsxs("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:x,onMouseEnter:y},{children:[e.jsx("div",{className:"sidebar-bridge"}),e.jsxs("div",{children:[!k&&e.jsx(t.BodyCaption,Object.assign({className:"sub-child-display-name"},{children:p})),null==d?void 0:d.map(((s,i)=>s.page?e.jsx(n.NavigationHyperlink,Object.assign({href:s.page,router:g},{children:M(s,i)})):M(s,i)))]}),u&&e.jsxs("div",Object.assign({className:"lower-sticky-panel"},{children:[e.jsx(t.TitleSmall,Object.assign({className:"title-text",style:{color:i.COLORS.surface.standard}},{children:"Upgrade plan to access this feature."})),e.jsx(a.Button,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>O?O():""})]}))]}),"_sub-menu")}))};

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/bik-layout/index.d.ts

@@ -3,6 +3,8 @@ export * from './BikLayout';
 export * from './BikProfile';
 export * from './SimpleSidebar';
 export * from './BikSidebar';
+export * from './BikSidebarV2/BikSidebarV2';
+export * from './BikSidebarV2/SidebarV2.model';
 export * from './FeatureModal';
 export * from './SidebarSkeleton';
 export * from './ShowShopifyRestrictedModal';

package/dist/cjs/components/button/Button.styled.d.ts

@@ -10,7 +10,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     inverse?: boolean | undefined;
     disabled?: boolean | undefined;
     matchParentWidth?: boolean | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     darkMode?: boolean | undefined;
     activated?: boolean | undefined;
     error?: boolean | undefined;

package/dist/cjs/components/button/model.d.ts

@@ -66,7 +66,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     matchParentWidth?: boolean;
     subtitle?: string;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     darkMode?: boolean;
     activated?: boolean;
     error?: boolean;

package/dist/cjs/components/button/themes.d.ts

@@ -8,7 +8,7 @@ export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?:
     color?: string | undefined;
 }, never>;
 export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
-export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
 export declare const getLinearGradientValue: (size: Size) => string;
 /**
  * Adjusts the brightness of a given hex color by a specified percentage.

package/dist/cjs/components/country-code-picker/CountryCodePicker.d.ts

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import React from 'react';
 import { CountryCode } from "./CountryCodePicker.modal";
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/cjs/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     /**
      * Callback function when a country is selected
      */

package/dist/cjs/components/dropdown/Dropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),n=require("../../constants/Theme.js"),i=require("../../assets/icons/chevronDown.svg.js"),l=require("../input/Input.js"),r=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),a=require("./DropdownPopover/index.js"),d=require("./OpenedDropdown/utils/iterationOnOptions.js");function c(){}const u=u=>{var p,h,v,g,x,{placeHolder:w,size:j,onSelect:O,defaultOptions:f,disabled:b,noErrorHint:S,placeHolderHeight:I,showPlaceholderWhenSelected:m=!1,inputStyle:y={},inputType:C="default",onDeleteChip:H,truncatedText:D,showLeadingIconInPlaceholder:E=!1,showTrailingIconPlaceholder:P=!1,showLabelsOnMoreHover:T=!1,value:q,showSelected:L=!1}=u,M=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[W,_]=o.useState(!1),[R,k]=o.useState(!1),z=null!=j?j:"default",A=o.useRef(),[F,N]=o.useState(null!=f?f:[]);o.useEffect((()=>{var e;const t=[];null===(e=null==M?void 0:M.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),N([...t])}),[M.options]),o.useEffect((()=>{f&&N([...f])}),[f]);const U=d.getSelectedOptionsAsText(F),V=m?w:null!==(p=null!=U?U:w)&&void 0!==p?p:"Select an option",B=M.buttonWidth,G=null!==(h=null!=B?B:M.width)&&void 0!==h?h:"100%",J=null!==(v=M.dropdownWidth)&&void 0!==v?v:G;return t.jsx(t.Fragment,{children:t.jsx(r.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:I||("x-small"===z?24:"small"===z?32:48),width:G},B?{maxWidth:B}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===z?"4px 8px":"6px 8px",backgroundColor:L&&void 0!==q?n.COLORS.background.positive.light:R?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),y),input:{minHeight:"100%",maxWidth:"100%",color:L&&void 0!==q?n.COLORS.content.positive:"inherit"}}},{children:t.jsx("div",Object.assign({onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:M.width?{width:M.width}:void 0},{children:t.jsxs(a.DropdownPopover,Object.assign({"data-test":M["data-test"],ref:A,onSelect:function(e){Array.isArray(e)?N([...e]):N([e]),null==O||O(e)},disabled:b,onDropdownVisbilityChange:e=>_(e)},M,{width:J},{children:["default"==C&&t.jsx(l.Input,{version:M.version,noErrorHint:S,state:b?"disabled":"none",value:void 0===q?V:q,errorMessage:M.error,variant:z,placeholder:null!=w?w:"Select an option",onChangeText:c,leftIcon:E&&(null===(g=F[0])||void 0===g?void 0:g.leadingIcon)?{icon:()=>{var e;return t.jsx(t.Fragment,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t.jsxs("div",Object.assign({style:{display:"flex"}},{children:[P&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),t.jsx(i.default,{style:{transform:W?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"x-small"===z?16:"small"===z?20:24,height:"x-small"===z?16:"small"===z?20:24,color:L?n.COLORS.content.positive:n.COLORS.content.primary})]}))}},truncateText:null==D||D}),"chip"==C&&t.jsx(s.default,{placeholder:null!=w?w:"Select options",chips:F,onDeleteChip:e=>{null==H||H(e)},errorMessage:M.error,isDropdownOpened:W,sizeToUse:z,containerStyle:{width:null!==(x=M.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:T})]}))}))}))})};u.displayName="Dropdown",exports.Dropdown=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),a=require("./DropdownPopover/index.js"),d=require("./OpenedDropdown/utils/iterationOnOptions.js");function c(){}const u=u=>{var p,h,v,g,O,{placeHolder:x,size:w,onSelect:j,defaultOptions:S,disabled:b,noErrorHint:f,placeHolderHeight:I,showPlaceholderWhenSelected:m=!1,inputStyle:y={},inputType:C="default",onDeleteChip:L,truncatedText:H,showLeadingIconInPlaceholder:D=!1,showTrailingIconPlaceholder:P=!1,showLabelsOnMoreHover:T=!1,value:q,showSelected:E=!1}=u,R=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[M,W]=n.useState(!1),[_,k]=n.useState(!1),z=null!=w?w:"default",A=n.useRef(),[F,B]=n.useState(null!=S?S:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==R?void 0:R.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),B([...t])}),[R.options]),n.useEffect((()=>{S&&B([...S])}),[S]);const N=d.getSelectedOptionsAsText(F),U=m?x:null!==(p=null!=N?N:x)&&void 0!==p?p:"Select an option",V=R.buttonWidth,G=null!==(h=null!=V?V:R.width)&&void 0!==h?h:"100%",J=null!==(v=R.dropdownWidth)&&void 0!==v?v:G;return t.jsx(t.Fragment,{children:t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:I||("x-small"===z?24:"small"===z?32:48),width:G},V?{maxWidth:V}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===z?"4px 8px":"6px 8px",backgroundColor:"3.0"===R.version?M||_?o.COLORS.surface.hovered:o.COLORS.surface.standard:E&&void 0!==q?o.BASE_COLORS.positive[100]:_?o.COLORS.background.inactive:o.COLORS.surface.standard,transition:"background-color 0.3s ease"}),y),input:{minHeight:"100%",maxWidth:"100%",color:E&&void 0!==q?o.COLORS.content.positive:"inherit"}}},{children:t.jsx("div",Object.assign({onMouseEnter:()=>k(!0),onMouseLeave:()=>k(!1),style:R.width?{width:R.width}:void 0},{children:t.jsxs(a.DropdownPopover,Object.assign({"data-test":R["data-test"],ref:A,onSelect:function(e){Array.isArray(e)?B([...e]):B([e]),null==j||j(e)},disabled:b,onDropdownVisbilityChange:e=>W(e)},R,{width:J},{children:["default"==C&&t.jsx(r.Input,{version:R.version,noErrorHint:f,state:b?"disabled":"none",value:void 0===q?U:q,errorMessage:R.error,variant:z,placeholder:null!=x?x:"Select an option",onChangeText:c,leftIcon:D&&(null===(g=F[0])||void 0===g?void 0:g.leadingIcon)?{icon:()=>{var e;return t.jsx(t.Fragment,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t.jsxs("div",Object.assign({style:{display:"flex"}},{children:[P&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),t.jsx(i.default,{style:{transform:M?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"x-small"===z?16:"small"===z?20:24,height:"x-small"===z?16:"small"===z?20:24,color:E?o.COLORS.content.positive:o.COLORS.content.primary})]}))}},truncateText:null==H||H}),"chip"==C&&t.jsx(s.default,{placeholder:null!=x?x:"Select options",chips:F,onDeleteChip:e=>{null==L||L(e)},errorMessage:R.error,isDropdownOpened:M,sizeToUse:z,containerStyle:{width:null!==(O=R.width)&&void 0!==O?O:"100%",cursor:"pointer"},showLabelsOnMoreHover:T})]}))}))}))})};u.displayName="Dropdown",exports.Dropdown=u;

package/dist/cjs/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),n=require("react-popper"),r=require("../../dropShadow/DropShadow.js"),l=require("../../tooltips/Tooltip.js"),i=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(t).default.forwardRef(((a,d)=>{var{children:p,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w,isChildLoading:b,forceOpen:g}=a,h=e.__rest(a,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const f=d,[O,D]=t.useState(!1),[x,y]=t.useState(null),[S,C]=t.useState(null),m=t.useRef(null),{styles:q,attributes:E}=n.usePopper(x,S,{placement:h.placement,strategy:h.strategy}),R=e=>{var o,t;"2.0"===u&&h.isMultiSelect&&e&&(null===(o=h.onSelect)||void 0===o||o.call(h,[...e])),D(!1),null===(t=null==h?void 0:h.onClose)||void 0===t||t.call(h)};t.useImperativeHandle(f,(()=>({openDropdown:O})),[]),t.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=O)}),[O]),t.useEffect((()=>{null==c||c(O)}),[O]);const _=()=>{var e;return o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:y},{children:[o.jsx(i.OverLapAbs,Object.assign({ref:m,allowEvents:h.allowEvents,disabled:h.disabled,onClick:e=>{var o;null===(o=h.onDropdownOpen)||void 0===o||o.call(h),O?(D(!1),e.preventDefault()):h.disabled||D(!0)},isChildLoading:b},{children:h.allowEvents?p:null})),h.allowEvents?null:p]})),(O||g)&&o.jsx(i.OpenDropdownContainer,Object.assign({ref:C,style:Object.assign(Object.assign({},q.popper),{zIndex:null!==(e=h.dropdownZIndex)&&void 0!==e?e:3})},E.popper,{"data-test":h["data-test"]},{children:o.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},h,{onSelect:e=>{var o;"2.0"===u&&h.isMultiSelect||(null===(o=h.onSelect)||void 0===o||o.call(h,e),D(!1))},onClose:R,version:u,headerRef:m,zeroState:null==h?void 0:h.zeroState,isDraggable:h.isDraggable,onOptionsReorder:h.onOptionsReorder}))}))}))]})};return o.jsx(o.Fragment,{children:O||g||void 0===v?_():o.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":h["data-test"]},{children:_()}))}))})}));d.displayName="DropdownPopover",exports.DropdownPopover=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),n=require("react-popper"),r=require("../../dropShadow/DropShadow.js"),s=require("../../tooltips/Tooltip.js"),i=require("../../../constants/Theme.js"),l=require("../Common.styled.js"),a=require("../OpenedDropdown/components/OpennedDropdown.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=d(t).default.forwardRef(((d,p)=>{var{children:c,onDropdownVisbilityChange:u,version:v="1.0",tooltipContent:j,tooltipDirection:b,showTooltipArrow:w,isChildLoading:g,forceOpen:O}=d,h=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const f=p,[D,S]=t.useState(!1),[C,x]=t.useState(!1),[y,m]=t.useState(null),[q,R]=t.useState(null),E=t.useRef(null),{styles:L,attributes:_}=n.usePopper(y,q,{placement:h.placement,strategy:h.strategy}),M=e=>{var o,t;"2.0"===v&&h.isMultiSelect&&e&&(null===(o=h.onSelect)||void 0===o||o.call(h,[...e])),S(!1),null===(t=null==h?void 0:h.onClose)||void 0===t||t.call(h)};t.useImperativeHandle(f,(()=>({openDropdown:D})),[]),t.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=D)}),[D]),t.useEffect((()=>{null==u||u(D)}),[D]);const T=()=>{var e;return o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:Object.assign({position:"relative"},"3.0"===v&&{backgroundColor:D||C?i.COLORS.surface.hovered:i.COLORS.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}),ref:m,onMouseEnter:"3.0"===v?()=>x(!0):void 0,onMouseLeave:"3.0"===v?()=>x(!1):void 0},{children:[o.jsx(l.OverLapAbs,Object.assign({ref:E,allowEvents:h.allowEvents,disabled:h.disabled,onClick:e=>{var o;null===(o=h.onDropdownOpen)||void 0===o||o.call(h),D?(S(!1),e.preventDefault()):h.disabled||S(!0)},isChildLoading:g},{children:h.allowEvents?c:null})),h.allowEvents?null:c]})),(D||O)&&o.jsx(l.OpenDropdownContainer,Object.assign({ref:R,style:Object.assign(Object.assign({},L.popper),{zIndex:null!==(e=h.dropdownZIndex)&&void 0!==e?e:3})},_.popper,{"data-test":h["data-test"]},{children:o.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===v?4:8}},{children:o.jsx(a.OpenedDropdown,Object.assign({},h,{onSelect:e=>{var o;"2.0"===v&&h.isMultiSelect||(null===(o=h.onSelect)||void 0===o||o.call(h,e),S(!1))},onClose:M,version:v,headerRef:E,zeroState:null==h?void 0:h.zeroState,isDraggable:h.isDraggable,onOptionsReorder:h.onOptionsReorder}))}))}))]})};return o.jsx(o.Fragment,{children:D||O||void 0===j?T():o.jsx(s.Tooltip,Object.assign({body:j,placement:b,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":h["data-test"]},{children:T()}))}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/errorInfo.svg.js"),n=require("../../../../assets/icons/refresh-purple.svg.js"),s=require("react"),r=require("../../../zeroState/ZeroState.js"),o=require("../../../../hooks/useOutside.js"),i=require("../../../../constants/Theme.js"),l=require("../../hooks/useDropdown.js"),u=require("./description/Description.js"),c=require("./menu/FreeFormMenu.js"),a=require("./menu/MenuList.js"),d=require("./menu/SelectAllMenu.js"),p=require("./multiSelect/MultiSelectDropdownBottomBar.js"),h=require("./OpennedDropdown.styled.js"),f=require("./searchbox/SearchBox.js"),g=require("./searchbox/SearchZeroState.js");const b=304,S=290;exports.OpenedDropdown=v=>{let{options:j,isSearchable:O,isMultiSelect:x,maxSelections:m,width:w,allowFreeForm:y,height:C,onClose:L,onSelect:k,onSearch:D,version:q,skipSorting:E,headerRef:M,hideSelectAll:R,primaryButtonText:I,onInfiniteScroll:T,onMultiSelectClear:A,onDropdownItemClick:B,buttonOptions:F,isSearchLoading:H,isOptionsLoading:Z,optionsErrorState:z,disableSearchOptions:P,disableSearchedOptionExcept:V,useDefaultCursor:W,containerStyle:$={},zeroState:_,isDraggable:K=!1,onOptionsReorder:N,hideClearButton:U=!1}=v;var G;const J=s.useCallback((e=>{if(!K||!x)return e;const t=[],n=[];return e.forEach((e=>{if(e.options)n.push(e);else{e.selected?t.push(e):n.push(e)}})),[...t,...n]}),[K,x]),[Q,X]=s.useState((()=>J(j))),Y=s.useRef(Q),ee=s.useRef(!1),te=s.useRef(N);s.useEffect((()=>{X(J(j))}),[j,J]),s.useEffect((()=>{Y.current=Q}),[Q]),s.useEffect((()=>{te.current=N}),[N]),s.useEffect((()=>()=>{ee.current&&te.current&&te.current(Y.current)}),[]);const ne=s.useCallback((e=>{X(e),"2.0"===q?null==N||N(e):ee.current=!0}),[N,q]),se=K?Q:j,{dropdownOptions:re,search:oe,searchedString:ie,searchedOptions:le,searchError:ue,retrySearch:ce,onApplyHandler:ae,selectAllHandler:de,onMultiSelectClear:pe,onFreeFormSelect:he,onMultiSelectApply:fe,latestDropdownOptionsRef:ge,getSelectedOptions:be,getCurrentSelectionCount:Se}=l.useDropdown(q,se,k,E||K,x,D,P,V,m),[ve,je]=s.useState(null!=w?w:S),[Oe,xe]=s.useState(null),[me,we]=s.useState(-1),ye=s.useRef(null),Ce=s.useRef([]),Le=s.useRef(null);o.useOutside(ye,(()=>{if(xe(null),x&&"2.0"===q){const e=be(ge.current);null==L||L(e)}else null==L||L(re)}),[M,Ce]),s.useEffect((()=>{const e=setTimeout((()=>{ye.current&&ye.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);s.useEffect((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const n=e;n.disabled||t.push(n)}})),t})(ie&&D?le:re);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),we((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Le.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),we((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Le.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&me>=0){e.preventDefault();const n=t[me];n&&(ae(Object.assign(Object.assign({},n),{selected:!n.selected})),B&&B(n))}},t=ye.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[me,ie,le,re,D,ae,B]);const ke=null!=C?C:b,De="number"==typeof ke?O&&x?ke-96:O&&!x||!O&&x?ke-48:ke:ke;s.useEffect((()=>{const e=null!=w?w:S;if(null===Oe)je(e);else if("number"==typeof e)je(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));je(t)}}),[Oe]);const qe=[],Ee=(e=>{if(!x||!m&&0!==m)return e;const t=Se(re)>=m;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((ie&&D?le:re).map((e=>{var t,n;if(ie&&!D){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ie.toLowerCase()))&&(qe.push(!ie||e.label===ie),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ie.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(ie.toLowerCase()))?(qe.push(!ie||e.label===ie),e):null}return e})).filter((e=>null!==e))),Me=!!O&&ie&&0===Ee.length,Re=!ie&&!!Z,Ie=!ie&&!!z&&!Re,Te=!(ie||Ee.length||Re||Ie),Ae=Re||Ie||Te,Be=(null==_?void 0:_.title)||"No results found",Fe=(null==_?void 0:_.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",He=(null==z?void 0:z.title)||"Failed to load options",Ze=(null==z?void 0:z.subTitle)||"Something went wrong while fetching the list. Please try again",ze={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:i.COLORS.background.inverseLight,customIconColor:i.COLORS.background.inverseLight,LeadingIcon:n.default},Pe=Object.assign({IconHolderStyle:{background:i.COLORS.background.negative.light},Icon:e.jsx(t.default,{color:i.COLORS.content.negative,width:24,height:24})},z);Pe.actionButton=Object.assign(Object.assign({},ze),null!==(G=null==z?void 0:z.actionButton)&&void 0!==G?G:{});const Ve=Re?void 0:Ie?Pe:_;return e.jsxs(h.OpennedDropdownContainer,Object.assign({version:q,ref:ye,tabIndex:-1,style:Object.assign(Object.assign({width:ve},$),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:Oe?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!O&&e.jsx(f.SearchBox,{onSearch:oe,version:q}),Ae?e.jsx("div",Object.assign({style:{height:ke,display:"flex",background:i.COLORS.background.base}},{children:e.jsx(r.ZeroState,Object.assign({},null!=Ve?Ve:{},{isLoading:Re,title:Ie?He:Be,subTitle:Ie?Ze:Fe}))})):e.jsxs(h.MenuListContainer,Object.assign({minHeight:ke,maxHeight:De,ref:Le},{children:[!!x&&!Me&&!R&&e.jsx(d.SelectAllMenu,{version:q,options:ie&&D?le:re,onSelect:de}),!y&&Me&&e.jsx(g.SearchZeroState,{isLoading:H,errorMessage:ue,onRetry:ce,height:De,searchedString:ie,containerWidth:w}),y&&(Me||!!qe.length&&qe.every((e=>!1===e)))&&e.jsx(c.FreeFormMenu,{version:q,isMultiSelect:x,onSelect:he,searchedString:ie}),e.jsx(a.MenuList,{onInfiniteScroll:T,onDropdownItemClick:B,version:q,onSelect:ae,showDescription:function(e,t){xe(e&&t?{title:e,description:t}:null)},isMultiSelect:x,options:Ee,useDefaultCursor:W,ref:Ce,focusedIndex:me,isDraggable:K,onOptionsReorder:ne})]})),!!x&&!Ae&&"2.0"!==q&&e.jsx(p.default,{onClear:()=>{pe(),null==A||A()},onApply:fe,list:ie&&D?le:re,buttonText:I,buttonOptions:F,hideClearButton:U})]})),!!Oe&&e.jsx(u.Description,{title:Oe.title,description:Oe.description,version:q})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../assets/icons/errorInfo.svg.js"),n=require("../../../../assets/icons/refresh-purple.svg.js"),s=require("react"),r=require("../../../zeroState/ZeroState.js"),o=require("../../../../hooks/useOutside.js"),i=require("../../../../constants/Theme.js"),l=require("../../hooks/useDropdown.js"),u=require("./description/Description.js"),c=require("./menu/FreeFormMenu.js"),a=require("./menu/MenuList.js"),d=require("./menu/SelectAllMenu.js"),p=require("./multiSelect/MultiSelectDropdownBottomBar.js"),h=require("./OpennedDropdown.styled.js"),f=require("./searchbox/SearchBox.js"),g=require("./searchbox/SearchZeroState.js");const b=304,S=290;exports.OpenedDropdown=v=>{let{options:j,isSearchable:O,isMultiSelect:x,maxSelections:m,width:w,allowFreeForm:y,height:C,onClose:L,onSelect:k,onSearch:D,version:q,skipSorting:E,headerRef:M,hideSelectAll:R,primaryButtonText:I,onInfiniteScroll:T,onMultiSelectClear:A,onDropdownItemClick:B,buttonOptions:F,isSearchLoading:H,isOptionsLoading:Z,optionsErrorState:z,disableSearchOptions:P,disableSearchedOptionExcept:V,useDefaultCursor:W,containerStyle:$={},zeroState:_,isDraggable:K=!1,onOptionsReorder:N,hideClearButton:U=!1}=v;var G;const J=s.useCallback((e=>{if(!K||!x)return e;const t=[],n=[];return e.forEach((e=>{if(e.options)n.push(e);else{e.selected?t.push(e):n.push(e)}})),[...t,...n]}),[K,x]),[Q,X]=s.useState((()=>J(j))),Y=s.useRef(Q),ee=s.useRef(!1),te=s.useRef(N);s.useEffect((()=>{X(J(j))}),[j,J]),s.useEffect((()=>{Y.current=Q}),[Q]),s.useEffect((()=>{te.current=N}),[N]),s.useEffect((()=>()=>{ee.current&&te.current&&te.current(Y.current)}),[]);const ne=s.useCallback((e=>{X(e),"2.0"===q?null==N||N(e):ee.current=!0}),[N,q]),se=K?Q:j,{dropdownOptions:re,search:oe,searchedString:ie,searchedOptions:le,searchError:ue,retrySearch:ce,onApplyHandler:ae,selectAllHandler:de,onMultiSelectClear:pe,onFreeFormSelect:he,onMultiSelectApply:fe,latestDropdownOptionsRef:ge,getSelectedOptions:be,getCurrentSelectionCount:Se}=l.useDropdown(q,se,k,E||K,x,D,P,V,m),[ve,je]=s.useState(null!=w?w:S),[Oe,xe]=s.useState(null),[me,we]=s.useState(-1),ye=s.useRef(null),Ce=s.useRef([]),Le=s.useRef(null);o.useOutside(ye,(()=>{if(xe(null),x&&"2.0"===q){const e=be(ge.current);null==L||L(e)}else null==L||L(re)}),[M,Ce]),s.useEffect((()=>{const e=setTimeout((()=>{ye.current&&ye.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);s.useEffect((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const n=e;n.disabled||t.push(n)}})),t})(ie&&D?le:re);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),we((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Le.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),we((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Le.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&me>=0){e.preventDefault();const n=t[me];n&&(ae(Object.assign(Object.assign({},n),{selected:!n.selected})),B&&B(n))}},t=ye.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[me,ie,le,re,D,ae,B]);const ke=null!=C?C:b,De="number"==typeof ke?O&&x?ke-96:O&&!x||!O&&x?ke-48:ke:ke;s.useEffect((()=>{const e=null!=w?w:S;if(null===Oe)je(e);else if("number"==typeof e)je(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));je(t)}}),[Oe]);const qe=[],Ee=(e=>{if(!x||!m&&0!==m)return e;const t=Se(re)>=m;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((ie&&D?le:re).map((e=>{var t,n;if(ie&&!D){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ie.toLowerCase()))&&(qe.push(!ie||e.label===ie),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(ie.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(ie.toLowerCase()))?(qe.push(!ie||e.label===ie),e):null}return e})).filter((e=>null!==e))),Me=!!O&&ie&&0===Ee.length,Re=!ie&&!!Z,Ie=!ie&&!!z&&!Re,Te=!(ie||Ee.length||Re||Ie),Ae=Re||Ie||Te,Be=(null==_?void 0:_.title)||"No results found",Fe=(null==_?void 0:_.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",He=(null==z?void 0:z.title)||"Failed to load options",Ze=(null==z?void 0:z.subTitle)||"Something went wrong while fetching the list. Please try again",ze={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:i.COLORS.background.inverseLight,customIconColor:i.COLORS.background.inverseLight,LeadingIcon:n.default},Pe=Object.assign({IconHolderStyle:{background:i.COLORS.background.negative.light},Icon:e.jsx(t.default,{color:i.COLORS.content.negative,width:24,height:24})},z);Pe.actionButton=Object.assign(Object.assign({},ze),null!==(G=null==z?void 0:z.actionButton)&&void 0!==G?G:{});const Ve=Re?void 0:Ie?Pe:_;return e.jsxs(h.OpennedDropdownContainer,Object.assign({version:q,ref:ye,tabIndex:-1,style:Object.assign(Object.assign({width:ve},$),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:Oe?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!O&&e.jsx(f.SearchBox,{onSearch:oe,version:q}),Ae?e.jsx("div",Object.assign({style:{height:ke,display:"flex",background:i.COLORS.background.base}},{children:e.jsx(r.ZeroState,Object.assign({},null!=Ve?Ve:{},{isLoading:Re,title:Ie?He:Be,subTitle:Ie?Ze:Fe}))})):e.jsxs(h.MenuListContainer,Object.assign({minHeight:ke,maxHeight:De,ref:Le},{children:[!!x&&!Me&&!R&&e.jsx(d.SelectAllMenu,{version:q,options:ie&&D?le:re,onSelect:de}),!y&&Me&&e.jsx(g.SearchZeroState,{isLoading:H,errorMessage:ue,onRetry:ce,height:De,searchedString:ie,containerWidth:w,version:q}),y&&(Me||!!qe.length&&qe.every((e=>!1===e)))&&e.jsx(c.FreeFormMenu,{version:q,isMultiSelect:x,onSelect:he,searchedString:ie}),e.jsx(a.MenuList,{onInfiniteScroll:T,onDropdownItemClick:B,version:q,onSelect:ae,showDescription:function(e,t){xe(e&&t?{title:e,description:t}:null)},isMultiSelect:x,options:Ee,useDefaultCursor:W,ref:Ce,focusedIndex:me,isDraggable:K,onOptionsReorder:ne})]})),!!x&&!Ae&&"2.0"!==q&&e.jsx(p.default,{onClear:()=>{pe(),null==A||A()},onApply:fe,list:ie&&D?le:re,buttonText:I,buttonOptions:F,hideClearButton:U})]})),!!Oe&&e.jsx(u.Description,{title:Oe.title,description:Oe.description,version:q})]}))};

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts

@@ -1,5 +1,5 @@
 export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {