feat: add scrollable container

Author: abelflopes

packages/components/_provisional/src/index.ts

@@ -8,4 +8,6 @@ export * from "./dock";
 
 export * from "./breadcrumbs";
 
+export * from "./scrollable-container";
+
 export * from "./position-engine";

packages/components/_provisional/src/scrollable-container/index.module.scss

@@ -0,0 +1,77 @@
+@import "@react-ck/theme";
+
+.root {
+  position: relative;
+  overflow: auto;
+
+  // all shadows
+  .shadow_x::before,
+  .shadow_x::after,
+  &::before,
+  &::after {
+    display: block;
+    content: "";
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.3s;
+    box-shadow: 0 0 get-spacing(1.5) get-spacing(1.5) get-color(neutral-light-1);
+  }
+
+  // shadow x
+  .shadow_x {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transform: translate(var(--scroll-x), var(--scroll-y));
+    pointer-events: none;
+
+    &::before,
+    &::after {
+      height: 100%;
+      width: 0;
+    }
+  }
+
+  // shadow y
+  &::before,
+  &::after {
+    height: 0;
+    width: 100%;
+    transform: translate(var(--scroll-x), var(--scroll-y));
+    pointer-events: none;
+  }
+
+  // shadow top
+  &::before {
+    top: 0;
+    left: 0;
+  }
+
+  // shadow left
+  .shadow_x::before {
+    top: 0;
+    left: 0;
+  }
+
+  // shadow right
+  .shadow_x::after {
+    top: 0;
+    right: 0;
+  }
+
+  // shadow bottom
+  &::after {
+    bottom: 0;
+    left: 0;
+  }
+
+  // active shadow
+  &.has-scroll-top::before,
+  &.has-scroll-right .shadow_x::after,
+  &.has-scroll-bottom::after,
+  &.has-scroll-left .shadow_x::before {
+    opacity: 1;
+  }
+}

packages/components/_provisional/src/scrollable-container/index.tsx

@@ -0,0 +1,96 @@
+import classNames from "classnames";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+
+export type ScrollableContainerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ScrollableContainer = ({
+  className,
+  onScroll,
+  children,
+  style,
+  ...otherProps
+}: Readonly<ScrollableContainerProps>): React.ReactElement => {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [hasScroll, setHasScroll] = useState({
+    left: false,
+    right: false,
+    top: false,
+    bottom: false,
+  });
+
+  const [scrollPos, setScrollPos] = useState({
+    x: "0px",
+    y: "0px",
+  });
+
+  const update = useCallback(() => {
+    if (!rootRef.current) return;
+
+    const TOLERANCE = 14;
+
+    const { scrollLeft, scrollTop, scrollHeight, scrollWidth, offsetHeight, offsetWidth } =
+      rootRef.current;
+
+    const hasScrollY = scrollHeight > offsetHeight;
+    const hasScrollX = scrollWidth > offsetWidth;
+
+    const left = hasScrollX && scrollLeft > TOLERANCE;
+    const right = hasScrollX && scrollLeft < scrollWidth - offsetWidth - TOLERANCE;
+
+    const top = hasScrollY && scrollTop > TOLERANCE;
+    const bottom = hasScrollY && scrollTop < scrollHeight - offsetHeight - TOLERANCE;
+
+    setScrollPos({
+      x: `${scrollLeft}px`,
+      y: `${scrollTop}px`,
+    });
+
+    setHasScroll({ left, right, top, bottom });
+  }, []);
+
+  const handleScroll = useCallback<React.UIEventHandler<HTMLDivElement>>(
+    (e) => {
+      update();
+      onScroll?.(e);
+    },
+    [onScroll, update],
+  );
+
+  useEffect(update, [update]);
+
+  useEffect(() => {
+    if (!rootRef.current) return;
+
+    const ro = new ResizeObserver(update);
+
+    ro.observe(rootRef.current);
+
+    return () => {
+      ro.disconnect();
+    };
+  }, [update]);
+
+  return (
+    <div
+      ref={rootRef}
+      {...otherProps}
+      className={classNames(className, styles.root, {
+        [`${styles["has-scroll-top"]}`]: hasScroll.top,
+        [`${styles["has-scroll-right"]}`]: hasScroll.right,
+        [`${styles["has-scroll-bottom"]}`]: hasScroll.bottom,
+        [`${styles["has-scroll-left"]}`]: hasScroll.left,
+      })}
+      style={{
+        ...style,
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- needed since types do not include CSS variables
+        ["--scroll-x" as keyof React.CSSProperties]: scrollPos.x,
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- needed since types do not include CSS variablesz
+        ["--scroll-y" as keyof React.CSSProperties]: scrollPos.y,
+      }}
+      onScroll={handleScroll}>
+      <div className={styles.shadow_x} />
+      {children}
+    </div>
+  );
+};