@12-apps/ui 1.6.3 → 1.8.0

package/src/components/data-display/DataViews/data-views-bar-controls.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * THE TWO BARE AFFORDANCES ON THE FILTER BAR.
+ *
+ * Neither opens anything, which is what sets them apart from every other
+ * control on that row and why they are styled flat rather than as outlined
+ * pills: one clears the filters, one leaves a search takeover. Giving them a
+ * pill's weight made "Limpar" read as a sixth filter.
+ *
+ * Their own module because `data-views-inline-bar` outgrew the file-size gate.
+ */
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
+import { Tooltip } from "@mui/material";
+
+import { Box } from "../../../mui/Box";
+
+/**
+ * "Limpar" — one gesture back to the unfiltered list.
+ *
+ * Present ONLY while something is applied, and last in the cluster, because it
+ * is destructive and must never be where a filter control was a moment ago.
+ * Each pill already carries its own ✕; this is the other job — six applied
+ * filters is six ✕ hunts, and the operator who wants "show me everything
+ * again" has no way to say it.
+ *
+ * Loses its label on the same rung Exibir/Exportar lose theirs, and keeps a
+ * tooltip when it does: it is one of the two controls (with the search) whose
+ * icon has to carry the whole meaning on a phone.
+ */
+export function ClearAllControl({
+  onClearAll,
+  compact,
+  testIdPrefix,
+}: {
+  onClearAll: () => void;
+  compact: boolean;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  // No border, no fill. Every other control on this row is an outlined pill
+  // because it OPENS something; this one is an escape hatch, and giving it the
+  // same weight made it read as a sixth filter. Quiet until hovered.
+  const button = (
+    <Box
+      component="button"
+      type="button"
+      onClick={onClearAll}
+      data-testid={`${testIdPrefix}-clear-all`}
+      aria-label="Limpar filtros"
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        height: 34,
+        px: compact ? 0.75 : 1,
+        border: 0,
+        borderRadius: 1,
+        bgcolor: "transparent",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        whiteSpace: "nowrap",
+        color: "text.secondary",
+        "&:hover": { color: "text.primary", bgcolor: "action.hover" },
+      }}
+    >
+      <FilterAltOffRoundedIcon sx={{ fontSize: 16 }} />
+      {!compact && <Box component="span">Limpar</Box>}
+    </Box>
+  );
+  return compact ? <Tooltip title="Limpar filtros">{button}</Tooltip> : button;
+}
+
+/**
+ * The way out of a search takeover.
+ *
+ * A phone has no Escape key, and without this the takeover is a one-way door
+ * onto a bar with no filters on it.
+
+/**
+ * The way out of a search takeover.
+ *
+ * A phone has no Escape key, and without this the takeover is a one-way door
+ * onto a bar with no filters on it.
+ */
+export function CloseSearchControl({
+  onClose,
+  testIdPrefix,
+}: {
+  onClose: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Tooltip title="Fechar busca">
+      <Box
+        component="button"
+        type="button"
+        onClick={onClose}
+        aria-label="Fechar busca"
+        data-testid={`${testIdPrefix}-search-close`}
+        sx={{
+          display: "inline-flex",
+          alignItems: "center",
+          height: 34,
+          px: 0.75,
+          border: 0,
+          borderRadius: 1,
+          bgcolor: "transparent",
+          cursor: "pointer",
+          color: "text.secondary",
+          "&:hover": { color: "text.primary", bgcolor: "action.hover" },
+        }}
+      >
+        <CloseRoundedIcon sx={{ fontSize: 18 }} />
+      </Box>
+    </Tooltip>
+  );
+}

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

