@homebound/beam 3.55.0 → 3.55.2

package/dist/index.js

@@ -8500,7 +8500,7 @@ function memoizedTableStyles() {
           borderOnHover: highlightOnHover
         },
         levels: grouped ? groupedLevels : defaultLevels,
-        rowHoverColor: "rgba(239, 246, 255, 1)" /* Blue50 */,
+        rowHoverColor: "rgba(247, 245, 245, 1)" /* Gray100 */,
         keptGroupRowCss: {
           backgroundColor: "bgYellow100",
           color: "gray900",
@@ -8758,17 +8758,12 @@ function RowImpl(props) {
       paddingBottom: "pb_25px"
     }
   };
+  const rowHoverBg = style.rowHoverColor !== void 0 && style.rowHoverColor !== "none" ? style.rowHoverColor : "rgba(247, 245, 245, 1)" /* Gray100 */;
   const rowCss = {
     ...!reservedRowKinds.includes(row.kind) && style.nonHeaderRowCss,
     ...isFirstBodyRow && style.firstBodyRowCss,
     ...isFirstHeadRow && style.firstRowCss,
     ...as === "table" && tableRowPrintBreakCss,
-    // Optionally include the row hover styles, by default they should be turned on.
-    ...showRowHoverColor && {
-      backgroundColor: ["h_bgColor_var", {
-        "--h_backgroundColor": maybeCssVar13(style.rowHoverColor ?? "rgba(219, 234, 254, 1)" /* Blue100 */)
-      }]
-    },
     ...levelIndent && {
       marginLeft: ["ml_var", {
         "--marginLeft": `${levelIndent}px`
@@ -8786,7 +8781,14 @@ function RowImpl(props) {
     ...(rowStyle?.rowLink || rowStyle?.onClick) && {
       cursor: "h_cursorPointer"
     },
-    ...maybeApplyFunction(row, rowStyle?.rowCss)
+    ...maybeApplyFunction(row, rowStyle?.rowCss),
+    // Row hover paints cells via Row.css.ts (`.beam-row-hover:hover > *`); set the var via Css.style
+    // (React CSSProperties rejects custom props without a cast).
+    ...showRowHoverColor && {
+      style_rowHoverBgVar_rowHoverBg: {
+        [rowHoverBgVar]: rowHoverBg
+      }
+    }
     // keptLastRowCss is now applied per-cell in cellCss below
   };
   let currentColspan = 1;
@@ -8797,7 +8799,7 @@ function RowImpl(props) {
   const ref = useRef10(null);
   const dragOverCallback = useCallback7((row2, evt) => onDragOver?.(row2, evt), [onDragOver]);
   const onDragOverDebounced = useDebouncedCallback2(dragOverCallback, 100);
-  const RowContent = () => /* @__PURE__ */ jsx30(RowTag, { ...mergeProps_12(BorderHoverParent, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx30(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
+  const RowContent = () => /* @__PURE__ */ jsx30(RowTag, { ...mergeProps_12(`${BorderHoverParent} ${RowHoverClass}`, void 0, rowCss), ...others, "data-gridrow": true, ...getCount(row.id), ref, children: isKeptGroupRow ? /* @__PURE__ */ jsx30(KeptGroupRow, { as, style, columnSizes, row, colSpan: columns.length, isLastBodyRow }) : columns.map((column2, columnIndex) => {
     const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column2;
     const isExpanded = tableState.isExpandedColumn(maybeExpandedColumn.id);
     if (column2.hideOnExpand && isExpanded) {
@@ -9000,10 +9002,13 @@ function RowImpl(props) {
 var Row = observer(RowImpl);
 var BorderHoverParent = "beam-bhp";
 var BorderHoverChild = "beam-bhc";
+var RowHoverClass = "beam-row-hover";
+var rowHoverBgVar = "--beam-row-hover-bg";
 
 // src/components/Table/components/Row.css.ts
 var css = {
-  ".beam-bhp:hover:not(:has(.beam-bhc:hover)) .beam-bhc": Css.ba.bcBlue300.$
+  ".beam-bhp:hover:not(:has(.beam-bhc:hover)) .beam-bhc": Css.ba.bcBlue300.$,
+  ".beam-row-hover:hover > *": Css.bgColor("var(--beam-row-hover-bg)").$
 };
 
 // src/forms/labelUtils.ts
@@ -12061,9 +12066,16 @@ function ListBox(props) {
   const firstRender = useRef22(true);
   const virtuosoListHeight = useRef22(0);
   const onListHeightChange = (listHeight) => {
+    const prevListHeight = virtuosoListHeight.current;
     virtuosoListHeight.current = listHeight;
     const height = (selectedList.current?.offsetHeight || 0) + listHeight;
-    setPopoverHeight(Math.min(popoverMaxHeight, hasSections ? height + persistentItemHeight + sectionSeparatorHeight : height));
+    const next = Math.min(popoverMaxHeight, hasSections ? height + persistentItemHeight + sectionSeparatorHeight : height);
+    setPopoverHeight((prev) => {
+      if (prevListHeight > 0 && listHeight < prevListHeight && next < prev) {
+        return prev;
+      }
+      return next;
+    });
   };
   useEffect12(
     () => {