@12-apps/ui 1.6.3 → 1.8.0

package/src/components/data-display/DataViews/data-views-more-filters.tsx

@@ -2,180 +2,58 @@
 
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
-import { Checkbox, Popover } from "@mui/material";
+import { Popover } from "@mui/material";
 import { useState } from "react";
 
-import { MultiSelectDropdown } from "../../layout/ContentToolbar";
 import { Button } from "../../form/Button";
 import { Box } from "../../../mui/Box";
 import { Text } from "../../typography/Text";
 
+import { fieldClearing, MoreGroup, type MoreFieldProps } from "./data-views-more-fields";
 import type { OverflowField } from "./data-views-overflow";
-import { isRangeSet } from "./data-views-range-values";
-import type { RangeValue } from "./data-views-types";
 
 /**
- * "MAIS" — the filter overflow.
+ * "MAIS" — the filter overflow: its trigger, its panel and its footer. What
+ * goes INSIDE it is `data-views-more-fields`.
  *
- * It holds ONLY the fields that had no room on the toolbar, which is why its
- * badge counts hidden FIELDS rather than active filters: an applied filter
- * keeps its inline control (see `useFilterOverflow`), because a filter you
- * cannot see is a filter you forget you set, and then the list is "wrong" for
- * a reason nothing on screen explains.
- *
- * A field with one or two options renders FLAT — inside a panel there is no
- * space to win back, and two labelled checkboxes are faster than a dropdown
- * needing a second click. Past that it becomes a {@link MultiSelectDropdown}:
- * see `INLINE_OPTION_LIMIT`.
+ * It holds the fields that had no room on the toolbar. An applied filter is
+ * ranked ahead of an idle one for the visible slots but is NOT exempt (see
+ * `useFilterOverflow`), so an applied filter can be in here — on a phone, most
+ * of them are. That is why the trigger changes tone and counts the applied
+ * ones: a filter you cannot see is a filter you forget you set, and the badge
+ * is what stops that.
  */
 
