@jielga/tmdatagrid 1.0.0 → 1.0.2

package/src/tmdatagrid/components/TMDataGrid.tsx

@@ -35,7 +35,7 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
   className?: string;
   /**
    * Inline styles. Widened to accept CSS variables, which is how the grid's
-   * colours are themed — `--dg-row-selected-bg` for the selected row
+   * colours are themed - `--dg-row-selected-bg` for the selected row
    * background. Plain `CSSProperties` rejects `--*` keys.
    */
   style?: CSSProperties & Record<`--${string}`, string | number>;
@@ -44,7 +44,7 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
   /**
    * Names this grid for tests. The grid names its own pieces with
    * `data-dg-part` rather than minting test ids, and those repeat across
-   * grids — scope through this one and they stop colliding:
+   * grids - scope through this one and they stop colliding:
    *
    * ```ts
    * page.getByTestId("orders").locator('[data-dg-part="row"][data-row-id="42"]')
@@ -56,7 +56,7 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
 };
 
 /**
- * Root of the grid. Takes the object returned by `useTMDataGrid` — spread it —
+ * Root of the grid. Takes the object returned by `useTMDataGrid` - spread it -
  * and publishes it to the compound components below it:
  *
  * ```tsx
@@ -133,7 +133,7 @@ function TMDataGridRoot<TData extends RowData>({
       <div
         id={id}
         data-testid={testId}
-        // The handle everything else scopes off — see the `data-testid` prop.
+        // The handle everything else scopes off - see the `data-testid` prop.
         data-dg-root
         data-size={size}
         className={[classes.root, className].filter(Boolean).join(" ")}
@@ -160,7 +160,7 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   FilterPanel: TMDataGridFilterPanel,
   /**
    * Takes the grid as an `api` prop rather than from context, so it can be
-   * rendered outside `<TMDataGrid>` — a page header, for instance.
+   * rendered outside `<TMDataGrid>` - a page header, for instance.
    */
   FilterPills: TMDataGridFilterPills,
   /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */

package/src/tmdatagrid/components/TMDataGridCellEditor.tsx

@@ -42,11 +42,11 @@ const BUILT_IN_EDITORS: Record<
 export type TMDataGridCellEditorClose =
   | { committed: true; via: "enter" | "tab" | "shift-tab" | "pick" }
   | { committed: false; via: "escape" }
-  /** Batch: the editor closed, the draft stays — Enter parks, Tab moves on. */
+  /** Batch: the editor closed, the draft stays - Enter parks, Tab moves on. */
   | { committed: false; via: "defer" | "defer-tab" | "defer-shift-tab" };
 
 /**
- * The host an editing cell mounts — it owns the field, the keys and the blur
+ * The host an editing cell mounts - it owns the field, the keys and the blur
  * policy; the editor inside it (a built-in picked by `meta.type`, or the
  * column's `meta.editor`) owns the input.
  *
@@ -66,7 +66,7 @@ export function TMDataGridCellEditor({
   takeSeedText: () => string | undefined;
   /** In row mode only the first editable cell takes the focus. */
   autoFocus?: boolean;
