@12-apps/ui 1.6.2 → 1.7.0

package/src/components/data-display/DataViews/data-views-scopes.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { Box } from "../../../mui/Box";
 
 /**
- * SCOPES — a page-level partition rendered as a strip of tabs above the toolbar.
+ * SCOPES — a page-level partition rendered as a strip of tabs under the toolbar.
  *
  * A scope is not a filter. Filters NARROW within the current partition and are
  * multi-select by design; a scope PARTITIONS and is exclusive. The distinction
@@ -302,7 +302,7 @@ const STRIP_SX = {
 } as const;
 
 /**
- * The scope strip: a horizontally scrolling tab list above the toolbar.
+ * The scope strip: a horizontally scrolling tab list under the toolbar.
  *
  * It SCROLLS rather than collapsing into a select on a narrow screen, which is
  * the opposite of what the filter pills do — and deliberately. The counts are

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -15,6 +15,21 @@ import { Box } from "../../../mui/Box";
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
 
+/**
+ * How wide the keyword box is allowed to be.
+ *
+ * The 200px floor is right while the box shares the row: a search you cannot
+ * read six characters in is not a search. It is WRONG once the box has been
+ * expanded out of its collapsed state on a narrow screen, where the cluster was
+ * sized for a magnifier — the floor cannot be met there, so the row scrolled
+ * sideways instead (154px of overhang at 320px). In that mode the box shrinks,
+ * and if what is left would still be unreadable the bar hands it the whole
+ * cluster instead (`searchTakeover`).
+ */
+function boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: number | "none" } {
+  return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? "none" : 384 };
+}
+
 /**
  * The bar's keyword box.
  *
@@ -34,6 +49,7 @@ export function InlineKeyword({
   testId,
   autoFocus,
   onEscape,
+  fill = false,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -41,6 +57,8 @@ export function InlineKeyword({
   autoFocus?: boolean;
   /** Called on Escape with the box already empty — the collapsed bar closes it. */
   onEscape?: () => void;
+  /** Take whatever width there is, with no minimum — see {@link boxWidth}. */
+  fill?: boolean;
 }): React.JSX.Element {
   const [draft, setDraft] = useState(value);
   const prev = useRef(value);
@@ -98,7 +116,7 @@ export function InlineKeyword({
       }}
       // Takes the free space and gives it up first — step 3 of the ladder,
       // which needs no flag because flex does it (see `computeSplit`).
-      sx={{ flex: 1, minWidth: 200, maxWidth: 384 }}
+      sx={boxWidth(fill)}
     />
   );
 }

package/src/components/data-display/DataViews/data-views-shell-toolbar.tsx

