@homebound/beam 2.295.0 → 2.297.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/Table/GridTableApi.d.ts

@@ -37,6 +37,8 @@ export type GridTableApi<R extends Kinded> = {
     setActiveCellId: (id: string | undefined) => void;
     /** Set selected state of a row by id */
     selectRow: (id: string, selected?: boolean) => void;
+    /** Deletes a row from the table */
+    deleteRows: (ids: string[]) => void;
     /** Toggle collapse state of a row by id */
     toggleCollapsedRow: (id: string) => void;
     isCollapsedRow: (id: string) => boolean;
@@ -59,4 +61,5 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     isCollapsedRow(id: string): boolean;
     setVisibleColumns(ids: string[]): void;
     getVisibleColumnIds(): string[];
+    deleteRows(ids: string[]): void;
 }

package/dist/components/Table/GridTableApi.js

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

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

@@ -67,6 +67,7 @@ export declare class TableState {
     get collapsedIds(): string[];
     isCollapsed(id: string): boolean;
     toggleCollapsed(id: string): void;
+    deleteRows(ids: string[]): void;
     private getMatchedChildrenStates;
     private setNestedSelectedStates;
 }

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

@@ -492,6 +492,16 @@ class TableState {
             sessionStorage.setItem(this.persistCollapse, JSON.stringify(collapsedIds));
         }
     }
+    deleteRows(ids) {
+        this.rows = this.rows.filter((row) => !ids.includes(row.id));
+        this.keptSelectedRows = this.keptSelectedRows.filter((row) => !ids.includes(row.id));
+        ids.forEach((id) => {
+            this.selectedDataRows.delete(id);
+            this.rowSelectedState.delete(id);
+            this.collapsedRows.delete(id);
+            this.matchedRows.delete(id);
+        });
+    }
     getMatchedChildrenStates(children, map) {
         const respectedChildren = children.flatMap(getChildrenForDerivingSelectState);
         // When determining the children selected states to base the parent's state from, then only base this off of rows that match the filter or are in the "hidden selected" group (via the `filter` below)

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.297.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",