@primereact/mcp 11.0.0 → 11.2.0

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

@@ -63,7 +63,7 @@ export default function Preview() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -247,7 +247,7 @@ export default function BasicDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -337,7 +337,7 @@ function ProductTable({ stripedRows, showGridlines, size }: { stripedRows?: bool
                         </DataTableTHeadRow>
                     </DataTableTHead>
                     <DataTableTBody>
-                        {({ item }: { item: any }) => (
+                        {({ item }: { item: Product }) => (
                             <DataTableRow key={item.id}>
                                 <DataTableCell>
                                     <span className="font-medium">{item.name}</span>
@@ -464,7 +464,7 @@ export default function SingleSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -634,7 +634,7 @@ export default function MultipleSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -783,7 +783,7 @@ export default function CheckboxSelectionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <PRDataTable.Selection>
@@ -909,7 +909,7 @@ export default function KeyboardDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1081,7 +1081,7 @@ export default function SortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1252,7 +1252,7 @@ export default function MultiSortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1423,7 +1423,7 @@ export default function PresortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1599,7 +1599,7 @@ export default function PresortMultiDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -1724,7 +1724,7 @@ export default function PaginationDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.name}</span>
@@ -1846,7 +1846,7 @@ export default function ScrollHorizontalDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>{item.id}</DataTableCell>
                                     <DataTableCell>
@@ -1971,7 +1971,7 @@ export default function ScrollFrozenColumnsMultiDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Customer }) => (
                                 <DataTableRow key={String(item.id)}>
                                     <DataTableCell frozen>
                                         <span className="text-xs text-surface-500 dark:text-surface-400 tabular-nums">#{String(item.id)}</span>
@@ -2089,6 +2089,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];
@@ -2145,7 +2146,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">
@@ -2313,7 +2314,7 @@ export default function ExpansionDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <React.Fragment key={item.id}>
                                     <DataTableRow>
                                         <DataTableCell>
@@ -2438,18 +2439,6 @@ import {
 import { Tag } from '@/components/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[]>([]);
 
@@ -2484,7 +2473,7 @@ export default function ResizeDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -2611,7 +2600,7 @@ export default function ResizeExpandDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -2789,7 +2778,7 @@ export default function ReorderDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody key={columns.map((c) => c.field).join(',')}>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     {columns.map((col) => (
                                         <DataTableCell key={col.field}>{renderCell(col.field, item)}</DataTableCell>
@@ -2905,7 +2894,7 @@ export default function RowReorderDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item, index }: { item: any; index: number }) => (
+                            {({ item, index }: { item: Product; index: number }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <DataTableRowReorder rowIndex={index} className="cursor-grab text-surface-400 hover:text-surface-600">
@@ -3067,7 +3056,7 @@ export default function ColumnGroupDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.product}</span>
@@ -3252,7 +3241,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
@@ -3266,7 +3255,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
@@ -3279,7 +3270,7 @@ export default function ColumnGroupFilterSortDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Sale }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.product}</span>
@@ -3402,7 +3393,7 @@ export default function FilterDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <span className="font-medium">{item.name}</span>
@@ -3489,7 +3480,7 @@ export default function TemplateDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -3611,7 +3602,7 @@ export default function ExportDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Product }) => (
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
@@ -3755,7 +3746,7 @@ export default function LoadingOverlayDemo() {
                                 </DataTableTHeadRow>
                             </DataTableTHead>
                             <DataTableTBody>
-                                {({ item }: { item: any }) => (
+                                {({ item }: { item: Product }) => (
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
                                             <div className="flex items-center gap-3">
@@ -3886,7 +3877,7 @@ export default function LoadingSkeletonDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) =>
+                            {({ item }: { item: Product }) =>
                                 isLoading ? (
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
@@ -3992,7 +3983,7 @@ export default function EmptyDemo() {
                             </DataTableTHeadRow>
                         </DataTableTHead>
                         <DataTableTBody>
-                            {({ item }: { item: any }) => (
+                            {({ item }: { item: Record<string, unknown> }) => (
                                 <DataTableRow key={String(item.id)}>
                                     <DataTableCell>{String(item.name)}</DataTableCell>
                                     <DataTableCell>{String(item.category)}</DataTableCell>

package/data/llms/tailwind/components/inputgroup.md

@@ -246,7 +246,6 @@ Checkbox and RadioButton components can be combined with an input element under
 
 ```tsx
 'use client';
-import { Check } from '@primeicons/react';
 import { Checkbox } from '@/components/ui/checkbox';
 import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
 import { InputText } from '@/components/ui/inputtext';

package/data/llms/tailwind/components/menu.md

@@ -705,12 +705,12 @@ export default function HoverDemo() {
 import {
     Menu,
     MenuGroup,
-    MenuSubmenuIndicator,
     MenuItem,
     MenuLabel,
     MenuList,
     MenuSeparator,
     MenuSubmenu,
+    MenuSubmenuIndicator,
     MenuSubmenuTrigger
 } from '@/components/ui/menu';
 import { Bell } from '@primeicons/react/bell';
@@ -732,8 +732,8 @@ import { Users } from '@primeicons/react/users';
 
 export default function InlineDemo() {
     return (
-        <Menu closeOnSelect={false} composite={false} className="w-64 mx-auto">
-            <MenuList>
+        <Menu closeOnSelect={false} composite={false}>
+            <MenuList className="w-64 mx-auto">
                 <MenuGroup>
                     <MenuLabel>Workspace</MenuLabel>
                     <MenuItem>
@@ -745,7 +745,7 @@ export default function InlineDemo() {
                         Inbox
                     </MenuItem>
 
-                    <MenuSubmenu defaultOpen openOnHover={false}>
+                    <MenuSubmenu as="div" defaultOpen openOnHover={false}>
                         <MenuSubmenuTrigger>
                             <Folder />
                             Projects
@@ -753,7 +753,7 @@ export default function InlineDemo() {
                                 <ChevronDown className="size-3.5 transition-transform duration-200 [[data-open]>*>&]:rotate-180" />
                             </MenuSubmenuIndicator>
                         </MenuSubmenuTrigger>
-                        <MenuList className="ms-6 hidden in-data-[part=sub]:in-data-open:flex">
+                        <MenuList className="ms-6! hidden! in-data-[part=submenu]:in-data-open:flex!">
                             <MenuGroup>
                                 <MenuItem>
                                     <Briefcase />

package/data/llms/tailwind/components/select.md

@@ -7,6 +7,7 @@ Select is used to choose an item from a collection of options.
 import { Select, SelectList, SelectOption, SelectPopup, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { SelectValueChangeEvent } from 'primereact/select';
 import * as React from 'react';
+
 const languages = [
     { label: 'Select your language', value: '' },
     { label: 'English', value: 'en' },
@@ -112,6 +113,7 @@ Choose a single value from a dropdown list of options.
 import { Select, SelectList, SelectOption, SelectPopup, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { SelectValueChangeEvent } from 'primereact/select';
 import * as React from 'react';
+
 const languages = [
     { label: 'Select your language', value: '' },
     { label: 'English', value: 'en' },
@@ -635,6 +637,7 @@ export default function GroupDemo() {
                             <SelectList>
                                 {(() => {
                                     let index = 0;
+
                                     return jobCategories.flatMap((category) => [
                                         <SelectOption key={`group-${category.code}`} index={index++} group>
                                             {category.label}

package/data/llms/tailwind/components/sidebar.md

@@ -49,9 +49,10 @@ import {
     Users
 } from '@primeicons/react';
 import * as React from 'react';
+import type { IconProps } from '@primeicons/react/core';
 
 type NavItem = {
-    icon: React.FC<any>;
+    icon: React.FC<IconProps>;
     label: string;
     isActive?: boolean;
     badge?: string;
@@ -331,9 +332,12 @@ import { ChevronDown } from '@primeicons/react/chevron-down';
 import { SelectValueChangeEvent } from 'primereact/select';
 import { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
 import * as React from 'react';
+import type { CheckboxRootChangeEvent } from 'primereact/checkbox';
+import type { IconProps } from '@primeicons/react/core';
+import type { SidebarCollapsible, SidebarSide, SidebarVariant } from '@primereact/ui/sidebar';
 
 type NavItem = {
-    icon: React.FC<any>;
+    icon: React.FC<IconProps>;
     label: string;
     isActive?: boolean;
     badge?: string;
@@ -382,9 +386,9 @@ const collapsibleOptions = [
 ];
 
 export default function VariantsDemo() {
-    const [variant, setVariant] = React.useState<'sidebar' | 'floating' | 'inset'>('sidebar');
-    const [collapsible, setCollapsible] = React.useState<'icon' | 'offcanvas' | 'none'>('icon');
-    const [side, setSide] = React.useState<'left' | 'right'>('left');
+    const [variant, setVariant] = React.useState<SidebarVariant>('sidebar');
+    const [collapsible, setCollapsible] = React.useState<SidebarCollapsible>('icon');
+    const [side, setSide] = React.useState<SidebarSide>('left');
     const [overlay, setOverlay] = React.useState(false);
     const [openOnHover, setOpenOnHover] = React.useState(false);
     const [backdrop, setBackdrop] = React.useState(false);
@@ -394,7 +398,7 @@ export default function VariantsDemo() {
             <div className="flex flex-wrap items-center gap-4 mb-4">
                 <Select
                     value={variant}
-                    onValueChange={(e: SelectValueChangeEvent) => setVariant(e.value as any)}
+                    onValueChange={(e: SelectValueChangeEvent) => setVariant(e.value as SidebarVariant)}
                     options={variantOptions}
                     optionLabel="label"
                     optionValue="value"
@@ -413,7 +417,7 @@ export default function VariantsDemo() {
                 </Select>
                 <Select
                     value={collapsible}
-                    onValueChange={(e: SelectValueChangeEvent) => setCollapsible(e.value as any)}
+                    onValueChange={(e: SelectValueChangeEvent) => setCollapsible(e.value as SidebarCollapsible)}
                     options={collapsibleOptions}
                     optionLabel="label"
                     optionValue="value"
@@ -440,19 +444,19 @@ export default function VariantsDemo() {
                     <ToggleButton value="right">Right</ToggleButton>
                 </ToggleButtonGroup>
                 <div className="flex items-center gap-2">
-                    <Checkbox inputId="overlay-cb" checked={overlay} onCheckedChange={(e: any) => setOverlay(e.checked)} />
+                    <Checkbox inputId="overlay-cb" checked={overlay} onCheckedChange={(e: CheckboxRootChangeEvent) => setOverlay(e.checked)} />
                     <label htmlFor="overlay-cb" className="text-sm font-medium cursor-pointer">
                         Overlay
                     </label>
                 </div>
                 <div className="flex items-center gap-2">
-                    <Checkbox inputId="hover-cb" checked={openOnHover} onCheckedChange={(e: any) => setOpenOnHover(e.checked)} />
+                    <Checkbox inputId="hover-cb" checked={openOnHover} onCheckedChange={(e: CheckboxRootChangeEvent) => setOpenOnHover(e.checked)} />
                     <label htmlFor="hover-cb" className="text-sm font-medium cursor-pointer">
                         Open on Hover
                     </label>
                 </div>
                 <div className="flex items-center gap-2">
-                    <Checkbox inputId="backdrop-cb" checked={backdrop} onCheckedChange={(e: any) => setBackdrop(e.checked)} />
+                    <Checkbox inputId="backdrop-cb" checked={backdrop} onCheckedChange={(e: CheckboxRootChangeEvent) => setBackdrop(e.checked)} />
                     <label htmlFor="backdrop-cb" className="text-sm font-medium cursor-pointer">
                         Backdrop
                     </label>
@@ -1181,10 +1185,11 @@ import {
     SidebarTrigger
 } from '@/components/ui/sidebar';
 import { ChevronDown, Folder, Globe, Image, Sidebar as SidebarIcon, Video } from '@primeicons/react';
+import type { IconProps } from '@primeicons/react/core';
 
 type MenuItem = {
     label: string;
-    icon?: React.FC<any>;
+    icon?: React.FC<IconProps>;
     isActive?: boolean;
     children?: MenuItem[];
 };

package/data/llms/tailwind/components/tooltip.md

@@ -385,22 +385,11 @@ Tooltip can be combined with ToggleButton components to show contextual labels f
 'use client';
 import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
-import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner } from '@/components/ui/tooltip';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
 import { AlignCenter } from '@primeicons/react/align-center';
 import { AlignJustify } from '@primeicons/react/align-justify';
 import { AlignLeft } from '@primeicons/react/align-left';
 import { AlignRight } from '@primeicons/react/align-right';
-import { useTooltipContext } from 'primereact/tooltip';
-
-function TooltipToggleButton({ value, children }: { value: string; children: React.ReactNode }) {
-    const tooltip = useTooltipContext();
-
-    return (
-        <ToggleButton value={value} pt={{ root: tooltip?.triggerProps }}>
-            {children}
-        </ToggleButton>
-    );
-}
 
 const items = [
     { value: 'left', label: 'Align left', icon: <AlignLeft /> },
@@ -416,7 +405,9 @@ export default function WithToggleButtonDemo() {
                 <ToggleButtonGroup allowEmpty={false} defaultValue="left">
                     {items.map((item) => (
                         <Tooltip key={item.value}>
-                            <TooltipToggleButton value={item.value}>{item.icon}</TooltipToggleButton>
+                            <TooltipTrigger as={ToggleButton} value={item.value}>
+                                {item.icon}
+                            </TooltipTrigger>
                             <TooltipPortal>
                                 <TooltipPositioner sideOffset={8}>
                                     <TooltipPopup className="px-2.5 py-1.5">