Skip to content

Commit 0cc68b5

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: headless and primitive docs updated
1 parent caba744 commit 0cc68b5

File tree

112 files changed

+1763
-1775
lines changed

Some content is hidden

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

112 files changed

+1763
-1775
lines changed

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@ export default function BasicDemo() {
2525
className="flex items-center justify-between w-full py-3 px-4 text-left cursor-pointer text-muted-color hover:text-color transition focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary"
2626
>
2727
<span>{title}</span>
28-
<span
29-
{...panel.indicatorProps}
30-
className="transition-transform duration-200 data-[open]:rotate-180"
31-
>
28+
<span {...panel.indicatorProps} className="transition-transform duration-200 data-[open]:rotate-180">
3229
<ChevronDown />
3330
</span>
3431
</button>

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

Lines changed: 65 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
'use client';
2+
import { ChevronRight } from '@primeicons/react/chevron-right';
23
import { Clipboard } from '@primeicons/react/clipboard';
34
import { Copy } from '@primeicons/react/copy';
45
import { ExternalLink } from '@primeicons/react/external-link';
6+
import { Folder } from '@primeicons/react/folder';
57
import { PenToSquare } from '@primeicons/react/pen-to-square';
8+
import { Refresh } from '@primeicons/react/refresh';
9+
import { Search } from '@primeicons/react/search';
610
import { Trash } from '@primeicons/react/trash';
711
import { useContextMenu } from '@primereact/headless/contextmenu';
12+
import { useContextMenuSub } from '@primereact/headless/contextmenu/sub';
813
import { usePortal } from '@primereact/headless/portal';
914
import { usePositioner } from '@primereact/headless/positioner';
1015
import { createPortal } from 'react-dom';
1116

1217
export default function BasicDemo() {
1318
const contextmenu = useContextMenu();
14-
const { rootProps, triggerProps, popupProps, positionerProps, arrowProps, getListProps, getItemProps } = contextmenu;
19+
const { rootProps, triggerProps, popupProps, positionerProps, getListProps, getItemProps } = contextmenu;
20+
const viewSub = useContextMenuSub();
21+
const viewSubTriggerProps = contextmenu.getSubTriggerProps({ value: 'view', sub: viewSub.menusub });
1522
const portal = usePortal();
1623

1724
usePositioner({
@@ -25,6 +32,22 @@ export default function BasicDemo() {
2532
align: 'start'
2633
});
2734

35+
usePositioner({
36+
anchor: viewSub.menusub?.popover?.state.anchorElement,
37+
content: viewSub.menusub?.popover?.state.positionerElement,
38+
sideOffset: 0,
39+
flip: true,
40+
shift: true,
41+
side: 'right',
42+
align: 'start'
43+
});
44+
45+
const itemClass =
46+
'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer text-surface-700 dark:text-surface-200 hover:bg-surface-50 dark:hover:bg-surface-800 data-[focused]:bg-surface-100 dark:data-[focused]:bg-surface-700 text-xs select-none';
47+
const separatorClass = 'border-t border-surface-200 dark:border-surface-700 my-0.5';
48+
const listClass = 'list-none m-0 p-1 flex flex-col gap-0.5 outline-none w-44';
49+
const popupClass = 'border border-surface-200 dark:border-surface-700 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-lg';
50+
2851
return (
2952
<div className="flex justify-center">
3053
<div {...rootProps}>
@@ -38,49 +61,65 @@ export default function BasicDemo() {
3861
contextmenu.state.open &&
3962
createPortal(
4063
<div {...positionerProps}>
41-
<div
42-
{...popupProps}
43-
className="border border-surface-200 dark:border-surface-700 rounded-lg bg-surface-0 dark:bg-surface-900 shadow-lg"
44-
>
45-
<div {...arrowProps} />
46-
<ul {...getListProps()} className="list-none m-0 p-1 flex flex-col gap-0.5 outline-none w-48">
47-
<li
48-
{...getItemProps({ value: 'copy' })}
49-
className="flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer text-surface-700 dark:text-surface-200 hover:bg-surface-50 dark:hover:bg-surface-800 data-[focused]:bg-surface-100 dark:data-[focused]:bg-surface-700 text-sm select-none"
50-
>
64+
<div {...popupProps} className={popupClass}>
65+
<ul {...getListProps()} className={listClass}>
66+
<li {...getItemProps({ value: 'copy' })} className={itemClass}>
5167
<Copy className="w-4! h-4! text-surface-500" />
5268
Copy
5369
</li>
54-
<li
55-
{...getItemProps({ value: 'paste' })}
56-
className="flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer text-surface-700 dark:text-surface-200 hover:bg-surface-50 dark:hover:bg-surface-800 data-[focused]:bg-surface-100 dark:data-[focused]:bg-surface-700 text-sm select-none"
57-
>
70+
<li {...getItemProps({ value: 'paste' })} className={itemClass}>
5871
<Clipboard className="w-4! h-4! text-surface-500" />
5972
Paste
6073
</li>
6174

62-
<li {...contextmenu.menu.separatorProps} className="border-t border-surface-200 dark:border-surface-700 my-1" />
75+
<li className={separatorClass} {...contextmenu.menu.separatorProps} />
6376

64-
<li
65-
{...getItemProps({ value: 'rename' })}
66-
className="flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer text-surface-700 dark:text-surface-200 hover:bg-surface-50 dark:hover:bg-surface-800 data-[focused]:bg-surface-100 dark:data-[focused]:bg-surface-700 text-sm select-none"
67-
>
77+
<li {...viewSub.subProps}>
78+
<div {...viewSubTriggerProps} className={itemClass}>
79+
<Folder className="w-4! h-4! text-surface-500" />
80+
View
81+
<span className="ml-auto">
82+
<ChevronRight className="w-3.5 h-3.5 text-surface-400" />
83+
</span>
84+
</div>
85+
{viewSub.state.open && (
86+
<div {...viewSub.menusub?.popover?.positionerProps}>
87+
<div className={popupClass}>
88+
<ul {...contextmenu.getListProps({ value: 'view', sub: viewSub.menusub })} className={listClass}>
89+
<li {...getItemProps({ value: 'zoom-in' })} className={itemClass}>
90+
<Search className="w-4! h-4! text-surface-500" />
91+
Zoom In
92+
</li>
93+
<li {...getItemProps({ value: 'zoom-out' })} className={itemClass}>
94+
<Search className="w-4! h-4! text-surface-500" />
95+
Zoom Out
96+
</li>
97+
<li {...getItemProps({ value: 'reload' })} className={itemClass}>
98+
<Refresh className="w-4! h-4! text-surface-500" />
99+
Reload
100+
</li>
101+
</ul>
102+
</div>
103+
</div>
104+
)}
105+
</li>
106+
107+
<li className={separatorClass} {...contextmenu.menu.separatorProps} />
108+
109+
<li {...getItemProps({ value: 'rename' })} className={itemClass}>
68110
<PenToSquare className="w-4! h-4! text-surface-500" />
69111
Rename
70112
</li>
71-
<li
72-
{...getItemProps({ value: 'open-link' })}
73-
className="flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer text-surface-700 dark:text-surface-200 hover:bg-surface-50 dark:hover:bg-surface-800 data-[focused]:bg-surface-100 dark:data-[focused]:bg-surface-700 text-sm select-none"
74-
>
113+
<li {...getItemProps({ value: 'open-link' })} className={itemClass}>
75114
<ExternalLink className="w-4! h-4! text-surface-500" />
76115
Open Link
77116
</li>
78117

79-
<li {...contextmenu.menu.separatorProps} className="border-t border-surface-200 dark:border-surface-700 my-1" />
118+
<li className={separatorClass} {...contextmenu.menu.separatorProps} />
80119

81120
<li
82121
{...getItemProps({ value: 'delete' })}
83-
className="flex items-center gap-2 px-3 py-2 rounded-md cursor-pointer text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 data-[focused]:bg-red-100 dark:data-[focused]:bg-red-900 text-sm select-none"
122+
className="flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 data-[focused]:bg-red-100 dark:data-[focused]:bg-red-900 text-xs select-none"
84123
>
85124
<Trash className="w-4! h-4!" />
86125
Delete

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

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Times } from '@primeicons/react/times';
44
import { useMotion } from '@primereact/core/motion';
55
import { useDrawer } from '@primereact/headless/drawer';
66
import { usePortal } from '@primereact/headless/portal';
7-
import * as React from 'react';
87
import { createPortal } from 'react-dom';
98

109
const navItems = [
@@ -18,11 +17,10 @@ export default function BasicDemo() {
1817
const { triggerProps, backdropProps, popupProps, closeProps, headerProps, rootProps, backdropMotionProps, state } = useDrawer();
1918
const portal = usePortal();
2019

21-
const popupRef = React.useRef<HTMLDivElement>(null);
2220
const popupMotion = useMotion({
2321
name: 'p-drawer',
2422
appear: true,
25-
elementRef: popupRef,
23+
elementRef: state.popupElement,
2624
visible: state.open,
2725
enterFromClassName: '-translate-x-full',
2826
enterActiveClassName: 'transition-transform duration-200',
@@ -34,6 +32,7 @@ export default function BasicDemo() {
3432

3533
const backdropMotion = useMotion({
3634
...backdropMotionProps.motionProps,
35+
elementRef: state.backdropElement,
3736
visible: backdropMotionProps.visible,
3837
enterFromClassName: 'opacity-0',
3938
enterActiveClassName: 'transition-opacity duration-200',
@@ -53,40 +52,41 @@ export default function BasicDemo() {
5352
</button>
5453

5554
{portal.state.mounted &&
56-
popupMotion.state.rendered &&
55+
state.rendered &&
5756
createPortal(
58-
<div className="fixed inset-0 z-1100">
57+
<>
5958
{backdropMotion.state.rendered && <div {...backdropProps} className="fixed inset-0 bg-black/50" />}
6059
{popupMotion.state.rendered && (
61-
<div
62-
{...popupProps}
63-
ref={popupRef}
64-
className="fixed top-0 left-0 h-full w-80 bg-surface-0 dark:bg-surface-900 shadow-2xl flex flex-col z-50"
65-
>
66-
<div {...headerProps} className="flex items-center justify-between p-4 border-b border-surface">
67-
<span className="text-lg font-semibold">Navigation</span>
68-
<button
69-
{...closeProps}
70-
className="inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
71-
>
72-
<Times />
73-
</button>
60+
<>
61+
<div
62+
{...popupProps}
63+
className="fixed top-0 left-0 h-full w-80 bg-surface-0 dark:bg-surface-900 shadow-2xl flex flex-col"
64+
>
65+
<div {...headerProps} className="flex items-center justify-between p-4 border-b border-surface">
66+
<span className="text-lg font-semibold">Navigation</span>
67+
<button
68+
{...closeProps}
69+
className="inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
70+
>
71+
<Times />
72+
</button>
73+
</div>
74+
<nav className="flex-1 p-3">
75+
<ul className="list-none m-0 p-0">
76+
{navItems.map((item) => (
77+
<li key={item.label}>
78+
<a className="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-800 transition text-sm font-medium">
79+
<i className={`${item.icon} text-base`} />
80+
{item.label}
81+
</a>
82+
</li>
83+
))}
84+
</ul>
85+
</nav>
7486
</div>
75-
<nav className="flex-1 p-3">
76-
<ul className="list-none m-0 p-0">
77-
{navItems.map((item) => (
78-
<li key={item.label}>
79-
<a className="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-800 transition text-sm font-medium">
80-
<i className={`${item.icon} text-base`} />
81-
{item.label}
82-
</a>
83-
</li>
84-
))}
85-
</ul>
86-
</nav>
87-
</div>
87+
</>
8888
)}
89-
</div>,
89+
</>,
9090
document.body
9191
)}
9292
</div>

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,7 @@ export default function BasicDemo() {
5353
<span className={getSelectedOptionLabel() ? '' : 'text-surface-400'}>
5454
{(getSelectedOptionLabel() as string) ?? 'Select a Country'}
5555
</span>
56-
<span
57-
{...indicatorProps}
58-
className="flex items-center transition-transform duration-200 data-open:rotate-180"
59-
>
56+
<span {...indicatorProps} className="flex items-center transition-transform duration-200 data-open:rotate-180">
6057
<ChevronDown className="w-4 h-4" />
6158
</span>
6259
</button>

‎apps/showcase/demo/primitive/contextmenu/basic-demo.module.css‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,22 @@
2828
.list {
2929
display: flex;
3030
flex-direction: column;
31-
gap: 2px;
31+
gap: 1px;
3232
list-style: none;
3333
margin: 0;
3434
padding: 0.25rem;
3535
outline: 0 none;
36-
width: 12rem;
36+
width: 11rem;
3737
}
3838

3939
.item {
4040
display: flex;
4141
align-items: center;
4242
gap: 0.5rem;
43-
padding: 0.5rem 0.75rem;
43+
padding: 0.375rem 0.5rem;
4444
border-radius: 0.375rem;
4545
cursor: pointer;
46-
font-size: 0.875rem;
46+
font-size: 0.75rem;
4747
color: var(--p-text-color);
4848
user-select: none;
4949
transition: background-color 200ms ease;
@@ -67,6 +67,44 @@
6767
outline-offset: -1px;
6868
}
6969

70+
.subtrigger {
71+
display: flex;
72+
align-items: center;
73+
gap: 0.5rem;
74+
padding: 0.375rem 0.5rem;
75+
border-radius: 0.375rem;
76+
cursor: pointer;
77+
font-size: 0.75rem;
78+
color: var(--p-text-color);
79+
user-select: none;
80+
transition: background-color 200ms ease;
81+
}
82+
83+
.subtrigger:hover {
84+
background-color: light-dark(var(--p-surface-50), var(--p-surface-800));
85+
}
86+
87+
.subtrigger[data-focused] {
88+
background-color: light-dark(var(--p-surface-100), var(--p-surface-700));
89+
}
90+
91+
.subtrigger[data-disabled] {
92+
pointer-events: none;
93+
opacity: 0.6;
94+
}
95+
96+
.subtrigger:focus-visible {
97+
outline: 1px solid var(--p-primary-color);
98+
outline-offset: -1px;
99+
}
100+
101+
.indicator {
102+
display: flex;
103+
align-items: center;
104+
margin-left: auto;
105+
color: var(--p-text-muted-color);
106+
}
107+
70108
.itemDanger {
71109
composes: item;
72110
color: light-dark(#dc2626, #f87171);
@@ -89,5 +127,5 @@
89127
.separator {
90128
border: none;
91129
border-top: 1px solid var(--p-content-border-color);
92-
margin: 0.25rem 0;
130+
margin: 0.125rem 0;
93131
}

0 commit comments

Comments
 (0)