fix: Table Widget shows scrollbar when not in focus (#15573)

* fix: Table Widget shows scrollbar when not in focus

* Scroll bar fix for table widget v1

* - Shows all table scrollbars on hover for table widget v2
- Extends ScrollIndicator component to support showScrollbarOnHover functionality

* json field spec fix

* Changes requested in review

* index.js revert

* Review changes

* Club hover and active css together in scrollbarOnHoverCSS

* Fix "scroll thumb not visible until first scroll" issue

* Fix some typos in comment

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>

app/client/src/widgets/TableWidget/component/Table.tsx

@@ -288,6 +288,7 @@ export function Table(props: TableProps) {
         ref={tableWrapperRef}
       >
         <Scrollbars
+          autoHide
           renderThumbHorizontal={ScrollbarHorizontalThumb}
           style={{
             width: props.width,

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -372,3 +372,26 @@ export enum CheckboxState {
   CHECKED = 1,
   PARTIAL = 2,
 }
+
+export const scrollbarOnHoverCSS = `
+  .track-horizontal {
+    height: 6px;
+    bottom: 1px;
+    width: 100%;
+    opacity: 0;
+    transition: opacity 0.15s ease-in;
+    &:active {
+      opacity: 1;
+    }
+  }
+  &:hover {
+    .track-horizontal {
+      opacity: 1;
+    }
+  }
+  .thumb-horizontal {
+    &:hover, &:active {
+      height: 6px !important;
+    }
+  }
+`;

app/client/src/widgets/TableWidgetV2/component/Table.tsx

@@ -100,6 +100,10 @@ function ScrollbarHorizontalThumb(props: any) {
   return <div {...props} className="thumb-horizontal" />;
 }
 
+function ScrollbarHorizontalTrack(props: any) {
+  return <div {...props} className="track-horizontal" />;
+}
+
 export function Table(props: TableProps) {
   const isResizingColumn = React.useRef(false);
 
@@ -246,9 +250,9 @@ export function Table(props: TableProps) {
           width={props.width}
         >
           <Scrollbars
-            autoHide
             renderThumbHorizontal={ScrollbarHorizontalThumb}
             renderThumbVertical={ScrollbarVerticalThumb}
+            renderTrackHorizontal={ScrollbarHorizontalTrack}
             style={style}
           >
             <TableHeaderInnerWrapper
@@ -296,6 +300,7 @@ export function Table(props: TableProps) {
       >
         <Scrollbars
           renderThumbHorizontal={ScrollbarHorizontalThumb}
+          renderTrackHorizontal={ScrollbarHorizontalTrack}
           style={{
             width: props.width,
             height: isHeaderVisible ? props.height - 48 : props.height,
@@ -422,6 +427,7 @@ export function Table(props: TableProps) {
       <ScrollIndicator
         containerRef={tableBodyRef}
         mode="LIGHT"
+        showScrollbarOnlyOnHover
         top={props.editMode ? "70px" : "73px"}
       />
     </TableWrapper>

app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx

@@ -10,6 +10,7 @@ import {
   TABLE_SIZES,
   CellAlignment,
   VerticalAlignment,
+  scrollbarOnHoverCSS,
 } from "./Constants";
 import { Colors, Color } from "constants/Colors";
 import { hideScrollbar, invisible } from "constants/DefaultTheme";
@@ -52,13 +53,11 @@ export const TableWrapper = styled.div<{
     width: ${(props) => props.width}px;
     overflow-x: auto;
     ${hideScrollbar};
+    ${scrollbarOnHoverCSS};
     .thumb-horizontal {
       height: 4px !important;
       border-radius: ${(props) => props.theme.radii[3]}px;
       background: ${(props) => props.theme.colors.scrollbarLight} !important;
-      &:hover {
-        height: 6px !important;
-      }
     }
   }
   .table {
@@ -489,13 +488,11 @@ export const TableHeaderWrapper = styled.div<{
   min-height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px;
   overflow-x: auto;
   ${hideScrollbar};
+  ${scrollbarOnHoverCSS};
   .thumb-horizontal {
     height: 4px !important;
     border-radius: ${(props) => props.theme.radii[3]}px;
     background: ${(props) => props.theme.colors.scrollbarLight};
-    &:hover {
-      height: 6px !important;
-    }
   }
 `;