-interface MoreFiltersProps<T extends Record<string, unknown>> {
+interface MoreFiltersProps<T extends Record<string, unknown>> extends MoreFieldProps {
   fields: OverflowField<T>[];
-  pills: Record<string, string[]>;
-  ranges: Record<string, RangeValue>;
-  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;
-  onChangeRange: (fieldId: string, range: RangeValue) => void;
-  testIdPrefix: string;
 }
 
 /**
- * Above this many options a field is a DROPDOWN rather than a flat row of
- * checkboxes. Two options cost two lines and read faster laid out; a "Cliente"
- * with a dozen turns the panel into a scrolling wall and buries every field
- * under it, which is exactly what the overflow was meant to avoid.
+ * The trigger, badged with how many fields had no room on the bar — and told
+ * apart when some of them are APPLIED.
+ *
+ * An applied filter can land in here now (it is ranked first, not exempt), so
+ * this button is the only thing on screen still saying it exists. A neutral
+ * badge reading "3" would make "three filters you have not used" and "three
+ * filters narrowing this list" look identical, which is the whole failure the
+ * old exemption was written to avoid. So an overflow holding applied filters
+ * takes the applied tone and counts them in its own badge.
  */
-const INLINE_OPTION_LIMIT = 2;
-
-/** One overflowed pill: its options as checkboxes, all visible at once. */
-function OverflowPill<T extends Record<string, unknown>>({
-  field,
-  values,
-  onToggle,
-  onClear,
-  testIdPrefix,
-}: {
-  field: OverflowField<T>;
-  values: string[];
-  onToggle: (value: string, checked: boolean) => void;
-  onClear: () => void;
-  testIdPrefix: string;
-}): React.JSX.Element {
-  const options = field.pill?.options ?? [];
-  if (options.length > INLINE_OPTION_LIMIT) {
-    return (
-      <MultiSelectDropdown
-        label={field.pill?.label ?? field.label}
-        options={options}
-        selected={new Set(values)}
-        onToggle={onToggle}
-        onClear={onClear}
-        allLabel="Todas"
-        searchable={options.length > 6 ? true : undefined}
-        searchPlaceholder="Buscar…"
-        noResultsLabel="Nenhum resultado"
-        layout="pill"
-        data-testid={`${testIdPrefix}-more-${field.id}`}
-      />
-    );
-  }
-  return (
-    <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.75 }}>
-      {(field.pill?.options ?? []).map((option) => {
-        const checked = values.includes(option.value);
-        return (
-          <Box
-            key={option.value}
-            component="label"
-            data-testid={`${testIdPrefix}-more-${field.id}-${option.value}`}
-            sx={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 0.25,
-              pr: 1,
-              border: 1,
-              borderStyle: "solid",
-              borderColor: checked ? "primary.main" : "divider",
-              bgcolor: checked ? "action.selected" : "transparent",
-              borderRadius: 5,
-              cursor: "pointer",
-              fontSize: "0.8125rem",
-              color: checked ? "primary.main" : "text.secondary",
-            }}
-          >
-            <Checkbox
-              size="small"
-              checked={checked}
-              onChange={(event) => onToggle(option.value, event.target.checked)}
-              inputProps={{ "aria-label": `${field.label}: ${option.label}` }}
-            />
-            {option.label}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-/** One overflowed range: its two bounds, as the same inputs the pill uses. */
-function OverflowRange<T extends Record<string, unknown>>({
-  field,
-  value,
-  onChange,
-  testIdPrefix,
-}: {
-  field: OverflowField<T>;
-  value: RangeValue;
-  onChange: (range: RangeValue) => void;
-  testIdPrefix: string;
-}): React.JSX.Element {
-  const day = field.range?.kind === "day";
-  const set = (bound: "min" | "max", raw: string): void => {
-    const next: RangeValue = { ...value };
-    if (raw === "") delete next[bound];
-    else next[bound] = day ? raw : Number(raw);
-    onChange(next);
-  };
-  return (
-    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-      {(["min", "max"] as const).map((bound, index) => (
-        <Box key={bound} sx={{ display: "contents" }}>
-          {index === 1 && <Box component="span" sx={{ color: "text.disabled" }}>–</Box>}
-          <Box
-            component="input"
-            type={day ? "date" : "number"}
-            placeholder={bound === "min" ? "de" : "até"}
-            aria-label={`${field.label} ${bound === "min" ? "de" : "até"}`}
-            data-testid={`${testIdPrefix}-more-${field.id}-${bound}`}
-            value={value[bound] ?? ""}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => set(bound, event.target.value)}
-            sx={{
-              width: "100%",
-              px: 1,
-              py: 0.75,
-              border: 1,
-              borderStyle: "solid",
-              borderColor: "divider",
-              borderRadius: 1,
-              font: "inherit",
-              fontSize: "0.8125rem",
-            }}
-          />
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
-/** The trigger, badged with how many fields had no room on the bar. */
 function MoreTrigger({
   count,
+  appliedCount,
+  compact,
   onOpen,
   testIdPrefix,
 }: {
   count: number;
+  appliedCount: number;
+  /** Icon only — the same rung that strips Exibir/Exportar. */
+  compact: boolean;
   onOpen: (anchor: HTMLElement) => void;
   testIdPrefix: string;
 }): React.JSX.Element {
+  const applied = appliedCount > 0;
   return (
     <Button
       variant="outline"
@@ -183,64 +61,47 @@ function MoreTrigger({
       color="neutral"
       onClick={(event) => onOpen(event.currentTarget as HTMLElement)}
       dataTestId={`${testIdPrefix}-more-filters`}
-      aria-label={`Mais filtros: ${count} sem espaço na barra`}
+      aria-label={
+        applied
+          ? `Mais filtros: ${count} sem espaço na barra, ${appliedCount} aplicado(s)`
+          : `Mais filtros: ${count} sem espaço na barra`
+      }
     >
-      <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
+      <Box
+        component="span"
+        sx={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.5,
+          color: applied ? "primary.main" : undefined,
+        }}
+      >
         <TuneRoundedIcon fontSize="small" />
-        <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-          Mais
-        </Box>
+        {!compact && (
+          <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+            Mais
+          </Box>
+        )}
         <Box
           component="span"
-          sx={{ px: 0.75, borderRadius: 5, bgcolor: "action.selected", fontSize: "0.6875rem" }}
+          data-testid={`${testIdPrefix}-more-badge`}
+          sx={{
+            px: 0.75,
+            borderRadius: 5,
+            bgcolor: applied ? "primary.main" : "action.selected",
+            color: applied ? "primary.contrastText" : undefined,
+            fontSize: "0.6875rem",
+            fontWeight: applied ? 700 : undefined,
+          }}
         >
-          {count}
+          {applied ? appliedCount : count}
         </Box>
-        <KeyboardArrowDownRoundedIcon fontSize="small" />
+        {!compact && <KeyboardArrowDownRoundedIcon fontSize="small" />}
       </Box>
     </Button>
   );
 }
 
-/** One labelled group in the panel: the field's name, then its control. */
-function MoreGroup<T extends Record<string, unknown>>({
-  field,
-  pills,
-  ranges,
-  onTogglePill,
-  onChangeRange,
-  testIdPrefix,
-}: {
-  field: OverflowField<T>;
-} & Omit<MoreFiltersProps<T>, "fields">): React.JSX.Element {
-  return (
-    <Box sx={{ mb: 1.5, "&:last-of-type": { mb: 0 } }}>
-      <Text variant="caption" as="p">
-        <Box component="span" sx={{ display: "block", mb: 0.5, color: "text.secondary" }}>
-          {field.label}
-          {field.group === "range" && isRangeSet(ranges[field.id] ?? {}) ? " •" : ""}
-        </Box>
-      </Text>
-      {field.group === "pill" ? (
-        <OverflowPill
-          field={field}
-          values={pills[field.id] ?? []}
-          onToggle={(value, checked) => onTogglePill(field.id, value, checked)}
-          onClear={() => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false))}
-          testIdPrefix={testIdPrefix}
-        />
-      ) : (
-        <OverflowRange
-          field={field}
-          value={ranges[field.id] ?? {}}
-          onChange={(range) => onChangeRange(field.id, range)}
-          testIdPrefix={testIdPrefix}
-        />
-      )}
-    </Box>
-  );
-}
-
 /** The panel's heading: what these are, and why they are in here. */
 function MoreHeading(): React.JSX.Element {
   return (
@@ -269,30 +130,121 @@ function MoreHeading(): React.JSX.Element {
   );
 }
 
+/**
+ * The panel's own way back to the unfiltered list.
+ *
+ * The bar's "Limpar" is the primary one, but it is a control like any other
+ * and the ladder can take its label — and on the narrowest rungs this panel is
+ * where most of the fields ended up anyway. Clearing everything from inside it
+ * saves closing it to reach a button three pixels wide.
+ */
+function MoreFooter({
+  onClearAll,
+  testIdPrefix,
+}: {
+  onClearAll: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Box sx={{ px: 1.5, py: 1, borderTop: 1, borderColor: "divider" }}>
+      <Box
+        component="button"
+        type="button"
+        onClick={onClearAll}
+        data-testid={`${testIdPrefix}-more-clear-all`}
+        sx={{
+          width: "100%",
+          border: 0,
+          p: 0,
+          bgcolor: "transparent",
+          cursor: "pointer",
+          font: "inherit",
+          fontSize: "0.8125rem",
+          textAlign: "left",
+          color: "primary.main",
+          "&:hover": { textDecoration: "underline" },
+        }}
+      >
+        Limpar todos os filtros
+      </Box>
+    </Box>
+  );
+}
+
 /** The overflow trigger + panel. Renders nothing when everything fits. */
 export function MoreFilters<T extends Record<string, unknown>>({
   fields,
+  onOpenChange,
+  onClearAll,
+  anyApplied,
+  compact = false,
   ...rest
-}: MoreFiltersProps<T>): React.JSX.Element | null {
+}: MoreFiltersProps<T> & {
+  /** Icon only — the same rung that strips Exibir/Exportar. */
+  compact?: boolean;
+  /** Clears every filter, not just the ones in here. */
+  onClearAll: () => void;
+  /** Whether anything is applied anywhere — the footer is pointless otherwise. */
+  anyApplied: boolean;
+  /**
+   * So the shell can FREEZE the measured split while this panel is open.
+   *
+   * Applying a filter in here makes its field active, and an active field
+   * takes an inline slot first — so the field being edited was promoted OUT of
+   * this panel mid-keystroke, taking the focused input with it. Typing "12"
+   * got as far as "1" and then had nowhere to go.
+   */
+  onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element | null {
   const [anchor, setAnchor] = useState<HTMLElement | null>(null);
   if (fields.length === 0) return null;
   return (
     <>
-      <MoreTrigger count={fields.length} onOpen={setAnchor} testIdPrefix={rest.testIdPrefix} />
+      <MoreTrigger
+        count={fields.length}
+        appliedCount={
+          fields.filter(
+            (field) =>
+              fieldClearing({
+                field,
+                pills: rest.pills,
+                ranges: rest.ranges,
+                onTogglePill: rest.onTogglePill,
+                onChangeRange: rest.onChangeRange,
+              }).applied,
+          ).length
+        }
+        compact={compact}
+        onOpen={(element) => {
+          setAnchor(element);
+          onOpenChange?.(true);
+        }}
+        testIdPrefix={rest.testIdPrefix}
+      />
       <Popover
         open={Boolean(anchor)}
         anchorEl={anchor}
-        onClose={() => setAnchor(null)}
+        onClose={() => {
+          setAnchor(null);
+          onOpenChange?.(false);
+        }}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
         slotProps={{ paper: { sx: { width: 300, maxWidth: "calc(100vw - 32px)" } } }}
       >
         <Box data-testid={`${rest.testIdPrefix}-more-panel`}>
           <MoreHeading />
-          <Box sx={{ maxHeight: 320, overflowY: "auto", p: 1.5 }}>
+          {/* overflowX hidden, not auto: this panel is a fixed 300px and its
+              contents are told to shrink into it. A horizontal scrollbar here
+              means something refused to, which is a bug to fix rather than a
+              scrollbar to live with. */}
+          <Box sx={{ maxHeight: 320, overflowY: "auto", overflowX: "hidden", p: 1.5, minWidth: 0 }}>
             {fields.map((field) => (
               <MoreGroup key={field.id} field={field} {...rest} />
             ))}
           </Box>
+          {anyApplied && (
+            <MoreFooter onClearAll={onClearAll} testIdPrefix={rest.testIdPrefix} />
+          )}
         </Box>
       </Popover>
     </>

package/src/components/data-display/DataViews/data-views-overflow-costs.ts

@@ -0,0 +1,100 @@
+/**
+ * WHAT EACH THING ON THE TOOLBAR COSTS, IN PIXELS.
+ *
+ * The pricing half of the collapse ladder, split from `data-views-overflow` at
+ * the file-size gate. Pure arithmetic and constants: no React, no measurement,
+ * no decisions. `data-views-overflow` measures the row and spends what this
+ * says it has.
+ *
+ * Every number here is either MEASURED in a browser (and says so) or
+ * deliberately generous. Over-pricing sheds one control too early, which the
+ * "Mais" button absorbs invisibly; under-pricing breaks the line.
+ */
+import type { OverflowField } from "./data-views-overflow";
+import type { RangeValue } from "./data-views-types";
+
+/**
+ * Rough rendered width of a control, in px.
+ *
+ * An ESTIMATE from the label text rather than a real measurement, deliberately:
+ * measuring the true width needs every control mounted first, and mounting them
+ * to decide whether to mount them is the layout thrash this hook exists to
+ * avoid. The estimate only has to rank controls and find the cut point — being
+ * a few px out moves the cut by at most one control, and the overflow catches it.
+ */
+export function estimateWidth(text: string, extra: number): number {
+  /**
+   * ~7.6px per character at the toolbar's font size, plus 76px of chrome:
+   * horizontal padding, the border, and the dropdown chevron. The chrome used
+   * to be 52, which under-priced every control by roughly a chevron's width —
+   * six of them then "fitted" a row they overflowed, and because they are flex
+   * children the row paid for it by squeezing labels to "D…" and "V…" rather
+   * than by shedding a control into the overflow.
+   *
+   * Deliberately generous: over-pricing sheds one control too early, which the
+   * "Mais" button absorbs invisibly. Under-pricing breaks the line.
+   */
+  return Math.round(text.length * 7.6) + 76 + extra;
+}
+
+/** Is a range bounded at either end? */
+export function isRangeSet(range: RangeValue | undefined): boolean {
+  return Boolean(range && (range.min !== undefined || range.max !== undefined));
+}
+
+/** The label a pill actually renders, which is what decides its width. */
+export function pillText<T extends Record<string, unknown>>(field: OverflowField<T>, values: string[]): string {
+  if (values.length === 0) return field.label;
+  if (values.length === 1) {
+    const option = field.pill?.options.find((entry) => entry.value === values[0]);
+    return `${field.label}: ${option?.label ?? values[0]}`;
+  }
+  return `${field.label}: ${values.length}`;
+}
+
+/** Fixed toolbar furniture the filters have to fit around, in px. */
+export const RESERVED = {
+  /** The search box never shrinks below this. */
+  search: 200,
+  /** The "N de N" counter. */
+  counter: 96,
+  /** Exibir + Exportar WITH their text labels. */
+  right: 216,
+  /**
+   * The same two controls as icons only — step 2 of the ladder.
+   *
+   * MEASURED at 133px for the pair (66 each: a Button's minimum tap target is
+   * a good deal wider than the 20px glyph inside it), so the old 96 under-priced
+   * them by a third and the row went on believing it had room it did not.
+   */
+  rightCompact: 140,
+  /** What step 4 leaves behind: the search as a bare magnifier. */
+  searchIcon: 44,
+  /**
+   * The narrowest keyword box still worth typing into — below it the operator
+   * cannot read back what they wrote, and the box takes over the cluster
+   * instead of sharing it (see `searchTakeover`).
+   *
+   * 120 rather than 140 because this is compared against the ESTIMATE, which
+   * over-prices on purpose (see `estimateWidth`). At 140 a large phone took the
+   * whole cluster to produce a box barely wider than the one it could have had
+   * while keeping its filters — paying for nothing.
+   */
+  usableSearch: 120,
+  /** The "Mais" button, only charged when there IS an overflow. */
+  overflowButton: 104,
+  /**
+   * "Limpar", only charged when there IS something to clear.
+   *
+   * It appears exactly when the row is at its widest — every applied filter
+   * has a longer label than the idle one it replaced — so leaving it unpriced
+   * would break the line at the one moment the operator most needs it.
+   * Measured at 64 as an icon; 72 with slack.
+   */
+  clearAll: 72,
+  /** Gaps + the row's own padding. */
+  chrome: 64,
+} as const;
+
+/** The gap between two controls. */
+export const GAP = 8;