@homebound/beam 2.273.0 → 2.275.0

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/Table/GridTableApi.d.ts

@@ -42,7 +42,6 @@ export type GridTableApi<R extends Kinded> = {
     isCollapsedRow: (id: string) => boolean;
     setVisibleColumns: (ids: string[]) => void;
     getVisibleColumnIds: () => string[];
-    refetchExpandedColumns: () => void;
 };
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
     readonly tableState: TableState;
@@ -60,5 +59,4 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     isCollapsedRow(id: string): boolean;
     setVisibleColumns(ids: string[]): void;
     getVisibleColumnIds(): string[];
-    refetchExpandedColumns(): void;
 }

package/dist/components/Table/GridTableApi.js

@@ -77,8 +77,5 @@ class GridTableApiImpl {
     getVisibleColumnIds() {
         return this.tableState.visibleColumnIds;
     }
-    refetchExpandedColumns() {
-        this.tableState.refetchExpandedColumns();
-    }
 }
 exports.GridTableApiImpl = GridTableApiImpl;

package/dist/components/Table/utils/TableState.d.ts

@@ -47,7 +47,6 @@ export declare class TableState {
     get sortState(): SortState | undefined;
     setRows(rows: GridDataRow<any>[]): void;
     setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
-    refetchExpandedColumns(): void;
     /** Determines which columns to expand immediately vs async */
     parseAndUpdateExpandedColumns(columnsToExpand: GridColumnWithId<any>[]): Promise<void>;
     /** Updates the state of which columns are expanded */

package/dist/components/Table/utils/TableState.js

@@ -188,22 +188,19 @@ class TableState {
             // Figure out which columns need to be expanded when rendering a new set of columns
             const localStorageColumns = this.persistCollapse ? readExpandedColumnsStorage(this.persistCollapse) : [];
             // On initial render the columns we start with is whatever is in local storage.
-            // On any subsequent render, we start with an empty array.
-            // (We'll add to this after figuring out which columns are new vs existing.)
-            const columnIdsToExpand = isInitial ? localStorageColumns : [];
+            // On subsequent renders we want to keep the columns that were previously expanded.
+            const columnIdsToExpand = isInitial ? localStorageColumns : this.expandedColumnIds;
             // Create a list of all existing column ids. (We ignore the `initExpanded` property for existing columns)
             const existingColumnIds = this.columns.map((c) => c.id);
             // Add any columns to our array that are new columns that should be initially expanded.
             columnIdsToExpand.push(...columns.filter((c) => !existingColumnIds.includes(c.id) && c.initExpanded).map((c) => c.id));
+            // Clear the cache to force to re-fetch the expanded columns.
+            this.loadedColumns.clear();
             // Send the new array of columns along to be parsed and expanded.
             this.parseAndUpdateExpandedColumns(columns.filter((c) => columnIdsToExpand.includes(c.id)));
             this.columns = columns;
         }
     }
-    refetchExpandedColumns() {
-        this.loadedColumns.clear();
-        this.parseAndUpdateExpandedColumns(this.columns.filter((c) => this.expandedColumnIds.includes(c.id)));
-    }
     /** Determines which columns to expand immediately vs async */
     async parseAndUpdateExpandedColumns(columnsToExpand) {
         // Separate out which columns need to be loaded async vs which can be loaded immediately.

package/package.json

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