Remove react-scrollbar-size

Author: kshmidt-digma

.github/workflows/push.yml

@@ -8,6 +8,7 @@ on:
     # the paths-ignore in both push and pull_request events.
     # More info: https://github.com/actions/runner/issues/1182
     paths-ignore:
+      - ".github/prompts/**"
       - ".husky/**"
       - ".vscode/**"
       - "website/**"
@@ -19,6 +20,7 @@ on:
     branches:
       - "main"
     paths-ignore:
+      - ".github/prompts/**"
       - ".husky/**"
       - ".vscode/**"
       - "website/**"

package-lock.json

@@ -141,7 +141,6 @@
     "react-product-fruits": "^2.2.61",
     "react-redux": "^9.2.0",
     "react-router": "^7.5.2",
-    "react-scrollbar-size": "^5.0.0",
     "react-syntax-highlighter": "^15.6.1",
     "react-transition-group": "^4.4.5",
     "recharts": "^2.15.3",

package.json

@@ -2,8 +2,6 @@ import { format } from "date-fns";
 import type { MouseEvent, UIEvent } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useDimensions from "react-cool-dimensions";
-import useScrollbarSize from "react-scrollbar-size";
-
 import {
   Area,
   CartesianGrid,
@@ -18,6 +16,7 @@ import {
 import type { DefaultTheme } from "styled-components";
 import { useTheme } from "styled-components";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useScrollbarDimensions } from "../../../hooks/useScrollbarDimensions";
 import { isNumber } from "../../../typeGuards/isNumber";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { convertToDurationUnit } from "../../../utils/convertToDurationUnit";
@@ -160,7 +159,7 @@ export const LiveView = ({ data, onClose }: LiveViewProps) => {
   const [areaTooltip, setAreaTooltip] = useState<Coordinates>();
   const [dotToolTip, setDotTooltip] = useState<DotTooltipProps>();
   const [scrollPercentagePosition, setScrollPercentagePosition] = useState(1);
-  const scrollbar = useScrollbarSize();
+  const scrollbar = useScrollbarDimensions();
   const [areErrorsVisible, setAreErrorsVisible] = useState(true);
 
   useEffect(() => {
@@ -357,7 +356,7 @@ export const LiveView = ({ data, onClose }: LiveViewProps) => {
     chartContainerRef.current &&
     chartContainerRef.current.scrollWidth >
       chartContainerRef.current.clientWidth
-      ? scrollbar.width
+      ? scrollbar.height
       : 0;
 
   const changedPercentile = useMemo(() => {

src/components/RecentActivity/LiveView/index.tsx

@@ -1,8 +1,8 @@
 import type { UIEvent } from "react";
 import { useEffect, useState } from "react";
 import useDimensions from "react-cool-dimensions";
-import useScrollbarSize from "react-scrollbar-size";
 import type { Input } from "squarify";
+import { useScrollbarDimensions } from "../../../../hooks/useScrollbarDimensions";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { TreeMap } from "../../TreeMap";
 import type { TileData } from "../../TreeMap/types";
@@ -23,7 +23,7 @@ export const Chart = ({
   const { width, height, entry, observe } = useDimensions();
   const [isLeftOverlayVisible, setIsLeftOverlayVisible] = useState(false);
   const [isRightOverlayVisible, setIsRightOverlayVisible] = useState(false);
-  const scrollbar = useScrollbarSize();
+  const scrollbar = useScrollbarDimensions();
 
   useEffect(() => {
     if (entry) {
@@ -105,12 +105,12 @@ export const Chart = ({
       <s.Overlay
         $visible={isLeftOverlayVisible}
         $placement={"left"}
-        style={{ bottom: scrollbar.width }}
+        style={{ bottom: scrollbar.height }}
       />
       <s.Overlay
         $visible={isRightOverlayVisible}
         $placement={"right"}
-        style={{ bottom: scrollbar.width }}
+        style={{ bottom: scrollbar.height }}
       />
     </s.Container>
   );

src/components/common/IssuesReport/Chart/index.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from "react";
 import useDimensions from "react-cool-dimensions";
-import useScrollbarSize from "react-scrollbar-size";
+import { useScrollbarDimensions } from "../../../../hooks/useScrollbarDimensions";
 import * as s from "./styles";
 import type { ButtonPosition, FieldProps } from "./types";
 
 export const Field = ({ multiline, children, button }: FieldProps) => {
-  const scrollbar = useScrollbarSize();
+  const scrollbar = useScrollbarDimensions();
   const contentRef = useRef<HTMLDivElement | null>(null);
   const { observe } = useDimensions();
 

src/components/common/JiraTicket/Field/index.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+
+interface ScrollbarDimensions {
+  width: number;
+  height: number;
+}
+
+export const useScrollbarDimensions = () => {
+  const [dimensions, setDimensions] = useState<ScrollbarDimensions>({
+    width: 0,
+    height: 0
+  });
+
+  useEffect(() => {
+    const calculateDimensions = (): ScrollbarDimensions => {
+      const verticalContainer = document.createElement("div");
+      verticalContainer.style.visibility = "hidden";
+      verticalContainer.style.overflow = "scroll";
+      verticalContainer.style.width = "100px";
+      verticalContainer.style.height = "100px";
+      document.body.appendChild(verticalContainer);
+
+      const horizontalContainer = document.createElement("div");
+      horizontalContainer.style.visibility = "hidden";
+      horizontalContainer.style.overflowX = "scroll";
+      horizontalContainer.style.overflowY = "hidden";
+      horizontalContainer.style.width = "100px";
+      horizontalContainer.style.height = "100px";
+      document.body.appendChild(horizontalContainer);
+
+      const width =
+        verticalContainer.offsetWidth - verticalContainer.clientWidth;
+      const height =
+        horizontalContainer.offsetHeight - horizontalContainer.clientHeight;
+
+      document.body.removeChild(verticalContainer);
+      document.body.removeChild(horizontalContainer);
+
+      return { width, height };
+    };
+
+    setDimensions(calculateDimensions());
+  }, []);
+
+  return dimensions;
+};