@eifi1/ui-kit 0.46.1 → 0.48.0

package/src/components/data-table.tsx

@@ -17,6 +17,17 @@ import {
 } from "./data-table-shared";
 import { MobileFilters, MobileRow, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile";
 import { DataTableHead } from "./data-table-head";
+import { DataTableLeadingRow } from "./data-table-leading-row";
+import {
+  DataTableGroupBand,
+  DataTableLoadMoreFooter,
+  groupLevels,
+  groupRows,
+  useGroupBandTops,
+  type DataTableGroupBy,
+  type DataTableLoadMore,
+} from "./data-table-groups";
+export type { DataTableGroupBy, DataTableLoadMore } from "./data-table-groups";
 import { ColumnSettingsPanel } from "./data-table-column-settings";
 import { useLargeText } from "../hooks/use-large-text";
 import { cn } from "../lib/cn";
@@ -127,6 +138,44 @@ export interface DataTableColumn<T> {
    * end-aligned), its resized width, and drops out with the column when it is hidden.
    */
   footer?: (rows: T[], page: T[]) => ReactNode;
+  /**
+   * This column takes the width the others leave, and its text ellipsises (0.48,
+   * keksdose live #451): `w-full max-w-0` on its cells, so in the table's auto layout it
+   * is "the rest of the row" and one long title can no longer widen the table. One per
+   * table. It has no resize handle, and a width stored for it (before it grew) is
+   * ignored: it always takes the rest. Resize the others to change it. Opt-in: without it nothing
+   * changes. It keeps at least 10rem: with {@link fitPriority} columns the table leaves
+   * those out first, and scrolls sideways once none is left. Every other cell keeps one
+   * line at Normal text size (`whitespace-nowrap`; a column's own
+   * `not-large:whitespace-normal` lets its prose wrap), so a figure or a name is never
+   * broken in two to make room for it.
+   */
+  grow?: boolean;
+  /**
+   * Leave this column out while the TABLE is too narrow for it (0.48, keksdose live
+   * #451) — measured on the table's own scroller, so a sidebar, the window and Large
+   * text count alike. The lowest number goes first (ties: the later column first), and
+   * comes back last, once the scroller is as wide as the table needed with it. Columns
+   * without it never go. Desktop only: the phone's card list is not narrowed.
+   *
+   * The Columns panel counts only what is drawn ("Columns (8/10)") and marks a column
+   * left out this way "hidden for width". Ticking it there keeps it in for as long as
+   * the table is mounted (not persisted): the table makes room by leaving out the next
+   * one instead, and scrolls sideways once none is left. Unticking hides it as any column.
+   */
+  fitPriority?: number;
+  /**
+   * Start this column HIDDEN (0.48, keksdose dev #617) — for as long as the view saved
+   * under `storageKey` holds no entry for it: on a first visit, on a device whose saved
+   * view predates the column (or the flag), and for a column the app adds later. The
+   * user's own choice in the Columns panel always wins: ticking it is remembered
+   * (`shown` in the saved view), unticking it again stores it as any hidden column. The
+   * default itself is never written into the saved view, so dropping the flag brings the
+   * column back on every device where nobody chose. In the panel it is simply unticked —
+   * not "hidden for width", which `fitPriority` alone says. Ignored, like every hidden
+   * column, with `columnSettings={false}`: nothing could bring it back.
+   */
+  defaultHidden?: boolean;
 }
 
 /** A `data-*` attribute, typed so `{ "data-private": "" }` needs no cast. */
