@homebound/beam 2.175.0 → 2.176.0

package/dist/components/CssReset.js

@@ -54,6 +54,12 @@ const ourReset = (0, react_1.css) `
       transform: rotate(360deg);
     }
   }
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.6;
+    }
+  }
 `;
 // Copy/pasted from TW which uses this as their base reset.
 const modernNormalizeReset = (0, react_1.css) `

package/dist/components/Layout/ScrollableContent.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode, ReactPortal } from "react";
-/** Helper component for placing scrollable content within a `ScrollableParent`. */
-export declare function ScrollableContent(props: {
+interface ScrollableContentProps {
     children: ReactNode;
     virtualized?: boolean;
-}): ReactPortal | JSX.Element;
+    omitBottomPadding?: true;
+}
+/** Helper component for placing scrollable content within a `ScrollableParent`. */
+export declare function ScrollableContent(props: ScrollableContentProps): ReactPortal | JSX.Element;
+export {};

package/dist/components/Layout/ScrollableContent.js

@@ -9,7 +9,7 @@ const ScrollableParent_1 = require("./ScrollableParent");
 const Css_1 = require("../../Css");
 /** Helper component for placing scrollable content within a `ScrollableParent`. */
 function ScrollableContent(props) {
-    const { children, virtualized = false } = props;
+    const { children, virtualized = false, omitBottomPadding } = props;
     const { scrollableEl, setPortalTick, pl } = (0, ScrollableParent_1.useScrollableParent)();
     (0, react_1.useEffect)(() => {
         // The below `tick` logic is a way to detect whether the ScrollableContent is being used.
@@ -22,7 +22,7 @@ function ScrollableContent(props) {
     if (!scrollableEl) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
     }
-    return (0, react_dom_1.createPortal)(!virtualized ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: ScrollableParent_1.scrollContainerBottomPadding }, { children: children }), void 0)) : (
+    return (0, react_dom_1.createPortal)(!virtualized ? (omitBottomPadding ? (children) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: ScrollableParent_1.scrollContainerBottomPadding }, { children: children }), void 0))) : (
     // To prevent Virtuoso's scrollbar from being set in based on the Layout's padding, we will use the FullBleed component w/o padding to push it back over
     (0, jsx_runtime_1.jsx)(FullBleed_1.FullBleed, Object.assign({ omitPadding: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.pl(pl).$ }, { children: children }), void 0) }), void 0)), scrollableEl);
 }

package/dist/components/Layout/ScrollableParent.js

@@ -32,7 +32,7 @@ function ScrollableParent(props) {
         scrollableRef.current.appendChild(scrollableEl);
     }, [scrollableEl]);
     return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsxs)(Tag, Object.assign({ css: { ...Css_1.Css.mh0.mw0.fg1.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-                        ...Css_1.Css.pl(context.pl).pr(context.pr),
+                        ...Css_1.Css.pl(context.pl).pr(context.pr).$,
                         ...(!hasScrollableContent ? { ...Css_1.Css.overflowAuto.$, ...exports.scrollContainerBottomPadding } : undefined),
                     } }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.pl(context.pl).pr(context.pr).$, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
 }

package/dist/components/LoadingSkeleton.d.ts

@@ -0,0 +1,10 @@
+declare type Sizes = "sm" | "md" | "lg";
+export declare type LoadingSkeletonProps = {
+    rows?: number;
+    columns?: number;
+    size?: Sizes;
+    randomizeWidths?: boolean;
+    contrast?: boolean;
+};
+export declare function LoadingSkeleton({ rows, columns, size, randomizeWidths, contrast, }: LoadingSkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingSkeleton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingSkeleton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Css_1 = require("../Css");
+function LoadingSkeleton({ rows = 1, columns = 1, size = "md", randomizeWidths = false, contrast = false, }) {
+    const cellArray = [...Array(columns)];
+    const rowArray = [...Array(rows)];
+    const rowHeight = sizeToPixels[size];
+    const rowCells = (rowNumber) => {
+        const flexGrowForCell = randomizeWidths ? getRandomizedFlexBasisByRowIndex(rowNumber) : 1;
+        return cellArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br4
+                .add("animation", "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite")
+                .add("flexGrow", flexGrowForCell)
+                .bgGray300.if(contrast).bgGray700.$ }, `row-${rowNumber}-cell-${i}`)));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-label": "Loading" }, { children: rowArray.map((_, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.df.childGap1.mb1.hPx(rowHeight).$ }, { children: rowCells(i) }), `row-${i}`))) }), void 0));
+}
+exports.LoadingSkeleton = LoadingSkeleton;
+/** Create the illusion of random widths by cycling through a list of widths that look nice in order */
+function getRandomizedFlexBasisByRowIndex(rowIndex) {
+    const randomizedFlexBasisValues = [0.65, 0.8, 0.75, 0.9, 0.8, 0.85, 0.8, 0.95];
+    const valueIndex = rowIndex % randomizedFlexBasisValues.length;
+    return randomizedFlexBasisValues[valueIndex];
+}
+const sizeToPixels = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Layout";
 export * from "./Loader";
+export * from "./LoadingSkeleton";
 export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";

package/dist/components/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./Icon"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./Layout"), exports);
 __exportStar(require("./Loader"), exports);
+__exportStar(require("./LoadingSkeleton"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Modal/useModal"), exports);
 var NavLink_1 = require("./NavLink");

package/package.json

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