Merge remote-tracking branch 'origin' into customers-api

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [9.2.0](https://github.com/primefaces/primereact/tree/9.2.0) (2023-02-21)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.1.1...9.2.0)
+
+**Breaking Changes:**
+
+- DataTable CSS and responsive structure improvements [\#4078](https://github.com/primefaces/primereact/issues/4078)
+
+**Implemented New Features and Enhancements:**
+
+- New Hook: useMatchMedia [\#4090](https://github.com/primefaces/primereact/issues/4090)
+- Add breakpoint and scrollHeight props to ContextMenu, MegaMenu and TieredMenu components. [\#4082](https://github.com/primefaces/primereact/issues/4082)
+- TreeTable CSS improvements [\#4081](https://github.com/primefaces/primereact/issues/4081)
+- Add `when` option to useResizeListener hook  [\#4080](https://github.com/primefaces/primereact/issues/4080)
+- Add tabIndex, appendOnly and inline properties to VirtualScroller [\#4079](https://github.com/primefaces/primereact/issues/4079)
+
+**Fixed bugs:**
+
+- Toast: Flick issue on toast-message-exit-active class [\#4084](https://github.com/primefaces/primereact/issues/4084)
+- Inplace is not working as expected [\#4070](https://github.com/primefaces/primereact/issues/4070)
+- PrimeIcons: can't use pi-arrow-right-arrow-left [\#4062](https://github.com/primefaces/primereact/issues/4062)
+- Calendar: Popup incorrect year in multiple month [\#4058](https://github.com/primefaces/primereact/issues/4058)
+- Avatar: Wrong className is getting used when image is undefined [\#4049](https://github.com/primefaces/primereact/issues/4049)
+- Inline Calendar inside DataTable filter error [\#4042](https://github.com/primefaces/primereact/issues/4042)
+- Toast: Summary Overflow Bug [\#4023](https://github.com/primefaces/primereact/issues/4023)
+
 ## [9.1.1](https://github.com/primefaces/primereact/tree/9.1.1) (2023-02-15)
 
 [Full Changelog](https://github.com/primefaces/primereact/compare/9.1.0...9.1.1)

api-generator/components/dataview.js

@@ -159,7 +159,7 @@ const DataViewProps = [
         name: 'itemTemplate',
         type: 'function',
         default: 'null',
-        description: 'Function that gets the option along with the layout mdoe and returns the content.'
+        description: 'Function that gets the option along with the layout mode and returns the content.'
     }
 ];
 

components/doc/autocomplete/basicdoc.js

@@ -36,13 +36,13 @@ export default function BasicDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 export default function BasicDemo() {
     const [value, setValue] = useState<string>('');
     const [items, setItems] = useState<string[]>([]);
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
 

components/doc/autocomplete/dropdowndoc.js

@@ -39,20 +39,20 @@ export default function DropdownDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 export default function DropdownDemo() {
     const [value, setValue] = useState<string>('');
     const [items, setItems] = useState<string[]>([]);
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         let _items = [...Array(10).keys()];
         setItems(event.query ? [...Array(10).keys()].map(item => event.query + '-' + item) : _items);
     }
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e: AutoCompleteChangeParams) => setValue(e.value)} dropdown />
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setValue(e.value)} dropdown />
         </div>
     )
 }

components/doc/autocomplete/floatlabeldoc.js

@@ -42,13 +42,13 @@ export default function FloatLabelDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 export default function FloatLabelDemo() {
     const [value, setValue] = useState<string>('');
     const [items, setItems] = useState<string[]>([]);
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
 

components/doc/autocomplete/forceselectiondoc.js

@@ -36,19 +36,19 @@ export default function ForceSelectionDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 export default function ForceSelectionDemo() {
     const [value, setValue] = useState<string>('');
     const [items, setItems] = useState<string[]>([]);
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e: AutoCompleteChangeParams) => setValue(e.value)} forceSelection />
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setValue(e.value)} forceSelection />
         </div>
     )
 }

components/doc/autocomplete/groupdoc.js

@@ -147,7 +147,7 @@ export default function GroupDemo() {
         `,
         typescript: `
 import React, { useState } from 'react';
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 interface City {
     label: string;
@@ -210,7 +210,7 @@ export default function GroupDemo() {
         );
     };
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         let query = event.query;
         let _filteredCities = [];
 
@@ -227,7 +227,7 @@ export default function GroupDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={selectedCity} onChange={(e: AutoCompleteChangeParams) => setSelectedCity(e.value)} suggestions={filteredCities} completeMethod={search}
+            <AutoComplete value={selectedCity} onChange={(e: AutoCompleteChangeEvent) => setSelectedCity(e.value)} suggestions={filteredCities} completeMethod={search}
                 field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} placeholder="Hint: type 'a'" />
         </div>
     )

components/doc/autocomplete/invaliddoc.js

@@ -36,13 +36,13 @@ export default function InvalidDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 export default function InvalidDemo() {
     const [value, setValue] = useState<string>('');
     const [items, setItems] = useState<string[]>([]);
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         setItems([...Array(10).keys()].map(item => event.query + '-' + item));
     }
 

components/doc/autocomplete/multipledoc.js

@@ -75,7 +75,7 @@ export default function MultipleDemo() {
         `,
         typescript: `
 import React, { useEffect, useState } from 'react';
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { CountryService } from "./service/CountryService";
 
 interface Country {
@@ -88,7 +88,7 @@ export default function MultipleDemo() {
     const [selectedCountries, setSelectedCountries] = useState<Country>(null);
     const [filteredCountries, setFilteredCountries] = useState<Country[]>(null);
 
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         // Timeout to emulate a network connection
         setTimeout(() => {
             let _filteredCountries;

components/doc/autocomplete/objectsdoc.js

@@ -75,7 +75,7 @@ export default function ObjectDemo() {
         `,
         typescript: `
 import React, { useEffect, useState } from 'react';
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { CountryService } from './service/CountryService';
 
 interface Country {
@@ -88,7 +88,7 @@ export default function ObjectDemo() {
     const [selectedCountry, setSelectedCountry] = useState<Country>(null);
     const [filteredCountries, setFilteredCountries] = useState<Country[]>(null);
     
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         // Timeout to emulate a network connection
         setTimeout(() => {
             let _filteredCountries;
@@ -112,7 +112,7 @@ export default function ObjectDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e: AutoCompleteChangeParams) => setSelectedCountry(e.value)} />
+            <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} />
         </div>
     )
 }

components/doc/autocomplete/templatedoc.js

@@ -100,7 +100,7 @@ export default function TemplateDemo() {
         `,
         typescript: `
 import React, { useEffect, useState } from 'react';
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { CountryService } from './service/CountryService';
 
 interface Country {
@@ -113,7 +113,7 @@ export default function TemplateDemo() {
     const [selectedCountry, setSelectedCountry] = useState<Country>(null);
     const [filteredCountries, setFilteredCountries] = useState<Country[]>(null);
     
-    const search = (event: AutoCompleteCompleteMethodParams) => {
+    const search = (event: AutoCompleteCompleteEvent) => {
         // Timeout to emulate a network connection
         setTimeout(() => {
             let _filteredCountries;
@@ -152,7 +152,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
-                completeMethod={search} onChange={(e: AutoCompleteChangeParams) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />
+                completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} />
         </div>
     )
 }

components/doc/autocomplete/virtualscrolldoc.js

@@ -62,7 +62,7 @@ export default function VirtualScrollerDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { AutoComplete, AutoCompleteCompleteMethodParams } from "primereact/autocomplete";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 
 interface Item {
     label: string;
@@ -74,7 +74,7 @@ export default function VirtualScrollerDemo() {
     const [filteredItems, setFilteredItems] = useState<Item[]>(null);
     const items = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
 
-    const searchItems = (event: AutoCompleteCompleteMethodParams) => {
+    const searchItems = (event: AutoCompleteCompleteEvent) => {
         //in a real application, make a request to a remote url with the query and return filtered results, for demo purposes we filter at client side
         let query = event.query;
         let _filteredItems = [];
@@ -91,7 +91,7 @@ export default function VirtualScrollerDemo() {
 
     return (
         <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems}
-            virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e: AutoCompleteChangeParams) => setSelectedItem(e.value)} />
+            virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e: AutoCompleteChangeEvent) => setSelectedItem(e.value)} />
     )
 }
         `

components/doc/button/disableddoc.js

@@ -5,7 +5,7 @@ import { DocSectionText } from '../common/docsectiontext';
 export function DisabledDoc(props) {
     const code = {
         basic: `
-<Button label="Submit" />
+<Button label="Submit" disabled />
         `,
         javascript: `
 import React from 'react'; 
@@ -14,7 +14,7 @@ import { Button } from 'primereact/button';
 export default function DisabledDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Button label="Submit" />
+            <Button label="Submit" disabled />
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { Button } from 'primereact/button';
 export default function DisabledDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Button label="Submit" />
+            <Button label="Submit" disabled />
         </div>
     )
 }

components/doc/button/sizesdoc.js

@@ -5,9 +5,9 @@ import { DocSectionText } from '../common/docsectiontext';
 export function SizesDoc(props) {
     const code = {
         basic: `
-<Button label="Small" icon="pi pi-check" size="sm" />
+<Button label="Small" icon="pi pi-check" size="small" />
 <Button label="Normal" icon="pi pi-check" />
-<Button label="Large" icon="pi pi-check" size="lg" />
+<Button label="Large" icon="pi pi-check" size="large" />
         `,
         javascript: `
 import React from 'react'; 
@@ -16,9 +16,9 @@ import { Button } from 'primereact/button';
 export default function SizesDemo() {
     return (
         <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
-            <Button label="Small" icon="pi pi-check" size="sm" />
+            <Button label="Small" icon="pi pi-check" size="small" />
             <Button label="Normal" icon="pi pi-check" />
-            <Button label="Large" icon="pi pi-check" size="lg" />
+            <Button label="Large" icon="pi pi-check" size="large" />
         </div>
     )
 }
@@ -30,9 +30,9 @@ import { Button } from 'primereact/button';
 export default function SizesDemo() {
     return (
         <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
-            <Button label="Small" icon="pi pi-check" size="sm" />
+            <Button label="Small" icon="pi pi-check" size="small" />
             <Button label="Normal" icon="pi pi-check" />
-            <Button label="Large" icon="pi pi-check" size="lg" />
+            <Button label="Large" icon="pi pi-check" size="large" />
         </div>
     )
 }
@@ -47,9 +47,9 @@ export default function SizesDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
-                <Button label="Small" icon="pi pi-check" size="sm" />
+                <Button label="Small" icon="pi pi-check" size="small" />
                 <Button label="Normal" icon="pi pi-check" />
-                <Button label="Large" icon="pi pi-check" size="lg" />
+                <Button label="Large" icon="pi pi-check" size="large" />
             </div>
             <DocSectionCode code={code} />
         </>

components/doc/calendar/yearpickerdoc.js

@@ -26,14 +26,14 @@ export default function YearPickerDemo() {
         `,
         typescript: `
 import React, { useState } from "react";
-import { Calendar, CalendarChangeParams } from 'primereact/calendar';
+import { Calendar, CalendarChangeEvent } from 'primereact/calendar';
 
 export default function YearPickerDemo() {
     const [date, setDate] = useState<Date | null>(null);
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={date} onChange={(e : CalendarChangeParams) => setDate(e.value)} view="year" dateFormat="yy" />
+            <Calendar value={date} onChange={(e : CalendarChangeEvent) => setDate(e.value)} view="year" dateFormat="yy" />
         </div>
     )
 }

components/doc/checkbox/dynamicdoc.js

@@ -92,7 +92,7 @@ export default function DynamicDemo() {
     ];
     const [selectedCategories, setSelectedCategories] = useState<Category[]>([categories[1]]);
 
-    const onCategoryChange = (e: CheckboxChangeParams) => {
+    const onCategoryChange = (e: CheckboxChangeEvent) => {
         let _selectedCategories = [...selectedCategories];
 
         if (e.checked)

components/doc/checkbox/groupdoc.js

@@ -83,7 +83,7 @@ import { Checkbox } from "primereact/checkbox";
 export default function GroupDemo() {
     const [ingredients, setIngredients] = useState<string[]>([]);
 
-    const onIngredientsChange = (e: CheckboxChangeParams) => {
+    const onIngredientsChange = (e: CheckboxChangeEvent) => {
         let _ingredients = [...ingredients];
 
         if (e.checked)