Merge pull request #6698 from ivanpajon/fix/datatable-radiobutton

Fix: Datatable radiobuttons and types

components/doc/common/apidoc/index.json

@@ -13155,7 +13155,7 @@
                             "name": "filterOperatorDropdown",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptions",
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
                             "description": "Uses to pass attributes to the Dropdown component."
                         },
                         {
@@ -13176,7 +13176,7 @@
                             "name": "filterMatchModeDropdown",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptions",
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
                             "description": "Uses to pass attributes to the Dropdown component."
                         },
                         {
@@ -13190,7 +13190,7 @@
                             "name": "filterRemoveButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptions",
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
                             "description": "Uses to pass attributes to the Button component."
                         },
                         {
@@ -13204,7 +13204,7 @@
                             "name": "filterAddRuleButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "DropdownPassThroughOptions",
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
                             "description": "Uses to pass attributes to the Button component."
                         },
                         {
@@ -13218,14 +13218,14 @@
                             "name": "filterClearButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions",
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
                             "description": "Uses to pass attributes to the Button component."
                         },
                         {
                             "name": "filterApplyButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonPassThroughOptions",
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
                             "description": "Uses to pass attributes to the Button component."
                         },
                         {
@@ -13235,6 +13235,13 @@
                             "type": "ColumnPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
                             "description": "Uses to pass attributes to the body cell's DOM element."
                         },
+                        {
+                            "name": "footerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the footer cell's DOM element."
+                        },
                         {
                             "name": "rowGroupToggler",
                             "optional": true,
@@ -13326,6 +13333,41 @@
                             "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
                             "description": "Uses to pass attributes to the row editor cancel icon's DOM element."
                         },
+                        {
+                            "name": "rowReorderIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row reorder icon's DOM element."
+                        },
+                        {
+                            "name": "radioButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the row radiobutton wrapper's DOM element."
+                        },
+                        {
+                            "name": "radioButtonInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the row radiobutton input's DOM element."
+                        },
+                        {
+                            "name": "radioButtonBox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the row radiobutton box's DOM element."
+                        },
+                        {
+                            "name": "radioButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the row radiobutton icon's DOM element."
+                        },
                         {
                             "name": "hooks",
                             "optional": true,

components/doc/datatable/theming/tailwinddoc.js

@@ -219,25 +219,38 @@ const Tailwind = {
                     'dark:text-white/70' // Dark Mode
                 )
             },
-            radiobuttonwrapper: {
+            radioButton: {
                 className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6')
             },
-            radiobutton: ({ context }) => ({
+            radioButtonInput: {
                 className: classNames(
-                    'flex justify-center items-center',
-                    'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
-                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
-                    {
-                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
-                        'cursor-default opacity-60': context.disabled
-                    }
+                    'w-full h-full top-0 left-0 absolute appearance-none select-none',
+                    'p-0 m-0 opacity-0 z-[1] rounded-[50%] outline-none',
+                    'cursor-pointer peer'
                 )
+            },
+            radioButtonBox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'h-6 w-6 rounded-full border-2 text-gray-700 transition duration-200 ease-in-out',
+                    context.checked
+                        ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400 peer-hover:bg-blue-700 peer-hover:border-blue-700'
+                        : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 peer-hover:border-blue-500',
+                    {
+                        'hover:border-blue-500 focus:shadow-input-focus focus:outline-none focus:outline-offset-0 dark:hover:border-blue-400 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled,
+                    },
+                ),
             }),
