Merge branch 'master' into master

primefaces · Mar 18, 2024 · d5b4652 · d5b4652
2 parents 49d6cc6 + 7d1dfa3
commit d5b4652
Show file tree

Hide file tree

Showing 71 changed files with 955 additions and 910 deletions.
diff --git a/components/doc/accordion/theming/tailwinddoc.js b/components/doc/accordion/theming/tailwinddoc.js
@@ -34,7 +34,7 @@ const Tailwind = {
                     'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode
                     'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover
                     'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
-                    { 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': context.active } // Condition
+                    { 'rounded-br-md rounded-bl-md': !context.selected, 'rounded-br-0 rounded-bl-0 text-gray-800': context.selected } // Condition
                 )
             }),
             headerIcon: 'inline-block mr-2',

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
diff --git a/components/doc/datatable/scroll/frozencolumnsdoc.js b/components/doc/datatable/scroll/frozencolumnsdoc.js
@@ -164,7 +164,7 @@ export default function FrozenColumnsDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    A column can be fixed during horizontal scrolling by enablng the <i>frozen</i> property. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.
+                    A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.
                 </p>
             </DocSectionText>
             <DeferredDemo onLoad={loadDemoData}>

diff --git a/components/doc/dialog/theming/styleddoc.js b/components/doc/dialog/theming/styleddoc.js
@@ -20,21 +20,25 @@ export function StyledDoc(props) {
                             <td>Container element.</td>
                         </tr>
                         <tr>
-                            <td>p-dialog-titlebar</td>
+                            <td>p-dialog-header</td>
                             <td>Container of header.</td>
                         </tr>
                         <tr>
                             <td>p-dialog-title</td>
                             <td>Header element.</td>
                         </tr>
                         <tr>
-                            <td>p-dialog-titlebar-icon</td>
+                            <td>p-dialog-header-icons</td>
                             <td>Icon container inside header.</td>
                         </tr>
                         <tr>
-                            <td>p-dialog-titlebar-close</td>
+                            <td>p-dialog-header-close</td>
                             <td>Close icon element.</td>
                         </tr>
+                        <tr>
+                            <td>p-dialog-header-maximize</td>
+                            <td>Maximize icon element.</td>
+                        </tr>
                         <tr>
                             <td>p-dialog-content</td>
                             <td>Content element</td>

diff --git a/components/doc/dropdown/checkmarkdoc.js 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: `
+<Dropdown value={selectedCity} onChange={(e) => 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 (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+        </div>
+    )
+}
+        `,
+        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<City | null>(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 (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>An alternative way to highlight the selected option is displaying a checkmark instead. </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/theming/tailwinddoc.js b/components/doc/menu/theming/tailwinddoc.js
@@ -23,18 +23,21 @@ const Tailwind = {
         menu: {
             className: classNames('m-0 p-0 list-none', 'outline-none')
         },
-        content: ({ context }) => ({
+        content: ({ state }) => ({
             className: classNames(
                 'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
                 'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
                 {
-                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': state.focused
                 }
             )
         }),
         action: {
             className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative')
         },
+        menuitem: {
+            className: classNames('hover:bg-gray-200')
+        },
         icon: 'text-gray-600 dark:text-white/70 mr-2',
         submenuheader: {
             className: classNames('m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none')

diff --git a/components/doc/organizationchart/basicdoc.js b/components/doc/organizationchart/basicdoc.js
@@ -92,7 +92,7 @@ import { OrganizationChart } from 'primereact/organizationchart';
 import { TreeNode } from 'primereact/treenode';
 
 export default function BasicDoc() {
-    const [data] = useState<TreeNode>([
+    const [data] = useState<TreeNode[]>([
         {
             label: 'Argentina',
             expanded: true,

diff --git 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<TreeNode[]>([]);
-    const [data] = useState<TreeNode>([
+    const [data] = useState<TreeNode[]>([
         {
             label: 'Argentina',
             expanded: true,

diff --git 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<TreeNode>([
+    const [data] = useState<TreeNode[]>([
         {
             label: 'Argentina',
             expanded: true,

diff --git a/components/doc/panel/theming/styleddoc.js b/components/doc/panel/theming/styleddoc.js
@@ -20,15 +20,15 @@ export function StyledDoc(props) {
                             <td>Container element.</td>
                         </tr>
                         <tr>
-                            <td>p-panel-titlebar</td>
+                            <td>p-panel-header</td>
                             <td>Header section.</td>
                         </tr>
                         <tr>
                             <td>p-panel-title</td>
                             <td>Title text of panel.</td>
                         </tr>
                         <tr>
-                            <td>p-panel-titlebar-toggler</td>
+                            <td>p-panel-toggler</td>
                             <td>Toggle icon.</td>
                         </tr>
                         <tr>

diff --git 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 (
         <div className="card flex justify-content-center">

diff --git a/components/doc/timeline/templatedoc.js b/components/doc/timeline/templatedoc.js
@@ -95,7 +95,7 @@ interface TimelineEvent {
 }
 
 export default function TemplateDemo() {
-    const events: TimelineEvent = [
+    const events: TimelineEvent[] = [
         { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
         { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
         { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
@@ -113,7 +113,7 @@ export default function TemplateDemo() {
     const customizedContent = (item: TimelineEvent) => {
         return (
             <Card title={item.status} subTitle={item.date}>
-                { item.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} width={200} className="shadow-1" />}
+                { item.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.image} width={200} className="shadow-1" />}
                 <p>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!</p>
                 <Button label="Read more" className="p-button-text"></Button>

diff --git a/components/doc/togglebutton/theming/tailwinddoc.js b/components/doc/togglebutton/theming/tailwinddoc.js
@@ -7,14 +7,11 @@ export function TailwindDoc(props) {
         basic: `
 const Tailwind = {
     togglebutton: {
-        root: ({ props, state }) => ({
+        root: ({ props }) => ({
             className: classNames(
                 'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
                 'px-4 py-3 rounded-md text-base w-36',
                 'border transition duration-200 ease-in-out',
-                {
-                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': state.focused
-                },
                 {
                     'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
                         !props.checked,

diff --git a/components/doc/tree/eventsdoc.js b/components/doc/tree/eventsdoc.js
@@ -80,8 +80,9 @@ export default function EventsDemo() {
         `,
         typescript: `
 import React, { useState, useEffect, useRef } from 'react';
-import { Tree, TreeNode, TreeEventNodeEvent } from 'primereact/tree';
+import { Tree, TreeEventNodeEvent } from 'primereact/tree';
 import { Toast } from 'primereact/toast';
+import { TreeNode } from "primereact/treenode";
 import { NodeService } from './service/NodeService';
 
 export default function EventsDemo() {

diff --git a/components/doc/treetable/contextmenudoc.js b/components/doc/treetable/contextmenudoc.js
@@ -106,17 +106,17 @@ export default function ContextMenuDemo() {
         `,
         typescript: `
 import React, { useState, useEffect, useRef } from 'react';
-import { TreeTable } from 'primereact/treetable';
+import { TreeTable, TreeTableExpandedKeysType } from 'primereact/treetable';
 import { ContextMenu } from 'primereact/contextmenu';
 import { Toast } from 'primereact/toast';
 import { Column } from 'primereact/column';
-import { TreeNode } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
 import { NodeService } from './service/NodeService';
 
 export default function ContextMenuDemo() {
-    const [nodes, setNodes] = useState<TreeNode>([]);
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
     const [expandedKeys, setExpandedKeys] = useState<TreeTableExpandedKeysType | null>(null);
-    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
     const toast = useRef<Toast>(null);
     const cm = useRef<ContextMenu>(null);
     const menu = [

diff --git 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<TreeNode>([]);
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
     const [globalFilter, setGlobalFilter] = useState<string>('');
-    const [filterMode, setFilterMode] = useState('lenient');
+    const [filterMode, setFilterMode] = useState<'lenient' | 'strict'>('lenient');
     const [filterOptions] = useState<FilterModeOption[]>([
         { label: 'Lenient', value: 'lenient' },
         { label: 'Strict', value: 'strict' }

diff --git 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<TreeNode[]>([]);
 
     useEffect(() => {
         NodeService.getTreeTableNodes().then(data => setNodes(data));

diff --git 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<TreeNode>([]);
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
     
     useEffect(() => {
         NodeService.getTreeTableNodes().then(data => setNodes(data));

diff --git 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<TreeNode>([]);
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
     const [selectedNodeKeys, setSelectedNodeKeys] = useState<TreeTableSelectionKeysType | null>(null);
     const [metaKey, setMetaKey] = useState<boolean>(true);
 

diff --git 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<TreeNode>([]);
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
     const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
     const [metaKey, setMetaKey] = useState<boolean>(true);
 

diff --git 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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> {
+export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> {
     /**
      * Unique identifier of the element.
      */