fix: Not able to see all the options of Font property as it is not scrollable + Canvas scroll to top when I drop Tab widget on the canvas (#13608)

* fix tab widget scrolling + text widget font control overflowing issue

* revert text widget changes

* tab widget scroll issue

* remove border radius and box shadow from v1 widgets

app/client/src/widgets/InputWidget/widget/index.tsx

@@ -610,28 +610,6 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
             isTriggerProperty: false,
             validation: { type: ValidationTypes.TEXT },
           },
-          {
-            propertyName: "borderRadius",
-            label: "Border Radius",
-            helpText:
-              "Rounds the corners of the icon button's outer border edge",
-            controlType: "BORDER_RADIUS_OPTIONS",
-            isJSConvertible: true,
-            isBindProperty: true,
-            isTriggerProperty: false,
-            validation: { type: ValidationTypes.TEXT },
-          },
-          {
-            propertyName: "boxShadow",
-            label: "Box Shadow",
-            helpText:
-              "Enables you to cast a drop shadow from the frame of the widget",
-            controlType: "BOX_SHADOW_OPTIONS",
-            isJSConvertible: true,
-            isBindProperty: true,
-            isTriggerProperty: false,
-            validation: { type: ValidationTypes.TEXT },
-          },
         ],
       },
     ];

app/client/src/widgets/MultiSelectWidget/widget/index.tsx

@@ -381,24 +381,6 @@ class MultiSelectWidget extends BaseWidget<
             isBindProperty: false,
             isTriggerProperty: false,
           },
-          {
-            propertyName: "borderRadius",
-            label: "Border Radius",
-            helpText:
-              "Rounds the corners of the icon button's outer border edge",
-            controlType: "BORDER_RADIUS_OPTIONS",
-            isBindProperty: false,
-            isTriggerProperty: false,
-          },
-          {
-            propertyName: "boxShadow",
-            label: "Box Shadow",
-            helpText:
-              "Enables you to cast a drop shadow from the frame of the widget",
-            controlType: "BOX_SHADOW_OPTIONS",
-            isBindProperty: false,
-            isTriggerProperty: false,
-          },
         ],
       },
     ];

app/client/src/widgets/TabsWidget/component/PageTabs.tsx

@@ -121,7 +121,6 @@ function PageTabContainer({
 
   useEffect(() => {
     if (isTabActive) {
-      tabContainerRef.current?.scrollIntoView(false);
       setShowScrollArrows();
     }
   }, [isTabActive, tabsScrollable]);

app/client/src/widgets/TabsWidget/component/index.tsx

@@ -1,7 +1,6 @@
 import React, {
   RefObject,
   ReactNode,
-  useEffect,
   useRef,
   useState,
   useCallback,
@@ -15,7 +14,6 @@ import Icon, { IconSize } from "components/ads/Icon";
 import { generateClassName, getCanvasClassName } from "utils/generators";
 import { Colors } from "constants/Colors";
 import PageTabs from "./PageTabs";
-import useThrottledRAF from "utils/hooks/useThrottledRAF";
 
 interface TabsComponentProps extends ComponentProps {
   children?: ReactNode;
@@ -208,9 +206,7 @@ function TabsComponent(props: TabsComponentProps) {
     null,
   );
   const tabsRef = useRef<HTMLElement | null>(null);
-  const [isScrolling, setIsScrolling] = useState(false);
   const [tabsScrollable, setTabsScrollable] = useState(false);
-  const [isScrollingLeft, setIsScrollingLeft] = useState(false);
   const [shouldShowLeftArrow, setShouldShowLeftArrow] = useState(false);
   const [shouldShowRightArrow, setShouldShowRightArrow] = useState(true);
 
@@ -234,36 +230,21 @@ function TabsComponent(props: TabsComponentProps) {
     [tabs],
   );
 
-  const scroll = useCallback(() => {
+  const scroll = useCallback(
-    const currentOffset = tabsRef.current?.scrollLeft || 0;
+    (isScrollingLeft) => {
+      const currentOffset = tabsRef.current?.scrollLeft || 0;
 
-    if (tabsRef.current) {
+      if (tabsRef.current) {
-      tabsRef.current.scrollLeft = isScrollingLeft
+        tabsRef.current.scrollLeft = isScrollingLeft
-        ? currentOffset - 5
+          ? currentOffset - 50
-        : currentOffset + 5;
+          : currentOffset + 50;
-      setShowScrollArrows();
+        setShowScrollArrows();
-    }
+      }
-  }, [tabsRef.current, isScrollingLeft]);
+    },
+    [tabsRef.current],
+  );
   // eslint-disable-next-line
-  const [_intervalRef, _rafRef, requestAF] = useThrottledRAF(scroll, 10);
+  // const [_intervalRef, _rafRef, requestAF] = useThrottledRAF(scroll, 10);
-
-  const stopScrolling = () => {
-    setIsScrolling(false);
-    setIsScrollingLeft(false);
-  };
-
-  const startScrolling = (isLeft: boolean) => {
-    setIsScrolling(true);
-    setIsScrollingLeft(isLeft);
-  };
-
-  useEffect(() => {
-    let clear;
-    if (isScrolling) {
-      clear = requestAF();
-    }
-    return clear;
-  }, [isScrolling, isScrollingLeft]);
 
   // useEffect(() => {
   //   if (!props.shouldScrollContents) {
@@ -278,14 +259,10 @@ function TabsComponent(props: TabsComponentProps) {
       ref={tabContainerRef}
     >
       {props.shouldShowTabs && (
-        <Container className="relative hidden px-6 h-9 md:flex">
+        <Container className="relative flex px-6 h-9">
           <ScrollBtnContainer
-            className="left-0 scroll-nav-left-button"
+            className="left-0 cursor-pointer scroll-nav-left-button"
-            onMouseDown={() => startScrolling(true)}
+            onClick={() => scroll(true)}
-            onMouseLeave={stopScrolling}
-            onMouseUp={stopScrolling}
-            onTouchEnd={stopScrolling}
-            onTouchStart={() => startScrolling(true)}
             visible={shouldShowLeftArrow}
           >
             <Icon name="left-arrow-2" size={IconSize.MEDIUM} />
@@ -299,12 +276,8 @@ function TabsComponent(props: TabsComponentProps) {
             tabsScrollable={tabsScrollable}
           />
           <ScrollBtnContainer
-            className="right-0 scroll-nav-right-button"
+            className="right-0 cursor-pointer scroll-nav-right-button"
-            onMouseDown={() => startScrolling(false)}
+            onClick={() => scroll(false)}
-            onMouseLeave={stopScrolling}
-            onMouseUp={stopScrolling}
-            onTouchEnd={stopScrolling}
-            onTouchStart={() => startScrolling(false)}
             visible={shouldShowRightArrow}
           >
             <Icon name="right-arrow-2" size={IconSize.MEDIUM} />