+
+
`,
javascript: `
import React from 'react';
@@ -18,7 +18,7 @@ export default function TemplateDemo() {
return (
-
)
}
@@ -32,7 +32,7 @@ export default function TemplateDemo() {
return (
-
)
}
@@ -43,11 +43,11 @@ export default function TemplateDemo() {
<>
- An eye icon is displayed by default when the image is hovered in preview mode. Use the template prop for custom content.
+ An eye icon is displayed by default when the image is hovered in preview mode. Use the indicatorIcon prop for custom content.
-
diff --git a/components/doc/inputtext/pt/ptdoc.js b/components/doc/inputtext/pt/ptdoc.js
new file mode 100644
index 0000000000..9ced6af400
--- /dev/null
+++ b/components/doc/inputtext/pt/ptdoc.js
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { InputText } from '../../../lib/inputtext/InputText';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+ const [value, setValue] = useState('');
+
+ const code = {
+ basic: `
+
setValue(e.target.value)}
+ pt={{
+ root: { className: 'border-primary-400' }
+ }}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function PTDemo() {
+ const [value, setValue] = useState('');
+
+ return (
+
+ setValue(e.target.value)}
+ pt={{
+ root: { className: 'border-primary-400' }
+ }}
+ />
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function PTDemo() {
+ const [value, setValue] = useState('');
+
+ return (
+
+ setValue(e.target.value)}
+ pt={{
+ root: { className: 'border-primary-400' }
+ }}
+ />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ InputText is used as a controlled input with value and onChange properties.
+
+
+
+ setValue(e.target.value)}
+ pt={{
+ root: { className: 'border-primary-400' }
+ }}
+ />
+
+
+
+
setValue(e.value)}
+ pt={{
+ onIcon: { className: 'text-orange-400' }
+ }}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function PTDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)}
+ pt={{
+ onIcon: { className: 'text-orange-400' }
+ }}
+ />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { Rating, RatingChangeEvent } from "primereact/rating";
+
+export default function PTDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)}
+ pt={{
+ onIcon: { className: 'text-orange-400' }
+ }}
+ />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+ setValue(e.value)}
+ pt={{
+ onIcon: { className: 'text-orange-400' }
+ }}
+ />
+
+
+
+
- setValue(e.value)} options={options} />
-
+ return (
+
+ setValue(e.value)} options={options} />
+
+ );
}
`,
typescript: `
diff --git a/components/doc/selectbutton/pt/ptdoc.js b/components/doc/selectbutton/pt/ptdoc.js
new file mode 100644
index 0000000000..b47ab1eda9
--- /dev/null
+++ b/components/doc/selectbutton/pt/ptdoc.js
@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { SelectButton } from '../../../lib/selectbutton/SelectButton';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+ const options = ['Off', 'On'];
+ const [value, setValue] = useState(options[0]);
+
+ const code = {
+ basic: `
+ setValue(e.value)}
+ options={options}
+ pt={{
+ button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+ }}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function PTDemo() {
+ const options = ['Off', 'On'];
+ const [value, setValue] = useState(options[0]);
+
+ return (
+
+ setValue(e.value)}
+ options={options}
+ pt={{
+ button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+ }}
+ />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+export default function PTDemo() {
+ const options: string[] = ['Off', 'On'];
+ const [value, setValue] = useState(options[0]);
+
+ return (
+
+ setValue(e.value)}
+ options={options}
+ pt={{
+ button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+ }}
+ />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+ setValue(e.value)}
+ options={options}
+ pt={{
+ button: ({ context }) => ({ className: context.selected ? 'bg-cyan-400 border-cyan-400' : undefined })
+ }}
+ />
+
+
+
+
({ className: context.active ? 'bg-primary-200' : undefined })
- }}
->
-`,
- javascript: `
-import React from 'react';
-import { SlideMenu } from 'primereact/slidemenu';
-
-export default function PTDemo() {
- const items = [
- {
- label:'File',
- icon:'pi pi-fw pi-file',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-plus',
- items:[
- {
- label:'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label:'Video',
- icon:'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- separator:true
- },
- {
- label:'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label:'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label:'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label:'Justify',
- icon:'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label:'Users',
- icon:'pi pi-fw pi-user',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-user-plus',
-
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-user-minus',
-
- },
- {
- label:'Search',
- icon:'pi pi-fw pi-users',
- items:[
- {
- label:'Filter',
- icon:'pi pi-fw pi-filter',
- items:[
- {
- label:'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label:'List'
- }
- ]
- }
- ]
- },
- {
- label:'Events',
- icon:'pi pi-fw pi-calendar',
- items:[
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label:'Archive',
- icon:'pi pi-fw pi-calendar-times',
- items:[
- {
- label:'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator:true
- },
- {
- label:'Quit',
- icon:'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- >
-
- )
-}
- `,
- typescript: `
-import React from 'react';
-import { SlideMenu } from 'primereact/slidemenu';
-import { MenuItem } from 'primereact/menuitem';
-
-export default function PTDemo() {
- const items: MenuItem[] = [
- {
- label:'File',
- icon:'pi pi-fw pi-file',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-plus',
- items:[
- {
- label:'Bookmark',
- icon:'pi pi-fw pi-bookmark'
- },
- {
- label:'Video',
- icon:'pi pi-fw pi-video'
- },
-
- ]
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-trash'
- },
- {
- separator:true
- },
- {
- label:'Export',
- icon:'pi pi-fw pi-external-link'
- }
- ]
- },
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Left',
- icon:'pi pi-fw pi-align-left'
- },
- {
- label:'Right',
- icon:'pi pi-fw pi-align-right'
- },
- {
- label:'Center',
- icon:'pi pi-fw pi-align-center'
- },
- {
- label:'Justify',
- icon:'pi pi-fw pi-align-justify'
- },
-
- ]
- },
- {
- label:'Users',
- icon:'pi pi-fw pi-user',
- items:[
- {
- label:'New',
- icon:'pi pi-fw pi-user-plus',
-
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-user-minus',
-
- },
- {
- label:'Search',
- icon:'pi pi-fw pi-users',
- items:[
- {
- label:'Filter',
- icon:'pi pi-fw pi-filter',
- items:[
- {
- label:'Print',
- icon:'pi pi-fw pi-print'
- }
- ]
- },
- {
- icon:'pi pi-fw pi-bars',
- label:'List'
- }
- ]
- }
- ]
- },
- {
- label:'Events',
- icon:'pi pi-fw pi-calendar',
- items:[
- {
- label:'Edit',
- icon:'pi pi-fw pi-pencil',
- items:[
- {
- label:'Save',
- icon:'pi pi-fw pi-calendar-plus'
- },
- {
- label:'Delete',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- },
- {
- label:'Archive',
- icon:'pi pi-fw pi-calendar-times',
- items:[
- {
- label:'Remove',
- icon:'pi pi-fw pi-calendar-minus'
- }
- ]
- }
- ]
- },
- {
- separator:true
- },
- {
- label:'Quit',
- icon:'pi pi-fw pi-power-off'
- }
- ];
-
- return (
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- >
-
- )
-}
- `
- };
-
- return (
- <>
-
- ({ className: context.active ? 'bg-primary-200' : undefined })
- }}
- >
-
- setValue(e.value)}
+ pt={{
+ root: { className: 'w-14rem' },
+ handle: { className: 'bg-orange-400 border-900' },
+ range: { className: 'bg-orange-400' }
+ }}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function PTDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)}
+ pt={{
+ root: { className: 'w-14rem' },
+ handle: { className: 'bg-orange-400 border-900' },
+ range: { className: 'bg-orange-400' }
+ }}
+ />
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+
+export default function PTDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)}
+ pt={{
+ root: { className: 'w-14rem' },
+ handle: { className: 'bg-orange-400 border-900' },
+ range: { className: 'bg-orange-400' }
+ }}
+ />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+ setValue(e.value)}
+ pt={{
+ root: { className: 'w-14rem' },
+ handle: { className: 'bg-orange-400 border-900' },
+ range: { className: 'bg-orange-400' }
+ }}
+ />
+
+
-
+
setChecked(e.value)}
+ pt={{
+ root: {
+ className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
+ }
+ }}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function PTDemo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(e.value)}
+ pt={{
+ root: {
+ className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
+ }
+ }}
+ />
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function PTDemo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(e.value)}
+ pt={{
+ root: {
+ className: \`w-8rem \${checked ? 'bg-teal-400 border-white' : ''}\`
+ }
+ }}
+ />
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+ setChecked(e.value)}
+ pt={{
+ root: {
+ className: `w-8rem ${checked ? 'bg-teal-400 border-white' : ''}`
+ }
+ }}
+ />
+
+
+
+
setValue(e.value)}
+ pt={{
+ checkbox: {
+ className: value ? 'bg-teal-500 border-white' : undefined
+ }
+ }}
+/>
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function PTDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)}
+ pt={{
+ checkbox: {
+ className: value ? 'bg-teal-500 border-white' : undefined
+ }
+ }}
+ />
+ {String(value)}
+
+ );
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function PTDemo() {
+ const [value, setValue] = useState(null);
+
+ return (
+
+ setValue(e.value)}
+ pt={{
+ checkbox: {
+ className: value ? 'bg-teal-500 border-white' : undefined
+ }
+ }}
+ />
+ {String(value)}
+
+ );
+}
+ `
+ };
+
+ return (
+ <>
+
+
+ TriStateCheckbox is used as a controlled input with value and onChange properties.
+
+
+
+ setValue(e.value)}
+ pt={{
+ checkbox: {
+ className: value ? 'bg-teal-500 border-white' : undefined
+ }
+ }}
+ />
+ {String(value)}
+
+
+
+
@@ -108,7 +112,8 @@ export default function Layout(props) {
inputStyle: inputStyle,
darkTheme: props.dark,
onInputStyleChange: onInputStyleChange,
- onRippleChange: onRippleChange
+ onRippleChange: onRippleChange,
+ onHideOverlaysOnDocumentScrolling: onHideOverlaysOnDocumentScrolling
}}
>
@@ -117,7 +122,16 @@ export default function Layout(props) {
diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
index efa4d06694..477604449a 100644
--- a/components/lib/api/PrimeReact.js
+++ b/components/lib/api/PrimeReact.js
@@ -13,6 +13,8 @@ export default class PrimeReact {
static autoZIndex = true;
+ static hideOverlaysOnDocumentScrolling = false;
+
static nonce = null;
static nullSortOrder = 1;
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 2c14ec8e80..ca69fd19c1 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -26,16 +26,17 @@ export interface FilterMatchModeOptions {
}
export interface APIOptions {
- ripple?: boolean;
- inputStyle?: InputStyleType;
- nonce?: string;
- locale?: string;
appendTo?: AppendToType;
- cssTransition?: boolean;
autoZIndex?: boolean;
- zIndex?: ZIndexOptions;
+ cssTransition?: boolean;
filterMatchModeOptions?: FilterMatchModeOptions;
+ hideOverlaysOnViewportChange?: boolean;
+ inputStyle?: InputStyleType;
+ locale?: string;
+ nonce?: string;
nullSortOrder?: number;
+ ripple?: boolean;
+ zIndex?: ZIndexOptions;
changeTheme?(theme?: string, newTheme?: string, linkElementId?: string, callback?: () => void): void;
}
diff --git a/components/lib/autocomplete/AutoComplete.css b/components/lib/autocomplete/AutoComplete.css
index 8215cbf60d..9bd79bef60 100644
--- a/components/lib/autocomplete/AutoComplete.css
+++ b/components/lib/autocomplete/AutoComplete.css
@@ -33,7 +33,6 @@
position: absolute;
top: 0;
left: 0;
- overflow: auto;
}
.p-autocomplete-items {
@@ -94,3 +93,7 @@
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
width: 1%;
}
+
+.p-autocomplete-items-wrapper {
+ overflow: auto;
+}
diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
index e3edacfdbf..b8d847eeae 100644
--- a/components/lib/autocomplete/AutoCompleteBase.js
+++ b/components/lib/autocomplete/AutoCompleteBase.js
@@ -48,6 +48,7 @@ export const AutoCompleteBase = {
optionGroupLabel: null,
optionGroupTemplate: null,
panelClassName: null,
+ panelFooterTemplate: null,
panelStyle: null,
placeholder: null,
readOnly: false,
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index d870d0d5fe..9d3cda1f22 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -12,6 +12,16 @@ export const AutoCompletePanel = React.memo(
return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
};
+ const createFooter = () => {
+ if (props.panelFooterTemplate) {
+ const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
+
+ return
{content}
;
+ }
+
+ return null;
+ };
+
const createGroupChildren = (optionGroup, i, style) => {
const groupChildren = props.getOptionGroupChildren(optionGroup);
@@ -99,9 +109,11 @@ export const AutoCompletePanel = React.memo(
const items = createItems();
return (
-
+
);
}
};
@@ -111,8 +123,9 @@ export const AutoCompletePanel = React.memo(
'p-input-filled': PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': PrimeReact.ripple === false
});
- const style = { maxHeight: props.scrollHeight, ...(props.panelStyle || {}) };
+ const style = { ...(props.panelStyle || {}) };
const content = createContent();
+ const footer = createFooter();
return (
{content}
+ {footer}
);
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index f1347982f3..4b11319b8e 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -216,6 +216,10 @@ export interface AutoCompleteProps extends Omit
void) => React.ReactNode);
/**
* Inline style of the overlay panel element.
*/
diff --git a/components/lib/breadcrumb/BreadCrumb.css b/components/lib/breadcrumb/BreadCrumb.css
index 3015d625c5..a433ec4df2 100644
--- a/components/lib/breadcrumb/BreadCrumb.css
+++ b/components/lib/breadcrumb/BreadCrumb.css
@@ -21,6 +21,11 @@
align-items: center;
}
+.p-breadcrumb .p-menuitem-separator {
+ display: flex;
+ align-items: center;
+}
+
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index f37a960555..938732bdec 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -96,8 +96,14 @@ export const BreadCrumb = React.memo(
);
const icon = props.separatorIcon || {separatorIcon} ;
};
const createMenuitem = (item) => {
@@ -105,7 +111,7 @@ export const BreadCrumb = React.memo(
return null;
}
- const className = classNames(item.className, { 'p-disabled': item.disabled });
+ const className = classNames('p-menuitem', item.className, { 'p-disabled': item.disabled });
const labelProps = mergeProps(
{
className: 'p-menuitem-text'
@@ -182,7 +188,12 @@ export const BreadCrumb = React.memo(
const home = createHome();
const items = createMenuitems();
const separator = createSeparator();
- const menuProps = mergeProps(ptm('menu'));
+ const menuProps = mergeProps(
+ {
+ className: 'p-breadcrumb-list'
+ },
+ ptm('menu')
+ );
const rootProps = mergeProps(
{
id: props.id,
diff --git a/components/lib/breadcrumb/breadcrumb.d.ts b/components/lib/breadcrumb/breadcrumb.d.ts
index f9ac34131e..5e5e643bb6 100644
--- a/components/lib/breadcrumb/breadcrumb.d.ts
+++ b/components/lib/breadcrumb/breadcrumb.d.ts
@@ -49,6 +49,10 @@ export interface BreadCrumbPassThroughOptions {
* Uses to pass attributes to the label's DOM element.
*/
label?: BreadCrumbPassThroughType>;
+ /**
+ * Uses to pass attributes to the separator's DOM element.
+ */
+ separator?: BreadCrumbPassThroughType>;
/**
* Uses to pass attributes to the separator icon's DOM element.
*/
diff --git a/components/lib/button/__snapshots__/Button.spec.js.snap b/components/lib/button/__snapshots__/Button.spec.js.snap
index 0f5ed9e370..d88bac46e2 100644
--- a/components/lib/button/__snapshots__/Button.spec.js.snap
+++ b/components/lib/button/__snapshots__/Button.spec.js.snap
@@ -97,7 +97,7 @@ exports[`Button when click the button if loading is true it renders Button with
xmlns="http://www.w3.org/2000/svg"
>
year) {
validMin = false;
} else if (props.minDate.getFullYear() === year) {
- if (props.minDate.getMonth() > month) {
+ if (month > -1 && props.minDate.getMonth() > month) {
validMin = false;
- } else if (props.minDate.getMonth() === month) {
+ } else if (month > -1 && props.minDate.getMonth() === month) {
if (day > 0 && props.minDate.getDate() > day) {
validMin = false;
}
@@ -1798,9 +1798,9 @@ export const Calendar = React.memo(
if (props.maxDate.getFullYear() < year) {
validMax = false;
} else if (props.maxDate.getFullYear() === year) {
- if (props.maxDate.getMonth() < month) {
+ if (month > -1 && props.maxDate.getMonth() < month) {
validMax = false;
- } else if (props.maxDate.getMonth() === month) {
+ } else if (month > -1 && props.maxDate.getMonth() === month) {
if (day > 0 && props.maxDate.getDate() < day) {
validMax = false;
}
@@ -2864,7 +2864,7 @@ export const Calendar = React.memo(
};
const createMonthViewMonth = (index) => {
- const className = classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(index), 'p-disabled': !isSelectable(1, index, currentYear) });
+ const className = classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(index), 'p-disabled': !isSelectable(0, index, currentYear) });
const monthNamesShort = localeOption('monthNamesShort', props.locale);
const monthName = monthNamesShort[index];
@@ -3248,7 +3248,7 @@ export const Calendar = React.memo(
{monthPickerValues().map((m, i) => {
return (
-
onMonthSelect(event, i)} key={`month${i + 1}`} className={classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': !isSelectable(1, i, currentYear) })}>
+ onMonthSelect(event, i)} key={`month${i + 1}`} className={classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': !isSelectable(0, i, currentYear) })}>
{m}
);
@@ -3266,11 +3266,7 @@ export const Calendar = React.memo(
{yearPickerValues().map((y, i) => {
return (
-
onYearSelect(event, y)}
- key={`year${i + 1}`}
- className={classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': !(isSelectable(0, 0, y) || isSelectable(30, 11, y)) })}
- >
+ onYearSelect(event, y)} key={`year${i + 1}`} className={classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': !isSelectable(0, -1, y) })}>
{y}
);
diff --git a/components/lib/chip/__snapshots__/Chip.spec.js.snap b/components/lib/chip/__snapshots__/Chip.spec.js.snap
index a7d899e11b..f3baf5e054 100644
--- a/components/lib/chip/__snapshots__/Chip.spec.js.snap
+++ b/components/lib/chip/__snapshots__/Chip.spec.js.snap
@@ -78,7 +78,7 @@ exports[`Chip when removable is true it returns with remove icon: before remove
xmlns="http://www.w3.org/2000/svg"
>
{
return (
isVisible && (
{content}
;
+ return {content}
;
}
return null;
diff --git a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
index 5590255272..43678c5113 100644
--- a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
+++ b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
@@ -79,7 +79,7 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
xmlns="http://www.w3.org/2000/svg"
>
-
+
listener && listener(event);
nodes.forEach((node) => node.addEventListener('scroll', listenerRef.current, options));
diff --git a/components/lib/icons/arrowdown/index.js b/components/lib/icons/arrowdown/index.js
index 9ebc688387..5e0242c8e8 100644
--- a/components/lib/icons/arrowdown/index.js
+++ b/components/lib/icons/arrowdown/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const ArrowDownIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/arrowup/index.js b/components/lib/icons/arrowup/index.js
index 956407e527..fc7ca352f4 100644
--- a/components/lib/icons/arrowup/index.js
+++ b/components/lib/icons/arrowup/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const ArrowUpIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/ban/index.js b/components/lib/icons/ban/index.js
index eaf95dbd30..3631e9527e 100644
--- a/components/lib/icons/ban/index.js
+++ b/components/lib/icons/ban/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const BanIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/download/index.js b/components/lib/icons/download/index.js
index 59d004c580..2b4d48b44b 100644
--- a/components/lib/icons/download/index.js
+++ b/components/lib/icons/download/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const DownloadIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/exclamationtriangle/index.js b/components/lib/icons/exclamationtriangle/index.js
index 18387c3f8d..db0105379a 100644
--- a/components/lib/icons/exclamationtriangle/index.js
+++ b/components/lib/icons/exclamationtriangle/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const ExclamationTriangleIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/eyeslash/index.js b/components/lib/icons/eyeslash/index.js
index 4e62edbc90..ce4e0d1e26 100644
--- a/components/lib/icons/eyeslash/index.js
+++ b/components/lib/icons/eyeslash/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const EyeSlashIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/filter/index.js b/components/lib/icons/filter/index.js
index b62249b300..ee1a0549ff 100644
--- a/components/lib/icons/filter/index.js
+++ b/components/lib/icons/filter/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const FilterIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/filterslash/index.js b/components/lib/icons/filterslash/index.js
index cfeb713f92..75e79bd65b 100644
--- a/components/lib/icons/filterslash/index.js
+++ b/components/lib/icons/filterslash/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const FilterSlashIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/infocircle/index.js b/components/lib/icons/infocircle/index.js
index 2300199fe8..467806c91c 100644
--- a/components/lib/icons/infocircle/index.js
+++ b/components/lib/icons/infocircle/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const InfoCircleIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/pencil/index.js b/components/lib/icons/pencil/index.js
index f9f34fa79b..abb36c6cc7 100644
--- a/components/lib/icons/pencil/index.js
+++ b/components/lib/icons/pencil/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const PencilIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/plus/index.js b/components/lib/icons/plus/index.js
index 4e3a0b822b..f56a29ee77 100644
--- a/components/lib/icons/plus/index.js
+++ b/components/lib/icons/plus/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const PlusIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/refresh/index.js b/components/lib/icons/refresh/index.js
index 482c8db666..82465671a4 100644
--- a/components/lib/icons/refresh/index.js
+++ b/components/lib/icons/refresh/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const RefreshIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/search/index.js b/components/lib/icons/search/index.js
index 15ca41e51d..e05848a5c2 100644
--- a/components/lib/icons/search/index.js
+++ b/components/lib/icons/search/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SearchIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/searchminus/index.js b/components/lib/icons/searchminus/index.js
index c12b678284..79745d8693 100644
--- a/components/lib/icons/searchminus/index.js
+++ b/components/lib/icons/searchminus/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SearchMinusIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/searchplus/index.js b/components/lib/icons/searchplus/index.js
index 38965317f8..b2f1f71454 100644
--- a/components/lib/icons/searchplus/index.js
+++ b/components/lib/icons/searchplus/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SearchPlusIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/sortalt/index.js b/components/lib/icons/sortalt/index.js
index 62e68c8fa5..7747bcc30e 100644
--- a/components/lib/icons/sortalt/index.js
+++ b/components/lib/icons/sortalt/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SortAltIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/sortamountdown/index.js b/components/lib/icons/sortamountdown/index.js
index 29750f6126..be4371e6f6 100644
--- a/components/lib/icons/sortamountdown/index.js
+++ b/components/lib/icons/sortamountdown/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SortAmountDownIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/sortamountupalt/index.js b/components/lib/icons/sortamountupalt/index.js
index a2dcd965cc..dcead1c8f1 100644
--- a/components/lib/icons/sortamountupalt/index.js
+++ b/components/lib/icons/sortamountupalt/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SortAmountUpAltIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/spinner/index.js b/components/lib/icons/spinner/index.js
index 20af5cc685..4534635788 100644
--- a/components/lib/icons/spinner/index.js
+++ b/components/lib/icons/spinner/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const SpinnerIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/star/index.js b/components/lib/icons/star/index.js
index 03f01a0c3e..a2499081bc 100644
--- a/components/lib/icons/star/index.js
+++ b/components/lib/icons/star/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const StarIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/starfill/index.js b/components/lib/icons/starfill/index.js
index 59d7bfce2c..bf261727b2 100644
--- a/components/lib/icons/starfill/index.js
+++ b/components/lib/icons/starfill/index.js
@@ -1,20 +1,28 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const StarFillIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/thlarge/index.js b/components/lib/icons/thlarge/index.js
index 24220d3ff4..176a3a5890 100644
--- a/components/lib/icons/thlarge/index.js
+++ b/components/lib/icons/thlarge/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const ThLargeIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/timescircle/index.js b/components/lib/icons/timescircle/index.js
index 8a7a67a26b..3e14701474 100644
--- a/components/lib/icons/timescircle/index.js
+++ b/components/lib/icons/timescircle/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const TimesCircleIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/trash/index.js b/components/lib/icons/trash/index.js
index 26b9ec54ee..117f1fe8aa 100644
--- a/components/lib/icons/trash/index.js
+++ b/components/lib/icons/trash/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const TrashIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/undo/index.js b/components/lib/icons/undo/index.js
index 37e8d97d08..c6ef10f7de 100644
--- a/components/lib/icons/undo/index.js
+++ b/components/lib/icons/undo/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const UndoIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/upload/index.js b/components/lib/icons/upload/index.js
index 1acd8cb8a5..eecd0a46b7 100644
--- a/components/lib/icons/upload/index.js
+++ b/components/lib/icons/upload/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const UploadIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/windowmaximize/index.js b/components/lib/icons/windowmaximize/index.js
index b298ce98cf..c2625423d7 100644
--- a/components/lib/icons/windowmaximize/index.js
+++ b/components/lib/icons/windowmaximize/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const WindowMaximizeIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/icons/windowminimize/index.js b/components/lib/icons/windowminimize/index.js
index 03bfed9093..b29167c630 100644
--- a/components/lib/icons/windowminimize/index.js
+++ b/components/lib/icons/windowminimize/index.js
@@ -1,13 +1,21 @@
import * as React from 'react';
import { IconBase } from '../../iconbase/IconBase';
+import { ObjectUtils, UniqueComponentId } from '../../utils/Utils';
export const WindowMinimizeIcon = React.memo(
React.forwardRef((inProps, ref) => {
const pti = IconBase.getPTI(inProps);
+ const [pathId, setPathId] = React.useState(inProps.id);
+
+ React.useEffect(() => {
+ if (ObjectUtils.isEmpty(pathId)) {
+ setPathId(UniqueComponentId('pr_icon_clip_'));
+ }
+ }, [pathId]);
return (
-
+
-
+
diff --git a/components/lib/image/image.d.ts b/components/lib/image/image.d.ts
index 6a60c56343..be3fcf7268 100644
--- a/components/lib/image/image.d.ts
+++ b/components/lib/image/image.d.ts
@@ -217,7 +217,7 @@ export interface ImageProps extends Omit {
const props = InputTextBase.getProps(inProps);
-
+ const { ptm } = InputTextBase.setMetaData({
+ props
+ });
const elementRef = React.useRef(ref);
const onKeyDown = (event) => {
@@ -46,7 +48,6 @@ export const InputText = React.memo(
const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue), [props.value, props.defaultValue]);
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
- const otherProps = InputTextBase.getOtherProps(props);
const className = classNames(
'p-inputtext p-component',
{
@@ -56,10 +57,22 @@ export const InputText = React.memo(
props.className
);
+ const rootProps = mergeProps(
+ {
+ ref: elementRef,
+ className,
+ onInput: (e) => onInput(e),
+ onKeyDown: (e) => onKeyDown(e),
+ onPaste: (e) => onPaste(e)
+ },
+ InputTextBase.getOtherProps(props),
+ ptm('root')
+ );
+
return (
<>
- = PassThroughType;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputTextPassThroughMethodOptions {
+ props: InputTextProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputTextProps.pt}
+ */
+export interface InputTextPassThroughOptions {
+ /**
+ * Uses to pass attributes to the root's DOM element.
+ */
+ root?: InputTextPassThroughType>;
+ /**
+ * Uses to pass attributes to the Tooltip component.
+ * @see {@link TooltipPassThroughOptions}
+ */
+ tooltip?: TooltipPassThroughOptions;
+}
/**
* Defines valid properties in InputText component. In addition to these, all properties of HTMLInputElement can be used in this component.
@@ -49,6 +76,11 @@ export interface InputTextProps extends Omit
{
- const iconClassName = 'p-icon p-multiselect-clear-icon';
- const icon = props.clearIcon || updateModel(e, null, null)}>
- {clearIcon}
-
- );
+ return clearIcon;
}
return null;
diff --git a/components/lib/panel/__snapshots__/Panel.spec.js.snap b/components/lib/panel/__snapshots__/Panel.spec.js.snap
index 7cfee09624..1302559f53 100644
--- a/components/lib/panel/__snapshots__/Panel.spec.js.snap
+++ b/components/lib/panel/__snapshots__/Panel.spec.js.snap
@@ -130,7 +130,7 @@ exports[`Panel when Panel is toggleable it must expand and collapse: expandable-
xmlns="http://www.w3.org/2000/svg"
>
-
+
{
+ return ptm(key, {
+ context: {
+ active: value <= props.value
+ }
+ });
+ };
+
const enabled = !props.disabled && !props.readOnly;
const tabIndex = enabled ? 0 : null;
@@ -75,11 +87,34 @@ export const Rating = React.memo(
const active = value <= props.value;
const className = classNames('p-rating-item', { 'p-rating-item-active': active });
const iconClassName = 'p-rating-icon';
- const icon = active ? { type: props.onIcon || rate(e, value)} onKeyDown={(e) => onStarKeyDown(e, value)}>
+
{content}
);
@@ -89,14 +124,26 @@ export const Rating = React.memo(
const createCancelIcon = () => {
if (props.cancel) {
const iconClassName = 'p-rating-icon p-rating-cancel';
- const icon = props.cancelIcon ||
;
- const content = IconUtils.getJSXIcon(icon, { className: { iconClassName }, ...props.cancelIconProps }, { props });
-
- return (
-
- {content}
-
+ const cancelIconProps = mergeProps(
+ {
+ className: iconClassName
+ },
+ ptm('cancelIcon')
+ );
+ const icon = props.cancelIcon ||
;
+ const content = IconUtils.getJSXIcon(icon, { ...cancelIconProps, ...props.cancelIconProps }, { props });
+
+ const cancelItemProps = mergeProps(
+ {
+ className: 'p-rating-item p-rating-cancel-item',
+ onClick: clear,
+ tabIndex: tabIndex,
+ onKeyDown: onCancelKeyDown
+ },
+ ptm('cancelItem')
);
+
+ return
{content}
;
}
return null;
@@ -108,7 +155,6 @@ export const Rating = React.memo(
}));
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
- const otherProps = RatingBase.getOtherProps(props);
const className = classNames(
'p-rating',
{
@@ -117,16 +163,37 @@ export const Rating = React.memo(
},
props.className
);
+
+ const rootProps = mergeProps(
+ {
+ ref: elementRef,
+ id: props.id,
+ className: className,
+ style: props.style
+ },
+ RatingBase.getOtherProps(props),
+ ptm('root')
+ );
+
+ const tooltipProps = mergeProps(
+ {
+ target: elementRef,
+ content: props.tooltip,
+ ...props.tooltipOptions
+ },
+ ptm('tooltip')
+ );
+
const cancelIcon = createCancelIcon();
const icons = createIcons();
return (
<>
-
+
{cancelIcon}
{icons}
- {hasTooltip &&
}
+ {hasTooltip &&
}
);
})
diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js
index f3b64430be..2573f0916d 100644
--- a/components/lib/rating/RatingBase.js
+++ b/components/lib/rating/RatingBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
-export const RatingBase = {
+export const RatingBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Rating',
id: null,
@@ -21,7 +21,5 @@ export const RatingBase = {
onIconProps: null,
offIconProps: null,
children: undefined
- },
- getProps: (props) => ObjectUtils.getMergedProps(props, RatingBase.defaultProps),
- getOtherProps: (props) => ObjectUtils.getDiffProps(props, RatingBase.defaultProps)
-};
+ }
+});
diff --git a/components/lib/rating/rating.d.ts b/components/lib/rating/rating.d.ts
index 122ae5f9c7..1d317c6cd2 100644
--- a/components/lib/rating/rating.d.ts
+++ b/components/lib/rating/rating.d.ts
@@ -8,9 +8,67 @@
*
*/
import * as React from 'react';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
import { TooltipOptions } from '../tooltip/tooltipoptions';
import { FormEvent } from '../ts-helpers';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type RatingPassThroughType
= PassThroughType;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RatingPassThroughMethodOptions {
+ props: RatingProps;
+ context: RatingContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RatingProps.pt}
+ */
+export interface RatingPassThroughOptions {
+ /**
+ * Uses to pass attributes to the root's DOM element.
+ */
+ root?: RatingPassThroughType>;
+ /**
+ * Uses to pass attributes to the cancel icon's DOM element.
+ */
+ cancelIcon?: RatingPassThroughType | React.HTMLAttributes>;
+ /**
+ * Uses to pass attributes to the item's DOM element.
+ */
+ item?: RatingPassThroughType>;
+ /**
+ * Uses to pass attributes to the cancel item's DOM element.
+ */
+ cancelItem?: RatingPassThroughType>;
+ /**
+ * Uses to pass attributes to the on icon's DOM element.
+ */
+ onIcon?: RatingPassThroughType | React.HTMLAttributes>;
+ /**
+ * Uses to pass attributes to the off icon's DOM element.
+ */
+ offIcon?: RatingPassThroughType | React.HTMLAttributes>;
+ /**
+ * Uses to pass attributes tooltip's DOM element.
+ * @type {TooltipPassThroughOptions}
+ */
+ tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+ /**
+ * Current active state of the item as a boolean.
+ * @defaultValue false
+ */
+ active: boolean;
+}
/**
* Custom change event.
@@ -91,6 +149,11 @@ export interface RatingProps extends Omit;
+ /**
+ * Uses to pass attributes to DOM elements inside the component.
+ * @type {RatingPassThroughOptions}
+ */
+ pt?: RatingPassThroughOptions;
}
/**
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
index f4746136db..0bc1087e8d 100644
--- a/components/lib/selectbutton/SelectButton.js
+++ b/components/lib/selectbutton/SelectButton.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, mergeProps, ObjectUtils } from '../utils/Utils';
import { SelectButtonBase } from './SelectButtonBase';
import { SelectButtonItem } from './SelectButtonItem';
@@ -10,6 +10,10 @@ export const SelectButton = React.memo(
const elementRef = React.useRef(null);
+ const { ptm } = SelectButtonBase.setMetaData({
+ props
+ });
+
const onOptionClick = (event) => {
if (props.disabled || isOptionDisabled(event.option)) {
return;
@@ -90,7 +94,7 @@ export const SelectButton = React.memo(
const selected = isSelected(option);
const key = optionLabel + '_' + index;
- return
- {items}
-
- {hasTooltip && {items}
+ {hasTooltip && {props.label} ;
+ const labelProps = mergeProps(
+ {
+ className: 'p-button-label p-c'
+ },
+ getPTOptions(props.option, 'label')
+ );
+
+ return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : {props.label} ;
};
const className = classNames(
@@ -46,8 +61,23 @@ export const SelectButtonItem = React.memo((props) => {
);
const content = createContent();
+ const buttonProps = mergeProps(
+ {
+ className: className,
+ role: 'button',
+ 'aria-label': props.label,
+ 'aria-pressed': props.selected,
+ onClick: onClick,
+ onKeyDown: onKeyDown,
+ tabIndex: props.tabIndex,
+ onFocus: onFocus,
+ onBlur: onBlur
+ },
+ getPTOptions(props.option, 'button')
+ );
+
return (
-
+
{content}
{!props.disabled &&
diff --git a/components/lib/selectbutton/selectbutton.d.ts b/components/lib/selectbutton/selectbutton.d.ts
index a83202826d..67bdade01b 100644
--- a/components/lib/selectbutton/selectbutton.d.ts
+++ b/components/lib/selectbutton/selectbutton.d.ts
@@ -9,8 +9,54 @@
*/
import * as React from 'react';
import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
import { TooltipOptions } from '../tooltip/tooltipoptions';
import { FormEvent } from '../ts-helpers';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SelectButtonPassThroughType
= PassThroughType;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SelectButtonPassThroughMethodOptions {
+ props: SelectButtonProps;
+ context: SelectButtonContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SelectButtonProps.pt}
+ */
+export interface SelectButtonPassThroughOptions {
+ /**
+ * Uses to pass attributes to the root's DOM element.
+ */
+ root?: SelectButtonPassThroughType>;
+ /**
+ * Uses to pass attributes to the button's DOM element.
+ */
+ button?: SelectButtonPassThroughType>;
+ /**
+ * Uses to pass attributes to the label's DOM element.
+ */
+ label?: SelectButtonPassThroughType>;
+ /**
+ * Uses to pass attributes tooltip's DOM element.
+ * @type {TooltipPassThroughOptions}
+ */
+ tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current options in SelectButton component.
+ */
+export interface SelectButtonContext {
+ /**
+ * Current selected value.
+ */
+ selected: any;
+}
/**
* Custom change event.
@@ -24,7 +70,7 @@ interface SelectButtonChangeEvent extends FormEvent {}
* Defines valid properties in SelectButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
-export interface SelectButtonProps extends Omit, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref'> {
+export interface SelectButtonProps extends Omit, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref' | 'pt'> {
/**
* Value of the component.
*/
@@ -95,6 +141,11 @@ export interface SelectButtonProps extends Omit onDrag(event) });
const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', listener: (event) => onDragEnd(event) });
+ const { ptm } = SliderBase.setMetaData({
+ props
+ });
+
const spin = (event, dir) => {
const val = props.range ? value[handleIndex.current] : value;
const step = (props.step || 1) * dir;
@@ -189,22 +193,25 @@ export const Slider = React.memo(
'p-slider-handle-active': handleIndex.current === index
});
- return (
- onMouseDown(event, index)}
- onTouchStart={(event) => onTouchStart(event, index)}
- onKeyDown={(event) => onKeyDown(event, index)}
- aria-valuemin={props.min}
- aria-valuemax={props.max}
- aria-valuenow={leftValue || bottomValue}
- aria-orientation={props.orientation}
- {...ariaProps}
- >
+ const handleProps = mergeProps(
+ {
+ className: className,
+ style: style,
+ tabIndex: props.tabIndex,
+ role: 'slider',
+ onMouseDown: (event) => onMouseDown(event, index),
+ onTouchStart: (event) => onTouchStart(event, index),
+ onKeyDown: (event) => onKeyDown(event, index),
+ 'aria-valuemin': props.min,
+ 'aria-valuemax': props.max,
+ 'aria-valuenow': leftValue || bottomValue,
+ 'aria-orientation': props.orientation,
+ ...ariaProps
+ },
+ ptm('handle')
);
+
+ return
- {content}
-
+ const rootProps = mergeProps(
+ {
+ ref: elementRef,
+ id: props.id,
+ style: props.style,
+ className: className,
+ onClick: onBarClick
+ },
+ SliderBase.getOtherProps(props),
+ ptm('root')
);
+
+ return {content}
;
})
);
diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js
index 69a5b198c7..9d4fe75d42 100644
--- a/components/lib/slider/SliderBase.js
+++ b/components/lib/slider/SliderBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
-export const SliderBase = {
+export const SliderBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'Slider',
id: null,
@@ -17,7 +17,5 @@ export const SliderBase = {
onChange: null,
onSlideEnd: null,
children: undefined
- },
- getProps: (props) => ObjectUtils.getMergedProps(props, SliderBase.defaultProps),
- getOtherProps: (props) => ObjectUtils.getDiffProps(props, SliderBase.defaultProps)
-};
+ }
+});
diff --git a/components/lib/slider/slider.d.ts b/components/lib/slider/slider.d.ts
index 38f54970e7..c2420f2d9d 100644
--- a/components/lib/slider/slider.d.ts
+++ b/components/lib/slider/slider.d.ts
@@ -8,6 +8,34 @@
*
*/
import * as React from 'react';
+import { PassThroughType } from '../utils/utils';
+export declare type SliderPassThroughType = PassThroughType;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SliderPassThroughMethodOptions {
+ props: SliderProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SliderProps.pt}
+ */
+export interface SliderPassThroughOptions {
+ /**
+ * Uses to pass attributes to the root's DOM element.
+ */
+ root?: SliderPassThroughType>;
+ /**
+ * Uses to pass attributes to the range's DOM element.
+ */
+ range?: SliderPassThroughType>;
+ /**
+ * Uses to pass attributes to the handle's DOM element.
+ */
+ handle?: SliderPassThroughType>;
+}
/**
* Custom change event.
@@ -37,7 +65,7 @@ interface SliderSlideEndEvent extends SliderChangeEvent {}
* Defines valid properties in Slider component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
-export interface SliderProps extends Omit, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
+export interface SliderProps extends Omit, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> {
/**
* Value of the component.
* @defaultValue 0
@@ -92,6 +120,11 @@ export interface SliderProps extends Omit 0 && props.offLabel && props.offLabel.length > 0;
const hasIcon = props.onIcon && props.onIcon.length > 0 && props.offIcon && props.offIcon.length > 0;
const label = hasLabel ? (props.checked ? props.onLabel : props.offLabel) : ' ';
@@ -49,7 +52,14 @@ export const ToggleButton = React.memo(
'p-button-icon-right': props.iconPos === 'right' && label
});
- return IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+ const iconProps = mergeProps(
+ {
+ className: iconClassName
+ },
+ ptm('icon')
+ );
+
+ return IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
}
return null;
@@ -69,7 +79,6 @@ export const ToggleButton = React.memo(
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const tabIndex = props.disabled ? -1 : props.tabIndex;
- const otherProps = ToggleButtonBase.getOtherProps(props);
const className = classNames(
'p-button p-togglebutton p-component',
{
@@ -81,27 +90,48 @@ export const ToggleButton = React.memo(
);
const iconElement = createIcon();
+ const labelProps = mergeProps(
+ {
+ className: 'p-button-label'
+ },
+ ptm('label')
+ );
+
+ const tooltipProps = mergeProps(
+ {
+ target: elementRef,
+ content: props.tooltip,
+ ...props.tooltipOptions
+ },
+ ptm('tooltip')
+ );
+
+ const rootProps = mergeProps(
+ {
+ ref: elementRef,
+ id: props.id,
+ className: className,
+ style: props.style,
+ onClick: toggle,
+ onFocus: props.onFocus,
+ onBlur: props.onBlur,
+ onKeyDown: onKeyDown,
+ tabIndex: tabIndex,
+ role: 'button',
+ 'aria-pressed': props.checked
+ },
+ ToggleButtonBase.getOtherProps(props),
+ ptm('root')
+ );
+
return (
<>
-
+
{iconElement}
- {label}
+ {label}
- {hasTooltip &&
}
+ {hasTooltip &&
}
);
})
diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js
index 5fe668b87d..caf22a3760 100644
--- a/components/lib/togglebutton/ToggleButtonBase.js
+++ b/components/lib/togglebutton/ToggleButtonBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
-export const ToggleButtonBase = {
+export const ToggleButtonBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ToggleButton',
id: null,
@@ -19,7 +19,5 @@ export const ToggleButtonBase = {
onFocus: null,
onBlur: null,
children: undefined
- },
- getProps: (props) => ObjectUtils.getMergedProps(props, ToggleButtonBase.defaultProps),
- getOtherProps: (props) => ObjectUtils.getDiffProps(props, ToggleButtonBase.defaultProps)
-};
+ }
+});
diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts
index d57f0e5ace..0e155ebf8d 100644
--- a/components/lib/togglebutton/togglebutton.d.ts
+++ b/components/lib/togglebutton/togglebutton.d.ts
@@ -8,9 +8,42 @@
*
*/
import * as React from 'react';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
import { TooltipOptions } from '../tooltip/tooltipoptions';
-import { IconType } from '../utils';
+import { IconType, PassThroughType } from '../utils';
+export declare type ToggleButtonPassThroughType
= PassThroughType;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToggleButtonPassThroughMethodOptions {
+ props: ToggleButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToggleButtonProps.pt}
+ */
+export interface ToggleButtonPassThroughOptions {
+ /**
+ * Uses to pass attributes to the root's DOM element.
+ */
+ root?: ToggleButtonPassThroughType>;
+ /**
+ * Uses to pass attributes to the icon's DOM element.
+ */
+ icon?: ToggleButtonPassThroughType | React.HTMLAttributes>;
+ /**
+ * Uses to pass attributes to the label's DOM element.
+ */
+ label?: ToggleButtonPassThroughType>;
+ /**
+ * Uses to pass attributes tooltip's DOM element.
+ * @type {TooltipPassThroughOptions}
+ */
+ tooltip?: TooltipPassThroughOptions;
+}
/**
* Custom toggle button change target options
*/
@@ -61,7 +94,7 @@ interface ToggleButtonChangeEvent {
* Defines valid properties in ToggleButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
-export interface ToggleButtonProps extends Omit, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface ToggleButtonProps extends Omit, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
/**
* Specifies the on/off state of the button.
* @defaultValue false
@@ -118,6 +151,11 @@ export interface ToggleButtonProps extends Omit} event - Browser event.
*/
onFocus?(event: React.FocusEvent): void;
+ /**
+ * Uses to pass attributes to DOM elements inside the component.
+ * @type {ToggleButtonPassThroughOptions}
+ */
+ pt?: ToggleButtonPassThroughOptions;
}
/**
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index b65293e7b4..5b1a16bc84 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -4,7 +4,7 @@ import { useMountEffect } from '../hooks/Hooks';
import { CheckIcon } from '../icons/check';
import { TimesIcon } from '../icons/times';
import { Tooltip } from '../tooltip/Tooltip';
-import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
import { TriStateCheckboxBase } from './TriStateCheckboxBase';
export const TriStateCheckbox = React.memo(
@@ -14,6 +14,13 @@ export const TriStateCheckbox = React.memo(
const [focusedState, setFocusedState] = React.useState(false);
const elementRef = React.useRef(null);
+ const { ptm } = TriStateCheckboxBase.setMetaData({
+ props,
+ state: {
+ focused: focusedState
+ }
+ });
+
const onClick = (event) => {
if (!props.disabled && !props.readOnly) {
toggle(event);
@@ -83,32 +90,82 @@ export const TriStateCheckbox = React.memo(
'p-focus': focusedState
});
const iconClassName = 'p-checkbox-icon p-c';
+ const checkIconProps = mergeProps(
+ {
+ className: iconClassName
+ },
+ ptm('checkIcon')
+ );
+ const uncheckIconProps = mergeProps(
+ {
+ className: iconClassName
+ },
+ ptm('uncheckIcon')
+ );
+
let icon;
if (props.value === false) {
- icon = props.uncheckIcon ||
-
- {checkIcon}
-
- {focusedState && (
-
- {ariaValueLabel}
-
- )}
+
+
{checkIcon}
+ {focusedState &&
{ariaValueLabel} }
- {hasTooltip &&
}
+ {hasTooltip &&
}
);
})
diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
index f4b82d9b6c..27472b2952 100644
--- a/components/lib/tristatecheckbox/TriStateCheckboxBase.js
+++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
@@ -1,6 +1,6 @@
-import { ObjectUtils } from '../utils/Utils';
+import { ComponentBase } from '../componentbase/ComponentBase';
-export const TriStateCheckboxBase = {
+export const TriStateCheckboxBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'TriStateCheckbox',
autoFocus: false,
@@ -17,7 +17,5 @@ export const TriStateCheckboxBase = {
uncheckIcon: null,
value: null,
children: undefined
- },
- getProps: (props) => ObjectUtils.getMergedProps(props, TriStateCheckboxBase.defaultProps),
- getOtherProps: (props) => ObjectUtils.getDiffProps(props, TriStateCheckboxBase.defaultProps)
-};
+ }
+});
diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
index e92db98bad..c7118ba856 100644
--- a/components/lib/tristatecheckbox/tristatecheckbox.d.ts
+++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
@@ -8,9 +8,62 @@
*
*/
import * as React from 'react';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
import { TooltipOptions } from '../tooltip/tooltipoptions';
import { FormEvent } from '../ts-helpers';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TriStateCheckboxPassThroughType
= PassThroughType;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TriStateCheckboxPassThroughMethodOptions {
+ props: TriStateCheckboxProps;
+ state: TriStateCheckboxState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TriStateCheckboxProps.pt}
+ */
+export interface TriStateCheckboxPassThroughOptions {
+ /**
+ * Uses to pass attributes to the root's DOM element.
+ */
+ root?: TriStateCheckboxPassThroughType>;
+ /**
+ * Uses to pass attributes to the checkbox box's DOM element.
+ */
+ checkbox?: TriStateCheckboxPassThroughType>;
+ /**
+ * Uses to pass attributes tooltip's DOM element.
+ * @type {TooltipPassThroughOptions}
+ */
+ tooltip?: TooltipPassThroughOptions;
+ /**
+ * Uses to pass attributes to the check icon's DOM element.
+ */
+ checkIcon?: TriStateCheckboxPassThroughType | React.HTMLAttributes>;
+ /**
+ * Uses to pass attributes to the uncheck icon's DOM element.
+ */
+ uncheckIcon?: TriStateCheckboxPassThroughType | React.HTMLAttributes>;
+ /**
+ * Uses to pass attributes to the sr only aria's DOM element.
+ */
+ srOnlyAria?: TriStateCheckboxPassThroughType>;
+}
+
+/**
+ * Defines current inline state in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxState {
+ /**
+ * Focused state as a boolean.
+ */
+ focused: boolean;
+}
/**
* Custom change event.
@@ -70,6 +123,11 @@ export interface TriStateCheckboxProps extends Omit {
+ if (hideOverlaysOnDocumentScrolling) {
+ // nodeType 9 is for document element
+ scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9 ? window : node);
+ } else {
+ scrollableParents.push(node);
+ }
+ };
+
for (let parent of parents) {
let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
@@ -539,17 +548,22 @@ export default class DomHandler {
let el = this.findSingle(parent, selector);
if (el && overflowCheck(el)) {
- scrollableParents.push(el);
+ addScrollableParent(el);
}
}
}
if (parent.nodeType === 1 && overflowCheck(parent)) {
- scrollableParents.push(parent);
+ addScrollableParent(parent);
}
}
}
+ // if no parents make it the window
+ if (scrollableParents.length === 0) {
+ scrollableParents.push(window);
+ }
+
return scrollableParents;
}
diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
index bbc72a1d00..7dd48219fd 100644
--- a/components/lib/utils/utils.d.ts
+++ b/components/lib/utils/utils.d.ts
@@ -50,7 +50,7 @@ export declare class DomHandler {
static flipfitCollision(el: HTMLElement, target: HTMLElement, my?: string, at?: string, callback?: any): void;
static findCollisionPosition(position: string): void;
static getParents(el: HTMLElement, parents?: any[]): any[];
- static getScrollableParents(el: HTMLElement): any[];
+ static getScrollableParents(el: HTMLElement, hideOverlaysOnViewportChange?: boolean): any[];
static getHiddenElementOuterHeight(el: HTMLElement): number;
static getHiddenElementOuterWidth(el: HTMLElement): number;
static getHiddenElementDimensions(el: HTMLElement): { width?: number; height?: number };
diff --git a/data/news.json b/data/news.json
index 91ea0107d8..321f078fa4 100644
--- a/data/news.json
+++ b/data/news.json
@@ -1,8 +1,8 @@
{
- "id": 32,
- "content": "v9.4.0 is out!",
+ "id": 33,
+ "content": "v9.5.0 is out with new Pass Through feature!",
"linkText": "Learn More",
- "linkHref": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md#940-2023-05-12",
+ "linkHref": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md",
"backgroundStyle": "background-color:#07c4e8",
"textStyle": "color:#191919;font-weight:500",
"linkStyle": "color:#191919;font-weight:700",
diff --git a/package-lock.json b/package-lock.json
index d0fb36d031..34ed0ccfc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "primereact",
- "version": "9.5.0-SNAPSHOT",
+ "version": "9.6.0-SNAPSHOT",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "primereact",
- "version": "9.5.0-SNAPSHOT",
+ "version": "9.6.0-SNAPSHOT",
"dependencies": {
"@docsearch/react": "3.3.4",
"chart.js": "4.3.0",
diff --git a/package.json b/package.json
index 0df8cb6584..19ea7c8ccd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "primereact",
"private": false,
- "version": "9.5.0-SNAPSHOT",
+ "version": "9.6.0-SNAPSHOT",
"scripts": {
"dev": "next dev",
"start": "next start",
diff --git a/pages/configuration/index.js b/pages/configuration/index.js
index 12aa8809dd..6a16bfcde3 100644
--- a/pages/configuration/index.js
+++ b/pages/configuration/index.js
@@ -5,6 +5,7 @@ import { DocSections } from '../../components/doc/common/docsections';
import { AppendToDoc } from '../../components/doc/configuration/appendtodoc';
import { CSSTransitionDoc } from '../../components/doc/configuration/csstransitiondoc';
import { FilterMatchModeDoc } from '../../components/doc/configuration/filtermatchmodedoc';
+import { HideOverlaysDoc } from '../../components/doc/configuration/hideoverlaysdoc';
import { ImportDoc } from '../../components/doc/configuration/importdoc';
import { InputStyleDoc } from '../../components/doc/configuration/inputstyledoc';
import { LocaleDoc } from '../../components/doc/configuration/localedoc';
@@ -35,6 +36,11 @@ const InstallationPage = () => {
label: 'Filter Mode',
component: FilterMatchModeDoc
},
+ {
+ id: 'hideoverlays',
+ label: 'Hide Overlays on Viewport Change',
+ component: HideOverlaysDoc
+ },
{
id: 'inputstyle',
label: 'InputStyle',
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
index 0dfdcf9f0d..b0fe18ea0e 100644
--- a/pages/inputtext/index.js
+++ b/pages/inputtext/index.js
@@ -1,3 +1,6 @@
+import DocApiTable from '../../components/doc/common/docapitable';
+import { PTDoc } from '../../components/doc/inputtext/pt/ptdoc';
+import { Wireframe } from '../../components/doc/inputtext/pt/wireframe';
import React from 'react';
import { DocComponent } from '../../components/doc/common/doccomponent';
import { AccessibilityDoc } from '../../components/doc/inputtext/accessibilitydoc';
@@ -89,8 +92,25 @@ const InputTextDemo = () => {
component: AccessibilityDoc
}
];
+ const ptDocs = [
+ {
+ id: 'pt.wireframe',
+ label: 'Wireframe',
+ component: Wireframe
+ },
+ {
+ id: 'pt.inputtext.options',
+ label: 'InputText PT Options',
+ component: DocApiTable
+ },
+ {
+ id: 'pt.demo',
+ label: 'Example',
+ component: PTDoc
+ }
+ ];
- return 
@@ -690,7 +713,7 @@ export default function AdvancedFilterDemo() {
};
const dateBodyTemplate = (rowData: Customer) => {
- return formatDate(rowData.date);
+ return formatDate(new Date(rowData.date));
};
const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
@@ -702,7 +725,7 @@ export default function AdvancedFilterDemo() {
};
const balanceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
- return 
+