@12-apps/ui 6.89.2 → 6.91.0

package/src/components/data-display/DataViews/data-views-range-calendar.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+/**
+ * The range calendar under a day filter's `De`/`Até` boxes (FUT-4144).
+ *
+ * The owner picked it ALWAYS OPEN (option B of the prototype): a period is
+ * three taps — open the filter, the first day, the last day — against five for
+ * a calendar button in each box and four for a link to a separate sheet. It
+ * sits BELOW the boxes, with no button of its own, so the typed path is not one
+ * keystroke longer than it was.
+ *
+ * The boxes and the calendar are two views of ONE range: a tap writes the
+ * boxes, a typed day moves and repaints the calendar, an impossible typed day
+ * (which writes nothing) leaves it alone, and "Limpar" empties both.
+ *
+ * It is `Calendar` in `selectionMode="range"`, the same one `DateRangePicker`
+ * mounts — not a second calendar. Its own rule picks the period: the first tap
+ * starts it, the second closes it, and a second tap BEFORE the first swaps the
+ * two, so the boxes never show a period backwards.
+ */
+import Box from '@mui/material/Box/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import React from 'react';
+
+import { EN_US_DATA_VIEWS_COPY } from '../../../en-US.data-display';
+import type { Theme } from '@mui/material/styles/index.js';
+import { rem, sxRem } from '../../../tokens/relative';
+import { Calendar, type DateRange } from '../../form/Calendar';
+import { toDayString, toLocalDay } from '../../form/DateRangePicker/DateRangePicker.dates';
+import type { DataViewsDayCalendarCopy } from './data-views-copy';
+import { useDataViewsCopy } from './data-views-copy-context';
+import type { RangeValue } from './data-views-types';
+
+const CALENDAR_CLASS = 'data-views-range-calendar';
+
+/**
+ * `Calendar` draws its own `Paper` with 24px of padding and a shadow. Inside
+ * the filter's popover that reads as a card inside a card, so the inner frame
+ * is flattened through the class hook the component offers for this — the
+ * same thing `DateRangePicker` does.
+ */
+const ROOT_SX = (theme: Theme) => ({
+  mt: { xs: 1, sm: 1.5 },
+  // Below `sm` the caption and the weekday row give up their bottom margins,
+  // so the whole popover fits a 320×568 screen under its pill (FUT-4144).
+  '& :has(> * > [data-testid="calendar-month-select"])': { mb: { xs: 0.5, sm: 2 } },
+  '& :has(> [role="columnheader"])': { mb: { xs: 0, sm: 1 } },
+  '& [role="columnheader"]': { height: { xs: rem(theme, 24), sm: rem(theme, 32) } },
+  // The days carry no column gap of their own (`Calendar`, FUT-4162), so the
+  // seven columns are what a day's 40px target is carved from below `sm`; the
+  // range band and its round endpoints are the Calendar's, untouched here.
+  // The month/year caption on ONE row at 320: the selectors give up the slack
+  // around their text before the arrows are pushed onto a second row.
+  '& [data-testid="calendar-month-select"], & [data-testid="calendar-year-select"]': { px: 0.5, minWidth: 0 },
+  [`& .${CALENDAR_CLASS}`]: {
+    p: 0,
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    // A tapped day already rings itself; the whole grid framed in the primary
+    // colour after every tap is noise in a popover. The frame stays for the
+    // keyboard reaching the grid itself.
+    '&:focus-within': { outline: 'none' },
+    '&:focus-visible': {
+      outline: (theme: Theme) => `${rem(theme, 2)} solid`,
+      outlineColor: 'primary.main',
+      outlineOffset: sxRem(2),
+    },
+  },
+});
+
+/** The two ends of a range, as `Calendar` reads them. */
+function rangeOf(value: RangeValue): DateRange {
+  return {
+    start: toLocalDay(typeof value.min === 'string' ? value.min : null),
+    end: toLocalDay(typeof value.max === 'string' ? value.max : null),
+  };
+}
+
+/**
+ * What a tap on the calendar makes of the range.
+ *
+ * `Calendar` reports the period it holds after the tap: a fresh start (`end`
+ * null) or a closed one, already in order. The one case it cannot see is a
+ * range with only `Até` — typed, or left by a saved view — where its first tap
+ * would drop that `Até`. A first day on or before it keeps it, so "até 15/10"
+ * plus one tap on the 3rd is 03/10–15/10, as the prototype does.
+ */
+export function rangeFromCalendar(previous: RangeValue, picked: DateRange): RangeValue {
+  const min = dayOf(picked.start);
+  const max = dayOf(picked.end) ?? keptEnd(previous, min);
+  return { ...(min ? { min } : {}), ...(max ? { max } : {}) };
+}
+
+const dayOf = (date: Date | null | undefined): string | undefined => (date ? toDayString(date) : undefined);
+
+/** The `Até` of a range that has ONLY one, when the new first day is on or before it. */
+function keptEnd(previous: RangeValue, min: string | undefined): string | undefined {
+  if (previous.min != null || typeof previous.max !== 'string') return undefined;
+  return min && min <= previous.max ? previous.max : undefined;
+}
+
+/**
+ * The month the calendar opens on while `De` is empty. With `De` set it opens
+ * on De's month, which `Calendar` does by itself.
+ *
+ * With two months the current month sits on the RIGHT (setembro | outubro), so
+ * the days a filter usually asks about — the ones just past — are on screen;
+ * with only `Até` set, its month takes that place.
+ */
+function openingMonth(value: RangeValue, months: number): Date | undefined {
+  const end = toLocalDay(typeof value.max === 'string' ? value.max : null);
+  const anchor = end ?? new Date();
+  return new Date(anchor.getFullYear(), anchor.getMonth() - (months > 1 ? 1 : 0), 1);
+}
+
+/** Props of {@link DayRangeCalendar}. */
+export interface DayRangeCalendarProps {
+  /** The filter's own label ("Data"), which names the calendar. */
+  fieldLabel: string;
+  value: RangeValue;
+  /** Called with the range a tap leaves; never for a typed day. */
+  onChange: (range: RangeValue) => void;
+  /**
+   * Months side by side. Two read as a period at a glance where there is room;
+   * one, with the month/year selectors, where there is not.
+   */
+  months: 1 | 2;
+  /**
+   * Changes when the range moved from OUTSIDE the calendar (typed, a preset,
+   * "Limpar"), so the calendar re-opens on it. Never for its own taps: a
+   * calendar that jumped under the finger picking in it would be unusable.
+   */
+  viewKey: string;
+  testId: string;
+}
+
+export function DayRangeCalendar({
+  fieldLabel,
+  value,
+  onChange,
+  months,
+  viewKey,
+  testId,
+}: DayRangeCalendarProps): React.JSX.Element {
+  const copy: DataViewsDayCalendarCopy =
+    useDataViewsCopy().filters.dayCalendar ?? (EN_US_DATA_VIEWS_COPY.filters.dayCalendar as DataViewsDayCalendarCopy);
+  const range = rangeOf(value);
+  const pick = (picked: DateRange) => onChange(rangeFromCalendar(value, picked));
+  const waitingForEnd = Boolean(range.start && !range.end);
+
+  return (
+    <Box sx={ROOT_SX} data-testid={`${testId}-calendar`}>
+      <Calendar
+        key={viewKey}
+        ariaLabel={copy.label(fieldLabel)}
+        className={CALENDAR_CLASS}
+        selectionMode="range"
+        locale={copy.locale}
+        labels={copy.caption}
+        // Sunday first, as a pt-BR calendar reads (`D S T Q Q S S`) and as the
+        // presets' "Esta semana" counts.
+        firstDayOfWeek={0}
+        numberOfMonths={months}
+        // Side by side, a day of the next month in this one is the same day
+        // twice; one month alone keeps them, muted, as a six-week frame.
+        showOutsideDays={months === 1}
+        captionLayout={months > 1 ? 'arrows' : 'selectors'}
+        defaultMonth={openingMonth(value, months)}
+        range={range}
+        // The intermediate callback does the work: the other fires only on the
+        // tap that CLOSES a period, so the first tap would write nothing.
+        onIntermediateRangeChange={pick}
+      />
+      <Typography
+        component="p"
+        aria-live="polite"
+        data-testid={`${testId}-calendar-hint`}
+        sx={{ mt: { xs: 0.25, sm: 1 }, fontSize: sxRem(12), color: 'text.secondary' }}
+      >
+        {waitingForEnd ? copy.pickEnd : copy.pickStart}
+      </Typography>
+    </Box>
+  );
+}

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -17,14 +17,17 @@ import Box from '@mui/material/Box/index.js';
 import Button from '@mui/material/Button/index.js';
 import Popover from '@mui/material/Popover/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import React, { useState } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery/index.js';
