@versini/ui-menu 4.0.9 → 4.0.11
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 +115 -6
- package/dist/index.js +3 -3
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -4,14 +4,24 @@
|
|
|
4
4
|
|
|
5
5
|
> Accessible and flexible React menu components built with TypeScript and TailwindCSS.
|
|
6
6
|
|
|
7
|
-
The Menu package provides dropdown menus and navigation components with full keyboard navigation, focus management, and
|
|
8
|
-
|
|
7
|
+
The Menu package provides dropdown menus and navigation components with full keyboard navigation, focus management, theming for triggers, and composable items / separators.
|
|
9
8
|
|
|
10
9
|
## Table of Contents
|
|
11
10
|
|
|
12
11
|
- [Features](#features)
|
|
13
12
|
- [Installation](#installation)
|
|
14
13
|
- [Usage](#usage)
|
|
14
|
+
- [Examples](#examples)
|
|
15
|
+
- [API](#api)
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- **📋 Composable**: `Menu`, `MenuItem`, `MenuSeparator`, `MenuGroupLabel`
|
|
20
|
+
- **♿ Accessible**: Built with Floating UI & ARIA roles for robust a11y
|
|
21
|
+
- **⌨️ Keyboard Support**: Arrow navigation, typeahead matching, ESC / click outside close
|
|
22
|
+
- **🎨 Theme & Focus Modes**: Trigger inherits color + separate focus styling
|
|
23
|
+
- **🧭 Smart Positioning**: Auto flip / shift to remain within viewport
|
|
24
|
+
- **🧪 Type Safe**: Strongly typed props & label-based typeahead
|
|
15
25
|
|
|
16
26
|
## Installation
|
|
17
27
|
|
|
@@ -19,7 +29,7 @@ The Menu package provides dropdown menus and navigation components with full key
|
|
|
19
29
|
npm install @versini/ui-menu
|
|
20
30
|
```
|
|
21
31
|
|
|
22
|
-
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [
|
|
32
|
+
> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [installation documentation](https://versini-org.github.io/ui-components/?path=/docs/getting-started-installation--docs) for complete setup instructions.
|
|
23
33
|
|
|
24
34
|
## Usage
|
|
25
35
|
|
|
@@ -39,10 +49,109 @@ function App() {
|
|
|
39
49
|
</ButtonIcon>
|
|
40
50
|
}
|
|
41
51
|
>
|
|
42
|
-
<MenuItem label="Profile" onClick={() => console.log(
|
|
43
|
-
<MenuItem label="Settings" onClick={() => console.log(
|
|
44
|
-
<MenuItem label="Logout" onClick={() => console.log(
|
|
52
|
+
<MenuItem label="Profile" onClick={() => console.log("Profile")} />
|
|
53
|
+
<MenuItem label="Settings" onClick={() => console.log("Settings")} />
|
|
54
|
+
<MenuItem label="Logout" onClick={() => console.log("Logout")} />
|
|
55
|
+
</Menu>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Examples
|
|
61
|
+
|
|
62
|
+
### Menu with Icons & Selection
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { Menu, MenuItem } from "@versini/ui-menu";
|
|
66
|
+
import { ButtonIcon } from "@versini/ui-button";
|
|
67
|
+
import {
|
|
68
|
+
IconMenu,
|
|
69
|
+
IconUser,
|
|
70
|
+
IconSettings,
|
|
71
|
+
IconLogout
|
|
72
|
+
} from "@versini/ui-icons";
|
|
73
|
+
|
|
74
|
+
function AccountMenu() {
|
|
75
|
+
const [last, setLast] = useState("");
|
|
76
|
+
return (
|
|
77
|
+
<Menu
|
|
78
|
+
label="Account options"
|
|
79
|
+
trigger={
|
|
80
|
+
<ButtonIcon label="Account">
|
|
81
|
+
<IconMenu />
|
|
82
|
+
</ButtonIcon>
|
|
83
|
+
}
|
|
84
|
+
onOpenChange={(o) => console.log("open?", o)}
|
|
85
|
+
>
|
|
86
|
+
<MenuItem
|
|
87
|
+
label="Profile"
|
|
88
|
+
icon={<IconUser />}
|
|
89
|
+
onClick={() => setLast("profile")}
|
|
90
|
+
/>
|
|
91
|
+
<MenuItem
|
|
92
|
+
label="Settings"
|
|
93
|
+
icon={<IconSettings />}
|
|
94
|
+
onClick={() => setLast("settings")}
|
|
95
|
+
/>
|
|
96
|
+
<MenuSeparator />
|
|
97
|
+
<MenuItem
|
|
98
|
+
label="Logout"
|
|
99
|
+
icon={<IconLogout />}
|
|
100
|
+
onClick={() => setLast("logout")}
|
|
101
|
+
/>
|
|
45
102
|
</Menu>
|
|
46
103
|
);
|
|
47
104
|
}
|
|
48
105
|
```
|
|
106
|
+
|
|
107
|
+
### Raw Custom Item
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
<Menu
|
|
111
|
+
trigger={
|
|
112
|
+
<ButtonIcon label="More">
|
|
113
|
+
<IconMenu />
|
|
114
|
+
</ButtonIcon>
|
|
115
|
+
}
|
|
116
|
+
>
|
|
117
|
+
<MenuItem raw ignoreClick>
|
|
118
|
+
<div className="p-2 text-xs uppercase tracking-wide text-copy-medium">
|
|
119
|
+
Custom Header
|
|
120
|
+
</div>
|
|
121
|
+
</MenuItem>
|
|
122
|
+
<MenuItem label="Action" />
|
|
123
|
+
</Menu>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## API
|
|
127
|
+
|
|
128
|
+
### Menu Props
|
|
129
|
+
|
|
130
|
+
| Prop | Type | Default | Description |
|
|
131
|
+
| ------------------ | ------------------------- | ---------------- | ------------------------------------------------------------- | ------------- | ---------- | ------------------------------------------------- |
|
|
132
|
+
| `trigger` | `React.ReactNode` | - | Element used to open the menu (Button / ButtonIcon / custom). |
|
|
133
|
+
| `children` | `React.ReactNode` | - | One or more `MenuItem` / `MenuSeparator` / custom nodes. |
|
|
134
|
+
| `defaultPlacement` | `Placement` (Floating UI) | `"bottom-start"` | Initial preferred placement. |
|
|
135
|
+
| `mode` | `"dark" | "light" | "system" | "alt-system"` | `"system"` | Color mode of trigger (when using UI buttons). |
|
|
136
|
+
| `focusMode` | `"dark" | "light" | "system" | "alt-system"` | `"system"` | Focus ring thematic mode (when using UI buttons). |
|
|
137
|
+
| `label` | `string` | `"Open menu"` | Accessible label for the trigger if none present. |
|
|
138
|
+
| `onOpenChange` | `(open: boolean) => void` | - | Called when menu opens or closes. |
|
|
139
|
+
|
|
140
|
+
### MenuItem Props
|
|
141
|
+
|
|
142
|
+
| Prop | Type | Default | Description |
|
|
143
|
+
| ------------- | ----------------- | ------- | ---------------------------------------------------- |
|
|
144
|
+
| `label` | `string` | - | Text label of the item (used for typeahead). |
|
|
145
|
+
| `disabled` | `boolean` | `false` | Disable item interaction. |
|
|
146
|
+
| `icon` | `React.ReactNode` | - | Icon element displayed before label. |
|
|
147
|
+
| `raw` | `boolean` | `false` | Render custom content (bypasses built-in button). |
|
|
148
|
+
| `ignoreClick` | `boolean` | `false` | Prevent auto menu close on click. |
|
|
149
|
+
| `selected` | `boolean` | `false` | Visually indicate selected state (shows check icon). |
|
|
150
|
+
|
|
151
|
+
### MenuSeparator
|
|
152
|
+
|
|
153
|
+
Simple visual separator between items.
|
|
154
|
+
|
|
155
|
+
### MenuGroupLabel
|
|
156
|
+
|
|
157
|
+
Optional label element to group logical sets; pass standard `div` attributes.
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { Menu as _ } from "./components/Menu/Menu.js";
|
|
2
2
|
import { MenuGroupLabel as n, MenuItem as t, MenuSeparator as u } from "./components/Menu/MenuItem.js";
|
|
3
3
|
/*!
|
|
4
|
-
@versini/ui-menu v4.0.
|
|
4
|
+
@versini/ui-menu v4.0.11
|
|
5
5
|
© 2025 gizmette.com
|
|
6
6
|
*/
|
|
7
7
|
try {
|
|
8
8
|
window.__VERSINI_UI_MENU__ || (window.__VERSINI_UI_MENU__ = {
|
|
9
|
-
version: "4.0.
|
|
10
|
-
buildTime: "08/
|
|
9
|
+
version: "4.0.11",
|
|
10
|
+
buildTime: "08/23/2025 10:07 AM EDT",
|
|
11
11
|
homepage: "https://github.com/aversini/ui-components",
|
|
12
12
|
license: "MIT"
|
|
13
13
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-menu",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"main": "dist/index.js",
|
|
16
16
|
"types": "dist/index.d.ts",
|
|
17
17
|
"files": [
|
|
18
|
-
"dist"
|
|
18
|
+
"dist",
|
|
19
|
+
"README.md"
|
|
19
20
|
],
|
|
20
21
|
"scripts": {
|
|
21
22
|
"build:check": "tsc",
|
|
@@ -40,11 +41,11 @@
|
|
|
40
41
|
"react-dom": "^18.3.1 || ^19.0.0"
|
|
41
42
|
},
|
|
42
43
|
"devDependencies": {
|
|
43
|
-
"@testing-library/jest-dom": "6.
|
|
44
|
+
"@testing-library/jest-dom": "6.8.0",
|
|
44
45
|
"@versini/ui-types": "../ui-types"
|
|
45
46
|
},
|
|
46
47
|
"dependencies": {
|
|
47
|
-
"@floating-ui/react": "0.27.
|
|
48
|
+
"@floating-ui/react": "0.27.16",
|
|
48
49
|
"@tailwindcss/typography": "0.5.16",
|
|
49
50
|
"@versini/ui-icons": "4.10.0",
|
|
50
51
|
"clsx": "2.1.1",
|
|
@@ -53,5 +54,5 @@
|
|
|
53
54
|
"sideEffects": [
|
|
54
55
|
"**/*.css"
|
|
55
56
|
],
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "a1afd6e4613b1da7abf61d10a72614611521fb39"
|
|
57
58
|
}
|