@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-HD6ZNARS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CodeEditor/CodeEditor.monaco.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport type { Monaco } from '@monaco-editor/react';\nimport type { editor } from 'monaco-editor';\n\nimport { uiInk, type UiInk } from '../../../tokens/ink';\n\ntype EditorChrome = UiInk['codeEditor']['light'];\n\n/** Monaco's colour keys, filled from one mode's chrome. */\nconst chromeColors = (chrome: EditorChrome) => ({\n  'editor.background': chrome.background,\n  'editor.foreground': chrome.foreground,\n  'editor.lineHighlightBackground': chrome.lineHighlight,\n  'editorLineNumber.foreground': chrome.lineNumber,\n  'editorIndentGuide.background': chrome.gutterBorder,\n  'editor.selectionBackground': chrome.selection,\n});\n\nconst customLightTheme = (chrome: EditorChrome) => ({\n  base: 'vs' as const,\n  inherit: true,\n  rules: [\n    { token: 'comment', foreground: '6A737D', fontStyle: 'italic' },\n    { token: 'keyword', foreground: 'D73A49' },\n    { token: 'string', foreground: '032F62' },\n    { token: 'number', foreground: '005CC5' },\n  ],\n  colors: chromeColors(chrome),\n});\n\nconst customDarkTheme = (chrome: EditorChrome) => ({\n  base: 'vs-dark' as const,\n  inherit: true,\n  rules: [\n    { token: 'comment', foreground: '6A737D', fontStyle: 'italic' },\n    { token: 'keyword', foreground: 'F97583' },\n    { token: 'string', foreground: '9ECBFF' },\n    { token: 'number', foreground: '79B8FF' },\n  ],\n  colors: chromeColors(chrome),\n});\n\n// Main component\nconst AUTO_FORMAT_DELAY_MS = 100;\n\nexport const registerEditorThemes = (monaco: Monaco, theme: Theme) => {\n  const chrome = uiInk(theme).codeEditor;\n  monaco.editor.defineTheme('custom-light', customLightTheme(chrome.light));\n  monaco.editor.defineTheme('custom-dark', customDarkTheme(chrome.dark));\n};\n\n// Best-effort: a Monaco build without the TypeScript worker (as in jsdom) throws\n// here, and the editor is still usable without it.\nexport const configureTypeScriptDefaults = (monaco: Monaco) => {\n  try {\n    const tsLanguage = monaco.languages\n      .getLanguages()\n      .find((language) => language.id === 'typescript');\n\n    if (!tsLanguage) return;\n\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      target: monaco.languages.typescript.ScriptTarget.ES2020,\n      allowNonTsExtensions: true,\n      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,\n      module: monaco.languages.typescript.ModuleKind.CommonJS,\n      noEmit: true,\n      esModuleInterop: true,\n      jsx: monaco.languages.typescript.JsxEmit.React,\n      reactNamespace: 'React',\n      allowJs: true,\n      typeRoots: ['node_modules/@types'],\n    });\n\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: false,\n      noSyntaxValidation: false,\n      noSuggestionDiagnostics: true,\n    });\n  } catch {\n    // Silently handle any TypeScript configuration errors in test environments\n  }\n};\n\nexport const scheduleAutoFormat = (mountedEditor: editor.IStandaloneCodeEditor, enabled: boolean) => {\n  if (!enabled) return;\n\n  window.setTimeout(() => {\n    mountedEditor.getAction('editor.action.formatDocument')?.run();\n  }, AUTO_FORMAT_DELAY_MS);\n};\n\nexport const registerSaveShortcut = (\n  mountedEditor: editor.IStandaloneCodeEditor,\n  monaco: Monaco,\n  onSave?: (value: string) => void,\n) => {\n  mountedEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {\n    onSave?.(mountedEditor.getValue());\n  });\n};\n\n// 'auto' follows the MUI palette; otherwise the caller's choice wins.\nexport const resolveEditorTheme = (themeProp: string, paletteMode: string) => {\n  const wantsDark = themeProp === 'auto' ? paletteMode === 'dark' : themeProp === 'dark';\n\n  return wantsDark ? 'custom-dark' : 'custom-light';\n};\n\n// Monaco's options object. Only the first five entries vary with our props; the\n// rest are fixed editor preferences.\n"],"mappings":";;;;;AASA,IAAM,eAAe,CAAC,YAA0B;AAAA,EAC9C,qBAAqB,OAAO;AAAA,EAC5B,qBAAqB,OAAO;AAAA,EAC5B,kCAAkC,OAAO;AAAA,EACzC,+BAA+B,OAAO;AAAA,EACtC,gCAAgC,OAAO;AAAA,EACvC,8BAA8B,OAAO;AACvC;AAEA,IAAM,mBAAmB,CAAC,YAA0B;AAAA,EAClD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,IACL,EAAE,OAAO,WAAW,YAAY,UAAU,WAAW,SAAS;AAAA,IAC9D,EAAE,OAAO,WAAW,YAAY,SAAS;AAAA,IACzC,EAAE,OAAO,UAAU,YAAY,SAAS;AAAA,IACxC,EAAE,OAAO,UAAU,YAAY,SAAS;AAAA,EAC1C;AAAA,EACA,QAAQ,aAAa,MAAM;AAC7B;AAEA,IAAM,kBAAkB,CAAC,YAA0B;AAAA,EACjD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,IACL,EAAE,OAAO,WAAW,YAAY,UAAU,WAAW,SAAS;AAAA,IAC9D,EAAE,OAAO,WAAW,YAAY,SAAS;AAAA,IACzC,EAAE,OAAO,UAAU,YAAY,SAAS;AAAA,IACxC,EAAE,OAAO,UAAU,YAAY,SAAS;AAAA,EAC1C;AAAA,EACA,QAAQ,aAAa,MAAM;AAC7B;AAGA,IAAM,uBAAuB;AAEtB,IAAM,uBAAuB,CAAC,QAAgB,UAAiB;AACpE,QAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,SAAO,OAAO,YAAY,gBAAgB,iBAAiB,OAAO,KAAK,CAAC;AACxE,SAAO,OAAO,YAAY,eAAe,gBAAgB,OAAO,IAAI,CAAC;AACvE;AAIO,IAAM,8BAA8B,CAAC,WAAmB;AAC7D,MAAI;AACF,UAAM,aAAa,OAAO,UACvB,aAAa,EACb,KAAK,CAAC,aAAa,SAAS,OAAO,YAAY;AAElD,QAAI,CAAC,WAAY;AAEjB,WAAO,UAAU,WAAW,mBAAmB,mBAAmB;AAAA,MAChE,QAAQ,OAAO,UAAU,WAAW,aAAa;AAAA,MACjD,sBAAsB;AAAA,MACtB,kBAAkB,OAAO,UAAU,WAAW,qBAAqB;AAAA,MACnE,QAAQ,OAAO,UAAU,WAAW,WAAW;AAAA,MAC/C,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,KAAK,OAAO,UAAU,WAAW,QAAQ;AAAA,MACzC,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,WAAW,CAAC,qBAAqB;AAAA,IACnC,CAAC;AAED,WAAO,UAAU,WAAW,mBAAmB,sBAAsB;AAAA,MACnE,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,yBAAyB;AAAA,IAC3B,CAAC;AAAA,EACH,QAAQ;AAAA,EAER;AACF;AAEO,IAAM,qBAAqB,CAAC,eAA6C,YAAqB;AACnG,MAAI,CAAC,QAAS;AAEd,SAAO,WAAW,MAAM;AACtB,kBAAc,UAAU,8BAA8B,GAAG,IAAI;AAAA,EAC/D,GAAG,oBAAoB;AACzB;AAEO,IAAM,uBAAuB,CAClC,eACA,QACA,WACG;AACH,gBAAc,WAAW,OAAO,OAAO,UAAU,OAAO,QAAQ,MAAM,MAAM;AAC1E,aAAS,cAAc,SAAS,CAAC;AAAA,EACnC,CAAC;AACH;AAGO,IAAM,qBAAqB,CAAC,WAAmB,gBAAwB;AAC5E,QAAM,YAAY,cAAc,SAAS,gBAAgB,SAAS,cAAc;AAEhF,SAAO,YAAY,gBAAgB;AACrC;","names":[]}

