braid-design-system 33.2.0 → 33.2.1

package/dist/lib/components/private/ScrollContainer/ScrollContainer.css.mjs

@@ -0,0 +1,87 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, createVar, styleVariants, fallbackVar } from "@vanilla-extract/css";
+setFileScope("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
+const container = style({
+  WebkitOverflowScrolling: "touch",
+  WebkitMaskComposite: "destination-in",
+  // Fallback for browsers that don't support mask-composite
+  maskComposite: "intersect"
+}, "container");
+const hideScrollbar = style({
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  "::-webkit-scrollbar": {
+    width: 0,
+    height: 0
+  }
+}, "hideScrollbar");
+const scrollOverlaySize = createVar("scrollOverlaySize");
+const fadeSize = styleVariants({
+  small: {
+    vars: {
+      [scrollOverlaySize]: "40px"
+    }
+  },
+  medium: {
+    vars: {
+      [scrollOverlaySize]: "60px"
+    }
+  },
+  large: {
+    vars: {
+      [scrollOverlaySize]: "80px"
+    }
+  }
+}, "fadeSize");
+const direction = styleVariants({
+  horizontal: {
+    overflowX: "auto",
+    overflowY: "hidden"
+  },
+  vertical: {
+    overflowX: "hidden",
+    overflowY: "auto"
+  },
+  all: {
+    overflow: "auto"
+  }
+}, "direction");
+const left = createVar("left");
+const right = createVar("right");
+const top = createVar("top");
+const bottom = createVar("bottom");
+const mask = style({
+  maskImage: [`linear-gradient(to bottom, transparent 0, black ${fallbackVar(top, "0")})`, `linear-gradient(to right, transparent 0, black ${fallbackVar(left, "0")})`, `linear-gradient(to left, transparent 0, black ${fallbackVar(right, "0")})`, `linear-gradient(to top, transparent 0, black ${fallbackVar(bottom, "0")})`].join(",")
+}, "mask");
+const maskLeft = style({
+  vars: {
+    [left]: scrollOverlaySize
+  }
+}, "maskLeft");
+const maskRight = style({
+  vars: {
+    [right]: scrollOverlaySize
+  }
+}, "maskRight");
+const maskTop = style({
+  vars: {
+    [top]: scrollOverlaySize
+  }
+}, "maskTop");
+const maskBottom = style({
+  vars: {
+    [bottom]: scrollOverlaySize
+  }
+}, "maskBottom");
+endFileScope();
+export {
+  container,
+  direction,
+  fadeSize,
+  hideScrollbar,
+  mask,
+  maskBottom,
+  maskLeft,
+  maskRight,
+  maskTop
+};

package/dist/lib/components/private/ScrollContainer/ScrollContainer.mjs

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect.mjs";
+import { Box } from "../../Box/Box.mjs";
+import { buildDataAttributes } from "../buildDataAttributes.mjs";
+import { throttle } from "throttle-debounce";
+import { container, mask, hideScrollbar, fadeSize, direction, maskTop, maskBottom, maskLeft, maskRight } from "./ScrollContainer.css.mjs";
+const scrollOffset = 2;
+const maskOverflow = (element, direction2) => {
+  const atTop = element.scrollTop <= 0;
+  const atBottom = element.scrollHeight - element.offsetHeight - element.scrollTop < scrollOffset;
+  const atLeft = element.scrollLeft <= 0;
+  const atRight = element.scrollWidth - element.offsetWidth - element.scrollLeft < scrollOffset;
+  if (direction2 === "vertical" || direction2 === "all") {
+    element.classList[atTop ? "remove" : "add"](maskTop);
+    element.classList[atBottom ? "remove" : "add"](maskBottom);
+  }
+  if (direction2 === "horizontal" || direction2 === "all") {
+    element.classList[atLeft ? "remove" : "add"](maskLeft);
+    element.classList[atRight ? "remove" : "add"](maskRight);
+  }
+};
+const ScrollContainer = ({
+  children,
+  direction: direction$1 = "horizontal",
+  fadeSize: fadeSize$1 = "medium",
+  hideScrollbar: hideScrollbar$1 = false,
+  data,
+  ...restProps
+}) => {
+  const containerRef = useRef(null);
+  const updateMask = throttle(
+    100,
+    useCallback(() => {
+      if (containerRef.current) {
+        maskOverflow(containerRef.current, direction$1);
+      }
+    }, [containerRef, direction$1])
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (containerRef.current) {
+      updateMask();
+    }
+    window.addEventListener("resize", updateMask);
+    return () => window.removeEventListener("resize", updateMask);
+  }, [updateMask]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: containerRef,
+      onScroll: updateMask,
+      position: "relative",
+      height: "full",
+      className: [
+        container,
+        mask,
+        hideScrollbar$1 ? hideScrollbar : null,
+        fadeSize[fadeSize$1],
+        direction[direction$1]
+      ],
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children
+    }
+  );
+};
+export {
+  ScrollContainer
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.2.0",
+  "version": "33.2.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -186,6 +186,7 @@
     "react-is": "^18.2.0",
     "react-popper-tooltip": "^4.3.1",
     "react-remove-scroll": "^2.5.3",
+    "throttle-debounce": "^5.0.2",
     "utility-types": "^3.10.0",
     "uuid": "^8.3.2"
   },
@@ -213,6 +214,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/sanitize-html": "^2.6.2",
     "@types/testing-library__jest-dom": "^5.9.1",
+    "@types/throttle-debounce": "^5.0.2",
     "@types/uuid": "^8.3.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-remove-imports": "^1.7.0",