@@ -244,6 +244,48 @@ function ViewsBody({
   return <ViewsList handlers={nav} onOpenActions={onOpenActions} testIdPrefix={testIdPrefix} />;
 }
 
+/** The "Exibir" button, with the dot that says the view has unsaved changes. */
+function DisplayTrigger({
+  dirty,
+  compact,
+  onOpen,
+  testIdPrefix,
+}: {
+  dirty: boolean;
+  compact: boolean;
+  onOpen: (anchor: HTMLElement) => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      color="neutral"
+      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}
+      dataTestId={`${testIdPrefix}-display-trigger`}
+      aria-label="Exibir"
+      title={compact ? "Exibir" : undefined}
+    >
+      <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
+        <TuneRoundedIcon fontSize="small" />
+        {!compact && (
+          <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
+            Exibir
+          </Box>
+        )}
+        {dirty && (
+          <Box component="span" sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }} />
+        )}
+        {/* The chevron goes with the label. Once the control is a bare icon it
+            is already unmistakably a button, and on the rung where that happens
+            the ~24px it costs is the difference between a row that fits and one
+            that scrolls. */}
+        {!compact && <KeyboardArrowDownRoundedIcon fontSize="small" />}
+      </Box>
+    </Button>
+  );
+}
+
 /**
  * The toolbar's "Exibir" control: one button, one popover, three tabs, and the
  * view bracketing all of it.
@@ -271,28 +313,12 @@ export function DataViewsDisplayPanel<T extends Record<string, unknown>>({
   };
   return (
     <>
-      <Button
-        variant="outline"
-        size="sm"
-        color="neutral"
-        onClick={(event) => setAnchor(event.currentTarget as HTMLElement)}
-        dataTestId={`${testIdPrefix}-display-trigger`}
-        aria-label="Exibir"
-        title={compact ? "Exibir" : undefined}
-      >
-        <Box component="span" sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}>
-          <TuneRoundedIcon fontSize="small" />
-          {!compact && (
-            <Box component="span" sx={{ display: { xs: "none", sm: "inline" } }}>
-              Exibir
-            </Box>
-          )}
-          {view?.dirty && (
-            <Box component="span" sx={{ height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }} />
-          )}
-          <KeyboardArrowDownRoundedIcon fontSize="small" />
-        </Box>
-      </Button>
+      <DisplayTrigger
+        dirty={Boolean(view?.dirty)}
+        compact={Boolean(compact)}
+        onOpen={setAnchor}
+        testIdPrefix={testIdPrefix}
+      />
       <Popover
         open={Boolean(anchor)}
         anchorEl={anchor}

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

@@ -9,6 +9,7 @@ import { Text } from "../../typography/Text";
 
 import {
   BoardGlyph,
+  ColumnsGlyph,
   GridGlyph,
   ListGlyph,
   RowsGlyph,
@@ -219,15 +220,52 @@ const LAYOUT_HINTS: Record<DataViewsLayout, string> = {
   board: "Colunas por etapa, para acompanhar o que está onde.",
 };
 
+/**
+ * What density MEANS in each layout — same three values, three different
+ * questions. A table's is how tall its rows are, a card grid's is how many fit
+ * on a line, and a board's is how wide its columns are. The heading and the
+ * tile labels change with the layout because "Alta" over a board is meaningless
+ * where "Larga" is not.
+ */
+const DENSITY_HEADINGS: Record<DataViewsLayout, string> = {
+  table: "Altura das linhas",
+  list: "Altura das linhas",
+  cards: "Cards por linha",
+  board: "Largura das colunas",
+};
+
+const DENSITY_LABELS: Record<DataViewsLayout, Record<DataViewsDensity, string>> = {
+  table: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
+  list: { compact: "Baixa", cozy: "Média", comfortable: "Alta" },
+  cards: { compact: "Muitos", cozy: "Médio", comfortable: "Poucos" },
+  board: { compact: "Estreita", cozy: "Média", comfortable: "Larga" },
+};
+
 /** The density tiles, phrased for whichever layout is on screen. */
-function densityTiles(cards: boolean): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
+function densityTiles(
+  layout: DataViewsLayout,
+): { value: DataViewsDensity; label: string; gap: number; columns: number }[] {
+  const labels = DENSITY_LABELS[layout];
   return [
-    { value: "compact", label: cards ? "Muitos" : "Baixa", gap: 2, columns: 4 },
-    { value: "cozy", label: cards ? "Médio" : "Média", gap: 5, columns: 3 },
-    { value: "comfortable", label: cards ? "Poucos" : "Alta", gap: 8, columns: 2 },
+    { value: "compact", label: labels.compact, gap: 2, columns: 4 },
+    { value: "cozy", label: labels.cozy, gap: 5, columns: 3 },
+    { value: "comfortable", label: labels.comfortable, gap: 8, columns: 2 },
   ];
 }
 
+/** The preview for one density tile, in the terms that layout's density is in. */
+function densityGlyph(
+  layout: DataViewsLayout,
+  tile: { gap: number; columns: number },
+  active: boolean,
+): React.JSX.Element {
+  if (layout === "cards") return <GridGlyph n={tile.columns} active={active} />;
+  // A wider column means FEWER of them across the same board, so the
+  // comfortable end draws two fat columns and the compact end four thin ones.
+  if (layout === "board") return <ColumnsGlyph n={tile.columns} active={active} />;
+  return <RowsGlyph gap={tile.gap} active={active} />;
+}
+
 /** The glyph for a layout tile. */
 function layoutGlyph(layout: DataViewsLayout, active: boolean): React.JSX.Element {
   if (layout === "table") return <TableGlyph active={active} />;
@@ -257,7 +295,6 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
     ...(canUseCards ? (["cards"] as const) : []),
     ...(canUseBoard ? (["board"] as const) : []),
   ];
