@eifi1/ui-kit 0.48.0 → 0.48.2

package/src/data-table.ts

@@ -32,6 +32,8 @@ export type {
 export { swipePlanRowActions } from "./components/data-table-row-actions";
 // 0.48 (keksdose dev #605): a `groupBy` level (also `mobileGroupBy`'s) and the `loadMore` footer.
 export type { DataTableGroupBy, DataTableLoadMore } from "./components/data-table-groups";
+// 0.48.2 (keksdose dev #632): `virtualize`'s options.
+export type { DataTableVirtualize } from "./components/data-table-virtual";
 export * from "./components/data-table-cells";
 export { useTableUrlState, readTableUrlState } from "./components/use-table-state";
 export type {

package/src/hooks/use-anchored-panel.ts

@@ -76,6 +76,8 @@ export function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOp
   return inset >= minimum ? inset : 0;
 }
 
+const UNMEASURED_VIEWPORT: ViewportBox = { top: 0, height: 0 };
+
 function readViewport(): ViewportBox {
   if (typeof window === "undefined") return { top: 0, height: 0 };
   const vv = window.visualViewport;
@@ -356,7 +358,13 @@ export function useAnchoredPanel<T extends HTMLElement>(
   options: AnchoredPanelOptions = {},
 ): AnchoredPanel {
   const rect = useAnchoredRect(ref, open);
-  const [viewport, setViewport] = useState<ViewportBox>(readViewport);
+  // Not read while rendering (0.48.2, keksdose K-052-2): in Chromium `visualViewport`'s
+  // geometry forces a style and layout pass on a dirty DOM, and every anchored panel —
+  // closed ones too — paid it on mount (a bulk bar's pickers appearing on the first
+  // ticked row of a long table paid a layout of the whole table). Nothing reads this
+  // before the layout effect below has filled it: `rect` is null until the panel is open
+  // and measured, and that same effect pass measures the viewport.
+  const [viewport, setViewport] = useState<ViewportBox>(UNMEASURED_VIEWPORT);
   // A panel of rows wants room for the same number of rows at every text size; the gap
   // and the edge margin are not text and stay px.
   const { scale } = useTextSize();

package/src/shell/app-shell.tsx

@@ -564,7 +564,13 @@ export function AppShell({
                 // into the rest from a zero basis, and a window too short for the page's
                 // floor scrolls `<main>`. Every other page lays out as before. Below `md`
                 // the document scrolls and nothing fills.
-                "md:has-[[data-fill-height]]:flex md:has-[[data-fill-height]]:flex-col md:has-[[data-fill-height]]:*:shrink-0",
+                // The children's `shrink-0` carries no `:has`: `flex-shrink` does nothing
+                // outside a flex container, and a `:has(…) > *` rule cost a style recalc of
+                // the whole page on every DOM insertion under it (17–45 ms per scrolled step
+                // of a `virtualize` table, 0.48.2). `[&&>*]` doubles the class, so it stays
+                // as specific as FillHeight's `has-[…]:flex-1` (whose `flex: 1` would set
+                // shrink 1) and, emitted after it, still wins.
+                "md:has-[[data-fill-height]]:flex md:has-[[data-fill-height]]:flex-col md:[&&>*]:shrink-0",
                 // Embedded there is no document scroll to lean on below `md` either.
                 embedded && "min-h-0 overflow-y-auto",
               )}