-            radiobuttonicon: ({ context }) => ({
-                className: classNames('transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', {
-                    'backface-hidden scale-10 invisible': context.checked === false,
-                    'transform scale-100 visible': context.checked === true
-                })
+            radioButtonIcon: ({ context }) => ({
+                className: classNames(
+                    'transform rounded-full',
+                    'block h-3 w-3 bg-white transition duration-200 dark:bg-gray-900',
+                    {
+                        'backface-hidden scale-10 invisible': context.checked === false,
+                        'visible scale-100 transform': context.checked === true,
+                    },
+                ),
             }),
             headercheckboxwrapper: {
                 className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')

components/lib/column/column.d.ts

@@ -10,10 +10,8 @@
  */
 import * as React from 'react';
 import { FilterMatchMode } from '../api/api';
-import { ButtonPassThroughOptions } from '../button/button';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { DataTablePassThroughOptions } from '../datatable/datatable';
-import { DropdownPassThroughOptions } from '../dropdown/dropdown';
 import { PassThroughOptions } from '../passthrough';
 import { TooltipOptions } from '../tooltip/tooltipoptions';
 import { IconType, PassThroughType } from '../utils/utils';
@@ -208,9 +206,8 @@ export interface ColumnPassThroughOptions {
     filterOperator?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterOperatorDropdown?: DropdownPassThroughOptions;
+    filterOperatorDropdown?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the filter constraints' DOM element.
      */
@@ -221,45 +218,44 @@ export interface ColumnPassThroughOptions {
     filterConstraint?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterMatchModeDropdown?: DropdownPassThroughOptions;
+    filterMatchModeDropdown?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the filter remove button container's DOM element.
      */
     filterRemove?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterRemoveButton?: DropdownPassThroughOptions;
+    filterRemoveButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the filter add rule's DOM element.
      */
     filterAddRule?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link DropdownPassThroughOptions}
      */
-    filterAddRuleButton?: DropdownPassThroughOptions;
+    filterAddRuleButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the filter buttonbar's DOM element.
      */
     filterButtonbar?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
      */
-    filterClearButton?: ButtonPassThroughOptions;
+    filterClearButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
      */
-    filterApplyButton?: ButtonPassThroughOptions;
+    filterApplyButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the body cell's DOM element.
      */
     bodyCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the footer cell's DOM element.
+     */
+    footerCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
     /**
      * Uses to pass attributes to the rowgroup toggler's DOM element.
      */
@@ -312,6 +308,26 @@ export interface ColumnPassThroughOptions {
      * Uses to pass attributes to the row editor cancel icon's DOM element.
      */
     rowEditorCancelIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row reorder icon's DOM element.
+     */
+    rowReorderIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton wrapper's DOM element.
+     */
+    radioButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton input's DOM element.
+     */
+    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>>;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}

components/lib/datatable/BodyCell.js

@@ -613,6 +613,7 @@ export const BodyCell = React.memo((props) => {
                             ariaLabel={label}
                             ptCallbacks={props.ptCallbacks}
                             metaData={props.metaData}
+                            unstyled={props.unstyled}
                         />
                     )}
                     {selectionMode === 'multiple' && (
@@ -627,6 +628,7 @@ export const BodyCell = React.memo((props) => {
                             checkIcon={props.checkIcon}
                             ptCallbacks={props.ptCallbacks}
                             metaData={props.metaData}
+                            unstyled={props.unstyled}
                         />
                     )}
                 </>

components/lib/datatable/BodyRow.js

@@ -456,6 +456,7 @@ export const BodyRow = React.memo((props) => {
                         virtualScrollerOptions={props.virtualScrollerOptions}
                         ptCallbacks={props.ptCallbacks}
                         metaData={props.metaData}
+                        unstyled={props.unstyled}
                     />
                 );
             }

components/lib/datatable/DataTable.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getStorage } from '../../utils/utils';
 import PrimeReact, { FilterMatchMode, FilterOperator, FilterService, PrimeReactContext } from '../api/Api';
 import { ColumnBase } from '../column/ColumnBase';
 import { useHandleStyle } from '../componentbase/ComponentBase';
@@ -13,7 +14,6 @@ import { DataTableBase } from './DataTableBase';
 import { TableBody } from './TableBody';
 import { TableFooter } from './TableFooter';
 import { TableHeader } from './TableHeader';
-import { getStorage } from '../../utils/utils';
 
 export const DataTable = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -1546,7 +1546,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 },
                 ptCallbacks.ptm('loadingIcon')
             );
-            const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+            const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin unstyled={props.unstyled} />;
             const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
             const loadingOverlayProps = mergeProps(
                 {
@@ -1720,6 +1720,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 virtualScrollerOptions={options}
                 ptCallbacks={ptCallbacks}
                 metaData={metaData}
+                unstyled={props.unstyled}
             />
         );
         const body = (
@@ -1805,10 +1806,11 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 virtualScrollerOptions={options}
                 ptCallbacks={ptCallbacks}
                 metaData={metaData}
+                unstyled={props.unstyled}
             />
         );
         const spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? (
-            <TableBody hostName="DataTable" style={{ height: `calc(${spacerStyle.height} - ${rows.length * itemSize}px)` }} className="p-datatable-virtualscroller-spacer" ptCallbacks={ptCallbacks} metaData={metaData} />
+            <TableBody hostName="DataTable" style={{ height: `calc(${spacerStyle.height} - ${rows.length * itemSize}px)` }} className="p-datatable-virtualscroller-spacer" ptCallbacks={ptCallbacks} metaData={metaData} unstyled={props.unstyled} />
         ) : null;
 
         return (
@@ -1823,7 +1825,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const createTableFooter = (options) => {
         const { columns } = options;
 
-        return <TableFooter hostName="DataTable" tableProps={props} columns={columns} footerColumnGroup={props.footerColumnGroup} ptCallbacks={ptCallbacks} metaData={metaData} />;
+        return <TableFooter hostName="DataTable" tableProps={props} columns={columns} footerColumnGroup={props.footerColumnGroup} ptCallbacks={ptCallbacks} metaData={metaData} unstyled={props.unstyled} />;
     };
 
     const createContent = (processedData, columns, selectionModeInColumn, empty) => {
@@ -1857,6 +1859,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                     pt={ptCallbacks.ptm('virtualScroller')}
                     __parentMetadata={{ parent: metaData }}
                     showSpacer={false}
+                    unstyled={props.unstyled}
                     contentTemplate={(options) => {
                         const ref = (el) => {
                             tableRef.current = el;

components/lib/datatable/HeaderCell.js

@@ -304,7 +304,7 @@ export const HeaderCell = React.memo((props) => {
         if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') {
             const allRowsSelected = props.allRowsSelected(props.value);
 
-            return <HeaderCheckbox hostName={props.hostName} checked={allRowsSelected} onChange={props.onColumnCheckboxChange} disabled={props.empty} ptCallbacks={ptCallbacks} metaData={parentMetaData} />;
+            return <HeaderCheckbox hostName={props.hostName} checked={allRowsSelected} onChange={props.onColumnCheckboxChange} disabled={props.empty} ptCallbacks={ptCallbacks} metaData={parentMetaData} unstyled={props.unstyled} />;
         }
 
         return null;

components/lib/datatable/RowRadioButton.js

@@ -37,7 +37,11 @@ export const RowRadioButton = React.memo((props) => {
             checked: props.checked,
             disabled: props.disabled,
             name: `${props.tableSelector}_dt_radio`,
-            onChange: onChange
+            onChange: onChange,
+            input: getColumnPTOptions('radiobuttoninput'),
+            box: getColumnPTOptions('radiobuttonbox'),
+            icon: getColumnPTOptions('radiobuttonicon'),
+            unstyled: props.unstyled
         },
         getColumnPTOptions('radiobutton')
     );