@homebound/beam 2.295.0 → 2.296.0

package/dist/Css.d.ts

@@ -408,6 +408,26 @@ declare class CssBuilder<T extends Properties> {
     boxShadow(value: Properties["boxShadow"]): CssBuilder<T & {
         boxShadow: import("csstype").Property.BoxShadow | undefined;
     }>;
+    /** Sets `containerType: "size"`. */
+    get cts(): CssBuilder<T & {
+        containerType: import("csstype").Property.ContainerType | undefined;
+    }>;
+    /** Sets `containerType: "inline-size"`. */
+    get ctis(): CssBuilder<T & {
+        containerType: import("csstype").Property.ContainerType | undefined;
+    }>;
+    /** Sets `containerType: "normal"`. */
+    get ctn(): CssBuilder<T & {
+        containerType: import("csstype").Property.ContainerType | undefined;
+    }>;
+    /** Sets `containerType: value`. */
+    ct(value: Properties["containerType"]): CssBuilder<T & {
+        containerType: import("csstype").Property.ContainerType | undefined;
+    }>;
+    /** Sets `containerName: value`. */
+    cn(value: Properties["containerName"]): CssBuilder<T & {
+        containerName: import("csstype").Property.ContainerName | undefined;
+    }>;
     /** Sets `top: "0px"`. */
     get top0(): CssBuilder<T & {
         top: import("csstype").Property.Top<string | 0> | undefined;
@@ -3993,6 +4013,7 @@ declare class CssBuilder<T extends Properties> {
     if(cond: boolean): CssBuilder<T>;
     if(attr: string, value: boolean | string): CssBuilder<T>;
     get onHover(): CssBuilder<T>;
+    ifContainer(props: ContainerProps): CssBuilder<T>;
     get ifPrint(): CssBuilder<T>;
     get ifSm(): CssBuilder<T>;
     get ifMd(): CssBuilder<T>;
@@ -4102,4 +4123,22 @@ export declare enum Breakpoints {
     lg = "@media screen and (min-width:1025px)",
     mdOrLg = "@media screen and (min-width:600px)"
 }
+/**
+ * Utility to help write `@container` queries
+ *
+ * @param name - The name of the container.
+ * @param lt - The maximum width of the container inclusive.
+ * @param gt - The minimum width of the container exclusive.
+ */
+type ContainerProps = {
+    name?: string;
+} & ({
+    lt: number;
+} | {
+    gt: number;
+} | {
+    lt: number;
+    gt: number;
+});
+export declare function Container(props: ContainerProps): string;
 export {};

package/dist/Css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Breakpoints = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
+exports.Container = exports.Breakpoints = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
 class CssBuilder {
     constructor(opts) {
         this.opts = opts;
@@ -399,6 +399,27 @@ class CssBuilder {
     boxShadow(value) {
         return this.add("boxShadow", value);
     }
+    // container
+    /** Sets `containerType: "size"`. */
+    get cts() {
+        return this.add("containerType", "size");
+    }
+    /** Sets `containerType: "inline-size"`. */
+    get ctis() {
+        return this.add("containerType", "inline-size");
+    }
+    /** Sets `containerType: "normal"`. */
+    get ctn() {
+        return this.add("containerType", "normal");
+    }
+    /** Sets `containerType: value`. */
+    ct(value) {
+        return this.add("containerType", value);
+    }
+    /** Sets `containerName: value`. */
+    cn(value) {
+        return this.add("containerName", value);
+    }
     // coordinates
     /** Sets `top: "0px"`. */
     get top0() {
@@ -3546,6 +3567,9 @@ class CssBuilder {
     get onHover() {
         return this.newCss({ selector: ":hover" });
     }
+    ifContainer(props) {
+        return this.newCss({ selector: Container(props) });
+    }
     get ifPrint() {
         return this.newCss({ selector: "@media print" });
     }
@@ -3715,3 +3739,13 @@ var Breakpoints;
     Breakpoints["lg"] = "@media screen and (min-width:1025px)";
     Breakpoints["mdOrLg"] = "@media screen and (min-width:600px)";
 })(Breakpoints = exports.Breakpoints || (exports.Breakpoints = {}));
+function Container(props) {
+    const { name = "" } = props;
+    const lt = "lt" in props ? props.lt : undefined;
+    const gt = "gt" in props ? props.gt : undefined;
+    const ltQuery = lt !== undefined ? `(max-width: ${lt}px)` : "";
+    const gtQuery = gt !== undefined ? `(min-width: ${gt + 1}px)` : "";
+    const query = [ltQuery, gtQuery].filter(Boolean).join(" and ");
+    return `@container ${name} ${query}`;
+}
+exports.Container = Container;

package/dist/components/DnDGrid/DnDGrid.js

@@ -118,11 +118,14 @@ function DnDGrid(props) {
         if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
             initReorder();
             // Determine the position of the pointer relative to the element being dragged.
+            const gridRect = gridEl.current.getBoundingClientRect();
             const rect = dragEl.current.getBoundingClientRect();
             const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
             const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+            const top = rect.top - gridRect.top;
+            const left = rect.left - gridRect.left;
             // Store the pointer's offset from the tile being moved to help correctly position the element as we drag it around.
-            transformFrom.current = { x: clientX - rect.left, y: clientY - rect.top };
+            transformFrom.current = { x: clientX - left, y: clientY - top };
             // Duplicate the draggable element as a placeholder to show as a drop target
             cloneEl.current = dragEl.current.cloneNode();
             (_a = cloneEl.current) === null || _a === void 0 ? void 0 : _a.setAttribute("style", `border-width: 2px; border-color: ${src_1.Palette.Gray400}; border-style: dashed; width:${rect.width}px; height:${rect.height}px;`);
@@ -136,7 +139,7 @@ function DnDGrid(props) {
             gridEl.current.insertBefore(cloneEl.current, dragEl.current.nextSibling);
             // Apply styles to the actual element to make it look like it's being dragged.
             // This will remove it from the normal flow of the page, allowing the clone above to take its place.
-            dragEl.current.setAttribute("style", `pointer-events: none; position:fixed; z-index: 9999; top:${rect.top}px; left:${rect.left}px; width:${rect.width}px; height:${rect.height}px;`);
+            dragEl.current.setAttribute("style", `pointer-events: none; position:fixed; z-index: 9999; top:${top}px; left:${left}px; width:${rect.width}px; height:${rect.height}px;`);
             // Applies cursor styling to the Grid element.
             gridEl.current.style.cursor = "grabbing";
             // Add event listeners to move the element as the user drags it around.
@@ -224,7 +227,7 @@ function DnDGrid(props) {
         }
     }, [cancelReorder, commitReorder, initReorder, getGridItems]);
     return ((0, jsx_runtime_1.jsx)(DnDGridContext_1.DnDGridContext.Provider, { value: { dragEl, onDragHandleKeyDown }, children: (0, jsx_runtime_1.jsx)("div", { ref: gridEl, css: {
-                ...src_1.Css.dg.addIn(`& .${activeGridItemClass}`, activeItemStyles !== null && activeItemStyles !== void 0 ? activeItemStyles : src_1.Css.bshModal.$).$,
+                ...src_1.Css.ctis.dg.addIn(`& .${activeGridItemClass}`, activeItemStyles !== null && activeItemStyles !== void 0 ? activeItemStyles : src_1.Css.bshModal.$).$,
                 ...gridStyles,
             }, onTouchStart: onDragStart, onMouseDown: onDragStart, onTouchEnd: onDragEnd, onMouseUp: onDragEnd, ...tid, children: children }) }));
 }

package/dist/components/Grid/ResponsiveGrid.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+import { useResponsiveGridProps } from "..";
+export interface ResponsiveGridProps extends PropsWithChildren<useResponsiveGridProps> {
+}
+/** Helper component for generating a responsive grid */
+export declare function ResponsiveGrid(props: ResponsiveGridProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Grid/ResponsiveGrid.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveGrid = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const components_1 = require("..");
+/** Helper component for generating a responsive grid */
+function ResponsiveGrid(props) {
+    const { children, ...hookProps } = props;
+    const { gridStyles } = (0, components_1.useResponsiveGrid)(hookProps);
+    return (0, jsx_runtime_1.jsx)("div", { css: { ...gridStyles }, children: children });
+}
+exports.ResponsiveGrid = ResponsiveGrid;

package/dist/components/Grid/ResponsiveGridItem.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+export interface ResponsiveGridItemProps extends PropsWithChildren<{
+    colSpan: number;
+}> {
+}
+/** Helper component for generating grid items with the ResponsiveGrid */
+export declare function ResponsiveGridItem(props: ResponsiveGridItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Grid/ResponsiveGridItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveGridItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const src_1 = require("../..");
+/** Helper component for generating grid items with the ResponsiveGrid */
+function ResponsiveGridItem(props) {
+    const { colSpan, children } = props;
+    const { gridItemProps } = (0, src_1.useResponsiveGridItem)({ colSpan });
+    return (0, jsx_runtime_1.jsx)("div", { ...gridItemProps, children: children });
+}
+exports.ResponsiveGridItem = ResponsiveGridItem;

package/dist/components/Grid/index.d.ts

@@ -0,0 +1,7 @@
+export { ResponsiveGrid } from "./ResponsiveGrid";
+export type { ResponsiveGridProps } from "./ResponsiveGrid";
+export { ResponsiveGridItem } from "./ResponsiveGridItem";
+export type { ResponsiveGridItemProps } from "./ResponsiveGridItem";
+export { useResponsiveGrid } from "./useResponsiveGrid";
+export type { useResponsiveGridProps } from "./useResponsiveGrid";
+export { useResponsiveGridItem } from "./useResponsiveGridItem";

package/dist/components/Grid/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveGridItem = exports.useResponsiveGrid = exports.ResponsiveGridItem = exports.ResponsiveGrid = void 0;
+var ResponsiveGrid_1 = require("./ResponsiveGrid");
+Object.defineProperty(exports, "ResponsiveGrid", { enumerable: true, get: function () { return ResponsiveGrid_1.ResponsiveGrid; } });
+var ResponsiveGridItem_1 = require("./ResponsiveGridItem");
+Object.defineProperty(exports, "ResponsiveGridItem", { enumerable: true, get: function () { return ResponsiveGridItem_1.ResponsiveGridItem; } });
+var useResponsiveGrid_1 = require("./useResponsiveGrid");
+Object.defineProperty(exports, "useResponsiveGrid", { enumerable: true, get: function () { return useResponsiveGrid_1.useResponsiveGrid; } });
+var useResponsiveGridItem_1 = require("./useResponsiveGridItem");
+Object.defineProperty(exports, "useResponsiveGridItem", { enumerable: true, get: function () { return useResponsiveGridItem_1.useResponsiveGridItem; } });

package/dist/components/Grid/useResponsiveGrid.d.ts

@@ -0,0 +1,13 @@
+import { Properties } from "../..";
+export interface useResponsiveGridProps {
+    minColumnWidth: number;
+    gap: number;
+    columns: number;
+}
+/**
+ * Returns the styles for a responsive grid.
+ * Use in tandem with the `useResponsiveGridItem` hook to generate props for each grid item to ensure proper behavior at breakpoints.
+ */
+export declare function useResponsiveGrid(props: useResponsiveGridProps): {
+    gridStyles: Properties;
+};

package/dist/components/Grid/useResponsiveGrid.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveGrid = void 0;
+const react_1 = require("react");
+const src_1 = require("../..");
+const utils_1 = require("./utils");
+/**
+ * Returns the styles for a responsive grid.
+ * Use in tandem with the `useResponsiveGridItem` hook to generate props for each grid item to ensure proper behavior at breakpoints.
+ */
+function useResponsiveGrid(props) {
+    const { minColumnWidth, gap, columns } = props;
+    const gridStyles = (0, react_1.useMemo)(() => {
+        const gapCount = columns - 1;
+        const totalGapWidth = gap * gapCount;
+        const maxColumnWidth = `calc((100% - ${totalGapWidth}px) / ${columns})`;
+        const gridTemplateColumns = `repeat(auto-fill, minmax(max(${minColumnWidth}px, ${maxColumnWidth}), 1fr))`;
+        const gridGap = `${gap}px`;
+        // Generate the container queries for each possible colspan for grid items.
+        const gridItemSpanStyles = Array.from({ length: columns }, (_, i) => {
+            const span = i + 1;
+            // Generate the CSS selectors for each grid item that spans `span` columns.
+            const targets = Array.from({ length: columns - span }, (_, s) => `& > [${utils_1.gridItemDataAttribute}='${s + span + 1}']`).join(", ");
+            // Define the breakpoint values for the container query.
+            const minWidth = span === 1 ? 0 : minColumnWidth * span + gap * i;
+            const maxWidth = minColumnWidth * (span + 1) + gap * span;
+            const style = {
+                // Using the `targets` selector, add the container query for the grid item.
+                // `targets` may be empty when the span is the same as the number of columns.
+                ...(targets
+                    ? src_1.Css.addIn(targets, src_1.Css.ifContainer({ gt: minWidth, lt: maxWidth }).gc(`span ${span}`).$).$
+                    : undefined),
+                // Add the default style for the grid item as a helper for the implementer to not have to define their `grid-column: span X`
+                // Uses `&&` selector to change the selector value to avoid being overridden by above container query.
+                ...(span !== 1
+                    ? src_1.Css.addIn(`&& > [${utils_1.gridItemDataAttribute}='${span}']`, src_1.Css.ifContainer({ gt: minWidth }).gc(`span ${span}`).$).$
+                    : undefined),
+            };
+            return style;
+        }).filter((s) => Object.keys(s).length > 0);
+        return {
+            ...src_1.Css.dg.gtc(gridTemplateColumns).ctis.gap(gridGap).$,
+            ...Object.assign({}, ...gridItemSpanStyles),
+        };
+    }, [minColumnWidth, gap, columns]);
+    return { gridStyles };
+}
+exports.useResponsiveGrid = useResponsiveGrid;

package/dist/components/Grid/useResponsiveGridItem.d.ts

@@ -0,0 +1,7 @@
+export declare function useResponsiveGridItem({ colSpan }: {
+    colSpan?: number;
+}): {
+    gridItemProps: {
+        "data-grid-item-span": number;
+    };
+};

package/dist/components/Grid/useResponsiveGridItem.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveGridItem = void 0;
+const utils_1 = require("./utils");
+function useResponsiveGridItem({ colSpan = 1 }) {
+    return { gridItemProps: { [utils_1.gridItemDataAttribute]: colSpan } };
+}
+exports.useResponsiveGridItem = useResponsiveGridItem;

package/dist/components/Grid/utils.d.ts

@@ -0,0 +1 @@
+export declare const gridItemDataAttribute = "data-grid-item-span";

package/dist/components/Grid/utils.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridItemDataAttribute = void 0;
+exports.gridItemDataAttribute = "data-grid-item-span";

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export * from "./Copy";
 export * from "./CssReset";
 export * from "./DnDGrid";
 export * from "./Filters";
+export * from "./Grid";
 export { HbLoadingSpinner, HbSpinnerProvider, HB_QUIPS_FLAVOR, HB_QUIPS_MISSION } from "./HbLoadingSpinner";
 export * from "./Icon";
 export * from "./IconButton";

package/dist/components/index.js

@@ -35,6 +35,7 @@ __exportStar(require("./Copy"), exports);
 __exportStar(require("./CssReset"), exports);
 __exportStar(require("./DnDGrid"), exports);
 __exportStar(require("./Filters"), exports);
+__exportStar(require("./Grid"), exports);
 var HbLoadingSpinner_1 = require("./HbLoadingSpinner");
 Object.defineProperty(exports, "HbLoadingSpinner", { enumerable: true, get: function () { return HbLoadingSpinner_1.HbLoadingSpinner; } });
 Object.defineProperty(exports, "HbSpinnerProvider", { enumerable: true, get: function () { return HbLoadingSpinner_1.HbSpinnerProvider; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.295.0",
+  "version": "2.296.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
     "@homebound/eslint-config": "1.6.1",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.61.1",
-    "@homebound/truss": "^1.128.1",
+    "@homebound/truss": "^1.129.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",