fixing

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -21,12 +21,16 @@ export const TabsUI = (props: TabsUIProps) => {
   const [selectedIndex, setSelectedIndex] = useState(-1)
   const currentIndexRef = useRef(-1)
   const tabsRef = useRef({})
+  let mutex = false
+
   const tabs = useRef(props.tabs)
+  const tabsScrollable = useRef(null)
   tabs.current = props.tabs // we do this to pass the tabs list to the onReady callbacks
 
   useEffect(() => {
     if (props.tabs[selectedIndex]) {
       tabsRef.current[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' })
+      console.log("usesc")
     }
   }, [selectedIndex])
 
@@ -53,20 +57,36 @@ export const TabsUI = (props: TabsUIProps) => {
     currentIndexRef.current = index
     setSelectedIndex(index)
   }
+  const isCompletelyVisible = (el) => {
+    const rectTab = el.getBoundingClientRect()
+    const rectTabs = tabsScrollable.current.getBoundingClientRect()
+    // Only completely visible elements return true:
+    return (rectTab.left >= 0) &&
+      rectTab.left > rectTabs.left &&
+      rectTab.left < rectTabs.right
+  }
   const scrollToNextTab = (event) => {
+    if (mutex) return
+    mutex = true
     const next = event.deltaY > 0
-    let scrollTo = currentIndexRef.current
     if (next) {
-      if (currentIndexRef.current < props.tabs.length - 1) {
-        scrollTo = currentIndexRef.current + 1
-        tabsRef.current[scrollTo].scrollIntoView({ behavior: 'smooth', block: 'center' })
+      // scroll to previous
+      let firstVisibleIndex = Object.values(tabsRef.current).findIndex((element) => { return isCompletelyVisible(element) })
+      if (firstVisibleIndex > -1) {
+        if (firstVisibleIndex > 0) firstVisibleIndex -= 1
+        tabsRef.current[firstVisibleIndex].scrollIntoView({ behavior: 'smooth', block: 'center' })
+        console.log('scroll_N ', firstVisibleIndex)
       }
     } else {
-      if (currentIndexRef.current > 0) {
-        scrollTo = currentIndexRef.current - 1
-        tabsRef.current[scrollTo].scrollIntoView({ behavior: 'smooth', block: 'center' })
+      // scroll to next
+      let lastVisibleIndex: number = props.tabs.length - 1 - Object.values(tabsRef.current).reverse().findIndex((element) => { return isCompletelyVisible(element) })
+      if (lastVisibleIndex > -1) {
+        if (lastVisibleIndex < props.tabs.length - 2) lastVisibleIndex += 1
+        tabsRef.current[lastVisibleIndex].scrollIntoView({ behavior: 'smooth', block: 'center' })
+        console.log('scroll_P ', lastVisibleIndex)
       }
     }
+    mutex = false
   }
 
   useEffect(() => {
@@ -80,7 +100,7 @@ export const TabsUI = (props: TabsUIProps) => {
 
   return (
     <div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs">
-      <div className="d-flex flex-row" style={ { maxWidth: 'fit-content', width: '97%' } }>
+      <div ref={tabsScrollable} className="d-flex flex-row" style={ { maxWidth: 'fit-content', width: '97%' } }>
         <div className="d-flex flex-row justify-content-center align-items-center m-1 mt-2">
           <span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
           <span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
@@ -101,3 +121,4 @@ export const TabsUI = (props: TabsUIProps) => {
 }
 
 export default TabsUI
+//       { (props.tabs.length > 2 && (isCompletelyVisible(tabsRef.current[0]) || isCompletelyVisible(tabsRef.current[props.tabs.length - 1]))) &&