@12-apps/ui 6.11.1 → 6.12.1

package/dist/chunk-UHXNEXOC.js

@@ -0,0 +1,131 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Dialog,
+  DialogContent
+} from "./chunk-S5LE2ARG.js";
+import {
+  createConfirmButton
+} from "./chunk-7QVYJQN4.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/ManageViewsDialog.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function tags(view) {
+  const copy = useDataViewsCopy();
+  const list = [];
+  if (view.isDefault) list.push(copy.manageViews.defaultTag);
+  if (view.pinned) list.push("Fixada");
+  if (view.shared) list.push("Compartilhada");
+  if (!view.isOwner) list.push(copy.manageViews.otherUserTag);
+  return list;
+}
+function ManageViewRow({
+  view,
+  onEdit,
+  onDelete,
+  testIdPrefix,
+  confirmCopy
+}) {
+  const ConfirmButton = useMemo(
+    () => createConfirmButton(confirmCopy, confirmCopy.defaultError),
+    [confirmCopy]
+  );
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    default3,
+    {
+      direction: "row",
+      spacing: 1,
+      sx: { alignItems: "center", justifyContent: "space-between" },
+      "data-testid": `${testIdPrefix}-manage-row-${view.id}`,
+      children: [
+        /* @__PURE__ */ jsxs(default2, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", as: "span", weight: "semibold", children: view.name }),
+          view.description && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", color: "secondary", children: view.description }),
+          tags(view).length > 0 && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", color: "secondary", children: tags(view).join(" \xB7 ") })
+        ] }),
+        view.isOwner && /* @__PURE__ */ jsxs(default3, { direction: "row", spacing: 1, sx: { flex: "0 0 auto" }, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "sm",
+              onClick: () => onEdit(view),
+              dataTestId: `${testIdPrefix}-manage-edit-${view.id}`,
+              children: copy.manageViews.edit
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ConfirmButton,
+            {
+              variant: "text",
+              size: "sm",
+              color: "danger",
+              onClick: () => onDelete(view),
+              confirm: {
+                title: copy.manageViews.deleteTitle,
+                entityName: view.name,
+                description: copy.manageViews.deleteBody,
+                confirmText: copy.manageViews.deleteConfirm
+              },
+              dataTestId: `${testIdPrefix}-manage-delete-${view.id}`,
+              children: copy.manageViews.deleteConfirm
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ManageViewsDialog({
+  open,
+  onClose,
+  views,
+  onEdit,
+  onDelete,
+  testIdPrefix = "views",
+  confirmCopy
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title: copy.manageViews.title,
+      size: "md",
+      showCloseButton: true,
+      dataTestId: `${testIdPrefix}-manage-dialog`,
+      children: /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(default3, { spacing: 1.5, "data-testid": `${testIdPrefix}-manage-list`, children: views.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: copy.manageViews.empty }) : views.map((view) => /* @__PURE__ */ jsx(
+        ManageViewRow,
+        {
+          confirmCopy,
+          view,
+          onEdit,
+          onDelete,
+          testIdPrefix
+        },
+        view.id
+      )) }) })
+    }
+  );
+}
+
+export {
+  ManageViewsDialog
+};
+//# sourceMappingURL=chunk-UHXNEXOC.js.map

