@bikdotai/bik-component-library 0.0.824-beta.0 → 0.0.825-1

package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BikSidebarV2.js","sources":["../../../../../src/components/bik-layout/BikSidebarV2/BikSidebarV2.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport {\n\tFragment,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './SidebarV2.model';\nimport { SidebarV2Popup } from './SidebarV2Popup';\nimport {\n\tMainSideBarV2MenuWrapper,\n\tSibeBarV2MenuItem,\n\tSidebarLockedChannel,\n\tSidebarMainMenu,\n\tSidebarMenuItemContainer,\n\tSidebarMenuItemInner,\n\tSidebarMenuItemText,\n\tSidebarNewTag,\n\tSideBarV2Container,\n} from './SidebarV2Styles';\nimport { SimpleSidebarV2 } from './SimpleSidebarV2';\n\nexport interface MenuItemV2 {\n\tkey: string | number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' | 'popup' | string | undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarV2Props {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItemV2[];\n\tactiveMainMenu: MenuItemV2;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItemV2) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarV2MenuItemProps {\n\toption: MenuItemV2;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItemV2) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItemV2) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItemV2 | undefined;\n\thoveredComp: MenuItemV2 | undefined;\n\tpopupMenu: MenuItemV2 | undefined;\n\tonMouseLeaveMenuItem: () => void;\n}\n\nexport const BikSidebarV2: React.FC<BikSidebarV2Props> = (\n\tbikSidebarV2Props,\n) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarV2Props;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItemV2>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItemV2>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItemV2>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst hoverLeaveTimerRef = useRef<NodeJS.Timeout | null>(null);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky || menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItemV2) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItemV2) => {\n\t\tcancelHoverLeaveTimer();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') || option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement, option);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (\n\t\ttargetElement: HTMLElement,\n\t\toption: MenuItemV2,\n\t) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tif (option.isLastSticky || option.is2ndLastSticky) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst cancelHoverLeaveTimer = useCallback(() => {\n\t\tif (hoverLeaveTimerRef.current) {\n\t\t\tclearTimeout(hoverLeaveTimerRef.current);\n\t\t\thoverLeaveTimerRef.current = null;\n\t\t}\n\t}, []);\n\n\tconst startHoverLeaveTimer = useCallback(() => {\n\t\tcancelHoverLeaveTimer();\n\t\thoverLeaveTimerRef.current = setTimeout(() => {\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetPopupMenu(undefined);\n\t\t}, 150);\n\t}, [cancelHoverLeaveTimer]);\n\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\treturn (\n\t\t<SideBarV2Container>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarV2MenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t\tonMouseLeaveMenuItem={startHoverLeaveTimer}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\tonMouseLeaveMenuItem={startHoverLeaveTimer}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarV2Popup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={cancelHoverLeaveTimer}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={startHoverLeaveTimer}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebarV2\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\twidth={200}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={cancelHoverLeaveTimer}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setHoveredComp(undefined)}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 78 : 78}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarV2Props.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarV2MenuItem>\n\t\t\t\t\t\t<SidebarMainMenu>\n\t\t\t\t\t\t\t<SidebarMenuItemInner\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tstickyBottom={\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 64\n\t\t\t\t\t\t\t\t\t\t: 128\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarV2Props.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</SidebarMenuItemInner>\n\t\t\t\t\t\t</SidebarMainMenu>\n\t\t\t\t\t</SibeBarV2MenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarV2MenuWrapper>\n\t\t</SideBarV2Container>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon } = iconComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon\n\t\t\t\t\twidth={16}\n\t\t\t\t\theight={16}\n\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Icon width={16} height={16} color={COLORS.content.secondaryInverse} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarV2MenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n\tonMouseLeaveMenuItem,\n}) => {\n\treturn (\n\t\t<SibeBarV2MenuItem>\n\t\t\t<SidebarMainMenu\n\t\t\t\tid={option.displayName?.split(' ')?.join('') || option.key.toString()}\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => !isDisabled && onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\tsetHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={onMouseLeaveMenuItem}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\t// do nothing\n\t\t\t\t}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<SidebarNewTag isLastSticky={option.isLastSticky}>NEW</SidebarNewTag>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<SidebarLockedChannel\n\t\t\t\t\t\tisLastSticky={option.isLastSticky}\n\t\t\t\t\t\tis2ndLastSticky={option.is2ndLastSticky}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</SidebarLockedChannel>\n\t\t\t\t)}\n\t\t\t\t<SidebarMenuItemInner\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tisActive={mainActiveMenu?.key === option.key}\n\t\t\t\t\tdata-active={mainActiveMenu?.key === option.key ? 'true' : undefined}\n\t\t\t\t\tisLastSticky={option.isLastSticky}\n\t\t\t\t\tis2ndLastSticky={option.is2ndLastSticky}\n\t\t\t\t\tisHovered={option.key === hoveredComp?.key}\n\t\t\t\t\tisNew={option.isNew}\n\t\t\t\t\tonMouseEnter={() => setHandleHoverForFullLayout(option)}\n\t\t\t\t\tonMouseLeave={onMouseLeaveMenuItem}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key || option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<SidebarMenuItemContainer>\n\t\t\t\t\t\t<SidebarMenuItemText isActive={option?.key === mainActiveMenu?.key}>\n\t\t\t\t\t\t\t{option.displayName}\n\t\t\t\t\t\t</SidebarMenuItemText>\n\t\t\t\t\t</SidebarMenuItemContainer>\n\t\t\t\t</SidebarMenuItemInner>\n\t\t\t</SidebarMainMenu>\n\t\t</SibeBarV2MenuItem>\n\t);\n};\n"],"names":["BikSidebarV2","bikSidebarV2Props","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","hoverLeaveTimerRef","useRef","numberOfStickyOptions","useMemo","menu","useEffect","onClickMainMenuLogic","useCallback","option","setHandleHoverForFullLayout","cancelHoverLeaveTimer","top","determineElementTop","targetElement","topValue","calculateTopSideBarPosition","targetRect","distanceToBottom","handleResize","newTop","determineSideMenuTopWhileResize","openSideMenuElementHeight","startHoverLeaveTimer","currentId","sideMenuRect","divBoxTop","popupHeight","SideBarV2Container","jsx","BikIcon","jsxs","MainSideBarV2MenuWrapper","index","Fragment","NavigationHyperlink","EachSidebarMenuItem","SidebarV2Popup","popupMenuSelected","SimpleSidebarV2","menuSelected","reDirect","SibeBarV2MenuItem","SidebarMainMenu","SidebarMenuItemInner","CircularProgressBar","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","COLORS","onMouseLeaveMenuItem","SidebarNewTag","SidebarLockedChannel","LockedIcon","SidebarMenuItemContainer","SidebarMenuItemText"],"mappings":"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"}

package/dist/esm/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/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts

@@ -0,0 +1,12 @@
+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/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js

@@ -0,0 +1,53 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { TitleRegular as c, BodySecondary as p } from "../../TypographyStyle.js";
+import { SidebarV2PopupContainer as f } from "./SidebarV2Styles.js";
+const y = (i) => {
+  const {
+    top: r,
+    menuList: o,
+    zIndex: s,
+    left: a,
+    onMouseLeaveOnMenu: m,
+    onMouseEnterOnMenu: u,
+    onClickingPopupMenu: l
+  } = i;
+  return /* @__PURE__ */ e(
+    f,
+    {
+      top: r,
+      theme: "white",
+      zIndex: s,
+      left: a ?? 78,
+      postion: "fixed",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          id: "_sub-menu",
+          className: "sidebar-right-menu transform-class",
+          onMouseEnter: u,
+          onMouseLeave: m,
+          children: o?.map((n, t) => /* @__PURE__ */ d(
+            "div",
+            {
+              className: "each-menu",
+              style: {
+                borderBottom: t == o.length - 1 ? "none" : void 0
+              },
+              onClick: () => l(n),
+              children: [
+                /* @__PURE__ */ e(c, { style: { fontSize: 14 }, children: n.displayName }),
+                /* @__PURE__ */ e(p, { style: { fontSize: 12 }, children: n.description })
+              ]
+            },
+            t
+          ))
+        },
+        "_sub-menu"
+      )
+    }
+  );
+};
+export {
+  y as SidebarV2Popup
+};
+//# sourceMappingURL=SidebarV2Popup.js.map

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarV2Popup.js","sources":["../../../../../src/components/bik-layout/BikSidebarV2/SidebarV2Popup.tsx"],"sourcesContent":["import { BodySecondary, TitleRegular } from '../../TypographyStyle';\nimport { Menu } from './SidebarV2.model';\nimport { SidebarV2PopupContainer } from './SidebarV2Styles';\n\nexport interface SidebarV2PopupI {\n\tmenuList: Menu[];\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\ttop?: number;\n\tonMouseLeaveOnMenu?: () => void;\n\tonMouseEnterOnMenu?: () => void;\n\tonClickingPopupMenu: (menuSelected: Menu, reDirect?: boolean) => void;\n}\n\nexport const SidebarV2Popup: React.FC<SidebarV2PopupI> = (sideBarProps) => {\n\tconst {\n\t\ttop,\n\t\tmenuList,\n\t\tzIndex,\n\t\tleft,\n\t\tonMouseLeaveOnMenu,\n\t\tonMouseEnterOnMenu,\n\t\tonClickingPopupMenu,\n\t} = sideBarProps;\n\treturn (\n\t\t<SidebarV2PopupContainer\n\t\t\ttop={top}\n\t\t\ttheme={'white'}\n\t\t\tzIndex={zIndex}\n\t\t\tleft={left ?? 78}\n\t\t\tpostion={'fixed'}\n\t\t>\n\t\t\t<div\n\t\t\t\tid={'_sub-menu'}\n\t\t\t\tkey={'_sub-menu'}\n\t\t\t\tclassName={'sidebar-right-menu' + ' transform-class'}\n\t\t\t\tonMouseEnter={onMouseEnterOnMenu}\n\t\t\t\tonMouseLeave={onMouseLeaveOnMenu}\n\t\t\t>\n\t\t\t\t{menuList?.map((child, popupIndex) => (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"each-menu\"\n\t\t\t\t\t\tkey={popupIndex}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tborderBottom:\n\t\t\t\t\t\t\t\tpopupIndex == menuList.length - 1 ? 'none' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => onClickingPopupMenu(child)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleRegular style={{ fontSize: 14 }}>\n\t\t\t\t\t\t\t{child.displayName}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t<BodySecondary style={{ fontSize: 12 }}>\n\t\t\t\t\t\t\t{child.description}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</SidebarV2PopupContainer>\n\t);\n};\n"],"names":["SidebarV2Popup","sideBarProps","top","menuList","zIndex","left","onMouseLeaveOnMenu","onMouseEnterOnMenu","onClickingPopupMenu","jsx","SidebarV2PopupContainer","child","popupIndex","jsxs","TitleRegular","BodySecondary"],"mappings":";;;AAeO,MAAMA,IAA4C,CAACC,MAAiB;AAC1E,QAAM;AAAA,IACL,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,qBAAAC;AAAA,EAAA,IACGP;AACJ,SACC,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,KAAAR;AAAA,MACA,OAAO;AAAA,MACP,QAAAE;AAAA,MACA,MAAMC,KAAQ;AAAA,MACd,SAAS;AAAA,MAET,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,IAAI;AAAA,UAEJ,WAAW;AAAA,UACX,cAAcF;AAAA,UACd,cAAcD;AAAA,UAEb,UAAAH,GAAU,IAAI,CAACQ,GAAOC,MACtB,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cAEV,OAAO;AAAA,gBACN,cACCD,KAAcT,EAAS,SAAS,IAAI,SAAS;AAAA,cAAA;AAAA,cAE/C,SAAS,MAAMK,EAAoBG,CAAK;AAAA,cAExC,UAAA;AAAA,gBAAA,gBAAAF,EAACK,KAAa,OAAO,EAAE,UAAU,GAAA,GAC/B,YAAM,aACR;AAAA,gBACA,gBAAAL,EAACM,KAAc,OAAO,EAAE,UAAU,MAChC,YAAM,YAAA,CACR;AAAA,cAAA;AAAA,YAAA;AAAA,YAZKH;AAAA,UAAA,CAcN;AAAA,QAAA;AAAA,QAtBI;AAAA,MAAA;AAAA,IAuBN;AAAA,EAAA;AAGH;"}

package/dist/esm/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/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js

@@ -0,0 +1,310 @@
+import i, { css as o } from "styled-components";
+import { BodyTiny as d } from "../../TypographyStyle.js";
+import { COLORS as t, BASE_COLORS as n, FONTS as r } from "../../../constants/Theme.js";
+const x = i.div`
+	background-color: #28034e;
+	width: 72px;
+	justify-content: space-between;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	overflow-y: auto;
+	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;
+		}
+	}
+`, c = i.div`
+	margin: 0px 0px 16px;
+	padding-bottom: 8px;
+`, u = i.div``, g = i.div`
+	padding: 0px 6px;
+	margin-bottom: 6px;
+	> * {
+		gap: 4px;
+	}
+`, l = i.div`
+	position: absolute;
+	right: 5px;
+	background: ${t.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: ${t.background.inverse};
+	${({ isLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}
+`, m = i.div`
+	position: absolute;
+	right: 10px;
+	margin-top: -5px;
+	${({ isLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}
+	${({ is2ndLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				bottom: 48px;
+				z-index: 1;
+			}
+		`}
+`, h = i.div`
+	display: flex;
+	flex-direction: column;
+	border-radius: 10px;
+	align-items: center;
+	justify-content: space-around;
+	cursor: pointer;
+	> * {
+		gap: 10px;
+	}
+	padding: 8px 0px;
+
+	${({ isNew: e }) => e && o`
+			padding-top: 14px;
+		`}
+
+	${({ isActive: e }) => e && o`
+			border-radius: 8px;
+			background-color: ${n.brand[850]};
+			color: ${t.content.primaryInverse};
+			box-shadow: inset 0 0 0 1px ${t.stroke.brandSubdued};
+		`}
+
+	${({ isHovered: e }) => e && o`
+			background: ${t.background.brandHovered};
+			border-radius: 8px;
+		`}
+
+	&:hover:not([data-active='true']) {
+		background: ${t.background.brandHovered};
+		border-radius: 8px;
+	}
+
+	${({ isActive: e, isHovered: a }) => e && a && o`
+			border-radius: 8px;
+			box-shadow: inset 0 0 0 1px ${n.brand[700]};
+			background-color: ${n.brand[800]};
+		`}
+
+	${({ isLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 72px;
+				left: 6px;
+				right: 6px;
+			}
+		`}
+
+	${({ is2ndLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 8px;
+				left: 6px;
+				right: 6px;
+			}
+		`}
+
+	${({ stickyBottom: e }) => e !== void 0 && o`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: ${e}px;
+				left: 6px;
+				right: 6px;
+			}
+		`}
+`, f = i.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	cursor: pointer;
+`, $ = i(d)`
+	user-select: none;
+	width: 100%;
+	color: ${({ isActive: e }) => e ? t.content.primaryInverse : t.content.secondaryInverse};
+	margin-bottom: 0px;
+	text-align: center;
+`, v = i.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) => e.theme == "brand" ? t.background.inverse : t.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) => e.theme == "brand" ? t.background.inverse : "transparent"};
+		border-radius: 4px;
+		.sub-child-text {
+			color: ${(e) => e.theme == "brand" ? t.surface.standard : ""};
+			margin-bottom: 0px;
+			padding: 8px 12px;
+			font-size: ${r.caption.fontSize}px;
+			line-height: ${r.caption.lineHeight}px;
+			font-weight: ${r.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 ? t.background.warning.vibrant : ""};
+		}
+		.sub-child-active-menu-style {
+			color: ${(e) => e.isNewSidebar ? t.background.warning.vibrant : ""};
+		}
+	}
+	.sub-child-menu:hover {
+		background: ${(e) => e.theme == "brand" ? t.background.brandHovered : t.background.base};
+		border-radius: 4px;
+	}
+	.sub-child-active-menu {
+		background: ${(e) => e.theme == "brand" ? t.background.brandHovered : t.background.base};
+		border-radius: 4px;
+		border: ${(e) => e.theme == "brand" ? `1px solid ${t.stroke.brandSubdued}` : "none"};
+		.sub-child-active-text {
+			background: ${(e) => e.theme == "brand" ? t.stroke.brandSubdued : t.background.warning.vibrant};
+		}
+	}
+	.sub-child-active-menu:hover {
+		background: ${(e) => e.theme == "brand" ? t.background.inverseLight : t.background.base};
+		border-radius: 4px;
+		border: ${(e) => e.theme == "brand" ? `1px solid ${t.stroke.brandSubdued}` : "none"};
+		.sub-child-active-text {
+			background: ${(e) => e.theme == "brand" ? t.stroke.brandSubdued : t.background.warning.vibrant};
+		}
+	}
+	.sub-child-display-name {
+		padding: 14px 12px;
+		color: ${(e) => e.theme == "brand" ? t.content.secondaryInverse : t.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;
+	}
+`, k = i.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) => e.theme == "brand" ? "#381062" : t.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: ${t.background.base};
+			border-radius: 8px;
+		}
+	}
+`;
+export {
+  c as MainSideBarV2MenuWrapper,
+  u as SibeBarV2MenuItem,
+  x as SideBarV2Container,
+  m as SidebarLockedChannel,
+  g as SidebarMainMenu,
+  f as SidebarMenuItemContainer,
+  h as SidebarMenuItemInner,
+  $ as SidebarMenuItemText,
+  l as SidebarNewTag,
+  k as SidebarV2PopupContainer,
+  v as SimpleSidebarV2Container
+};
+//# sourceMappingURL=SidebarV2Styles.js.map

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarV2Styles.js","sources":["../../../../../src/components/bik-layout/BikSidebarV2/SidebarV2Styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { BASE_COLORS, COLORS, FONTS } from '@src/constants/Theme';\nimport { SidebarV2Theme } from './SidebarV2.model';\n\nexport const SideBarV2Container = styled.div`\n\tbackground-color: #28034e;\n\twidth: 72px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n`;\n\nexport const MainSideBarV2MenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n\tpadding-bottom: 8px;\n`;\n\nexport const SibeBarV2MenuItem = styled.div``;\n\nexport const SidebarMainMenu = styled.div`\n\tpadding: 0px 6px;\n\tmargin-bottom: 6px;\n\t> * {\n\t\tgap: 4px;\n\t}\n`;\n\nexport const SidebarNewTag = styled.div<{ isLastSticky?: boolean }>`\n\tposition: absolute;\n\tright: 5px;\n\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\tfont-size: 7.7px;\n\tfont-family: 'Inter';\n\tline-height: 10px;\n\tpadding: 2px 9.27px 2px 9.27px;\n\tborder-radius: 16px 16px 0px 16px;\n\tbackground: ${COLORS.background.inverse};\n\t${({ isLastSticky }) =>\n\t\tisLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tbottom: 116px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`}\n`;\n\nexport const SidebarLockedChannel = styled.div<{\n\tisLastSticky?: boolean;\n\tis2ndLastSticky?: boolean;\n}>`\n\tposition: absolute;\n\tright: 10px;\n\tmargin-top: -5px;\n\t${({ isLastSticky }) =>\n\t\tisLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tbottom: 116px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`}\n\t${({ is2ndLastSticky }) =>\n\t\tis2ndLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tbottom: 48px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`}\n`;\n\nexport const SidebarMenuItemInner = styled.div<{\n\tisActive?: boolean;\n\tisHovered?: boolean;\n\tisNew?: boolean;\n\tisLastSticky?: boolean;\n\tis2ndLastSticky?: boolean;\n\tstickyBottom?: number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder-radius: 10px;\n\talign-items: center;\n\tjustify-content: space-around;\n\tcursor: pointer;\n\t> * {\n\t\tgap: 10px;\n\t}\n\tpadding: 8px 0px;\n\n\t${({ isNew }) =>\n\t\tisNew &&\n\t\tcss`\n\t\t\tpadding-top: 14px;\n\t\t`}\n\n\t${({ isActive }) =>\n\t\tisActive &&\n\t\tcss`\n\t\t\tborder-radius: 8px;\n\t\t\tbackground-color: ${BASE_COLORS.brand['850']};\n\t\t\tcolor: ${COLORS.content.primaryInverse};\n\t\t\tbox-shadow: inset 0 0 0 1px ${COLORS.stroke.brandSubdued};\n\t\t`}\n\n\t${({ isHovered }) =>\n\t\tisHovered &&\n\t\tcss`\n\t\t\tbackground: ${COLORS.background.brandHovered};\n\t\t\tborder-radius: 8px;\n\t\t`}\n\n\t&:hover:not([data-active='true']) {\n\t\tbackground: ${COLORS.background.brandHovered};\n\t\tborder-radius: 8px;\n\t}\n\n\t${({ isActive, isHovered }) =>\n\t\tisActive &&\n\t\tisHovered &&\n\t\tcss`\n\t\t\tborder-radius: 8px;\n\t\t\tbox-shadow: inset 0 0 0 1px ${BASE_COLORS.brand['700']};\n\t\t\tbackground-color: ${BASE_COLORS.brand['800']};\n\t\t`}\n\n\t${({ isLastSticky }) =>\n\t\tisLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 72px;\n\t\t\t\tleft: 6px;\n\t\t\t\tright: 6px;\n\t\t\t}\n\t\t`}\n\n\t${({ is2ndLastSticky }) =>\n\t\tis2ndLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 8px;\n\t\t\t\tleft: 6px;\n\t\t\t\tright: 6px;\n\t\t\t}\n\t\t`}\n\n\t${({ stickyBottom }) =>\n\t\tstickyBottom !== undefined &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: ${stickyBottom}px;\n\t\t\t\tleft: 6px;\n\t\t\t\tright: 6px;\n\t\t\t}\n\t\t`}\n`;\n\nexport const SidebarMenuItemContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\tcursor: pointer;\n`;\n\nexport const SidebarMenuItemText = styled(BodyTiny)<{ isActive?: boolean }>`\n\tuser-select: none;\n\twidth: 100%;\n\tcolor: ${({ isActive }) =>\n\t\tisActive ? COLORS.content.primaryInverse : COLORS.content.secondaryInverse};\n\tmargin-bottom: 0px;\n\ttext-align: center;\n`;\n\nexport const SimpleSidebarV2Container = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarV2Theme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.2s;\n\t\ttransition-timing-function: ease-out;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //72\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverse\n\t\t\t\t: COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 4px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '8px' : '')};\n\n\t\t.sidebar-bridge {\n\t\t\tposition: absolute;\n\t\t\tright: 100%;\n\t\t\ttop: 0;\n\t\t\twidth: 6px;\n\t\t\theight: 100%;\n\t\t}\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand' ? COLORS.background.inverse : 'transparent'};\n\t\tborder-radius: 4px;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\tfont-size: ${FONTS.caption.fontSize}px;\n\t\t\tline-height: ${FONTS.caption.lineHeight}px;\n\t\t\tfont-weight: ${FONTS.caption.fontWeight};\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.brandHovered\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 4px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.brandHovered\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 4px;\n\t\tborder: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? `1px solid ${COLORS.stroke.brandSubdued}`\n\t\t\t\t: 'none'};\n\t\t.sub-child-active-text {\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.theme == 'brand'\n\t\t\t\t\t? COLORS.stroke.brandSubdued\n\t\t\t\t\t: COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.sub-child-active-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 4px;\n\t\tborder: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? `1px solid ${COLORS.stroke.brandSubdued}`\n\t\t\t\t: 'none'};\n\t\t.sub-child-active-text {\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.theme == 'brand'\n\t\t\t\t\t? COLORS.stroke.brandSubdued\n\t\t\t\t\t: COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarV2PopupContainer = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarV2Theme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 8px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //72\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 4px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarV2Container","styled","MainSideBarV2MenuWrapper","SibeBarV2MenuItem","SidebarMainMenu","SidebarNewTag","COLORS","isLastSticky","css","SidebarLockedChannel","is2ndLastSticky","SidebarMenuItemInner","isNew","isActive","BASE_COLORS","isHovered","stickyBottom","SidebarMenuItemContainer","SidebarMenuItemText","BodyTiny","SimpleSidebarV2Container","props","FONTS","SidebarV2PopupContainer"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { SimpleSidebarV2Props } from './SidebarV2.model';
+export declare const SimpleSidebarV2: React.FC<SimpleSidebarV2Props>;

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

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