Improve TColumnConfig typing on columns that extend TableColumnTextBase

change/@ni-nimble-components-c9468196-58c9-4afc-b6b4-d40fe360015e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Improve TColumnConfig typing on columns that extend TableColumnTextBase",
+  "packageName": "@ni/nimble-components",
+  "email": "20542556+mollykreis@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/date-text/index.ts

@@ -6,7 +6,7 @@ import { attr } from '@microsoft/fast-element';
 import { styles } from '../base/styles';
 import { template } from '../base/template';
 import type { TableNumberField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
+import { mixinTextBase } from '../text-base';
 import { TableColumnSortOperation, TableColumnValidity } from '../base/types';
 import { tableColumnDateTextGroupHeaderViewTag } from './group-header-view';
 import { tableColumnDateTextCellViewTag } from './cell-view';
@@ -49,7 +49,7 @@ declare global {
 /**
  * The table column for displaying dates/times as text.
  */
-export class TableColumnDateText extends TableColumnTextBase {
+export class TableColumnDateText extends mixinTextBase<TableColumnDateTextColumnConfig>() {
     /** @internal */
     public validator = new TableColumnDateTextValidator(this.columnInternals);
 

packages/nimble-components/src/table-column/duration-text/index.ts

@@ -5,14 +5,14 @@ import {
 import { styles } from '../base/styles';
 import { template } from '../base/template';
 import type { TableNumberField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
 import { TableColumnSortOperation } from '../base/types';
 import { tableColumnDurationTextCellViewTag } from './cell-view';
 import type { ColumnInternalsOptions } from '../base/models/column-internals';
 import { lang } from '../../theme-provider';
 import { DurationFormatter } from './models/duration-formatter';
 import { tableColumnDurationTextGroupHeaderViewTag } from './group-header-view';
 import type { TableColumnTextBaseColumnConfig } from '../text-base/cell-view';
+import { mixinTextBase } from '../text-base';
 
 export type TableColumnDurationTextCellRecord = TableNumberField<'value'>;
 export interface TableColumnDurationTextColumnConfig
@@ -29,7 +29,7 @@ declare global {
 /**
  * The table column for displaying a duration value as text.
  */
-export class TableColumnDurationText extends TableColumnTextBase {
+export class TableColumnDurationText extends mixinTextBase<TableColumnDurationTextColumnConfig>() {
     private readonly langSubscriber: DesignTokenSubscriber<typeof lang> = {
         handleChange: () => {
             this.updateColumnConfig();

packages/nimble-components/src/table-column/number-text/index.ts

@@ -13,7 +13,7 @@ import {
 import { styles } from '../base/styles';
 import { template } from './template';
 import type { TableNumberField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
+import { mixinTextBase } from '../text-base';
 import { TableColumnSortOperation, TableColumnValidity } from '../base/types';
 import { tableColumnNumberTextGroupHeaderTag } from './group-header-view';
 import { tableColumnNumberTextCellViewTag } from './cell-view';
@@ -44,7 +44,7 @@ declare global {
 /**
  * The table column for displaying numbers as text.
  */
-export class TableColumnNumberText extends TableColumnTextBase {
+export class TableColumnNumberText extends mixinTextBase<TableColumnNumberTextColumnConfig>() {
     /** @internal */
     public validator = new TableColumnNumberTextValidator(this.columnInternals);
 

packages/nimble-components/src/table-column/text-base/index.ts

@@ -1,15 +1,15 @@
 import { attr } from '@microsoft/fast-element';
-import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { TableColumn } from '../base';
+import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
 import { mixinColumnWithPlaceholderAPI } from '../mixins/placeholder';
 
 /**
  * The base class for table columns that display fields of any type as text.
  */
-export abstract class TableColumnTextBase extends mixinGroupableColumnAPI(
-    mixinFractionalWidthColumnAPI(mixinColumnWithPlaceholderAPI(TableColumn))
-) {
+export abstract class TableColumnTextBase<
+    TColumnConfig
+> extends TableColumn<TColumnConfig> {
     @attr({ attribute: 'field-name' })
     public fieldName?: string;
 
@@ -18,3 +18,12 @@ export abstract class TableColumnTextBase extends mixinGroupableColumnAPI(
         this.columnInternals.operandDataRecordFieldName = this.fieldName;
     }
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinTextBase<TColumnConfig>() {
+    return mixinGroupableColumnAPI(
+        mixinFractionalWidthColumnAPI(
+            mixinColumnWithPlaceholderAPI(TableColumnTextBase<TColumnConfig>)
+        )
+    );
+}

packages/nimble-components/src/table-column/text/index.ts

@@ -2,7 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { styles } from '../base/styles';
 import { template } from '../base/template';
 import type { TableStringField } from '../../table/types';
-import { TableColumnTextBase } from '../text-base';
+import { mixinTextBase } from '../text-base';
 import { TableColumnSortOperation } from '../base/types';
 import { tableColumnTextGroupHeaderViewTag } from './group-header-view';
 import { tableColumnTextCellViewTag } from './cell-view';
@@ -24,7 +24,7 @@ declare global {
 /**
  * The table column for displaying string fields as text.
  */
-export class TableColumnText extends TableColumnTextBase {
+export class TableColumnText extends mixinTextBase<TableColumnTextColumnConfig>() {
     public placeholderChanged(): void {
         this.columnInternals.columnConfig = {
             placeholder: this.placeholder