@primereact/mcp 11.0.0 → 11.2.0

package/data/llms/styled/components/datatable.md

@@ -74,7 +74,7 @@ export default function Preview() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -208,7 +208,7 @@ export default function BasicDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>{item.code}</DataTable.Cell>
                                     <DataTable.Cell>{item.name}</DataTable.Cell>
@@ -308,7 +308,7 @@ export default function SizeDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -425,7 +425,7 @@ export default function GridlinesDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -542,7 +542,7 @@ export default function StripedRowsDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -675,7 +675,7 @@ export default function SingleSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -833,7 +833,7 @@ export default function MultipleSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -992,7 +992,7 @@ export default function CheckboxSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.Selection>
@@ -1154,7 +1154,7 @@ export default function RadioSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.Selection mode="radio">
@@ -1308,7 +1308,7 @@ export default function KeyboardDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -1479,7 +1479,7 @@ export default function SortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -1635,7 +1635,7 @@ export default function MultiSortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -1797,7 +1797,7 @@ export default function PresortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -1972,7 +1972,7 @@ export default function PresortMultiDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -2095,7 +2095,7 @@ export default function PaginationDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -2252,7 +2252,7 @@ export default function ScrollVerticalDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.name}</span>
@@ -2376,7 +2376,7 @@ export default function ScrollHorizontalDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>{item.id}</DataTable.Cell>
                                     <DataTable.Cell>