-  /** After the editor closed itself — the table moves the focus. */
+  /** After the editor closed itself - the table moves the focus. */
   onClose: (args: TMDataGridCellEditorClose) => void;
 }) {
   const { table, edit, features, labels, controlSize } = useTMDataGridContext();
@@ -164,7 +164,7 @@ export function TMDataGridCellEditor({
   };
 
   /**
-   * Focus left the editor entirely — a click somewhere else. Under `"cell"`
+   * Focus left the editor entirely - a click somewhere else. Under `"cell"`
    * that commits (Sheets); a commit blocked by validation keeps the form and
    * its invalid marker, with the editor closed. The confirming modes keep
    * the draft open-but-inactive, waiting for their explicit ✓.

package/src/tmdatagrid/components/TMDataGridColumnsPanel.tsx

@@ -82,7 +82,7 @@ export function TMDataGridColumnsPanel() {
             />
           ))}
           {visibleInPanel.length === 0 && (
-            <Text size={controlSize} c="dimmed">
+            <Text span size={controlSize} c="dimmed">
               {labels.columnsNoMatch(search)}
             </Text>
           )}
@@ -102,7 +102,7 @@ export function TMDataGridColumnsPanel() {
         />
         {/* The whole layout, not only visibility: one reset with an honest
             scope, stated in the tooltip. `table.resetColumnVisibility()` would
-            also be wrong under persistence — it resets to `initialState`,
+            also be wrong under persistence - it resets to `initialState`,
             which the mount built *from* the persisted payload. */}
         <Tooltip label={labels.columnsResetHint} withArrow>
           <Button

package/src/tmdatagrid/components/TMDataGridDetailsColumn.tsx

@@ -31,7 +31,7 @@ function DetailsCell<TData extends RowData>({
   // cell, not by Tab, or the grid would have one tab stop per mounted row.
   const tabIndex = useCellControlTabIndex();
 
-  // Group rows open into their children, not into a panel — see the body's
+  // Group rows open into their children, not into a panel - see the body's
   // `showsDetails`. Their cells are aggregated, so this lane is already blank
   // on them; the guard is what makes that a decision rather than a side effect.
   if (row.getIsGrouped()) return null;
@@ -63,7 +63,7 @@ function DetailsCell<TData extends RowData>({
  * selects and clears every row.
  *
  * Deliberately not `table.toggleAllRowsExpanded()`: that writes the `expanded`
- * state's whole-table form, and one state holds both the tree and the panels —
+ * state's whole-table form, and one state holds both the tree and the panels -
  * so it would unfold every group as well. Only the data rows are touched here;
  * whatever the tree was showing, it goes on showing. See resolveExpandAll.
  */
@@ -94,7 +94,7 @@ function DetailsHeader<TData extends RowData>({
       }
       data-dg-part="details-toggle-all"
       // Partly expanded opens the rest rather than closing what is already
-      // open — the same reading as an indeterminate select-all box.
+      // open - the same reading as an indeterminate select-all box.
       onClick={() =>
         table.setExpanded(
           resolveExpandAll({
@@ -118,7 +118,7 @@ function DetailsHeader<TData extends RowData>({
  *
  * Structural, like the checkbox and tree columns: fixed width, pinned to the
  * left after both of them, not hideable, not movable and not resizable. A
- * toggle that wandered off to the right of the grid — or hid itself — would
+ * toggle that wandered off to the right of the grid (or hid itself) would
  * leave rows with panels no one can open.
  *
  * Last of the three because it acts on one record: the checkbox picks rows out
@@ -140,7 +140,7 @@ export function createDetailsColumn<TData extends RowData>(
       enableOrdering: false,
     },
     // A system lane: as wide as the control it holds and no wider. Fixed at
-    // every scale — the control does not grow with the font size, so neither
+    // every scale - the control does not grow with the font size, so neither
     // should its track.
     size: 36,
     minSize: 36,
@@ -157,7 +157,7 @@ export function createDetailsColumn<TData extends RowData>(
     header: ({ table }) => <DetailsHeader table={table} />,
     cell: ({ row }) => <DetailsCell row={row} />,
     // Deliberately no `aggregatedCell`: on a group row every cell outside the
-    // grouped column counts as aggregated, and blank is the right answer here —
+    // grouped column counts as aggregated, and blank is the right answer here -
     // groups expand into their rows, not into a panel.
   };
 }

package/src/tmdatagrid/components/TMDataGridEditActions.tsx

@@ -5,8 +5,8 @@ import { useTMDataGridContext } from "../TMDataGridContext";
 /**
  * Batch mode's toolbar chrome: Save with the dirty-row count, and Discard.
  * Both read the edit store, so they grey out while nothing is dirty and the
- * Save spins while a submit is in flight. Works under any `editMode` — a
- * cellConfirm grid accumulating drafts can offer the same pair — and renders
+ * Save spins while a submit is in flight. Works under any `editMode` - a
+ * cellConfirm grid accumulating drafts can offer the same pair - and renders
  * nothing while editing is off.
  *
  * ```tsx

package/src/tmdatagrid/components/TMDataGridEditColumn.tsx

@@ -21,7 +21,7 @@ export const EDIT_COLUMN_ID = "__edit__";
  * One row's slot in the edit lane. Three states, driven off the edit store:
  * a pencil while idle, Save/Cancel while the row's form is open, a loader
  * while its commit is in flight. A row error turns the Save red and puts the
- * message in its tooltip — the pathless `.refine()` has nowhere else to land.
+ * message in its tooltip - the pathless `.refine()` has nowhere else to land.
  */
 function EditLaneCell<TData extends RowData>({
   row,
@@ -79,7 +79,7 @@ function EditLaneCell<TData extends RowData>({
     );
   }
 
-  // A batch deletion mark is a draft like any other — restorable in place.
+  // A batch deletion mark is a draft like any other - restorable in place.
   if (isMarkedDeleted) {
     return (
       <ActionIcon
@@ -204,7 +204,7 @@ function EditLaneCell<TData extends RowData>({
 
 /**
  * The generated edit lane, appended and pinned right under
- * `editMode: "row"` — the row's Save at the end of the row, mirroring the
+ * `editMode: "row"` - the row's Save at the end of the row, mirroring the
  * checkbox lane's build on the left.
  */
 export function createEditColumn<TData extends RowData>(
@@ -229,7 +229,7 @@ export function createEditColumn<TData extends RowData>(
     enablePinning: false,
     header: () => null,
     cell: ({ row }) => <EditLaneCell row={row} />,
-    // Group rows: same reasoning as the checkbox lane — without this the
+    // Group rows: same reasoning as the checkbox lane - without this the
     // cell renders blank on aggregated rows, but here blank is also correct,
     // so the aggregated cell renders the same (null for groups).
     aggregatedCell: ({ row }) => <EditLaneCell row={row} />,

package/src/tmdatagrid/components/TMDataGridEntryRows.tsx

@@ -23,7 +23,7 @@ type ErasedColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
 
 /**
  * Whether an entry cell edits. `edit.canEditCell` asks the main table for
- * the row, and an entry row is precisely not there yet — so the structural
+ * the row, and an entry row is precisely not there yet - so the structural
  * half of the same rule is applied to the entry table's own row.
  */
 function isEntryCellEditable(
@@ -39,13 +39,13 @@ function isEntryCellEditable(
 }
 
 /**
- * The sticky entry block — one row of open editors per `edit.addRow()`,
+ * The sticky entry block - one row of open editors per `edit.addRow()`,
  * pinned under the header. The one place stickiness is genuinely required:
  * an existing row that scrolls away has a place to scroll back to, a row
  * being typed into does not exist anywhere else.
  *
- * A second, tiny table instance over the new rows' seed values — same
- * columns, its own `useTable`, no sorting or filtering ever exercised — so
+ * A second, tiny table instance over the new rows' seed values - same
+ * columns, its own `useTable`, no sorting or filtering ever exercised - so
  * these are real `Cell`s and the editor host, the typed editors and the
  * validators all apply unchanged. The forms live in the same engine map as
  * every other draft, keyed by their temporary ids.
@@ -67,7 +67,7 @@ export function TMDataGridEntryRows({
   const newRows = useSelector(edit.store, (state) => state.newRows);
 
   // The seed values, frozen at addRow: the live values belong to the forms,
-  // which the editors read directly — this table only provides row and cell
+  // which the editors read directly - this table only provides row and cell
   // identity.
   const data = useMemo(
     () =>
@@ -150,7 +150,7 @@ export function TMDataGridEntryRows({
                       onClose={() => {}}
                     />
                   ) : cell !== undefined && column.id === EDIT_COLUMN_ID ? (
-                    // The lane's cell — the entry row's ✓/✕ pair.
+                    // The lane's cell - the entry row's ✓/✕ pair.
                     flexRender(cell.column.columnDef.cell, cell.getContext())
                   ) : null}
                 </div>

package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx

@@ -38,7 +38,7 @@ function asFilterValue(value: unknown): TMDataGridFilterValue {
 
 /**
  * The three value shapes an operator can take. A typed value survives an
- * operator or column change only within its shape — a set is not a range,
+ * operator or column change only within its shape - a set is not a range,
  * even though both are arrays.
  */
 function valueShape(
@@ -53,7 +53,7 @@ function valueShape(
  * The MUI-style filter surface: one row per active column filter, each row a
  * column / operator / value triple. It only ever reads and writes the table's
  * `columnFilters` state, so a `manualFiltering` grid gets the same panel for
- * free — the state is forwarded to the server instead of a row model.
+ * free - the state is forwarded to the server instead of a row model.
  */
 export function TMDataGridFilterPanel() {
   const { table, ui, labels, controlSize } = useTMDataGridContext();
@@ -110,7 +110,7 @@ export function TMDataGridFilterPanel() {
       ? getColumnDefaultOperator(target)
       : getDefaultOperator("string");
     // The typed value only survives the move while it still fits the new
-    // operator — a text needle has no meaning to an `isAnyOf` set, or a set
+    // operator - a text needle has no meaning to an `isAnyOf` set, or a set
     // to a text input.
     const value =
       valueShape(operator) === valueShape(current.operator)
@@ -200,7 +200,7 @@ export function TMDataGridFilterPanel() {
       }}
     >
       <div className={classes.filterPanelHeader}>
-        <Text size={controlSize} fw={600}>
+        <Text span size={controlSize} fw={600}>
           {labels.filters}
         </Text>
         <ActionIcon
@@ -222,7 +222,7 @@ export function TMDataGridFilterPanel() {
           const type = column ? getColumnType(column) : "string";
           const needsValue = operatorNeedsValue(value.operator);
           const scalarValue = typeof value.value === "string" ? value.value : "";
-          // Pre-resolved only where options mean something out of the box —
+          // Pre-resolved only where options mean something out of the box -
           // a declared set, or a select-shaped column's faceted values. A
           // custom control wanting faceted values elsewhere resolves them
           // itself; resolving here would build the faceted index for every
@@ -293,7 +293,7 @@ export function TMDataGridFilterPanel() {
 
               {column ? (
                 // The value slot: `meta.filterControl` if the column declares
-                // one, the built-in shape-by-operator input otherwise — both
+                // one, the built-in shape-by-operator input otherwise - both
                 // through the same value-only contract.
                 <ValueControl
                   column={column}

package/src/tmdatagrid/components/TMDataGridFilterPills.module.css

@@ -7,7 +7,7 @@
   gap: var(--mantine-spacing-xs);
 }
 
-/* Mantine's dark-scheme pill is `dark-7` — the same colour as the body — so a
+/* Mantine's dark-scheme pill is `dark-7` - the same colour as the body - so a
    pill sitting on the page rather than inside a `PillsInput` disappears. Both
    schemes are restated here so the two stay a pair, with a border to keep the
    shape readable against any surface. Scoped through `.filterPills` for the
@@ -23,7 +23,7 @@
 }
 
 /* The label is a button so a pill can be clicked back open, but it must read as
-   part of the pill — Mantine's own label styles carry the font. */
+   part of the pill - Mantine's own label styles carry the font. */
 .pillLabel {
   font: inherit;
   color: inherit;

package/src/tmdatagrid/components/TMDataGridFilterPills.tsx

@@ -27,7 +27,7 @@ export type TMDataGridFilterPillsProps<TData extends RowData> = {
 };
 
 /**
- * One pill per active filter — `First name: Sofia ✕` — with the ✕ clearing that
+ * One pill per active filter (`First name: Sofia ✕`), with the ✕ clearing that
  * filter and a click on the label opening the filter panel on its column.
  *
  * The one grid component that takes the api as a prop instead of reading

package/src/tmdatagrid/components/TMDataGridFooter.module.css

@@ -11,7 +11,7 @@
 
 /* Grouping suspends paging. The pager stays put and fades rather than
    disappearing, so the footer reads as switched off rather than as having
-   vanished — and the row it holds does not change height under the grid. Its
+   vanished - and the row it holds does not change height under the grid. Its
    controls carry their own `disabled`; this is the label half. */
 .footer[data-paging-suspended="true"] {
   opacity: 0.55;

package/src/tmdatagrid/components/TMDataGridFooter.tsx

@@ -61,11 +61,11 @@ export type TMDataGridFooterProps = {
  * MUI-style pager: "Rows per page · from–to of total · ‹ ›".
  *
  * Renders nothing unless pagination is enabled (`enablePagination` or
- * `manualPagination`) — the footer is a pager; extra footer content belongs in
+ * `manualPagination`) - the footer is a pager; extra footer content belongs in
  * your own layout.
  *
  * Row totals come from `table.getRowCount()`, which prefers `options.rowCount`
- * — so a server-paged grid shows the server's total without changes here.
+ * - so a server-paged grid shows the server's total without changes here.
  */
 export function TMDataGridFooter({
   pageSizeOptions = [10, 25, 50, 100],
@@ -84,7 +84,7 @@ export function TMDataGridFooter({
     );
   }
 
-  // Grouping suspends paging — see isPagingActive. The pager is greyed out
+  // Grouping suspends paging - see isPagingActive. The pager is greyed out
   // rather than dropped, so that a footer going quiet reads as a state the grid
   // is in rather than as something that broke.
   const paging = isPagingActive(table, features);
@@ -114,7 +114,13 @@ export function TMDataGridFooter({
         data-paging-suspended={!paging}
       >
         <Group gap="xs" wrap="nowrap">
-          <Text size={controlSize} c="dimmed">
+          {/* `span`, here and in every other label the grid renders: Mantine's
+              Text is a `<p>` by default, and a grid dropped into prose - a
+              docs page, a CMS body, Mantine's own Typography - picks up that
+              context's `p` margins. A bottom margin on a flex item shifts its
+              border box up off centre, which is how the pager came to sit a
+              half-line below its own label. Chrome labels are not prose. */}
+          <Text span size={controlSize} c="dimmed">
             {labels.rowsPerPage}
           </Text>
           <Select
@@ -133,11 +139,11 @@ export function TMDataGridFooter({
           />
         </Group>
 
-        <Text size={controlSize} c="dimmed" data-dg-part="page-range">
+        <Text span size={controlSize} c="dimmed" data-dg-part="page-range">
           {paging
             ? labels.pageRange({ from, to, total })
             : // Not a range: nothing is being sliced, so a range would be a lie.
-              // Counted before grouping too — `getRowCount()` would be counting
+              // Counted before grouping too - `getRowCount()` would be counting
               // the tree, so a collapsed grid would claim to hold eight rows.
               labels.groupedAllRows(table.getFilteredRowModel().rows.length)}
         </Text>

package/src/tmdatagrid/components/TMDataGridGroupColumn.module.css

@@ -39,7 +39,7 @@
   font-weight: 600;
 }
 
-/* Never squeezed out by a long group value — the count is the part that tells
+/* Never squeezed out by a long group value - the count is the part that tells
    you whether the group is worth opening. */
 .groupCount {
   flex: 0 0 auto;

package/src/tmdatagrid/components/TMDataGridGroupColumn.tsx

@@ -17,7 +17,7 @@ export const GROUP_COLUMN_ID = "__group__";
 /** Indent added per level of nesting, in px. */
 const INDENT_STEP = 16;
 
-/** Shown for a group whose value is empty — `String(null)` would read as "null". */
+/** Shown for a group whose value is empty - `String(null)` would read as "null". */
 const BLANK_GROUP_LABEL = "(Blank)";
 
 /**
@@ -42,7 +42,7 @@ export function formatGroupValue(
  * The tree cell: chevron, group value and leaf count, indented by depth.
  *
  * Expansion is read through a subscription rather than from `row.getIsExpanded()`
- * in the component body for the same reason the select checkbox does it — the
+ * in the component body for the same reason the select checkbox does it - the
  * `row` identity survives an expand, so the React Compiler would cache the call
  * along with it and the chevron would never turn. See TMDataGridSelectColumn.
  */
@@ -119,14 +119,14 @@ function GroupHeader<TData extends RowData>({
 
 /**
  * The generated tree column, prepended whenever grouping is enabled and hidden
- * again while `grouping` is empty — see the visibility effect in
+ * again while `grouping` is empty - see the visibility effect in
  * `useTMDataGrid`.
  *
  * It exists because TanStack ships no auto group column: `groupedColumnMode:
  * "remove"` takes the grouped column out of the grid, so something has to hold
  * the tree. Modelled on the checkbox column, which is generated the same way.
  *
- * Not groupable itself, and nothing had to be written to make that true —
+ * Not groupable itself, and nothing had to be written to make that true -
  * `column.getCanGroup()` requires an `accessorFn`, which a display column has
  * no reason to have.
  */
@@ -152,7 +152,7 @@ export function createGroupColumn<TData extends RowData>(
     enablePinning: false,
     cell: ({ row }) => <GroupCell row={row} />,
     // A group row has subRows, so every cell on it that is not the grouped
-    // column reports `getIsAggregated()` — this lane included. Without an
+    // column reports `getIsAggregated()` - this lane included. Without an
     // `aggregatedCell` the body would take that as "nothing to summarise" and
     // render the tree lane blank on exactly the rows it exists for.
     aggregatedCell: ({ row }) => <GroupCell row={row} />,

package/src/tmdatagrid/components/TMDataGridHeaderCell.module.css

@@ -21,8 +21,8 @@
   justify-content: center;
 }
 
-/* Same as the body cells: a control lane's header — the select-all box, the
-   expand-all chevron — sits in a fixed 36px track, which the text padding would
+/* Same as the body cells: a control lane's header - the select-all box, the
+   expand-all chevron - sits in a fixed 36px track, which the text padding would
    squeeze it out of at the larger sizes. */
 .headerCell[data-control-column="true"] {
   padding: 0;
@@ -30,7 +30,7 @@
 
 /* A filtered column reads as active: its rows are a subset, and nothing else in
    the header says so once the filter panel is closed. A sorted one is not
-   tinted — the arrow, pinned visible for as long as the sort lasts, already
+   tinted - the arrow, pinned visible for as long as the sort lasts, already
    says which column sorts and which way. */
 .headerCellFiltered .headerTitle {
   color: var(--mantine-primary-color-filled);
@@ -71,7 +71,7 @@
   margin-right: auto;
 }
 
-/* Idle actions are removed from layout, not just faded — reserving their width
+/* Idle actions are removed from layout, not just faded - reserving their width
    would truncate header text that otherwise fits. Indicators that must stay
    visible (active sort, active filter, open menu) set data-pinned-visible. */
 .headerAction {
@@ -98,7 +98,7 @@
   opacity: 1;
 }
 
-/* Sort priority under multi-sort — "1", "2", … beside the arrow. Only rendered
+/* Sort priority under multi-sort - "1", "2", … beside the arrow. Only rendered
    while more than one column sorts, so a single sort stays as it always was. */
 .sortIndex {
   font-size: 10px;
@@ -109,8 +109,8 @@
   text-align: center;
 }
 
-/* Column reordering. The dragged header stays in place and dims — the browser
-   already carries a snapshot of it under the pointer — while the header being
+/* Column reordering. The dragged header stays in place and dims - the browser
+   already carries a snapshot of it under the pointer - while the header being
    dragged over draws a bar on the edge the column will land against. */
 .headerCellDragging {
   opacity: 0.4;
@@ -154,7 +154,7 @@
   touch-action: none;
 }
 
-/* The divider is a hover affordance, not permanent chrome — it only appears on
+/* The divider is a hover affordance, not permanent chrome - it only appears on
    the header cell you are pointing at, or on the column being resized. */
 .columnSeparator::after {
   content: "";

package/src/tmdatagrid/components/TMDataGridHeaderCell.tsx

@@ -67,7 +67,7 @@ export function TMDataGridHeaderCell({
   const [contextMenuOpened, setContextMenuOpened] = useState(false);
   const [dropSide, setDropSide] = useState<TMDataGridDropSide | null>(null);
   const cellRef = useRef<HTMLDivElement>(null);
-  // A resize drag ends with a click that bubbles to the header — without this
+  // A resize drag ends with a click that bubbles to the header - without this
   // every resize would also toggle the column's sort order.
   const suppressSortRef = useRef(false);
 
@@ -96,7 +96,7 @@ export function TMDataGridHeaderCell({
   const sortDirection = sorting.find((sort) => sort.id === column.id)?.desc;
   const isSorted = sortDirection !== undefined;
   // 1-based position in a multi-sort, shown only while more than one column
-  // sorts — under a single sort the arrow already says everything.
+  // sorts - under a single sort the arrow already says everything.
   const sortIndex =
     isSorted && sorting.length > 1
       ? sorting.findIndex((sort) => sort.id === column.id) + 1
@@ -184,7 +184,7 @@ export function TMDataGridHeaderCell({
 
   /**
    * Sizes the column to its widest mounted content. The container is found
-   * from the cell rather than passed down — the header always renders inside
+   * from the cell rather than passed down - the header always renders inside
    * the grid's scroll container, and that is the subtree autosize measures.
    */
   function autosize() {
@@ -197,7 +197,7 @@ export function TMDataGridHeaderCell({
   /**
    * Pinned columns are positioned with `getStart()` / `getAfter()`, which sum
    * `column.getSize()`. Fluid (`fr`) columns don't report their rendered width
-   * there, so freeze the measured width into `columnSizing` as we pin — that
+   * there, so freeze the measured width into `columnSizing` as we pin - that
    * keeps the column looking the same and keeps the offsets exact.
    */
   function setPinned(position: "left" | "right" | false) {
@@ -265,7 +265,7 @@ export function TMDataGridHeaderCell({
   }
   if (isGroupingActive) {
     // Under the default `groupedColumnMode: "remove"` a grouped column is taken
-    // out of the grid, so its own header — and the Ungroup item on it — is no
+    // out of the grid, so its own header (and the Ungroup item on it) is no
     // longer reachable. The tree column that replaced it carries them instead,
     // which is also where someone would look for them.
     if (column.id === GROUP_COLUMN_ID) {
@@ -284,7 +284,7 @@ export function TMDataGridHeaderCell({
       }
     }
     // Groups only, though `expanded` also holds which rows have their detail
-    // panel open — `toggleAllRowsExpanded` would open every one of them from an
+    // panel open - `toggleAllRowsExpanded` would open every one of them from an
     // item that says "groups". See resolveExpandAll.
     const expandAllGroups = (expand: boolean) =>
       table.setExpanded(
@@ -349,7 +349,7 @@ export function TMDataGridHeaderCell({
     menuItems.push(<Menu.Divider key="pin-divider" />);
   }
   if (canReorder) {
-    // The keyboard path to reordering, and the discoverable one — a header you
+    // The keyboard path to reordering, and the discoverable one - a header you
     // can drag looks no different from one you cannot.
     const previous = getStepTargetColumn({
       table,
@@ -421,12 +421,12 @@ export function TMDataGridHeaderCell({
       </Menu.Item>,
     );
   }
-  // A trailing divider reads as a dropped item — drop the divider instead.
+  // A trailing divider reads as a dropped item - drop the divider instead.
   while (menuItems.length > 0 && isDivider(menuItems.at(-1))) {
     menuItems.pop();
   }
 
-  // One gate for both ways into the menu — the button and the right-click —
+  // One gate for both ways into the menu - the button and the right-click -
   // so the two can never disagree about which headers have one. A control
   // lane's header is itself a control (select-all, expand-all), so it carries
   // no column menu, and a right-click there falls through to the browser's.
@@ -436,7 +436,7 @@ export function TMDataGridHeaderCell({
     classes.headerCell,
     canSort ? classes.headerCellSortable : "",
     // Only the filter tints the title. `data-active` below stays
-    // sorted-or-filtered — it is the queryable state, not the styling hook.
+    // sorted-or-filtered - it is the queryable state, not the styling hook.
     isFiltered ? classes.headerCellFiltered : "",
     isDragged ? classes.headerCellDragging : "",
     dropSide === "before" ? classes.headerCellDropBefore : "",
@@ -615,7 +615,7 @@ export function TMDataGridHeaderCell({
       )}
 
       {/* A system lane has no separator at all: it cannot be resized, and the
-          hover line reads as a handle that does nothing — the one place the
+          hover line reads as a handle that does nothing - the one place the
           separator stops being a divider and starts being a lie. */}
       {!isControlColumn(column.id) && (
         <div
@@ -659,7 +659,7 @@ export function TMDataGridHeaderCell({
   // A second Menu for the same items, rather than one Menu serving both ways
   // in: the button's dropdown hangs off the button, while a context menu
   // belongs at the pointer, and a Mantine Menu has one target. `menuItems` is
-  // built once and rendered by whichever dropdown is open — never both — so
+  // built once and rendered by whichever dropdown is open (never both), so
   // the two can't drift apart.
   //
   // The per-header Popover this adds is not the cost the body pays for one per

package/src/tmdatagrid/components/TMDataGridRowNumberColumn.tsx

@@ -4,14 +4,14 @@ import type { TMDataGridFeatures } from "../useTMDataGrid";
 export const ROW_NUMBER_COLUMN_ID = "__rowNumber__";
 
 /**
- * The generated row-number gutter, prepended under `enableRowNumbers` —
+ * The generated row-number gutter, prepended under `enableRowNumbers` -
  * outermost left, before even the checkbox lane, the way a spreadsheet keeps
  * its gutter outside everything.
  *
  * The def renders nothing itself: a cell cannot know its display position,
- * so the body computes the numbers — one pass over the view, group rows
+ * so the body computes the numbers - one pass over the view, group rows
  * skipped (they are headings over the rows being counted), continuing across
- * pages — and substitutes them in. See `TMDataGridTable`.
+ * pages - and substitutes them in. See `TMDataGridTable`.
  *
  * A system lane: fixed width, no menu, no resize, never exported, and its
  * visibility follows the option rather than the columns panel.
@@ -37,7 +37,7 @@ export function createRowNumberColumn<TData extends RowData>(
     enablePinning: false,
     enableHiding: false,
     header: () => "#",
-    // The body substitutes the number; a row without one — a group row —
+    // The body substitutes the number; a row without one - a group row -
     // falls through to this.
     cell: () => null,
   };