fix(DataTable): type issues (#17199)

carbon-design-system · Aug 21, 2024 · 7ea912b · 7ea912b
1 parent afb0358
commit 7ea912b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 30 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2069,7 +2069,6 @@ Map {
           "type": "string",
         },
         "isExpanded": Object {
-          "isRequired": true,
           "type": "bool",
         },
         "isSelected": Object {
@@ -2167,7 +2166,6 @@ Map {
         },
         "ariaLabel": [Function],
         "checked": Object {
-          "isRequired": true,
           "type": "bool",
         },
         "className": Object {
@@ -2200,7 +2198,6 @@ Map {
         },
         "ariaLabel": [Function],
         "checked": Object {
-          "isRequired": true,
           "type": "bool",
         },
         "className": Object {
@@ -8115,7 +8112,6 @@ Map {
         "type": "string",
       },
       "isExpanded": Object {
-        "isRequired": true,
         "type": "bool",
       },
       "isSelected": Object {
@@ -8213,7 +8209,6 @@ Map {
       },
       "ariaLabel": [Function],
       "checked": Object {
-        "isRequired": true,
         "type": "bool",
       },
       "className": Object {
@@ -8246,7 +8241,6 @@ Map {
       },
       "ariaLabel": [Function],
       "checked": Object {
-        "isRequired": true,
         "type": "bool",
       },
       "className": Object {

diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx
@@ -110,31 +110,34 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     header: DataTableHeader;
     isSortable?: boolean;
     onClick?: (
-      e: React.MouseEvent,
+      e: React.MouseEvent<HTMLButtonElement>,
       sortState: { sortHeaderKey: string; sortDirection: DataTableSortState }
     ) => void;
     [key: string]: unknown;
   }) => {
     isSortable: boolean | undefined;
     isSortHeader: boolean;
     key: string;
-    onClick: (e: MouseEvent) => void;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
     sortDirection: DataTableSortState;
     [key: string]: unknown;
   };
   getExpandHeaderProps: (getExpandHeaderPropsArgs?: {
-    onClick?: (e: MouseEvent, expandState: { isExpanded?: boolean }) => void;
-    onExpand?: (e: MouseEvent) => void;
+    onClick?: (
+      e: React.MouseEvent<HTMLButtonElement>,
+      expandState: { isExpanded?: boolean }
+    ) => void;
+    onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     [key: string]: unknown;
   }) => {
     ariaLabel: string; // TODO Remove in v12
     ['aria-label']: string;
     isExpanded: boolean;
-    onExpand: (e: MouseEvent) => void;
+    onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
     [key: string]: unknown;
   };
   getRowProps: (getRowPropsArgs: {
-    onClick?: (e: MouseEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     row: DataTableRow<ColTypes>;
     [key: string]: unknown;
   }) => {
@@ -144,7 +147,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     isExpanded?: boolean;
     isSelected?: boolean;
     key: string;
-    onExpand: (e: MouseEvent) => void;
+    onExpand: (e: React.MouseEvent<HTMLButtonElement>) => void;
     [key: string]: unknown;
   };
   getExpandedRowProps: (getExpandedRowPropsArgs: {
@@ -154,20 +157,20 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     ['id']: string;
     [key: string]: unknown;
   };
-  getSelectionProps: (getSelectionPropsArgs: {
-    onClick?: (e: MouseEvent) => void;
+  getSelectionProps: (getSelectionPropsArgs?: {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     row: DataTableRow<ColTypes>;
     [key: string]: unknown;
   }) => {
     ariaLabel: string;
     'aria-label': string;
-    checked: boolean | undefined;
+    checked?: boolean;
     disabled?: boolean | undefined;
     id: string;
     indeterminate?: boolean;
     name: string;
-    onSelect: (e: MouseEvent) => void;
-    radio?: boolean | null;
+    onSelect: (e: React.MouseEvent<HTMLInputElement>) => void;
+    radio?: boolean;
     [key: string]: unknown;
   };
   getToolbarProps: (getToolbarPropsArgs?: { [key: string]: unknown }) => {
@@ -455,7 +458,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
   }: {
     header: DataTableHeader;
     onClick?: (
-      e: React.MouseEvent,
+      e: React.MouseEvent<HTMLButtonElement>,
       sortState: { sortHeaderKey: string; sortDirection: DataTableSortState }
     ) => void;
     isSortable?: boolean;
@@ -494,8 +497,11 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
    */
   getExpandHeaderProps = (
     { onClick, onExpand, ...rest } = {} as {
-      onClick?: (e: MouseEvent, expandState: { isExpanded: boolean }) => void;
-      onExpand?: (e: MouseEvent) => void;
+      onClick?: (
+        e: React.MouseEvent<HTMLButtonElement>,
+        expandState: { isExpanded: boolean }
+      ) => void;
+      onExpand?: (e: React.MouseEvent<HTMLButtonElement>) => void;
       [key: string]: unknown;
     }
   ) => {
@@ -561,7 +567,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
     onClick,
     ...rest
   }: {
-    onClick?: (e: MouseEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     row: DataTableRow<ColTypes>;
     [key: string]: unknown;
   }) => {
@@ -616,7 +622,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
    */
   getSelectionProps = (
     { onClick, row, ...rest } = {} as {
-      onClick?: (e: MouseEvent) => void;
+      onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
       row: DataTableRow<ColTypes>;
       [key: string]: unknown;
     }
@@ -640,7 +646,7 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
         ariaLabel: t(translationKey), // TODO remove in v12
         'aria-label': t(translationKey),
         disabled: row.disabled,
-        radio: this.props.radio || null,
+        radio: this.props.radio,
       };
     }
 

diff --git a/packages/react/src/components/DataTable/TableExpandRow.tsx b/packages/react/src/components/DataTable/TableExpandRow.tsx
@@ -46,7 +46,7 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
-  isExpanded: boolean;
+  isExpanded?: boolean;
 
   /**
    * Hook for when a listener initiates a request to expand the given row
@@ -168,7 +168,7 @@ TableExpandRow.propTypes = {
    * Specify whether this row is expanded or not. This helps coordinate data
    * attributes so that `TableExpandRow` and `TableExpandedRow` work together
    */
-  isExpanded: PropTypes.bool.isRequired,
+  isExpanded: PropTypes.bool,
 
   /**
    * Specify if the row is selected

diff --git a/packages/react/src/components/DataTable/TableSelectAll.tsx b/packages/react/src/components/DataTable/TableSelectAll.tsx
@@ -28,7 +28,7 @@ interface TableSelectAllProps {
   /**
    * Specify whether all items are selected, or not
    */
-  checked: boolean;
+  checked?: boolean;
 
   /**
    * The CSS class names of the cell that wraps the underlying input control
@@ -107,7 +107,7 @@ TableSelectAll.propTypes = {
   /**
    * Specify whether all items are selected, or not
    */
-  checked: PropTypes.bool.isRequired,
+  checked: PropTypes.bool,
 
   /**
    * The CSS class names of the cell that wraps the underlying input control

diff --git a/packages/react/src/components/DataTable/TableSelectRow.tsx b/packages/react/src/components/DataTable/TableSelectRow.tsx
@@ -31,7 +31,7 @@ export interface TableSelectRowProps {
   /**
    * Specify whether this row is selected, or not
    */
-  checked: boolean;
+  checked?: boolean;
 
   /**
    * The CSS class names of the cell that wraps the underlying input control
@@ -129,7 +129,7 @@ TableSelectRow.propTypes = {
   /**
    * Specify whether this row is selected, or not
    */
-  checked: PropTypes.bool.isRequired,
+  checked: PropTypes.bool,
 
   /**
    * The CSS class names of the cell that wraps the underlying input control