@@ -2492,7 +2492,7 @@ export default function ScrollFlexDemo() {
                                                 </DataTable.THeadRow>
                                             </DataTable.THead>
                                             <DataTable.TBody>
-                                                {({ item }: { item: any }) => (
+                                                {({ item }: { item: Customer }) => (
                                                     <DataTable.Row key={item.id}>
                                                         <DataTable.Cell>
                                                             <span className="font-medium">{item.name}</span>
@@ -2619,7 +2619,7 @@ export default function ScrollFrozenColumnsDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell frozen>
                                         <span className="font-semibold">{String(item.name)}</span>
@@ -2735,7 +2735,7 @@ export default function ScrollFrozenColumnsMultiDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell frozen>
                                         <span className="text-xs text-surface-500 dark:text-surface-400 tabular-nums">#{String(item.id)}</span>
@@ -2840,6 +2840,7 @@ export default function ScrollFrozenRowsDemo() {
     const toggleLock = React.useCallback((id: number) => {
         setLockedIds((prev) => {
             if (prev.includes(id)) return prev.filter((x) => x !== id);
+
             if (prev.length >= 2) return prev;
 
             return [...prev, id];
@@ -2896,7 +2897,7 @@ export default function ScrollFrozenRowsDemo() {
         );
     }, []);
 
-    const tbodyRender = React.useCallback(({ item }: { item: any }) => renderRow(item as Customer), [renderRow]);
+    const tbodyRender = React.useCallback(({ item }: { item: Customer }) => renderRow(item as Customer), [renderRow]);
 
     return (
         <div className="w-full">
@@ -3049,7 +3050,7 @@ export default function ExpansionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <React.Fragment key={item.id}>
                                     <DataTable.Row>
                                         <DataTable.Cell>
@@ -3163,6 +3164,7 @@ import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusOptions = [
     { label: 'In Stock', value: 'INSTOCK' },
@@ -3238,7 +3240,7 @@ export default function CellEditDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <img
@@ -3257,7 +3259,7 @@ export default function CellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.name}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-name`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -3274,7 +3276,7 @@ export default function CellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.category}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-category`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -3289,7 +3291,7 @@ export default function CellEditDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputNumber.Root
                                                     defaultValue={item.quantity}
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-quantity`] = e.value;
                                                     }}
                                                     size="small"
@@ -3310,7 +3312,7 @@ export default function CellEditDemo() {
                                                     defaultValue={item.price}
                                                     mode="currency"
                                                     currency="USD"
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-price`] = e.value;
                                                     }}
                                                     size="small"
@@ -3406,6 +3408,7 @@ import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusOptions = [
     { label: 'In Stock', value: 'INSTOCK' },
@@ -3523,7 +3526,7 @@ export default function CellEditSelectionDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.Selection>
@@ -3558,7 +3561,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.name}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-name`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -3575,7 +3578,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={item.category}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${index}-category`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -3590,7 +3593,7 @@ export default function CellEditSelectionDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputNumber.Root
                                                     defaultValue={item.quantity}
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-quantity`] = e.value;
                                                     }}
                                                     size="small"
@@ -3611,7 +3614,7 @@ export default function CellEditSelectionDemo() {
                                                     defaultValue={item.price}
                                                     mode="currency"
                                                     currency="USD"
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${index}-price`] = e.value;
                                                     }}
                                                     size="small"
@@ -3707,6 +3710,8 @@ import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { DataTableEditingEvent } from '@primereact/ui/datatable';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusOptions = [
     { label: 'In Stock', value: 'INSTOCK' },
@@ -3762,7 +3767,7 @@ export default function RowEditDemo() {
                 dataKey="id"
                 editMode="row"
                 editingKeys={editingKeys}
-                onEditingKeysChange={(e: any) => setEditingKeys(e.value)}
+                onEditingKeysChange={(e: DataTableEditingEvent) => setEditingKeys(e.value)}
                 onRowEditSave={handleSave}
                 onRowEditCancel={handleCancel}
             >
@@ -3791,7 +3796,7 @@ export default function RowEditDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => {
+                            {({ item, index }: { item: Product; index: number }) => {
                                 const id = item.id;
 
                                 return (
@@ -3817,7 +3822,7 @@ export default function RowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputText
                                                             defaultValue={item.name}
-                                                            onChange={(e: any) => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], name: e.target.value };
                                                             }}
                                                             fluid
@@ -3833,7 +3838,7 @@ export default function RowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputText
                                                             defaultValue={item.category}
-                                                            onChange={(e: any) => {
+                                                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], category: e.target.value };
                                                             }}
                                                             fluid
@@ -3847,7 +3852,7 @@ export default function RowEditDemo() {
                                                     <DataTable.CellEditorContent>
                                                         <InputNumber.Root
                                                             defaultValue={item.quantity}
-                                                            onValueChange={(e: any) => {
+                                                            onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], quantity: e.value ?? 0 };
                                                             }}
                                                             fluid
@@ -3867,7 +3872,7 @@ export default function RowEditDemo() {
                                                             defaultValue={item.price}
                                                             mode="currency"
                                                             currency="USD"
-                                                            onValueChange={(e: any) => {
+                                                            onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                                 draftRef.current[id] = { ...draftRef.current[id], price: e.value ?? 0 };
                                                             }}
                                                             fluid
@@ -3970,6 +3975,7 @@ import { Database } from '@primeicons/react/database';
 import { Avatar } from '@primereact/ui/avatar';
 import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
+import type { RowGroupMeta } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -4011,7 +4017,7 @@ export default function RowGroupDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, groupMeta }: { item: any; groupMeta?: any }) => {
+                            {({ item, groupMeta }: { item: Customer; groupMeta?: RowGroupMeta }) => {
                                 const repName = item.representative.name as string;
                                 const repImage = item.representative.image;
                                 const groupTotal = customers.reduce(
@@ -4102,6 +4108,7 @@ import { CustomerService, type Customer } from '@/shared/services/customer.servi
 import { Database } from '@primeicons/react/database';
 import { Avatar } from '@primereact/ui/avatar';
 import { DataTable } from '@primereact/ui/datatable';
+import type { RowGroupMeta } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
@@ -4152,7 +4159,7 @@ export default function RowGroupRowSpanDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, groupMeta }: { item: any; groupMeta?: any }) => (
+                            {({ item, groupMeta }: { item: Customer; groupMeta?: RowGroupMeta }) => (
                                 <DataTable.Row key={item.id}>
                                     {groupMeta?.isGroupStart && (
                                         <DataTable.Cell rowSpan={groupMeta.groupCount}>
@@ -4232,18 +4239,6 @@ import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
 
-const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
-    INSTOCK: 'success',
-    LOWSTOCK: 'warn',
-    OUTOFSTOCK: 'danger'
-};
-
-const statusLabel: Record<string, string> = {
-    INSTOCK: 'In Stock',
-    LOWSTOCK: 'Low Stock',
-    OUTOFSTOCK: 'Out of Stock'
-};
-
 export default function ResizeDemo() {
     const [products, setProducts] = React.useState<Product[]>([]);
 
@@ -4278,7 +4273,7 @@ export default function ResizeDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -4389,7 +4384,7 @@ export default function ResizeExpandDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
@@ -4551,7 +4546,7 @@ export default function ReorderDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     {columns.map((col) => (
                                         <DataTable.Cell key={col.field}>{renderCell(col.field, item)}</DataTable.Cell>
@@ -4654,7 +4649,7 @@ export default function RowReorderDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.RowReorder rowIndex={index} className="cursor-grab text-surface-400 hover:text-surface-600">
@@ -4823,6 +4818,7 @@ function ColumnsPopover({ columns, visibleFields, onColumnsChange, onVisibleFiel
 
         if (set.has(field)) set.delete(field);
         else set.add(field);
+
         onVisibleFieldsChange(Array.from(set));
     };
 
@@ -4924,7 +4920,7 @@ export default function ColumnToggleDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={visibleFields.join(',') + '|' + columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={item.id}>
                                     {visibleColumns.map((col) => (
                                         <DataTable.Cell key={col.field}>{renderCell(col.field, item)}</DataTable.Cell>
@@ -5045,7 +5041,7 @@ export default function ColumnGroupDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.product}</span>
@@ -5214,7 +5210,7 @@ export default function ColumnGroupFilterSortDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value)}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, e.target.value)}
                                                 placeholder="Search"
                                                 size="small"
                                                 fluid
@@ -5228,7 +5224,9 @@ export default function ColumnGroupFilterSortDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value ? Number(e.target.value) : null, 'gte')}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                    onChange(e, e.target.value ? Number(e.target.value) : null, 'gte')
+                                                }
                                                 placeholder="≥"
                                                 size="small"
                                                 fluid
@@ -5241,7 +5239,7 @@ export default function ColumnGroupFilterSortDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{item.product}</span>
@@ -5393,7 +5391,7 @@ export default function FilterBasicDemo() {
                         type="search"
                         placeholder="Keyword Search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                     />
                 </IconField.Root>
             </div>
@@ -5430,7 +5428,7 @@ export default function FilterBasicDemo() {
                                         {({ value, onChange, isActive }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value)}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, e.target.value)}
                                                 placeholder="Search name..."
                                                 invalid={isActive && !value}
                                                 size="small"
@@ -5444,7 +5442,7 @@ export default function FilterBasicDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value)}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, e.target.value)}
                                                 placeholder="Search country..."
                                                 size="small"
                                                 fluid
@@ -5469,7 +5467,7 @@ export default function FilterBasicDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: (typeof customers)[number] }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{String(item.name)}</span>
@@ -5652,9 +5650,9 @@ function toggleFilterOverlay(
     onToggleOverlay: (event: React.SyntheticEvent) => void,
     onHideOverlay: () => void
 ) {
-    if (e.value === overlayVisible) return;
-
     if (e.value) {
+        if (overlayVisible) return;
+
         const nativeEvent = e.originalEvent;
         const fakeSynthetic = {
             preventDefault: () => nativeEvent?.preventDefault(),
@@ -5735,7 +5733,7 @@ export default function FilterAdvancedDemo() {
                         type="search"
                         placeholder="Keyword Search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                     />
                 </IconField.Root>
             </div>
@@ -5827,7 +5825,9 @@ export default function FilterAdvancedDemo() {
                                                             </div>
                                                             <InputText
                                                                 value={(constraint.value as string) ?? ''}
-                                                                onChange={(e: any) => onConstraintChange(e, idx, e.target.value)}
+                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                                    onConstraintChange(e, idx, e.target.value)
+                                                                }
                                                                 placeholder="Search by name..."
                                                                 size="small"
                                                                 fluid
@@ -5894,7 +5894,9 @@ export default function FilterAdvancedDemo() {
                                                             />
                                                             <InputText
                                                                 value={(constraint.value as string) ?? ''}
-                                                                onChange={(e: any) => onConstraintChange(e, idx, e.target.value)}
+                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                                                    onConstraintChange(e, idx, e.target.value)
+                                                                }
                                                                 placeholder="Search by country..."
                                                                 size="small"
                                                                 fluid
@@ -6382,7 +6384,7 @@ export default function FilterAdvancedDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>
                                         <span className="font-medium">{String(item.name)}</span>
@@ -6574,7 +6576,7 @@ export default function ExportDemo() {
                         </DataTable.THeadRow>
                     </DataTable.THead>
                     <DataTable.TBody>
-                        {({ item }: { item: any }) => (
+                        {({ item }: { item: Product }) => (
                             <DataTable.Row key={item.id}>
                                 <DataTable.Cell>
                                     <div className="flex items-center gap-3">
@@ -6700,6 +6702,7 @@ function mockFetch(params: {
                     const vb = b[field];
 
                     if (va < vb) return -1 * dir;
+
                     if (va > vb) return 1 * dir;
 
                     return 0;
@@ -6753,7 +6756,7 @@ export default function LazyDemo() {
                     type="search"
                     placeholder="Search code / name / category..."
                     value={search}
-                    onChange={(e: any) => setSearch(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
                     style={{ minWidth: '20rem' }}
                 />
                 <span className="text-xs text-surface-500 dark:text-surface-400">Last lazy event: {lastEvent || '—'}</span>
@@ -6839,7 +6842,7 @@ export default function LazyDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>
                                         <span className="font-mono text-xs text-surface-500 dark:text-surface-400">{String(item.code)}</span>
@@ -6997,7 +7000,7 @@ export default function LoadingOverlayDemo() {
                                 </DataTable.THeadRow>
                             </DataTable.THead>
                             <DataTable.TBody>
-                                {({ item }: { item: any }) => (
+                                {({ item }: { item: Product }) => (
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
                                             <div className="flex items-center gap-3">
@@ -7117,7 +7120,7 @@ export default function LoadingSkeletonDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) =>
+                            {({ item }: { item: Product }) =>
                                 isLoading ? (
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
@@ -7211,7 +7214,7 @@ export default function EmptyDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Record<string, unknown> }) => (
                                 <DataTable.Row key={String(item.id)}>
                                     <DataTable.Cell>{String(item.name)}</DataTable.Cell>
                                     <DataTable.Cell>{String(item.category)}</DataTable.Cell>
@@ -7270,6 +7273,7 @@ import { InputNumber } from '@primereact/ui/inputnumber';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
 import * as React from 'react';
+import type { InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
     INSTOCK: 'success',
@@ -7338,7 +7342,7 @@ export default function AdvancedDemo() {
                         type="search"
                         placeholder="Keyword search"
                         value={globalFilter}
-                        onChange={(e: any) => setGlobalFilter(e.target.value)}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGlobalFilter(e.target.value)}
                         className="w-full"
                     />
                 </IconField.Root>
@@ -7390,7 +7394,7 @@ export default function AdvancedDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value)}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, e.target.value)}
                                                 placeholder="Search"
                                                 size="small"
                                                 fluid
@@ -7403,7 +7407,7 @@ export default function AdvancedDemo() {
                                         {({ value, onChange }: DataTableFilterInstance) => (
                                             <InputText
                                                 value={(value as string) ?? ''}
-                                                onChange={(e: any) => onChange(e, e.target.value)}
+                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, e.target.value)}
                                                 placeholder="Search"
                                                 size="small"
                                                 fluid
@@ -7417,7 +7421,7 @@ export default function AdvancedDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <DataTable.CellEditor field="name" rowIndex={index} rowData={item}>
@@ -7427,7 +7431,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.name)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.id}-name`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -7444,7 +7448,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputText
                                                     defaultValue={String(item.category)}
-                                                    onChange={(e: any) => {
+                                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                                         pendingValueRef.current[`${item.id}-category`] = e.target.value;
                                                     }}
                                                     size="small"
@@ -7461,7 +7465,7 @@ export default function AdvancedDemo() {
                                             <DataTable.CellEditorContent>
                                                 <InputNumber.Root
                                                     defaultValue={Number(item.price)}
-                                                    onValueChange={(e: any) => {
+                                                    onValueChange={(e: InputNumberRootValueChangeEvent) => {
                                                         pendingValueRef.current[`${item.id}-price`] = e.value;
                                                     }}
                                                     mode="currency"
@@ -7530,18 +7534,23 @@ import { Plus } from '@primeicons/react/plus';
 import { Search } from '@primeicons/react/search';
 import { Times } from '@primeicons/react/times';
 import { Trash } from '@primeicons/react/trash';
-import type { DataTableColumnReorderEvent, DataTableSortEvent, SortOrder } from '@primereact/ui/datatable';
-import type { DataTablePaginationInstance, DataTableSelectionInstance } from '@primereact/ui/datatable';
 import { Button } from '@primereact/ui/button';
 import { Checkbox, type CheckboxRootChangeEvent } from '@primereact/ui/checkbox';
+import type {
+    DataTableColumnReorderEvent,
+    DataTablePaginationInstance,
+    DataTableSelectionInstance,
+    DataTableSortEvent,
+    SortOrder
+} from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
 import { Drawer, type DrawerRootChangeEvent } from '@primereact/ui/drawer';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Label } from '@primereact/ui/label';
+import type { MenuRadioItemGroupValueChangeEvent } from '@primereact/ui/menu';
 import { Menu } from '@primereact/ui/menu';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
-import type { MenuRadioItemGroupValueChangeEvent } from '@primereact/ui/menu';
 import * as React from 'react';
 
 interface Row {
@@ -7628,11 +7637,13 @@ function PlainSelect({
     value,
     onChange,
     options,
+    size,
     placeholder
 }: {
     value: string;
     onChange: (v: string) => void;
     options: { label: string; value: string }[];
+    size?: 'small' | 'large';
     placeholder?: string;
 }) {
     return (
@@ -7642,6 +7653,7 @@ function PlainSelect({
             options={options}
             optionLabel="label"
             optionValue="value"
+            size={size}
             style={{ width: '100%' }}
         >
             <Select.Trigger>
@@ -7984,7 +7996,7 @@ export default function DatabaseEditorDemo() {
                             </DataTable.THeadRow>
                         </DataTable.THead>
                         <DataTable.TBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Row; index: number }) => (
                                 <DataTable.Row key={String(item.__rid)}>
                                     <DataTable.Cell frozen>
                                         <DataTable.Selection>
@@ -8026,6 +8038,7 @@ export default function DatabaseEditorDemo() {
                                                                 value={String(item.plan ?? 'free')}
                                                                 onChange={(v) => commitCell(item.__rid, col.field, v)}
                                                                 options={planOptions}
+                                                                size="small"
                                                             />
                                                         ) : (
                                                             <InputText