@versini/ui-menu 5.1.3 → 5.2.0
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/dist/chunks/index.CsR2sFFR.js +95 -0
- package/dist/components/Menu/Menu.js +106 -132
- package/dist/components/Menu/MenuItem.js +42 -85
- package/dist/index.js +3 -3
- package/package.json +3 -3
- package/dist/chunks/index.Benv90bx.js +0 -61
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { jsxs as n, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import h from "clsx";
|
|
3
|
+
/*!
|
|
4
|
+
@versini/ui-icons v4.15.1
|
|
5
|
+
© 2025 gizmette.com
|
|
6
|
+
*/
|
|
7
|
+
try {
|
|
8
|
+
window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
|
|
9
|
+
version: "4.15.1",
|
|
10
|
+
buildTime: "11/03/2025 07:21 PM EST",
|
|
11
|
+
homepage: "https://github.com/aversini/ui-icons",
|
|
12
|
+
license: "MIT"
|
|
13
|
+
});
|
|
14
|
+
} catch {
|
|
15
|
+
}
|
|
16
|
+
/*!
|
|
17
|
+
@versini/ui-svgicon v4.3.0
|
|
18
|
+
© 2025 gizmette.com
|
|
19
|
+
*/
|
|
20
|
+
try {
|
|
21
|
+
window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
|
|
22
|
+
version: "4.3.0",
|
|
23
|
+
buildTime: "11/03/2025 07:21 PM EST",
|
|
24
|
+
homepage: "https://github.com/aversini/ui-icons",
|
|
25
|
+
license: "MIT"
|
|
26
|
+
});
|
|
27
|
+
} catch {
|
|
28
|
+
}
|
|
29
|
+
const a = ({ children: e, fill: i, viewBox: t, className: s, defaultViewBox: o, size: r, title: l, semantic: d = !1, ..._ }) => {
|
|
30
|
+
const I = h(r, s);
|
|
31
|
+
return /* @__PURE__ */ n("svg", {
|
|
32
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
33
|
+
className: I,
|
|
34
|
+
viewBox: t || o,
|
|
35
|
+
fill: i || "currentColor",
|
|
36
|
+
role: "img",
|
|
37
|
+
"aria-hidden": !d,
|
|
38
|
+
focusable: !1,
|
|
39
|
+
..._,
|
|
40
|
+
children: [
|
|
41
|
+
l && d && /* @__PURE__ */ c("title", {
|
|
42
|
+
children: l
|
|
43
|
+
}),
|
|
44
|
+
e
|
|
45
|
+
]
|
|
46
|
+
});
|
|
47
|
+
}, w = ({ className: e, viewBox: i, title: t, monotone: s, ...o }) => /* @__PURE__ */ n(a, {
|
|
48
|
+
defaultViewBox: "0 0 448 512",
|
|
49
|
+
size: "size-5",
|
|
50
|
+
viewBox: i,
|
|
51
|
+
className: e,
|
|
52
|
+
title: t || "Next",
|
|
53
|
+
...o,
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ c("path", {
|
|
56
|
+
d: "M0 256c0 17.7 14.3 32 32 32h306.7l32-32-32-32H32c-17.7 0-32 14.3-32 32",
|
|
57
|
+
opacity: s ? "1" : "0.4"
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ c("path", {
|
|
60
|
+
d: "M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
}), u = ({ className: e, viewBox: i, title: t, monotone: s, ...o }) => /* @__PURE__ */ n(a, {
|
|
64
|
+
defaultViewBox: "0 0 512 512",
|
|
65
|
+
size: "size-5",
|
|
66
|
+
viewBox: i,
|
|
67
|
+
className: e,
|
|
68
|
+
title: t || "Selected",
|
|
69
|
+
...o,
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ c("path", {
|
|
72
|
+
d: "M0 256a256 256 0 1 0 512 0 256 256 0 1 0-512 0m352 0a96 96 0 1 1-192 0 96 96 0 1 1 192 0",
|
|
73
|
+
opacity: ".4"
|
|
74
|
+
}),
|
|
75
|
+
/* @__PURE__ */ c("path", {
|
|
76
|
+
d: "M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192"
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
}), N = ({ className: e, viewBox: i, title: t, monotone: s, ...o }) => /* @__PURE__ */ c(a, {
|
|
80
|
+
defaultViewBox: "0 0 512 512",
|
|
81
|
+
size: "size-5",
|
|
82
|
+
viewBox: i,
|
|
83
|
+
className: e,
|
|
84
|
+
title: t || "UnSelected",
|
|
85
|
+
...o,
|
|
86
|
+
children: /* @__PURE__ */ c("path", {
|
|
87
|
+
d: "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512",
|
|
88
|
+
opacity: ".4"
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
export {
|
|
92
|
+
w as IconNext,
|
|
93
|
+
u as IconSelected,
|
|
94
|
+
N as IconUnSelected
|
|
95
|
+
};
|
|
@@ -1,67 +1,41 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useFloatingTree as se, useFloatingNodeId as ie, useFloatingParentNodeId as W, useListItem as re, useFloating as ae, autoUpdate as le, offset as de, flip as ue, shift as ce, useHover as fe, safePolygon as me, useClick as pe, useRole as
|
|
3
|
-
import {
|
|
1
|
+
import { jsxs as M, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useFloatingTree as se, useFloatingNodeId as ie, useFloatingParentNodeId as W, useListItem as re, useFloating as ae, autoUpdate as le, offset as de, flip as ue, shift as ce, useHover as fe, safePolygon as me, useClick as pe, useRole as ge, useDismiss as ve, useListNavigation as he, useTypeahead as ye, useInteractions as be, useMergeRefs as we, FloatingNode as D, FloatingList as S, FloatingPortal as z, FloatingFocusManager as _, FloatingTree as xe } from "@floating-ui/react";
|
|
3
|
+
import { IconNext as Ie } from "../../chunks/index.CsR2sFFR.js";
|
|
4
4
|
import Fe from "clsx";
|
|
5
|
-
import Ne, { forwardRef as q, useState as y, useRef as
|
|
6
|
-
import { MenuContext as
|
|
7
|
-
const
|
|
8
|
-
className: e,
|
|
9
|
-
viewBox: n,
|
|
10
|
-
title: d,
|
|
11
|
-
monotone: x,
|
|
12
|
-
...f
|
|
13
|
-
}) => /* @__PURE__ */ b(
|
|
14
|
-
Ie,
|
|
15
|
-
{
|
|
16
|
-
defaultViewBox: "0 0 448 512",
|
|
17
|
-
size: "size-5",
|
|
18
|
-
viewBox: n,
|
|
19
|
-
className: e,
|
|
20
|
-
title: d || "Next",
|
|
21
|
-
...f,
|
|
22
|
-
children: [
|
|
23
|
-
/* @__PURE__ */ t(
|
|
24
|
-
"path",
|
|
25
|
-
{
|
|
26
|
-
d: "M0 256c0 17.7 14.3 32 32 32h306.7l32-32-32-32H32c-17.7 0-32 14.3-32 32",
|
|
27
|
-
opacity: x ? "1" : "0.4"
|
|
28
|
-
}
|
|
29
|
-
),
|
|
30
|
-
/* @__PURE__ */ t("path", { d: "M438.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L370.7 256 233.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" })
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
), V = (e) => {
|
|
5
|
+
import Ne, { forwardRef as q, useState as y, useRef as K, useContext as Me, useEffect as E } from "react";
|
|
6
|
+
import { MenuContext as P } from "./MenuContext.js";
|
|
7
|
+
const U = (e) => {
|
|
34
8
|
if (typeof e == "string")
|
|
35
9
|
return e;
|
|
36
10
|
if (typeof e == "function")
|
|
37
11
|
return e.displayName || e.name || "Component";
|
|
38
12
|
if (typeof e == "object" && e !== null && "type" in e) {
|
|
39
|
-
const
|
|
40
|
-
if (typeof
|
|
41
|
-
return
|
|
13
|
+
const s = e.type;
|
|
14
|
+
if (typeof s == "function" || typeof s == "object")
|
|
15
|
+
return s.displayName || s.name || "Component";
|
|
42
16
|
}
|
|
43
17
|
return "Element";
|
|
44
|
-
},
|
|
18
|
+
}, R = q(
|
|
45
19
|
({
|
|
46
20
|
trigger: e,
|
|
47
|
-
children:
|
|
48
|
-
label:
|
|
49
|
-
defaultPlacement:
|
|
50
|
-
onOpenChange:
|
|
51
|
-
mode:
|
|
52
|
-
focusMode:
|
|
53
|
-
...
|
|
54
|
-
},
|
|
55
|
-
const [
|
|
56
|
-
nodeId:
|
|
57
|
-
open:
|
|
58
|
-
onOpenChange: (
|
|
59
|
-
|
|
21
|
+
children: s,
|
|
22
|
+
label: c = "Open menu",
|
|
23
|
+
defaultPlacement: G = "bottom-start",
|
|
24
|
+
onOpenChange: b,
|
|
25
|
+
mode: J = "system",
|
|
26
|
+
focusMode: Q = "system",
|
|
27
|
+
...p
|
|
28
|
+
}, V) => {
|
|
29
|
+
const [n, w] = y(!1), [k, x] = y(!1), [g, v] = y(null), [f, C] = y(!1), I = K([]), F = K([]), a = Me(P), i = se(), d = ie(), m = W(), A = re({ label: c !== "Open menu" ? c : null }), u = m != null, { floatingStyles: L, refs: N, context: l } = ae({
|
|
30
|
+
nodeId: d,
|
|
31
|
+
open: n,
|
|
32
|
+
onOpenChange: (o) => {
|
|
33
|
+
w(o), b?.(o);
|
|
60
34
|
},
|
|
61
|
-
placement:
|
|
35
|
+
placement: u ? "right-start" : G,
|
|
62
36
|
strategy: "fixed",
|
|
63
37
|
middleware: [
|
|
64
|
-
de(() =>
|
|
38
|
+
de(() => u ? {
|
|
65
39
|
mainAxis: window.innerWidth < 640 ? 22 : 14,
|
|
66
40
|
alignmentAxis: -4
|
|
67
41
|
} : {
|
|
@@ -73,61 +47,61 @@ const Ee = ({
|
|
|
73
47
|
],
|
|
74
48
|
whileElementsMounted: le
|
|
75
49
|
}), X = fe(l, {
|
|
76
|
-
enabled:
|
|
50
|
+
enabled: u && f,
|
|
77
51
|
delay: { open: 75 },
|
|
78
52
|
handleClose: me({ blockPointerEvents: !0 })
|
|
79
53
|
}), Y = pe(l, {
|
|
80
54
|
event: "mousedown",
|
|
81
|
-
toggle: !
|
|
82
|
-
ignoreMouse:
|
|
83
|
-
}), Z =
|
|
84
|
-
listRef:
|
|
85
|
-
activeIndex:
|
|
86
|
-
nested:
|
|
87
|
-
onNavigate:
|
|
55
|
+
toggle: !u || !f,
|
|
56
|
+
ignoreMouse: u && f
|
|
57
|
+
}), Z = ge(l, { role: "menu" }), $ = ve(l, { bubbles: !0 }), ee = he(l, {
|
|
58
|
+
listRef: I,
|
|
59
|
+
activeIndex: g,
|
|
60
|
+
nested: u,
|
|
61
|
+
onNavigate: v,
|
|
88
62
|
loop: !0
|
|
89
|
-
}), te =
|
|
90
|
-
listRef:
|
|
91
|
-
onMatch:
|
|
92
|
-
activeIndex:
|
|
93
|
-
}), { getReferenceProps:
|
|
94
|
-
|
|
63
|
+
}), te = ye(l, {
|
|
64
|
+
listRef: F,
|
|
65
|
+
onMatch: n ? v : void 0,
|
|
66
|
+
activeIndex: g
|
|
67
|
+
}), { getReferenceProps: H, getFloatingProps: j, getItemProps: O } = be([X, Y, Z, $, ee, te]), T = we([N.setReference, A.ref, V]);
|
|
68
|
+
E(() => {
|
|
95
69
|
if (!i)
|
|
96
70
|
return;
|
|
97
|
-
function
|
|
98
|
-
|
|
71
|
+
function o() {
|
|
72
|
+
w(!1), b?.(!1);
|
|
99
73
|
}
|
|
100
|
-
function r(
|
|
101
|
-
|
|
74
|
+
function r(h) {
|
|
75
|
+
h.nodeId !== d && h.parentId === m && w(!1);
|
|
102
76
|
}
|
|
103
|
-
return i.events.on("click",
|
|
104
|
-
i.events.off("click",
|
|
77
|
+
return i.events.on("click", o), i.events.on("menuopen", r), () => {
|
|
78
|
+
i.events.off("click", o), i.events.off("menuopen", r);
|
|
105
79
|
};
|
|
106
|
-
}, [i,
|
|
107
|
-
|
|
108
|
-
}, [i,
|
|
109
|
-
function
|
|
110
|
-
|
|
80
|
+
}, [i, d, m, b]), E(() => {
|
|
81
|
+
n && i && i.events.emit("menuopen", { parentId: m, nodeId: d });
|
|
82
|
+
}, [i, n, d, m]), E(() => {
|
|
83
|
+
function o({ pointerType: h }) {
|
|
84
|
+
h !== "touch" && C(!0);
|
|
111
85
|
}
|
|
112
86
|
function r() {
|
|
113
|
-
|
|
87
|
+
C(!1);
|
|
114
88
|
}
|
|
115
|
-
return window.addEventListener("pointermove",
|
|
89
|
+
return window.addEventListener("pointermove", o, {
|
|
116
90
|
once: !0,
|
|
117
91
|
capture: !0
|
|
118
92
|
}), window.addEventListener("keydown", r, !0), () => {
|
|
119
|
-
window.removeEventListener("pointermove",
|
|
93
|
+
window.removeEventListener("pointermove", o, {
|
|
120
94
|
capture: !0
|
|
121
95
|
}), window.removeEventListener("keydown", r, !0);
|
|
122
96
|
};
|
|
123
97
|
}, []);
|
|
124
|
-
const
|
|
125
|
-
noInternalClick:
|
|
126
|
-
focusMode:
|
|
127
|
-
mode:
|
|
98
|
+
const B = U(e) === "Button" || U(e) === "ButtonIcon", ne = B ? {
|
|
99
|
+
noInternalClick: B,
|
|
100
|
+
focusMode: Q,
|
|
101
|
+
mode: J
|
|
128
102
|
} : {};
|
|
129
|
-
if (
|
|
130
|
-
const
|
|
103
|
+
if (u && !e) {
|
|
104
|
+
const o = Fe(
|
|
131
105
|
"flex items-center flex-row justify-between",
|
|
132
106
|
"w-full",
|
|
133
107
|
"m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1",
|
|
@@ -136,47 +110,47 @@ const Ee = ({
|
|
|
136
110
|
"outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline",
|
|
137
111
|
"disabled:cursor-not-allowed disabled:text-copy-medium",
|
|
138
112
|
{
|
|
139
|
-
"bg-surface-lighter":
|
|
113
|
+
"bg-surface-lighter": n && !k
|
|
140
114
|
}
|
|
141
115
|
);
|
|
142
|
-
return /* @__PURE__ */
|
|
143
|
-
/* @__PURE__ */
|
|
116
|
+
return /* @__PURE__ */ M(D, { id: d, children: [
|
|
117
|
+
/* @__PURE__ */ M(
|
|
144
118
|
"button",
|
|
145
119
|
{
|
|
146
|
-
ref:
|
|
147
|
-
"data-open":
|
|
148
|
-
...
|
|
120
|
+
ref: T,
|
|
121
|
+
"data-open": n ? "" : void 0,
|
|
122
|
+
...H(
|
|
149
123
|
a.getItemProps({
|
|
150
|
-
...
|
|
151
|
-
className:
|
|
124
|
+
...p,
|
|
125
|
+
className: o,
|
|
152
126
|
onFocus(r) {
|
|
153
|
-
|
|
127
|
+
p.onFocus?.(r), x(!1), a.setHasFocusInside(!0);
|
|
154
128
|
},
|
|
155
129
|
onMouseEnter(r) {
|
|
156
|
-
|
|
130
|
+
p.onMouseEnter?.(r), a.allowHover && a.isOpen && a.setActiveIndex(A.index);
|
|
157
131
|
}
|
|
158
132
|
})
|
|
159
133
|
),
|
|
160
134
|
children: [
|
|
161
|
-
/* @__PURE__ */ t("span", { children:
|
|
162
|
-
/* @__PURE__ */ t(
|
|
135
|
+
/* @__PURE__ */ t("span", { children: c }),
|
|
136
|
+
/* @__PURE__ */ t(Ie, { className: "ml-2", size: "size-3", monotone: !0 })
|
|
163
137
|
]
|
|
164
138
|
}
|
|
165
139
|
),
|
|
166
140
|
/* @__PURE__ */ t(
|
|
167
|
-
|
|
141
|
+
P.Provider,
|
|
168
142
|
{
|
|
169
143
|
value: {
|
|
170
|
-
activeIndex:
|
|
171
|
-
setActiveIndex:
|
|
172
|
-
getItemProps:
|
|
173
|
-
setHasFocusInside:
|
|
174
|
-
isOpen:
|
|
175
|
-
allowHover:
|
|
144
|
+
activeIndex: g,
|
|
145
|
+
setActiveIndex: v,
|
|
146
|
+
getItemProps: O,
|
|
147
|
+
setHasFocusInside: x,
|
|
148
|
+
isOpen: n,
|
|
149
|
+
allowHover: f,
|
|
176
150
|
parent: a
|
|
177
151
|
},
|
|
178
|
-
children: /* @__PURE__ */ t(S, { elementsRef:
|
|
179
|
-
|
|
152
|
+
children: /* @__PURE__ */ t(S, { elementsRef: I, labelsRef: F, children: n && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(
|
|
153
|
+
_,
|
|
180
154
|
{
|
|
181
155
|
context: l,
|
|
182
156
|
modal: !1,
|
|
@@ -185,11 +159,11 @@ const Ee = ({
|
|
|
185
159
|
children: /* @__PURE__ */ t(
|
|
186
160
|
"div",
|
|
187
161
|
{
|
|
188
|
-
ref:
|
|
162
|
+
ref: N.setFloating,
|
|
189
163
|
className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
|
|
190
|
-
style:
|
|
164
|
+
style: L,
|
|
191
165
|
...j(),
|
|
192
|
-
children:
|
|
166
|
+
children: s
|
|
193
167
|
}
|
|
194
168
|
)
|
|
195
169
|
}
|
|
@@ -202,33 +176,33 @@ const Ee = ({
|
|
|
202
176
|
e,
|
|
203
177
|
{
|
|
204
178
|
...ne,
|
|
205
|
-
"aria-label":
|
|
206
|
-
"data-open":
|
|
207
|
-
"data-focus-inside":
|
|
208
|
-
ref:
|
|
209
|
-
...
|
|
179
|
+
"aria-label": c,
|
|
180
|
+
"data-open": n ? "" : void 0,
|
|
181
|
+
"data-focus-inside": k ? "" : void 0,
|
|
182
|
+
ref: T,
|
|
183
|
+
...H(
|
|
210
184
|
a.getItemProps({
|
|
211
|
-
...
|
|
185
|
+
...p
|
|
212
186
|
})
|
|
213
187
|
)
|
|
214
188
|
}
|
|
215
189
|
);
|
|
216
|
-
return /* @__PURE__ */
|
|
190
|
+
return /* @__PURE__ */ M(D, { id: d, children: [
|
|
217
191
|
oe,
|
|
218
192
|
/* @__PURE__ */ t(
|
|
219
|
-
|
|
193
|
+
P.Provider,
|
|
220
194
|
{
|
|
221
195
|
value: {
|
|
222
|
-
activeIndex:
|
|
223
|
-
setActiveIndex:
|
|
224
|
-
getItemProps:
|
|
225
|
-
setHasFocusInside:
|
|
226
|
-
isOpen:
|
|
227
|
-
allowHover:
|
|
196
|
+
activeIndex: g,
|
|
197
|
+
setActiveIndex: v,
|
|
198
|
+
getItemProps: O,
|
|
199
|
+
setHasFocusInside: x,
|
|
200
|
+
isOpen: n,
|
|
201
|
+
allowHover: f,
|
|
228
202
|
parent: a
|
|
229
203
|
},
|
|
230
|
-
children: /* @__PURE__ */ t(S, { elementsRef:
|
|
231
|
-
|
|
204
|
+
children: /* @__PURE__ */ t(S, { elementsRef: I, labelsRef: F, children: n && /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(
|
|
205
|
+
_,
|
|
232
206
|
{
|
|
233
207
|
context: l,
|
|
234
208
|
modal: !1,
|
|
@@ -237,11 +211,11 @@ const Ee = ({
|
|
|
237
211
|
children: /* @__PURE__ */ t(
|
|
238
212
|
"div",
|
|
239
213
|
{
|
|
240
|
-
ref:
|
|
214
|
+
ref: N.setFloating,
|
|
241
215
|
className: "rounded-md bg-surface-light shadow-sm shadow-border-dark outline-hidden p-3 sm:p-2",
|
|
242
|
-
style:
|
|
216
|
+
style: L,
|
|
243
217
|
...j(),
|
|
244
|
-
children:
|
|
218
|
+
children: s
|
|
245
219
|
}
|
|
246
220
|
)
|
|
247
221
|
}
|
|
@@ -250,9 +224,9 @@ const Ee = ({
|
|
|
250
224
|
)
|
|
251
225
|
] });
|
|
252
226
|
}
|
|
253
|
-
),
|
|
254
|
-
|
|
255
|
-
|
|
227
|
+
), Ee = q((e, s) => W() === null ? /* @__PURE__ */ t(xe, { children: /* @__PURE__ */ t(R, { ...e, ref: s }) }) : /* @__PURE__ */ t(R, { ...e, ref: s }));
|
|
228
|
+
Ee.displayName = "Menu";
|
|
229
|
+
R.displayName = "MenuComponent";
|
|
256
230
|
export {
|
|
257
|
-
|
|
231
|
+
Ee as Menu
|
|
258
232
|
};
|
|
@@ -1,80 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useListItem as
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import * as
|
|
6
|
-
import { MenuContext as
|
|
7
|
-
const z = (
|
|
8
|
-
className: e,
|
|
9
|
-
viewBox: t,
|
|
10
|
-
title: o,
|
|
11
|
-
monotone: a,
|
|
12
|
-
...r
|
|
13
|
-
}) => /* @__PURE__ */ x(
|
|
14
|
-
b,
|
|
15
|
-
{
|
|
16
|
-
defaultViewBox: "0 0 512 512",
|
|
17
|
-
size: "size-5",
|
|
18
|
-
viewBox: t,
|
|
19
|
-
className: e,
|
|
20
|
-
title: o || "Selected",
|
|
21
|
-
...r,
|
|
22
|
-
children: [
|
|
23
|
-
/* @__PURE__ */ s(
|
|
24
|
-
"path",
|
|
25
|
-
{
|
|
26
|
-
d: "M0 256a256 256 0 1 0 512 0 256 256 0 1 0-512 0m352 0a96 96 0 1 1-192 0 96 96 0 1 1 192 0",
|
|
27
|
-
opacity: ".4"
|
|
28
|
-
}
|
|
29
|
-
),
|
|
30
|
-
/* @__PURE__ */ s("path", { d: "M256 160a96 96 0 1 0 0 192 96 96 0 1 0 0-192" })
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
), I = ({
|
|
34
|
-
className: e,
|
|
35
|
-
viewBox: t,
|
|
36
|
-
title: o,
|
|
37
|
-
monotone: a,
|
|
38
|
-
...r
|
|
39
|
-
}) => /* @__PURE__ */ s(
|
|
40
|
-
b,
|
|
41
|
-
{
|
|
42
|
-
defaultViewBox: "0 0 512 512",
|
|
43
|
-
size: "size-5",
|
|
44
|
-
viewBox: t,
|
|
45
|
-
className: e,
|
|
46
|
-
title: o || "UnSelected",
|
|
47
|
-
...r,
|
|
48
|
-
children: /* @__PURE__ */ s("path", { d: "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512", opacity: ".4" })
|
|
49
|
-
}
|
|
50
|
-
), k = p.forwardRef(
|
|
1
|
+
import { jsx as o, jsxs as g } from "react/jsx-runtime";
|
|
2
|
+
import { useListItem as y, useFloatingTree as N, useMergeRefs as k } from "@floating-ui/react";
|
|
3
|
+
import { IconSelected as M, IconUnSelected as v } from "../../chunks/index.CsR2sFFR.js";
|
|
4
|
+
import u from "clsx";
|
|
5
|
+
import * as f from "react";
|
|
6
|
+
import { MenuContext as w } from "./MenuContext.js";
|
|
7
|
+
const z = f.forwardRef(
|
|
51
8
|
({
|
|
52
9
|
label: e,
|
|
53
10
|
disabled: t,
|
|
54
|
-
icon:
|
|
55
|
-
raw:
|
|
56
|
-
children:
|
|
57
|
-
ignoreClick:
|
|
58
|
-
selected:
|
|
59
|
-
...
|
|
60
|
-
},
|
|
61
|
-
let
|
|
62
|
-
const c =
|
|
63
|
-
if (
|
|
64
|
-
return /* @__PURE__ */
|
|
11
|
+
icon: r,
|
|
12
|
+
raw: b = !1,
|
|
13
|
+
children: i,
|
|
14
|
+
ignoreClick: a = !1,
|
|
15
|
+
selected: n,
|
|
16
|
+
...m
|
|
17
|
+
}, p) => {
|
|
18
|
+
let l = "";
|
|
19
|
+
const c = f.useContext(w), x = y({ label: t ? null : e }), d = N(), C = k([x.ref, p]);
|
|
20
|
+
if (b && i)
|
|
21
|
+
return /* @__PURE__ */ o(
|
|
65
22
|
"div",
|
|
66
23
|
{
|
|
67
24
|
role: "menuitem",
|
|
68
25
|
...c.getItemProps({
|
|
69
|
-
onClick(
|
|
70
|
-
|
|
26
|
+
onClick(s) {
|
|
27
|
+
a || (m.onClick?.(s), d?.events.emit("click"));
|
|
71
28
|
}
|
|
72
29
|
}),
|
|
73
|
-
children:
|
|
30
|
+
children: i
|
|
74
31
|
}
|
|
75
32
|
);
|
|
76
|
-
|
|
77
|
-
const
|
|
33
|
+
r && (l = "pl-2");
|
|
34
|
+
const I = u(
|
|
78
35
|
"flex flex-row items-center",
|
|
79
36
|
"w-full",
|
|
80
37
|
"m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1",
|
|
@@ -83,54 +40,54 @@ const z = ({
|
|
|
83
40
|
"outline-hidden focus:border focus:border-border-medium focus:bg-surface-lighter focus:underline",
|
|
84
41
|
"disabled:cursor-not-allowed disabled:text-copy-medium",
|
|
85
42
|
{
|
|
86
|
-
"bg-none": !t && !
|
|
43
|
+
"bg-none": !t && !n
|
|
87
44
|
}
|
|
88
45
|
);
|
|
89
|
-
return /* @__PURE__ */
|
|
46
|
+
return /* @__PURE__ */ g(
|
|
90
47
|
"button",
|
|
91
48
|
{
|
|
92
|
-
...
|
|
93
|
-
ref:
|
|
49
|
+
...m,
|
|
50
|
+
ref: C,
|
|
94
51
|
role: "menuitem",
|
|
95
|
-
className:
|
|
52
|
+
className: I,
|
|
96
53
|
tabIndex: 0,
|
|
97
54
|
disabled: t,
|
|
98
55
|
...c.getItemProps({
|
|
99
|
-
onClick(
|
|
100
|
-
|
|
56
|
+
onClick(s) {
|
|
57
|
+
a || (m.onClick?.(s), d?.events.emit("click"));
|
|
101
58
|
},
|
|
102
|
-
onFocus(
|
|
103
|
-
|
|
59
|
+
onFocus(s) {
|
|
60
|
+
m.onFocus?.(s), c.setHasFocusInside(!0);
|
|
104
61
|
}
|
|
105
62
|
}),
|
|
106
63
|
children: [
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
e && /* @__PURE__ */
|
|
64
|
+
n === !0 && /* @__PURE__ */ o(M, { className: "text-copy-success mr-2", size: "size-4" }),
|
|
65
|
+
n === !1 && /* @__PURE__ */ o(v, { className: "text-copy-medium mr-2", size: "size-4" }),
|
|
66
|
+
r,
|
|
67
|
+
e && /* @__PURE__ */ o("span", { className: l, children: e })
|
|
111
68
|
]
|
|
112
69
|
}
|
|
113
70
|
);
|
|
114
71
|
}
|
|
115
72
|
);
|
|
116
|
-
|
|
73
|
+
z.displayName = "MenuItem";
|
|
117
74
|
const j = ({ className: e, ...t }) => {
|
|
118
|
-
const
|
|
119
|
-
return /* @__PURE__ */
|
|
75
|
+
const r = u(e, "my-1 border-t border-border-medium");
|
|
76
|
+
return /* @__PURE__ */ o("div", { className: r, ...t });
|
|
120
77
|
}, P = ({
|
|
121
78
|
className: e,
|
|
122
79
|
...t
|
|
123
80
|
}) => {
|
|
124
|
-
const
|
|
81
|
+
const r = u(
|
|
125
82
|
e,
|
|
126
83
|
"pt-1 mb-2",
|
|
127
84
|
"text-sm text-copy-dark font-bold",
|
|
128
85
|
"border-b border-border-medium"
|
|
129
86
|
);
|
|
130
|
-
return /* @__PURE__ */
|
|
87
|
+
return /* @__PURE__ */ o("div", { className: r, ...t });
|
|
131
88
|
};
|
|
132
89
|
export {
|
|
133
90
|
P as MenuGroupLabel,
|
|
134
|
-
|
|
91
|
+
z as MenuItem,
|
|
135
92
|
j as MenuSeparator
|
|
136
93
|
};
|
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 v5.
|
|
4
|
+
@versini/ui-menu v5.2.0
|
|
5
5
|
© 2025 gizmette.com
|
|
6
6
|
*/
|
|
7
7
|
try {
|
|
8
8
|
window.__VERSINI_UI_MENU__ || (window.__VERSINI_UI_MENU__ = {
|
|
9
|
-
version: "5.
|
|
10
|
-
buildTime: "
|
|
9
|
+
version: "5.2.0",
|
|
10
|
+
buildTime: "11/04/2025 09:50 AM EST",
|
|
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": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@floating-ui/react": "0.27.16",
|
|
45
45
|
"@tailwindcss/typography": "0.5.19",
|
|
46
|
-
"@versini/ui-icons": "4.
|
|
46
|
+
"@versini/ui-icons": "4.15.1",
|
|
47
47
|
"clsx": "2.1.1",
|
|
48
48
|
"tailwindcss": "4.1.16"
|
|
49
49
|
},
|
|
50
50
|
"sideEffects": [
|
|
51
51
|
"**/*.css"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "d43a776558072976e0920ab60f28f45a9efd3848"
|
|
54
54
|
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { jsxs as I, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import m from "clsx";
|
|
3
|
-
const d = ({
|
|
4
|
-
children: o,
|
|
5
|
-
fill: s,
|
|
6
|
-
viewBox: t,
|
|
7
|
-
className: n,
|
|
8
|
-
defaultViewBox: _,
|
|
9
|
-
size: l,
|
|
10
|
-
title: e,
|
|
11
|
-
semantic: i = !1,
|
|
12
|
-
...r
|
|
13
|
-
}) => {
|
|
14
|
-
const c = m(l, n);
|
|
15
|
-
return /* @__PURE__ */ I(
|
|
16
|
-
"svg",
|
|
17
|
-
{
|
|
18
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
-
className: c,
|
|
20
|
-
viewBox: t || _,
|
|
21
|
-
fill: s || "currentColor",
|
|
22
|
-
role: "img",
|
|
23
|
-
"aria-hidden": !i,
|
|
24
|
-
focusable: !1,
|
|
25
|
-
...r,
|
|
26
|
-
children: [
|
|
27
|
-
e && i && /* @__PURE__ */ a("title", { children: e }),
|
|
28
|
-
o
|
|
29
|
-
]
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
/*!
|
|
34
|
-
@versini/ui-svgicon v4.2.2
|
|
35
|
-
© 2025 gizmette.com
|
|
36
|
-
*/
|
|
37
|
-
try {
|
|
38
|
-
window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
|
|
39
|
-
version: "4.2.2",
|
|
40
|
-
buildTime: "10/24/2025 06:42 PM EDT",
|
|
41
|
-
homepage: "https://github.com/aversini/ui-components",
|
|
42
|
-
license: "MIT"
|
|
43
|
-
});
|
|
44
|
-
} catch {
|
|
45
|
-
}
|
|
46
|
-
/*!
|
|
47
|
-
@versini/ui-icons v4.14.1
|
|
48
|
-
© 2025 gizmette.com
|
|
49
|
-
*/
|
|
50
|
-
try {
|
|
51
|
-
window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
|
|
52
|
-
version: "4.14.1",
|
|
53
|
-
buildTime: "10/24/2025 06:42 PM EDT",
|
|
54
|
-
homepage: "https://github.com/aversini/ui-components",
|
|
55
|
-
license: "MIT"
|
|
56
|
-
});
|
|
57
|
-
} catch {
|
|
58
|
-
}
|
|
59
|
-
export {
|
|
60
|
-
d as I
|
|
61
|
-
};
|