refactor: move all props to headless and update some components

Author: mertsincan

apps/showcase/__store__/index.tsx

@@ -2025,6 +2025,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
                 'component': React.lazy(() => import('demo/styled/select/focus-behavior-demo')),
                 'filePath': 'demo/styled/select/focus-behavior-demo.tsx',
             },
+            'group-checkbox-filter-demo': {
+                'component': React.lazy(() => import('demo/styled/select/group-checkbox-filter-demo')),
+                'filePath': 'demo/styled/select/group-checkbox-filter-demo.tsx',
+            },
             'group-demo': {
                 'component': React.lazy(() => import('demo/styled/select/group-demo')),
                 'filePath': 'demo/styled/select/group-demo.tsx',

apps/showcase/demo/styled/select/group-checkbox-filter-demo.tsx

@@ -0,0 +1,167 @@
+'use client';
+import { Check } from '@primeicons/react/check';
+import { Search } from '@primeicons/react/search';
+import { Tag as TagIcon } from '@primeicons/react/tag';
+import type { ListboxListInstance } from '@primereact/types/shared/listbox';
+import type { SelectValueChangeEvent } from '@primereact/types/shared/select';
+import { Button } from '@primereact/ui/button';
+import { Checkbox } from '@primereact/ui/checkbox';
+import { Chip } from '@primereact/ui/chip';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+import { Select } from '@primereact/ui/select';
+import * as React from 'react';
+
+const labelGroups = [
+    {
+        label: 'Critical',
+        code: 'critical',
+        items: [
+            { label: 'Security', value: 'security' },
+            {
+                label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+                value: 'lorem'
+            }
+        ]
+    },
+    {
+        label: 'Optional',
+        code: 'optional',
+        items: [
+            { label: 'Feature', value: 'feature' },
+            { label: 'Other', value: 'other' }
+        ]
+    }
+];
+
+const allItems = labelGroups.flatMap((g) => g.items);
+
+export default function GroupCheckboxFilterDemo() {
+    const [selected, setSelected] = React.useState<string[]>(['security']);
+    const [filterValue, setFilterValue] = React.useState<string>('');
+
+    const filteredGroups = React.useMemo(() => {
+        if (!filterValue) return labelGroups;
+
+        return labelGroups
+            .map((group) => ({
+                ...group,
+                items: group.items.filter((item) => item.label.toLowerCase().includes(filterValue.toLowerCase()))
+            }))
+            .filter((group) => group.items.length > 0);
+    }, [filterValue]);
+
+    const handleSelectAll = () => {
+        const visibleValues = filteredGroups.flatMap((g) => g.items.map((i) => i.value));
+        setSelected([...new Set([...selected, ...visibleValues])]);
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setSelected([]);
+    };
+
+    const getTriggerLabel = () => {
+        if (selected.length === 0) return null;
+        const first = allItems.find((i) => i.value === selected[0])?.label ?? selected[0];
+        return selected.length > 1 ? `${first} +${selected.length - 1}` : first;
+    };
+
+    return (
+        <div className="flex justify-center">
+            <Select.Root
+                value={selected}
+                onValueChange={(e: SelectValueChangeEvent) => setSelected(e.value as string[])}
+                options={filteredGroups}
+                optionLabel="label"
+                optionValue="value"
+                optionKey="value"
+                optionGroupLabel="label"
+                optionGroupChildren="items"
+                multiple
+                className="w-full md:w-64 border-0 bg-transparent shadow-none"
+            >
+                <Select.Trigger>
+                    <Select.Value placeholder="Select labels" className="p-0">
+                        {getTriggerLabel() && (
+                            <Chip.Root className="bg-blue-50 dark:bg-blue-950 **:text-blue-700 dark:**:text-blue-300">
+                                <Chip.Start>
+                                    <TagIcon />
+                                </Chip.Start>
+                                <Chip.Label>{getTriggerLabel()}</Chip.Label>
+                            </Chip.Root>
+                        )}
+                    </Select.Value>
+                </Select.Trigger>
+
+                <Select.Portal>
+                    <Select.Positioner>
+                        <Select.Popup>
+                            <Select.Header className="flex flex-col gap-2 p-2 border-b border-surface">
+                                <IconField.Root>
+                                    <IconField.Inset>
+                                        <Search />
+                                    </IconField.Inset>
+                                    <Select.Filter
+                                        as={InputText}
+                                        value={filterValue}
+                                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}
+                                        placeholder="Search..."
+                                    />
+                                </IconField.Root>
+                                <div className="flex items-center gap-1 px-1">
+                                    <Button variant="text" size="small" onClick={handleSelectAll}>
+                                        Select All
+                                    </Button>
+                                    <Button variant="text" size="small" severity="secondary" onClick={handleClear}>
+                                        Clear
+                                    </Button>
+                                </div>
+                            </Select.Header>
+
+                            <Select.List style={{ maxHeight: '18rem' }}>
+                                {(instance: ListboxListInstance) => {
+                                    const { listbox, options } = instance;
+
+                                    return (options as unknown[])?.map((option: unknown, index: number) => {
+                                        if (listbox?.isOptionGroup(option)) {
+                                            const group = (option as Record<string, unknown>).optionGroup as Record<string, string>;
+
+                                            return (
+                                                <Select.Option
+                                                    key={index}
+                                                    index={index}
+                                                    group
+                                                    className="text-xs font-semibold text-surface-500 uppercase tracking-wide"
+                                                >
+                                                    {group?.label}
+                                                </Select.Option>
+                                            );
+                                        }
+
+                                        const isSelected = listbox?.isSelected(option) ?? false;
+
+                                        return (
+                                            <Select.Option key={index} index={index} className="gap-2">
+                                                <Checkbox.Root defaultChecked={isSelected} tabIndex={-1} readOnly>
+                                                    <Checkbox.Box>
+                                                        <Checkbox.Indicator match="checked">
+                                                            <Check />
+                                                        </Checkbox.Indicator>
+                                                    </Checkbox.Box>
+                                                </Checkbox.Root>
+                                                <span className="flex-1 truncate">{listbox?.getOptionLabel(option)}</span>
+                                            </Select.Option>
+                                        );
+                                    });
+                                }}
+                            </Select.List>
+
+                            <Select.Empty className="text-sm text-center py-4 text-surface-400">No labels found</Select.Empty>
+                        </Select.Popup>
+                    </Select.Positioner>
+                </Select.Portal>
+            </Select.Root>
+        </div>
+    );
+}