package/dist/chunk-UHXNEXOC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/ManageViewsDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\n\nimport type { ConfirmActionCopy } from \"../../../copy\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { createConfirmButton } from \"../../feedback/ConfirmAction\";\nimport { Dialog, DialogContent } from \"../../feedback/Dialog\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Stack } from \"../../../mui/Stack\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { SavedViewSummary } from \"./data-views-types\";\n\ninterface ManageViewsDialogProps {\n  /** The confirm dialog's words. REQUIRED — this package ships no default copy. */\n  confirmCopy: ConfirmActionCopy;\n  open: boolean;\n  onClose: () => void;\n  views: SavedViewSummary[];\n  onEdit: (view: SavedViewSummary) => void;\n  onDelete: (view: SavedViewSummary) => void;\n  testIdPrefix?: string;\n}\n\nfunction tags(view: SavedViewSummary): string[] {\n  const copy = useDataViewsCopy();\n  const list: string[] = [];\n  if (view.isDefault) list.push(copy.manageViews.defaultTag);\n  if (view.pinned) list.push(\"Fixada\");\n  if (view.shared) list.push(\"Compartilhada\");\n  if (!view.isOwner) list.push(copy.manageViews.otherUserTag);\n  return list;\n}\n\n/**\n * \"Gerenciar visões\" dialog (FUT-89): lists every view the user can see with its\n * flags, and owner-only edit/delete. Non-owned shared views are listed read-only.\n */\n/** One saved view: its name/description/tags, and the owner-only actions. */\nfunction ManageViewRow({\n  view,\n  onEdit,\n  onDelete,\n  testIdPrefix,\n  confirmCopy,\n}: {\n  view: SavedViewSummary;\n  onEdit: (view: SavedViewSummary) => void;\n  onDelete: (view: SavedViewSummary) => void;\n  testIdPrefix: string;\n  confirmCopy: ConfirmActionCopy;\n}): React.JSX.Element {\n  const ConfirmButton = useMemo(\n    () => createConfirmButton(confirmCopy, confirmCopy.defaultError),\n    [confirmCopy],\n  );\n  const copy = useDataViewsCopy();\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={1}\n      sx={{ alignItems: \"center\", justifyContent: \"space-between\" }}\n      data-testid={`${testIdPrefix}-manage-row-${view.id}`}\n    >\n      <Box sx={{ minWidth: 0 }}>\n        <Text variant=\"body\" size=\"sm\" as=\"span\" weight=\"semibold\">\n          {view.name}\n        </Text>\n        {view.description && (\n          <Text variant=\"caption\" as=\"p\" color=\"secondary\">\n            {view.description}\n          </Text>\n        )}\n        {tags(view).length > 0 && (\n          <Text variant=\"caption\" as=\"p\" color=\"secondary\">\n            {tags(view).join(\" · \")}\n          </Text>\n        )}\n      </Box>\n      {view.isOwner && (\n        <Stack direction=\"row\" spacing={1} sx={{ flex: \"0 0 auto\" }}>\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            onClick={() => onEdit(view)}\n            dataTestId={`${testIdPrefix}-manage-edit-${view.id}`}\n          >\n            {copy.manageViews.edit}\n          </Button>\n          {/* Confirm-gated (FUT-546): a saved view is a filter set somebody\n              built by hand, and there is no undo behind this. */}\n          <ConfirmButton\n            variant=\"text\"\n            size=\"sm\"\n            color=\"danger\"\n            onClick={() => onDelete(view)}\n            confirm={{\n              title: copy.manageViews.deleteTitle,\n              entityName: view.name,\n              description:\n                copy.manageViews.deleteBody,\n              confirmText: copy.manageViews.deleteConfirm,\n            }}\n            dataTestId={`${testIdPrefix}-manage-delete-${view.id}`}\n          >\n            {copy.manageViews.deleteConfirm}\n          </ConfirmButton>\n        </Stack>\n      )}\n    </Stack>\n  );\n}\n\nexport function ManageViewsDialog({\n  open,\n  onClose,\n  views,\n  onEdit,\n  onDelete,\n  testIdPrefix = \"views\",\n  confirmCopy,\n}: ManageViewsDialogProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={copy.manageViews.title}\n      size=\"md\"\n      showCloseButton\n      dataTestId={`${testIdPrefix}-manage-dialog`}\n    >\n      <DialogContent>\n        <Stack spacing={1.5} data-testid={`${testIdPrefix}-manage-list`}>\n          {views.length === 0 ? (\n            <Text variant=\"body\" as=\"p\">\n              {copy.manageViews.empty}\n            </Text>\n          ) : (\n            views.map((view) => (\n              <ManageViewRow confirmCopy={confirmCopy}\n                key={view.id}\n                view={view}\n                onEdit={onEdit}\n                onDelete={onDelete}\n                testIdPrefix={testIdPrefix}\n              />\n            ))\n          )}\n        </Stack>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-ULTOQ6ZV.js