-  const cards = layout === "cards";
   return (
     <Box sx={{ p: 1 }}>
       <Text variant="caption" as="p">
@@ -290,32 +327,28 @@ export function DisplayTab({ testIdPrefix }: { testIdPrefix: string }): React.JS
           {LAYOUT_HINTS[layout]}
         </Box>
       </Text>
-      {layout !== "board" && (
-        <>
-          <Text variant="caption" as="p">
-            <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
-              {cards ? "Cards por linha" : "Altura das linhas"}
-            </Box>
-          </Text>
-          <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }}>
-            {densityTiles(cards).map((tile) => (
-              <Tile
-                key={tile.value}
-                active={density === tile.value}
-                label={tile.label}
-                onClick={() => setDensity(tile.value)}
-                testId={`${testIdPrefix}-density-${tile.value}`}
-              >
-                {cards ? (
-                  <GridGlyph n={tile.columns} active={density === tile.value} />
-                ) : (
-                  <RowsGlyph gap={tile.gap} active={density === tile.value} />
-                )}
-              </Tile>
-            ))}
-          </Box>
-        </>
-      )}
+      {/* Every layout gets this, the board included. It used to be hidden on
+          Quadro, which left the format tile switching to a view with no sizing
+          control at all — and the section disappearing on select reads as a
+          control that broke rather than one that does not apply. */}
+      <Text variant="caption" as="p">
+        <Box component="span" sx={{ px: 0.5, color: "text.secondary" }}>
+          {DENSITY_HEADINGS[layout]}
+        </Box>
+      </Text>
+      <Box sx={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0.75, mt: 0.5 }}>
+        {densityTiles(layout).map((tile) => (
+          <Tile
+            key={tile.value}
+            active={density === tile.value}
+            label={tile.label}
+            onClick={() => setDensity(tile.value)}
+            testId={`${testIdPrefix}-density-${tile.value}`}
+          >
+            {densityGlyph(layout, tile, density === tile.value)}
+          </Tile>
+        ))}
+      </Box>
       {!canUseBoard && (
         <Text variant="caption" as="p">
           <Box component="span" sx={{ px: 0.5, pt: 1.25, display: "block", color: "text.disabled" }}>

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

@@ -0,0 +1,135 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+import { Box } from "../../../mui/Box";
+
+/**
+ * DRAGGING, OWNED BY THE CONTAINER AND NOT BY THE CARD.
+ *
+ * A card cannot know whether it is draggable. The same `BaseListCard` renders
+ * inside a reorderable queue, a read-only report and a board column that moves
+ * items between columns — and only the thing holding them knows which. So the
+ * container publishes a drag context and every card inside it becomes
+ * draggable; a card with no container above it renders exactly as before, with
+ * no handle and no listeners.
+ *
+ * This is a SEAM, not a drag implementation. It carries whatever props the
+ * host's library hands out — dnd-kit's `attributes`/`listeners`, react-dnd's
+ * connector output, or plain HTML5 `draggable` + `onDragStart` — because
+ * picking one of those for every consumer of `@12-apps/ui` is a decision this
+ * package has no business making. There is no drag dependency here, and adding
+ * one would force it on every app that installs the library.
+ */
+
+/** The props a container hands to one item. Deliberately untyped-ish: each DnD library has its own shape. */
+export type DragItemProps = Record<string, unknown>;
+
+export interface DragContainerValue {
+  /**
+   * Props for the item's ROOT — the element that moves. dnd-kit wants its
+   * `setNodeRef` and transform style here; HTML5 wants `draggable` and
+   * `onDragStart`.
+   */
+  itemProps: (id: string | number) => DragItemProps;
+  /**
+   * Props for the HANDLE alone, when the container wants drags to start only
+   * from the grip.
+   *
+   * Whole-card dragging breaks the two things a card must still do: selecting
+   * text in it, and hitting the checkbox without the row sliding away. When a
+   * container returns handle props, the card puts them on the grip and leaves
+   * the rest of itself alone.
+   */
+  handleProps?: (id: string | number) => DragItemProps;
+  /** The id currently being dragged, so its card can dim itself. */
+  activeId?: string | number | null;
+}
+
+const DragContainerContext = createContext<DragContainerValue | null>(null);
+
+/**
+ * Marks everything inside as draggable. Cards read this; nothing else does.
+ */
+export function DragContainerProvider({
+  value,
+  children,
+}: {
+  value: DragContainerValue;
+  children: ReactNode;
+}): React.JSX.Element {
+  return <DragContainerContext.Provider value={value}>{children}</DragContainerContext.Provider>;
+}
+
+/**
+ * What one card needs to know about dragging.
+ *
+ * Returns the inert answer when there is no container OR no `dragId` — a card
+ * that forgot its id must not render a handle that does nothing, which is worse
+ * than no handle at all.
+ */
+export function useDragItem(dragId: string | number | undefined): {
+  draggable: boolean;
+  itemProps: DragItemProps;
+  handleProps: DragItemProps | undefined;
+  dragging: boolean;
+} {
+  const container = useContext(DragContainerContext);
+  if (!container || dragId === undefined) {
+    return { draggable: false, itemProps: {}, handleProps: undefined, dragging: false };
+  }
+  return {
+    draggable: true,
+    itemProps: container.itemProps(dragId),
+    handleProps: container.handleProps?.(dragId),
+    dragging: container.activeId === dragId,
+  };
+}
+
+/**
+ * The grip. Six dots, the convention everywhere, drawn rather than imported so
+ * this costs no icon dependency.
+ *
+ * `cursor: grab` on the handle only when the container gates drags to it —
+ * otherwise the whole card carries the cursor and the handle is just an
+ * affordance saying so.
+ */
+export function DragHandle({
+  handleProps,
+  gated,
+  testId,
+}: {
+  handleProps: DragItemProps | undefined;
+  gated: boolean;
+  testId?: string;
+}): React.JSX.Element {
+  return (
+    <Box
+      component="span"
+      aria-hidden={handleProps ? undefined : true}
+      data-testid={testId}
+      {...handleProps}
+      sx={{
+        display: "inline-grid",
+        gridTemplateColumns: "repeat(2, 3px)",
+        gap: "2px",
+        flexShrink: 0,
+        p: 0.5,
+        borderRadius: 1,
+        color: "text.disabled",
+        cursor: gated ? "grab" : "inherit",
+        touchAction: "none",
+        "&:active": { cursor: gated ? "grabbing" : "inherit" },
+        "&:hover": { color: "text.secondary" },
+      }}
+    >
+      {Array.from({ length: 6 }).map((_, index) => (
+        <Box
+          key={index}
+          component="span"
+          sx={{ width: 3, height: 3, borderRadius: "50%", bgcolor: "currentColor" }}
+        />
+      ))}
+    </Box>
+  );
+}

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

@@ -116,7 +116,8 @@ function ExportTrigger({
             Exportar
           </Box>
         )}
-        <KeyboardArrowDownRoundedIcon fontSize="small" />
+        {/* Dropped with the label — see the note on the Exibir trigger. */}
+        {!compact && <KeyboardArrowDownRoundedIcon fontSize="small" />}
       </Box>
     </Button>
   );

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

@@ -87,6 +87,22 @@ export function GridGlyph({ n = 3, active }: { n?: number; active: boolean }): R
   );
 }
 