apps/showcase/docs/styled/components/autocomplete/features.mdx

@@ -81,18 +81,6 @@ Use `AutoComplete.Clear` inside the root to display a clear button that resets t
 
 <DocDemoViewer name="autocomplete:clear-icon-demo" />
 
-### Group
-
-Options can be grouped using the `optionGroupLabel` and `optionGroupChildren` properties.
-
-<DocDemoViewer name="autocomplete:group-demo" />
-
-### Custom Group
-
-Customize group headers with custom rendering by accessing the list instance inside `AutoComplete.List`.
-
-<DocDemoViewer name="autocomplete:custom-group-demo" />
-
 ### Custom Option
 
 Customize option content using a render function inside `AutoComplete.Option` that receives the option instance including the `selected` state.
@@ -105,6 +93,20 @@ Use the `forceSelection` property to validate manual input against the suggestio
 
 <DocDemoViewer name="autocomplete:forceselection-demo" />
 
+### Group
+
+#### Simple
+
+Options can be grouped using the `optionGroupLabel` and `optionGroupChildren` properties.
+
+<DocDemoViewer name="autocomplete:group-demo" />
+
+#### Custom
+
+Customize group headers with custom rendering by accessing the list instance inside `AutoComplete.List`.
+
+<DocDemoViewer name="autocomplete:custom-group-demo" />
+
 ### Arrow
 
 Use `AutoComplete.Arrow` inside the popup to display an arrow pointing to the trigger element. Set `sideOffset` on `AutoComplete.Positioner` for spacing.
@@ -157,9 +159,7 @@ import { VisuallyHidden } from '@primereact/ui/visuallyhidden';
 <AutoComplete.Root>
     {/* ... */}
     <VisuallyHidden role="status" aria-live="polite" aria-atomic>
