Tweaks to DataTable generics (#1968)

Adjust DataTable types. - Make key in `cell` slot prop less strict to prevent type errors in markup. - Resolve property path names up to one level deep for header keys.
carbon-design-system · Aug 23, 2024 · 1efba6d · 1efba6d
1 parent 7c524ec
commit 1efba6d
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 21 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -926,7 +926,8 @@ None.
 ### Types
 
 ```ts
-export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
+export type DataTableKey<Row = DataTableRow> =
+  import("./DataTableTypes.d.ts").PropertyPath<Row>;
 
 export type DataTableValue = any;
 
@@ -962,7 +963,7 @@ export interface DataTableRow {
 export type DataTableRowId = any;
 
 export interface DataTableCell<Row = DataTableRow> {
-  key: DataTableKey<Row>;
+  key: DataTableKey<Row> | (string & {});
   value: DataTableValue;
   display?: (item: Value, row: DataTableRow) => DataTableValue;
 }

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -2712,24 +2712,24 @@
       ],
       "typedefs": [
         {
-          "type": "Exclude<keyof Row, \"id\">",
+          "type": "import('./DataTableTypes.d.ts').PropertyPath<Row>",
           "name": "DataTableKey<Row=DataTableRow>",
-          "ts": "type DataTableKey<Row=DataTableRow> = Exclude<keyof Row, \"id\">"
+          "ts": "type DataTableKey<Row=DataTableRow> = import('./DataTableTypes.d.ts').PropertyPath<Row>"
         },
         {
           "type": "any",
           "name": "DataTableValue",
           "ts": "type DataTableValue = any"
         },
         {
-          "type": "{ key: DataTableKey<Row>; empty: boolean; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "type": "{\n   key: DataTableKey<Row>;\n   empty: boolean;\n   display?: (item: Value, row: Row) => DataTableValue;\n   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n   columnMenu?: boolean;\n   width?: string;\n   minWidth?: string;\n}",
           "name": "DataTableEmptyHeader<Row=DataTableRow>",
-          "ts": "interface DataTableEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; empty: boolean; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "ts": "interface DataTableEmptyHeader<Row=DataTableRow> {\n   key: DataTableKey<Row>;\n   empty: boolean;\n   display?: (item: Value, row: Row) => DataTableValue;\n   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n   columnMenu?: boolean;\n   width?: string;\n   minWidth?: string;\n}"
         },
         {
-          "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
+          "type": "{\n   key: DataTableKey<Row>;\n   value: DataTableValue;\n   display?: (item: Value, row: Row) => DataTableValue;\n   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n   columnMenu?: boolean;\n   width?: string;\n   minWidth?: string;\n}",
           "name": "DataTableNonEmptyHeader<Row=DataTableRow>",
-          "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
+          "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> {\n   key: DataTableKey<Row>;\n   value: DataTableValue;\n   display?: (item: Value, row: Row) => DataTableValue;\n   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n   columnMenu?: boolean;\n   width?: string;\n   minWidth?: string;\n}"
         },
         {
           "type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
@@ -2747,9 +2747,9 @@
           "ts": "type DataTableRowId = any"
         },
         {
-          "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }",
+          "type": "{\n   key: DataTableKey<Row> | (string & {});\n   value: DataTableValue;\n   display?: (item: Value, row: DataTableRow) => DataTableValue;\n}",
           "name": "DataTableCell<Row=DataTableRow>",
-          "ts": "interface DataTableCell<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }"
+          "ts": "interface DataTableCell<Row=DataTableRow> {\n   key: DataTableKey<Row> | (string & {});\n   value: DataTableValue;\n   display?: (item: Value, row: DataTableRow) => DataTableValue;\n}"
         }
       ],
       "generics": ["Row", "Row extends DataTableRow = DataTableRow"],

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
@@ -2,14 +2,34 @@
   /**
    * @generics {Row extends DataTableRow = DataTableRow} Row
    * @template {DataTableRow} Row
-   * @typedef {Exclude<keyof Row, "id">} DataTableKey<Row=DataTableRow>
+   * @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
    * @typedef {any} DataTableValue
-   * @typedef {{ key: DataTableKey<Row>; empty: boolean; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader<Row=DataTableRow>
-   * @typedef {{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader<Row=DataTableRow>
+   * @typedef {{
+   *    key: DataTableKey<Row>;
+   *    empty: boolean;
+   *    display?: (item: Value, row: Row) => DataTableValue;
+   *    sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
+   *    columnMenu?: boolean;
+   *    width?: string;
+   *    minWidth?: string;
+   * }} DataTableEmptyHeader<Row=DataTableRow>
+   * @typedef {{
+   *    key: DataTableKey<Row>;
+   *    value: DataTableValue;
+   *    display?: (item: Value, row: Row) => DataTableValue;
+   *    sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
+   *    columnMenu?: boolean;
+   *    width?: string;
+   *    minWidth?: string;
+   * }} DataTableNonEmptyHeader<Row=DataTableRow>
    * @typedef {DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>} DataTableHeader<Row=DataTableRow>
    * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
    * @typedef {any} DataTableRowId
-   * @typedef {{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue; }} DataTableCell<Row=DataTableRow>
+   * @typedef {{
+   *    key: DataTableKey<Row> | (string & {});
+   *    value: DataTableValue;
+   *    display?: (item: Value, row: DataTableRow) => DataTableValue;
+   * }} DataTableCell<Row=DataTableRow>
    * @slot {{ row: Row; }} expanded-row
    * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
    * @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell

diff --git a/src/DataTable/DataTableTypes.d.ts b/src/DataTable/DataTableTypes.d.ts
@@ -0,0 +1,17 @@
+type PathDepth = [never, 0, 1, 2, ...0[]];
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
+  : never;
+
+export type PropertyPath<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+  ? {
+      [K in keyof T]-?: K extends string | number
+        ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
+        : never;
+    }[keyof T]
+  : "";
diff --git a/tests/DataTableAppendColumns.test.svelte b/tests/DataTableAppendColumns.test.svelte
@@ -54,11 +54,7 @@
   ];
 </script>
 
-<DataTable
-  sortable
-  headers="{headers}"
-  rows="{rows}"
->
+<DataTable sortable headers="{headers}" rows="{rows}">
   <span slot="cell" let:cell>
     {#if cell.key === "overflow"}
       <OverflowMenu flipped>

diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
@@ -1,7 +1,8 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
+export type DataTableKey<Row = DataTableRow> =
+  import("./DataTableTypes.d.ts").PropertyPath<Row>;
 
 export type DataTableValue = any;
 
@@ -37,7 +38,7 @@ export interface DataTableRow {
 export type DataTableRowId = any;
 
 export interface DataTableCell<Row = DataTableRow> {
-  key: DataTableKey<Row>;
+  key: DataTableKey<Row> | (string & {});
   value: DataTableValue;
   display?: (item: Value, row: DataTableRow) => DataTableValue;
 }

diff --git a/types/DataTable/DataTableTypes.d.ts b/types/DataTable/DataTableTypes.d.ts
@@ -0,0 +1,17 @@
+type PathDepth = [never, 0, 1, 2, ...0[]];
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
+  : never;
+
+export type PropertyPath<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+  ? {
+      [K in keyof T]-?: K extends string | number
+        ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
+        : never;
+    }[keyof T]
+  : "";