@@ -0,0 +1,306 @@
+import {
+  useVirtualScrolling
+} from "./chunk-DF4K5XVW.js";
+
+// src/components/data-display/Table/TableParts.hooks.tsx
+import { useCallback as useCallback2 } from "react";
+
+// src/components/data-display/Table/TableParts.tsx
+import Box from "@mui/material/Box/index.js";
+import Checkbox from "@mui/material/Checkbox/index.js";
+import TableBody from "@mui/material/TableBody/index.js";
+import TableCell from "@mui/material/TableCell/index.js";
+import TableHead from "@mui/material/TableHead/index.js";
+import TableRow from "@mui/material/TableRow/index.js";
+import TableSortLabel from "@mui/material/TableSortLabel/index.js";
+import React, { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ariaSortFor = (canSort, isSorted, direction) => {
+  if (!canSort || !isSorted) return void 0;
+  return direction === "asc" ? "ascending" : "descending";
+};
+var HeaderCell = ({ column, sortable, sortConfig, onSort }) => {
+  const canSort = Boolean(sortable) && column.sortable !== false;
+  const isSorted = sortConfig?.key === column.key;
+  return /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      align: column.align || "left",
+      style: { minWidth: column.minWidth, width: column.width },
+      "aria-sort": ariaSortFor(canSort, isSorted, sortConfig?.direction),
+      children: canSort ? /* @__PURE__ */ jsx(
+        TableSortLabel,
+        {
+          active: isSorted,
+          direction: isSorted ? sortConfig?.direction : "asc",
+          onClick: () => onSort(column.key),
+          "data-testid": "sort-indicator",
+          "aria-label": `Sort by ${column.label}`,
+          children: column.label
+        }
+      ) : column.label
+    }
+  );
+};
+var EnhancedTableHeader = React.memo(({
+  columns,
+  data,
+  sortable,
+  sortConfig,
+  onSortChange,
+  selectable,
+  selectedRows = [],
+  onSelectAll
+}) => {
+  const handleSort = useCallback(
+    (columnKey) => {
+      if (!sortable || !onSortChange) return;
+      const direction = sortConfig?.key === columnKey && sortConfig.direction === "asc" ? "desc" : "asc";
+      onSortChange(columnKey, direction);
+    },
+    [sortable, onSortChange, sortConfig]
+  );
+  const handleSelectAll = useCallback(
+    (event) => {
+      if (!onSelectAll) return;
+      onSelectAll(event.target.checked);
+    },
+    [onSelectAll]
+  );
+  return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+    selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        indeterminate: selectedRows.length > 0 && selectedRows.length < data.length,
+        checked: selectedRows.length === data.length && data.length > 0,
+        onChange: handleSelectAll,
+        inputProps: { "aria-label": "select all" }
+      }
+    ) }),
+    columns.map((column) => /* @__PURE__ */ jsx(
+      HeaderCell,
+      {
+        column,
+        sortable,
+        sortConfig,
+        onSort: handleSort
+      },
+      column.key
+    ))
+  ] }) });
+});
+EnhancedTableHeader.displayName = "EnhancedTableHeader";
+var TableDataRow = ({
+  rowData,
+  rowKey,
+  index,
+  offsetY,
+  columns,
+  selected,
+  selectable,
+  rowHeight,
+  onRowClick,
+  onRowFocus,
+  onRowBlur,
+  onSelect,
+  virtualScrolling,
+  renderCell
+}) => /* @__PURE__ */ jsxs(
+  TableRow,
+  {
+    selected,
+    className: selected ? "selected" : "",
+    onClick: (event) => onRowClick?.(event, rowData),
+    onFocus: (event) => onRowFocus?.(event, rowData),
+    onBlur: (event) => onRowBlur?.(event, rowData),
+    style: virtualScrolling ? {
+      transform: `translateY(${offsetY}px)`,
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: rowHeight
+    } : void 0,
+    children: [
+      selectable && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: selected,
+          onChange: (event) => onSelect(event, rowKey),
+          onClick: (event) => event.stopPropagation(),
+          inputProps: { "aria-label": `select row ${index + 1}` }
+        }
+      ) }),
+      columns.map((column) => {
+        const value = rowData[column.key];
+        return /* @__PURE__ */ jsx(TableCell, { align: column.align || "left", children: renderCell ? renderCell(value, column, rowData, index) : column.render ? column.render(value, rowData) : value }, column.key);
+      })
+    ]
+  },
+  String(rowKey)
+);
+var VirtualisedBody = ({ visibleItems, rowHeight, containerHeight, onScroll, renderTableRow }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    onScroll,
+    style: {
+      height: containerHeight,
+      overflow: "auto",
+      position: "relative"
+    },
+    children: /* @__PURE__ */ jsx(
+      TableBody,
+      {
+        style: {
+          height: visibleItems.totalHeight,
+          position: "relative"
+        },
+        children: visibleItems.items.map(
+          (rowData, index) => renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)
+        )
+      }
+    )
+  }
+);
+var PlainBody = ({ data, renderTableRow }) => /* @__PURE__ */ jsx(TableBody, { children: data.map((rowData, index) => renderTableRow(rowData, index)) });
+var EnhancedTableBody = React.memo(({
+  data,
+  columns,
+  selectedRows = [],
+  onRowClick,
+  onRowFocus,
+  onRowBlur,
+  onSelectionChange,
+  rowKeyExtractor,
+  selectable,
+  renderRow,
+  renderCell,
+  virtualScrolling,
+  containerHeight,
+  rowHeight,
+  overscan = 5
+}) => {
+  const renderTableRow = useTableRowRenderer({
+    columns,
+    selectedRows,
+    onRowClick,
+    onRowFocus,
+    onRowBlur,
+    onSelectionChange,
+    rowKeyExtractor,
+    selectable,
+    renderRow,
+    renderCell,
+    virtualScrolling,
+    rowHeight
+  });
+  const { visibleItems, handleScroll } = useVirtualScrolling(
+    data,
+    rowHeight || 40,
+    typeof containerHeight === "number" ? containerHeight : 400,
+    overscan
+  );
+  if (virtualScrolling && containerHeight && rowHeight) {
+    return /* @__PURE__ */ jsx(
+      VirtualisedBody,
+      {
+        visibleItems,
+        rowHeight,
+        containerHeight,
+        onScroll: handleScroll,
+        renderTableRow
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(PlainBody, { data, renderTableRow });
+});
+EnhancedTableBody.displayName = "EnhancedTableBody";
+
+// src/components/data-display/Table/TableParts.hooks.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var useRowKey = (rowKeyExtractor) => useCallback2(
+  (rowData, index) => rowKeyExtractor ? rowKeyExtractor(rowData, index) : rowData.id || index,
+  [rowKeyExtractor]
+);
+var useRowSelection = ({
+  selectedRows,
+  onSelectionChange
+}) => useCallback2(
+  (event, rowKey) => {
+    event.stopPropagation();
+    if (!onSelectionChange) return;
+    onSelectionChange(rowKey, !selectedRows.includes(rowKey));
+  },
+  [onSelectionChange, selectedRows]
+);
+var useTableRowRenderer = ({
+  columns,
+  selectedRows,
+  onRowClick,
+  onRowFocus,
+  onRowBlur,
+  onSelectionChange,
+  rowKeyExtractor,
+  selectable,
+  renderRow,
+  renderCell,
+  virtualScrolling,
+  rowHeight
+}) => {
+  const getRowKey = useRowKey(rowKeyExtractor);
+  const isRowSelected = useCallback2(
+    (rowKey) => selectedRows.includes(rowKey),
+    [selectedRows]
+  );
+  const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });
+  const renderTableRow = useCallback2(
+    (rowData, index, offsetY = 0) => {
+      const rowKey = getRowKey(rowData, index);
+      const selected = isRowSelected(rowKey);
+      if (renderRow) return renderRow(rowData, index, selected);
+      return /* @__PURE__ */ jsx2(
+        TableDataRow,
+        {
+          rowData,
+          rowKey,
+          index,
+          offsetY,
+          columns,
+          selected,
+          selectable,
+          rowHeight,
+          onRowClick,
+          onRowFocus,
+          onRowBlur,
+          onSelect: handleRowSelection,
+          virtualScrolling,
+          renderCell
+        },
+        rowKey
+      );
+    },
+    [
+      columns,
+      getRowKey,
+      isRowSelected,
+      handleRowSelection,
+      onRowClick,
+      onRowFocus,
+      onRowBlur,
+      renderRow,
+      renderCell,
+      rowHeight,
+      selectable,
+      virtualScrolling
+    ]
+  );
+  return renderTableRow;
+};
+
+export {
+  useTableRowRenderer,
+  EnhancedTableHeader,
+  TableDataRow,
+  EnhancedTableBody
+};
+//# sourceMappingURL=chunk-ULTOQ6ZV.js.map

