jattac.libs.web.overflow-menu 0.0.28 → 0.0.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -147
- package/dist/Data/IOverflowMenuItem.d.ts +1 -0
- package/dist/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +76 -76
package/README.md
CHANGED
|
@@ -1,147 +1,54 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- **
|
|
12
|
-
- **
|
|
13
|
-
- **
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
</div>
|
|
56
|
-
);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export default App;
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## API and Props
|
|
63
|
-
|
|
64
|
-
The `OverflowMenu` component accepts the following props:
|
|
65
|
-
|
|
66
|
-
| Prop | Type | Required | Default | Description |
|
|
67
|
-
|-------------|-----------------------|----------|---------|------------------------------------------------------------------------------------------------------------|
|
|
68
|
-
| `items` | `IOverflowMenuItem[]` | Yes | - | An array of objects that define the menu items. |
|
|
69
|
-
| `icon` | `ReactNode` | No | `'⋮'` | A custom trigger icon to open the menu. |
|
|
70
|
-
| `className` | `string` | No | `''` | A CSS class to apply to the trigger button for custom styling. |
|
|
71
|
-
| `portal` | `HTMLElement` | No | `null` | A DOM element to render the menu into. Use this to prevent z-index issues with parent containers. |
|
|
72
|
-
|
|
73
|
-
### The `IOverflowMenuItem` Interface
|
|
74
|
-
|
|
75
|
-
Each item in the `items` array must conform to this interface:
|
|
76
|
-
|
|
77
|
-
```typescript
|
|
78
|
-
interface IOverflowMenuItem {
|
|
79
|
-
content: React.ReactNode; // The content to display for the item.
|
|
80
|
-
onClick?: () => void; // Function to call when the item is clicked.
|
|
81
|
-
}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
---
|
|
85
|
-
|
|
86
|
-
## Advanced Usage
|
|
87
|
-
|
|
88
|
-
### Custom Trigger Icon
|
|
89
|
-
|
|
90
|
-
You can provide any `ReactNode` as the trigger icon. This is great for using a custom SVG or an icon from a library like `react-icons`.
|
|
91
|
-
|
|
92
|
-
```jsx
|
|
93
|
-
import { BsThreeDotsVertical } from 'react-icons/bs';
|
|
94
|
-
|
|
95
|
-
// ...
|
|
96
|
-
<OverflowMenu items={menuItems} icon={<BsThreeDotsVertical size={24} />} />
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### Complex Item Content
|
|
100
|
-
|
|
101
|
-
The `content` property of a menu item can be any valid `ReactNode`. This allows you to create rich menu items with icons, styled text, and more.
|
|
102
|
-
|
|
103
|
-
```jsx
|
|
104
|
-
import { FiEdit, FiLogOut } from 'react-icons/fi';
|
|
105
|
-
|
|
106
|
-
const richMenuItems: IOverflowMenuItem[] = [
|
|
107
|
-
{
|
|
108
|
-
content: (
|
|
109
|
-
<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
110
|
-
<FiEdit /> Edit Profile
|
|
111
|
-
</span>
|
|
112
|
-
),
|
|
113
|
-
onClick: () => alert('Editing Profile!'),
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
content: (
|
|
117
|
-
<span style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'red' }}>
|
|
118
|
-
<FiLogOut /> Log Out
|
|
119
|
-
</span>
|
|
120
|
-
),
|
|
121
|
-
onClick: () => alert('Logging Out!'),
|
|
122
|
-
},
|
|
123
|
-
];
|
|
124
|
-
|
|
125
|
-
// ...
|
|
126
|
-
<OverflowMenu items={richMenuItems} />
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
---
|
|
130
|
-
|
|
131
|
-
## Styling and Customization
|
|
132
|
-
|
|
133
|
-
The component's styling is primarily controlled via its internal CSS module (`OverflowMenu.module.css`). While direct customization through CSS variables is no longer supported, you can override the component's default styles by targeting its CSS classes in your own stylesheets.
|
|
134
|
-
|
|
135
|
-
For example, to change the background of the menu:
|
|
136
|
-
|
|
137
|
-
```css
|
|
138
|
-
/* In your application's CSS file */
|
|
139
|
-
.your-custom-wrapper-class .OverflowMenu-module_menu__n8uKD { /* Use the hashed class name from your build output */
|
|
140
|
-
background: #f0f0f0; /* Your desired background */
|
|
141
|
-
}
|
|
142
|
-
```
|
|
143
|
-
*Note: The exact hashed class names (e.g., `OverflowMenu-module_menu__n8uKD`) will depend on your build process. You may need to inspect the rendered HTML to find them.*
|
|
144
|
-
|
|
145
|
-
## License
|
|
146
|
-
|
|
147
|
-
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|
|
1
|
+
# Jattac Overflow Menu
|
|
2
|
+
|
|
3
|
+
A high-performance, accessible, and customizable React overflow menu component designed for modern web applications.
|
|
4
|
+
|
|
5
|
+
The Jattac Overflow Menu provides a robust solution for managing secondary actions in compact UI areas such as table rows, headers, and toolbars. Built on top of Radix UI primitives and animated with Framer Motion, it offers a refined user experience with full WAI-ARIA compliance and a modern frosted-glass aesthetic.
|
|
6
|
+
|
|
7
|
+
## Key Features
|
|
8
|
+
|
|
9
|
+
- **Multi-Level Support:** Seamlessly handle nested submenus with recursive rendering and consistent animations.
|
|
10
|
+
- **Accessibility First:** Fully compliant with WAI-ARIA Menu Button patterns, including complete keyboard navigation and focus management.
|
|
11
|
+
- **Advanced Animations:** Smooth, spring-based interactions and staggered entry effects for a professional feel.
|
|
12
|
+
- **Portal Rendering:** Optional DOM portal support to resolve z-index and overflow clipping issues in complex layouts.
|
|
13
|
+
- **Developer-Centric:** Built with TypeScript for strict type safety and a flexible API that supports rich React nodes as menu content.
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
Install the package along with its required peer dependencies:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install jattac.libs.web.overflow-menu react react-dom framer-motion @radix-ui/react-dropdown-menu
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
The following example demonstrates a basic implementation with three items.
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import React from 'react';
|
|
29
|
+
import OverflowMenu, { IOverflowMenuItem } from 'jattac.libs.web.overflow-menu';
|
|
30
|
+
import 'jattac.libs.web.overflow-menu/dist/index.css';
|
|
31
|
+
|
|
32
|
+
const App = () => {
|
|
33
|
+
const items: IOverflowMenuItem[] = [
|
|
34
|
+
{ content: 'Edit', onClick: () => console.log('Edit') },
|
|
35
|
+
{ content: 'Settings', onClick: () => console.log('Settings') },
|
|
36
|
+
{ content: 'Delete', onClick: () => console.log('Delete') },
|
|
37
|
+
];
|
|
38
|
+
|
|
39
|
+
return <OverflowMenu items={items} />;
|
|
40
|
+
};
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Documentation Index
|
|
44
|
+
|
|
45
|
+
1. [Cookbook: Practical Examples](./docs/examples.md) - **Start here** to learn through real-world scenarios.
|
|
46
|
+
2. [Feature Showcase](./docs/features.md) - A high-level overview of available capabilities.
|
|
47
|
+
3. [API Reference](./docs/api.md) - Detailed technical specifications for components and types.
|
|
48
|
+
4. [Configuration Guide](./docs/configuration.md) - Customization, styling, and global settings.
|
|
49
|
+
5. [Development Guide](./docs/development.md) - Instructions for contributors and local setup.
|
|
50
|
+
6. [Migration Guide](./docs/breaking-changes.md) - Handling updates and breaking changes.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
[Next: Cookbook](./docs/examples.md)
|