Skip to content

Commit 2af81f9

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: new headless and primitive docs part III
1 parent c7329c9 commit 2af81f9

91 files changed

Lines changed: 6237 additions & 1951 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/assets/menu/submenu/menu-headless.data.ts‎

Lines changed: 62 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,46 @@ export const headlessMenu = [
22
{
33
name: 'Form',
44
children: [
5+
{
6+
name: 'useAutoComplete',
7+
href: '/docs/headless/autocomplete'
8+
},
59
{
610
name: 'useCheckbox',
711
href: '/docs/headless/checkbox'
812
},
13+
{
14+
name: 'useInputNumber',
15+
href: '/docs/headless/inputnumber'
16+
},
917
{
1018
name: 'useInputOtp',
1119
href: '/docs/headless/inputotp'
1220
},
21+
{
22+
name: 'useInputTags',
23+
href: '/docs/headless/inputtags'
24+
},
1325
{
1426
name: 'useInputText',
1527
href: '/docs/headless/inputtext'
1628
},
29+
{
30+
name: 'useListbox',
31+
href: '/docs/headless/listbox'
32+
},
33+
{
34+
name: 'usePassword',
35+
href: '/docs/headless/password'
36+
},
1737
{
1838
name: 'useRadioButton',
1939
href: '/docs/headless/radiobutton'
2040
},
41+
{
42+
name: 'useSelect',
43+
href: '/docs/headless/select'
44+
},
2145
{
2246
name: 'useTextarea',
2347
href: '/docs/headless/textarea'
@@ -33,15 +57,32 @@ export const headlessMenu = [
3357
}
3458
]
3559
},
36-
// {
37-
// name: 'Menu',
38-
// children: [
39-
// {
40-
// name: 'Menu',
41-
// href: '/docs/headless/menu'
42-
// }
43-
// ]
44-
// },
60+
{
61+
name: 'Menu',
62+
children: [
63+
{
64+
name: 'useCommandMenu',
65+
href: '/docs/headless/commandmenu'
66+
}
67+
]
68+
},
69+
{
70+
name: 'Overlay',
71+
children: [
72+
{
73+
name: 'useConfirmPopup',
74+
href: '/docs/headless/confirmpopup'
75+
},
76+
{
77+
name: 'usePopover',
78+
href: '/docs/headless/popover'
79+
}
80+
// {
81+
// name: 'useTooltip',
82+
// href: '/docs/headless/tooltip'
83+
// }
84+
]
85+
},
4586
{
4687
name: 'Panel',
4788
children: [
@@ -69,6 +110,10 @@ export const headlessMenu = [
69110
name: 'useScrollArea',
70111
href: '/docs/headless/scrollarea'
71112
},
113+
{
114+
name: 'useSplitter',
115+
href: '/docs/headless/splitter'
116+
},
72117
{
73118
name: 'useTabs',
74119
href: '/docs/headless/tabs'
@@ -114,6 +159,14 @@ export const headlessMenu = [
114159
{
115160
name: 'useMotion',
116161
href: '/docs/headless/motion'
162+
},
163+
{
164+
name: 'usePortal',
165+
href: '/docs/headless/portal'
166+
},
167+
{
168+
name: 'usePositioner',
169+
href: '/docs/headless/positioner'
117170
}
118171
]
119172
}

‎apps/showcase/assets/menu/submenu/menu-primitives.data.ts‎

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,46 @@ export const primitivesMenu = [
22
{
33
name: 'Form',
44
children: [
5+
{
6+
name: 'AutoComplete',
7+
href: '/docs/primitives/autocomplete'
8+
},
59
{
610
name: 'Checkbox',
711
href: '/docs/primitives/checkbox'
812
},
13+
{
14+
name: 'InputNumber',
15+
href: '/docs/primitives/inputnumber'
16+
},
917
{
1018
name: 'InputOtp',
1119
href: '/docs/primitives/inputotp'
1220
},
21+
{
22+
name: 'InputTags',
23+
href: '/docs/primitives/inputtags'
24+
},
1325
{
1426
name: 'InputText',
1527
href: '/docs/primitives/inputtext'
1628
},
29+
{
30+
name: 'Listbox',
31+
href: '/docs/primitives/listbox'
32+
},
33+
{
34+
name: 'Password',
35+
href: '/docs/primitives/password'
36+
},
1737
{
1838
name: 'RadioButton',
1939
href: '/docs/primitives/radiobutton'
2040
},
41+
{
42+
name: 'Select',
43+
href: '/docs/primitives/select'
44+
},
2145
{
2246
name: 'Textarea',
2347
href: '/docs/primitives/textarea'
@@ -33,15 +57,32 @@ export const primitivesMenu = [
3357
}
3458
]
3559
},
36-
// {
37-
// name: 'Menu',
38-
// children: [
39-
// {
40-
// name: 'Menu',
41-
// href: '/docs/primitives/menu'
42-
// }
43-
// ]
44-
// },
60+
{
61+
name: 'Menu',
62+
children: [
63+
{
64+
name: 'CommandMenu',
65+
href: '/docs/primitives/commandmenu'
66+
}
67+
]
68+
},
69+
{
70+
name: 'Overlay',
71+
children: [
72+
{
73+
name: 'ConfirmPopup',
74+
href: '/docs/primitives/confirmpopup'
75+
},
76+
{
77+
name: 'Popover',
78+
href: '/docs/primitives/popover'
79+
}
80+
// {
81+
// name: 'Tooltip',
82+
// href: '/docs/primitives/tooltip'
83+
// }
84+
]
85+
},
4586
{
4687
name: 'Panel',
4788
children: [
@@ -69,6 +110,10 @@ export const primitivesMenu = [
69110
name: 'ScrollArea',
70111
href: '/docs/primitives/scrollarea'
71112
},
113+
{
114+
name: 'Splitter',
115+
href: '/docs/primitives/splitter'
116+
},
72117
{
73118
name: 'Tabs',
74119
href: '/docs/primitives/tabs'
@@ -114,6 +159,10 @@ export const primitivesMenu = [
114159
{
115160
name: 'Motion',
116161
href: '/docs/primitives/motion'
162+
},
163+
{
164+
name: 'Portal',
165+
href: '/docs/primitives/portal'
117166
}
118167
]
119168
}

‎apps/showcase/demo/headless/autocomplete/basic-demo.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
'use client';
2+
import { useAutoComplete, type useAutoCompleteCompleteEvent } from '@primereact/headless/autocomplete';
3+
import { useListboxOption } from '@primereact/headless/listbox';
4+
import { usePositioner } from '@primereact/headless/positioner';
5+
import * as React from 'react';
6+
7+
const countries = [
8+
'Argentina',
9+
'Australia',
10+
'Brazil',
11+
'Canada',
12+
'China',
13+
'Egypt',
14+
'France',
15+
'Germany',
16+
'India',
17+
'Italy',
18+
'Japan',
19+
'Mexico',
20+
'Netherlands',
21+
'Norway',
22+
'Poland',
23+
'South Korea',
24+
'Spain',
25+
'Sweden',
26+
'Switzerland',
27+
'Turkey',
28+
'United Kingdom',
29+
'United States'
30+
];
31+
32+
function OptionItem({ option, index, listbox }: { option: unknown; index: number; listbox: any }) {
33+
const { optionProps } = useListboxOption({ option, index, context: listbox });
34+
35+
return (
36+
<li
37+
{...optionProps}
38+
className="flex items-center px-3 py-2 rounded-md cursor-pointer select-none text-sm outline-none transition-[background-color] duration-200 text-surface-700 dark:text-surface-0 hover:bg-surface-50 dark:hover:bg-surface-800 data-[focused]:bg-surface-100 dark:data-[focused]:bg-surface-800 data-[selected]:bg-surface-100 dark:data-[selected]:bg-surface-800 data-[selected]:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-60"
39+
>
40+
{listbox.getOptionLabel(option)}
41+
</li>
42+
);
43+
}
44+
45+
export default function BasicDemo() {
46+
const [filteredCountries, setFilteredCountries] = React.useState<string[]>([]);
47+
48+
const search = (event: useAutoCompleteCompleteEvent) => {
49+
const query = event.query.toLowerCase();
50+
51+
setFilteredCountries(query ? countries.filter((country) => country.toLowerCase().includes(query)) : [...countries]);
52+
};
53+
54+
const { rootProps, inputProps, listProps, positionerProps, popupProps, state, listbox } = useAutoComplete({
55+
options: filteredCountries,
56+
onComplete: search
57+
});
58+
59+
usePositioner({
60+
anchor: state.anchorElement,
61+
content: state.positionerElement,
62+
side: 'bottom',
63+
sideOffset: 4,
64+
flip: true,
65+
shift: true
66+
});
67+
68+
return (
69+
<div className="flex justify-center">
70+
<div {...rootProps} className="relative w-full md:w-56">
71+
<input
72+
{...inputProps}
73+
placeholder="Search a country..."
74+
className="w-full px-3 py-2 text-sm bg-transparent border border-surface-200 dark:border-surface-700 rounded-lg outline-none text-surface-700 dark:text-surface-0 placeholder:text-surface-400 transition-[border-color] duration-200 focus:border-primary"
75+
/>
76+
{state.opened && (
77+
<div {...positionerProps}>
78+
<div
79+
{...popupProps}
80+
className="border border-surface-200 dark:border-surface-700 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-md overflow-hidden"
81+
>
82+
<ul {...listProps} className="list-none m-0 p-1 outline-none max-h-56 overflow-auto">
83+
{listbox?.getOptions().map((option: unknown, index: number) => (
84+
<OptionItem key={index} option={option} index={index} listbox={listbox} />
85+
))}
86+
</ul>
87+
{filteredCountries.length === 0 && <div className="px-3 py-2 text-sm text-surface-400">No countries found</div>}
88+
</div>
89+
</div>
90+
)}
91+
</div>
92+
</div>
93+
);
94+
}

0 commit comments

Comments
 (0)