package/dist/chunk-ULTOQ6ZV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/TableParts.hooks.tsx","../src/components/data-display/Table/TableParts.tsx"],"sourcesContent":["import type React from 'react';\nimport { useCallback } from 'react';\n\nimport { TableDataRow } from './TableParts';\nimport type { TableBodyProps } from './Table.types';\n\n// Row identity, selection and the row element itself. Split out of\n// EnhancedTableBody so that component is just the virtualised/plain choice.\n// A row's identity: the caller's extractor, else its id, else its position.\nconst useRowKey = (rowKeyExtractor: TableBodyProps['rowKeyExtractor']) =>\n  useCallback(\n    (rowData: Record<string, unknown>, index: number): string | number =>\n      rowKeyExtractor ? rowKeyExtractor(rowData, index) : (rowData.id as string | number) || index,\n    [rowKeyExtractor],\n  );\n\nconst useRowSelection = ({\n  selectedRows,\n  onSelectionChange,\n}: {\n  selectedRows: Array<string | number>;\n  onSelectionChange: TableBodyProps['onSelectionChange'];\n}) =>\n  useCallback(\n    (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => {\n      // Stop propagation so selecting does not also fire the row click.\n      event.stopPropagation();\n      if (!onSelectionChange) return;\n      onSelectionChange(rowKey, !selectedRows.includes(rowKey));\n    },\n    [onSelectionChange, selectedRows],\n  );\n\nexport const useTableRowRenderer = ({\n  columns,\n  selectedRows,\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelectionChange,\n  rowKeyExtractor,\n  selectable,\n  renderRow,\n  renderCell,\n  virtualScrolling,\n  rowHeight,\n}: Pick<\n  TableBodyProps,\n  | 'columns'\n  | 'onRowClick'\n  | 'onRowFocus'\n  | 'onRowBlur'\n  | 'onSelectionChange'\n  | 'rowKeyExtractor'\n  | 'selectable'\n  | 'renderRow'\n  | 'renderCell'\n  | 'virtualScrolling'\n  | 'rowHeight'\n> & { selectedRows: Array<string | number> }) => {\n  const getRowKey = useRowKey(rowKeyExtractor);\n  const isRowSelected = useCallback(\n    (rowKey: string | number) => selectedRows.includes(rowKey),\n    [selectedRows],\n  );\n  const handleRowSelection = useRowSelection({ selectedRows, onSelectionChange });\n\n  const renderTableRow = useCallback(\n    (rowData: Record<string, unknown>, index: number, offsetY: number = 0) => {\n      const rowKey = getRowKey(rowData, index);\n      const selected = isRowSelected(rowKey);\n\n      if (renderRow) return renderRow(rowData, index, selected);\n\n      return (\n        <TableDataRow\n          key={rowKey}\n          rowData={rowData}\n          rowKey={rowKey}\n          index={index}\n          offsetY={offsetY}\n          columns={columns}\n          selected={selected}\n          selectable={selectable}\n          rowHeight={rowHeight}\n          onRowClick={onRowClick}\n          onRowFocus={onRowFocus}\n          onRowBlur={onRowBlur}\n          onSelect={handleRowSelection}\n          virtualScrolling={virtualScrolling}\n          renderCell={renderCell}\n        />\n      );\n    },\n    [\n      columns,\n      getRowKey,\n      isRowSelected,\n      handleRowSelection,\n      onRowClick,\n      onRowFocus,\n      onRowBlur,\n      renderRow,\n      renderCell,\n      rowHeight,\n      selectable,\n      virtualScrolling,\n    ],\n  );\n\n  return renderTableRow;\n};\n","import Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableHead from '@mui/material/TableHead/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport TableSortLabel from '@mui/material/TableSortLabel/index.js';\nimport React, { useCallback } from 'react';\n\nimport { useVirtualScrolling } from './Table.hooks';\nimport { useTableRowRenderer } from './TableParts.hooks';\nimport type { ColumnConfig, TableBodyProps, TableHeaderProps } from './Table.types';\n\n// Mirrors the visible sort indicator for assistive technology; undefined when\n// the column is not sorted, which is what removes the attribute entirely.\nconst ariaSortFor = (\n  canSort: boolean,\n  isSorted: boolean,\n  direction?: 'asc' | 'desc',\n): 'ascending' | 'descending' | undefined => {\n  if (!canSort || !isSorted) return undefined;\n\n  return direction === 'asc' ? 'ascending' : 'descending';\n};\n\n// One header cell. Sorting is offered when the table is sortable and the column\n// has not opted out; aria-sort mirrors the visible indicator.\nconst HeaderCell: React.FC<{\n  column: ColumnConfig;\n  sortable?: boolean;\n  sortConfig?: { key: string; direction: 'asc' | 'desc' };\n  onSort: (columnKey: string) => void;\n}> = ({ column, sortable, sortConfig, onSort }) => {\n  const canSort = Boolean(sortable) && column.sortable !== false;\n  const isSorted = sortConfig?.key === column.key;\n\n  return (\n    <TableCell\n      align={column.align || 'left'}\n      style={{ minWidth: column.minWidth, width: column.width }}\n      aria-sort={ariaSortFor(canSort, isSorted, sortConfig?.direction)}\n    >\n      {canSort ? (\n        <TableSortLabel\n          active={isSorted}\n          direction={isSorted ? sortConfig?.direction : 'asc'}\n          onClick={() => onSort(column.key)}\n          data-testid=\"sort-indicator\"\n          aria-label={`Sort by ${column.label}`}\n        >\n          {column.label}\n        </TableSortLabel>\n      ) : (\n        column.label\n      )}\n    </TableCell>\n  );\n};\n\nexport const EnhancedTableHeader: React.FC<TableHeaderProps> = React.memo(({\n  columns,\n  data,\n  sortable,\n  sortConfig,\n  onSortChange,\n  selectable,\n  selectedRows = [],\n  onSelectAll }) => {\n  const handleSort = useCallback(\n    (columnKey: string) => {\n      if (!sortable || !onSortChange) return;\n      \n      const direction = \n        sortConfig?.key === columnKey && sortConfig.direction === 'asc' ? 'desc' : 'asc';\n      onSortChange(columnKey, direction);\n    },\n    [sortable, onSortChange, sortConfig]\n  );\n\n  const handleSelectAll = useCallback(\n    (event: React.ChangeEvent<globalThis.HTMLInputElement>) => {\n      if (!onSelectAll) return;\n      onSelectAll(event.target.checked);\n    },\n    [onSelectAll]\n  );\n\n  return (\n    <TableHead>\n      <TableRow>\n        {selectable && (\n          <TableCell padding=\"checkbox\">\n            <Checkbox\n              indeterminate={selectedRows.length > 0 && selectedRows.length < data.length}\n              checked={selectedRows.length === data.length && data.length > 0}\n              onChange={handleSelectAll}\n              inputProps={{ 'aria-label': 'select all' }}\n            />\n          </TableCell>\n        )}\n        {columns.map((column) => (\n          <HeaderCell\n            key={column.key}\n            column={column}\n            sortable={sortable}\n            sortConfig={sortConfig}\n            onSort={handleSort}\n          />\n        ))}\n      </TableRow>\n    </TableHead>\n  );\n});\n\nEnhancedTableHeader.displayName = 'EnhancedTableHeader';\n\n// One data row. Split out of the memoised renderTableRow callback so the\n// callback stays a short dispatch and the row markup is readable on its own.\nexport const TableDataRow: React.FC<{\n  rowData: Record<string, unknown>;\n  rowKey: string | number;\n  index: number;\n  offsetY: number;\n  columns: ColumnConfig[];\n  selected: boolean;\n  selectable?: boolean;\n  rowHeight?: number;\n  onRowClick?: TableBodyProps['onRowClick'];\n  onRowFocus?: TableBodyProps['onRowFocus'];\n  onRowBlur?: TableBodyProps['onRowBlur'];\n  onSelect: (event: React.MouseEvent | React.ChangeEvent, rowKey: string | number) => void;\n  virtualScrolling?: boolean;\n  renderCell?: TableBodyProps['renderCell'];\n}> = ({\n  rowData,\n  rowKey,\n  index,\n  offsetY,\n  columns,\n  selected,\n  selectable,\n  rowHeight,\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelect,\n  virtualScrolling,\n  renderCell }) => (\n\n      <TableRow\n        key={String(rowKey)}\n        selected={selected}\n        className={selected ? 'selected' : ''}\n        onClick={(event: React.MouseEvent<globalThis.HTMLTableRowElement>) => onRowClick?.(event, rowData)}\n        onFocus={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowFocus?.(event, rowData)}\n        onBlur={(event: React.FocusEvent<globalThis.HTMLTableRowElement>) => onRowBlur?.(event, rowData)}\n        style={virtualScrolling ? { \n          transform: `translateY(${offsetY}px)`,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          height: rowHeight } : undefined}\n      >\n        {selectable && (\n          <TableCell padding=\"checkbox\">\n            <Checkbox\n              checked={selected}\n              onChange={(event) => onSelect(event, rowKey)}\n              onClick={(event) => event.stopPropagation()}\n              inputProps={{ 'aria-label': `select row ${index + 1}` }}\n            />\n          </TableCell>\n        )}\n        {columns.map((column) => {\n          const value = rowData[column.key];\n          return (\n            <TableCell key={column.key} align={column.align || 'left'}>\n              {renderCell \n                ? renderCell(value, column, rowData, index)\n                : column.render \n                ? column.render(value, rowData) \n                : (value as React.ReactNode)\n              }\n            </TableCell>\n          );\n        })}\n      </TableRow>\n);\n\n// Only the rows in view are rendered, positioned by absolute offset inside a\n// spacer sized to the full data set.\nconst VirtualisedBody: React.FC<{\n  visibleItems: {\n    items: Record<string, unknown>[];\n    startIndex: number;\n    offsetY: number;\n    totalHeight: number;\n  };\n  rowHeight: number;\n  containerHeight: number;\n  onScroll: (event: React.UIEvent<HTMLDivElement>) => void;\n  renderTableRow: (\n    rowData: Record<string, unknown>,\n    index: number,\n    offsetY?: number,\n  ) => React.ReactNode;\n}> = ({ visibleItems, rowHeight, containerHeight, onScroll, renderTableRow }) => (\n\n    <Box\n      onScroll={onScroll}\n      style={{\n        height: containerHeight,\n        overflow: 'auto',\n        position: 'relative' }}\n    >\n      <TableBody\n        style={{\n          height: visibleItems.totalHeight,\n          position: 'relative' }}\n      >\n        {visibleItems.items.map((rowData, index) => \n          renderTableRow(rowData, visibleItems.startIndex + index, visibleItems.offsetY + index * rowHeight)\n        )}\n      </TableBody>\n    </Box>\n  \n);\n\nconst PlainBody: React.FC<{\n  data: TableBodyProps['data'];\n  renderTableRow: (rowData: Record<string, unknown>, index: number) => React.ReactNode;\n}> = ({ data, renderTableRow }) => (\n\n    <TableBody>\n      {data.map((rowData, index) => renderTableRow(rowData, index))}\n    </TableBody>\n);\n\n// Enhanced Table Body Component  \nexport const EnhancedTableBody: React.FC<TableBodyProps> = React.memo(({\n  data,\n  columns,\n  selectedRows = [],\n  onRowClick,\n  onRowFocus,\n  onRowBlur,\n  onSelectionChange,\n  rowKeyExtractor,\n  selectable,\n  renderRow,\n  renderCell,\n  virtualScrolling,\n  containerHeight,\n  rowHeight,\n  overscan = 5 }) => {\n  const renderTableRow = useTableRowRenderer({\n    columns,\n    selectedRows,\n    onRowClick,\n    onRowFocus,\n    onRowBlur,\n    onSelectionChange,\n    rowKeyExtractor,\n    selectable,\n    renderRow,\n    renderCell,\n    virtualScrolling,\n    rowHeight });\n\n  const { visibleItems, handleScroll } = useVirtualScrolling(\n    data, \n    rowHeight || 40, \n    typeof containerHeight === 'number' ? containerHeight : 400, \n    overscan\n  );\n\n  if (virtualScrolling && containerHeight && rowHeight) {\n    return (\n      <VirtualisedBody\n        visibleItems={visibleItems}\n        rowHeight={rowHeight}\n        containerHeight={containerHeight}\n        onScroll={handleScroll}\n        renderTableRow={renderTableRow}\n      />\n    );\n  }\n\n  return (\n    <PlainBody data={data} renderTableRow={renderTableRow} />\n  );\n});\n\nEnhancedTableBody.displayName = 'EnhancedTableBody';\n\n// Main Table Component\n"],"mappings":"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","names":["useCallback","jsx","useCallback"]}

