Merge branch 'master' into fix/today-button-visibility-max-date

primefaces · Jan 14, 2025 · 48275b9 · 48275b9
2 parents 9192513 + 595fb24
commit 48275b9
Show file tree

Hide file tree

Showing 204 changed files with 5,807 additions and 4,544 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2023 PrimeTek
+Copyright (c) 2016-2025 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/components/doc/accessibility/waiariadoc.js b/components/doc/accessibility/waiariadoc.js
@@ -54,14 +54,14 @@ export function WAIAriaDoc(props) {
 
             <p className="doc-section-description">
                 However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
-                usage of <i>p-sr-only</i>
+                usage of <i>p-hidden-accessible</i>
                 that hides the elements from the user but not from the screen reader.
             </p>
             <CodeHighlight>
                 {`
 <label htmlFor="chkbox">Remember Me</label>
 <div className="fancy-checkbox" onClick="() => toggle()">
-    <input className="p-sr-only" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
+    <input className="p-hidden-accessible" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
         onKeyDown="(e) => e.keyCode === 32 && updateParentVisuals()">
     {checked && <i className="checked-icon"></i>}
 </div>

diff --git a/components/doc/accordion/templatedoc.js b/components/doc/accordion/templatedoc.js
@@ -61,8 +61,8 @@ export function TemplateDoc(props) {
         javascript: `
 import React from 'react';
 import { Accordion, AccordionTab } from 'primereact/accordion';
-import { Avatar } from 'primereact/accordion';
-import { Badge } from 'primereact/accordion';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
 
 export default function TemplateDemo() {
     return (
@@ -124,8 +124,8 @@ export default function TemplateDemo() {
         typescript: `
 import React from 'react';
 import { Accordion, AccordionTab } from 'primereact/accordion';
-import { Avatar } from 'primereact/accordion';
-import { Badge } from 'primereact/accordion';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
 
 export default function TemplateDemo() {
     return (

diff --git a/components/doc/autocomplete/templatedoc.js b/components/doc/autocomplete/templatedoc.js
@@ -35,6 +35,10 @@ export function TemplateDoc(props) {
         );
     };
 
+    const selectedItemTemplate = (item) => {
+        return `${item.name} (${item.code.toUpperCase()})`;
+    };
+
     const panelFooterTemplate = () => {
         const isCountrySelected = (filteredCountries || []).some((country) => country.name === selectedCountry);
 
@@ -58,7 +62,7 @@ export function TemplateDoc(props) {
     const code = {
         basic: `
 <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries}  
-    completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
+    completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} selectedItemTemplate={selectedItemTemplate} />
         `,
         javascript: `
 import React, { useEffect, useState } from 'react';
@@ -117,14 +121,18 @@ export default function TemplateDemo() {
         );
     };
 
+    const selectedItemTemplate = (item) => {
+        return item.name + ' (' + item.code.toUpperCase() + ')';
+    };
+
     useEffect(() => {
         CountryService.getCountries().then((data) => setCountries(data));
     }, []);
 
     return (
         <div className="card flex justify-content-center">
             <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
-                completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
+                completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} selectedItemTemplate={selectedItemTemplate} />
         </div>
     )
 }
@@ -175,6 +183,10 @@ export default function TemplateDemo() {
             </div>
         );
     };
+
+    const selectedItemTemplate = (item: Country) => {
+        return item.name + ' (' + item.code.toUpperCase() + ')';
+    };
     
     const panelFooterTemplate = () => {
         const isCountrySelected = (filteredCountries || []).some( country => country['name'] === selectedCountry );
@@ -198,7 +210,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
-                completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
+                completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} selectedItemTemplate={selectedItemTemplate} />
         </div>
     )
 }
@@ -217,11 +229,20 @@ export default function TemplateDemo() {
             <DocSectionText {...props}>
                 <p>
                     Custom content can be displayed as an option using <i>itemTemplate</i> property that references a function with a suggestion option as a parameter and returns an element. Similarly <i>selectedItemTemplate</i> property is available
-                    to customize the chips in multiple mode using the same approach. Note that <i>selectedItemTemplate</i> is only available in multiple mode at the moment.
+                    to customize the chips in <i>multiple</i> mode and the text in <i>single</i> mode using the same approach.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} />
+                <AutoComplete
+                    field="name"
+                    value={selectedCountry}
+                    suggestions={filteredCountries}
+                    completeMethod={search}
+                    onChange={(e) => setSelectedCountry(e.value)}
+                    itemTemplate={itemTemplate}
+                    panelFooterTemplate={panelFooterTemplate}
+                    selectedItemTemplate={selectedItemTemplate}
+                />
             </div>
             <DocSectionCode code={code} service={['CountryService']} />
         </>

diff --git a/components/doc/captcha/captchadoc.js b/components/doc/captcha/captchadoc.js
@@ -18,7 +18,7 @@ export function CaptchaDoc(props) {
         `,
         javascript: `
 import React, { useRef } from 'react';
-import { Ripple } from 'primereact/ripple';
+import { Toast } from 'primereact/toast';
 import { Captcha } from 'primereact/captcha';
 
 export default function CaptchaDoc() {
@@ -38,7 +38,7 @@ export default function CaptchaDoc() {
         `,
         typescript: `
 import React, { useRef } from 'react';
-import { Ripple } from 'primereact/ripple';
+import { Toast } from 'primereact/toast';
 import { Captcha } from 'primereact/captcha';
 
 export default function CaptchaDoc() {