package/dist/chunk-HJWOB62A.js

@@ -0,0 +1,276 @@
+import {
+  DataViewsBoard
+} from "./chunk-YDPUBGJ7.js";
+import {
+  SelectAllStrip
+} from "./chunk-JFBEZXNL.js";
+import {
+  toGridExpansion
+} from "./chunk-O5UGAL2V.js";
+import {
+  cardGridTracks
+} from "./chunk-LOJK733T.js";
+import {
+  ListCardGroup
+} from "./chunk-JFEEV3XI.js";
+import {
+  DENSITY_BOARD_SCALE,
+  DENSITY_ROW_PADDING,
+  cardScaleForZoom,
+  cardTargetWidthFor,
+  useDataViewsLayout
+} from "./chunk-4LQZH4PU.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DataGrid
+} from "./chunk-UCTJJYVC.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-grid-bodies.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GridBody({
+  rows,
+  columns,
+  getRowId,
+  selectedIds,
+  onChangeSelected,
+  sortBy,
+  onChangeSortBy,
+  sortMode,
+  rowPadding,
+  rowDetail,
+  dataTestId,
+  emptyState
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        width: "100%",
+        overflowX: "auto",
+        mt: 1.5,
+        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
+        // tall regardless of rowHeight, so the DENSITY preference is applied
+        // here rather than through `rowHeight`, which it would fight.
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: sxRem(13) },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: sxRem(12) }
+      },
+      children: /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          rows,
+          columns,
+          getRowId: (row) => getRowId(row),
+          virtualizeRows: false,
+          density: "compact",
+          rowHeight: 36,
+          headerHeight: 36,
+          selection: { mode: "multi", selectedRowIds: selectedIds, onChangeSelected },
+          sorting: { mode: sortMode, sortBy, onChangeSortBy },
+          expansion: toGridExpansion(rowDetail, copy),
+          "data-testid": dataTestId,
+          emptyState,
+          emptyText: copy.grid.emptyFilteredTitle
+        }
+      )
+    }
+  );
+}
+function CardBody({
+  rows,
+  renderCard,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  targetCardWidth,
+  cardScale,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        mt: 1.5,
+        display: "grid",
+        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so
+        // only the cards grow while the space between them stays constant.
+        gap: 1.5,
+        ...cardGridTracks(targetCardWidth)
+      },
+      "data-testid": dataTestId ? `${dataTestId}-cards` : "data-views-cards",
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+          selected: selectedIds.has(id),
+          onToggleSelect: () => onToggleId(id),
+          scale: cardScale
+        }) }, id);
+      })
+    }
+  );
+}
+function ListBody({
+  rows,
+  renderListRow,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  rowGap,
+  group,
+  density,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id) => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1
+  });
+  if (group) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+      ListCardGroup,
+      {
+        cells: group.cells,
+        metaColumns: group.metaColumns,
+        rails: group.rails,
+        reserveGutters: group.reserveGutters,
+        density,
+        gap: rowGap,
+        dataTestId: testId,
+        children: rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderListRow(row, selectionFor(id)) }, id);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap },
+      "data-testid": testId,
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderListRow(row, selectionFor(id)) }, id);
+      })
+    }
+  );
+}
+function Headerless({
+  c,
+  getRowId,
+  testIdPrefix,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectAllStrip,
+      {
+        rows: c.matched,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onChange: (next) => c.setSelectedIds(next),
+        testIdPrefix
+      }
+    ),
+    children
+  ] });
+}
+function headerlessBody({ c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }, { layout, zoom, density }) {
+  if (layout === "list" && renderListRow) {
+    return /* @__PURE__ */ jsx(
+      ListBody,
+      {
+        rows: c.matched,
+        renderListRow,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        rowGap: DENSITY_ROW_PADDING[density],
+        group: listGroup,
+        density,
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  if (layout === "board" && board && renderCard) {
+    return /* @__PURE__ */ jsx(
+      DataViewsBoard,
+      {
+        rows: c.matched,
+        board,
+        getRowId,
+        renderCard,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        cardScale: DENSITY_BOARD_SCALE[density],
+        dataTestId
+      }
+    );
+  }
+  if (layout === "cards" && renderCard) {
+    return /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        rows: c.matched,
+        renderCard,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        targetCardWidth: cardTargetWidthFor(zoom, density),
+        cardScale: cardScaleForZoom(zoom),
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  return null;
+}
+function GridMain(props) {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
+    return /* @__PURE__ */ jsx(Headerless, { c, getRowId, testIdPrefix, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    GridBody,
+    {
+      rows: c.matched,
+      columns: c.gridColumns,
+      getRowId,
+      selectedIds: [...c.selectedIds],
+      onChangeSelected: (ids) => c.setSelectedIds(new Set(ids)),
+      sortBy: c.state.sortBy,
+      onChangeSortBy: (next) => c.patch({ sortBy: next }),
+      sortMode: c.serverMode ? "server" : "client",
+      rowPadding: DENSITY_ROW_PADDING[layoutState.density],
+      rowDetail: props.rowDetail,
+      dataTestId,
+      emptyState
+    }
+  );
+}
+
+export {
+  GridMain
+};
+//# sourceMappingURL=chunk-HJWOB62A.js.map

package/dist/chunk-HJWOB62A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-bodies.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\nimport { DataGrid, type GridColumn, type GridSort } from \"../DataGrid\";\nimport { Box } from \"../../../mui/Box\";\n\nimport {\n  cardTargetWidthFor,\n  cardScaleForZoom,\n  DENSITY_BOARD_SCALE,\n  DENSITY_ROW_PADDING,\n  useDataViewsLayout,\n  type DataViewsDensity,\n} from \"./data-views-layout-context\";\nimport { cardGridTracks } from \"./data-views-grid-helpers\";\nimport { DataViewsBoard, type BoardConfig } from \"./DataViewsBoard\";\nimport { SelectAllStrip } from \"./data-views-select-all-strip\";\nimport { ListCardGroup, type ListGroupConfig } from \"./list-card-rails\";\nimport type { DataViewCardSelection } from \"./data-views-types\";\nimport { toGridExpansion, type DataViewRowDetail } from \"./data-views-row-detail\";\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Body (grid) ─────────────────────────────────────────────────────────── */\n\ninterface GridBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  columns: GridColumn<T>[];\n  getRowId: (row: T) => string | number;\n  selectedIds: Array<string | number>;\n  onChangeSelected: (ids: Array<string | number>) => void;\n  sortBy: GridSort[];\n  onChangeSortBy: (next: GridSort[]) => void;\n  /** \"server\" defers ordering to the backend (rows render as-is); \"client\" sorts in-grid. */\n  sortMode: \"client\" | \"server\";\n  /** Vertical cell padding, from the density preference. */\n  rowPadding: number;\n  rowDetail?: DataViewRowDetail<T>;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/** The dense DataGrid with multi-select, wrapped in the scrollable table region. */\nfunction GridBody<T extends Record<string, unknown>>({\n  rows,\n  columns,\n  getRowId,\n  selectedIds,\n  onChangeSelected,\n  sortBy,\n  onChangeSortBy,\n  sortMode,\n  rowPadding,\n  rowDetail,\n  dataTestId,\n  emptyState,\n}: GridBodyProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      sx={{\n        width: \"100%\",\n        overflowX: \"auto\",\n        mt: 1.5,\n        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows\n        // tall regardless of rowHeight, so the DENSITY preference is applied\n        // here rather than through `rowHeight`, which it would fight.\n        \"& .MuiTableCell-root\": { py: rowPadding, fontSize: sxRem(13) },\n        \"& .MuiTableCell-head\": { py: 0.5, fontSize: sxRem(12) },\n      }}\n    >\n      <DataGrid<T>\n        rows={rows}\n        columns={columns}\n        getRowId={(row) => getRowId(row)}\n        virtualizeRows={false}\n        density=\"compact\"\n        rowHeight={36}\n        headerHeight={36}\n        selection={{ mode: \"multi\", selectedRowIds: selectedIds, onChangeSelected }}\n        sorting={{ mode: sortMode, sortBy, onChangeSortBy }}\n        expansion={toGridExpansion(rowDetail, copy)}\n        data-testid={dataTestId}\n        emptyState={emptyState}\n        emptyText={copy.grid.emptyFilteredTitle}\n      />\n    </Box>\n  );\n}\n\n/* ── Body (cards) ────────────────────────────────────────────────────────── */\n\ninterface CardBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  getRowId: (row: T) => string | number;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** The width each card asks for; `auto-fill` turns it into a column count. */\n  targetCardWidth: number;\n  /** Content scale (padding + type) handed to each card, from the zoom slider. */\n  cardScale: number;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Grade\" layout: the filtered/sorted rows rendered as an auto-filling grid\n * of entity-supplied cards. Reuses `rows` (= `c.matched`), so search/filter/sort\n * apply; the column width comes from the zoom slider, and each card is handed its\n * selection state so it can drive its own checkbox (BaseCard) — the same\n * selection model as the table.\n */\nfunction CardBody<T extends Record<string, unknown>>({\n  rows,\n  renderCard,\n  getRowId,\n  selectedIds,\n  onToggleId,\n  targetCardWidth,\n  cardScale,\n  dataTestId,\n  emptyState,\n}: CardBodyProps<T>): React.JSX.Element {\n  if (rows.length === 0) {\n    return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n  }\n  return (\n    <Box\n      sx={{\n        mt: 1.5,\n        display: \"grid\",\n        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so\n        // only the cards grow while the space between them stays constant.\n        gap: 1.5,\n        ...cardGridTracks(targetCardWidth),\n      }}\n      data-testid={dataTestId ? `${dataTestId}-cards` : \"data-views-cards\"}\n    >\n      {rows.map((row) => {\n        const id = getRowId(row);\n        return (\n          <Box key={id}>\n            {renderCard(row, {\n              selected: selectedIds.has(id),\n              onToggleSelect: () => onToggleId(id),\n              scale: cardScale,\n            })}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n/* ── Body (list) ─────────────────────────────────────────────────────────── */\n\ninterface ListBodyProps<T extends Record<string, unknown>> {\n  rows: T[];\n  renderListRow: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  getRowId: (row: T) => string | number;\n  selectedIds: Set<string | number>;\n  onToggleId: (id: string | number) => void;\n  /** Gap between rows, from the density preference. */\n  rowGap: number;\n  /** The list's shared column config. See {@link ListGroupConfig}. */\n  group?: ListGroupConfig<T>;\n  /** The density every row answers, handed to the group when there is one. */\n  density: DataViewsDensity;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Lista\" layout: one FULL-WIDTH row per record, rendered by the entity — a\n * marker, a title, a subtitle and a value on the right is the shape it was\n * designed for (FUT-733).\n *\n * It sits between the table and the cards rather than replacing either: the\n * table is for comparing many columns, the cards are for browsing, and the list\n * is for scanning a queue on a narrow screen. Selection is the SAME model as\n * both — each row receives its selection state, so it can drive its own\n * checkbox and the bulk menu behaves identically in every layout.\n *\n * `scale` is handed over as 1 rather than the zoom multiplier, and the zoom\n * slider is hidden in this layout: a full-width row has no card size to\n * multiply. See {@link DataViewsZoomSlider}.\n */\nfunction ListBody<T extends Record<string, unknown>>({\n  rows,\n  renderListRow,\n  getRowId,\n  selectedIds,\n  onToggleId,\n  rowGap,\n  group,\n  density,\n  dataTestId,\n  emptyState,\n}: ListBodyProps<T>): React.JSX.Element {\n  if (rows.length === 0) {\n    return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n  }\n  const testId = dataTestId ? `${dataTestId}-list` : \"data-views-list\";\n  const selectionFor = (id: string | number): DataViewCardSelection => ({\n    selected: selectedIds.has(id),\n    onToggleSelect: () => onToggleId(id),\n    scale: 1,\n  });\n\n  if (group) {\n    return (\n      <Box sx={{ mt: 1.5 }}>\n        <ListCardGroup\n          cells={group.cells}\n          metaColumns={group.metaColumns}\n          rails={group.rails}\n          reserveGutters={group.reserveGutters}\n          density={density}\n          gap={rowGap}\n          dataTestId={testId}\n        >\n          {rows.map((row) => {\n            const id = getRowId(row);\n            // A FRAGMENT, NOT A BOX. The row is subgrid over the group's tracks\n            // (`gridColumn: span railCount`), which only resolves while the card\n            // is a DIRECT child of the group's grid. One wrapper element and the\n            // span is measured against a grid that isn't there, so every rail\n            // collapses — the exact failure the group exists to prevent.\n            return (\n              <React.Fragment key={id}>\n                {renderListRow(row, selectionFor(id))}\n              </React.Fragment>\n            );\n          })}\n        </ListCardGroup>\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{ mt: 1.5, display: \"flex\", flexDirection: \"column\", gap: rowGap }}\n      data-testid={testId}\n    >\n      {rows.map((row) => {\n        const id = getRowId(row);\n        return <Box key={id}>{renderListRow(row, selectionFor(id))}</Box>;\n      })}\n    </Box>\n  );\n}\n\n/* ── Body selector (board vs list vs cards vs table, from context) ───────── */\n\ninterface GridMainProps<T extends Record<string, unknown>> {\n  c: DataViewsController<T>;\n  getRowId: (row: T) => string | number;\n  renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  /** Opt-in \"Lista\" layout — one full-width row per record. */\n  renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n  /** The Lista's shared columns. Omitted, each row resolves its own tracks. */\n  listGroup?: ListGroupConfig<T>;\n  /** Opt-in \"Quadro\" (board) layout — needs `renderCard`, since it reuses the card. */\n  board?: BoardConfig<T>;\n  /** Opt-in expandable rows — the TABLE only; the headerless layouts ignore it. */\n  rowDetail?: DataViewRowDetail<T>;\n  dataTestId?: string;\n  emptyState?: React.ReactNode;\n  testIdPrefix: string;\n}\n\n/**\n * The headerless layouts, each preceded by its own select-all.\n *\n * The strip is rendered HERE rather than inside each body so all three agree on\n * where it sits and what it says — and so the table, which already has one in\n * its `<thead>`, never gets a second.\n */\nfunction Headerless<T extends Record<string, unknown>>({\n  c,\n  getRowId,\n  testIdPrefix,\n  children,\n}: {\n  c: DataViewsController<T>;\n  getRowId: (row: T) => string | number;\n  testIdPrefix: string;\n  children: React.ReactNode;\n}): React.JSX.Element {\n  return (\n    <>\n      <SelectAllStrip\n        rows={c.matched}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onChange={(next) => c.setSelectedIds(next)}\n        testIdPrefix={testIdPrefix}\n      />\n      {children}\n    </>\n  );\n}\n\n/**\n * The body for one of the three HEADERLESS layouts, or `null` for the table.\n *\n * Split out from {@link GridMain} so the select-all strip is wrapped around the\n * result exactly once instead of being repeated identically in every branch —\n * which is also what keeps either function inside the line budget.\n */\nfunction headerlessBody<T extends Record<string, unknown>>(\n  { c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }: GridMainProps<T>,\n  { layout, zoom, density }: ReturnType<typeof useDataViewsLayout>,\n): React.ReactNode | null {\n  if (layout === \"list\" && renderListRow) {\n    return (\n      <ListBody\n        rows={c.matched}\n        renderListRow={renderListRow}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        rowGap={DENSITY_ROW_PADDING[density]}\n        group={listGroup}\n        density={density}\n        dataTestId={dataTestId}\n        emptyState={emptyState}\n      />\n    );\n  }\n  if (layout === \"board\" && board && renderCard) {\n    return (\n      <DataViewsBoard\n        rows={c.matched}\n        board={board}\n        getRowId={getRowId}\n        renderCard={renderCard}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        // DENSITY, not zoom: the board's own knob in the Exibição tab is how\n        // wide its columns are, and it is the only sizing control the board\n        // has since the zoom slider was removed.\n        cardScale={DENSITY_BOARD_SCALE[density]}\n        dataTestId={dataTestId}\n      />\n    );\n  }\n  if (layout === \"cards\" && renderCard) {\n    return (\n      <CardBody\n        rows={c.matched}\n        renderCard={renderCard}\n        getRowId={getRowId}\n        selectedIds={c.selectedIds}\n        onToggleId={c.toggleId}\n        targetCardWidth={cardTargetWidthFor(zoom, density)}\n        cardScale={cardScaleForZoom(zoom)}\n        dataTestId={dataTestId}\n        emptyState={emptyState}\n      />\n    );\n  }\n  return null;\n}\n\n/** Picks the body from the layout context: board, list, cards, or the dense grid. */\nexport function GridMain<T extends Record<string, unknown>>(props: GridMainProps<T>): React.JSX.Element {\n  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;\n  const layoutState = useDataViewsLayout();\n  const body = headerlessBody(props, layoutState);\n  if (body) {\n    return (\n      <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>\n        {body}\n      </Headerless>\n    );\n  }\n  return (\n    <GridBody\n      rows={c.matched}\n      columns={c.gridColumns}\n      getRowId={getRowId}\n      selectedIds={[...c.selectedIds]}\n      onChangeSelected={(ids) => c.setSelectedIds(new Set(ids))}\n      sortBy={c.state.sortBy}\n      onChangeSortBy={(next: GridSort[]) => c.patch({ sortBy: next })}\n      sortMode={c.serverMode ? \"server\" : \"client\"}\n      rowPadding={DENSITY_ROW_PADDING[layoutState.density]}\n      rowDetail={props.rowDetail}\n      dataTestId={dataTestId}\n      emptyState={emptyState}\n    />\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-HXEBKOSM.js

@@ -0,0 +1,329 @@
+import {
+  TableFilterContext,
+  useTableFilterContext
+} from "./chunk-7AIL2F5E.js";
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/TableFilter/TableFilter.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import Link from "@mui/material/Link/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PANEL_WIDTH = 280;
+function TableFilter({
+  children,
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(TableFilterContext.Provider, { value: { open, onOpenChange, hasActiveFilters, copy }, children });
+}
+TableFilter.displayName = "TableFilter";
+var TableFilterLayout = ({ children, className }) => {
+  const { open } = useTableFilterContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        minHeight: 0,
+        minWidth: 0,
+        flex: 1,
+        alignItems: "stretch",
+        overflow: "hidden",
+        gap: open ? 2 : 0
+      },
+      children
+    }
+  );
+};
+TableFilterLayout.displayName = "TableFilter.Layout";
+var TableFilterMain = ({ children, className }) => /* @__PURE__ */ jsx(Box, { className, sx: { minWidth: 0, flex: 1, overflowY: "auto", overflowX: "hidden" }, children });
+TableFilterMain.displayName = "TableFilter.Main";
+var TableFilterPanel = ({
+  children,
+  onClearAll,
+  ariaLabel = "Filters",
+  clearTestId
+}) => {
+  const { open, copy } = useTableFilterContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "aside",
+      "aria-label": ariaLabel,
+      "aria-hidden": !open,
+      sx: {
+        display: "flex",
+        minHeight: 0,
+        flexShrink: 0,
+        flexDirection: "column",
+        alignSelf: "stretch",
+        overflow: "hidden",
+        bgcolor: "background.paper",
+        width: open ? PANEL_WIDTH : 0,
+        borderLeft: open ? 1 : 0,
+        borderColor: "divider",
+        transition: "width 300ms ease-in-out",
+        "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+      },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            minHeight: 0,
+            flex: 1,
+            flexDirection: "column",
+            overflowY: "auto",
+            overflowX: "hidden",
+            visibility: open ? "visible" : "hidden",
+            opacity: open ? 1 : 0,
+            pointerEvents: open ? "auto" : "none",
+            transition: "opacity 200ms ease-out"
+          },
+          children: /* @__PURE__ */ jsxs(Box, { sx: { boxSizing: "border-box", display: "flex", width: "100%", minWidth: 0, flexDirection: "column", gap: 2.5, p: 2 }, children: [
+            /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+              Link,
+              {
+                component: "button",
+                type: "button",
+                underline: "hover",
+                "data-testid": clearTestId,
+                onClick: onClearAll,
+                sx: { fontSize: sxRem(12), color: "text.secondary" },
+                children: copy.clearAllFilters
+              }
+            ) }),
+            children
+          ] })
+        }
+      )
+    }
+  );
+};
+TableFilterPanel.displayName = "TableFilter.Panel";
+var TableFilterKeyword = ({
+  value,
+  onChange,
+  placeholder = "Press Enter to filter",
+  label = "Filter by keyword",
+  testId
+}) => {
+  const { copy } = useTableFilterContext();
+  const [draft, setDraft] = useState(value);
+  const prevValue = useRef(value);
+  if (prevValue.current !== value) {
+    prevValue.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  const commit = () => {
+    if (draft !== value) onChange(draft);
+  };
+  const clearKeyword = () => {
+    setDraft("");
+    if (value !== "") onChange("");
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "label", sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        size: "small",
+        sx: fieldTextFieldStyles,
+        name: "keyword",
+        placeholder,
+        value: draft,
+        onChange: (event) => setDraft(event.target.value),
+        onBlur: commit,
+        onKeyDown: (event) => {
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          commit();
+        },
+        inputProps: { "aria-label": label, "data-testid": testId },
+        InputProps: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16), color: "text.secondary" } }) }),
+          endAdornment: draft !== "" ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              "aria-label": copy.clearKeyword,
+              "data-testid": testId ? `${testId}-clear` : void 0,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: clearKeyword,
+              children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(16) } })
+            }
+          ) }) : null
+        }
+      }
+    )
+  ] });
+};
+TableFilterKeyword.displayName = "TableFilter.Keyword";
+var TableFilterSection = ({ title, children }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Divider, { sx: { mb: 2.5 } }),
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "h2", sx: { fontSize: sxRem(14), fontWeight: 600, color: "text.primary" }, children: title }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children })
+  ] })
+] });
+TableFilterSection.displayName = "TableFilter.Section";
+function TableFilterCheckboxField({
+  label,
+  options,
+  selected,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column" }, children: options.map((option) => {
+      const checked = selected.has(option.value);
+      return /* @__PURE__ */ jsx(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked,
+              onChange: (event) => onToggle(option.value, event.target.checked),
+              "data-testid": testId ? `${testId}-${option.value}` : void 0,
+              sx: { py: 0.25 }
+            }
+          ),
+          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: sxRem(14) }, children: [
+            option.label,
+            option.count != null && /* @__PURE__ */ jsxs(Box, { component: "span", sx: { color: "text.secondary" }, children: [
+              " ",
+              "(",
+              option.count,
+              ")"
+            ] })
+          ] }),
+          sx: { ml: -0.5, mr: 0 }
+        },
+        option.value
+      );
+    }) })
+  ] });
+}
+TableFilterCheckboxField.displayName = "TableFilter.CheckboxField";
+function parseBound(text) {
+  if (text.trim() === "") return void 0;
+  const parsed = Number(text);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+}
+function RangeBound({
+  bound,
+  error,
+  placeholder,
+  step,
+  ariaLabel,
+  testId,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      sx: fieldTextFieldStyles,
+      type: "number",
+      error,
+      placeholder,
+      value: bound != null ? String(bound) : "",
+      onChange: (event) => onChange(parseBound(event.target.value)),
+      inputProps: { step, "aria-label": ariaLabel, "data-testid": testId }
+    }
+  );
+}
+var isRangeInverted = (value) => value.min != null && value.max != null && value.max < value.min;
+var TableFilterRangeField = ({
+  label,
+  value,
+  onChange,
+  unit,
+  step,
+  minPlaceholder,
+  maxPlaceholder,
+  invalidLabel,
+  testId
+}) => {
+  const { copy } = useTableFilterContext();
+  const invalid = isRangeInverted(value);
+  const minText = minPlaceholder ?? copy.rangeMin;
+  const maxText = maxPlaceholder ?? copy.rangeMax;
+  const invalidText = invalidLabel ?? copy.invalidRange;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: [
+      label,
+      unit ? ` (${unit})` : ""
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        RangeBound,
+        {
+          bound: value.min,
+          error: invalid,
+          placeholder: minText,
+          step,
+          ariaLabel: `${label} ${minText}`,
+          testId: testId ? `${testId}-min` : void 0,
+          onChange: (min) => onChange({ ...value, min })
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "text.secondary" }, children: "\u2013" }),
+      /* @__PURE__ */ jsx(
+        RangeBound,
+        {
+          bound: value.max,
+          error: invalid,
+          placeholder: maxText,
+          step,
+          ariaLabel: `${label} ${maxText}`,
+          testId: testId ? `${testId}-max` : void 0,
+          onChange: (max) => onChange({ ...value, max })
+        }
+      )
+    ] }),
+    invalid && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        role: "alert",
+        "data-testid": testId ? `${testId}-error` : void 0,
+        sx: { fontSize: sxRem(11.2), color: "error.main" },
+        children: invalidText
+      }
+    )
+  ] });
+};
+TableFilterRangeField.displayName = "TableFilter.RangeField";
+TableFilter.Layout = TableFilterLayout;
+TableFilter.Main = TableFilterMain;
+TableFilter.Panel = TableFilterPanel;
+TableFilter.Keyword = TableFilterKeyword;
+TableFilter.Section = TableFilterSection;
+TableFilter.CheckboxField = TableFilterCheckboxField;
+TableFilter.RangeField = TableFilterRangeField;
+
+export {
+  TableFilter
+};
+//# sourceMappingURL=chunk-HXEBKOSM.js.map