Merged in feat/SW-2847-table (pull request #2665)

fix(SW-2847): move ScrollWrapper to design system and Table component

* fix(SW-2847): move ScrollWrapper to design system and Table component


Approved-by: Erik Tiekstra

packages/common/hooks/useScrollShadows.ts

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react"
+
+export default function useScrollShadows<T extends HTMLElement>() {
+  const containerRef = useRef<T>(null)
+  const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
+  const [showRightShadow, setShowRightShadow] = useState<boolean>(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const container = containerRef.current
+      if (!container) return
+
+      setShowLeftShadow(container.scrollLeft > 0)
+      setShowRightShadow(
+        container.scrollLeft < container.scrollWidth - container.clientWidth
+      )
+    }
+
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener("scroll", handleScroll)
+    }
+
+    handleScroll()
+
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll)
+      }
+    }
+  }, [])
+
+  return { containerRef, showLeftShadow, showRightShadow }
+}