+
{ObjectUtils.isEmpty(v) ? 'null' : createContent(v, k === 'name', d['deprecated'])}
) : k === 'type' ? (
{createContent(v, k === 'name', d['deprecated'])}
) : k === 'returnType' ? (
-
+
diff --git a/components/doc/dialog/theming/styleddoc.js b/components/doc/dialog/theming/styleddoc.js
index 379242eb0e..a505b64293 100644
--- a/components/doc/dialog/theming/styleddoc.js
+++ b/components/doc/dialog/theming/styleddoc.js
@@ -20,7 +20,7 @@ export function StyledDoc(props) {
Container element.
- p-dialog-titlebar
+ p-dialog-header
Container of header.
@@ -28,13 +28,17 @@ export function StyledDoc(props) {
Header element.
- p-dialog-titlebar-icon
+ p-dialog-header-icons
Icon container inside header.
- p-dialog-titlebar-close
+ p-dialog-header-close
Close icon element.
+
+ p-dialog-header-maximize
+ Maximize icon element.
+
p-dialog-content
Content element
diff --git a/components/doc/dropdown/checkmarkdoc.js b/components/doc/dropdown/checkmarkdoc.js
new file mode 100644
index 0000000000..0543626b24
--- /dev/null
+++ b/components/doc/dropdown/checkmarkdoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function CheckmarkDoc(props) {
+ const [selectedCity, setSelectedCity] = useState(null);
+ const cities = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ const code = {
+ basic: `
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+ `,
+ javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function CheckmarkDemo() {
+ const [selectedCity, setSelectedCity] = useState(null);
+ const cities = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ return (
+ (null);
+ const cities: City[] = [
+ { name: 'New York', code: 'NY' },
+ { name: 'Rome', code: 'RM' },
+ { name: 'London', code: 'LDN' },
+ { name: 'Istanbul', code: 'IST' },
+ { name: 'Paris', code: 'PRS' }
+ ];
+
+ return (
+
+
+
+
+ );
+}
diff --git a/components/doc/metergroup/basicdoc.js b/components/doc/metergroup/basicdoc.js
new file mode 100644
index 0000000000..c6052ad59a
--- /dev/null
+++ b/components/doc/metergroup/basicdoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function BasicDoc(props) {
+ const code = {
+ basic: `
+
+
+
+
+
+
+
+
+
+
+ ({
+ className: context.active ? 'bg-primary-200 border-round-sm' : undefined
+ })
+ }}
+/>
+`,
+ javascript: `
+import React from 'react';
+import { Menubar } from 'primereact/menubar';
+
+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'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ label: 'Quit',
+ icon: 'pi pi-fw pi-power-off'
+ }
+ ];
+
+ return (
+
+
+
+
+
+
+ ([
+ const [data] = useState([
{
label: 'Argentina',
expanded: true,
diff --git a/components/doc/organizationchart/pt/ptdoc.js b/components/doc/organizationchart/pt/ptdoc.js
index f6cd6ce570..3d13edc645 100644
--- a/components/doc/organizationchart/pt/ptdoc.js
+++ b/components/doc/organizationchart/pt/ptdoc.js
@@ -115,7 +115,7 @@ import { TreeNode } from 'primereact/treenode';
export default function PTDemo() {
const [selection, setSelection] = useState([]);
- const [data] = useState([
+ const [data] = useState([
{
label: 'Argentina',
expanded: true,
diff --git a/components/doc/organizationchart/templatedoc.js b/components/doc/organizationchart/templatedoc.js
index 08b3b25b97..a13e629aa7 100644
--- a/components/doc/organizationchart/templatedoc.js
+++ b/components/doc/organizationchart/templatedoc.js
@@ -124,7 +124,7 @@ import { OrganizationChart } from 'primereact/organizationchart';
import { TreeNode } from 'primereact/treenode';
export default function TemplateDemo() {
- const [data] = useState([
+ const [data] = useState([
{
label: 'Argentina',
expanded: true,
diff --git a/components/doc/panel/theming/styleddoc.js b/components/doc/panel/theming/styleddoc.js
index e889852744..9cf0b7e263 100644
--- a/components/doc/panel/theming/styleddoc.js
+++ b/components/doc/panel/theming/styleddoc.js
@@ -20,7 +20,7 @@ export function StyledDoc(props) {
Container element.
- p-panel-titlebar
+ p-panel-header
Header section.
@@ -28,7 +28,7 @@ export function StyledDoc(props) {
Title text of panel.
- p-panel-titlebar-toggler
+ p-panel-toggler
Toggle icon.
diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
index 56d6d9b367..70a7522f80 100644
--- a/components/doc/sidebar/headlessdoc.js
+++ b/components/doc/sidebar/headlessdoc.js
@@ -1,11 +1,11 @@
import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Sidebar } from '@/components/lib/sidebar/Sidebar';
import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Button } from '@/components/lib/button/Button';
import { Ripple } from '@/components/lib/ripple/Ripple';
-import { useState, useRef } from 'react';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
import { StyleClass } from '@/components/lib/styleclass/StyleClass';
+import { useRef, useState } from 'react';
export function HeadlessDoc(props) {
const [visible, setVisible] = useState(false);
@@ -207,7 +207,6 @@ export default function HeadlessDemo() {
const btnRef2 = useRef(null);
const btnRef3 = useRef(null);
const btnRef4 = useRef(null);
- const [visible, setVisible] = useState(false);
return (
Prime React} icon="pi pi-prime" model={items} />
+Prime React} icon="pi pi-prime" model={items} severity="contrast" />
`,
javascript: `
import React, { useRef } from 'react';
@@ -87,7 +87,7 @@ export default function TemplateDemo() {
return (
Prime React} icon="pi pi-prime" model={items} />
+ Prime React} icon="pi pi-prime" model={items} severity="contrast" />
)
}
@@ -136,7 +136,7 @@ export default function TemplateDemo() {
return (
Prime React} icon="pi pi-prime" model={items} />
+ Prime React} icon="pi pi-prime" model={items} severity="contrast" />
)
}
@@ -152,7 +152,7 @@ export default function TemplateDemo() {
Prime React} icon="pi pi-prime" model={items} />
+ Prime React} icon="pi pi-prime" model={items} severity="contrast" />
- { item.image && 
}
+ { item.image && }
([]);
+ const [nodes, setNodes] = useState([]);
const [expandedKeys, setExpandedKeys] = useState(null);
- const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+ const [selectedNodeKey, setSelectedNodeKey] = useState(null);
const toast = useRef(null);
const cm = useRef(null);
const menu = [
diff --git a/components/doc/treetable/filterdoc.js b/components/doc/treetable/filterdoc.js
index 9d23d38b2d..4108534b1a 100644
--- a/components/doc/treetable/filterdoc.js
+++ b/components/doc/treetable/filterdoc.js
@@ -106,9 +106,9 @@ interface FilterModeOption {
}
export default function FilterDemo() {
- const [nodes, setNodes] = useState([]);
+ const [nodes, setNodes] = useState([]);
const [globalFilter, setGlobalFilter] = useState('');
- const [filterMode, setFilterMode] = useState('lenient');
+ const [filterMode, setFilterMode] = useState<'lenient' | 'strict'>('lenient');
const [filterOptions] = useState([
{ label: 'Lenient', value: 'lenient' },
{ label: 'Strict', value: 'strict' }
diff --git a/components/doc/treetable/scroll/frozencolumnsdoc.js b/components/doc/treetable/scroll/frozencolumnsdoc.js
index 68f36c1207..f02d898bd0 100644
--- a/components/doc/treetable/scroll/frozencolumnsdoc.js
+++ b/components/doc/treetable/scroll/frozencolumnsdoc.js
@@ -60,7 +60,7 @@ import { TreeNode } from 'primereact/treenode';
import { NodeService } from './service/NodeService';
export default function FrozenColumnsDemo() {
- const [nodes, setNodes] = useState([]);
+ const [nodes, setNodes] = useState([]);
useEffect(() => {
NodeService.getTreeTableNodes().then(data => setNodes(data));
diff --git a/components/doc/treetable/scroll/verticaldoc.js b/components/doc/treetable/scroll/verticaldoc.js
index 7a45e532d0..e20e8f350b 100644
--- a/components/doc/treetable/scroll/verticaldoc.js
+++ b/components/doc/treetable/scroll/verticaldoc.js
@@ -52,7 +52,7 @@ import { TreeNode } from 'primereact/treenode';
import { NodeService } from './service/NodeService';
export default function VerticalScrollDemo() {
- const [nodes, setNodes] = useState([]);
+ const [nodes, setNodes] = useState([]);
useEffect(() => {
NodeService.getTreeTableNodes().then(data => setNodes(data));
diff --git a/components/doc/treetable/selection/multipledoc.js b/components/doc/treetable/selection/multipledoc.js
index 5575c0ddfe..b19b6924c9 100644
--- a/components/doc/treetable/selection/multipledoc.js
+++ b/components/doc/treetable/selection/multipledoc.js
@@ -75,7 +75,7 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
import { NodeService } from './service/NodeService';
export default function MultipleRowsSelectionDemo() {
- const [nodes, setNodes] = useState([]);
+ const [nodes, setNodes] = useState([]);
const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
const [metaKey, setMetaKey] = useState(true);
diff --git a/components/doc/treetable/selection/singledoc.js b/components/doc/treetable/selection/singledoc.js
index 80c63330bd..eb3878ea93 100644
--- a/components/doc/treetable/selection/singledoc.js
+++ b/components/doc/treetable/selection/singledoc.js
@@ -66,7 +66,7 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
import { NodeService } from './service/NodeService';
export default function SingleRowSelectionDemo() {
- const [nodes, setNodes] = useState([]);
+ const [nodes, setNodes] = useState([]);
const [selectedNodeKey, setSelectedNodeKey] = useState(null);
const [metaKey, setMetaKey] = useState(true);
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
index aa87304549..18a20cdddc 100644
--- a/components/lib/api/Locale.js
+++ b/components/lib/api/Locale.js
@@ -2,127 +2,127 @@ import PrimeReact from './PrimeReact';
let locales = {
en: {
- startsWith: 'Starts with',
+ accept: 'Yes',
+ addRule: 'Add Rule',
+ am: 'AM',
+ apply: 'Apply',
+ cancel: 'Cancel',
+ choose: 'Choose',
+ chooseDate: 'Choose Date',
+ chooseMonth: 'Choose Month',
+ chooseYear: 'Choose Year',
+ clear: 'Clear',
+ completed: 'Completed',
contains: 'Contains',
- notContains: 'Not contains',
+ custom: 'Custom',
+ dateAfter: 'Date is after',
+ dateBefore: 'Date is before',
+ dateFormat: 'mm/dd/yy',
+ dateIs: 'Date is',
+ dateIsNot: 'Date is not',
+ dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+ dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+ dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+ emptyFilterMessage: 'No results found',
+ emptyMessage: 'No available options',
+ emptySearchMessage: 'No results found',
+ emptySelectionMessage: 'No selected item',
endsWith: 'Ends with',
equals: 'Equals',
- notEquals: 'Not equals',
- noFilter: 'No Filter',
+ fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
filter: 'Filter',
- lt: 'Less than',
- lte: 'Less than or equal to',
+ firstDayOfWeek: 0,
gt: 'Greater than',
gte: 'Greater than or equal to',
- dateIs: 'Date is',
- dateIsNot: 'Date is not',
- dateBefore: 'Date is before',
- dateAfter: 'Date is after',
- custom: 'Custom',
- clear: 'Clear',
- close: 'Close',
- apply: 'Apply',
+ lt: 'Less than',
+ lte: 'Less than or equal to',
matchAll: 'Match All',
matchAny: 'Match Any',
- addRule: 'Add Rule',
- removeRule: 'Remove Rule',
- accept: 'Yes',
- reject: 'No',
- choose: 'Choose',
- upload: 'Upload',
- cancel: 'Cancel',
- completed: 'Completed',
- pending: 'Pending',
- fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
- dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
- dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
- dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+ medium: 'Medium',
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
- chooseYear: 'Choose Year',
- chooseMonth: 'Choose Month',
- chooseDate: 'Choose Date',
- prevDecade: 'Previous Decade',
nextDecade: 'Next Decade',
- prevYear: 'Previous Year',
- nextYear: 'Next Year',
- prevMonth: 'Previous Month',
- nextMonth: 'Next Month',
- prevHour: 'Previous Hour',
nextHour: 'Next Hour',
- prevMinute: 'Previous Minute',
nextMinute: 'Next Minute',
- prevSecond: 'Previous Second',
+ nextMonth: 'Next Month',
nextSecond: 'Next Second',
- prevMilliSecond: 'Previous Second',
- nextMilliSecond: 'Next Second',
- am: 'am',
- pm: 'pm',
- today: 'Today',
+ nextYear: 'Next Year',
+ noFilter: 'No Filter',
+ notContains: 'Not contains',
+ notEquals: 'Not equals',
now: 'Now',
- weekHeader: 'Wk',
- firstDayOfWeek: 0,
+ passwordPrompt: 'Enter a password',
+ pending: 'Pending',
+ pm: 'PM',
+ prevDecade: 'Previous Decade',
+ prevHour: 'Previous Hour',
+ prevMinute: 'Previous Minute',
+ prevMonth: 'Previous Month',
+ prevSecond: 'Previous Second',
+ prevYear: 'Previous Year',
+ reject: 'No',
+ removeRule: 'Remove Rule',
+ searchMessage: '{0} results are available',
+ selectionMessage: '{0} items selected',
showMonthAfterYear: false,
- dateFormat: 'mm/dd/yy',
- weak: 'Weak',
- medium: 'Medium',
+ startsWith: 'Starts with',
strong: 'Strong',
- passwordPrompt: 'Enter a password',
- emptyFilterMessage: 'No available options',
- emptyMessage: 'No results found',
+ today: 'Today',
+ upload: 'Upload',
+ weak: 'Weak',
+ weekHeader: 'Wk',
aria: {
- trueLabel: 'True',
- falseLabel: 'False',
- nullLabel: 'Not Selected',
- star: '1 star',
- stars: '{star} stars',
- selectAll: 'All items selected',
- unselectAll: 'All items unselected',
+ cancelEdit: 'Cancel Edit',
close: 'Close',
- previous: 'Previous',
- next: 'Next',
- navigation: 'Navigation',
- scrollTop: 'Scroll Top',
- moveTop: 'Move Top',
- moveUp: 'Move Up',
- moveDown: 'Move Down',
- moveBottom: 'Move Bottom',
- moveToTarget: 'Move to Target',
- moveToSource: 'Move to Source',
- moveAllToTarget: 'Move All to Target',
- moveAllToSource: 'Move All to Source',
- pageLabel: 'Page {page}',
+ collapseRow: 'Row Collapsed',
+ editRow: 'Edit Row',
+ expandRow: 'Row Expanded',
+ falseLabel: 'False',
+ filterConstraint: 'Filter Constraint',
+ filterOperator: 'Filter Operator',
firstPageLabel: 'First Page',
+ gridView: 'Grid View',
+ hideFilterMenu: 'Hide Filter Menu',
+ jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+ jumpToPageInputLabel: 'Jump to Page Input',
lastPageLabel: 'Last Page',
+ listView: 'List View',
+ moveAllToSource: 'Move All to Source',
+ moveAllToTarget: 'Move All to Target',
+ moveBottom: 'Move Bottom',
+ moveDown: 'Move Down',
+ moveToSource: 'Move to Source',
+ moveToTarget: 'Move to Target',
+ moveTop: 'Move Top',
+ moveUp: 'Move Up',
+ navigation: 'Navigation',
+ next: 'Next',
nextPageLabel: 'Next Page',
+ nullLabel: 'Not Selected',
+ pageLabel: 'Page {page}',
+ otpLabel: 'Please enter one time password character {0}',
+ passwordHide: 'Hide Password',
+ passwordShow: 'Show Password',
+ previous: 'Previous',
previousPageLabel: 'Previous Page',
+ rotateLeft: 'Rotate Left',
+ rotateRight: 'Rotate Right',
rowsPerPageLabel: 'Rows per page',
- jumpToPageDropdownLabel: 'Jump to Page Dropdown',
- jumpToPageInputLabel: 'Jump to Page Input',
+ saveEdit: 'Save Edit',
+ scrollTop: 'Scroll Top',
+ selectAll: 'All items selected',
selectRow: 'Row Selected',
- unselectRow: 'Row Unselected',
- expandRow: 'Row Expanded',
- collapseRow: 'Row Collapsed',
showFilterMenu: 'Show Filter Menu',
- hideFilterMenu: 'Hide Filter Menu',
- filterOperator: 'Filter Operator',
- filterConstraint: 'Filter Constraint',
- editRow: 'Row Edit',
- saveEdit: 'Save Edit',
- cancelEdit: 'Cancel Edit',
- listView: 'List View',
- gridView: 'Grid View',
slide: 'Slide',
slideNumber: '{slideNumber}',
+ star: '1 star',
+ stars: '{star} stars',
+ trueLabel: 'True',
+ unselectAll: 'All items unselected',
+ unselectRow: 'Row Unselected',
zoomImage: 'Zoom Image',
zoomIn: 'Zoom In',
- zoomOut: 'Zoom Out',
- rotateRight: 'Rotate Right',
- rotateLeft: 'Rotate Left',
- selectLabel: 'Select',
- unselectLabel: 'Unselect',
- expandLabel: 'Expand',
- collapseLabel: 'Collapse'
+ zoomOut: 'Zoom Out'
}
}
};
diff --git a/components/lib/api/MessageSeverity.js b/components/lib/api/MessageSeverity.js
index f1464582b6..6a7ee1b5a4 100644
--- a/components/lib/api/MessageSeverity.js
+++ b/components/lib/api/MessageSeverity.js
@@ -2,5 +2,7 @@ export const MessageSeverity = Object.freeze({
SUCCESS: 'success',
INFO: 'info',
WARN: 'warn',
- ERROR: 'error'
+ ERROR: 'error',
+ SECONDARY: 'secondary',
+ CONTRAST: 'contrast'
});
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 08ad342616..0ae2a96a39 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -870,6 +870,74 @@ export interface LocaleOptions {
* ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
*/
monthNamesShort?: string[];
+ /**
+ * Choose Year
+ */
+ chooseYear?: string;
+ /**
+ * Choose Month
+ */
+ chooseMonth?: string;
+ /**
+ * Choose Date
+ */
+ chooseDate?: string;
+ /**
+ * Previous Decade
+ */
+ prevDecade?: string;
+ /**
+ * Next Decade
+ */
+ nextDecade?: string;
+ /**
+ * Previous Year
+ */
+ prevYear?: string;
+ /**
+ * Next Year
+ */
+ nextYear?: string;
+ /**
+ * Previous Month
+ */
+ prevMonth?: string;
+ /**
+ * Next Month
+ */
+ nextMonth?: string;
+ /**
+ * Previous Hour
+ */
+ prevHour?: string;
+ /**
+ * Next Hour
+ */
+ nextHour?: string;
+ /**
+ * Previous Minute
+ */
+ prevMinute?: string;
+ /**
+ * Next Minute
+ */
+ nextMinute?: string;
+ /**
+ * Previous Second
+ */
+ prevSecond?: string;
+ /**
+ * Next Second
+ */
+ nextSecond?: string;
+ /**
+ * AM
+ */
+ am?: string;
+ /**
+ * PM
+ */
+ pm?: string;
/**
* Today (Calendar date only)
*/
@@ -915,7 +983,7 @@ export interface LocaleOptions {
*/
emptyMessage?: string;
/**
- * True
+ * ARIA labels
*/
aria?: {
/**
@@ -931,9 +999,81 @@ export interface LocaleOptions {
*/
nullLabel?: string;
/**
- * Page
+ * 1 star
+ */
+ star?: string;
+ /**
+ * {star} stars
+ */
+ stars?: string;
+ /**
+ * All items selected
+ */
+ selectAll?: string;
+ /**
+ * All items unselected
+ */
+ unselectAll?: string;
+ /**
+ * Close
+ */
+ close?: string;
+ /**
+ * Previous
+ */
+ previous?: string;
+ /**
+ * Next
+ */
+ next?: string;
+ /**
+ * Navigation
+ */
+ navigation?: string;
+ /**
+ * Scroll Top
+ */
+ scrollTop?: string;
+ /**
+ * Move Top
+ */
+ moveTop?: string;
+ /**
+ * Move Up
+ */
+ moveUp?: string;
+ /**
+ * Move Down
+ */
+ moveDown?: string;
+ /**
+ * Move Bottom
+ */
+ moveBottom?: string;
+ /**
+ * Move to Target
+ */
+ moveToTarget?: string;
+ /**
+ * Move to Source
+ */
+ moveToSource?: string;
+ /**
+ * Move All to Target
+ */
+ moveAllToTarget?: string;
+ /**
+ * Move All to Source
+ */
+ moveAllToSource?: string;
+ /**
+ * Page {page}
*/
pageLabel?: string;
+ /**
+ * Please enter one time password character {0}
+ */
+ otpLabel?: string;
/**
* First Page
*/
@@ -951,21 +1091,97 @@ export interface LocaleOptions {
*/
previousPageLabel?: string;
/**
- * Select
+ * Rows per page
+ */
+ rowsPerPageLabel?: string;
+ /**
+ * Jump to Page Dropdown
+ */
+ jumpToPageDropdownLabel?: string;
+ /**
+ * Jump to Page Input
+ */
+ jumpToPageInputLabel?: string;
+ /**
+ * Row Selected
+ */
+ selectRow?: string;
+ /**
+ * Row Unselected
+ */
+ unselectRow?: string;
+ /**
+ * Row Expanded
+ */
+ expandRow?: string;
+ /**
+ * Row Collapsed
+ */
+ collapseRow?: string;
+ /**
+ * Show Filter Menu
+ */
+ showFilterMenu?: string;
+ /**
+ * Hide Filter Menu
+ */
+ hideFilterMenu?: string;
+ /**
+ * Filter Operator
+ */
+ filterOperator?: string;
+ /**
+ * Filter Constraint
+ */
+ filterConstraint?: string;
+ /**
+ * Edit Row
+ */
+ editRow?: string;
+ /**
+ * Save Edit
+ */
+ saveEdit?: string;
+ /**
+ * Cancel Edit
+ */
+ cancelEdit?: string;
+ /**
+ * List View
+ */
+ listView?: string;
+ /**
+ * Grid View
+ */
+ gridView?: string;
+ /**
+ * Slide
+ */
+ slide?: string;
+ /**
+ * {slideNumber}
+ */
+ slideNumber?: string;
+ /**
+ * Zoom Image
+ */
+ zoomImage?: string;
+ /**
+ * Zoom In
*/
- selectLabel?: string;
+ zoomIn?: string;
/**
- * Unselect
+ * Zoom Out
*/
- unselectLabel?: string;
+ zoomOut?: string;
/**
- * Expand
+ * Rotate Right
*/
- expandLabel?: string;
+ rotateRight?: string;
/**
- * Collapse
+ * Rotate Left
*/
- collapseLabel?: string;
+ rotateLeft?: string;
};
}
@@ -1216,7 +1432,9 @@ export declare enum MessageSeverity {
SUCCESS = 'success',
INFO = 'info',
WARN = 'warn',
- ERROR = 'error'
+ ERROR = 'error',
+ SECONDARY = 'secondary',
+ CONTRAST = 'contrast'
}
// Filter
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
index f27b744df7..779a77b155 100644
--- a/components/lib/autocomplete/AutoComplete.js
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -134,7 +134,7 @@ export const AutoComplete = React.memo(
const updateModel = (event, value) => {
// #2176 only call change if value actually changed
- if (selectedItem && ObjectUtils.deepEquals(selectedItem.current, value)) {
+ if (selectedItem.current && ObjectUtils.deepEquals(selectedItem.current, value)) {
return;
}
@@ -607,6 +607,8 @@ export const AutoComplete = React.memo(
});
}
+ selectedItem.current = null;
+
return null;
};
diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
index 1a47a9d608..4235241dd4 100644
--- a/components/lib/autocomplete/AutoCompleteBase.js
+++ b/components/lib/autocomplete/AutoCompleteBase.js
@@ -8,6 +8,7 @@ const classes = {
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.value,
+ 'p-invalid': props.invalid,
'p-inputwrapper-focus': focusedState
}),
container: ({ props }) =>
@@ -165,6 +166,7 @@ export const AutoCompleteBase = ComponentBase.extend({
inputId: null,
inputRef: null,
inputStyle: null,
+ invalid: false,
itemTemplate: null,
loadingIcon: null,
maxLength: null,
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index da565f89f4..8322f651e9 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -227,7 +227,7 @@ export interface AutoCompleteContext {
* Defines valid properties in AutoComplete component. In addition to these, all properties of HTMLSpanElement can be used in this component.
* @group Properties
*/
-export interface AutoCompleteProps extends Omit, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> {
+export interface AutoCompleteProps extends Omit, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> {
/**
* Unique identifier of the element.
*/
@@ -256,6 +256,11 @@ export interface AutoCompleteProps extends Omit {
diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js
index 1ca0ea7da3..5ce0dd57e0 100644
--- a/components/lib/calendar/CalendarBase.js
+++ b/components/lib/calendar/CalendarBase.js
@@ -180,6 +180,7 @@ const classes = {
classNames('p-calendar p-component p-inputwrapper', {
[`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon,
'p-calendar-disabled': props.disabled,
+ 'p-invalid': props.invalid,
'p-calendar-timeonly': props.timeOnly,
'p-inputwrapper-filled': props.value || isFilled,
'p-inputwrapper-focus': focusedState,
@@ -261,6 +262,7 @@ export const CalendarBase = ComponentBase.extend({
inputMode: 'none',
inputRef: null,
inputStyle: null,
+ invalid: false,
keepInvalid: false,
locale: null,
mask: null,
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index e6be7fbb79..7084a2811b 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -565,6 +565,11 @@ interface CalendarBaseProps {
* Icon to show in each of the decrement buttons.
*/
decrementIcon?: IconType | undefined;
+ /**
+ * When present, it specifies that the component should have invalid state style.
+ * @defaultValue false
+ */
+ invalid?: boolean | undefined;
/**
* When specified, disables the component.
* @defaultValue false
diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
index c23d22c390..0a90ae7803 100644
--- a/components/lib/cascadeselect/CascadeSelectBase.js
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -8,6 +8,7 @@ const classes = {
'p-cascadeselect p-component p-inputwrapper',
{
'p-disabled': props.disabled,
+ 'p-invalid': props.invalid,
'p-focus': focusedState,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -149,6 +150,7 @@ export const CascadeSelectBase = ComponentBase.extend({
id: null,
inputId: null,
inputRef: null,
+ invalid: false,
itemTemplate: null,
name: null,
onBeforeHide: null,
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
index 373ea08edb..87187f16e5 100644
--- a/components/lib/cascadeselect/cascadeselect.d.ts
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -227,6 +227,11 @@ export interface CascadeSelectProps extends Omit React.ReactNode) | undefined;
+ /**
+ * When present, it specifies that the component should have invalid state style.
+ * @defaultValue false
+ */
+ invalid?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
index cb818642b2..bbc98352d2 100644
--- a/components/lib/checkbox/Checkbox.js
+++ b/components/lib/checkbox/Checkbox.js
@@ -12,32 +12,30 @@ export const Checkbox = React.memo(
const mergeProps = useMergeProps();
const context = React.useContext(PrimeReactContext);
const props = CheckboxBase.getProps(inProps, context);
- const [focusedState, setFocusedState] = React.useState(false);
const { ptm, cx, isUnstyled } = CheckboxBase.setMetaData({
props,
- state: {
- focused: focusedState
- },
context: {
checked: props.checked === props.trueValue,
disabled: props.disabled
}
});
- useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox', styled: true });
+ useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox' });
+
const elementRef = React.useRef(null);
const inputRef = React.useRef(props.inputRef);
- const onClick = (event) => {
- if (props.disabled || props.readOnly) {
+ const isChecked = () => {
+ return props.checked === props.trueValue;
+ };
+
+ const onChange = (event) => {
+ if (props.disabled || props.readonly) {
return;
}
- if (props.onChange || props.onClick) {
+ if (props.onChange) {
const checked = isChecked();
- const checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object;
- const isInputToggled = event.target === inputRef.current;
- const isCheckboxToggled = checkboxClicked && event.target.checked !== checked;
const value = checked ? props.falseValue : props.trueValue;
const eventData = {
originalEvent: event,
@@ -58,39 +56,23 @@ export const Checkbox = React.memo(
}
};
- props.onClick && props.onClick(eventData);
+ props.onChange && props.onChange(eventData);
// do not continue if the user defined click wants to prevent
if (event.defaultPrevented) {
return;
}
- if (isInputToggled || isCheckboxToggled) {
- props.onChange && props.onChange(eventData);
- }
-
DomHandler.focus(inputRef.current);
- event.preventDefault();
}
};
const onFocus = () => {
- setFocusedState(true);
+ props?.onFocus?.();
};
const onBlur = () => {
- setFocusedState(false);
- };
-
- const onKeyDown = (event) => {
- if (event.code === 'Space' || event.key === ' ') {
- // event.key is for Android support
- onClick(event);
- }
- };
-
- const isChecked = () => {
- return props.checked === props.trueValue;
+ props?.onBlur?.();
};
React.useImperativeHandle(ref, () => ({
@@ -117,21 +99,11 @@ export const Checkbox = React.memo(
const checked = isChecked();
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const otherProps = CheckboxBase.getOtherProps(props);
- const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
- const iconProps = mergeProps(
- {
- className: cx('icon')
- },
- ptm('icon')
- );
- const icon = checked ? props.icon || = PassThroughType>;
+ /**
+ * Used to pass attributes to the box's DOM element.
+ */
+ box?: CheckboxPassThroughType>;
/**
* Uses to pass attributes to the icon's DOM element.
*/
@@ -48,14 +51,6 @@ export interface CheckboxPassThroughOptions {
* @type {TooltipPassThroughOptions}
*/
tooltip?: TooltipPassThroughOptions;
- /**
- * Uses to pass attributes to the hidden input wrapper's DOM element.
- */
- hiddenInputWrapper?: CheckboxPassThroughType>;
- /**
- * Uses to pass attributes to the hidden input's DOM element.
- */
- hiddenInput?: CheckboxPassThroughType>;
/**
* Used to manage all lifecycle hooks
* @see {@link ComponentHooks}
@@ -79,17 +74,6 @@ export interface CheckboxContext {
disabled: boolean;
}
-/**
- * Defines current inline state in Checkbox component.
- */
-export interface CheckboxState {
- /**
- * Current focus state as a boolean.
- * @defaultValue false
- */
- focused: boolean;
-}
-
/**
* Custom change event.
* @see {@link CheckboxProps.onChange}
@@ -98,19 +82,11 @@ export interface CheckboxState {
*/
interface CheckboxChangeEvent extends FormEvent {}
-/**
- * Custom click event.
- * @see {@link CheckboxProps.onClick}
- * @extends {FormEvent }
- * @event
- */
-interface CheckboxClickEvent extends FormEvent {}
-
/**
* Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
* @group Properties
*/
-export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> {
+export interface CheckboxProps extends Omit, HTMLDivElement>, 'onChange' | 'ref'> {
/**
* Unique identifier of the element.
*/
@@ -159,6 +135,11 @@ export interface CheckboxProps extends Omit} event - Browser event
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index fd30a19533..5b200cd1b8 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -155,7 +155,7 @@ export const Chips = React.memo(
return;
}
- switch (event.code) {
+ switch (event.key) {
case 'Backspace':
if (inputValue.length === 0 && values.length > 0) {
removeItem(event, values.length - 1);
@@ -164,7 +164,6 @@ export const Chips = React.memo(
break;
case 'Enter':
- case 'NumpadEnter':
if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
addItem(event, inputValue, true);
}
@@ -189,11 +188,6 @@ export const Chips = React.memo(
if (isMaxedOut()) {
event.preventDefault();
- } else if (props.separator === ',') {
- // GitHub #3885 Android Opera gives strange code 229 for comma
- if (event.key === props.separator || (DomHandler.isAndroid() && event.which === 229)) {
- addItem(event, inputValue, true);
- }
}
break;
@@ -223,6 +217,22 @@ export const Chips = React.memo(
preventDefault && event.preventDefault();
};
+ const onChange = (event) => {
+ const value = event.target.value?.trim();
+
+ if (value === props.separator) {
+ inputRef.current.value = '';
+
+ return;
+ }
+
+ if (props.separator && value.endsWith(props.separator)) {
+ const trimmedValue = value.slice(0, -1);
+
+ addItem(event, trimmedValue);
+ }
+ };
+
const onPaste = (event) => {
if (props.separator) {
let separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
@@ -372,9 +382,11 @@ export const Chips = React.memo(
ref: inputRef,
placeholder: props.placeholder,
type: 'text',
+ enterKeyHint: 'enter',
name: props.name,
disabled: props.disabled || isMaxedOut(),
onKeyDown: (e) => onKeyDown(e),
+ onChange: (e) => onChange(e),
onPaste: (e) => onPaste(e),
onFocus: (e) => onFocus(e),
onBlur: (e) => onBlur(e),
diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js
index 0da86e425e..cf06fe1f18 100644
--- a/components/lib/chips/ChipsBase.js
+++ b/components/lib/chips/ChipsBase.js
@@ -88,6 +88,7 @@ const classes = {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState,
'p-disabled': disabled,
+ 'p-invalid': props.invalid,
'p-focus': focusedState
})
};
@@ -104,6 +105,7 @@ export const ChipsBase = ComponentBase.extend({
id: null,
inputId: null,
inputRef: null,
+ invalid: false,
itemTemplate: null,
keyfilter: null,
max: null,
diff --git a/components/lib/chips/chips.d.ts b/components/lib/chips/chips.d.ts
index 742c41f22b..ec70abb8ea 100755
--- a/components/lib/chips/chips.d.ts
+++ b/components/lib/chips/chips.d.ts
@@ -173,6 +173,11 @@ export interface ChipsProps extends Omit {
onClick: rowEditorProps.onSaveClick,
className: rowEditorProps.saveClassName,
tabIndex: props.tabIndex,
- 'aria-label': ariaLabel('saveEdit'),
'data-p-row-editor-save': true
},
getColumnPTOptions('rowEditorSaveButton')
@@ -717,7 +716,6 @@ export const BodyCell = React.memo((props) => {
onClick: rowEditorProps.onCancelClick,
className: rowEditorProps.cancelClassName,
tabIndex: props.tabIndex,
- 'aria-label': ariaLabel('cancelEdit')
},
getColumnPTOptions('rowEditorCancelButton')
);
@@ -749,7 +747,6 @@ export const BodyCell = React.memo((props) => {
onClick: rowEditorProps.onInitClick,
className: rowEditorProps.initClassName,
tabIndex: props.tabIndex,
- 'aria-label': ariaLabel('editRow'),
'data-p-row-editor-init': true
},
getColumnPTOptions('rowEditorInitButton')
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
index be92dd5a15..a39839932a 100644
--- a/components/lib/datatable/TableBody.js
+++ b/components/lib/datatable/TableBody.js
@@ -296,8 +296,6 @@ export const TableBody = React.memo(
onSelect({ originalEvent, data, type });
}
- focusOnElement(originalEvent, true);
-
if (props.onSelectionChange && selection !== props.selection) {
props.onSelectionChange({
originalEvent,
@@ -322,8 +320,6 @@ export const TableBody = React.memo(
anchorRowIndex.current = rangeRowIndex.current;
anchorCellIndex.current = event.cellIndex;
-
- focusOnElement(event.originalEvent, false);
};
const selectRange = (event) => {
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
index 4e947d4cd1..57396ff656 100644
--- a/components/lib/dataview/DataView.js
+++ b/components/lib/dataview/DataView.js
@@ -6,10 +6,12 @@ import { SpinnerIcon } from '../icons/spinner';
import { ThLargeIcon } from '../icons/thlarge';
import { Paginator } from '../paginator/Paginator';
import { Ripple } from '../ripple/Ripple';
-import { classNames, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { useMergeProps } from '../hooks/Hooks';
import { DataViewBase, DataViewLayoutOptionsBase } from './DataViewBase';
export const DataViewLayoutOptions = React.memo((inProps) => {
+ const mergeProps = useMergeProps();
const context = React.useContext(PrimeReactContext);
const props = DataViewLayoutOptionsBase.getProps(inProps, context);
const { ptm, cx } = DataViewLayoutOptionsBase.setMetaData({
@@ -76,6 +78,7 @@ export const DataViewItem = React.memo((props) => {
export const DataView = React.memo(
React.forwardRef((inProps, ref) => {
+ const mergeProps = useMergeProps();
const context = React.useContext(PrimeReactContext);
const props = DataViewBase.getProps(inProps, context);
const [firstState, setFirstState] = React.useState(props.first);
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
index eef24d2738..e0d4c1ef61 100644
--- a/components/lib/dropdown/Dropdown.js
+++ b/components/lib/dropdown/Dropdown.js
@@ -726,6 +726,7 @@ export const Dropdown = React.memo(
if (selectedOption !== event.option) {
updateEditableLabel(event.option);
const optionValue = getOptionValue(event.option);
+ const selectedOptionIndex = findOptionIndexInList(event.option, visibleOptions);
if (props.onChange) {
props.onChange({
@@ -744,6 +745,8 @@ export const Dropdown = React.memo(
}
});
}
+
+ changeFocusedOptionIndex(event.originalEvent, selectedOptionIndex);
}
};
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
index f7ec9c3737..498e0c4722 100644
--- a/components/lib/dropdown/DropdownBase.js
+++ b/components/lib/dropdown/DropdownBase.js
@@ -6,6 +6,7 @@ const classes = {
root: ({ props, focusedState, overlayVisibleState }) =>
classNames('p-dropdown p-component p-inputwrapper', {
'p-disabled': props.disabled,
+ 'p-invalid': props.invalid,
'p-focus': focusedState,
'p-dropdown-clearable': props.showClear && !props.disabled,
'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -24,6 +25,7 @@ const classes = {
classNames('p-dropdown-item-group', {
'p-dropdown-item-empty': !optionGroupLabel || optionGroupLabel.length === 0
}),
+ itemGroupLabel: 'p-dropdown-item-group-label',
dropdownIcon: 'p-dropdown-trigger-icon p-clickable',
loadingIcon: 'p-dropdown-trigger-icon p-clickable',
clearIcon: 'p-dropdown-clear-icon p-clickable',
@@ -37,13 +39,16 @@ const classes = {
'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
}),
- item: ({ selected, disabled, label, index, focusedOptionIndex }) =>
+ item: ({ selected, disabled, label, index, focusedOptionIndex, highlightOnSelect }) =>
classNames('p-dropdown-item', {
- 'p-highlight': selected,
+ 'p-highlight': selected && highlightOnSelect,
'p-disabled': disabled,
'p-focus': index === focusedOptionIndex,
'p-dropdown-item-empty': !label || label.length === 0
}),
+ itemLabel: 'p-dropdown-item-label',
+ checkIcon: 'p-dropdown-check-icon',
+ blankIcon: 'p-dropdown-blank-icon',
wrapper: 'p-dropdown-items-wrapper',
header: 'p-dropdown-header',
footer: 'p-dropdown-footer',
@@ -162,6 +167,8 @@ export const DropdownBase = ComponentBase.extend({
dropdownIcon: null,
editable: false,
emptyFilterMessage: null,
+ highlightOnSelect: true,
+ checkmark: false,
emptyMessage: null,
filter: false,
filterBy: null,
@@ -176,6 +183,7 @@ export const DropdownBase = ComponentBase.extend({
id: null,
inputId: null,
inputRef: null,
+ invalid: false,
itemTemplate: null,
loading: false,
loadingIcon: null,
diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
index bdb3460750..b226609ab4 100644
--- a/components/lib/dropdown/DropdownItem.js
+++ b/components/lib/dropdown/DropdownItem.js
@@ -2,10 +2,12 @@ import * as React from 'react';
import { useMergeProps } from '../hooks/Hooks';
import { Ripple } from '../ripple/Ripple';
import { classNames, ObjectUtils } from '../utils/Utils';
+import { CheckIcon } from '../icons/check';
+import { BlankIcon } from '../icons/blank';
export const DropdownItem = React.memo((props) => {
const mergeProps = useMergeProps();
- const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex } = props;
+ const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex, checkmark, highlightOnSelect } = props;
const getPTOptions = (key) => {
return ptm(key, {
@@ -30,7 +32,7 @@ export const DropdownItem = React.memo((props) => {
{
role: 'option',
key: props.label,
- className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex })),
+ className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex, highlightOnSelect })),
style: props.style,
onClick: (e) => onClick(e, index),
'aria-label': label,
@@ -41,10 +43,39 @@ export const DropdownItem = React.memo((props) => {
},
getPTOptions('item', { selected, disabled, option, label })
);
+ const itemGroupLabelProps = mergeProps(
+ {
+ className: cx('itemLabel')
+ },
+ getPTOptions('itemLabel')
+ );
+
+ const iconRenderer = () => {
+ if (selected) {
+ const checkIconProps = mergeProps(
+ {
+ className: cx('checkIcon')
+ },
+ getPTOptions('checIcon')
+ );
+
+ return
- {content}
+ {checkmark && iconRenderer()}
+ {content}
);
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
index 0d5f8e1860..2440546c9c 100644
--- a/components/lib/dropdown/DropdownPanel.js
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -89,10 +89,12 @@ export const DropdownPanel = React.memo(
style={style}
template={props.itemTemplate}
selected={props.isSelected(option)}
+ highlightOnSelect={props.highlightOnSelect}
disabled={disabled}
onClick={props.onOptionClick}
ptm={ptm}
cx={cx}
+ checkmark={props.checkmark}
/>
);
});
@@ -128,10 +130,18 @@ export const DropdownPanel = React.memo(
},
getPTOptions('itemGroup')
);
+ const itemGroupLabelProps = mergeProps(
+ {
+ className: cx('itemGroupLabel')
+ },
+ getPTOptions('itemGroupLabel')
+ );
return (
- {groupContent}
+
+ {groupContent}
+
{groupChildrenContent}
);
@@ -150,10 +160,12 @@ export const DropdownPanel = React.memo(
style={style}
template={props.itemTemplate}
selected={props.isSelected(option)}
+ highlightOnSelect={props.highlightOnSelect}
disabled={disabled}
onClick={props.onOptionClick}
ptm={ptm}
cx={cx}
+ checkmark={props.checkmark}
/>
);
}
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
index b15b721823..66e705448e 100644
--- a/components/lib/dropdown/dropdown.d.ts
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -93,10 +93,26 @@ export interface DropdownPassThroughOptions {
* Uses to pass attributes to the item group's DOM element.
*/
itemGroup?: DropdownPassThroughType>;
+ /**
+ * Used to pass attributes to the item group label's DOM element.
+ */
+ itemGroupLabel?: DropdownPassThroughType>;
/**
* Uses to pass attributes to the item's DOM element.
*/
item?: DropdownPassThroughType>;
+ /**
+ * Used to pass attributes to the item label's DOM element.
+ */
+ itemLabel?: DropdownPassThroughType>;
+ /**
+ * Used to pass attributes to the check icon's DOM element.
+ */
+ checkIcon?: DropdownPassThroughType>;
+ /**
+ * Used to pass attributes to the bank icon's DOM element.
+ */
+ blankIcon?: DropdownPassThroughType>;
/**
* Uses to pass attributes to the empty message's DOM element.
*/
@@ -246,6 +262,11 @@ export interface DropdownProps extends Omit {
if (!isQuillLoaded.current) {
const configuration = {
@@ -44,94 +46,109 @@ export const Editor = React.memo(
if (QuillJS) {
// GitHub #3097 loaded by script only
- quill.current = new Quill(contentRef.current, configuration);
- initQuill();
-
- if (quill.current && quill.current.getModule('toolbar')) {
- props.onLoad && props.onLoad(quill.current);
- }
+ initQuill(new Quill(contentRef.current, configuration));
} else {
- import('quill')
- .then((module) => {
- if (module && DomHandler.isExist(contentRef.current)) {
- if (module.default) {
- // webpack
- quill.current = new module.default(contentRef.current, configuration);
- } else {
- // parceljs
- quill.current = new module(contentRef.current, configuration);
- }
-
- initQuill();
- }
- })
- .then(() => {
- if (quill.current && quill.current.getModule('toolbar')) {
- props.onLoad && props.onLoad(quill.current);
+ import('quill').then((module) => {
+ if (module && DomHandler.isExist(contentRef.current)) {
+ let quillInstance;
+
+ if (module.default) {
+ // webpack
+ quillInstance = new module.default(contentRef.current, configuration);
+ } else {
+ // parceljs
+ quillInstance = new module(contentRef.current, configuration);
}
- });
+
+ initQuill(quillInstance);
+ }
+ });
}
isQuillLoaded.current = true;
}
});
- const initQuill = () => {
- if (props.value) {
- quill.current.setContents(quill.current.clipboard.convert(props.value));
+ const onTextChange = (delta, oldContents, source) => {
+ let firstChild = contentRef.current.children[0];
+ let html = firstChild ? firstChild.innerHTML : null;
+ let text = quill.current.getText();
+
+ if (html === '} event - Browser event
*/
onKeyDown?(event: React.KeyboardEvent): void;
- /**
- * Callback to invoke when the key released.
- * @param {React.KeyboardEvent} event - Browser event
- */
- onKeyUp?(event: React.KeyboardEvent): void;
/**
* Used to get the child elements of the component.
* @readonly
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
index b3a08239f6..fcc02ecc53 100644
--- a/components/lib/inputswitch/InputSwitch.js
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -11,12 +11,8 @@ export const InputSwitch = React.memo(
const mergeProps = useMergeProps();
const context = React.useContext(PrimeReactContext);
const props = InputSwitchBase.getProps(inProps, context);
- const [focusedState, setFocusedState] = React.useState(false);
const { ptm, cx, isUnstyled } = InputSwitchBase.setMetaData({
- props,
- state: {
- focused: focusedState
- }
+ props
});
useHandleStyle(InputSwitchBase.css.styles, isUnstyled, { name: 'inputswitch' });
@@ -24,18 +20,7 @@ export const InputSwitch = React.memo(
const inputRef = React.useRef(props.inputRef);
const checked = props.checked === props.trueValue;
- const onClick = (event) => {
- if (props.disabled) {
- return;
- }
-
- toggle(event);
- DomHandler.focus(inputRef.current);
-
- event.preventDefault();
- };
-
- const toggle = (event) => {
+ const onChange = (event) => {
if (props.onChange) {
const value = checked ? props.falseValue : props.trueValue;
@@ -58,13 +43,11 @@ export const InputSwitch = React.memo(
};
const onFocus = (event) => {
- setFocusedState(true);
- props.onFocus && props.onFocus(event);
+ props?.onFocus?.(event);
};
const onBlur = (event) => {
- setFocusedState(false);
- props.onBlur && props.onBlur(event);
+ props?.onBlur?.(event);
};
React.useImperativeHandle(ref, () => ({
@@ -90,9 +73,8 @@ export const InputSwitch = React.memo(
const rootProps = mergeProps(
{
- className: classNames(props.className, cx('root', { focusedState, checked })),
+ className: classNames(props.className, cx('root', { checked })),
style: props.style,
- onClick,
role: 'checkbox',
'aria-checked': checked,
'data-p-highlight': checked,
@@ -101,29 +83,24 @@ export const InputSwitch = React.memo(
otherProps,
ptm('root')
);
- const hiddenInputWrapperProps = mergeProps(
- {
- className: 'p-hidden-accessible'
- },
- ptm('hiddenInputWrapper')
- );
- const hiddenInputProps = mergeProps(
+ const inputProps = mergeProps(
{
type: 'checkbox',
id: props.inputId,
name: props.name,
checked: checked,
- onChange: toggle,
+ onChange: onChange,
onFocus: onFocus,
onBlur: onBlur,
disabled: props.disabled,
role: 'switch',
tabIndex: props.tabIndex,
'aria-checked': checked,
+ className: cx('input'),
...ariaProps
},
- ptm('hiddenInput')
+ ptm('input')
);
const sliderProps = mergeProps(
@@ -136,9 +113,7 @@ export const InputSwitch = React.memo(
return (
<>
= PassThroughType;
@@ -22,7 +22,6 @@ export declare type InputSwitchPassThroughType = PassThroughType>;
/**
- * Uses to pass attributes to the hidden input wrapper's DOM element.
+ * Uses to pass attributes to the input's DOM element.
*/
- hiddenInputWrapper?: InputSwitchPassThroughType>;
- /**
- * Uses to pass attributes to the hidden input's DOM element.
- */
- hiddenInput?: InputSwitchPassThroughType>;
+ input?: InputSwitchPassThroughType>;
/**
* Uses to pass attributes tooltip's DOM element.
* @type {TooltipPassThroughOptions}
@@ -58,17 +53,6 @@ export interface InputSwitchPassThroughOptions {
hooks?: ComponentHooks;
}
-/**
- * Defines current inline state in InputSwitch component.
- */
-export interface InputSwitchState {
- /**
- * Current focus state as a boolean.
- * @defaultValue false
- */
- focused: boolean;
-}
-
/**
* Custom change event.
* @see {@link InputSwitchProps.onChange}
@@ -130,6 +114,11 @@ export interface InputSwitchProps extends Omit
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
index 2ee1a3f403..31cfe8468e 100644
--- a/components/lib/inputtext/inputtext.d.ts
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -75,6 +75,11 @@ export interface InputTextProps extends Omit
+ root: ({ props: { severity } }) =>
classNames('p-inline-message p-component', {
- 'p-inline-message-info': props.severity === 'info',
- 'p-inline-message-warn': props.severity === 'warn',
- 'p-inline-message-error': props.severity === 'error',
- 'p-inline-message-success': props.severity === 'success',
- 'p-inline-message-icon-only': !props.text
+ [`p-inline-message-${severity}`]: severity
}),
icon: 'p-inline-message-icon',
text: 'p-inline-message-text'
diff --git a/components/lib/message/__snapshots__/Message.spec.js.snap b/components/lib/message/__snapshots__/Message.spec.js.snap
index 6f9dde63aa..ca5737fe60 100644
--- a/components/lib/message/__snapshots__/Message.spec.js.snap
+++ b/components/lib/message/__snapshots__/Message.spec.js.snap
@@ -5,7 +5,7 @@ exports[`Message content 1`] = `
@@ -109,7 +109,6 @@ exports[`Splitter Nested 1`] = `
class="p-splitter-gutter"
data-p-splitter-gutter-resizing="false"
data-pc-section="gutter"
- role="separator"
style="width: 4px;"
>
@@ -165,7 +165,6 @@ exports[`Splitter Single Panel with size 1`] = `
class="p-splitter-gutter"
data-p-splitter-gutter-resizing="false"
data-pc-section="gutter"
- role="separator"
style="height: 4px;"
>
@@ -207,7 +207,6 @@ exports[`Splitter Single Panel without size 1`] = `
class="p-splitter-gutter"
data-p-splitter-gutter-resizing="false"
data-pc-section="gutter"
- role="separator"
style="height: 4px;"
>
@@ -249,7 +249,6 @@ exports[`Splitter Splitter requires two SplitterPanel components to wrap. 1`] =
class="p-splitter-gutter"
data-p-splitter-gutter-resizing="false"
data-pc-section="gutter"
- role="separator"
style="width: 4px;"
>
@@ -301,7 +301,6 @@ exports[`Splitter Vertical layout 1`] = `
class="p-splitter-gutter"
data-p-splitter-gutter-resizing="false"
data-pc-section="gutter"
- role="separator"
style="height: 4px;"
>
diff --git a/components/lib/splitter/splitter.d.ts b/components/lib/splitter/splitter.d.ts
index d69f2f45db..1c9b0e8a19 100644
--- a/components/lib/splitter/splitter.d.ts
+++ b/components/lib/splitter/splitter.d.ts
@@ -139,11 +139,6 @@ interface SplitterPanelProps extends Omit {
const context = React.useContext(PrimeReactContext);
@@ -86,17 +86,27 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
DomHandler.addClass(targetRef.current, props.enterActiveClassName);
+ // enterClassName will be deprecated, use enterFromClassName
if (props.enterClassName) {
DomHandler.removeClass(targetRef.current, props.enterClassName);
}
+ if (props.enterFromClassName) {
+ DomHandler.removeClass(targetRef.current, props.enterFromClassName);
+ }
+
bindTargetEnterListener({ target: targetRef.current });
}
} else {
+ // enterClassName will be deprecated, use enterFromClassName
if (props.enterClassName) {
DomHandler.removeClass(targetRef.current, props.enterClassName);
}
+ if (props.enterFromClassName) {
+ DomHandler.removeClass(targetRef.current, props.enterFromClassName);
+ }
+
if (props.enterToClassName) {
DomHandler.addClass(targetRef.current, props.enterToClassName);
}
@@ -111,17 +121,27 @@ export const StyleClass = React.forwardRef((inProps, ref) => {
animating.current = true;
DomHandler.addClass(targetRef.current, props.leaveActiveClassName);
+ // leaveClassName will be deprecated, use leaveFromClassName
if (props.leaveClassName) {
DomHandler.removeClass(targetRef.current, props.leaveClassName);
}
+ if (props.leaveFromClassName) {
+ DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
+ }
+
bindTargetLeaveListener({ target: targetRef.current });
}
} else {
+ // leaveClassName will be deprecated, use leaveFromClassName
if (props.leaveClassName) {
DomHandler.removeClass(targetRef.current, props.leaveClassName);
}
+ if (props.leaveFromClassName) {
+ DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
+ }
+
if (props.leaveToClassName) {
DomHandler.addClass(targetRef.current, props.leaveToClassName);
}
diff --git a/components/lib/styleclass/StyleClassBase.js b/components/lib/styleclass/StyleClassBase.js
index c7ae3bba54..60c1058e66 100644
--- a/components/lib/styleclass/StyleClassBase.js
+++ b/components/lib/styleclass/StyleClassBase.js
@@ -6,9 +6,11 @@ export const StyleClassBase = {
nodeRef: null,
selector: null,
enterClassName: null,
+ enterFromClassName: null,
enterActiveClassName: null,
enterToClassName: null,
leaveClassName: null,
+ leaveFromClassName: null,
leaveActiveClassName: null,
leaveToClassName: null,
hideOnOutsideClick: false,
diff --git a/components/lib/styleclass/styleclass.d.ts b/components/lib/styleclass/styleclass.d.ts
index 17460ee217..a0e77e4410 100644
--- a/components/lib/styleclass/styleclass.d.ts
+++ b/components/lib/styleclass/styleclass.d.ts
@@ -24,8 +24,13 @@ export interface StyleClassProps {
selector?: '@next' | '@prev' | '@parent' | '@grandparent' | string | undefined;
/**
* Style class to add when item begins to get displayed.
+ * @deprecated since 10.5.2 Use 'enterFromClassName' option instead.
*/
enterClassName?: string | undefined;
+ /**
+ * Style class to add when item begins to get displayed.
+ */
+ enterFromClassName?: string | undefined;
/**
* Style class to add during enter animation.
*/
@@ -36,8 +41,13 @@ export interface StyleClassProps {
enterToClassName?: string | undefined;
/**
* Style class to add when item begins to get hidden.
+ * @deprecated since 10.5.2 Use 'leaveFromClassName' option instead.
*/
leaveClassName?: string | undefined;
+ /**
+ * Style class to add when item begins to get hidden.
+ */
+ leaveFromClassName?: string | undefined;
/**
* Style class to add during leave animation.
*/
diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts
index 16cb6505ce..a5d49ab390 100644
--- a/components/lib/toast/toast.d.ts
+++ b/components/lib/toast/toast.d.ts
@@ -85,7 +85,7 @@ export interface ToastMessageOptions {
* Severity level of the message.
* @defaultValue info
*/
- severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
+ severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
/**
* Summary content of the message.
*/
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
index 00848541e0..d9e4fad643 100644
--- a/components/lib/togglebutton/ToggleButton.js
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -13,12 +13,8 @@ export const ToggleButton = React.memo(
const context = React.useContext(PrimeReactContext);
const props = ToggleButtonBase.getProps(inProps, context);
const elementRef = React.useRef(null);
- const [focusedState, setFocusedState] = React.useState(false);
const { ptm, cx, isUnstyled } = ToggleButtonBase.setMetaData({
- props,
- state: {
- focused: focusedState
- }
+ props
});
useHandleStyle(ToggleButtonBase.css.styles, isUnstyled, { name: 'togglebutton' });
@@ -29,7 +25,7 @@ export const ToggleButton = React.memo(
const icon = props.checked ? props.onIcon : props.offIcon;
const toggle = (e) => {
- if (!props.disabled && props.onChange) {
+ if (!props.disabled && props.onChange && !props.readonly) {
props.onChange({
originalEvent: e,
value: !props.checked,
@@ -56,13 +52,11 @@ export const ToggleButton = React.memo(
};
const onFocus = (event) => {
- setFocusedState(true);
- props.onFocus && props.onFocus(event);
+ props?.onFocus?.(event);
};
const onBlur = (event) => {
- setFocusedState(false);
- props.onBlur && props.onBlur(event);
+ props?.onBlur?.(event);
};
const createIcon = () => {
@@ -108,27 +102,51 @@ export const ToggleButton = React.memo(
ref: elementRef,
id: props.id,
className: cx('root', { hasIcon, hasLabel }),
+ 'data-p-highlight': props.checked,
+ 'data-p-disabled': props.disabled
+ },
+ ToggleButtonBase.getOtherProps(props),
+ ptm('root')
+ );
+
+ const inputProps = mergeProps(
+ {
+ id: props.inputId,
+ className: cx('input'),
style: props.style,
- onClick: toggle,
+ onChange: toggle,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
tabIndex: tabIndex,
- role: 'button',
+ role: 'switch',
+ type: 'checkbox',
'aria-pressed': props.checked,
- 'data-p-highlight': props.checked,
- 'data-p-disabled': props.disabled
+ 'aria-invalid': props.invalid,
+ disabled: props.disabled,
+ readonly: props.readonly,
+ value: props.checked,
+ checked: props.checked
},
- ToggleButtonBase.getOtherProps(props),
- ptm('root')
+ ptm('input')
+ );
+
+ const boxProps = mergeProps(
+ {
+ className: cx('box', { hasIcon, hasLabel })
+ },
+ ptm('box')
);
return (
<>
>;
+ /**
+ * Used to pass attributes to the box's DOM element.
+ */
+ box?: CheckboxPassThroughType>;
}
/**
* Custom toggle button change target options
@@ -117,6 +126,21 @@ export interface ToggleButtonProps extends Omit {
* Used to reload target events. In some cases, the target element can be hidden initially. Later, when this element becomes visible, it will be necessary to bind tooltip events to this element.
* @param {string | string[] | HTMLElement | React.RefObject | undefined} target - Target element or if undefined will use current target.
*/
- public updateTargetEvents(target: string | string[] | HTMLElement | React.RefObject | undefined): void;
+ public updateTargetEvents(target?: string | string[] | HTMLElement | React.RefObject | undefined): void;
/**
* Used to load target events.
* @param {string | string[] | HTMLElement | React.RefObject | undefined} target - Target element or if undefined will use current target.
*/
- public loadTargetEvents(target: string | string[] | HTMLElement | React.RefObject | undefined): void;
+ public loadTargetEvents(target?: string | string[] | HTMLElement | React.RefObject | undefined): void;
/**
* Used to unload target events.
* @param {string | string[] | HTMLElement | React.RefObject | undefined} target - Target element or if undefined will use current target.
*/
- public unloadTargetEvents(target: string | string[] | HTMLElement | React.RefObject | undefined): void;
+ public unloadTargetEvents(target?: string | string[] | HTMLElement | React.RefObject | undefined): void;
/**
* Used to get container element.
* @return {HTMLElement} Container element
diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts
index ce7db5af53..cd2e225912 100644
--- a/components/lib/tooltip/tooltipoptions.d.ts
+++ b/components/lib/tooltip/tooltipoptions.d.ts
@@ -135,6 +135,11 @@ export interface TooltipOptions {
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
+ /**
+ * When enabled, it removes component related styles in the core.
+ * @defaultValue false
+ */
+ unstyled?: boolean;
/**
* Callback to invoke before the tooltip is shown.
* @param {TooltipEvent} event - Browser event
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
index 6f5691cd69..ba8d1d082a 100644
--- a/components/lib/tree/Tree.js
+++ b/components/lib/tree/Tree.js
@@ -107,7 +107,7 @@ export const Tree = React.memo(
};
const onDrop = (event) => {
- if (validateDropNode(dragState.current.path, event.path)) {
+ if (validateDropNode(dragState.current?.path, event.path)) {
const value = cloneValue(props.value);
let dragPaths = dragState.current.path.split('-');
@@ -210,7 +210,7 @@ export const Tree = React.memo(
};
const validateDropPoint = (event) => {
- let _validateDrop = validateDrop(dragState.current.path, event.path);
+ let _validateDrop = validateDrop(dragState.current?.path, event.path);
if (_validateDrop) {
//child dropped to next sibling's drop point
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
index 96a580efc2..055774ab04 100644
--- a/components/lib/tree/UITreeNode.js
+++ b/components/lib/tree/UITreeNode.js
@@ -714,7 +714,7 @@ export const UITreeNode = React.memo((props) => {
getPTOptions('nodeIcon')
);
- return ;
+ return IconUtils.getJSXIcon(icon, { ...nodeIconProps }, { props });
}
return null;
diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js
index 35f4e01ff2..091c4c211a 100644
--- a/components/lib/treeselect/TreeSelectBase.js
+++ b/components/lib/treeselect/TreeSelectBase.js
@@ -10,6 +10,7 @@ const classes = {
'p-treeselect-chip': props.display === 'chip',
'p-treeselect-clearable': props.showClear && !props.disabled,
'p-disabled': props.disabled,
+ 'p-invalid': props.invalid,
'p-focus': focusedState,
'p-inputwrapper-filled': !isValueEmpty,
'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -161,6 +162,7 @@ export const TreeSelectBase = ComponentBase.extend({
filterValue: null,
inputId: null,
inputRef: null,
+ invalid: false,
metaKeySelection: false,
name: null,
nodeTemplate: null,
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
index 40af859c3b..4549877164 100644
--- a/components/lib/treeselect/treeselect.d.ts
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -504,6 +504,11 @@ export interface TreeSelectProps extends Omit {
- if (!props.disabled && !props.readOnly) {
- toggle(event);
+ const onChange = (event) => {
+ if (props.disabled || props.readOnly) {
+ return;
}
- };
- const toggle = (event) => {
let newValue;
if (props.value === null || props.value === undefined) newValue = true;
@@ -58,17 +52,17 @@ export const TriStateCheckbox = React.memo(
}
};
- const onFocus = () => {
- setFocusedState(true);
+ const onFocus = (event) => {
+ props?.onFocus?.(event);
};
- const onBlur = () => {
- setFocusedState(false);
+ const onBlur = (event) => {
+ props?.onBlur?.(event);
};
const onKeyDown = (e) => {
if (e.code === 'Enter' || e.code === 'Space') {
- toggle(e);
+ onChange(e);
e.preventDefault();
}
};
@@ -114,9 +108,9 @@ export const TriStateCheckbox = React.memo(
const ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
const ariaChecked = props.value ? 'true' : 'false';
- const checkboxProps = mergeProps(
+ const boxProps = mergeProps(
{
- className: cx('checkbox', { focusedState }),
+ className: cx('box'),
tabIndex: props.disabled ? '-1' : props.tabIndex,
onFocus: onFocus,
onBlur: onBlur,
@@ -125,7 +119,7 @@ export const TriStateCheckbox = React.memo(
'aria-checked': ariaChecked,
...ariaProps
},
- ptm('checkbox')
+ ptm('box')
);
const srOnlyAriaProps = mergeProps(
@@ -140,18 +134,30 @@ export const TriStateCheckbox = React.memo(
{
className: classNames(props.className, cx('root')),
style: props.style,
- onClick: onClick,
'data-p-disabled': props.disabled
},
TriStateCheckboxBase.getOtherProps(props),
ptm('root')
);
+ const inputProps = mergeProps({
+ id: props.inputId,
+ className: cx('input'),
+ type: 'checkbox',
+ 'aria-invalid': props.invalid,
+ disabled: props.disabled,
+ readonly: props.readOnly,
+ value: props.value,
+ checked: props.value,
+ onChange: onChange
+ });
+
return (
<>
= PassThroughType>;
/**
- * Uses to pass attributes to the checkbox box's DOM element.
+ * Uses to pass attributes to the input's DOM element.
*/
- checkbox?: TriStateCheckboxPassThroughType>;
+ input?: CheckboxPassThroughType>;
+ /**
+ * Used to pass attributes to the box's DOM element.
+ */
+ box?: CheckboxPassThroughType>;
/**
* Uses to pass attributes tooltip's DOM element.
* @type {TooltipPassThroughOptions}
@@ -62,16 +66,6 @@ export interface TriStateCheckboxPassThroughOptions {
hooks?: ComponentHooks;
}
-/**
- * Defines current inline state in TriStateCheckbox component.
- */
-export interface TriStateCheckboxState {
- /**
- * Focused state as a boolean.
- */
- focused: boolean;
-}
-
/**
* Custom change event.
* @see {@link TriStateCheckboxProps.onChange}
@@ -94,6 +88,11 @@ export interface TriStateCheckboxProps extends Omit {
label: 'Basic',
component: BasicDoc
},
+ {
+ id: 'checkmark',
+ label: 'Checkmark',
+ component: CheckmarkDoc
+ },
{
id: 'editable',
label: 'Editable',
diff --git a/pages/metergroup/index.js b/pages/metergroup/index.js
new file mode 100644
index 0000000000..ca86dabad1
--- /dev/null
+++ b/pages/metergroup/index.js
@@ -0,0 +1,88 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/metergroup/basicdoc';
+import { IconDoc } from '@/components/doc/metergroup/icondoc';
+import { ImportDoc } from '@/components/doc/metergroup/importdoc';
+import { MultipleDoc } from '@/components/doc/metergroup/multipledoc';
+import { LabelDoc } from '@/components/doc/metergroup/labeldoc';
+import { VerticalDoc } from '@/components/doc/metergroup/verticaldoc';
+import { MinMaxDoc } from '@/components/doc/metergroup/minmaxdoc';
+import { TemplateDoc } from '@/components/doc/metergroup/templatedoc';
+import { AccessibilityDoc } from '@/components/doc/metergroup/accessibilitydoc';
+import { Wireframe } from '@/components/doc/metergroup/pt/wireframe';
+import { StyledDoc } from '@/components/doc/metergroup/theming/styleddoc';
+
+const MessagesDemo = () => {
+ const docs = [
+ {
+ id: 'import',
+ label: 'Import',
+ component: ImportDoc
+ },
+ {
+ id: 'basic',
+ label: 'Basic',
+ component: BasicDoc
+ },
+ {
+ id: 'multiple',
+ label: 'Multiple',
+ component: MultipleDoc
+ },
+ {
+ id: 'icon',
+ label: 'Icon',
+ component: IconDoc
+ },
+ {
+ id: 'label',
+ label: 'Label',
+ component: LabelDoc
+ },
+ {
+ id: 'vertical',
+ label: 'Vertical',
+ component: VerticalDoc
+ },
+ {
+ id: 'min-max',
+ label: 'Min-Max',
+ component: MinMaxDoc
+ },
+ {
+ id: 'template',
+ label: 'Template',
+ component: TemplateDoc
+ },
+ {
+ id: 'accessibility',
+ label: 'Accessibility',
+ component: AccessibilityDoc
+ }
+ ];
+
+ const ptDocs = [
+ {
+ id: 'pt.wireframe',
+ label: 'Wireframe',
+ component: Wireframe
+ },
+ {
+ id: 'pt.metergroup.options',
+ label: 'MeterGroup PT Options',
+ component: DocApiTable
+ }
+ ];
+
+ const themingDocs = [
+ {
+ id: 'styled',
+ label: 'Styled',
+ component: StyledDoc
+ }
+ ];
+
+ return
{createContent(v, k === 'name', d['deprecated'])}
) : k === 'description' || k === 'values' ? (
diff --git a/components/doc/datatable/scroll/frozencolumnsdoc.js b/components/doc/datatable/scroll/frozencolumnsdoc.js
index 99482b6a25..83edd47f84 100644
--- a/components/doc/datatable/scroll/frozencolumnsdoc.js
+++ b/components/doc/datatable/scroll/frozencolumnsdoc.js
@@ -164,7 +164,7 @@ export default function FrozenColumnsDemo() {
<>
- A column can be fixed during horizontal scrolling by enablng the frozen property. The location is defined with the alignFrozen that can be left or right. + A column can be fixed during horizontal scrolling by enabling the frozen property. The location is defined with the alignFrozen that can be left or right.
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+
+ )
+}
+ `,
+ typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+ name: string;
+ code: string;
+}
+
+export default function CheckmarkDemo() {
+ const [selectedCity, setSelectedCity] = useState
+ setSelectedCity(e.value)} options={cities} optionLabel="name"
+ placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+ An alternative way to highlight the selected option is displaying a checkmark instead.
+
+ setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+
+ Screen Reader
++ MeterGroup component uses meter role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby prop. +
+Keyboard Support
+Component does not include any interactive elements.
+
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function BasicDemo() {
+ const values = [{ label: 'Space used', value: 15 }];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ const values = [{ label: 'Space used', value: 15 }];
+
+ return (
+ <>
+ + MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem. +
+
+
+
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function IconDemo() {
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+ { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+ { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+ { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+ ];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+ { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+ { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+ { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+ ];
+
+ return (
+ <>
+ Icons can be displayed next to the labels instead of the default marker.
+
+
+
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function LabelDemo() {
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16 },
+ { label: 'Messages', color: '#fbbf24', value: 8 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 10 }
+ ];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16 },
+ { label: 'Messages', color: '#fbbf24', value: 8 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 10 }
+ ];
+
+ return (
+ <>
+ + The position of the labels relative to the meters is defined using the labelPosition property. The default orientation of the labels is horizontal, and the vertical alternative is available through the{' '} + labelOrientation option. +
+
+
+
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function MinMaxDemo() {
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16 },
+ { label: 'Messages', color: '#fbbf24', value: 8 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 10 }
+ ];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16 },
+ { label: 'Messages', color: '#fbbf24', value: 8 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 10 }
+ ];
+
+ return (
+ <>
+ + Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively. +
+
+
+
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function MultipleDemo() {
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16 },
+ { label: 'Messages', color: '#fbbf24', value: 8 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 10 }
+ ];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 16 },
+ { label: 'Messages', color: '#fbbf24', value: 8 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 10 }
+ ];
+
+ return (
+ <>
+ Adding more items to the array displays the meters in a group.
+
+
+
+ ({
+ className: context.active ? 'bg-primary-200 border-round-sm' : undefined
+ })
+ }}
+ />
+
+ )
+}
+ `,
+ typescript: `
+import React from 'react';
+import { Menubar } from 'primereact/menubar';
+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'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ label: 'Quit',
+ icon: 'pi pi-fw pi-power-off'
+ }
+ ];
+
+ return (
+
+ ({
+ className: context.active ? 'bg-primary-200 border-round-sm' : undefined
+ })
+ }}
+ />
+
+ )
+}
+ `
+ };
+
+ return (
+ <>
+
+ ({
+ className: context.active ? 'bg-primary-200 border-round-sm' : undefined
+ })
+ }}
+ />
+
+
+ 
+
+
+ );
+};
diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js
new file mode 100644
index 0000000000..2680477e05
--- /dev/null
+++ b/components/doc/metergroup/templatedoc.js
@@ -0,0 +1,226 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+import { Button } from '@/components/lib/button/Button';
+import { Card } from '@/components/lib/card/Card';
+
+export function TemplateDoc(props) {
+ const code = {
+ basic: `
+
+
+ {values.map((item, index) => (
+
+
+ ))}
+
+ );
+
+ const start = ({ totalPercent }) => (
+
+
+
+ {item.label}
+ {item.value}%
+
+
+
+
+
+ Storage
+
+ {totalPercent}%
+
+ 1TB
+
+ );
+
+ const end = (
+
+
+
+
+ );
+
+ const values = [
+ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+ { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+ { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+ { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meter }
+ ];
+
+ return (
+
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function TemplateDemo() {
+ const meter = (props: any, attr: any) => (
+
+ );
+
+ const start = ({ totalPercent }: {totalPercent: number}) => (
+
+ Storage
+
+ {totalPercent}%
+
+ 1TB
+
+ );
+
+ const end = (
+
+
+
+
+ );
+
+ const labelList = ({ values }: {values: any[]}) => (
+
+ {values.map((item, index) => (
+
+
+ ))}
+
+ );
+
+ const values = [
+ {
+ label: 'Apps',
+ color1: '#34d399',
+ color2: '#fbbf24',
+ value: 25,
+ icon: 'pi pi-table',
+ },
+ {
+ label: 'Messages',
+ color1: '#fbbf24',
+ color2: '#60a5fa',
+ value: 15,
+ icon: 'pi pi-inbox',
+ },
+ {
+ label: 'Media',
+ color1: '#60a5fa',
+ color2: '#c084fc',
+ value: 20,
+ icon: 'pi pi-image',
+ },
+ {
+ label: 'System',
+ color1: '#c084fc',
+ color2: '#c084fc',
+ value: 10,
+ icon: 'pi pi-cog',
+ meterTemplate: meter,
+ },
+ ];
+
+ return (
+
+
+
+ {item.label}
+ {item.value}%
+
+
+
+
+
+
+ )
+}
+ `
+ };
+
+ const meter = (props, attr) => ;
+
+ const labelList = ({ values }) => (
+
+ {values.map((item, index) => (
+
+
+ ))}
+
+ );
+
+ const start = ({ totalPercent }) => (
+
+
+
+ {item.label}
+ {item.value}%
+
+
+
+
+
+ Storage
+
+ {totalPercent}%
+
+ 1TB
+
+ );
+
+ const end = (
+
+
+
+
+ );
+
+ const values = [
+ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+ { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+ { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+ { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meter }
+ ];
+
+ return (
+ <>
+ + MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem. +
+
+
+ List of class names used in the styled mode.
+
+
+
+
+
+
+ );
+}
diff --git a/components/doc/metergroup/verticaldoc.js b/components/doc/metergroup/verticaldoc.js
new file mode 100644
index 0000000000..13c2578acc
--- /dev/null
+++ b/components/doc/metergroup/verticaldoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function VerticalDoc(props) {
+ const code = {
+ basic: `
+| Name | +Element | +
|---|---|
| p-metergroup | +Container element. | +
| p-metergroup-horizontal | +Container element when orientation mode is horizontal. | +
| p-metergroup-vertical | +Container element when orientation mode is vertical. | +
| p-metergroup-meter-container | +Container of the meters. | +
| p-metergroup-meter | +Content of a meter. | +
| p-metergroup-label-list | +Container element of the list of labels. | +
| p-metergroup-label-list-start | +Container element when label position is start. | +
| p-metergroup-label-list-end | +Container element when label position is end. | +
| p-metergroup-label-list-horizontal | +Container element when label orientation is horizontal. | +
| p-metergroup-label-list-vertical | +Container element when label orientation is vertical. | +
| p-metergroup-label-list-item | +Container element of a list item. | +
| p-metergroup-label-list-type | +Container element of a list type. | +
| p-metergroup-label | +Content of a label. | +
+
+ )
+}
+ `,
+ typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function VerticalDemo() {
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 24 },
+ { label: 'Messages', color: '#fbbf24', value: 16 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 12 }
+ ];
+
+ return (
+
+
+ )
+}
+ `
+ };
+
+ const values = [
+ { label: 'Apps', color: '#34d399', value: 24 },
+ { label: 'Messages', color: '#fbbf24', value: 16 },
+ { label: 'Media', color: '#60a5fa', value: 24 },
+ { label: 'System', color: '#c084fc', value: 12 }
+ ];
+
+ return (
+ <>
+ + MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem. +
+
+
+
diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
index cce4906ba0..0945e31d34 100644
--- a/components/doc/splitbutton/outlineddoc.js
+++ b/components/doc/splitbutton/outlineddoc.js
@@ -53,6 +53,7 @@ export function OutlinedDoc(props) {
)
}
@@ -167,6 +169,7 @@ export default function OutlinedDemo() {
}
+ { item.image && }
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
diff --git a/components/doc/toast/severitydoc.js b/components/doc/toast/severitydoc.js index db8dd67e02..fbabdaebe7 100644 --- a/components/doc/toast/severitydoc.js +++ b/components/doc/toast/severitydoc.js @@ -23,13 +23,23 @@ export function SeverityDoc(props) { toast.current.show({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3000 }); }; + const showSecondary = () => { + toast.current.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 }); + }; + + const showContrast = () => { + toast.current.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 }); + }; + const code = { basic: `
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
{checkboxIcon}
;
+ };
return (
<>
-
{hasTooltip &&
-
-
- {checkboxIcon}
+ {createInputElement()}
+ {createBoxElement()}
+
+ {
+ // eslint-disable-next-line no-console
+ console.log(`Editor. state is:${state}`);
+ setText(e.htmlValue);
+ }}
+ onLoad={(q) => {
+ q.setText('hi');
+ }}
+ />
+
+ );
+ }
+
+ const { getByTestId } = render(
-
{hasTooltip &&
-
-
+
- {iconElement}
- {label}
-
{hasTooltip &&
+ {iconElement}
+ {label}
+
-
{hasTooltip && {checkIcon}
- {focusedState && {ariaValueLabel}}
+
+ {ariaValueLabel}
+ {checkIcon}