package/dist/chunk-UNF65XZW.js

@@ -0,0 +1,134 @@
+import {
+  DragHandle
+} from "./chunk-JCJGJX7V.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-BJ3J6FTN.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/base-list-card-gutters.tsx
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import IconButton from "@mui/material/IconButton/index.js";
+import { jsx } from "react/jsx-runtime";
+var CHECKBOX_PAD = "-9px";
+function DragSlot({
+  drag,
+  reserve,
+  testId
+}) {
+  if (!drag.draggable) return reserve ? /* @__PURE__ */ jsx(default2, { "data-slot": "drag" }) : null;
+  return (
+    // display:flex, as on the checkbox below: the grip is an inline-grid, and in
+    // a block parent an inline box sits on the text baseline — the line box adds
+    // descender leading under it (21px glyph in a 31px slot) and drops the grip
+    // 5px below the row's centre. A flex parent has no baseline to sit on.
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-slot": "drag",
+        sx: { position: "relative", zIndex: 1, display: "flex", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            handleProps: drag.handleProps,
+            gated: drag.handleProps !== void 0,
+            testId
+          }
+        )
+      }
+    )
+  );
+}
+function SelectSlot({
+  selectable,
+  selected,
+  reserve,
+  onToggleSelect,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (!selectable) return reserve ? /* @__PURE__ */ jsx(default2, { "data-slot": "select" }) : null;
+  return (
+    // z-index 1: above the stretched link, or the anchor swallows the click.
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-slot": "select",
+        sx: { position: "relative", zIndex: 1, mx: CHECKBOX_PAD, display: "flex" },
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selected,
+            onChange: () => onToggleSelect?.(),
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggleSelect?.(event);
+            },
+            size: "small",
+            "data-testid": testId,
+            "aria-label": copy.selection.selectRow
+          }
+        )
+      }
+    )
+  );
+}
+function DiscloseSlot({
+  expandable,
+  expanded,
+  reserve,
+  onToggle,
+  controls,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (!expandable) return reserve ? /* @__PURE__ */ jsx(default2, { "data-slot": "disclose" }) : null;
+  return (
+    // z-index 1 and flex for the same reasons the other two gutters use them:
+    // above a stretched link that would otherwise swallow the click, and out of
+    // a baseline that would drop the glyph below the row's centre.
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-slot": "disclose",
+        sx: { position: "relative", zIndex: 1, display: "flex", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "aria-expanded": expanded,
+            "aria-controls": expanded ? controls : void 0,
+            "aria-label": expanded ? copy.selection.collapseRow : copy.selection.expandRow,
+            "data-testid": testId,
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggle();
+            },
+            onKeyDown: (event) => event.stopPropagation(),
+            sx: {
+              p: 0.25,
+              transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform 150ms ease",
+              // Honour a reduced-motion preference: the state is carried by the
+              // angle, not by the animation, so dropping the tween loses nothing.
+              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+            },
+            children: /* @__PURE__ */ jsx(KeyboardArrowRightIcon, { fontSize: "small" })
+          }
+        )
+      }
+    )
+  );
+}
+
+export {
+  DragSlot,
+  SelectSlot,
+  DiscloseSlot
+};
+//# sourceMappingURL=chunk-UNF65XZW.js.map

