@homebound/beam 2.274.0 → 2.275.1

package/dist/components/ScrollShadows.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { Palette, Properties } from "..";
+interface ScrollShadowsProps {
+    children: ReactNode;
+    /** Allows for styling the container */
+    xss?: Properties;
+    /** Set to true if the container scrolls horizontally */
+    horizontal?: boolean;
+    /** Defines the background color for the shadows */
+    bgColor?: Palette;
+}
+export declare function ScrollShadows(props: ScrollShadowsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ScrollShadows.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollShadows = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const src_1 = require("..");
+function ScrollShadows(props) {
+    const { children, xss, horizontal = false, bgColor = src_1.Palette.White } = props;
+    const { height = "auto", width = "auto" } = xss !== null && xss !== void 0 ? xss : {};
+    const tid = (0, src_1.useTestIds)(props);
+    // This is admittedly extremely hacky. It expects the background color to be in the format "rgba(255, 255, 255, 1)".
+    // If we ever change how we define our color palette in Beam, then this will break and will need to be fixed.
+    if (!bgColor.includes("rgba")) {
+        throw new Error("ScrollShadows: bgColor prop must be in the format 'rgba(255, 255, 255, 1)'");
+    }
+    const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
+    const startShadowStyles = !horizontal ? src_1.Css.top0.left0.right0.hPx(40).$ : src_1.Css.left0.top0.bottom0.wPx(25).$;
+    const endShadowStyles = !horizontal ? src_1.Css.bottom0.left0.right0.hPx(40).$ : src_1.Css.right0.top0.bottom0.wPx(25).$;
+    const startGradientDeg = !horizontal ? 180 : 90;
+    const endGradientDeg = !horizontal ? 0 : 270;
+    const [showStartShadow, setShowStartShadow] = (0, react_1.useState)(false);
+    const [showEndShadow, setShowEndShadow] = (0, react_1.useState)(false);
+    const scrollRef = (0, react_1.useRef)(null);
+    const updateScrollProps = (0, react_1.useCallback)((el) => {
+        const { scrollTop, scrollHeight, clientHeight, scrollWidth, scrollLeft, clientWidth } = el;
+        const start = horizontal ? scrollLeft : scrollTop;
+        const end = horizontal ? scrollWidth : scrollHeight;
+        const boxSize = horizontal ? clientWidth : clientHeight;
+        setShowStartShadow(start > 0);
+        setShowEndShadow(start + boxSize < end);
+    }, []);
+    // Initially set the state dimensions on render to put the shadows in the correct position
+    (0, utils_1.useLayoutEffect)(() => {
+        scrollRef.current && updateScrollProps(scrollRef.current);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: src_1.Css.relative.overflowHidden
+            .h(height)
+            .w(width)
+            .df.fd(!horizontal ? "column" : "row").$, ...tid, children: [showStartShadow && ((0, jsx_runtime_1.jsx)("div", { css: {
+                    ...startShadowStyles,
+                    ...src_1.Css.absolute.add("background", `linear-gradient(${startGradientDeg}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`).$,
+                } })), showEndShadow && ((0, jsx_runtime_1.jsx)("div", { css: {
+                    ...endShadowStyles,
+                    ...src_1.Css.absolute.add("background", `linear-gradient(${endGradientDeg}deg, ${bgColor} 0%, ${transparentBgColor} 92%)`).$,
+                } })), (0, jsx_runtime_1.jsx)("div", { css: {
+                    ...xss,
+                    ...src_1.Css.overflowAuto.fg1.addIn("&::-webkit-scrollbar", { display: "none" }).add("scrollbarWidth", "none").$,
+                }, onScroll: (e) => updateScrollProps(e.currentTarget), ref: scrollRef, children: children })] }));
+}
+exports.ScrollShadows = ScrollShadows;

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";
 export * from "./Pagination";
 export { PresentationProvider } from "./PresentationContext";
+export * from "./ScrollShadows";
 export * from "./Snackbar";
 export * from "./Stepper";
 export type { Step, StepperProps } from "./Stepper";

package/dist/components/index.js

@@ -51,6 +51,7 @@ Object.defineProperty(exports, "NavLink", { enumerable: true, get: function () {
 __exportStar(require("./Pagination"), exports);
 var PresentationContext_1 = require("./PresentationContext");
 Object.defineProperty(exports, "PresentationProvider", { enumerable: true, get: function () { return PresentationContext_1.PresentationProvider; } });
+__exportStar(require("./ScrollShadows"), exports);
 __exportStar(require("./Snackbar"), exports);
 __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.274.0",
+  "version": "2.275.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",