@yamada-ui/menu 1.2.0 → 1.3.0-dev-20240525154738
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-XC57KMED.mjs → chunk-4TCOEKCC.mjs} +2 -2
- package/dist/{chunk-JVRMLEOK.mjs → chunk-AOZIU76G.mjs} +2 -2
- package/dist/{chunk-66RA5MSJ.mjs → chunk-COK5BGV5.mjs} +3 -3
- package/dist/{chunk-74RMGTSQ.mjs → chunk-HWCJQOGH.mjs} +2 -2
- package/dist/{chunk-UTYWCSIS.mjs → chunk-LNHCNVHB.mjs} +49 -25
- package/dist/chunk-LNHCNVHB.mjs.map +1 -0
- package/dist/chunk-Q4PSHEXP.mjs +46 -0
- package/dist/chunk-Q4PSHEXP.mjs.map +1 -0
- package/dist/{chunk-YBDOCC7O.mjs → chunk-TCN4S66S.mjs} +2 -2
- package/dist/context-menu-trigger.d.mts +7 -0
- package/dist/context-menu-trigger.d.ts +7 -0
- package/dist/context-menu-trigger.js +79 -0
- package/dist/context-menu-trigger.js.map +1 -0
- package/dist/context-menu-trigger.mjs +9 -0
- package/dist/context-menu-trigger.mjs.map +1 -0
- package/dist/context-menu.d.mts +21 -0
- package/dist/context-menu.d.ts +21 -0
- package/dist/context-menu.js +500 -0
- package/dist/context-menu.js.map +1 -0
- package/dist/context-menu.mjs +10 -0
- package/dist/context-menu.mjs.map +1 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +165 -104
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +16 -10
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +2 -2
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +1 -1
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +3 -3
- package/dist/menu.js +64 -49
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +1 -1
- package/package.json +6 -6
- package/dist/chunk-UTYWCSIS.mjs.map +0 -1
- /package/dist/{chunk-XC57KMED.mjs.map → chunk-4TCOEKCC.mjs.map} +0 -0
- /package/dist/{chunk-JVRMLEOK.mjs.map → chunk-AOZIU76G.mjs.map} +0 -0
- /package/dist/{chunk-66RA5MSJ.mjs.map → chunk-COK5BGV5.mjs.map} +0 -0
- /package/dist/{chunk-74RMGTSQ.mjs.map → chunk-HWCJQOGH.mjs.map} +0 -0
- /package/dist/{chunk-YBDOCC7O.mjs.map → chunk-TCN4S66S.mjs.map} +0 -0
@@ -0,0 +1,500 @@
|
|
1
|
+
"use client"
|
2
|
+
"use strict";
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __export = (target, all) => {
|
8
|
+
for (var name in all)
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
10
|
+
};
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
13
|
+
for (let key of __getOwnPropNames(from))
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
16
|
+
}
|
17
|
+
return to;
|
18
|
+
};
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
20
|
+
|
21
|
+
// src/context-menu.tsx
|
22
|
+
var context_menu_exports = {};
|
23
|
+
__export(context_menu_exports, {
|
24
|
+
ContextMenu: () => ContextMenu,
|
25
|
+
useContextMenu: () => useContextMenu
|
26
|
+
});
|
27
|
+
module.exports = __toCommonJS(context_menu_exports);
|
28
|
+
var import_core3 = require("@yamada-ui/core");
|
29
|
+
var import_utils3 = require("@yamada-ui/utils");
|
30
|
+
|
31
|
+
// src/menu.tsx
|
32
|
+
var import_core2 = require("@yamada-ui/core");
|
33
|
+
var import_popover = require("@yamada-ui/popover");
|
34
|
+
var import_use_descendant = require("@yamada-ui/use-descendant");
|
35
|
+
var import_use_disclosure = require("@yamada-ui/use-disclosure");
|
36
|
+
var import_utils2 = require("@yamada-ui/utils");
|
37
|
+
var import_react2 = require("react");
|
38
|
+
|
39
|
+
// src/menu-item.tsx
|
40
|
+
var import_core = require("@yamada-ui/core");
|
41
|
+
var import_use_clickable = require("@yamada-ui/use-clickable");
|
42
|
+
var import_utils = require("@yamada-ui/utils");
|
43
|
+
var import_react = require("react");
|
44
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
45
|
+
var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
|
46
|
+
strict: false,
|
47
|
+
name: "UpstreamMenuItemContext"
|
48
|
+
});
|
49
|
+
var isTargetMenuItem = (target) => {
|
50
|
+
var _a;
|
51
|
+
return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
|
52
|
+
};
|
53
|
+
var MenuItem = (0, import_core.forwardRef)(
|
54
|
+
({
|
55
|
+
as,
|
56
|
+
className,
|
57
|
+
type,
|
58
|
+
isDisabled,
|
59
|
+
isFocusable,
|
60
|
+
closeOnSelect: customCloseOnSelect,
|
61
|
+
icon,
|
62
|
+
command,
|
63
|
+
children,
|
64
|
+
onClick: onClickProp,
|
65
|
+
onFocus: onFocusProp,
|
66
|
+
onMouseEnter: onMouseEnterProp,
|
67
|
+
onMouseMove: onMouseMoveProp,
|
68
|
+
onMouseLeave: onMouseLeaveProp,
|
69
|
+
onKeyDown: onKeyDownProp,
|
70
|
+
...props
|
71
|
+
}, ref) => {
|
72
|
+
var _a;
|
73
|
+
const {
|
74
|
+
focusedIndex,
|
75
|
+
setFocusedIndex,
|
76
|
+
isOpen,
|
77
|
+
onClose,
|
78
|
+
onUpstreamClose,
|
79
|
+
closeOnSelect: generalCloseOnSelect,
|
80
|
+
menuRef,
|
81
|
+
requestAnimationFrameId,
|
82
|
+
isNested,
|
83
|
+
styles
|
84
|
+
} = useMenu();
|
85
|
+
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
86
|
+
const trulyDisabled = isDisabled && !isFocusable;
|
87
|
+
const buttonRef = (0, import_react.useRef)(null);
|
88
|
+
const hasDownstreamRef = (0, import_react.useRef)(false);
|
89
|
+
const onKeyDownRef = (0, import_react.useRef)(
|
90
|
+
() => void 0
|
91
|
+
);
|
92
|
+
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
93
|
+
const [isDownstreamOpen, setDownstreamOpen] = (0, import_react.useState)(false);
|
94
|
+
const isFocused = index === focusedIndex;
|
95
|
+
const onMouseEnter = (0, import_react.useCallback)(
|
96
|
+
(event) => {
|
97
|
+
onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
|
98
|
+
if (isDisabled)
|
99
|
+
return;
|
100
|
+
setFocusedIndex(index);
|
101
|
+
},
|
102
|
+
[setFocusedIndex, index, isDisabled, onMouseEnterProp]
|
103
|
+
);
|
104
|
+
const onMouseMove = (0, import_react.useCallback)(
|
105
|
+
(event) => {
|
106
|
+
onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
|
107
|
+
if (buttonRef.current && !(0, import_utils.isActiveElement)(buttonRef.current))
|
108
|
+
onMouseEnter(event);
|
109
|
+
},
|
110
|
+
[onMouseEnter, onMouseMoveProp]
|
111
|
+
);
|
112
|
+
const onMouseLeave = (0, import_react.useCallback)(
|
113
|
+
(event) => {
|
114
|
+
onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
|
115
|
+
if (isDisabled)
|
116
|
+
return;
|
117
|
+
setFocusedIndex(-1);
|
118
|
+
},
|
119
|
+
[setFocusedIndex, isDisabled, onMouseLeaveProp]
|
120
|
+
);
|
121
|
+
const onClick = (0, import_react.useCallback)(
|
122
|
+
(ev) => {
|
123
|
+
onClickProp == null ? void 0 : onClickProp(ev);
|
124
|
+
if (!isTargetMenuItem(ev.currentTarget))
|
125
|
+
return;
|
126
|
+
const hasDownstream = hasDownstreamRef.current;
|
127
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
|
128
|
+
onClose();
|
129
|
+
onUpstreamClose == null ? void 0 : onUpstreamClose();
|
130
|
+
}
|
131
|
+
},
|
132
|
+
[
|
133
|
+
onClickProp,
|
134
|
+
customCloseOnSelect,
|
135
|
+
generalCloseOnSelect,
|
136
|
+
onClose,
|
137
|
+
onUpstreamClose
|
138
|
+
]
|
139
|
+
);
|
140
|
+
const onFocus = (0, import_react.useCallback)(
|
141
|
+
(ev) => {
|
142
|
+
onFocusProp == null ? void 0 : onFocusProp(ev);
|
143
|
+
setFocusedIndex(index);
|
144
|
+
},
|
145
|
+
[onFocusProp, setFocusedIndex, index]
|
146
|
+
);
|
147
|
+
const onRestoreFocus = (0, import_react.useCallback)(() => {
|
148
|
+
var _a2;
|
149
|
+
(_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
|
150
|
+
setFocusedIndex(index);
|
151
|
+
}, [setFocusedIndex, index]);
|
152
|
+
const onKeyDown = (0, import_react.useCallback)(
|
153
|
+
(ev) => {
|
154
|
+
onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
|
155
|
+
const actions = {
|
156
|
+
ArrowLeft: isNested ? (0, import_utils.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
157
|
+
};
|
158
|
+
const action = actions[ev.key];
|
159
|
+
if (!action)
|
160
|
+
return;
|
161
|
+
ev.preventDefault();
|
162
|
+
ev.stopPropagation();
|
163
|
+
action();
|
164
|
+
},
|
165
|
+
[onKeyDownProp, onUpstreamRestoreFocus, onClose, isNested]
|
166
|
+
);
|
167
|
+
const rest = (0, import_use_clickable.useClickable)({
|
168
|
+
focusOnClick: false,
|
169
|
+
...props,
|
170
|
+
onClick,
|
171
|
+
onFocus,
|
172
|
+
onMouseEnter,
|
173
|
+
onMouseMove,
|
174
|
+
onMouseLeave,
|
175
|
+
onKeyDown: (0, import_utils.handlerAll)(onKeyDown, onKeyDownRef.current),
|
176
|
+
ref: (0, import_utils.mergeRefs)(register, buttonRef, ref),
|
177
|
+
isDisabled,
|
178
|
+
isFocusable
|
179
|
+
});
|
180
|
+
(0, import_utils.useUpdateEffect)(() => {
|
181
|
+
if (!isOpen)
|
182
|
+
return;
|
183
|
+
const id = requestAnimationFrameId.current;
|
184
|
+
if (isFocused && !trulyDisabled && buttonRef.current) {
|
185
|
+
if (id)
|
186
|
+
cancelAnimationFrame(id);
|
187
|
+
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
188
|
+
var _a2;
|
189
|
+
(_a2 = buttonRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
190
|
+
requestAnimationFrameId.current = null;
|
191
|
+
});
|
192
|
+
} else if (menuRef.current && !(0, import_utils.isActiveElement)(menuRef.current)) {
|
193
|
+
menuRef.current.focus({ preventScroll: true });
|
194
|
+
}
|
195
|
+
return () => {
|
196
|
+
if (id)
|
197
|
+
cancelAnimationFrame(id);
|
198
|
+
};
|
199
|
+
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
200
|
+
type = as || type ? type != null ? type : void 0 : "button";
|
201
|
+
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
|
202
|
+
const css = {
|
203
|
+
textDecoration: "none",
|
204
|
+
color: "inherit",
|
205
|
+
userSelect: "none",
|
206
|
+
display: "flex",
|
207
|
+
width: "100%",
|
208
|
+
alignItems: "center",
|
209
|
+
textAlign: "start",
|
210
|
+
flex: "0 0 auto",
|
211
|
+
outline: 0,
|
212
|
+
gap: "0.75rem",
|
213
|
+
...styles.item
|
214
|
+
};
|
215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
216
|
+
UpstreamMenuItemProvider,
|
217
|
+
{
|
218
|
+
value: {
|
219
|
+
onKeyDownRef,
|
220
|
+
onUpstreamRestoreFocus: onRestoreFocus,
|
221
|
+
setDownstreamOpen,
|
222
|
+
hasDownstreamRef
|
223
|
+
},
|
224
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
225
|
+
import_core.ui.li,
|
226
|
+
{
|
227
|
+
...rest,
|
228
|
+
...isDownstreamOpen ? { "data-active": "" } : {},
|
229
|
+
as,
|
230
|
+
type,
|
231
|
+
role: "menu-item",
|
232
|
+
tabIndex: isFocused ? 0 : -1,
|
233
|
+
className: (0, import_utils.cx)("ui-menu__item", className),
|
234
|
+
__css: css,
|
235
|
+
children: [
|
236
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { children: icon }) : null,
|
237
|
+
children,
|
238
|
+
command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCommand, { children: command }) : null
|
239
|
+
]
|
240
|
+
}
|
241
|
+
)
|
242
|
+
}
|
243
|
+
);
|
244
|
+
}
|
245
|
+
);
|
246
|
+
var MenuOptionItem = (0, import_core.forwardRef)(
|
247
|
+
({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
|
248
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
249
|
+
MenuItem,
|
250
|
+
{
|
251
|
+
ref,
|
252
|
+
className: (0, import_utils.cx)("ui-menu__item--option", className),
|
253
|
+
"aria-checked": (0, import_utils.ariaAttr)(isChecked),
|
254
|
+
closeOnSelect,
|
255
|
+
...rest,
|
256
|
+
children: [
|
257
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
|
258
|
+
children
|
259
|
+
]
|
260
|
+
}
|
261
|
+
);
|
262
|
+
}
|
263
|
+
);
|
264
|
+
var MenuIcon = (0, import_core.forwardRef)(
|
265
|
+
({ className, ...rest }, ref) => {
|
266
|
+
const { styles } = useMenu();
|
267
|
+
const css = {
|
268
|
+
flexShrink: 0,
|
269
|
+
display: "inline-flex",
|
270
|
+
justifyContent: "center",
|
271
|
+
alignItems: "center",
|
272
|
+
fontSize: "0.85em",
|
273
|
+
...styles.icon
|
274
|
+
};
|
275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
276
|
+
import_core.ui.span,
|
277
|
+
{
|
278
|
+
ref,
|
279
|
+
className: (0, import_utils.cx)("ui-menu__item__icon", className),
|
280
|
+
__css: css,
|
281
|
+
...rest
|
282
|
+
}
|
283
|
+
);
|
284
|
+
}
|
285
|
+
);
|
286
|
+
var MenuCommand = (0, import_core.forwardRef)(
|
287
|
+
({ className, ...rest }, ref) => {
|
288
|
+
const { styles } = useMenu();
|
289
|
+
const css = { ...styles.command };
|
290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
291
|
+
import_core.ui.span,
|
292
|
+
{
|
293
|
+
ref,
|
294
|
+
className: (0, import_utils.cx)("ui-menu__item__command", className),
|
295
|
+
__css: css,
|
296
|
+
...rest
|
297
|
+
}
|
298
|
+
);
|
299
|
+
}
|
300
|
+
);
|
301
|
+
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
302
|
+
"polygon",
|
303
|
+
{
|
304
|
+
fill: "currentColor",
|
305
|
+
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
|
306
|
+
}
|
307
|
+
) });
|
308
|
+
|
309
|
+
// src/menu.tsx
|
310
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
311
|
+
var {
|
312
|
+
DescendantsContextProvider,
|
313
|
+
useDescendantsContext: useMenuDescendantsContext,
|
314
|
+
useDescendants,
|
315
|
+
useDescendant: useMenuDescendant
|
316
|
+
} = (0, import_use_descendant.createDescendant)();
|
317
|
+
var [MenuProvider, useMenu] = (0, import_utils2.createContext)({
|
318
|
+
name: "MenuContext",
|
319
|
+
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
320
|
+
});
|
321
|
+
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils2.createContext)({
|
322
|
+
strict: false,
|
323
|
+
name: "UpstreamMenuContext"
|
324
|
+
});
|
325
|
+
var Menu = (props) => {
|
326
|
+
var _a, _b, _c;
|
327
|
+
const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
|
328
|
+
const [styles, mergedProps] = (0, import_core2.useMultiComponentStyle)("Menu", props, {
|
329
|
+
isProcessSkip: !!contextMenuStyles,
|
330
|
+
styles: contextMenuStyles
|
331
|
+
});
|
332
|
+
let {
|
333
|
+
initialFocusRef,
|
334
|
+
closeOnSelect = true,
|
335
|
+
closeOnBlur,
|
336
|
+
placement,
|
337
|
+
duration = 0.2,
|
338
|
+
offset,
|
339
|
+
onOpen: onOpenProp,
|
340
|
+
onClose: onCloseProp,
|
341
|
+
...rest
|
342
|
+
} = (0, import_core2.omitThemeProps)(mergedProps);
|
343
|
+
const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
|
344
|
+
const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
|
345
|
+
const isNested = !!relatedRef;
|
346
|
+
if (isNested) {
|
347
|
+
placement != null ? placement : placement = "right-start";
|
348
|
+
offset != null ? offset : offset = [-8, 8];
|
349
|
+
closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
|
350
|
+
} else {
|
351
|
+
placement != null ? placement : placement = "bottom-start";
|
352
|
+
}
|
353
|
+
const descendants = useDescendants();
|
354
|
+
const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
|
355
|
+
const menuRef = (0, import_react2.useRef)(null);
|
356
|
+
const timeoutIds = (0, import_react2.useRef)(/* @__PURE__ */ new Set([]));
|
357
|
+
const requestAnimationFrameId = (0, import_react2.useRef)(null);
|
358
|
+
const onCloseMapRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
|
359
|
+
const onFocusMenu = (0, import_react2.useCallback)(() => {
|
360
|
+
requestAnimationFrame(
|
361
|
+
() => {
|
362
|
+
var _a2;
|
363
|
+
return (_a2 = menuRef.current) == null ? void 0 : _a2.focus({ preventScroll: false });
|
364
|
+
}
|
365
|
+
);
|
366
|
+
}, []);
|
367
|
+
const onFocusFirstItem = (0, import_react2.useCallback)(() => {
|
368
|
+
const id2 = setTimeout(() => {
|
369
|
+
if (initialFocusRef)
|
370
|
+
return;
|
371
|
+
const first = descendants.enabledFirstValue();
|
372
|
+
if (first)
|
373
|
+
setFocusedIndex(first.index);
|
374
|
+
});
|
375
|
+
timeoutIds.current.add(id2);
|
376
|
+
}, [descendants, initialFocusRef]);
|
377
|
+
const onFocusLastItem = (0, import_react2.useCallback)(() => {
|
378
|
+
const id2 = setTimeout(() => {
|
379
|
+
if (initialFocusRef)
|
380
|
+
return;
|
381
|
+
const last = descendants.enabledLastValue();
|
382
|
+
if (last)
|
383
|
+
setFocusedIndex(last.index);
|
384
|
+
});
|
385
|
+
timeoutIds.current.add(id2);
|
386
|
+
}, [descendants, initialFocusRef]);
|
387
|
+
const onOpenInternal = (0, import_react2.useCallback)(() => {
|
388
|
+
onOpenProp == null ? void 0 : onOpenProp();
|
389
|
+
if (!isNested)
|
390
|
+
onFocusMenu();
|
391
|
+
}, [onOpenProp, isNested, onFocusMenu]);
|
392
|
+
const onCloseInternal = (0, import_react2.useCallback)(() => {
|
393
|
+
onCloseProp == null ? void 0 : onCloseProp();
|
394
|
+
for (const onClose2 of onCloseMapRef.current.values()) {
|
395
|
+
onClose2();
|
396
|
+
}
|
397
|
+
}, [onCloseProp]);
|
398
|
+
const id = (0, import_react2.useId)();
|
399
|
+
const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
|
400
|
+
...props,
|
401
|
+
onOpen: onOpenInternal,
|
402
|
+
onClose: onCloseInternal
|
403
|
+
});
|
404
|
+
(0, import_react2.useEffect)(() => {
|
405
|
+
const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
|
406
|
+
onCloseMap == null ? void 0 : onCloseMap.set(id, onClose);
|
407
|
+
return () => {
|
408
|
+
onCloseMap == null ? void 0 : onCloseMap.delete(id);
|
409
|
+
};
|
410
|
+
}, [id, onClose, onDownstreamCloseMapRef]);
|
411
|
+
(0, import_react2.useEffect)(() => {
|
412
|
+
if (setDownstreamOpen)
|
413
|
+
setDownstreamOpen(isOpen);
|
414
|
+
}, [setDownstreamOpen, isOpen]);
|
415
|
+
(0, import_react2.useEffect)(() => {
|
416
|
+
if (hasDownstreamRef)
|
417
|
+
hasDownstreamRef.current = true;
|
418
|
+
return () => {
|
419
|
+
if (hasDownstreamRef)
|
420
|
+
hasDownstreamRef.current = false;
|
421
|
+
};
|
422
|
+
});
|
423
|
+
(0, import_utils2.useUpdateEffect)(() => {
|
424
|
+
if (!isOpen)
|
425
|
+
setFocusedIndex(-1);
|
426
|
+
}, [isOpen]);
|
427
|
+
(0, import_utils2.useUnmountEffect)(() => {
|
428
|
+
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
429
|
+
timeoutIds.current.clear();
|
430
|
+
});
|
431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
432
|
+
UpstreamMenuProvider,
|
433
|
+
{
|
434
|
+
value: {
|
435
|
+
relatedRef: menuRef,
|
436
|
+
onDownstreamCloseMapRef: onCloseMapRef,
|
437
|
+
onUpstreamClose: (0, import_utils2.funcAll)(onUpstreamClose, onClose)
|
438
|
+
},
|
439
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
440
|
+
MenuProvider,
|
441
|
+
{
|
442
|
+
value: {
|
443
|
+
isOpen,
|
444
|
+
onOpen,
|
445
|
+
onClose,
|
446
|
+
onUpstreamClose,
|
447
|
+
onFocusFirstItem,
|
448
|
+
onFocusLastItem,
|
449
|
+
closeOnSelect,
|
450
|
+
focusedIndex,
|
451
|
+
setFocusedIndex,
|
452
|
+
menuRef,
|
453
|
+
requestAnimationFrameId,
|
454
|
+
isNested,
|
455
|
+
styles
|
456
|
+
},
|
457
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
458
|
+
import_popover.Popover,
|
459
|
+
{
|
460
|
+
...{
|
461
|
+
trigger: isNested ? "hover" : "click",
|
462
|
+
...rest,
|
463
|
+
isOpen,
|
464
|
+
onOpen,
|
465
|
+
onClose,
|
466
|
+
placement,
|
467
|
+
offset,
|
468
|
+
duration,
|
469
|
+
initialFocusRef,
|
470
|
+
relatedRef,
|
471
|
+
closeOnButton: false,
|
472
|
+
closeOnBlur
|
473
|
+
}
|
474
|
+
}
|
475
|
+
)
|
476
|
+
}
|
477
|
+
)
|
478
|
+
}
|
479
|
+
) });
|
480
|
+
};
|
481
|
+
|
482
|
+
// src/context-menu.tsx
|
483
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
484
|
+
var [ContextMenuProvider, useContextMenu] = (0, import_utils3.createContext)(
|
485
|
+
{
|
486
|
+
strict: false,
|
487
|
+
name: "ContextMenuContext"
|
488
|
+
}
|
489
|
+
);
|
490
|
+
var ContextMenu = (props) => {
|
491
|
+
const [styles, mergedProps] = (0, import_core3.useMultiComponentStyle)("ContextMenu", props);
|
492
|
+
const { ...rest } = (0, import_core3.omitThemeProps)(mergedProps);
|
493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ContextMenuProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Menu, { trigger: "contextmenu", ...rest }) });
|
494
|
+
};
|
495
|
+
// Annotate the CommonJS export names for ESM import in node:
|
496
|
+
0 && (module.exports = {
|
497
|
+
ContextMenu,
|
498
|
+
useContextMenu
|
499
|
+
});
|
500
|
+
//# sourceMappingURL=context-menu.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/context-menu.tsx","../src/menu.tsx","../src/menu-item.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport type { MenuProps } from \"./menu\"\nimport { Menu } from \"./menu\"\n\ntype ContextMenuContext = {\n styles: Record<string, CSSUIObject>\n}\n\nconst [ContextMenuProvider, useContextMenu] = createContext<ContextMenuContext>(\n {\n strict: false,\n name: \"ContextMenuContext\",\n },\n)\n\nexport { useContextMenu }\n\ntype ContextMenuOptions = {}\n\nexport type ContextMenuProps = Omit<MenuProps, \"trigger\"> &\n ThemeProps<\"ContextMenu\"> &\n ContextMenuOptions\n\n/**\n * `ContextMenu` is displays a menu to the user such as a set of actions or functions triggered by a button.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"ContextMenu\", props)\n const { ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ContextMenuProvider value={{ styles }}>\n <Menu trigger=\"contextmenu\" {...rest} />\n </ContextMenuProvider>\n )\n}\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n funcAll,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { useContextMenu } from \"./context-menu\"\nimport { useUpstreamMenuItem } from \"./menu-item\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onUpstreamClose?: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<number | null>\n isNested: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ntype UpstreamMenuContext = {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n strict: false,\n name: \"UpstreamMenuContext\",\n })\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\"> &\n MenuOptions\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n initialFocusRef,\n closeOnSelect = true,\n closeOnBlur,\n placement,\n duration = 0.2,\n offset,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } =\n useUpstreamMenu() ?? {}\n const { setDownstreamOpen, hasDownstreamRef } = useUpstreamMenuItem() ?? {}\n const isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<number | null>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\n onClose: onCloseInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onUpstreamClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n offset,\n duration,\n initialFocusRef,\n relatedRef,\n closeOnButton: false,\n closeOnBlur,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n createContext,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n FocusEvent,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\ntype UpstreamMenuItemContext = {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLButtonElement>>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n hasDownstreamRef: MutableRefObject<boolean>\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n strict: false,\n name: \"UpstreamMenuItemContext\",\n })\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n onMouseEnter: onMouseEnterProp,\n onMouseMove: onMouseMoveProp,\n onMouseLeave: onMouseLeaveProp,\n onKeyDown: onKeyDownProp,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n onUpstreamClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLButtonElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseEnter = useCallback(\n (event: any) => {\n onMouseEnterProp?.(event)\n\n if (isDisabled) return\n\n setFocusedIndex(index)\n },\n [setFocusedIndex, index, isDisabled, onMouseEnterProp],\n )\n\n const onMouseMove = useCallback(\n (event: any) => {\n onMouseMoveProp?.(event)\n\n if (buttonRef.current && !isActiveElement(buttonRef.current))\n onMouseEnter(event)\n },\n [onMouseEnter, onMouseMoveProp],\n )\n\n const onMouseLeave = useCallback(\n (event: any) => {\n onMouseLeaveProp?.(event)\n\n if (isDisabled) return\n\n setFocusedIndex(-1)\n },\n [setFocusedIndex, isDisabled, onMouseLeaveProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [\n onClickProp,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n onUpstreamClose,\n ],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const onRestoreFocus = useCallback(() => {\n buttonRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDownProp?.(ev)\n\n const actions: Record<string, Function | undefined> = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onKeyDownProp, onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n focusOnClick: false,\n ...props,\n onClick,\n onFocus,\n onMouseEnter,\n onMouseMove,\n onMouseLeave,\n onKeyDown: handlerAll(onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n buttonRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n setDownstreamOpen,\n hasDownstreamRef,\n }}\n >\n <ui.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport type MenuIconProps = HTMLUIProps<\"span\">\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport type MenuCommandProps = HTMLUIProps<\"span\">\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_react","_a","import_jsx_runtime","_a","id","onClose","import_jsx_runtime"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/index.d.mts
CHANGED
@@ -5,6 +5,8 @@ export { MenuCommand, MenuCommandProps, MenuIcon, MenuIconProps, MenuItem, MenuI
|
|
5
5
|
export { MenuGroup, MenuGroupProps } from './menu-group.mjs';
|
6
6
|
export { MenuOptionGroup, MenuOptionGroupProps } from './menu-option-group.mjs';
|
7
7
|
export { MenuDivider, MenuDividerProps } from './menu-divider.mjs';
|
8
|
+
export { ContextMenu, ContextMenuProps } from './context-menu.mjs';
|
9
|
+
export { ContextMenuTrigger, ContextMenuTriggerProps } from './context-menu-trigger.mjs';
|
8
10
|
import 'react';
|
9
11
|
import '@yamada-ui/use-descendant';
|
10
12
|
import '@yamada-ui/core';
|
package/dist/index.d.ts
CHANGED
@@ -5,6 +5,8 @@ export { MenuCommand, MenuCommandProps, MenuIcon, MenuIconProps, MenuItem, MenuI
|
|
5
5
|
export { MenuGroup, MenuGroupProps } from './menu-group.js';
|
6
6
|
export { MenuOptionGroup, MenuOptionGroupProps } from './menu-option-group.js';
|
7
7
|
export { MenuDivider, MenuDividerProps } from './menu-divider.js';
|
8
|
+
export { ContextMenu, ContextMenuProps } from './context-menu.js';
|
9
|
+
export { ContextMenuTrigger, ContextMenuTriggerProps } from './context-menu-trigger.js';
|
8
10
|
import 'react';
|
9
11
|
import '@yamada-ui/use-descendant';
|
10
12
|
import '@yamada-ui/core';
|