@primereact/mcp 11.0.0 → 11.1.0

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

@@ -5652,9 +5652,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(),
@@ -7530,18 +7530,17 @@ 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 +7627,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 +7643,7 @@ function PlainSelect({
             options={options}
             optionLabel="label"
             optionValue="value"
+            size={size}
             style={{ width: '100%' }}
         >
             <Select.Trigger>
@@ -8026,6 +8028,7 @@ export default function DatabaseEditorDemo() {
                                                                 value={String(item.plan ?? 'free')}
                                                                 onChange={(v) => commitCell(item.__rid, col.field, v)}
                                                                 options={planOptions}
+                                                                size="small"
                                                             />
                                                         ) : (
                                                             <InputText

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

@@ -829,7 +829,7 @@ export default function InlineDemo() {
                                     <ChevronDown className="size-3.5 transition-transform duration-200 [[data-open]>*>&]:rotate-180" />
                                 </Menu.SubmenuIndicator>
                             </Menu.SubmenuTrigger>
-                            <Menu.List className="ms-6! hidden! in-data-[part=sub]:in-data-open:flex!">
+                            <Menu.List className="ms-6! hidden! in-data-[part=submenu]:in-data-open:flex!">
                                 <Menu.Group>
                                     <Menu.Item>
                                         <Briefcase />
@@ -1082,58 +1082,47 @@ export default function TieredMenuDemo() {
 }
 ```
 
-### Apps
+### Emoji Picker
 
-The Menu component can be customized to create app launchers or grid-based menus. By applying custom classes to `Menu.List` and `Menu.Item`, the menu layout can be transformed into a grid structure with custom styling for icons and labels.
+The Menu component can be customized into a grid-based picker. By applying custom classes to `Menu.List` and `Menu.Item`, the menu layout becomes a categorized emoji grid, with `Menu.Label` marking each category and `Menu.Root`'s `onSelect` reporting the chosen emoji.
 
 ```tsx
-import { Bars } from '@primeicons/react/bars';
-import { Calendar } from '@primeicons/react/calendar';
-import { ChartLine } from '@primeicons/react/chart-line';
-import { Cloud } from '@primeicons/react/cloud';
-import { Cog } from '@primeicons/react/cog';
-import { Envelope } from '@primeicons/react/envelope';
-import { Image } from '@primeicons/react/image';
-import { MapMarker } from '@primeicons/react/map-marker';
-import { Search } from '@primeicons/react/search';
-import { Video } from '@primeicons/react/video';
+'use client';
 import { Button } from '@primereact/ui/button';
-import { Menu } from '@primereact/ui/menu';
+import { Menu, type MenuItemSelectEvent } from '@primereact/ui/menu';
 import * as React from 'react';
 
-const apps = [
-    { label: 'Search', icon: <Search />, gradient: 'from-sky-400 to-cyan-500' },
-    { label: 'Maps', icon: <MapMarker />, gradient: 'from-emerald-500 to-green-600' },
-    { label: 'Mail', icon: <Envelope />, gradient: 'from-orange-400 to-red-500' },
-    { label: 'Drive', icon: <Cloud />, gradient: 'from-blue-500 to-indigo-600' },
-    { label: 'Calendar', icon: <Calendar />, gradient: 'from-violet-500 to-purple-600' },
-    { label: 'Photos', icon: <Image />, gradient: 'from-fuchsia-500 to-pink-600' },
-    { label: 'Videos', icon: <Video />, gradient: 'from-red-500 to-rose-600' },
-    { label: 'Analytics', icon: <ChartLine />, gradient: 'from-cyan-500 to-blue-600' },
-    { label: 'Settings', icon: <Cog />, gradient: 'from-slate-500 to-zinc-700' }
-];
+export default function EmojiPickerDemo() {
+    const [selected, setSelected] = React.useState<string | null>(null);
 
-export default function AppsDemo() {
     return (
         <div className="flex justify-center">
-            <Menu.Root>
-                <Menu.Trigger as={Button} severity="secondary" variant="outlined" iconOnly aria-label="Apps">
-                    <Bars />
+            <Menu.Root onSelect={(e: MenuItemSelectEvent) => setSelected(e.value)}>
+                <Menu.Trigger as={Button} severity="secondary" variant="outlined" aria-label="Pick an emoji">
+                    <span className="text-lg leading-none">{selected ?? '🙂'}</span>
+                    Add reaction
                 </Menu.Trigger>
 
                 <Menu.Portal>
-                    <Menu.Positioner align="end" sideOffset={12}>
-                        <Menu.Popup>
-                            <Menu.List className="grid! grid-cols-3! gap-1! p-2!">
-                                {apps.map((app) => (
-                                    <Menu.Item key={app.label} className="flex-col items-center justify-center h-26 gap-3">
-                                        <div
-                                            className={`w-14 h-14 rounded-2xl bg-linear-to-br ${app.gradient} flex items-center justify-center transition-transform`}
-                                        >
-                                            {React.cloneElement(app.icon, { className: 'w-6! h-6! text-white' })}
-                                        </div>
-                                        <span className="text-sm font-medium">{app.label}</span>
-                                    </Menu.Item>
+                    <Menu.Positioner align="start" sideOffset={12}>
+                        <Menu.Popup className="w-80">
+                            <Menu.List className="grid! grid-cols-8! gap-0.5! p-1.5! max-h-72 overflow-y-auto">
+                                {categories.map((category) => (
+                                    <React.Fragment key={category.label}>
+                                        <Menu.Label className="col-span-full px-1 pt-2 pb-0.5 text-xs font-medium text-surface-500 dark:text-surface-400">
+                                            {category.label}
+                                        </Menu.Label>
+                                        {category.emojis.map((emoji) => (
+                                            <Menu.Item
+                                                key={emoji}
+                                                value={emoji}
+                                                aria-label={emoji}
+                                                className="flex! items-center justify-center aspect-square p-0! text-2xl! leading-none rounded-md cursor-pointer data-focused:bg-surface-100 dark:data-focused:bg-surface-800"
+                                            >
+                                                {emoji}
+                                            </Menu.Item>
+                                        ))}
+                                    </React.Fragment>
                                 ))}
                             </Menu.List>
                         </Menu.Popup>
@@ -1143,6 +1132,15 @@ export default function AppsDemo() {
         </div>
     );
 }
+
+const categories = [
+    { label: 'Smileys', emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🙂', '😉', '😊', '😍', '🥰', '😘', '😎', '🤩', '🤔'] },
+    { label: 'Gestures', emojis: ['👍', '👎', '👌', '✌️', '🤞', '🤟', '👏', '🙌', '🙏', '💪', '👋', '🤝'] },
+    { label: 'Animals', emojis: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮'] },
+    { label: 'Food', emojis: ['🍎', '🍓', '🍕', '🍔', '🍟', '🌮', '🍣', '🍩', '🍪', '🎂', '🍫', '☕'] },
+    { label: 'Activities', emojis: ['⚽', '🏀', '🎮', '🎲', '🎸', '🎨', '🎬', '🏆', '🎯', '🎧', '🥁', '🎤'] },
+    { label: 'Symbols', emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🔥', '⭐', '✨', '🎉', '💯', '✅'] }
+];
 ```
 
 ## Related

package/data/llms/styled/guides/configuration.md

@@ -84,6 +84,19 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 );
 ```
 
+The same prop works on a single component, which takes precedence over the provider. This suits an application that is themed overall but has one screen styled differently.
+
+```tsx
+<Select.Root unstyled>…</Select.Root>
+```
+
+There is also a third option that does not involve the flag at all. Importing from `primereact` gives the unstyled primitives directly, so the theming layer never enters the bundle:
+
+```tsx
+import { Select } from '@primereact/ui/select'; // themed, opt out with `unstyled`
+import { Select } from 'primereact/select'; // unstyled by construction
+```
+
 ## PassThrough
 
 Defines the shared pass through properties per component type. Visit the [Pass Through Props](/docs/passthrough) documentation for more information.
@@ -130,6 +143,53 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 );
 ```
 
+## CSP
+
+Components inject their styles as `<style>` elements at runtime. Under a Content Security Policy that restricts `style-src` to a nonce, those elements are blocked unless they carry the same nonce. The `csp.nonce` property applies it to every stylesheet PrimeReact injects.
+
+```tsx showLineNumbers {4}
+import { PrimeReactProvider } from '@primereact/core';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider csp={{ nonce: 'YOUR_NONCE_VALUE' }}>
+        <App />
+    </PrimeReactProvider>
+);
+```
+
+The nonce has to match the one sent in the response header, and it is applied when a stylesheet is first created.
+
+```
+Content-Security-Policy: style-src 'nonce-YOUR_NONCE_VALUE';
+```
+
+## Locale
+
+Sets the language used for built-in component messages such as filter operators, month names and screen reader labels. English is registered by default, so this is only needed when another language is required. See the [Internationalization and Localization](/docs/styled/guides/misc/internationalization) documentation for registering languages, translating messages and ready-made translations.
+
+```tsx showLineNumbers {4}
+import { PrimeReactProvider } from '@primereact/core';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider locale="de">
+        <App />
+    </PrimeReactProvider>
+);
+```
+
+Languages other than English have to be registered before they can be selected. The `locales` property registers them and selects one in a single step.
+
+```tsx showLineNumbers {2,5}
+import { PrimeReactProvider } from '@primereact/core';
+import { de } from 'primelocale/js/de.js';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider locale="de" locales={{ de }}>
+        <App />
+    </PrimeReactProvider>
+);
+```
+
 ## InputVariant
 
 Input fields come in two styles, default is `outlined` with borders around the field whereas `filled` alternative adds a background color to the field.
@@ -149,3 +209,141 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     </React.StrictMode>
 );
 ```
+
+## ZIndex
+
+Overlays are layered automatically, and these values set the base each layer starts from. Raise them when PrimeReact overlays need to sit above other fixed elements on the page.
+
+```tsx showLineNumbers {4-9}
+import { PrimeReactProvider } from '@primereact/core';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider
+        zIndex={{
+            modal: 1100,
+            overlay: 1000,
+            menu: 1000,
+            tooltip: 1100
+        }}
+    >
+        <App />
+    </PrimeReactProvider>
+);
+```
+
+| Key       | Default | Applies to                      |
+| --------- | ------- | ------------------------------- |
+| `modal`   | 1100    | Dialog, Drawer and other modals |
+| `overlay` | 1000    | Select, DatePicker, Popover     |
+| `menu`    | 1000    | Menu, ContextMenu               |
+| `tooltip` | 1100    | Tooltip                         |
+
+## Defaults
+
+Sets default props per component, applied everywhere that component is used. Anything passed at the call site still wins.
+
+```tsx showLineNumbers {5-9}
+import { PrimeReactProvider } from '@primereact/core';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider
+        defaults={{
+            Button: { props: { size: 'small', severity: 'secondary' } },
+            InputText: { props: { variant: 'filled' } },
+            Dialog: { props: { modal: true, closeOnEscape: false } }
+        }}
+    >
+        <App />
+    </PrimeReactProvider>
+);
+```
+
+A call site still overrides what it sets:
+
+```tsx
+// Renders large, not small.
+<Button size="large">Save</Button>
+```
+
+This is the place for house style that would otherwise be repeated on every instance, or wrapped in a local component just to change a default.
+
+### Keys
+
+The key is the component's registered name. For compound components that name includes the part, and four spellings are accepted so the config reads the way you want it to:
+
+```tsx
+<PrimeReactProvider
+    defaults={{
+        'Checkbox.Root': { props: { size: 'small' } },  // registered name
+        CheckboxRoot: { props: { size: 'small' } },     // without the dot
+        Checkbox: { Root: { props: { size: 'small' } } }, // nested
+        button: { props: { size: 'small' } }            // lowercase
+    }}
+>
+```
+
+### Event handlers
+
+Handlers work here too, and they run alongside the one at the call site rather than replacing it. This suits cross-cutting behaviour such as analytics:
+
+```tsx
+<PrimeReactProvider defaults={{ Button: { props: { onClick: track } } }}>
+    <Button onClick={save}>Save</Button>
+</PrimeReactProvider>
+```
+
+Clicking runs `track` and then `save`. The same chaining applies to any function prop.
+
+### Dynamic defaults
+
+An entry can be a function that returns the props to apply. It receives the base instance, which carries `name`, `id` and the props passed at the call site as `inProps`:
+
+```tsx
+<PrimeReactProvider
+    defaults={{
+        Button: (instance) => ({
+            props: { size: instance.inProps?.severity === 'danger' ? 'large' : 'small' }
+        })
+    }}
+>
+```
+
+## FilterMatchModeOptions
+
+Defines which match modes appear in filter menus, grouped by data type. Components such as DataTable read this when building their filter dropdowns.
+
+```tsx showLineNumbers {2,6-9}
+import { PrimeReactProvider } from '@primereact/core';
+import { FilterMatchMode } from '@primereact/ui/datatable';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider
+        filterMatchModeOptions={{
+            text: [FilterMatchMode.CONTAINS, FilterMatchMode.EQUALS],
+            numeric: [FilterMatchMode.EQUALS, FilterMatchMode.LESS_THAN],
+            date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_BEFORE]
+        }}
+    >
+        <App />
+    </PrimeReactProvider>
+);
+```
+
+Leaving it unset keeps the built-in list, which covers the common match modes for each type.
+
+## Stylesheet
+
+Collects the styles of rendered components so they can be sent with the server response instead of being injected after hydration. This is what prevents a flash of unstyled content in server-rendered applications.
+
+```tsx showLineNumbers {2,5,9}
+'use client';
+import { PrimeReactProvider, PrimeReactStyleSheet } from '@primereact/core';
+
+const styledStyleSheet = new PrimeReactStyleSheet();
+
+export default function Provider({ children }) {
+    return <PrimeReactProvider stylesheet={styledStyleSheet}>{children}</PrimeReactProvider>;
+}
+```
+
+The [Next.js installation guide](/docs/styled/guides/installation/nextjs) shows the full setup, including how the collected styles are flushed with `useServerInsertedHTML`.