Fixed #2620 - pass standard props to the wrapping element (#2708)

primefaces · Mar 31, 2022 · 8df826f · 8df826f
1 parent 324c51a
commit 8df826f
Show file tree

Hide file tree

Showing 56 changed files with 57 additions and 41 deletions.
diff --git a/components/doc/autocomplete/index.js b/components/doc/autocomplete/index.js
@@ -742,6 +742,7 @@ itemTemplate(item) {
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLSpanElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/cascadeselect/index.js b/components/doc/cascadeselect/index.js
@@ -614,6 +614,7 @@ const countryOptionTemplate = (option) => {
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/checkbox/index.js b/components/doc/checkbox/index.js
@@ -438,6 +438,7 @@ const onCityChange = (e) => {
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js
@@ -2894,6 +2894,7 @@ export const DataTableStateDemo = () => {
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/dropdown/index.js b/components/doc/dropdown/index.js
@@ -1022,6 +1022,7 @@ const groupedCities = [
                     </div>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/editor/index.js b/components/doc/editor/index.js
@@ -213,6 +213,7 @@ const header = (
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/inputswitch/index.js b/components/doc/inputswitch/index.js
@@ -145,6 +145,7 @@ import { InputSwitch } from 'primereact/inputswitch';
 </CodeHighlight>
 
                 <h5>Properties</h5>
+                <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                 <div className="doc-tablewrapper">
                     <table className="doc-table">
                         <thead>

diff --git a/components/doc/knob/index.js b/components/doc/knob/index.js
@@ -451,8 +451,7 @@ import { Knob } from 'primereact/knob';
 </CodeHighlight>
 
                     <h5>Properties</h5>
-                    <p>Any property as style and class are passed to the main container element. Following are the
-                        additional properties to configure the component.</p>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/multiselect/index.js b/components/doc/multiselect/index.js
@@ -989,6 +989,7 @@ const groupedCities = [
                     </div>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/multistatecheckbox/index.js b/components/doc/multistatecheckbox/index.js
@@ -192,6 +192,7 @@ import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
                 </div>
 
                 <h5>Properties</h5>
+                <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                 <div className="doc-tablewrapper">
                     <table className="doc-table">
                         <thead>

diff --git a/components/doc/radiobutton/index.js b/components/doc/radiobutton/index.js
@@ -247,6 +247,7 @@ import { RadioButton } from 'primereact/radiobutton';
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/rating/index.js b/components/doc/rating/index.js
@@ -187,6 +187,7 @@ import { Rating } from 'primereact/rating';
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/selectbutton/index.js b/components/doc/selectbutton/index.js
@@ -331,6 +331,7 @@ const itemTemplate = (option) => {
                     </div>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/slider/index.js b/components/doc/slider/index.js
@@ -253,6 +253,7 @@ import { Slider } from 'primereact/slider';
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/togglebutton/index.js b/components/doc/togglebutton/index.js
@@ -155,6 +155,7 @@ import { ToggleButton } from 'primereact/togglebutton';
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/treeselect/index.js b/components/doc/treeselect/index.js
@@ -492,6 +492,7 @@ data() {
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/treetable/index.js b/components/doc/treetable/index.js
@@ -2074,6 +2074,7 @@ export const TreeTableResponsiveDemo = () => {
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/doc/tristatecheckbox/index.js b/components/doc/tristatecheckbox/index.js
@@ -137,6 +137,7 @@ import { TriStateCheckbox } from 'primereact/tristatecheckbox';
 </CodeHighlight>
 
                     <h5>Properties</h5>
+                    <p>Standard HTMLDivElement properties are passed to the wrapping div element.<br/>In addition the component uses these properties:</p>
                     <div className="doc-tablewrapper">
                         <table className="doc-table">
                             <thead>

diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
@@ -45,7 +45,7 @@ interface AutoCompleteCompleteMethodParams {
     query: string;
 }
 
-export interface AutoCompleteProps {
+export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect'> {
     id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     value?: any;
@@ -106,6 +106,6 @@ export interface AutoCompleteProps {
     onHide?(): void;
 }
 
-export declare class AutoComplete extends React.Component<AutoCompleteProps, any> { 
+export declare class AutoComplete extends React.Component<AutoCompleteProps, any> {
     public search(event:React.SyntheticEvent, query:string, source: AutoCompleteSourceType): void;
 }
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -564,7 +564,7 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     const dropdown = createDropdown();
 
     return (
-        <span ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
+        <span {...ObjectUtils.findDiffKeys(this.props, AutoComplete.defaultProps)} ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
             {input}
             {loader}
             {dropdown}

diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts
@@ -12,7 +12,7 @@ interface CascadeSelectChangeParams {
 
 interface CascadeSelectGroupChangeParams extends CascadeSelectChangeParams { }
 
-export interface CascadeSelectProps {
+export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     style?: object;

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -256,7 +256,7 @@ export const CascadeSelect = memo(forwardRef((props, ref) => {
         const overlay = createOverlay();
 
         return (
-            <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+            <div {...ObjectUtils.findDiffKeys(this.props, CascadeSelect.defaultProps)}  ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
                 {keyboardHelper}
                 {labelElement}
                 {dropdownIcon}

diff --git a/components/lib/checkbox/Checkbox.d.ts b/components/lib/checkbox/Checkbox.d.ts
@@ -19,7 +19,7 @@ interface CheckboxChangeParams {
     target: CheckboxChangeTargetOptions;
 }
 
-export interface CheckboxProps {
+export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     inputId?: string;

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
@@ -97,7 +97,7 @@ export const Checkbox = memo(forwardRef((props, ref) => {
     const icon = IconUtils.getJSXIcon(checked && props.icon, { className: 'p-checkbox-icon p-c' }, { props, checked });
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
+        <div {...ObjectUtils.findDiffKeys(this.props, Checkbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
             <div className="p-hidden-accessible">
                 <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} tabIndex={props.tabIndex} defaultChecked={checked} aria-labelledby={props.ariaLabelledBy}
                     onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} required={props.required} />

diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
@@ -232,7 +232,7 @@ interface DataTableRowEditValidatorOptions {
     props: DataTableProps;
 }
 
-export interface DataTableProps {
+export interface DataTableProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu'> {
     id?: string;
     value?: any[];
     header?: DataTableHeaderTemplateType;

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -1547,7 +1547,7 @@ export const DataTable = forwardRef((props, ref) => {
     const reorderIndicators = createReorderIndicators();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} data-scrollselectors=".p-datatable-wrapper">
+        <div {...ObjectUtils.findDiffKeys(this.props, DataTable.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} data-scrollselectors=".p-datatable-wrapper">
             {loader}
             {header}
             {paginatorTop}

diff --git a/components/lib/dropdown/Dropdown.d.ts b/components/lib/dropdown/Dropdown.d.ts
@@ -36,7 +36,7 @@ interface DropdownFilterParams {
     filter: string;
 }
 
-export interface DropdownProps {
+export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
     name?: string;

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -687,7 +687,7 @@ export const Dropdown = memo(forwardRef((props, ref) => {
     const clearIcon = createClearIcon();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
+        <div {...ObjectUtils.findDiffKeys(this.props, Dropdown.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
             onMouseDown={props.onMouseDown} onContextMenu={props.onContextMenu}>
             {keyboardHelper}
             {hiddenSelect}

diff --git a/components/lib/editor/Editor.d.ts b/components/lib/editor/Editor.d.ts
@@ -13,7 +13,7 @@ interface EditorSelectionChangeParams {
     source: string;
 }
 
-export interface EditorProps {
+export interface EditorProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     id?: string;
     value?: string;
     style?: object;

diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
@@ -138,7 +138,7 @@ export const Editor = memo(forwardRef((props, ref) => {
     const content = <div ref={contentRef} className="p-editor-content"></div>
 
     return (
-        <div id={props.id} className={className} style={props.style}>
+        <div {...ObjectUtils.findDiffKeys(this.props, Editor.defaultProps)} id={props.id} className={className} style={props.style}>
             {header}
             {content}
         </div>

diff --git a/components/lib/inputswitch/InputSwitch.d.ts b/components/lib/inputswitch/InputSwitch.d.ts
@@ -15,7 +15,7 @@ interface InputSwitchChangeParams {
     target: InputSwitchChangeTargetOptions;
 }
 
-export interface InputSwitchProps {
+export interface InputSwitchProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     style?: object;

diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
@@ -88,7 +88,7 @@ export const InputSwitch = memo(forwardRef((props, ref) => {
     const inputSwitchProps = ObjectUtils.findDiffKeys(props, InputSwitch.defaultProps);
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
+        <div {...ObjectUtils.findDiffKeys(this.props, InputSwitch.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}
             role="checkbox" aria-checked={checked} {...inputSwitchProps}>
             <div className="p-hidden-accessible">
                 <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} checked={checked} onChange={toggle}

diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
@@ -4,7 +4,7 @@ interface KnobChangeParams {
     value: number;
 }
 
-export interface KnobProps {
+export interface KnobProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     style?: object;
     className?: string;

diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
@@ -136,7 +136,7 @@ export const Knob = memo(forwardRef((props, ref) => {
     const text = props.showValue && <text x={50} y={57} textAnchor={'middle'} fill={props.textColor} className={'p-knob-text'} name={props.name}>{valueToDisplay()}</text>
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div {...ObjectUtils.findDiffKeys(this.props, Knob.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
             <svg viewBox="0 0 100 100" width={props.size} height={props.size} onClick={onClick} onMouseDown={onMouseDown} onMouseUp={onMouseUp}
                 onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
                 <path d={rangePath} strokeWidth={props.strokeWidth} stroke={props.rangeColor} className={'p-knob-range'}></path>

diff --git a/components/lib/listbox/ListBox.d.ts b/components/lib/listbox/ListBox.d.ts
@@ -28,7 +28,7 @@ interface ListBoxFilterValueChangeParams {
     value: any;
 }
 
-export interface ListBoxProps {
+export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     value?: any;
     options?: any[];

diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
@@ -328,7 +328,7 @@ export const ListBox = memo(forwardRef((props, ref) => {
     const header = createHeader();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
+        <div {...ObjectUtils.findDiffKeys(this.props, ListBox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style}>
             {header}
             <div className={listClassName} style={props.listStyle}>
                 {list}

diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
@@ -65,7 +65,7 @@ interface MultiSelectAllParams {
     checked: boolean;
 }
 
-export interface MultiSelectProps {
+export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
     name?: string;

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -570,7 +570,7 @@ export const MultiSelect = memo(forwardRef((props, ref) => {
     const clearIcon = createClearIcon();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} onClick={onClick} style={props.style}>
+        <div {...ObjectUtils.findDiffKeys(this.props, MultiSelect.defaultProps)} ref={elementRef} id={props.id} className={className} onClick={onClick} style={props.style}>
             <div className="p-hidden-accessible">
                 <input ref={inputRef} id={props.inputId} name={props.name} readOnly type="text" onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown}
                     role="listbox" aria-labelledby={props.ariaLabelledBy} aria-expanded={overlayVisibleState} disabled={props.disabled} tabIndex={props.tabIndex} />

diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.d.ts b/components/lib/multistatecheckbox/MultiStateCheckbox.d.ts
@@ -34,7 +34,7 @@ interface MultiStateCheckboxChangeParams {
     target: MultiStateCheckboxChangeTargetOptions;
 }
 
-export interface MultiStateCheckboxProps {
+export interface MultiStateCheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     inputId?: string;

diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -128,7 +128,7 @@ export const MultiStateCheckbox = memo(forwardRef((props, ref) => {
     const icon = createIcon();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+        <div {...ObjectUtils.findDiffKeys(this.props, MultiStateCheckbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
             <div className="p-hidden-accessible">
                 <input ref={inputRef} type="checkbox" aria-labelledby={props.ariaLabelledBy} id={props.inputId} name={props.name}
                     onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} defaultChecked={!!selectedOption} />

diff --git a/components/lib/radiobutton/RadioButton.d.ts b/components/lib/radiobutton/RadioButton.d.ts
@@ -17,7 +17,7 @@ interface RadioButtonChangeParams {
     target: RadioButtonChangeTargetOptions;
 }
 
-export interface RadioButtonProps {
+export interface RadioButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange'> {
     id?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     inputId?: string;

diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
@@ -89,7 +89,7 @@ export const RadioButton = memo(forwardRef((props, ref) => {
     });
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
+        <div {...ObjectUtils.findDiffKeys(this.props, RadioButton.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
             <div className="p-hidden-accessible">
                 <input ref={inputRef} id={props.inputId} type="radio" aria-labelledby={props.ariaLabelledBy} name={props.name} defaultChecked={props.checked}
                     onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} required={props.required} tabIndex={props.tabIndex} />