+import { useTheme, type Theme } from '@mui/material/styles/index.js';
+import React, { useContext } from 'react';
 
 import { useDataViewsCopy } from "./data-views-copy-context";
 import { TableFilter } from '../../layout/TableFilter';
-import { DayBoundInput } from './data-views-day-input';
-import { NumberBoundInput } from './data-views-number-input';
+import { TableFilterContext } from '../../layout/TableFilter/TableFilterContext';
 import { RangePresets } from './data-views-preset-chips';
-import { useOutsideResetKey } from './data-views-range-reset';
+import { RangeBounds } from './data-views-range-bounds';
+import { RangeSummary } from './data-views-range-summary';
+import { useStillAnchor } from './data-views-still-anchor';
 import { presetsFor } from './data-views-range-presets';
 import {
   isRangeInverted,
@@ -36,126 +39,10 @@ import type { RangeFieldConfig, RangeValue } from './data-views-types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldHeight } from '../../../tokens/field-height';
 import { fieldEdge } from '../../../tokens/field-edge';
-import { sxRem } from '../../../tokens/relative';
-
-
-
-/**
- * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form
- * both the field and the backend speak) and is typed through the masked
- * `dd/mm/aaaa` field rather than a native date input — see
- * {@link DayBoundInput} for why. A number parses, and an unparseable/blank
- * entry CLEARS the bound rather than writing `NaN`.
- */
-function BoundField<T extends Record<string, unknown>>({
-  field,
-  label,
-  value,
-  onChange,
-  testId,
-}: {
-  field: RangeFieldConfig<T>;
-  label: string;
-  value: number | string | undefined;
-  onChange: (bound: number | string | undefined) => void;
-  testId: string;
-}): React.JSX.Element {
-  const copy = useDataViewsCopy();
-  if (field.kind === 'day') {
-    return (
-      <DayBoundInput
-        mask={copy.filters.dayMask}
-        invalidMessage={copy.filters.dayInvalid}
-        label={label}
-        value={value == null ? undefined : String(value)}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-  }
-  return (
-    <NumberBoundInput
-      label={label}
-      value={value}
-      unit={field.unit}
-      onChange={onChange}
-      testId={testId}
-    />
-  );
-}
+import { rem, remPx, sxRem } from '../../../tokens/relative';
 
-
-/**
- * The `De`/`Até` pair for a range — shared by the pill's popover and the
- * slide-in panel's day fields, so the two surfaces cannot drift on what a bound
- * accepts or how it clears.
- */
-export function RangeBounds<T extends Record<string, unknown>>({
-  field,
-  value,
-  onChange,
-  testId,
-}: {
-  field: RangeFieldConfig<T>;
-  value: RangeValue;
-  onChange: (range: RangeValue) => void;
-  testId: string;
-}): React.JSX.Element {
-  const copy = useDataViewsCopy();
-  const inverted = isRangeInverted(value);
-  const { key, emitted } = useOutsideResetKey(value);
-  return (
-    <Box data-testid={`${testId}-panel`}>
-      {/* Above the inputs, not below: the presets are the answer for most
-          merchants, and the two date pickers are the escape hatch. */}
-      <Box sx={{ '&:not(:empty)': { mb: 1.5 } }}>
-        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />
-      </Box>
-      {/* Top-aligned: a day that does not exist grows ITS field by a message
-          line, and centring would push the other box half a line down. The two
-          boxes are one height, so with no message this is the same row. */}
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.5 }}>
-        <BoundField
-          key={`min-${key}`}
-          field={field}
-          label={copy.filters.rangeStart}
-          value={value.min}
-          onChange={(min) => onChange(emitted({ ...value, min }))}
-          testId={`${testId}-min`}
-        />
-        <BoundField
-          key={`max-${key}`}
-          field={field}
-          label={copy.filters.rangeEnd}
-          value={value.max}
-          onChange={(max) => onChange(emitted({ ...value, max }))}
-          testId={`${testId}-max`}
-        />
-      </Box>
-      {inverted && (
-        <Typography
-          component="p"
-          data-testid={`${testId}-inverted`}
-          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'error.main' }}
-        >
-          {copy.filters.rangeInvalid}
-        </Typography>
-      )}
-      {/* BOTH days are in the result. Saying so is FUT-668's other half: the
-          bounds compare as ISO strings precisely so `até` keeps its whole day,
-          and nothing on screen would otherwise tell the merchant that. */}
-      {field.kind === 'day' && !inverted && (
-        <Typography
-          component="p"
-          data-testid={`${testId}-inclusive`}
-          sx={{ mt: 0.75, fontSize: sxRem(12), color: 'text.disabled' }}
-        >
-          {copy.filters.rangeInclusiveNote}
-        </Typography>
-      )}
-    </Box>
-  );
-}
+// Re-exported: the pair moved to its own file, and its importers keep their path.
+export { RangeBounds };
 
 /**
  * The pill + its popover. Bounds commit on change (the list is server-driven, so
@@ -265,6 +152,38 @@ function RangeTrigger<T extends Record<string, unknown>>({
   );
 }
 
+/**
+ * How many months the pill's calendar shows: two from the theme's `md` up,
+ * where the popover has the ~670px they take; one below it.
+ *
+ * A media query, not an `sx` breakpoint, because it decides what to RENDER —
+ * CSS cannot un-render a second month. `up('md')` so that where nothing can be
+ * measured (a test, the server) the answer is the one month that always fits.
+ */
+function useCalendarMonths(): 1 | 2 {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.up('md')) ? 2 : 1;
+}
+
+/**
+ * The day popover's width. Below `sm` it takes the screen's (less the
+ * popover's own 16px margins, which its `maxWidth` already keeps), so the boxes
+ * and the month share it instead of leaving a strip of grid beside a narrow
+ * card. From `sm` to `md` it holds one month, and sized to its content the
+ * preset row alone stretched it to ~515px with the month hugging the left and
+ * a band of nothing beside it; 400 keeps the month and the boxes one width.
+ * From `md` its content — two months — sets it.
+ */
+const DAY_PAPER_SX = (theme: Theme) => ({
+  width: { xs: '100%', sm: rem(theme, 400), md: 'auto' },
+  // Below `sm` 8px from each edge and 8px of padding, so the month gets the
+  // 280px seven 40px day columns need: at 320 it had 256 and every day was a
+  // 33px target (FUT-4144 UI review).
+  maxWidth: { xs: `calc(100% - ${rem(theme, 16)})`, sm: `calc(100% - ${rem(theme, 32)})` },
+  p: { xs: 1, sm: 2 },
+});
+
+
 export function RangePill<T extends Record<string, unknown>>({
   field,
   value,
@@ -279,10 +198,11 @@ export function RangePill<T extends Record<string, unknown>>({
   onOpenChange?: (open: boolean) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
-  const copy = useDataViewsCopy();
-  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
-  const active = isRangeSet(value);
+  const still = useStillAnchor();
   const testId = `${testIdPrefix}-range-${field.id}`;
+  const calendarMonths = useCalendarMonths();
+  const theme = useTheme();
+  const phone = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     <>
       <RangeTrigger
@@ -290,42 +210,30 @@ export function RangePill<T extends Record<string, unknown>>({
         value={value}
         onChange={onChange}
         onOpen={(element) => {
-          setAnchor(element);
+          still.open(element);
           onOpenChange?.(true);
         }}
-        open={Boolean(anchor)}
+        open={Boolean(still.anchor)}
         testId={testId}
       />
       <Popover
-        open={Boolean(anchor)}
-        anchorEl={anchor}
+        {...still.popoverProps}
         onClose={() => {
-          setAnchor(null);
+          still.close();
           onOpenChange?.(false);
         }}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        slotProps={{ paper: { sx: { p: 2, mt: 0.5 } } }}
+        // Below `sm` a day popover keeps 8px from the screen's edges instead of 16.
+        marginThreshold={field.kind === 'day' && phone ? remPx(theme, 8) : undefined}
+        slotProps={{ paper: { ref: still.paperRef, sx: [{ p: 2, mt: 0.5 }, field.kind === 'day' && DAY_PAPER_SX] } }}
       >
-        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />
-        {/* An inverted window is not an error the merchant must fix before the
-            list responds — it simply matches nothing, and saying so beats an
-            empty grid with no explanation (FUT-668). */}
-        {active && (
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>
-            <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
-              {rangeChipLabel(field, value)}
-            </Typography>
-            <Button
-              variant="text"
-              size="small"
-              onClick={() => onChange({})}
-              data-testid={`${testId}-clear`}
-              sx={{ textTransform: 'none' }}
-            >
-              {copy.filters.clear}
-            </Button>
-          </Box>
-        )}
+        <RangeBounds
+          field={field}
+          value={value}
+          onChange={onChange}
+          testId={testId}
+          calendarMonths={calendarMonths}
+        />
+        <RangeSummary field={field} value={value} onClear={() => onChange({})} testId={testId} />
       </Popover>
     </>
   );
@@ -349,13 +257,22 @@ export function PanelRangeField<T extends Record<string, unknown>>({
   testId: string;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
+  // The slide-in panel stays mounted while closed; its calendar does not.
+  // Outside a `TableFilter` (the "Mais" sheet, a test) the pair is on screen.
+  const panel = useContext(TableFilterContext);
   if (field.kind === "day") {
     return (
       <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
         <Typography component="span" sx={{ fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }}>
           {field.label}
         </Typography>
-        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />
+        <RangeBounds
+          field={field}
+          value={value}
+          onChange={onChange}
+          testId={testId}
+          showCalendar={panel ? panel.open : true}
+        />
       </Box>
     );
   }

package/src/components/data-display/DataViews/data-views-range-summary.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import React from 'react';
+
+import { useDataViewsCopy } from './data-views-copy-context';
+import { isRangeSet, rangeChipLabel } from './data-views-range-values';
+import type { RangeFieldConfig, RangeValue } from './data-views-types';
+import { sxRem } from '../../../tokens/relative';
+
+/**
+ * The applied window in words, and "Limpar".
+ *
+ * An inverted window is not an error the merchant must fix before the list
+ * responds — it simply matches nothing, and saying so beats an empty grid with
+ * no explanation (FUT-668).
+ *
+ * A DAY filter keeps the row's height while nothing is applied: its first tap
+ * on the calendar applies a bound, and a row appearing then grew the popover
+ * 26px and moved it 32px up at 320×568, the day under the finger with it
+ * (FUT-4144 UI review round 2). The held row is invisible and inert.
+ */
+export function RangeSummary<T extends Record<string, unknown>>({
+  field,
+  value,
+  onClear,
+  testId,
+}: {
+  field: RangeFieldConfig<T>;
+  value: RangeValue;
+  onClear: () => void;
+  testId: string;
+}): React.JSX.Element | null {
+  const copy = useDataViewsCopy();
+  const active = isRangeSet(value);
+  if (!active && field.kind !== 'day') return null;
+  return (
+    <Box
+      aria-hidden={active ? undefined : true}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 2,
+        mt: { xs: 0.5, sm: 1.5 },
+        visibility: active ? undefined : 'hidden',
+      }}
+    >
+      <Typography component="span" sx={{ fontSize: sxRem(12), color: 'text.secondary' }}>
+        {active ? rangeChipLabel(field, value) : field.label}
+      </Typography>
+      <Button
+        variant="text"
+        size="small"
+        onClick={active ? onClear : undefined}
+        tabIndex={active ? undefined : -1}
+        data-testid={active ? `${testId}-clear` : undefined}
+        sx={{ textTransform: 'none' }}
+      >
+        {copy.filters.clear}
+      </Button>
+    </Box>
+  );
+}

package/src/components/data-display/DataViews/data-views-still-anchor.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import type { PopoverActions } from '@mui/material/Popover/index.js';
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
+
+/**
+ * What the popover hangs from: the trigger's box as it was when it opened —
+ * a MUI "virtual element", so the popover keeps its own anchor origin.
+ */
+interface StillElement {
+  nodeType: 1;
+  getBoundingClientRect: () => DOMRect;
+}
+
+const stillOf = (element: HTMLElement): StillElement => {
+  const box = element.getBoundingClientRect();
+  return { nodeType: 1, getBoundingClientRect: () => box };
+};
+
+/**
+ * A popover that holds STILL while it is open (FUT-4144 UI review round 2).
+ *
+ * Anchored to an element, a popover follows it. A filter applied from inside
+ * one grows the toolbar a "Limpar" and a badge, the trigger moves, and the
+ * panel jumped 55px sideways under the finger that had just tapped a day. The
+ * point it hangs from is read once, when it opens — and again only when the
+ * window itself is resized, which is the one move a reader expects it to make.
+ *
+ * The other move it makes is when its own HEIGHT changes after it was placed
+ * (a preset row settling into a select once measured, a refused day's message):
+ * MUI places a popover once, so a taller one ran off a 320×568 screen. The
+ * paper's size is watched and the popover re-placed, which moves it only when
+ * its height really changed — never on a tap that leaves it the same size.
+ *
+ * Spread `popoverProps` onto a MUI `Popover` and pass `paperRef` as the paper
+ * slot's `ref`.
+ */
+export function useStillAnchor(): {
+  anchor: HTMLElement | null;
+  open: (element: HTMLElement) => void;
+  close: () => void;
+  paperRef: (node: HTMLDivElement | null) => void;
+  popoverProps: {
+    open: boolean;
+    anchorEl: StillElement | null;
+    anchorOrigin: { vertical: 'bottom'; horizontal: 'left' };
+    action: RefObject<PopoverActions | null>;
+  };
+} {
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [still, setStill] = useState<StillElement | null>(null);
+  const action = useRef<PopoverActions | null>(null);
+  const observer = useRef<ResizeObserver | null>(null);
+  const paperRef = useCallback((node: HTMLDivElement | null) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    if (!node || typeof ResizeObserver === 'undefined') return;
+    let height = node.offsetHeight;
+    observer.current = new ResizeObserver(() => {
+      if (node.offsetHeight === height) return;
+      height = node.offsetHeight;
+      action.current?.updatePosition();
+    });
+    observer.current.observe(node);
+  }, []);
+
+  useEffect(() => {
+    if (!anchor) return undefined;
+    // A trigger unmounted while its panel is open reads a zero box: keep the
+    // frozen one rather than send the panel to the corner.
+    const follow = (): void => {
+      if (anchor.isConnected) setStill(stillOf(anchor));
+    };
+    window.addEventListener('resize', follow);
+    return () => window.removeEventListener('resize', follow);
+  }, [anchor]);
+
+  return {
+    anchor,
+    open: (element) => {
+      setStill(stillOf(element));
+      setAnchor(element);
+    },
+    close: () => setAnchor(null),
+    paperRef,
+    popoverProps: {
+      open: Boolean(anchor),
+      anchorEl: anchor ? still : null,
+      anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+      action,
+    },
+  };
+}