@@ -25,6 +25,7 @@ export function ShellToolbar<T extends Record<string, unknown>>({
   toolbarRightSlot,
   showInline,
   compactControls,
+  counterHidden,
   sortKinds,
   displayView,
   exportConfig,
@@ -46,6 +47,8 @@ export function ShellToolbar<T extends Record<string, unknown>>({
   showInline: boolean;
   /** Step 2 of the ladder: Exibir/Exportar as icons only. */
   compactControls?: boolean;
+  /** Step 5, last resort: drop the counter so the row still fits one line. */
+  counterHidden?: boolean;
 }): React.JSX.Element {
   const columnOptions: ColumnVisibilityOption[] = c.hideableColumns.map((col) => ({
     id: col.id,
@@ -61,6 +64,7 @@ export function ShellToolbar<T extends Record<string, unknown>>({
       filterControls={filterControls}
       barRef={barRef}
       compactControls={compactControls}
+      counterHidden={counterHidden}
       testIdPrefix={testIdPrefix}
       selectedRows={c.selectedRows}
       selectAll={c.selectAll}

package/src/components/data-display/DataViews/data-views-toolbar.tsx

@@ -60,6 +60,12 @@ export interface GridToolbarProps<T extends Record<string, unknown>> {
    * has already given them up.
    */
   compactControls?: boolean;
+  /**
+   * Step 5 of the ladder, and its floor: on a screen too narrow for even the
+   * fully-collapsed row, the counter is dropped so the controls still fit one
+   * line instead of spilling outside the toolbar.
+   */
+  counterHidden?: boolean;
 }
 
 /** The right-aligned toolbar controls: Sort By, the counter, zoom/layout/columns, filters. */
@@ -67,27 +73,31 @@ function ToolbarRightControls<T extends Record<string, unknown>>(props: GridTool
   const { testIdPrefix, matchedCount, totalCount, filterOpen, setFilterOpen } = props;
   return (
     <>
-      <Text variant="caption" as="span">
-        {/* Always rendered, never breakpointed: `RESERVED.counter` already
-            prices it into the collapse ladder, so hiding it at `md` was the
-            ladder and a breakpoint disagreeing about the same pixels — which
-            is what broke the row at exactly 900px. */}
-        <Box
-          component="span"
-          data-testid={`${testIdPrefix}-counter`}
-          sx={{ whiteSpace: "nowrap" }}
-        >
-          {matchedCount} de {totalCount}
-        </Box>
-      </Text>
-      {/* Divides the READING of the list from the controls that change it —
-          the counter states what is on screen, everything right of here acts
-          on it. */}
-      <Divider
-        orientation="vertical"
-        flexItem
-        sx={{ height: 20, alignSelf: "center", mx: 0.5 }}
-      />
+      {/* MEASURED, never breakpointed: `RESERVED.counter` prices it into the
+          ladder, so hiding it at `md` was the ladder and a breakpoint
+          disagreeing about the same pixels — which broke the row at exactly
+          900px. It is dropped only as the ladder's last rung. */}
+      {!props.counterHidden && (
+        <>
+          <Text variant="caption" as="span">
+            <Box
+              component="span"
+              data-testid={`${testIdPrefix}-counter`}
+              sx={{ whiteSpace: "nowrap" }}
+            >
+              {matchedCount} de {totalCount}
+            </Box>
+          </Text>
+          {/* Divides the READING of the list from the controls that change it —
+              the counter states what is on screen, everything right of here
+              acts on it. */}
+          <Divider
+            orientation="vertical"
+            flexItem
+            sx={{ height: 20, alignSelf: "center", mx: 0.5 }}
+          />
+        </>
+      )}
       {props.toolbarRightSlot}
       {/* Sort + columns + format, in ONE control — see DataViewsDisplayPanel. */}
       <DataViewsDisplayPanel

package/src/components/data-display/DataViews/data-views-types.ts

@@ -1,5 +1,8 @@
 import type { GridColumn, GridSort } from "../DataGrid";
 import type { DropdownMenuItem } from "../../navigation/DropdownMenu";
+// A re-export does not bring the name into local scope, and the state/query
+// types below are written in terms of it.
+import type { RangeValue } from "./data-views-range-types";
 
 /**
  * Shared types for the reusable admin "DataViews" table (FUT-88): a filter bar
@@ -106,54 +109,18 @@ export interface FilterFieldConfig<T extends Record<string, unknown>> {
 }
 
 /**
- * A selected range for a range filter (either bound optional). Numbers for a
- * `number` field; `AAAA-MM-DD` day strings for a `day` one — which compare
- * correctly with `<`/`>` precisely because ISO days sort lexicographically.
+ * The range types live in `data-views-range-types` (this file outgrew the
+ * size gate); they are re-exported here so `data-views-types` stays the one
+ * name every consumer imports the model from.
  */
-export interface RangeValue {
-  min?: number | string;
-  max?: number | string;
-}
-
-/** What a range field measures — the input it renders and the bound it stores. */
-export type RangeFieldKind = "number" | "day";
-
-interface RangeFieldBase {
-  /** Stable id; the key under `DataViewState.ranges`. */
-  id: string;
-  label: string;
-}
-
-/** "Filter by amount": price, stock, margin, order total. */
-export interface NumberRangeFieldConfig<T extends Record<string, unknown>> extends RangeFieldBase {
-  kind?: "number";
-  /** Reads the row's numeric value for this range. */
-  accessor: (row: T) => number | null | undefined;
-  /** Optional unit suffix shown next to the inputs (e.g. "R$", "un"). */
-  unit?: string;
-  /** Numeric input step. Defaults to 1. */
-  step?: number;
-}
-
-/**
- * "Filter by period": a pair of INCLUSIVE calendar days, rendered as two native
- * date inputs. Inclusive is the reason a day range is its own kind rather than a
- * number over timestamps — coercing an `até` of `2026-07-15` to a instant lands
- * on that day's midnight and drops the whole final day (FUT-668).
- */
-export interface DayRangeFieldConfig<T extends Record<string, unknown>> extends RangeFieldBase {
-  kind: "day";
-  /** Reads the row's `AAAA-MM-DD` day for this range. */
-  accessor: (row: T) => string | null | undefined;
-}
-
-/**
- * A min/max range filter's configuration. Complements the multi-select pills.
- * A row with a null/undefined value never matches a bounded range.
- */
-export type RangeFieldConfig<T extends Record<string, unknown>> =
-  | NumberRangeFieldConfig<T>
-  | DayRangeFieldConfig<T>;
+export type {
+  DayRangeFieldConfig,
+  NumberRangeFieldConfig,
+  RangeFieldConfig,
+  RangeFieldKind,
+  RangePreset,
+  RangeValue,
+} from "./data-views-range-types";
 
 /** A grid column that can join the search scan and the column-visibility menu. */
 export interface DataViewColumn<T extends Record<string, unknown>> extends GridColumn<T> {

package/src/components/data-display/DataViews/index.ts

@@ -35,6 +35,7 @@ export type {
   RangeFieldConfig,
   RangeFieldKind,
   RangeValue,
+  RangePreset,
   NumberRangeFieldConfig,
   DayRangeFieldConfig,
   DataViewPersistence,

package/src/components/data-display/DataViews/pedidos.server.ts

@@ -0,0 +1,118 @@
+import type { DataViewQuery, RangeValue } from "./data-views-types";
+
+/**
+ * THE "SERVER" FOR THE PEDIDOS STORY.
+ *
+ * Server mode means the grid does not filter, sort or paginate — it emits the
+ * query and renders exactly the page it is handed back. A story that wires
+ * `onQueryChange` to a no-op spy therefore looks broken in a specific and
+ * misleading way: the pills apply, the counter never moves, and every row
+ * stays. The controls are working; there is simply nobody on the other end.
+ *
+ * So this is the other end. It is deliberately fenced into its own module and
+ * written the way the real endpoint is: it is the ONLY code allowed to narrow
+ * the dataset, and the story never reaches past `data`.
+ */
+
+/** The subset of a row this fake backend knows how to query. */
+export interface ServerRow extends Record<string, unknown> {
+  pedido: string;
+  cliente: string;
+  metodo: string;
+  pagamento: string;
+  situacao: string;
+  dataIso: string;
+  valor: number;
+}
+
+export interface ServerPage<T> {
+  data: T[];
+  totalCount: number;
+  /**
+   * Per-scope totals over search + pills + ranges, IGNORING the active scope —
+   * computed with it applied, every inactive tab reads zero.
+   */
+  scopeCounts: Record<string, number>;
+}
+
+/** A row matches a pill field when ANY selected value matches. */
+function matchesPills(row: ServerRow, pills: Record<string, string[]>): boolean {
+  return Object.entries(pills).every(([fieldId, values]) => {
+    if (!values || values.length === 0) return true;
+    return values.includes(String(row[fieldId] ?? ""));
+  });
+}
+
+/**
+ * Ranges. A DAY bound is compared as an ISO STRING, never coerced to a
+ * timestamp: turning an `até` of 2026-07-15 into an instant lands on that day's
+ * midnight and silently drops the final day (FUT-668). Both ends are inclusive.
+ */
+function matchesRanges(row: ServerRow, ranges: Record<string, RangeValue>): boolean {
+  return Object.entries(ranges).every(([fieldId, range]) => {
+    if (!range || (range.min == null && range.max == null)) return true;
+    const value = fieldId === "data" ? row.dataIso : row.valor;
+    if (value == null) return false;
+    if (range.min != null && value < range.min) return false;
+    if (range.max != null && value > range.max) return false;
+    return true;
+  });
+}
+
+function matchesSearch(row: ServerRow, search: string): boolean {
+  const term = search.trim().toLowerCase();
+  if (!term) return true;
+  return [row.pedido, row.cliente, row.metodo].some((field) =>
+    String(field).toLowerCase().includes(term),
+  );
+}
+
+/** The scopes this story declares, as predicates over a row's `situacao`. */
+const SCOPES: Record<string, (row: ServerRow) => boolean> = {
+  todos: () => true,
+  "Em aberto": (row) => row.situacao === "Em aberto",
+  Cancelado: (row) => row.situacao === "Cancelado",
+};
+
+function compare(a: ServerRow, b: ServerRow, id: string): number {
+  const left = a[id];
+  const right = b[id];
+  if (typeof left === "number" && typeof right === "number") return left - right;
+  return String(left ?? "").localeCompare(String(right ?? ""), "pt-BR");
+}
+
+/**
+ * Answer one query: narrow, count, scope, sort, then cut the page.
+ *
+ * `scopeCounts` is computed BEFORE the scope is applied, which is the whole
+ * reason it cannot be done in the browser — a count taken from the loaded page
+ * is wrong the moment there is a second page.
+ */
+export function queryPedidos(rows: ServerRow[], query: DataViewQuery): ServerPage<ServerRow> {
+  const narrowed = rows.filter(
+    (row) =>
+      matchesSearch(row, query.search) &&
+      matchesPills(row, query.pills) &&
+      matchesRanges(row, query.ranges ?? {}),
+  );
+
+  const scopeCounts = Object.fromEntries(
+    Object.entries(SCOPES).map(([id, predicate]) => [id, narrowed.filter(predicate).length]),
+  );
+
+  const predicate = query.scope ? SCOPES[query.scope] : undefined;
+  const scoped = predicate ? narrowed.filter(predicate) : narrowed;
+
+  const sorted = [...scoped];
+  const sort = query.sortBy?.[0];
+  if (sort) {
+    sorted.sort((a, b) => (sort.dir === "asc" ? compare(a, b, sort.id) : compare(b, a, sort.id)));
+  }
+
+  const start = (query.page - 1) * query.pageSize;
+  return {
+    data: sorted.slice(start, start + query.pageSize),
+    totalCount: scoped.length,
+    scopeCounts,
+  };
+}

package/src/components/data-display/DataViews/use-data-views-state.ts

@@ -58,7 +58,7 @@ interface UseDataViewsStateArgs<T extends Record<string, unknown>> {
    */
   server?: DataViewServer;
   /**
-   * The page-level partition rendered as tabs above the toolbar. Requires server
+   * The page-level partition rendered as tabs under the toolbar. Requires server
    * mode: a scope is applied at the BACKEND, never in the browser.
    */
   scopes?: ScopeConfig[];

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -120,7 +120,22 @@ function BrowsingClusters({
       {/* minWidth:0 lets this cluster be the one that gives up width as the row
        * tightens, which is what the filter overflow measures against. */}
       {leadingControls !== undefined && (
-        <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1, minWidth: 0 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            flexGrow: 1,
+            minWidth: 0,
+            // The collapse ladder has a FLOOR — below roughly 400px even the
+            // fully-collapsed row does not fit, and its controls cannot shrink
+            // (they are flexShrink:0 so an over-packed row sheds instead of
+            // squeezing). Past that point this scrolls rather than letting them
+            // paint outside the toolbar, which is what a narrow phone did.
+            overflowX: 'auto',
+            // No scrollbar gutter stealing height on the common case.
+            scrollbarWidth: 'thin',
+          }}
+        >
           {leadingControls}
         </Box>
       )}

package/src/components/layout/ContentToolbar/MultiSelectDropdown.tsx

@@ -93,7 +93,15 @@ export function MultiSelectDropdown<TValue extends string = string>({
 
   const renderTrigger = (): React.JSX.Element => {
     if (stacked) return <StackedTrigger label={label} {...triggerProps} />;
-    if (layout === 'pill') return <PillTrigger label={label} selectedCount={selected.size} {...triggerProps} />;
+    if (layout === 'pill')
+      return (
+        <PillTrigger
+          label={label}
+          selectedCount={selected.size}
+          onClear={onClear}
+          {...triggerProps}
+        />
+      );
     return <InlineTrigger label={label} {...triggerProps} />;
   };
 

package/src/components/layout/ContentToolbar/MultiSelectTriggers.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import CloseIcon from '@mui/icons-material/Close';
 import ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { Box, Button, Typography } from '@mui/material';
 import React, { useId } from 'react';
@@ -107,7 +108,8 @@ export function PillTrigger({
   onOpen,
   testId,
   selectedCount,
-}: TriggerProps & { selectedCount: number }): React.JSX.Element {
+  onClear,
+}: TriggerProps & { selectedCount: number; onClear?: () => void }): React.JSX.Element {
   const active = selectedCount > 0;
   return (
     <Button
@@ -118,6 +120,42 @@ export function PillTrigger({
       aria-haspopup="menu"
       aria-expanded={open}
       onClick={onOpen}
+      // Clearing lives ON the pill: the filter and the way to remove it are one
+      // control, so removing one does not mean finding it again in a second
+      // list somewhere else on the page.
+      startIcon={
+        active && onClear ? (
+          <Box
+            component="span"
+            role="button"
+            tabIndex={0}
+            aria-label={`Limpar ${label}`}
+            data-testid={testId ? `${testId}-clear` : undefined}
+            onClick={(event: React.MouseEvent) => {
+              // The pill's own click opens the menu; clearing must not.
+              event.stopPropagation();
+              onClear();
+            }}
+            onKeyDown={(event: React.KeyboardEvent) => {
+              if (event.key !== 'Enter' && event.key !== ' ') return;
+              event.preventDefault();
+              event.stopPropagation();
+              onClear();
+            }}
+            sx={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              cursor: 'pointer',
+              color: 'primary.main',
+              '&:hover': { bgcolor: 'primary.main', color: 'primary.contrastText' },
+            }}
+          >
+            <CloseIcon sx={{ fontSize: 14 }} />
+          </Box>
+        ) : undefined
+      }
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
         borderRadius: 999,