Merge pull request #2449 from hashicorp/alex-ju/fix-table-signatures

Fix `Table` signatures

.changeset/thin-ghosts-share.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Table` - fixed signatures for subcomponents

packages/components/src/components/hds/table/index.ts

@@ -18,18 +18,18 @@ import type {
   HdsTableColumn,
   HdsTableDensities,
   HdsTableHorizontalAlignment,
-  HdsTableOnSelectionChangeArgs,
+  HdsTableOnSelectionChangeSignature,
   HdsTableSelectableRow,
   HdsTableSortingFunction,
   HdsTableThSortOrder,
   HdsTableVerticalAlignment,
   HdsTableModel,
 } from './types';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
-import type { HdsTableTdArgs } from './td.ts';
-import type { HdsTableThArgs } from './th.ts';
-import type { HdsTableThSortArgs } from './th-sort.ts';
-import type { HdsTableTrArgs } from './tr.ts';
+import type { HdsTableTdSignature } from './td.ts';
+import type { HdsTableThSignature } from './th.ts';
+import type { HdsTableThSortSignature } from './th-sort.ts';
+import type { HdsTableTrSignature } from './tr.ts';
 
 export const DENSITIES: HdsTableDensities[] = Object.values(
   HdsTableDensityValues
@@ -41,7 +41,7 @@ export const VALIGNMENTS: HdsTableVerticalAlignment[] = Object.values(
 );
 export const DEFAULT_VALIGN = HdsTableVerticalAlignmentValues.Top;
 
-export interface HdsTableArgs {
+export interface HdsTableSignature {
   Args: {
     align?: HdsTableHorizontalAlignment;
     caption?: string;
@@ -52,7 +52,7 @@ export interface HdsTableArgs {
     isSelectable?: boolean;
     isStriped?: boolean;
     model?: HdsTableModel;
-    onSelectionChange?: (selection: HdsTableOnSelectionChangeArgs) => void;
+    onSelectionChange?: (selection: HdsTableOnSelectionChangeSignature) => void;
     onSort?: (sortBy: string, sortOrder: HdsTableThSortOrder) => void;
     selectionAriaLabelSuffix?: string;
     sortBy?: string;
@@ -64,19 +64,19 @@ export interface HdsTableArgs {
   Blocks: {
     head?: [
       {
-        Tr?: ComponentLike<HdsTableTrArgs>;
-        Th?: ComponentLike<HdsTableThArgs>;
-        ThSort?: ComponentLike<HdsTableThSortArgs>;
+        Tr?: ComponentLike<HdsTableTrSignature>;
+        Th?: ComponentLike<HdsTableThSignature>;
+        ThSort?: ComponentLike<HdsTableThSortSignature>;
         sortBy?: string;
         sortOrder?: HdsTableThSortOrder;
         setSortBy?: (column: string) => void;
       },
     ];
     body?: [
       {
-        Td?: ComponentLike<HdsTableTdArgs>;
-        Tr?: ComponentLike<HdsTableTrArgs>;
-        Th?: ComponentLike<HdsTableThArgs>;
+        Td?: ComponentLike<HdsTableTdSignature>;
+        Tr?: ComponentLike<HdsTableTrSignature>;
+        Th?: ComponentLike<HdsTableThSignature>;
         data?: Record<string, unknown>;
         sortBy?: string;
         sortOrder?: HdsTableThSortOrder;
@@ -86,7 +86,7 @@ export interface HdsTableArgs {
   Element: HTMLTableElement;
 }
 
-export default class HdsTable extends Component<HdsTableArgs> {
+export default class HdsTable extends Component<HdsTableSignature> {
   @tracked sortBy = this.args.sortBy;
   @tracked sortOrder = this.args.sortOrder || HdsTableThSortOrderValues.Asc;
   @tracked selectAllCheckbox?: HdsFormCheckboxBaseSignature['Element'] =

packages/components/src/components/hds/table/td.ts

@@ -14,7 +14,7 @@ export const ALIGNMENTS: string[] = Object.values(
 );
 export const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 
-export interface HdsTableTdArgs {
+export interface HdsTableTdSignature {
   Args: {
     align?: HdsTableHorizontalAlignment;
   };
@@ -23,7 +23,7 @@ export interface HdsTableTdArgs {
   };
   Element: HTMLTableCellElement;
 }
-export default class HdsTableTd extends Component<HdsTableTdArgs> {
+export default class HdsTableTd extends Component<HdsTableTdSignature> {
   /**
    * @param align
    * @type {string}

packages/components/src/components/hds/table/th-button-sort.ts

@@ -15,7 +15,7 @@ import type {
   HdsTableThSortOrderIcons,
   HdsTableThSortOrderLabels,
 } from './types.ts';
-export interface HdsTableThButtonSortArgs {
+export interface HdsTableThButtonSortSignature {
   Args: {
     labelId?: string;
     onClick?: () => void;
@@ -26,7 +26,7 @@ export interface HdsTableThButtonSortArgs {
 
 const NOOP = () => {};
 
-export default class HdsTableThButtonSort extends Component<HdsTableThButtonSortArgs> {
+export default class HdsTableThButtonSort extends Component<HdsTableThButtonSortSignature> {
   // Generates a unique ID for the (hidden) "label prefix/suffix" <span> elements
   prefixLabelId = 'prefix-' + guidFor(this);
   suffixLabelId = 'suffix-' + guidFor(this);

packages/components/src/components/hds/table/th-button-tooltip.ts

@@ -7,15 +7,15 @@ import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
 
-export interface HdsTableThButtonTooltipArgs {
+export interface HdsTableThButtonTooltipSignature {
   Args: {
     labelId?: string;
     tooltip: string;
   };
   Element: HTMLButtonElement;
 }
 
-export default class HdsTableThButtonTooltip extends Component<HdsTableThButtonTooltipArgs> {
+export default class HdsTableThButtonTooltip extends Component<HdsTableThButtonTooltipSignature> {
   // Generates a unique ID for the (hidden) "label prefix" <span> element
   prefixLabelId = guidFor(this);
 

packages/components/src/components/hds/table/th-selectable.ts

@@ -17,30 +17,30 @@ import type {
   HdsTableThSortOrder,
   HdsTableThSortOrderLabels,
 } from './types';
-import type { HdsTableThArgs } from './th';
+import type { HdsTableThSignature } from './th';
 
-export interface HdsTableThSelectableArgs {
+export interface HdsTableThSelectableSignature {
   Args: {
-    didInsert: (
+    didInsert?: (
       checkbox: HdsFormCheckboxBaseSignature['Element'],
       selectionKey?: string
     ) => void;
     isSelected?: boolean;
     onClickSortBySelected?: () => void;
-    onSelectionChange: (
+    onSelectionChange?: (
       target: HdsFormCheckboxBaseSignature['Element'],
       selectionKey: string | undefined
     ) => void;
     selectionAriaLabelSuffix?: string;
     selectionKey?: string;
-    selectionScope: HdsTableScope;
+    selectionScope?: HdsTableScope;
     sortBySelectedOrder?: HdsTableThSortOrder;
-    willDestroy: (selectionKey?: string) => void;
+    willDestroy?: (selectionKey?: string) => void;
   };
-  Element: HdsTableThArgs['Element'];
+  Element: HdsTableThSignature['Element'];
 }
 
-export default class HdsTableThSelectable extends Component<HdsTableThSelectableArgs> {
+export default class HdsTableThSelectable extends Component<HdsTableThSelectableSignature> {
   @tracked isSelected = this.args.isSelected;
 
   guid = guidFor(this);

packages/components/src/components/hds/table/th-sort.ts

@@ -17,17 +17,17 @@ import type {
   HdsTableThSortOrder,
   HdsTableThSortOrderLabels,
 } from './types.ts';
-import type { HdsTableThButtonSortArgs } from './th-button-sort';
+import type { HdsTableThButtonSortSignature } from './th-button-sort';
 
 export const ALIGNMENTS: string[] = Object.values(
   HdsTableHorizontalAlignmentValues
 );
 export const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 
-export interface HdsTableThSortArgs {
+export interface HdsTableThSortSignature {
   Args: {
     align?: HdsTableHorizontalAlignment;
-    onClickSort?: HdsTableThButtonSortArgs['Args']['onClick'];
+    onClickSort?: HdsTableThButtonSortSignature['Args']['onClick'];
     sortOrder?: HdsTableThSortOrder;
     tooltip?: string;
     width?: string;
@@ -38,7 +38,7 @@ export interface HdsTableThSortArgs {
   Element: HTMLDivElement;
 }
 
-export default class HdsTableThSort extends Component<HdsTableThSortArgs> {
+export default class HdsTableThSort extends Component<HdsTableThSortSignature> {
   /**
    * Generates a unique ID for the <span> element ("label")
    *

packages/components/src/components/hds/table/th.ts

@@ -15,7 +15,7 @@ export const ALIGNMENTS: string[] = Object.values(
 );
 export const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 
-export interface HdsTableThArgs {
+export interface HdsTableThSignature {
   Args: {
     align?: HdsTableHorizontalAlignment;
     isVisuallyHidden?: boolean;
@@ -29,7 +29,7 @@ export interface HdsTableThArgs {
   Element: HTMLTableCellElement;
 }
 
-export default class HdsTableTh extends Component<HdsTableThArgs> {
+export default class HdsTableTh extends Component<HdsTableThSignature> {
   /**
    * Generates a unique ID for the <span> element ("label")
    *

packages/components/src/components/hds/table/tr.ts

@@ -8,28 +8,28 @@ import { assert } from '@ember/debug';
 import { HdsTableScopeValues } from './types.ts';
 import type { HdsTableScope, HdsTableThSortOrder } from './types.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
-import type { HdsTableArgs } from './index.ts';
-import type { HdsTableThSelectableArgs } from './th-selectable.ts';
+import type { HdsTableSignature } from './index.ts';
+import type { HdsTableThSelectableSignature } from './th-selectable.ts';
 
-export interface BaseHdsTableTrArgs {
+export interface BaseHdsTableTrSignature {
   Args: {
-    selectableColumnKey?: HdsTableArgs['Args']['selectableColumnKey'];
+    selectableColumnKey?: HdsTableSignature['Args']['selectableColumnKey'];
     isSelectable?: boolean;
     isSelected?: false;
     selectionAriaLabelSuffix?: string;
     selectionKey?: string;
-    selectionScope: HdsTableScope;
+    selectionScope?: HdsTableScope;
     sortBySelectedOrder?: HdsTableThSortOrder;
-    didInsert: (
+    didInsert?: (
       checkbox: HdsFormCheckboxBaseSignature['Element'],
       selectionKey?: string
     ) => void;
-    onSelectionChange: (
+    onSelectionChange?: (
       checkbox?: HdsFormCheckboxBaseSignature['Element'],
       selectionKey?: string
     ) => void;
-    willDestroy: () => void;
-    onClickSortBySelected?: HdsTableThSelectableArgs['Args']['onClickSortBySelected'];
+    willDestroy?: () => void;
+    onClickSortBySelected?: HdsTableThSelectableSignature['Args']['onClickSortBySelected'];
   };
   Blocks: {
     default: [];
@@ -38,17 +38,19 @@ export interface BaseHdsTableTrArgs {
 }
 
 // Extended interface for selectable rows
-export interface SelectableHdsTableTrArgs extends BaseHdsTableTrArgs {
-  Args: BaseHdsTableTrArgs['Args'] & {
+export interface SelectableHdsTableTrArgs extends BaseHdsTableTrSignature {
+  Args: BaseHdsTableTrSignature['Args'] & {
     isSelectable: true;
-    selectionScope: HdsTableScopeValues.Row;
+    selectionScope?: HdsTableScopeValues.Row;
     selectionKey: string; // Now required for selectable rows
   };
 }
 
 // Union type to combine both possible states
-export type HdsTableTrArgs = BaseHdsTableTrArgs | SelectableHdsTableTrArgs;
-export default class HdsTableTr extends Component<HdsTableTrArgs> {
+export type HdsTableTrSignature =
+  | BaseHdsTableTrSignature
+  | SelectableHdsTableTrArgs;
+export default class HdsTableTr extends Component<HdsTableTrSignature> {
   get selectionKey(): string | undefined {
     if (this.args.isSelectable && this.args.selectionScope === 'row') {
       assert(

packages/components/src/components/hds/table/types.ts

@@ -82,7 +82,7 @@ export type HdsTableColumn = SortableHdsTableColumn | NonSortableHdsTableColumn;
 
 export type HdsTableSortingFunction<T> = (a: T, b: T) => number;
 
-export interface HdsTableOnSelectionChangeArgs {
+export interface HdsTableOnSelectionChangeSignature {
   selectionKey?: string;
   selectionCheckboxElement?: HdsFormCheckboxBaseSignature['Element'];
   selectedRowsKeys: string[];