+/**
+ * Full-height columns, `n` of them — the board's DENSITY, where fewer, wider
+ * columns is the comfortable end. Distinct from {@link BoardGlyph}, which
+ * stands for the board format itself and shows cards stacked at differing
+ * depths; this one is about the columns' width, so the bars are solid.
+ */
+export function ColumnsGlyph({ n, active }: { n: number; active: boolean }): React.JSX.Element {
+  return (
+    <Box sx={{ ...FRAME, gap: "2px" }}>
+      {Array.from({ length: n }).map((_, column) => (
+        <Box key={column} sx={{ flex: 1, borderRadius: 0.5, bgcolor: barColor(active) }} />
+      ))}
+    </Box>
+  );
+}
+
 /** Three columns of decreasing height — the board. */
 export function BoardGlyph({ active }: { active: boolean }): React.JSX.Element {
   return (

package/src/components/data-display/DataViews/data-views-grid-bodies.tsx

@@ -6,6 +6,7 @@ import { Box } from "../../../mui/Box";
 import {
   cardMinWidthForZoom,
   cardScaleForZoom,
+  DENSITY_BOARD_SCALE,
   DENSITY_CARD_COLUMNS,
   DENSITY_ROW_PADDING,
   useDataViewsLayout,
@@ -297,7 +298,10 @@ export function GridMain<T extends Record<string, unknown>>({
           renderCard={renderCard}
           selectedIds={c.selectedIds}
           onToggleId={c.toggleId}
-          cardScale={cardScaleForZoom(zoom)}
+          // DENSITY, not zoom: the board's own knob in the Exibição tab is how
+          // wide its columns are, and it is the only sizing control the board
+          // has since the zoom slider was removed.
+          cardScale={DENSITY_BOARD_SCALE[density]}
           dataTestId={dataTestId}
         />
       </Headerless>

package/src/components/data-display/DataViews/data-views-grid-parts.tsx

@@ -14,7 +14,7 @@ import {
 } from "./data-views-layout-context";
 import { FilterDialog, GridFilterPanel } from "./data-views-filter-panel";
 import { GridMain } from "./data-views-grid-bodies";
-import { InlineFilterChips, InlineFilterControls } from "./data-views-inline-bar";
+import { InlineFilterControls } from "./data-views-inline-bar";
 import { toOverflowFields, useFilterOverflow, type OverflowSplit } from "./data-views-overflow";
 import { ShellToolbar } from "./data-views-shell-toolbar";
 import type { DisplayPanelView } from "./data-views-display-panel";
@@ -22,7 +22,8 @@ import type { DataViewExport } from "./data-views-export";
 import { DataViewsEmpty } from "./data-views-empty";
 import { DataViewsPagination } from "./data-views-pagination";
 import type { BoardConfig } from "./DataViewsBoard";
-import { DataViewsScopeTabs, type ScopeConfig } from "./data-views-scopes";
+import { type ScopeConfig } from "./data-views-scopes";
+import { ScopeTabsSlot } from "./data-views-scope-tabs";
 import { togglePillValues } from "./data-views-grid-helpers";
 import type {
   DataViewCardSelection,
@@ -233,8 +234,13 @@ interface GridShellProps<T extends Record<string, unknown>> {
   board?: BoardConfig<T>;
   /** Opt-in "Lista" layout: one full-width, entity-rendered row per record. */
   renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;
-  /** The page-level partition rendered as tabs above the toolbar. */
+  /** The page-level partition rendered as tabs under the toolbar. */
   scopes?: ScopeConfig[];
+  /**
+   * The row field the scopes partition by. Compared against the board's
+   * `groupBy` so the two are not shown as the same partition twice.
+   */
+  scopeFieldId?: string;
   /** Per-sort-field value kind, so directions read in the column's own terms. */
   sortKinds?: Record<string, string>;
   /** The saved-view chrome bracketing the Exibir panel. */
@@ -289,14 +295,6 @@ function ShellStack<T extends Record<string, unknown>>({
     <TableFilter open={c.filterOpen} onOpenChange={c.setFilterOpen} hasActiveFilters={c.activeFilterCount > 0}>
       <Stack spacing={0} data-testid={dataTestId ? `${dataTestId}-container` : undefined}>
         <GridHeaderRow title={props.title} headerActions={props.headerActions} testIdPrefix={testIdPrefix} />
-        {/* Renders nothing (and reserves nothing) for an empty scope list. */}
-        <DataViewsScopeTabs
-          scopes={scopes}
-          value={c.scope}
-          onChange={c.setScope}
-          counts={c.scopeCounts}
-          testIdPrefix={testIdPrefix}
-        />
         <ShellToolbar
           c={c}
           rows={props.rows}
@@ -308,6 +306,7 @@ function ShellStack<T extends Record<string, unknown>>({
               <InlineFilterControls
                 {...filterProps}
                 split={split}
+                activeFilterCount={c.activeFilterCount}
                 onControlOpenChange={onControlOpenChange}
               />
             ) : undefined
@@ -318,11 +317,18 @@ function ShellStack<T extends Record<string, unknown>>({
           bulkActions={props.bulkActions}
           toolbarRightSlot={props.toolbarRightSlot}
           compactControls={showInline && split.compactControls}
+          counterHidden={showInline && split.counterHidden}
           showInline={showInline}
         />
-        {/* Only the applied-filter chips live under the toolbar now — the
-            controls themselves ride on the toolbar line above. */}
-        {inlineVisible && <InlineFilterChips {...filterProps} />}
+        <ScopeTabsSlot
+          scopes={scopes}
+          scopeFieldId={props.scopeFieldId}
+          board={props.board}
+          value={c.scope}
+          onChange={c.setScope}
+          counts={c.scopeCounts}
+          testIdPrefix={testIdPrefix}
+        />
         <TableFilter.Layout>
           <TableFilter.Main>
             <GridMain