package/dist/chunk-UNF65XZW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-gutters.tsx"],"sourcesContent":["\"use client\";\n\nimport KeyboardArrowRightIcon from \"@mui/icons-material/KeyboardArrowRight\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\n\nimport { Checkbox } from \"../../form/Checkbox\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { DragHandle, useDragItem } from \"./data-views-drag\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * THE THREE GUTTERS AT THE HEAD OF A ROW — the disclosure chevron, the drag grip\n * and the select checkbox.\n *\n * Split from `base-list-card` at the size gate. All three answer the same\n * question in the same way: whether to occupy a rail, hold one open, or leave\n * the template altogether. See `railsTemplateFor` for why the third option has\n * to exist.\n */\n\n/**\n * MUI's Checkbox carries 9px of hit-area padding on every side.\n *\n * Left uncancelled, a row asking for 8px of padding puts the checkbox SQUARE 17px\n * in — and with the empty drag gutter's gap ahead of it, 46px in, which is what\n * made the left edge look like a mistake. The hit area is worth keeping; the\n * optical inset is not, so the padding is cancelled with a negative margin and\n * the glyph lands where the row's own padding says it should.\n */\nconst CHECKBOX_PAD = \"-9px\";\n\n/** The grip. Its gutter is reserved only when the list says to reserve it. */\nexport function DragSlot({\n  drag,\n  reserve,\n  testId,\n}: {\n  drag: ReturnType<typeof useDragItem>;\n  reserve: boolean;\n  testId?: string;\n}): React.JSX.Element | null {\n  if (!drag.draggable) return reserve ? <Box data-slot=\"drag\" /> : null;\n  return (\n    // display:flex, as on the checkbox below: the grip is an inline-grid, and in\n    // a block parent an inline box sits on the text baseline — the line box adds\n    // descender leading under it (21px glyph in a 31px slot) and drops the grip\n    // 5px below the row's centre. A flex parent has no baseline to sit on.\n    <Box\n      data-slot=\"drag\"\n      sx={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\" }}\n    >\n      <DragHandle\n        handleProps={drag.handleProps}\n        gated={drag.handleProps !== undefined}\n        testId={testId}\n      />\n    </Box>\n  );\n}\n\n/** The select checkbox. Its gutter is reserved only when the list says to. */\nexport function SelectSlot({\n  selectable,\n  selected,\n  reserve,\n  onToggleSelect,\n  testId,\n}: {\n  selectable: boolean;\n  selected: boolean;\n  reserve: boolean;\n  onToggleSelect?: (event?: React.MouseEvent) => void;\n  testId?: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (!selectable) return reserve ? <Box data-slot=\"select\" /> : null;\n  return (\n    // z-index 1: above the stretched link, or the anchor swallows the click.\n    <Box\n      data-slot=\"select\"\n      sx={{ position: \"relative\", zIndex: 1, mx: CHECKBOX_PAD, display: \"flex\" }}\n    >\n      <Checkbox\n        checked={selected}\n        onChange={() => onToggleSelect?.()}\n        onClick={(event) => {\n          event.stopPropagation();\n          onToggleSelect?.(event);\n        }}\n        size=\"small\"\n        data-testid={testId}\n        aria-label={copy.selection.selectRow}\n      />\n    </Box>\n  );\n}\n\n/**\n * THE DISCLOSURE CHEVRON — the affordance that says this row has more.\n *\n * Rendered only when the card was given a body to reveal. A chevron on a row\n * that opens onto nothing is worse than no chevron: it is a promise the row\n * cannot keep, and an operator who presses it twice learns to stop trusting the\n * column. So `BaseListCard` passes `null` here when it has no children, the\n * slot returns nothing, and — standalone — the rail leaves the template\n * entirely.\n *\n * ROTATED, NOT SWAPPED. One glyph turned 90° rather than a right-chevron\n * exchanged for a down-chevron: the rotation is animatable and reads as the\n * same object moving, where a swap is two icons flickering. It also keeps the\n * button's box identical in both states, so the caption beside it cannot shift\n * as the row opens.\n *\n * `stopPropagation`, because a row is frequently clickable in its own right —\n * opening the record is not the same act as peeking at its detail, and without\n * this the chevron would do both at once.\n */\nexport function DiscloseSlot({\n  expandable,\n  expanded,\n  reserve,\n  onToggle,\n  controls,\n  testId,\n}: {\n  expandable: boolean;\n  expanded: boolean;\n  reserve: boolean;\n  onToggle: () => void;\n  /** The id of the region this button opens, for `aria-controls`. */\n  controls: string;\n  testId?: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (!expandable) return reserve ? <Box data-slot=\"disclose\" /> : null;\n  return (\n    // z-index 1 and flex for the same reasons the other two gutters use them:\n    // above a stretched link that would otherwise swallow the click, and out of\n    // a baseline that would drop the glyph below the row's centre.\n    <Box\n      data-slot=\"disclose\"\n      sx={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\" }}\n    >\n      <IconButton\n        size=\"small\"\n        aria-expanded={expanded}\n        aria-controls={expanded ? controls : undefined}\n        aria-label={expanded ? copy.selection.collapseRow : copy.selection.expandRow}\n        data-testid={testId}\n        onClick={(event) => {\n          event.stopPropagation();\n          onToggle();\n        }}\n        // The row's own keyboard handler treats Enter/Space as \"open the\n        // record\"; the button already handles both, so the event must not reach\n        // it and fire the second action too.\n        onKeyDown={(event) => event.stopPropagation()}\n        sx={{\n          p: 0.25,\n          transform: expanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n          transition: \"transform 150ms ease\",\n          // Honour a reduced-motion preference: the state is carried by the\n          // angle, not by the animation, so dropping the tween loses nothing.\n          \"@media (prefers-reduced-motion: reduce)\": { transition: \"none\" },\n        }}\n      >\n        <KeyboardArrowRightIcon fontSize=\"small\" />\n      </IconButton>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAEA,OAAO,4BAA4B;AACnC,OAAO,gBAAgB;AAuCiB;AAZxC,IAAM,eAAe;AAGd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,MAAI,CAAC,KAAK,UAAW,QAAO,UAAU,oBAACA,UAAA,EAAI,aAAU,QAAO,IAAK;AACjE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,SAAS,QAAQ,YAAY,SAAS;AAAA,QAE7E;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,YAClB,OAAO,KAAK,gBAAgB;AAAA,YAC5B;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,WAAY,QAAO,UAAU,oBAACA,UAAA,EAAI,aAAU,UAAS,IAAK;AAC/D;AAAA;AAAA,IAEE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,IAAI,cAAc,SAAS,OAAO;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,MAAM,iBAAiB;AAAA,YACjC,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,+BAAiB,KAAK;AAAA,YACxB;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb,cAAY,KAAK,UAAU;AAAA;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA;AAEJ;AAsBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQ6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,WAAY,QAAO,UAAU,oBAACA,UAAA,EAAI,aAAU,YAAW,IAAK;AACjE;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,SAAS,QAAQ,YAAY,SAAS;AAAA,QAE7E;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,WAAW,WAAW;AAAA,YACrC,cAAY,WAAW,KAAK,UAAU,cAAc,KAAK,UAAU;AAAA,YACnE,eAAa;AAAA,YACb,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,uBAAS;AAAA,YACX;AAAA,YAIA,WAAW,CAAC,UAAU,MAAM,gBAAgB;AAAA,YAC5C,IAAI;AAAA,cACF,GAAG;AAAA,cACH,WAAW,WAAW,kBAAkB;AAAA,cACxC,YAAY;AAAA;AAAA;AAAA,cAGZ,2CAA2C,EAAE,YAAY,OAAO;AAAA,YAClE;AAAA,YAEA,8BAAC,0BAAuB,UAAS,SAAQ;AAAA;AAAA,QAC3C;AAAA;AAAA,IACF;AAAA;AAEJ;","names":["default"]}