-        {items.length > 0
-            ? `${items.length} suggestions available.`
-            : 'No suggestions available.'}
+        {items.length > 0 ? `${items.length} suggestions available.` : 'No suggestions available.'}
     </VisuallyHidden>
 </AutoComplete.Root>
 ```

apps/showcase/docs/styled/components/select/features.mdx

@@ -101,23 +101,31 @@ Add a search field inside the popup using `Select.Header` with `Select.Filter` t
 
 <DocDemoViewer name="select:filter-demo" />
 
+### Custom Option
+
+Customize option content using a render function inside `Select.Option` that receives the option instance including the `selected` state.
+
+<DocDemoViewer name="select:option-demo" />
+
 ### Group
 
+#### Simple
+
 Options can be grouped using the `optionGroupLabel` and `optionGroupChildren` properties.
 
 <DocDemoViewer name="select:group-demo" />
 
-### Custom Group
+#### Custom
 
 Customize group headers with custom rendering by accessing the list instance inside `Select.List`.
 
 <DocDemoViewer name="select:custom-group-demo" />
 
-### Custom Option
+#### Checkbox and Filter
 
-Customize option content using a render function inside `Select.Option` that receives the option instance including the `selected` state.
+Combine grouped options, checkbox selection, and a filter to create a rich multi-select experience with a compact trigger that displays the selection count.
 
-<DocDemoViewer name="select:option-demo" />
+<DocDemoViewer name="select:group-checkbox-filter-demo" />
 
 ### Arrow
 

apps/showcase/registry.json

@@ -15,6 +15,14 @@ export const useAutoComplete = withHeadless({
     setup({ props, id }) {
         const onListboxValueChange = React.useRef<((event: useListboxValueChangeEvent) => void) | null>(null);
 
+        const handleListboxValueChange = (event: useListboxValueChangeEvent) => {
+            onListboxValueChange.current?.(event);
+        };
+
+        const handleOpenChange = (event: usePopoverOpenChangeEvent) => {
+            props.onOpenChange?.({ value: event.open });
+        };
+
         const listbox = useListbox({
             value: props.value,
             defaultValue: props.defaultValue,
@@ -32,7 +40,7 @@ export const useAutoComplete = withHeadless({
             focusOnHover: props.focusOnHover,
             multiple: false,
             metaKeySelection: props.metaKeySelection,
-            onValueChange: (event: useListboxValueChangeEvent) => onListboxValueChange.current?.(event)
+            onValueChange: handleListboxValueChange
         });
 
         const popover = usePopover({
@@ -41,9 +49,7 @@ export const useAutoComplete = withHeadless({
             closeOnEscape: props.closeOnEscape,
             autoFocus: props.autoFocus,
             trapped: props.trapped,
-            onOpenChange: (event: usePopoverOpenChangeEvent) => {
-                props.onOpenChange?.({ value: event.open });
-            }
+            onOpenChange: handleOpenChange
         });
 
         const [valueState, setValueState] = useControlledState({
@@ -168,12 +174,13 @@ export const useAutoComplete = withHeadless({
                 search(event, (event.target as HTMLInputElement).value, 'focus');
             }
 
+            listbox.listProps.onFocus?.();
             setFocusedState(true);
         };
 
         const onBlur = (event: React.FocusEvent) => {
+            listbox.listProps.onBlur?.();
             setFocusedState(false);
-            listbox.changeFocusedOptionIndex(new Event('blur') as unknown as React.KeyboardEvent, -1);
 
             if (props.forceSelection) {
                 applyForceSelection(event);

packages/@primereact/headless/src/autocomplete/useAutoComplete.ts

@@ -4,11 +4,12 @@ import { defaultProps } from './useBadge.props';
 export const useBadge = withHeadless({
     name: 'useBadge',
     defaultProps,
-    setup() {
+    setup({ props }) {
         // prop getters
         const rootProps = {
-            'data-scope': 'badge',
-            'data-part': 'root'
+            'data-scope': 'badge' as const,
+            'data-part': 'root' as const,
+            ...(!props.children && { 'data-empty': '' as const })
         };
 
         return {

packages/@primereact/headless/src/badge/useBadge.ts

@@ -5,6 +5,13 @@ export const useBreadcrumb = withHeadless({
     name: 'useBreadcrumb',
     defaultProps,
     setup() {
-        return {};
+        // prop getters
+        const rootProps = {
+            'aria-label': 'Breadcrumb'
+        };
+
+        return {
+            rootProps
+        };
     }
 });