web component fix email chips and tabcontainer scroll

packages/components/email-chips/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
-import Scrollbar from "../scrollbar";
+import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
+
 import { useClickOutside } from "../utils/useClickOutside.js";
 
 import {
@@ -291,7 +292,7 @@ const EmailChips = ({
     <StyledContent {...props}>
       <StyledChipGroup onKeyDown={onKeyDown} ref={containerRef} tabindex="-1">
         <StyledChipWithInput length={chips.length}>
-          <Scrollbar scrollclass={"scroll"} stype="thumbV" ref={scrollbarRef}>
+          <CustomScrollbarsVirtualList>
             <ChipsRender
               chips={chips}
               checkSelected={checkSelected}
@@ -304,7 +305,7 @@ const EmailChips = ({
               onDoubleClick={onDoubleClick}
               onSaveNewChip={onSaveNewChip}
             />
-          </Scrollbar>
+          </CustomScrollbarsVirtualList>
 
           <InputGroup
             placeholder={placeholder}

packages/components/scrollbar/index.js

@@ -61,14 +61,12 @@ const Scrollbar = React.forwardRef((props, ref) => {
       view: { outline: "none", WebkitOverflowScrolling: "auto" },
     },
   };
-
   const stype = scrollbarType[props.stype];
-
   const thumbV = stype ? stype.thumbV : {};
   const thumbH = stype ? stype.thumbH : {};
   const view = stype ? stype.view : {};
   return (
-    <CustomScrollbars thumbH={thumbH} thumbV={thumbV} view={view} {...props} />
+    <CustomScrollbars thumbh={thumbH} thumbv={thumbV} view={view} {...props} />
   );
 });
 

packages/components/scrollbar/styled-customScrollbar.js

@@ -3,11 +3,12 @@ import Base from "../themes/base";
 
 const StyledScrollbar = styled.div`
   .container {
-    width: ${(props) => props.style.width && props.style.width + "px"};
-    height: ${(props) => props.style.height && props.style.height + "px"};
     ${(props) => {
-      console.log(props.width);
+      console.log(props.thumbv.width);
     }}
+    width: ${(props) => props?.style?.width && props.style.width + "px"};
+    height: ${(props) => props?.style?.height && props.style.height + "px"};
+
     padding-right: ${(props) => props.view.paddingRight};
     ${(props) =>
       props.theme.interfaceDirection === "rtl" &&
@@ -29,9 +30,10 @@ const StyledScrollbar = styled.div`
       transparent;
     scrollbar-width: thin;
   }
+
   .container::-webkit-scrollbar {
-    width: ${(props) => props.thumbV.width};
-    height: ${(props) => props.thumbH.height};
+    width: ${(props) => props.thumbv.width};
+    height: ${(props) => (props.stype === "thumbV" ? 0 : props.thumbh.height)};
   }
 
   .container::-webkit-scrollbar-track {

packages/components/tabs-container/index.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 
 import Text from "../text";
 import { NavItem, Label, StyledScrollbar } from "./styled-tabs-container";
+import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list";
 
 import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
 
@@ -73,8 +74,8 @@ class TabContainer extends Component {
 
   setTabPosition = (index, currentRef) => {
     const arrayOfWidths = this.getWidthElements(); //get tabs widths
-    const scrollLeft = this.scrollRef.current.getScrollLeft(); // get scroll position relative to left side
-    const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
+    const scrollLeft = this.scrollRef.current?.getScrollLeft(); // get scroll position relative to left side
+    const staticScroll = this.scrollRef.current?.getScrollWidth(); //get static scroll width
     const containerWidth = this.scrollRef.current.getClientWidth(); //get main container width
     const currentTabWidth = currentRef.current.offsetWidth;
     const marginRight = 8;
@@ -108,13 +109,13 @@ class TabContainer extends Component {
       const difference = containerWidth - widthBlocksInContainer;
       const currentContainerWidth = currentTabWidth;
 
-      this.scrollRef.current.scrollLeft(
+      this.scrollRef.current?.scrollLeft(
         difference * -1 + currentContainerWidth + marginRight
       );
     }
     //Out of range of left side
     else if (rightFullWidth > staticScroll - scrollLeft) {
-      this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
+      this.scrollRef.current?.scrollLeft(staticScroll - rightFullWidth);
     }
   };
 
@@ -128,8 +129,8 @@ class TabContainer extends Component {
       rightTabs--;
     }
     rightFullWidth -= marginRight;
-    const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
-    this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
+    const staticScroll = this.scrollRef.current?.getScrollWidth(); //get static scroll width
+    this.scrollRef.current?.scrollLeft(staticScroll - rightFullWidth);
   };
 
   onMouseEnter = () => {
@@ -152,12 +153,7 @@ class TabContainer extends Component {
 
     return (
       <>
-        <StyledScrollbar
-          autoHide={onScrollHide}
-          stype="preMediumBlack"
-          className="scrollbar"
-          ref={this.scrollRef}
-        >
+        <CustomScrollbarsVirtualList>
           <NavItem className="className_items">
             {elements.map((item, index) => (
               <ColorTheme
@@ -177,7 +173,7 @@ class TabContainer extends Component {
               </ColorTheme>
             ))}
           </NavItem>
-        </StyledScrollbar>
+        </CustomScrollbarsVirtualList>
         <div>{elements[activeTab].content}</div>
       </>
     );