Skip to content

Commit f4b5c7c

Browse files
mertsincanmertsincan
committed
refactor: update checkbox, radiobutton, listbox, focustrap and positioner component/api
1 parent 13d5293 commit f4b5c7c

318 files changed

Lines changed: 3174 additions & 1642 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/__store__/index.tsx‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
9595
'component': React.lazy(() => import('demo/styled/accordion/disabled-demo')),
9696
'filePath': 'demo/styled/accordion/disabled-demo.tsx',
9797
},
98+
'indicator-demo': {
99+
'component': React.lazy(() => import('demo/styled/accordion/indicator-demo')),
100+
'filePath': 'demo/styled/accordion/indicator-demo.tsx',
101+
},
98102
'multiple-demo': {
99103
'component': React.lazy(() => import('demo/styled/accordion/multiple-demo')),
100104
'filePath': 'demo/styled/accordion/multiple-demo.tsx',
@@ -793,6 +797,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
793797
'component': React.lazy(() => import('demo/styled/fieldset/fieldset-pt')),
794798
'filePath': 'demo/styled/fieldset/fieldset-pt.tsx',
795799
},
800+
'indicator-demo': {
801+
'component': React.lazy(() => import('demo/styled/fieldset/indicator-demo')),
802+
'filePath': 'demo/styled/fieldset/indicator-demo.tsx',
803+
},
796804
'toggleable-demo': {
797805
'component': React.lazy(() => import('demo/styled/fieldset/toggleable-demo')),
798806
'filePath': 'demo/styled/fieldset/toggleable-demo.tsx',
@@ -861,6 +869,18 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
861869
'component': React.lazy(() => import('demo/styled/focustrap/basic-demo')),
862870
'filePath': 'demo/styled/focustrap/basic-demo.tsx',
863871
},
872+
'disabled-demo': {
873+
'component': React.lazy(() => import('demo/styled/focustrap/disabled-demo')),
874+
'filePath': 'demo/styled/focustrap/disabled-demo.tsx',
875+
},
876+
'initial-focus-demo': {
877+
'component': React.lazy(() => import('demo/styled/focustrap/initial-focus-demo')),
878+
'filePath': 'demo/styled/focustrap/initial-focus-demo.tsx',
879+
},
880+
'on-escape-demo': {
881+
'component': React.lazy(() => import('demo/styled/focustrap/on-escape-demo')),
882+
'filePath': 'demo/styled/focustrap/on-escape-demo.tsx',
883+
},
864884
},
865885
'gallery': {
866886
'basic-demo': {
@@ -1203,9 +1223,13 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
12031223
'component': React.lazy(() => import('demo/styled/listbox/checkmark-selection-demo')),
12041224
'filePath': 'demo/styled/listbox/checkmark-selection-demo.tsx',
12051225
},
1206-
'custom-selection-demo': {
1207-
'component': React.lazy(() => import('demo/styled/listbox/custom-selection-demo')),
1208-
'filePath': 'demo/styled/listbox/custom-selection-demo.tsx',
1226+
'controlled-demo': {
1227+
'component': React.lazy(() => import('demo/styled/listbox/controlled-demo')),
1228+
'filePath': 'demo/styled/listbox/controlled-demo.tsx',
1229+
},
1230+
'custom-group-demo': {
1231+
'component': React.lazy(() => import('demo/styled/listbox/custom-group-demo')),
1232+
'filePath': 'demo/styled/listbox/custom-group-demo.tsx',
12091233
},
12101234
'disabled-demo': {
12111235
'component': React.lazy(() => import('demo/styled/listbox/disabled-demo')),
@@ -1215,10 +1239,6 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
12151239
'component': React.lazy(() => import('demo/styled/listbox/filter-demo')),
12161240
'filePath': 'demo/styled/listbox/filter-demo.tsx',
12171241
},
1218-
'group-demo': {
1219-
'component': React.lazy(() => import('demo/styled/listbox/group-demo')),
1220-
'filePath': 'demo/styled/listbox/group-demo.tsx',
1221-
},
12221242
'invalid-demo': {
12231243
'component': React.lazy(() => import('demo/styled/listbox/invalid-demo')),
12241244
'filePath': 'demo/styled/listbox/invalid-demo.tsx',
@@ -1235,6 +1255,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
12351255
'component': React.lazy(() => import('demo/styled/listbox/option-demo')),
12361256
'filePath': 'demo/styled/listbox/option-demo.tsx',
12371257
},
1258+
'simple-group-demo': {
1259+
'component': React.lazy(() => import('demo/styled/listbox/simple-group-demo')),
1260+
'filePath': 'demo/styled/listbox/simple-group-demo.tsx',
1261+
},
12381262
},
12391263
'menu': {
12401264
'apps-demo': {
@@ -1415,6 +1439,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
14151439
'component': React.lazy(() => import('demo/styled/panel/basic-demo')),
14161440
'filePath': 'demo/styled/panel/basic-demo.tsx',
14171441
},
1442+
'indicator-demo': {
1443+
'component': React.lazy(() => import('demo/styled/panel/indicator-demo')),
1444+
'filePath': 'demo/styled/panel/indicator-demo.tsx',
1445+
},
14181446
'panel-pt': {
14191447
'component': React.lazy(() => import('demo/styled/panel/panel-pt')),
14201448
'filePath': 'demo/styled/panel/panel-pt.tsx',

‎apps/showcase/assets/apidoc/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -912779,7 +912779,7 @@
912779912779
}
912780912780
}
912781912781
},
912782-
"listboxselection": {
912782+
"listboxoptionindicator": {
912783912783
"description": "ListboxSelection is a component that displays the selection indicator (checkmark or checkbox) for each option in the Listbox component.\n\n[Live Demo](https://www.primereact.org/listbox/)",
912784912784
"interfaces": {
912785912785
"description": "Defines the custom interfaces used by the module.",

‎apps/showcase/demo/styled/accordion/basic-demo.tsx‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,49 @@ import { Accordion } from '@primereact/ui/accordion';
33

44
export default function BasicDemo() {
55
return (
6-
<div>
7-
<Accordion.Root className="max-w-md mx-auto">
8-
<Accordion.Panel value="1">
9-
<Accordion.Header>
10-
<Accordion.Trigger className="flex justify-between items-center w-full">
11-
What is this service about?
12-
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
13-
</Accordion.Trigger>
14-
</Accordion.Header>
15-
<Accordion.Content>
16-
<p className="text-sm">
17-
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and
18-
powerful analytics. Whether you’re working solo or in a team, it’s built to scale with your needs.
19-
</p>
20-
</Accordion.Content>
21-
</Accordion.Panel>
22-
<Accordion.Panel value="2">
23-
<Accordion.Header>
24-
<Accordion.Trigger className="flex justify-between items-center w-full">
25-
Is my data secure?
26-
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
27-
</Accordion.Trigger>
28-
</Accordion.Header>
29-
<Accordion.Content>
30-
<p className="text-sm">
31-
Yes. We use end-to-end encryption and follow industry best practices to ensure your data is protected. Your information is
32-
stored on secure servers and regularly backed up.
33-
</p>
34-
</Accordion.Content>
35-
</Accordion.Panel>
36-
<Accordion.Panel value="3">
37-
<Accordion.Header>
38-
<Accordion.Trigger className="flex justify-between items-center w-full">
39-
Can I upgrade or downgrade my plan later?
40-
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
41-
</Accordion.Trigger>
42-
</Accordion.Header>
43-
<Accordion.Content>
44-
<p className="text-sm">
45-
Absolutely. You can change your subscription plan at any time from your account settings. Changes take effect immediately,
46-
and any billing adjustments are handled automatically.
47-
</p>
48-
</Accordion.Content>
49-
</Accordion.Panel>
50-
</Accordion.Root>
51-
</div>
6+
<Accordion.Root className="max-w-md mx-auto">
7+
<Accordion.Panel value="1">
8+
<Accordion.Header>
9+
<Accordion.Trigger className="flex justify-between items-center w-full">
10+
What is this service about?
11+
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
12+
</Accordion.Trigger>
13+
</Accordion.Header>
14+
<Accordion.Content>
15+
<p className="text-sm">
16+
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and powerful
17+
analytics. Whether you’re working solo or in a team, it’s built to scale with your needs.
18+
</p>
19+
</Accordion.Content>
20+
</Accordion.Panel>
21+
<Accordion.Panel value="2">
22+
<Accordion.Header>
23+
<Accordion.Trigger className="flex justify-between items-center w-full">
24+
Is my data secure?
25+
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
26+
</Accordion.Trigger>
27+
</Accordion.Header>
28+
<Accordion.Content>
29+
<p className="text-sm">
30+
Yes. We use end-to-end encryption and follow industry best practices to ensure your data is protected. Your information is
31+
stored on secure servers and regularly backed up.
32+
</p>
33+
</Accordion.Content>
34+
</Accordion.Panel>
35+
<Accordion.Panel value="3">
36+
<Accordion.Header>
37+
<Accordion.Trigger className="flex justify-between items-center w-full">
38+
Can I upgrade or downgrade my plan later?
39+
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
40+
</Accordion.Trigger>
41+
</Accordion.Header>
42+
<Accordion.Content>
43+
<p className="text-sm">
44+
Absolutely. You can change your subscription plan at any time from your account settings. Changes take effect immediately, and
45+
any billing adjustments are handled automatically.
46+
</p>
47+
</Accordion.Content>
48+
</Accordion.Panel>
49+
</Accordion.Root>
5250
);
5351
}

‎apps/showcase/demo/styled/accordion/controlled-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function ControlledDemo() {
3939
<Accordion.Content>
4040
<p className="text-sm">
4141
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and
42-
powerful analytics. Whether you&apos;re working solo or in a team, it&apos;s built to scale with your needs.
42+
powerful analytics.
4343
</p>
4444
</Accordion.Content>
4545
</Accordion.Panel>

‎apps/showcase/demo/styled/accordion/indicator-demo.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { ChevronDown } from '@primeicons/react/chevron-down';
2+
import { Minus } from '@primeicons/react/minus';
3+
import { Plus } from '@primeicons/react/plus';
4+
import { Accordion } from '@primereact/ui/accordion';
5+
6+
export default function IndicatorDemo() {
7+
return (
8+
<div className="flex flex-col gap-8">
9+
<div>
10+
<h3 className="text-sm font-medium text-surface-500 mb-2">Match open / closed</h3>
11+
<Accordion.Root className="max-w-md mx-auto">
12+
<Accordion.Panel value="1">
13+
<Accordion.Header>
14+
<Accordion.Trigger className="flex justify-between items-center w-full">
15+
What is this service about?
16+
<Accordion.Indicator match="open">
17+
<Minus />
18+
</Accordion.Indicator>
19+
<Accordion.Indicator match="closed">
20+
<Plus />
21+
</Accordion.Indicator>
22+
</Accordion.Trigger>
23+
</Accordion.Header>
24+
<Accordion.Content>
25+
<p className="text-sm">
26+
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and
27+
powerful analytics. Whether you&apos;re working solo or in a team, it&apos;s built to scale with your needs.
28+
</p>
29+
</Accordion.Content>
30+
</Accordion.Panel>
31+
<Accordion.Panel value="2">
32+
<Accordion.Header>
33+
<Accordion.Trigger className="flex justify-between items-center w-full">
34+
Is my data secure?
35+
<Accordion.Indicator match="open">
36+
<Minus />
37+
</Accordion.Indicator>
38+
<Accordion.Indicator match="closed">
39+
<Plus />
40+
</Accordion.Indicator>
41+
</Accordion.Trigger>
42+
</Accordion.Header>
43+
<Accordion.Content>
44+
<p className="text-sm">
45+
Yes. We use end-to-end encryption and follow industry best practices to ensure your data is protected. Your
46+
information is stored on secure servers and regularly backed up.
47+
</p>
48+
</Accordion.Content>
49+
</Accordion.Panel>
50+
<Accordion.Panel value="3">
51+
<Accordion.Header>
52+
<Accordion.Trigger className="flex justify-between items-center w-full">
53+
Can I upgrade or downgrade my plan later?
54+
<Accordion.Indicator match="open">
55+
<Minus />
56+
</Accordion.Indicator>
57+
<Accordion.Indicator match="closed">
58+
<Plus />
59+
</Accordion.Indicator>
60+
</Accordion.Trigger>
61+
</Accordion.Header>
62+
<Accordion.Content>
63+
<p className="text-sm">
64+
Absolutely. You can change your subscription plan at any time from your account settings. Changes take effect
65+
immediately, and any billing adjustments are handled automatically.
66+
</p>
67+
</Accordion.Content>
68+
</Accordion.Panel>
69+
</Accordion.Root>
70+
</div>
71+
72+
<div>
73+
<h3 className="text-sm font-medium text-surface-500 mb-2">CSS-only with data attributes</h3>
74+
<Accordion.Root className="max-w-md mx-auto">
75+
<Accordion.Panel value="1">
76+
<Accordion.Header>
77+
<Accordion.Trigger className="flex justify-between items-center w-full">
78+
What is this service about?
79+
<Accordion.Indicator>
80+
<ChevronDown className="transition-transform duration-200 in-data-open:rotate-180" />
81+
</Accordion.Indicator>
82+
</Accordion.Trigger>
83+
</Accordion.Header>
84+
<Accordion.Content>
85+
<p className="text-sm">
86+
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and
87+
powerful analytics. Whether you&apos;re working solo or in a team, it&apos;s built to scale with your needs.
88+
</p>
89+
</Accordion.Content>
90+
</Accordion.Panel>
91+
<Accordion.Panel value="2">
92+
<Accordion.Header>
93+
<Accordion.Trigger className="flex justify-between items-center w-full">
94+
Is my data secure?
95+
<Accordion.Indicator>
96+
<ChevronDown className="transition-transform duration-200 in-data-open:rotate-180" />
97+
</Accordion.Indicator>
98+
</Accordion.Trigger>
99+
</Accordion.Header>
100+
<Accordion.Content>
101+
<p className="text-sm">
102+
Yes. We use end-to-end encryption and follow industry best practices to ensure your data is protected. Your
103+
information is stored on secure servers and regularly backed up.
104+
</p>
105+
</Accordion.Content>
106+
</Accordion.Panel>
107+
</Accordion.Root>
108+
</div>
109+
</div>
110+
);
111+
}

0 commit comments

Comments
 (0)