Fix #6939: Datatable fix row checkbox/radiobutton PT

components/lib/column/column.d.ts

@@ -10,9 +10,11 @@
  */
 import * as React from 'react';
 import { FilterMatchMode } from '../api/api';
+import { CheckboxPassThroughOptions } from '../checkbox/checkbox';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { DataTablePassThroughOptions } from '../datatable/datatable';
 import { PassThroughOptions } from '../passthrough';
+import { RadioButtonPassThroughOptions } from '../radiobutton/radiobutton';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { IconType, PassThroughType } from '../utils/utils';
 
@@ -161,9 +163,9 @@ export interface ColumnPassThroughOptions {
      */
     sortBadge?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
-     * Uses to pass attributes to the header checkbox's DOM element.
+     * Uses to pass attributes to the header checkbox's component.
      */
-    headerCheckbox?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    headerCheckbox?: CheckboxPassThroughOptions;
     /**
      * Uses to pass attributes to the column filter's DOM element.
      */
@@ -313,21 +315,13 @@ export interface ColumnPassThroughOptions {
      */
     rowReorderIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
     /**
-     * Uses to pass attributes to the row radiobutton wrapper's DOM element.
+     * Uses to pass attributes to the row radiobutton component.
      */
-    radioButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    rowRadioButton?: RadioButtonPassThroughOptions;
     /**
-     * Uses to pass attributes to the row radiobutton input's DOM element.
+     * Uses to pass attributes to the row checkbox component.
      */
-    radioButtonInput?: ColumnPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
-    /**
-     * Uses to pass attributes to the row radiobutton box's DOM element.
-     */
-    radioButtonBox?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
-    /**
-     * Uses to pass attributes to the row radiobutton icon's DOM element.
-     */
-    radioButtonIcon?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    rowCheckbox?: CheckboxPassThroughOptions;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}

components/lib/datatable/RowCheckbox.js

@@ -42,19 +42,17 @@ export const RowCheckbox = React.memo((props) => {
     const checkIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { props });
     const tabIndex = props.disabled ? null : '0';
 
-    const checkboxProps = mergeProps(
-        {
-            role: 'checkbox',
-            'aria-checked': props.checked,
-            tabIndex: tabIndex,
-            onChange: onChange,
-            'aria-label': props.ariaLabel,
-            checked: props.checked,
-            icon: checkIcon,
-            disabled: props.disabled
-        },
-        getColumnPTOptions('rowCheckbox')
-    );
+    const checkboxProps = mergeProps({
+        role: 'checkbox',
+        'aria-checked': props.checked,
+        tabIndex: tabIndex,
+        onChange: onChange,
+        'aria-label': props.ariaLabel,
+        checked: props.checked,
+        icon: checkIcon,
+        disabled: props.disabled,
+        pt: getColumnPTOptions('rowCheckbox')
+    });
 
     return <Checkbox {...checkboxProps} />;
 });

components/lib/datatable/RowRadioButton.js

@@ -30,21 +30,16 @@ export const RowRadioButton = React.memo((props) => {
         }
     };
 
-    const radioButtonProps = mergeProps(
-        {
-            role: 'radio',
-            'aria-checked': props.checked,
-            checked: props.checked,
-            disabled: props.disabled,
-            name: `${props.tableSelector}_dt_radio`,
-            onChange: onChange,
-            input: getColumnPTOptions('radiobuttoninput'),
-            box: getColumnPTOptions('radiobuttonbox'),
-            icon: getColumnPTOptions('radiobuttonicon'),
-            unstyled: props.unstyled
-        },
-        getColumnPTOptions('radiobutton')
-    );
+    const radioButtonProps = mergeProps({
+        role: 'radio',
+        'aria-checked': props.checked,
+        checked: props.checked,
+        disabled: props.disabled,
+        name: `${props.tableSelector}_dt_radio`,
+        onChange: onChange,
+        unstyled: props.unstyled,
+        pt: getColumnPTOptions('rowRadioButton')
+    });
 
     return <RadioButton {...radioButtonProps} />;
 });