@yamada-ui/menu 1.3.12 → 1.3.13-dev-20240917033401
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/{chunk-5ZWRZF6M.mjs → chunk-DPC5A6DV.mjs} +2 -2
- package/dist/chunk-DPC5A6DV.mjs.map +1 -0
- package/dist/{chunk-AG6UJA7D.mjs → chunk-HVOHR2NQ.mjs} +2 -2
- package/dist/chunk-HVOHR2NQ.mjs.map +1 -0
- package/dist/{chunk-G4OMCC2Y.mjs → chunk-M4PPRRRC.mjs} +5 -3
- package/dist/chunk-M4PPRRRC.mjs.map +1 -0
- package/dist/chunk-NNSVX2GX.mjs +170 -0
- package/dist/chunk-NNSVX2GX.mjs.map +1 -0
- package/dist/{chunk-73KHS3JD.mjs → chunk-O5D4LR5P.mjs} +2 -2
- package/dist/chunk-O5D4LR5P.mjs.map +1 -0
- package/dist/chunk-OFCEMPQW.mjs +29 -0
- package/dist/chunk-OFCEMPQW.mjs.map +1 -0
- package/dist/{chunk-6YBKZRIZ.mjs → chunk-SI3WI4AI.mjs} +3 -3
- package/dist/chunk-SI3WI4AI.mjs.map +1 -0
- package/dist/chunk-T7CXLEBW.mjs +243 -0
- package/dist/chunk-T7CXLEBW.mjs.map +1 -0
- package/dist/chunk-ZUOFHOX6.mjs +43 -0
- package/dist/chunk-ZUOFHOX6.mjs.map +1 -0
- package/dist/chunk-ZV73JKM5.mjs +21 -0
- package/dist/chunk-ZV73JKM5.mjs.map +1 -0
- package/dist/context-menu-trigger.d.mts +2 -1
- package/dist/context-menu-trigger.d.ts +2 -1
- package/dist/context-menu-trigger.js +32 -17
- package/dist/context-menu-trigger.js.map +1 -1
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.d.mts +4 -10
- package/dist/context-menu.d.ts +4 -10
- package/dist/context-menu.js +43 -264
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +5 -5
- package/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +259 -255
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +16 -11
- package/dist/menu-button.d.mts +4 -3
- package/dist/menu-button.d.ts +4 -3
- package/dist/menu-button.js +55 -58
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +3 -2
- package/dist/menu-context.d.mts +210 -0
- package/dist/menu-context.d.ts +210 -0
- package/dist/menu-context.js +77 -0
- package/dist/menu-context.js.map +1 -0
- package/dist/menu-context.mjs +30 -0
- package/dist/menu-context.mjs.map +1 -0
- package/dist/menu-divider.d.mts +3 -2
- package/dist/menu-divider.d.ts +3 -2
- package/dist/menu-divider.js +26 -21
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.d.mts +3 -3
- package/dist/menu-group.d.ts +3 -3
- package/dist/menu-group.js +17 -14
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.d.mts +14 -19
- package/dist/menu-item.d.ts +14 -19
- package/dist/menu-item.js +40 -45
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +4 -7
- package/dist/menu-list.d.mts +2 -2
- package/dist/menu-list.d.ts +2 -2
- package/dist/menu-list.js +23 -20
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.d.mts +6 -7
- package/dist/menu-option-group.d.ts +6 -7
- package/dist/menu-option-group.js +97 -100
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +4 -3
- package/dist/menu.d.mts +7 -87
- package/dist/menu.d.ts +7 -87
- package/dist/menu.js +41 -274
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +4 -13
- package/package.json +11 -11
- package/dist/chunk-5ZWRZF6M.mjs.map +0 -1
- package/dist/chunk-6IPLI42Z.mjs +0 -447
- package/dist/chunk-6IPLI42Z.mjs.map +0 -1
- package/dist/chunk-6YBKZRIZ.mjs.map +0 -1
- package/dist/chunk-73KHS3JD.mjs.map +0 -1
- package/dist/chunk-AG6UJA7D.mjs.map +0 -1
- package/dist/chunk-G4OMCC2Y.mjs.map +0 -1
- package/dist/chunk-ZOUBZWDN.mjs +0 -27
- package/dist/chunk-ZOUBZWDN.mjs.map +0 -1
package/dist/context-menu.js
CHANGED
|
@@ -21,264 +21,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/context-menu.tsx
|
|
22
22
|
var context_menu_exports = {};
|
|
23
23
|
__export(context_menu_exports, {
|
|
24
|
-
ContextMenu: () => ContextMenu
|
|
25
|
-
useContextMenu: () => useContextMenu
|
|
24
|
+
ContextMenu: () => ContextMenu
|
|
26
25
|
});
|
|
27
26
|
module.exports = __toCommonJS(context_menu_exports);
|
|
28
|
-
var
|
|
29
|
-
var import_utils3 = require("@yamada-ui/utils");
|
|
27
|
+
var import_core2 = require("@yamada-ui/core");
|
|
30
28
|
|
|
31
29
|
// src/menu.tsx
|
|
32
|
-
var
|
|
30
|
+
var import_core = require("@yamada-ui/core");
|
|
33
31
|
var import_popover = require("@yamada-ui/popover");
|
|
34
|
-
var import_use_descendant = require("@yamada-ui/use-descendant");
|
|
35
32
|
var import_use_disclosure = require("@yamada-ui/use-disclosure");
|
|
36
33
|
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
34
|
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("menuitem"));
|
|
52
|
-
};
|
|
53
|
-
var MenuItem = (0, import_core.forwardRef)(
|
|
54
|
-
({
|
|
55
|
-
className,
|
|
56
|
-
isDisabled,
|
|
57
|
-
isFocusable,
|
|
58
|
-
closeOnSelect: customCloseOnSelect,
|
|
59
|
-
icon,
|
|
60
|
-
command,
|
|
61
|
-
children,
|
|
62
|
-
...props
|
|
63
|
-
}, ref) => {
|
|
64
|
-
var _a;
|
|
65
|
-
const {
|
|
66
|
-
focusedIndex,
|
|
67
|
-
setFocusedIndex,
|
|
68
|
-
isOpen,
|
|
69
|
-
onClose,
|
|
70
|
-
onUpstreamClose,
|
|
71
|
-
closeOnSelect: generalCloseOnSelect,
|
|
72
|
-
menuRef,
|
|
73
|
-
requestAnimationFrameId,
|
|
74
|
-
isNested,
|
|
75
|
-
styles
|
|
76
|
-
} = useMenu();
|
|
77
|
-
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
|
78
|
-
const trulyDisabled = isDisabled && !isFocusable;
|
|
79
|
-
const itemRef = (0, import_react.useRef)(null);
|
|
80
|
-
const hasDownstreamRef = (0, import_react.useRef)(false);
|
|
81
|
-
const onKeyDownRef = (0, import_react.useRef)(
|
|
82
|
-
() => void 0
|
|
83
|
-
);
|
|
84
|
-
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
|
85
|
-
const [isDownstreamOpen, setDownstreamOpen] = (0, import_react.useState)(false);
|
|
86
|
-
const isFocused = index === focusedIndex;
|
|
87
|
-
const onMouseOver = (0, import_react.useCallback)(() => {
|
|
88
|
-
if (isDisabled) return;
|
|
89
|
-
setFocusedIndex(index);
|
|
90
|
-
}, [index, isDisabled, setFocusedIndex]);
|
|
91
|
-
const onMouseLeave = (0, import_react.useCallback)(() => {
|
|
92
|
-
if (isDisabled) return;
|
|
93
|
-
setFocusedIndex(-1);
|
|
94
|
-
}, [setFocusedIndex, isDisabled]);
|
|
95
|
-
const onClick = (0, import_react.useCallback)(
|
|
96
|
-
(ev) => {
|
|
97
|
-
if (!isTargetMenuItem(ev.currentTarget)) return;
|
|
98
|
-
const hasDownstream = hasDownstreamRef.current;
|
|
99
|
-
if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
|
|
100
|
-
onClose();
|
|
101
|
-
onUpstreamClose == null ? void 0 : onUpstreamClose();
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
[customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
|
|
105
|
-
);
|
|
106
|
-
const onFocus = (0, import_react.useCallback)(() => {
|
|
107
|
-
setFocusedIndex(index);
|
|
108
|
-
}, [setFocusedIndex, index]);
|
|
109
|
-
const onRestoreFocus = (0, import_react.useCallback)(() => {
|
|
110
|
-
var _a2;
|
|
111
|
-
(_a2 = itemRef.current) == null ? void 0 : _a2.focus();
|
|
112
|
-
setFocusedIndex(index);
|
|
113
|
-
}, [setFocusedIndex, index]);
|
|
114
|
-
const onKeyDown = (0, import_react.useCallback)(
|
|
115
|
-
(ev) => {
|
|
116
|
-
const actions = {
|
|
117
|
-
ArrowLeft: isNested ? (0, import_utils.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
|
118
|
-
};
|
|
119
|
-
const action = actions[ev.key];
|
|
120
|
-
if (!action) return;
|
|
121
|
-
ev.preventDefault();
|
|
122
|
-
ev.stopPropagation();
|
|
123
|
-
action();
|
|
124
|
-
},
|
|
125
|
-
[onUpstreamRestoreFocus, onClose, isNested]
|
|
126
|
-
);
|
|
127
|
-
const rest = (0, import_use_clickable.useClickable)({
|
|
128
|
-
focusOnClick: false,
|
|
129
|
-
...props,
|
|
130
|
-
onClick: (0, import_utils.handlerAll)(props.onClick, onClick),
|
|
131
|
-
onFocus: (0, import_utils.handlerAll)(props.onFocus, onFocus),
|
|
132
|
-
onMouseOver: (0, import_utils.handlerAll)(props.onMouseOver, onMouseOver),
|
|
133
|
-
onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, onMouseLeave),
|
|
134
|
-
onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
|
135
|
-
ref: (0, import_utils.mergeRefs)(register, itemRef, ref),
|
|
136
|
-
isDisabled,
|
|
137
|
-
isFocusable
|
|
138
|
-
});
|
|
139
|
-
(0, import_utils.useUpdateEffect)(() => {
|
|
140
|
-
if (!isOpen) return;
|
|
141
|
-
const id = requestAnimationFrameId.current;
|
|
142
|
-
if (isFocused && !trulyDisabled && itemRef.current) {
|
|
143
|
-
if (id) cancelAnimationFrame(id);
|
|
144
|
-
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
|
145
|
-
var _a2;
|
|
146
|
-
(_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
|
147
|
-
requestAnimationFrameId.current = null;
|
|
148
|
-
});
|
|
149
|
-
} else if (menuRef.current && !(0, import_utils.isActiveElement)(menuRef.current)) {
|
|
150
|
-
menuRef.current.focus({ preventScroll: true });
|
|
151
|
-
}
|
|
152
|
-
return () => {
|
|
153
|
-
if (id) cancelAnimationFrame(id);
|
|
154
|
-
};
|
|
155
|
-
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
|
156
|
-
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
|
|
157
|
-
const css = {
|
|
158
|
-
textDecoration: "none",
|
|
159
|
-
color: "inherit",
|
|
160
|
-
userSelect: "none",
|
|
161
|
-
display: "flex",
|
|
162
|
-
width: "100%",
|
|
163
|
-
alignItems: "center",
|
|
164
|
-
textAlign: "start",
|
|
165
|
-
flex: "0 0 auto",
|
|
166
|
-
outline: 0,
|
|
167
|
-
gap: "0.75rem",
|
|
168
|
-
...styles.item
|
|
169
|
-
};
|
|
170
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
171
|
-
UpstreamMenuItemProvider,
|
|
172
|
-
{
|
|
173
|
-
value: {
|
|
174
|
-
onKeyDownRef,
|
|
175
|
-
onUpstreamRestoreFocus: onRestoreFocus,
|
|
176
|
-
setDownstreamOpen,
|
|
177
|
-
hasDownstreamRef
|
|
178
|
-
},
|
|
179
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
180
|
-
import_core.ui.li,
|
|
181
|
-
{
|
|
182
|
-
...rest,
|
|
183
|
-
...isDownstreamOpen ? { "data-active": "" } : {},
|
|
184
|
-
role: "menuitem",
|
|
185
|
-
tabIndex: isFocused ? 0 : -1,
|
|
186
|
-
className: (0, import_utils.cx)("ui-menu__item", className),
|
|
187
|
-
__css: css,
|
|
188
|
-
children: [
|
|
189
|
-
icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { children: icon }) : null,
|
|
190
|
-
children,
|
|
191
|
-
command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCommand, { children: command }) : null
|
|
192
|
-
]
|
|
193
|
-
}
|
|
194
|
-
)
|
|
195
|
-
}
|
|
196
|
-
);
|
|
197
|
-
}
|
|
198
|
-
);
|
|
199
|
-
var MenuOptionItem = (0, import_core.forwardRef)(
|
|
200
|
-
({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
|
|
201
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
202
|
-
MenuItem,
|
|
203
|
-
{
|
|
204
|
-
ref,
|
|
205
|
-
className: (0, import_utils.cx)("ui-menu__item--option", className),
|
|
206
|
-
"aria-checked": (0, import_utils.ariaAttr)(isChecked),
|
|
207
|
-
closeOnSelect,
|
|
208
|
-
...rest,
|
|
209
|
-
children: [
|
|
210
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) }) : null,
|
|
211
|
-
children
|
|
212
|
-
]
|
|
213
|
-
}
|
|
214
|
-
);
|
|
215
|
-
}
|
|
216
|
-
);
|
|
217
|
-
var MenuIcon = (0, import_core.forwardRef)(
|
|
218
|
-
({ className, ...rest }, ref) => {
|
|
219
|
-
const { styles } = useMenu();
|
|
220
|
-
const css = {
|
|
221
|
-
flexShrink: 0,
|
|
222
|
-
display: "inline-flex",
|
|
223
|
-
justifyContent: "center",
|
|
224
|
-
alignItems: "center",
|
|
225
|
-
fontSize: "0.85em",
|
|
226
|
-
...styles.icon
|
|
227
|
-
};
|
|
228
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
229
|
-
import_core.ui.span,
|
|
230
|
-
{
|
|
231
|
-
ref,
|
|
232
|
-
className: (0, import_utils.cx)("ui-menu__item__icon", className),
|
|
233
|
-
__css: css,
|
|
234
|
-
...rest
|
|
235
|
-
}
|
|
236
|
-
);
|
|
237
|
-
}
|
|
238
|
-
);
|
|
239
|
-
var MenuCommand = (0, import_core.forwardRef)(
|
|
240
|
-
({ className, ...rest }, ref) => {
|
|
241
|
-
const { styles } = useMenu();
|
|
242
|
-
const css = { ...styles.command };
|
|
243
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
244
|
-
import_core.ui.span,
|
|
245
|
-
{
|
|
246
|
-
ref,
|
|
247
|
-
className: (0, import_utils.cx)("ui-menu__item__command", className),
|
|
248
|
-
__css: css,
|
|
249
|
-
...rest
|
|
250
|
-
}
|
|
251
|
-
);
|
|
252
|
-
}
|
|
253
|
-
);
|
|
254
|
-
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)(
|
|
255
|
-
"polygon",
|
|
256
|
-
{
|
|
257
|
-
fill: "currentColor",
|
|
258
|
-
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
|
|
259
|
-
}
|
|
260
|
-
) });
|
|
261
35
|
|
|
262
|
-
// src/menu.
|
|
263
|
-
var
|
|
36
|
+
// src/menu-context.ts
|
|
37
|
+
var import_use_descendant = require("@yamada-ui/use-descendant");
|
|
38
|
+
var import_utils = require("@yamada-ui/utils");
|
|
264
39
|
var {
|
|
265
40
|
DescendantsContextProvider,
|
|
266
41
|
useDescendantsContext: useMenuDescendantsContext,
|
|
267
42
|
useDescendants,
|
|
268
43
|
useDescendant: useMenuDescendant
|
|
269
44
|
} = (0, import_use_descendant.createDescendant)();
|
|
270
|
-
var [MenuProvider, useMenu] = (0,
|
|
45
|
+
var [MenuProvider, useMenu] = (0, import_utils.createContext)({
|
|
271
46
|
name: "MenuContext",
|
|
272
47
|
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
|
273
48
|
});
|
|
274
|
-
var [
|
|
49
|
+
var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
|
|
50
|
+
strict: false,
|
|
51
|
+
name: "ContextMenuContext"
|
|
52
|
+
});
|
|
53
|
+
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
|
|
275
54
|
strict: false,
|
|
276
55
|
name: "UpstreamMenuContext"
|
|
277
56
|
});
|
|
57
|
+
var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
|
|
58
|
+
strict: false,
|
|
59
|
+
name: "UpstreamMenuItemContext"
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
// src/menu.tsx
|
|
63
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
278
64
|
var Menu = (props) => {
|
|
279
65
|
var _a, _b, _c;
|
|
280
66
|
const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
|
|
281
|
-
const [styles, mergedProps] = (0,
|
|
67
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Menu", props, {
|
|
282
68
|
isProcessSkip: !!contextMenuStyles,
|
|
283
69
|
styles: contextMenuStyles
|
|
284
70
|
});
|
|
@@ -292,7 +78,7 @@ var Menu = (props) => {
|
|
|
292
78
|
onOpen: onOpenProp,
|
|
293
79
|
onClose: onCloseProp,
|
|
294
80
|
...rest
|
|
295
|
-
} = (0,
|
|
81
|
+
} = (0, import_core.omitThemeProps)(mergedProps);
|
|
296
82
|
const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
|
|
297
83
|
const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
|
|
298
84
|
const isNested = !!relatedRef;
|
|
@@ -304,12 +90,12 @@ var Menu = (props) => {
|
|
|
304
90
|
placement != null ? placement : placement = "bottom-start";
|
|
305
91
|
}
|
|
306
92
|
const descendants = useDescendants();
|
|
307
|
-
const [focusedIndex, setFocusedIndex] = (0,
|
|
308
|
-
const menuRef = (0,
|
|
309
|
-
const timeoutIds = (0,
|
|
310
|
-
const requestAnimationFrameId = (0,
|
|
311
|
-
const onCloseMapRef = (0,
|
|
312
|
-
const onFocusMenu = (0,
|
|
93
|
+
const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
|
|
94
|
+
const menuRef = (0, import_react.useRef)(null);
|
|
95
|
+
const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
|
|
96
|
+
const requestAnimationFrameId = (0, import_react.useRef)(null);
|
|
97
|
+
const onCloseMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
|
|
98
|
+
const onFocusMenu = (0, import_react.useCallback)(() => {
|
|
313
99
|
requestAnimationFrame(
|
|
314
100
|
() => {
|
|
315
101
|
var _a2;
|
|
@@ -317,7 +103,7 @@ var Menu = (props) => {
|
|
|
317
103
|
}
|
|
318
104
|
);
|
|
319
105
|
}, []);
|
|
320
|
-
const onFocusFirstItem = (0,
|
|
106
|
+
const onFocusFirstItem = (0, import_react.useCallback)(() => {
|
|
321
107
|
const id2 = setTimeout(() => {
|
|
322
108
|
if (initialFocusRef) return;
|
|
323
109
|
const first = descendants.enabledFirstValue();
|
|
@@ -325,7 +111,7 @@ var Menu = (props) => {
|
|
|
325
111
|
});
|
|
326
112
|
timeoutIds.current.add(id2);
|
|
327
113
|
}, [descendants, initialFocusRef]);
|
|
328
|
-
const onFocusLastItem = (0,
|
|
114
|
+
const onFocusLastItem = (0, import_react.useCallback)(() => {
|
|
329
115
|
const id2 = setTimeout(() => {
|
|
330
116
|
if (initialFocusRef) return;
|
|
331
117
|
const last = descendants.enabledLastValue();
|
|
@@ -333,33 +119,33 @@ var Menu = (props) => {
|
|
|
333
119
|
});
|
|
334
120
|
timeoutIds.current.add(id2);
|
|
335
121
|
}, [descendants, initialFocusRef]);
|
|
336
|
-
const onOpenInternal = (0,
|
|
122
|
+
const onOpenInternal = (0, import_react.useCallback)(() => {
|
|
337
123
|
onOpenProp == null ? void 0 : onOpenProp();
|
|
338
124
|
if (!isNested) onFocusMenu();
|
|
339
125
|
}, [onOpenProp, isNested, onFocusMenu]);
|
|
340
|
-
const onCloseInternal = (0,
|
|
126
|
+
const onCloseInternal = (0, import_react.useCallback)(() => {
|
|
341
127
|
onCloseProp == null ? void 0 : onCloseProp();
|
|
342
128
|
for (const onClose2 of onCloseMapRef.current.values()) {
|
|
343
129
|
onClose2();
|
|
344
130
|
}
|
|
345
131
|
}, [onCloseProp]);
|
|
346
|
-
const id = (0,
|
|
132
|
+
const id = (0, import_react.useId)();
|
|
347
133
|
const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
|
|
348
134
|
...props,
|
|
349
135
|
onOpen: onOpenInternal,
|
|
350
136
|
onClose: onCloseInternal
|
|
351
137
|
});
|
|
352
|
-
(0,
|
|
138
|
+
(0, import_react.useEffect)(() => {
|
|
353
139
|
const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
|
|
354
140
|
onCloseMap == null ? void 0 : onCloseMap.set(id, onClose);
|
|
355
141
|
return () => {
|
|
356
142
|
onCloseMap == null ? void 0 : onCloseMap.delete(id);
|
|
357
143
|
};
|
|
358
144
|
}, [id, onClose, onDownstreamCloseMapRef]);
|
|
359
|
-
(0,
|
|
145
|
+
(0, import_react.useEffect)(() => {
|
|
360
146
|
if (setDownstreamOpen) setDownstreamOpen(isOpen);
|
|
361
147
|
}, [setDownstreamOpen, isOpen]);
|
|
362
|
-
(0,
|
|
148
|
+
(0, import_react.useEffect)(() => {
|
|
363
149
|
if (hasDownstreamRef) hasDownstreamRef.current = true;
|
|
364
150
|
return () => {
|
|
365
151
|
if (hasDownstreamRef) hasDownstreamRef.current = false;
|
|
@@ -372,7 +158,7 @@ var Menu = (props) => {
|
|
|
372
158
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
|
373
159
|
timeoutIds.current.clear();
|
|
374
160
|
});
|
|
375
|
-
return /* @__PURE__ */ (0,
|
|
161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
376
162
|
UpstreamMenuProvider,
|
|
377
163
|
{
|
|
378
164
|
value: {
|
|
@@ -380,7 +166,7 @@ var Menu = (props) => {
|
|
|
380
166
|
onDownstreamCloseMapRef: onCloseMapRef,
|
|
381
167
|
onUpstreamClose: (0, import_utils2.funcAll)(onUpstreamClose, onClose)
|
|
382
168
|
},
|
|
383
|
-
children: /* @__PURE__ */ (0,
|
|
169
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
384
170
|
MenuProvider,
|
|
385
171
|
{
|
|
386
172
|
value: {
|
|
@@ -398,7 +184,7 @@ var Menu = (props) => {
|
|
|
398
184
|
isNested,
|
|
399
185
|
styles
|
|
400
186
|
},
|
|
401
|
-
children: /* @__PURE__ */ (0,
|
|
187
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
402
188
|
import_popover.Popover,
|
|
403
189
|
{
|
|
404
190
|
...{
|
|
@@ -424,21 +210,14 @@ var Menu = (props) => {
|
|
|
424
210
|
};
|
|
425
211
|
|
|
426
212
|
// src/context-menu.tsx
|
|
427
|
-
var
|
|
428
|
-
var [ContextMenuProvider, useContextMenu] = (0, import_utils3.createContext)(
|
|
429
|
-
{
|
|
430
|
-
strict: false,
|
|
431
|
-
name: "ContextMenuContext"
|
|
432
|
-
}
|
|
433
|
-
);
|
|
213
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
434
214
|
var ContextMenu = (props) => {
|
|
435
|
-
const [styles, mergedProps] = (0,
|
|
436
|
-
const { ...rest } = (0,
|
|
437
|
-
return /* @__PURE__ */ (0,
|
|
215
|
+
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("ContextMenu", props);
|
|
216
|
+
const { ...rest } = (0, import_core2.omitThemeProps)(mergedProps);
|
|
217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContextMenuProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Menu, { trigger: "contextmenu", ...rest }) });
|
|
438
218
|
};
|
|
439
219
|
// Annotate the CommonJS export names for ESM import in node:
|
|
440
220
|
0 && (module.exports = {
|
|
441
|
-
ContextMenu
|
|
442
|
-
useContextMenu
|
|
221
|
+
ContextMenu
|
|
443
222
|
});
|
|
444
223
|
//# sourceMappingURL=context-menu.js.map
|
package/dist/context-menu.js.map
CHANGED
|
@@ -1 +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 triggered by a right click and displays a menu at the pointer's position.\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 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<HTMLLIElement>>\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(\"menuitem\")\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<\"li\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\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 itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\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 onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\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 [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\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 [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.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 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 role=\"menuitem\"\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"]}
|
|
1
|
+
{"version":3,"sources":["../src/context-menu.tsx","../src/menu.tsx","../src/menu-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport { useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { FC } from \"react\"\nimport type { MenuProps } from \"./menu\"\nimport { Menu } from \"./menu\"\nimport { ContextMenuProvider } from \"./menu-context\"\n\nexport interface ContextMenuProps\n extends Omit<MenuProps, \"trigger\">,\n ThemeProps<\"ContextMenu\"> {}\n\n/**\n * `ContextMenu` is triggered by a right click and displays a menu at the pointer's position.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"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 { ThemeProps } from \"@yamada-ui/core\"\nimport { useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { funcAll, useUnmountEffect, useUpdateEffect } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n DescendantsContextProvider,\n MenuProvider,\n UpstreamMenuProvider,\n useContextMenu,\n useDescendants,\n useUpstreamMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nexport interface 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 interface MenuProps\n extends 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] = useComponentMultiStyle(\"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 { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\n\nexport const {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant()\n\ninterface MenuContext extends 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: { [key: string]: CSSUIObject }\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n strict: false,\n name: \"ContextMenuContext\",\n })\n\ninterface 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\ninterface UpstreamMenuItemContext {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\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"],"mappings":"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","names":["import_core","import_utils","_a","id","onClose","import_jsx_runtime"]}
|
package/dist/context-menu.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
|
-
ContextMenu
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
ContextMenu
|
|
4
|
+
} from "./chunk-ZV73JKM5.mjs";
|
|
5
|
+
import "./chunk-NNSVX2GX.mjs";
|
|
6
|
+
import "./chunk-ZUOFHOX6.mjs";
|
|
6
7
|
export {
|
|
7
|
-
ContextMenu
|
|
8
|
-
useContextMenu
|
|
8
|
+
ContextMenu
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=context-menu.mjs.map
|
package/dist/index.d.mts
CHANGED
|
@@ -7,8 +7,7 @@ export { MenuOptionGroup, MenuOptionGroupProps } from './menu-option-group.mjs';
|
|
|
7
7
|
export { MenuDivider, MenuDividerProps } from './menu-divider.mjs';
|
|
8
8
|
export { ContextMenu, ContextMenuProps } from './context-menu.mjs';
|
|
9
9
|
export { ContextMenuTrigger, ContextMenuTriggerProps } from './context-menu-trigger.mjs';
|
|
10
|
-
import 'react';
|
|
11
|
-
import '@yamada-ui/use-descendant';
|
|
12
10
|
import '@yamada-ui/core';
|
|
13
11
|
import '@yamada-ui/popover';
|
|
12
|
+
import 'react';
|
|
14
13
|
import '@yamada-ui/motion';
|
package/dist/index.d.ts
CHANGED
|
@@ -7,8 +7,7 @@ export { MenuOptionGroup, MenuOptionGroupProps } from './menu-option-group.js';
|
|
|
7
7
|
export { MenuDivider, MenuDividerProps } from './menu-divider.js';
|
|
8
8
|
export { ContextMenu, ContextMenuProps } from './context-menu.js';
|
|
9
9
|
export { ContextMenuTrigger, ContextMenuTriggerProps } from './context-menu-trigger.js';
|
|
10
|
-
import 'react';
|
|
11
|
-
import '@yamada-ui/use-descendant';
|
|
12
10
|
import '@yamada-ui/core';
|
|
13
11
|
import '@yamada-ui/popover';
|
|
12
|
+
import 'react';
|
|
14
13
|
import '@yamada-ui/motion';
|