@@ -433,7 +482,9 @@ export interface DataTableProps<T> {
    * contiguous (pair with a matching default sort). `mobileGroupLabel` formats
    * the header. Desktop is unaffected. Feedback #317.
    */
-  mobileGroupBy?: (row: T) => string;
+  mobileGroupBy?: ((row: T) => string) | DataTableGroupBy<T>;
+  /** The section header's words for `mobileGroupBy`'s key. Wins over a level's own
+   *  `label` when `mobileGroupBy` is a {@link DataTableGroupBy}. */
   mobileGroupLabel?: (key: string) => ReactNode;
   /**
    * Fully replace the default mobile card body (bold primary + labelled
@@ -505,6 +556,40 @@ export interface DataTableProps<T> {
    * "hide upcoming/scheduled" toggle).
    */
   leadingRow?: ReactNode;
+  /**
+   * 0.48 (keksdose dev #603: "it should rather be sticky, so the user can show hide them
+   * everywhere on click"): pin the {@link leadingRow} under the sticky header while the
+   * rows scroll beneath both — its `top` is the header's measured height. Desktop only,
+   * as `leadingRow` is; it sticks within the table's own scroller (a bounded body:
+   * `fillHeight` or `maxBodyHeight`). Default: it scrolls with the rows.
+   */
+  leadingRowSticky?: boolean;
+  /**
+   * 0.48 (keksdose dev #605): group the desktop table's rows under full-width bands, one
+   * level or two (period → day). Each band is a row header spanning the visible columns
+   * (selection column included, hidden and fit-hidden columns not) with a label and an
+   * end slot (counts, totals), and opens its own `<tbody>`, so a screen reader announces
+   * it as the reader enters the group; the period band opens the first day's. Rows must
+   * already be ordered so equal keys are contiguous (as for `mobileGroupBy`); grouping
+   * runs over the rows on screen, page by page.
+   *
+   * The bands are sticky: the period under the header (and under a sticky
+   * {@link leadingRow}), the day under the period — measured offsets, inside the table's
+   * own scroller (`fillHeight` or `maxBodyHeight`). The `leadingRow` stays above the first
+   * group. On a phone pass the same level to `mobileGroupBy`:
+   * `groupBy={[period, day]} mobileGroupBy={period}`. See {@link DataTableGroupBy}.
+   */
+  groupBy?: DataTableGroupBy<T> | readonly [DataTableGroupBy<T>, DataTableGroupBy<T>?];
+  /**
+   * 0.48 (keksdose dev #605): a "load more" footer in place of the pager. The table
+   * renders every row it is given (as `paginated={false}` does — pass that too, to say
+   * so), and the footer asks the owner for the next slice: as it scrolls into view (an
+   * IntersectionObserver, guarded against double calls while one is in flight) and with
+   * a button the keyboard reaches, named by the app ("Load August 2026"). With
+   * `serverPagination` it replaces that pager as well. Both layouts: on a phone it is the
+   * card list's last item. See {@link DataTableLoadMore}.
+   */
+  loadMore?: DataTableLoadMore;
   /**
    * Row height. `"compact"` is lenkbank's in-card tables: five `text-xs` tables with
    * `px-2 py-1` cells sitting inside cards, which at the default padding came out at
@@ -760,14 +845,17 @@ export const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels = {
 
 const flipDir = (d: SortDir): SortDir => (d === "asc" ? "desc" : "asc");
 
-/** Arrow/Home/End between the focusable rows of one `<tbody>` — the roving half of
+/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of
  *  the keyboard-activatable rows (see the row's `onKeyDown`). */
 function moveRowFocus(from: HTMLElement, key: string): boolean {
   if (!(key in ROW_NAV_KEYS)) return false;
-  const body = from.parentElement;
-  if (!body) return false;
-  const rows = Array.from(body.children).filter(
-    (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute("data-row-nav"),
+  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.
+  const table = from.closest("table");
+  if (!table) return false;
+  const rows = Array.from(table.tBodies).flatMap((body) =>
+    Array.from(body.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute("data-row-nav"),
+    ),
   );
   const i = rows.indexOf(from);
   const target =
@@ -793,6 +881,7 @@ const ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;
 
 import { DEFAULT_PERSIST_PREFIX, useTableState, type TableUrlSync } from "./use-table-state";
 import { useMobileReveal } from "./use-mobile-reveal";
+import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS, useColumnFit } from "./data-table-fit";
 
 export function DataTable<T>({
   rows,
@@ -833,6 +922,9 @@ export function DataTable<T>({
   mobileSwipeActions,
   desktopSwipeActions,
   leadingRow,
+  leadingRowSticky = false,
+  groupBy,
+  loadMore,
   density = "comfortable",
   sortCycle = "tri",
   chrome = "full",
@@ -921,7 +1013,17 @@ export function DataTable<T>({
   // columns are ignored rather than applied: a table cannot be left in a state the
   // user has no control to get out of. They stay in storage untouched, so turning
   // the control back on brings them back.
-  const widths = useMemo(() => (resizable ? storedWidths : {}), [resizable, storedWidths]);
+  // A `grow` column takes the rest of the row by design (0.48): a width stored for it
+  // (a drag or "Auto-size columns" before it grew, KS N2) is ignored, and it has no
+  // handle, so it can never pin it again. Ignored rather than deleted from storage, as
+  // the widths above; the next resize or auto-size writes a blob without it.
+  const widths = useMemo(() => {
+    if (!resizable) return {};
+    const grow = columns.find((c) => c.grow)?.key;
+    if (!grow || !(grow in storedWidths)) return storedWidths;
+    const { [grow]: _ignored, ...rest } = storedWidths;
+    return rest;
+  }, [resizable, storedWidths, columns]);
   const hiddenCols = useMemo(
     () => (columnSettings ? storedHiddenCols : new Set<string>()),
     [columnSettings, storedHiddenCols],
@@ -1017,7 +1119,7 @@ export function DataTable<T>({
   // `paginated={false}` is expressed as "page size = everything" rather than as a
   // second code path, so slicing, the page clamp and the range summary all keep
   // exactly one definition.
-  const unpaged = !isServer && !paginated;
+  const unpaged = !isServer && (!paginated || !!loadMore);
   const effectivePageSize = isServer
     ? serverPagination!.pageSize
     : unpaged || pageSize === Infinity
@@ -1145,10 +1247,22 @@ export function DataTable<T>({
     announce(labels.pageChanged(p + 1, totalPages));
   };
 
+  // 0.48 (keksdose live #451): the `fitPriority` columns the table's width leaves out
+  // (data-table-fit.ts). Desktop only; the scroller is read after render.
+  const { autoHidden, keep: keepColumn } = useColumnFit({
+    columns,
+    hiddenCols,
+    headRefs,
+    scroller: () => desktopScroller.current,
+    enabled: !usePhoneLayout(),
+  });
   const visibleColumns = useMemo(
-    () => columns.filter((c) => !hiddenCols.has(c.key)),
-    [columns, hiddenCols],
+    () => columns.filter((c) => !hiddenCols.has(c.key) && !autoHidden.has(c.key)),
+    [columns, hiddenCols, autoHidden],
   );
+  // With a `grow` column drawn, every other cell keeps one line at Normal (kastlan S2,
+  // 0.48): the `w-full` column squeezed them to their min-content width.
+  const growDrawn = visibleColumns.some((c) => c.grow);
 
   // Which cell carries the row's link when `rowHref` is set (feedback #451). The
   // `mobilePrimary` column is the row's headline by declaration, so it is both the
@@ -1174,7 +1288,8 @@ export function DataTable<T>({
     widths,
     setWidths,
     columns,
-    hiddenCols,
+    // The columns left out for width have no header to measure either.
+    hiddenCols: autoHidden.size > 0 ? new Set([...hiddenCols, ...autoHidden]) : hiddenCols,
   });
 
   const visibleCount = visibleColumns.length;
@@ -1213,6 +1328,19 @@ export function DataTable<T>({
   const isMdUp = !usePhoneLayout();
   // `edgeFade` (0.25) on the desktop scroller; the phone list never scrolls sideways.
   const desktopScroller = useRef<HTMLDivElement | null>(null);
+  // 0.47 (keksdose S4): the scroller's visible width, as `--dt-visible-w` on it, for the
+  // expansion row's pinned content (below). Set on the element, not in state: a resize
+  // re-renders nothing. Only a table that can expand a row measures.
+  // The group bands and the load-more footer pin their content the same way (0.48).
+  const levels = groupLevels(groupBy);
+  const measuresVisibleWidth = isMdUp && (!!expandedRow || levels.length > 0 || !!loadMore);
+  useEffect(() => {
+    const el = desktopScroller.current;
+    if (!measuresVisibleWidth || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => el.style.setProperty("--dt-visible-w", `${el.clientWidth}px`));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [measuresVisibleWidth]);
   const edgeFadeProps = useEdgeFade(desktopScroller, edgeFade && isMdUp);
 
   // ---- Mobile card list (md:hidden) ----
@@ -1408,9 +1536,20 @@ export function DataTable<T>({
   // Consecutive grouping of the (already-sorted) mobile slice into labelled
   // sections for the "assistance"-style list (feedback #317). Null unless the
   // caller opts in via `mobileGroupBy`.
-  const mobileGroups: { key: string; rows: T[] }[] | null = mobileGroupBy
+  // The desktop's bands (0.48, keksdose dev #605), over the rows on screen.
+  const tableRef = useRef<HTMLTableElement | null>(null);
+  const desktopGroups = isMdUp && levels.length > 0 ? groupRows(slice, levels) : null;
+  const bandTops = useGroupBandTops(
+    tableRef,
+    !!desktopGroups,
+    `${levels.length}:${leadingRowSticky && !!leadingRow}:${desktopGroups?.[0]?.key ?? ""}`,
+  );
+  // `mobileGroupBy` may be a desktop `groupBy` level (0.48), its label and end slot too.
+  const mobileLevel = typeof mobileGroupBy === "function" ? null : (mobileGroupBy ?? null);
+  const mobileKey = typeof mobileGroupBy === "function" ? mobileGroupBy : mobileGroupBy?.key;
+  const mobileGroups: { key: string; rows: T[] }[] | null = mobileKey
     ? mobileSlice.reduce<{ key: string; rows: T[] }[]>((acc, row) => {
-        const key = mobileGroupBy(row);
+        const key = mobileKey(row);
         const last = acc[acc.length - 1];
         if (last && last.key === key) last.rows.push(row);
         else acc.push({ key, rows: [row] });
@@ -1548,8 +1687,15 @@ export function DataTable<T>({
           {mobileGroups
             ? mobileGroups.map((g) => (
                 <Fragment key={`hb-group:${g.key}`}>
-                  <li className="sticky top-0 z-10 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur">
-                    {mobileGroupLabel ? mobileGroupLabel(g.key) : g.key}
+                  <li className="sticky top-0 z-10 flex flex-wrap items-baseline justify-between gap-x-3 bg-surface-2 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted backdrop-blur">
+                    <span className="min-w-0">
+                      {mobileGroupLabel
+                        ? mobileGroupLabel(g.key)
+                        : mobileLevel?.label
+                          ? mobileLevel.label(g.key, g.rows)
+                          : g.key}
+                    </span>
+                    {mobileLevel?.end && <span className="ms-auto tabular-nums">{mobileLevel.end(g.key, g.rows)}</span>}
                   </li>
                   {g.rows.map(renderMobileRow)}
                 </Fragment>
@@ -1576,6 +1722,16 @@ export function DataTable<T>({
               <bdi>{labels.loading}</bdi>
             </li>
           )}
+          {/* The owner's next slice (0.48), once every row held is revealed. */}
+          {loadMore && !canRevealMoreMobile && (
+            <DataTableLoadMoreFooter
+              as="li"
+              loadMore={loadMore}
+              rowCount={sorted.length}
+              labels={labels}
+              compact={compact}
+            />
+          )}
         </ul>
         {/* The phone's totals: a summary card after the list rather than one more
             `<li>` in it. The list reveals rows in chunks as it is scrolled, so a last
@@ -1622,7 +1778,7 @@ export function DataTable<T>({
         )}
         {/* Client-side mobile lists scroll endlessly (sentinel above); only
             server-paginated tables keep the pager here. */}
-        {isServer && (
+        {isServer && !loadMore && (
           <Pagination
             page={safePage}
             totalPages={totalPages}
@@ -1683,7 +1839,9 @@ export function DataTable<T>({
             the rows that are about to be replaced, and the dimmed body says the same
             to the eye. The pager stays live — see `ServerPagination.isLoading`. */}
         <table
+          ref={tableRef}
           className={cn("w-full", compact ? "text-xs" : "text-sm")}
+          data-fit-grow={growDrawn ? "" : undefined}
           aria-label={labels.table}
           aria-busy={isLoading || undefined}
         >
@@ -1720,17 +1878,14 @@ export function DataTable<T>({
             moveResize={moveResize}
             finishResize={finishResize}
           />
-          <tbody
-            className={cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity")}
-          >
-            {leadingRow && (
-              <tr className="border-t border-subtle">
-                <td colSpan={totalColSpan} className="p-0">
-                  {leadingRow}
-                </td>
-              </tr>
-            )}
-            {slice.map((row, rowIndex) => {
+          {(() => {
+            const bodyClass = cn(isLoading && slice.length > 0 && "opacity-60 transition-opacity");
+            const leading = leadingRow ? (
+              <DataTableLeadingRow colSpan={totalColSpan} sticky={leadingRowSticky}>
+                {leadingRow}
+              </DataTableLeadingRow>
+            ) : null;
+            const renderRow = (row: T, rowIndex: number) => {
               const expanded = isExpanded?.(row) ?? false;
               const expansion = expanded ? expandedRow?.(row) : null;
               const rowInteractive = !!onRowClick || !!selection;
@@ -1895,6 +2050,7 @@ export function DataTable<T>({
                             "align-top",
                             compact ? "px-2 py-1" : "px-3 py-2",
                             width && "overflow-hidden text-ellipsis",
+                            col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,
                             logicalAlign(own.className),
                             logicalAlign(col.className),
                           )}
@@ -1926,30 +2082,95 @@ export function DataTable<T>({
                           content in `w-0 min-w-full` pins the cell's preferred
                           width to ~0 (the explicit width:0 child), so it can never
                           perturb the columns; the div then fills to the full row
-                          width only at paint time, and long text wraps within it. */}
+                          width only at paint time, and long text wraps within it.
+                          Inside it the content is pinned to what the scroller SHOWS
+                          (0.47, keksdose S4): on a table wider than its scroller a
+                          table-wide panel put an inline editor's Save/Cancel off-screen.
+                          `sticky start-0` holds it at the scroller's start edge (the
+                          right one in RTL) as the row scrolls sideways, and
+                          `--dt-visible-w` (the scroller's clientWidth, measured above)
+                          sizes it; before the first measure, and in a table no wider
+                          than its scroller, it is the full width as before. */}
                       <td colSpan={totalColSpan} className="p-0">
-                        <div className={cn("w-0 min-w-full", compact ? "px-2 py-2" : "px-3 py-3")}>
-                          {expansion}
+                        <div className="w-0 min-w-full">
+                          <div
+                            className={cn(
+                              "sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full",
+                              compact ? "px-2 py-2" : "px-3 py-3",
+                            )}
+                          >
+                            {expansion}
+                          </div>
                         </div>
                       </td>
                     </tr>
                   )}
                 </Fragment>
               );
-            })}
-            {slice.length === 0 && (
-              <tr>
-                <td
-                  colSpan={totalColSpan}
-                  className={cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4")}
-                >
-                  {/* Nothing is not the same as not-yet: "no results" while the first
-                      page is still in flight is a claim the table cannot make. */}
-                  {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? labels.empty)}
-                </td>
-              </tr>
-            )}
-          </tbody>
+            };
+            const emptyRow =
+              slice.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={totalColSpan}
+                    className={cn("text-center text-muted", compact ? "px-2 py-2" : "px-3 py-4")}
+                  >
+                    {/* Nothing is not the same as not-yet: "no results" while the first
+                        page is still in flight is a claim the table cannot make. */}
+                    {isLoading ? <LoadingText label={labels.loading} /> : (empty ?? labels.empty)}
+                  </td>
+                </tr>
+              ) : null;
+            if (!desktopGroups) {
+              return (
+                <tbody className={bodyClass}>
+                  {leading}
+                  {slice.map(renderRow)}
+                  {emptyRow}
+                </tbody>
+              );
+            }
+            // Grouped (0.48, keksdose dev #605): one `<tbody>` per innermost group, its
+            // band the row header; the leading row (and the empty state) in their own
+            // before the first group.
+            const band = (level: 1 | 2, def: DataTableGroupBy<T>, g: { key: string; rows: T[] }) => (
+              <DataTableGroupBand
+                level={level}
+                colSpan={totalColSpan}
+                top={level === 1 ? bandTops[0] : bandTops[1]}
+                compact={compact}
+                label={def.label ? def.label(g.key, g.rows) : g.key}
+                end={def.end?.(g.key, g.rows)}
+              />
+            );
+            const rowsOf = (g: { rows: T[]; start: number }) => g.rows.map((r, i) => renderRow(r, g.start + i));
+            return (
+              <>
+                {(leading || emptyRow) && (
+                  <tbody className={bodyClass}>
+                    {leading}
+                    {emptyRow}
+                  </tbody>
+                )}
+                {desktopGroups.map((g1) =>
+                  g1.children ? (
+                    g1.children.map((g2, j) => (
+                      <tbody key={`g:${g1.key}:${g2.key}:${g2.start}`} className={bodyClass}>
+                        {j === 0 && band(1, levels[0], g1)}
+                        {band(2, levels[1], g2)}
+                        {rowsOf(g2)}
+                      </tbody>
+                    ))
+                  ) : (
+                    <tbody key={`g:${g1.key}:${g1.start}`} className={bodyClass}>
+                      {band(1, levels[0], g1)}
+                      {rowsOf(g1)}
+                    </tbody>
+                  ),
+                )}
+              </>
+            );
+          })()}
           {showFooter && (
             // Sticky to the scroller's bottom edge for the same reason the header is
             // sticky to its top: the body scrolls inside a bounded wrapper, and a
@@ -1993,6 +2214,7 @@ export function DataTable<T>({
                         // A `<th>` centres by default; the label reads from the start
                         // like the cells above it, unless the column says otherwise.
                         isLabel && "text-start",
+                        col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,
                         logicalAlign(col.className),
                       )}
                     >
@@ -2004,8 +2226,13 @@ export function DataTable<T>({
             </tfoot>
           )}
         </table>
+        {/* In the scroller, after the rows (0.48): it comes into view as the last row
+            does, under `fillHeight` too, where the body is the scroller. */}
+        {loadMore && (
+          <DataTableLoadMoreFooter loadMore={loadMore} rowCount={sorted.length} labels={labels} compact={compact} />
+        )}
       </div>
-          {!unpaged && (
+          {!unpaged && !loadMore && (
             <Pagination
               page={safePage}
               totalPages={totalPages}
@@ -2033,6 +2260,8 @@ export function DataTable<T>({
             columns={columns}
             hiddenCols={hiddenCols}
             setHiddenCols={setHiddenCols}
+            autoHidden={autoHidden}
+            keepColumn={keepColumn}
             showSettings={showSettings}
             setShowSettings={setShowSettings}
             columnsCountLabel={columnsCountLabel}

package/src/components/disclosure.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useState } from "react";
+import { Children, Fragment, isValidElement, useEffect, useId, useState } from "react";
 import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 
@@ -262,7 +262,9 @@ export interface DisclosureProps extends Omit<ComponentPropsWithRef<"div">, "tit
    * ```
    */
   controls?: string;
-  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}). */
+  /** The body. Not rendered in trigger-only mode ({@link DisclosureProps.controls}),
+   *  nor when there is none (0.48): no children, no empty box under the header.
+   *  `null`, `false`, `undefined` and an empty fragment (`<></>`) count as none. */
   children?: ReactNode;
 }
 
@@ -312,8 +314,13 @@ export function Disclosure({
   const chevronAtEnd = chevronAt === "end";
   const chevronAfterTitle = chevronAt === "after-title";
   const triggerOnly = controls !== undefined;
+  // 0.48 (keksdose dev #603): no children, no body — an empty padded box under the
+  // header made an open disclosure 8px taller than a shut one, and its `aria-controls`
+  // named a region with nothing in it. `null`, `false` and `undefined` are nothing, and
+  // so is a fragment of nothing (`cond ? <X /> : <></>`, keksdose N1).
+  const hasBody = !triggerOnly && hasBodyContent(children);
   // The card's header squares its lower corners only when a body opens under it.
-  const joined = open && !triggerOnly;
+  const joined = open && hasBody;
   const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;
   // `trailing` beside the button, which then stretches under it; inside the button,
   // the row is simply the button.
@@ -334,7 +341,7 @@ export function Disclosure({
       type="button"
       aria-expanded={open}
       // `||`: an empty `controls` is trigger-only with nothing to name, not `aria-controls=""`.
-      aria-controls={triggerOnly ? controls || undefined : bodyId}
+      aria-controls={triggerOnly ? controls || undefined : hasBody ? bodyId : undefined}
       disabled={disabled}
       onClick={toggle}
       data-disclosure-trigger=""
@@ -424,7 +431,7 @@ export function Disclosure({
       ) : (
         header
       )}
-      {!triggerOnly && (
+      {hasBody && (
         <Collapse id={bodyId} open={open} keepMounted={keepMounted}>
           <div className={cn(card ? "space-y-3 px-4 pb-4" : !menu && "space-y-2 pt-2", bodyClassName)}>{children}</div>
         </Collapse>
@@ -461,3 +468,13 @@ function Chevron({
     />
   );
 }
+
+/** Whether `children` holds anything to draw: `null`/`false`/`undefined`/`""` are nothing,
+ *  and a fragment counts by what is in it (an empty `<></>` is nothing). */
+function hasBodyContent(children: ReactNode): boolean {
+  return Children.toArray(children).some((child) =>
+    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment
+      ? hasBodyContent(child.props.children)
+      : child !== "",
+  );
+}

package/src/components/dropdown.tsx

@@ -3,6 +3,7 @@ import type {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
   KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
   ReactNode,
   Ref,
   RefObject,
@@ -10,7 +11,7 @@ import type {
 import { createPortal } from "react-dom";
 import { Search } from "lucide-react";
 import { anchoredInline, useAnchoredPanel } from "../hooks/use-anchored-panel";
-import { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
+import { pressInside, runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
 import type { DismissLayer } from "../hooks/use-dismiss";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { cn } from "../lib/cn";
@@ -371,6 +372,13 @@ export function DropdownPanel({
     runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));
     takeEscape(e);
   };
+  // A press in a panel opened from a row (a popover, its lists) is inside the list for
+  // `useDropdown`'s outside press, though portalled elsewhere (dev#623).
+  const markInside = pressInside(panelRef);
+  const handlePointerDownCapture = (e: ReactPointerEvent<HTMLDivElement>) => {
+    rest.onPointerDownCapture?.(e);
+    markInside?.(e);
+  };
   const body = (
     <>
       {header}
@@ -399,6 +407,7 @@ export function DropdownPanel({
         style={style}
         ref={setPanel}
         onKeyDown={handleKeyDown}
+        onPointerDownCapture={handlePointerDownCapture}
         className={cn(
           "absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg",
           "[&>ul]:max-h-64",
@@ -425,6 +434,7 @@ export function DropdownPanel({
       ref={setPanel}
       dir={dir}
       onKeyDown={handleKeyDown}
+      onPointerDownCapture={handlePointerDownCapture}
       // The caller's `style` is kept underneath, but the placement is measured rather
       // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel
       // away), so these values are the panel's own. Flipped above, it hangs from its