@bikdotai/bik-component-library 0.12.0-bik-layout-beta → 0.14.0-bik-layout-beta

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface BikLayoutProps {
     isLoading: boolean;
-    isFeatureModalEnable?: boolean;
+    isFeatureModalEnabled?: boolean;
     isDisabled?: boolean;
     hidePadding?: boolean;
     loadingAnimation?: JSX.Element;

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

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

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Menu } from './SimpleSidebar';
-export interface MainMenu {
+export interface MenuItem {
     key: string | number;
     displayName: string;
     icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
@@ -9,12 +9,13 @@ export interface MainMenu {
     isLastSticky?: boolean;
     is2ndLastSticky?: boolean;
     children?: Menu[];
+    showAccessUpgradePanel?: boolean;
 }
 export interface BikSidebarProps {
-    allMenuList: MainMenu[];
-    activeMainMenu?: MainMenu;
-    activeSubMenu?: Menu;
-    onClickingMainMenu: (menu: MainMenu) => void;
+    allMenuList: MenuItem[];
+    activeMainMenu: MenuItem;
+    activeSubMenu: Menu;
+    onClickingMainMenu: (menu: MenuItem) => void;
     onClickingSubMenu: (subMenu: Menu) => void;
 }
 export declare const BikSidebar: React.FC<BikSidebarProps>;

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

@@ -1 +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("react"),s=require("../../constants/Theme.js"),t=require("./SidebarStyles.js"),l=require("./SimpleSidebar.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:l,hoverStateIcon:a,isHovered:r}=i,o=n,d=l,c=a;return e.jsx(e.Fragment,{children:t?e.jsx(d,{width:20,height:20}):r?e.jsx(c,{width:20,height:20,color:s.COLORS.surface.standard}):e.jsx(o,{width:20,height:20,color:s.COLORS.surface.standard})})};exports.BikSidebar=s=>{const{allMenuList:r,activeMainMenu:o,activeSubMenu:d,onClickingMainMenu:c,onClickingSubMenu:u}=s,[v,h]=n.useState(null!=o?o:{}),[m,j]=n.useState(),[k,S]=n.useState(null!=d?d:{});return e.jsxs(t.SideBarContainer,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:e.jsx(i.default,{})})),e.jsx(t.SibeBarMenuItem,{children:null==r?void 0:r.map(((i,s)=>{var t,r,o;return e.jsxs(n.Fragment,{children:[e.jsx("div",Object.assign({className:"main--sidebar",onClick:()=>{var e;j(void 0),h(i),c(i),(null===(e=null==i?void 0:i.children)||void 0===e?void 0:e.length)?S(null==i?void 0:i.children[0]):S({})},onMouseOver:()=>{j(i)},onMouseEnter:()=>{j(i)},onMouseLeave:()=>{var e;!(null===(e=null==i?void 0:i.children)||void 0===e?void 0:e.length)&&j(void 0)},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:e.jsxs("div",Object.assign({className:`sidebar-menu-item ${(null==v?void 0:v.key)==i.key?" main-menu-active-class":""}  ${i.isLastSticky?"sticky-menu-int":""} ${i.is2ndLastSticky?"sticky-menu":""}\n                ${i.key==(null==m?void 0:m.key)?"sidebar-menu-item-hover":""}`},{children:[e.jsx(a,{icon:i.icon,isActive:i.key==(null==v?void 0:v.key),activeStateIcon:null!==(t=i.activeIcon)&&void 0!==t?t:{},hoverStateIcon:null!==(r=i.hoverIcon)&&void 0!==r?r:{},isHovered:i.key==(null==m?void 0:m.key)}),e.jsx("div",Object.assign({className:"menu-item-container"},{children:e.jsx("p",Object.assign({className:"menu-item-text "+((null==i?void 0:i.key)===(null==v?void 0:v.key)?"active-menu-item-text":"")},{children:i.displayName}))}))]}),s)}),s),e.jsx(e.Fragment,{children:(null===(o=null==m?void 0:m.children)||void 0===o?void 0:o.length)&&e.jsx(l.SimpleSidebar,{menuList:null==m?void 0:m.children,activeMenu:k,onMouseLeaveOnMenu:()=>j(void 0),left:88,header:m.displayName,theme:"brand",onMenuClick:e=>{S(e),h(m),j(void 0),u(e)}})})]},s)}))})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../assets/icons/Bik_logo.svg.js"),n=require("react"),s=require("../../constants/Theme.js"),t=require("./SidebarStyles.js"),a=require("./SimpleSidebar.js");const l=i=>{const{icon:n,isActive:t,activeStateIcon:a,hoverStateIcon:l,isHovered:r}=i,o=n,d=a,c=l;return e.jsx(e.Fragment,{children:t?e.jsx(d,{width:20,height:20}):r?e.jsx(c,{width:20,height:20,color:s.COLORS.surface.standard}):e.jsx(o,{width:20,height:20,color:s.COLORS.surface.standard})})};exports.BikSidebar=s=>{const{allMenuList:r,activeMainMenu:o,activeSubMenu:d,onClickingMainMenu:c,onClickingSubMenu:u}=s,[v,h]=n.useState(o),[m,j]=n.useState(),[g,k]=n.useState(d);return e.jsxs(t.SideBarContainer,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:e.jsx(i.default,{})})),e.jsx(t.SibeBarMenuItem,{children:null==r?void 0:r.map(((i,s)=>{var t,r,o;return e.jsxs(n.Fragment,{children:[e.jsx("div",Object.assign({className:"main--sidebar",onClick:()=>{var e;j(void 0),h(i),c(i),(null===(e=null==i?void 0:i.children)||void 0===e?void 0:e.length)?k(null==i?void 0:i.children[0]):k({})},onMouseOver:()=>{j(i)},onMouseEnter:()=>{j(i)},onMouseLeave:()=>{var e;!(null===(e=null==i?void 0:i.children)||void 0===e?void 0:e.length)&&j(void 0)},onFocus:()=>{console.log(";")},"aria-hidden":"true"},{children:e.jsxs("div",Object.assign({className:`sidebar-menu-item ${(null==v?void 0:v.key)==i.key?" main-menu-active-class":""}  ${i.isLastSticky?"sticky-menu-int":""} ${i.is2ndLastSticky?"sticky-menu":""}\n                ${i.key==(null==m?void 0:m.key)?"sidebar-menu-item-hover":""}`},{children:[e.jsx(l,{icon:i.icon,isActive:i.key==(null==v?void 0:v.key),activeStateIcon:null!==(t=i.activeIcon)&&void 0!==t?t:{},hoverStateIcon:null!==(r=i.hoverIcon)&&void 0!==r?r:{},isHovered:i.key==(null==m?void 0:m.key)}),e.jsx("div",Object.assign({className:"menu-item-container"},{children:e.jsx("p",Object.assign({className:"menu-item-text "+((null==i?void 0:i.key)===(null==v?void 0:v.key)?"active-menu-item-text":"")},{children:i.displayName}))}))]}),s)}),s),e.jsx(e.Fragment,{children:(null===(o=null==m?void 0:m.children)||void 0===o?void 0:o.length)&&e.jsx(a.SimpleSidebar,{menuList:null==m?void 0:m.children,activeMenu:g,onMouseLeaveOnMenu:()=>j(void 0),left:88,header:m.displayName,theme:"brand",showAccessUpgradePanel:m.showAccessUpgradePanel,onMenuClick:e=>{k(e),h(m),j(void 0),u(e)}})})]},s)}))})]})};

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

@@ -84,6 +84,8 @@ export declare const StyledBodyCaption: import("@emotion/styled").StyledComponen
 export declare const FeatureModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    zIndex?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InnerModalContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;