@fluixi-ui/context-menu 0.2.0-alpha.17 → 0.2.0-alpha.19

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.
Files changed (5) hide show
  1. package/dist/context-menu.d.ts.map +1 -1
  2. package/dist/context-menu.js +557 -413
  3. package/dist/index.js +2 -13
  4. package/dist/tsconfig.lib.tsbuildinfo +1 -1
  5. package/package.json +5 -5
package/dist/context-menu.js CHANGED
@@ -1,435 +1,579 @@
1
- import { delegateEvents, createComponent, splitProps, createNativeElement, spread, mergeProps, insert, handleRef } from "@fluixi/dom";
2
- import { createSignal, createMemo, createEffect, createRenderEffect, onCleanup } from "@fluixi/reactive/signal";
1
+ import { createComponent, createNativeElement, delegateEvents, handleRef, insert, mergeProps, splitProps, spread } from "@fluixi/dom";
2
+ import { createEffect, createMemo, createRenderEffect, createSignal, onCleanup } from "@fluixi/reactive/signal";
3
3
  import { fxProps } from "@fluixi-ui/fx";
4
- import { useRef, Show, onMount } from "@fluixi/core";
5
- import { createSafeContext, createControllableBooleanSignal, createId, composeEventHandlers, dataAttr, composeId, focusWithoutScrolling } from "@fluixi-ui/kit";
6
- import { createCollection, createTypeahead, Portal, createDismissableLayer, createFocusScope, createFloatingPosition, getNextEnabledIndex } from "@fluixi-ui/primitives";
4
+ import { Show, onMount, useRef } from "@fluixi/core";
5
+ import { composeEventHandlers, composeId, createControllableBooleanSignal, createId, createSafeContext, dataAttr, focusWithoutScrolling } from "@fluixi-ui/kit";
6
+ import { Portal, createCollection, createDismissableLayer, createFloatingPosition, createFocusScope, createTypeahead, getNextEnabledIndex } from "@fluixi-ui/primitives";
7
+ //#region src/context-menu.tsx
7
8
  delegateEvents(["keydown", "click"]);
8
- const [ContextMenuProvider, useContextMenuContext] = createSafeContext("ContextMenu");
9
+ var [ContextMenuProvider, useContextMenuContext] = createSafeContext("ContextMenu");
10
+ /**
11
+ * Root of a context menu opened by right-click (or long-press) on its trigger,
12
+ * positioned at the pointer. Same keyboard-navigable menu as
13
+ * {@link DropdownMenu}, but anchored to the cursor rather than a button.
14
+ *
15
+ * @example
16
+ * ```tsx
17
+ * import {
18
+ * ContextMenu, ContextMenuTrigger, ContextMenuPortal,
19
+ * ContextMenuContent, ContextMenuItem, ContextMenuSeparator,
20
+ * } from '@fluixi-ui/context-menu';
21
+ *
22
+ * <ContextMenu>
23
+ * <ContextMenuTrigger>Right-click this area</ContextMenuTrigger>
24
+ * <ContextMenuPortal>
25
+ * <ContextMenuContent>
26
+ * <ContextMenuItem onSelect={rename}>Rename</ContextMenuItem>
27
+ * <ContextMenuSeparator />
28
+ * <ContextMenuItem onSelect={remove}>Delete</ContextMenuItem>
29
+ * </ContextMenuContent>
30
+ * </ContextMenuPortal>
31
+ * </ContextMenu>
32
+ * ```
33
+ */
9
34
  function ContextMenu(props) {
10
- const [isOpen, setOpen] = createControllableBooleanSignal({
11
- value: () => props.open,
12
- defaultValue: () => props.defaultOpen ?? false,
13
- onChange: (open) => props.onOpenChange?.(open)
14
- });
15
- const contentId = createId("context-menu");
16
- const [anchor, setAnchor] = createSignal({ x: 0, y: 0 });
17
- const collection = createCollection();
18
- const [focusedIndex, setFocusedIndex] = createSignal(-1);
19
- let activeSubClose;
20
- const focusIndex = (index) => {
21
- const item = collection.items()[index];
22
- if (!item) return;
23
- setFocusedIndex(index);
24
- focusWithoutScrolling(item.ref);
25
- };
26
- const move = (action) => {
27
- const next = getNextEnabledIndex(collection.items(), focusedIndex(), action, true);
28
- if (next !== -1) focusIndex(next);
29
- };
30
- const focusFirst = () => {
31
- const i = collection.items().findIndex((item) => !item.disabled);
32
- if (i !== -1) focusIndex(i);
33
- };
34
- const focusLast = () => {
35
- const items = collection.items();
36
- for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return focusIndex(i);
37
- };
38
- const typeahead = createTypeahead({
39
- getItems: () => collection.items().map((item) => ({ textValue: item.ref.textContent ?? "", disabled: item.disabled })),
40
- getActiveIndex: () => focusedIndex(),
41
- onMatch: (index) => focusIndex(index)
42
- });
43
- const onContentKeyDown = (event) => {
44
- switch (event.key) {
45
- case "ArrowDown":
46
- event.preventDefault();
47
- move("next");
48
- break;
49
- case "ArrowUp":
50
- event.preventDefault();
51
- move("previous");
52
- break;
53
- case "Home":
54
- event.preventDefault();
55
- focusFirst();
56
- break;
57
- case "End":
58
- event.preventDefault();
59
- focusLast();
60
- break;
61
- case "Tab":
62
- event.preventDefault();
63
- setOpen(false);
64
- break;
65
- default:
66
- typeahead.onKeyDown(event);
67
- }
68
- };
69
- const context = {
70
- isOpen,
71
- setOpen: (open) => setOpen(open),
72
- contentId,
73
- anchor,
74
- openAt: (x, y) => {
75
- setAnchor({ x, y });
76
- setOpen(true);
77
- },
78
- collection,
79
- onContentKeyDown,
80
- focusFirst,
81
- select: () => {
82
- activeSubClose?.();
83
- activeSubClose = void 0;
84
- setOpen(false);
85
- },
86
- openSub: (closeFn) => {
87
- activeSubClose?.();
88
- activeSubClose = closeFn;
89
- }
90
- };
91
- return createMemo(() => createComponent(ContextMenuProvider, { get value() {
92
- return context;
93
- }, get children() {
94
- return props.children;
95
- } }));
35
+ const [isOpen, setOpen] = createControllableBooleanSignal({
36
+ value: () => props.open,
37
+ defaultValue: () => props.defaultOpen ?? false,
38
+ onChange: (open) => props.onOpenChange?.(open)
39
+ });
40
+ const contentId = createId("context-menu");
41
+ const [anchor, setAnchor] = createSignal({
42
+ x: 0,
43
+ y: 0
44
+ });
45
+ const collection = createCollection();
46
+ const [focusedIndex, setFocusedIndex] = createSignal(-1);
47
+ let activeSubClose;
48
+ const focusIndex = (index) => {
49
+ const item = collection.items()[index];
50
+ if (!item) return;
51
+ setFocusedIndex(index);
52
+ focusWithoutScrolling(item.ref);
53
+ };
54
+ const move = (action) => {
55
+ const next = getNextEnabledIndex(collection.items(), focusedIndex(), action, true);
56
+ if (next !== -1) focusIndex(next);
57
+ };
58
+ const focusFirst = () => {
59
+ const i = collection.items().findIndex((item) => !item.disabled);
60
+ if (i !== -1) focusIndex(i);
61
+ };
62
+ const focusLast = () => {
63
+ const items = collection.items();
64
+ for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return focusIndex(i);
65
+ };
66
+ const typeahead = createTypeahead({
67
+ getItems: () => collection.items().map((item) => ({
68
+ textValue: item.ref.textContent ?? "",
69
+ disabled: item.disabled
70
+ })),
71
+ getActiveIndex: () => focusedIndex(),
72
+ onMatch: (index) => focusIndex(index)
73
+ });
74
+ const onContentKeyDown = (event) => {
75
+ switch (event.key) {
76
+ case "ArrowDown":
77
+ event.preventDefault();
78
+ move("next");
79
+ break;
80
+ case "ArrowUp":
81
+ event.preventDefault();
82
+ move("previous");
83
+ break;
84
+ case "Home":
85
+ event.preventDefault();
86
+ focusFirst();
87
+ break;
88
+ case "End":
89
+ event.preventDefault();
90
+ focusLast();
91
+ break;
92
+ case "Tab":
93
+ event.preventDefault();
94
+ setOpen(false);
95
+ break;
96
+ default: typeahead.onKeyDown(event);
97
+ }
98
+ };
99
+ const context = {
100
+ isOpen,
101
+ setOpen: (open) => setOpen(open),
102
+ contentId,
103
+ anchor,
104
+ openAt: (x, y) => {
105
+ setAnchor({
106
+ x,
107
+ y
108
+ });
109
+ setOpen(true);
110
+ },
111
+ collection,
112
+ onContentKeyDown,
113
+ focusFirst,
114
+ select: () => {
115
+ activeSubClose?.();
116
+ activeSubClose = void 0;
117
+ setOpen(false);
118
+ },
119
+ openSub: (closeFn) => {
120
+ activeSubClose?.();
121
+ activeSubClose = closeFn;
122
+ }
123
+ };
124
+ return createMemo(() => createComponent(ContextMenuProvider, {
125
+ get value() {
126
+ return context;
127
+ },
128
+ get children() {
129
+ return props.children;
130
+ }
131
+ }));
96
132
  }
133
+ /** The region that opens the menu at the cursor on right-click / long-press. */
97
134
  function ContextMenuTrigger(props) {
98
- const ctx = useContextMenuContext();
99
- const [local, others] = splitProps(props, ["ref", "children", "fx", "style"]);
100
- const setRef = (node) => {
101
- handleRef(local.ref, node);
102
- const onContextMenu = (event) => {
103
- event.preventDefault();
104
- ctx.openAt(event.clientX, event.clientY);
105
- };
106
- node.addEventListener("contextmenu", onContextMenu);
107
- onCleanup(() => node.removeEventListener("contextmenu", onContextMenu));
108
- };
109
- return (() => {
110
- const _el$ = createNativeElement("div");
111
- spread({ element: _el$, props: mergeProps(fxProps(
112
- () => local.fx,
113
- () => local.style
114
- ), others, { ref: setRef, "data-context-menu-trigger": "", "data-state": () => ctx.isOpen() ? "open" : "closed" }) });
115
- insert(_el$, local.children);
116
- return _el$;
117
- })();
135
+ const ctx = useContextMenuContext();
136
+ const [local, others] = splitProps(props, [
137
+ "ref",
138
+ "children",
139
+ "fx",
140
+ "style"
141
+ ]);
142
+ const setRef = (node) => {
143
+ handleRef(local.ref, node);
144
+ const onContextMenu = (event) => {
145
+ event.preventDefault();
146
+ ctx.openAt(event.clientX, event.clientY);
147
+ };
148
+ node.addEventListener("contextmenu", onContextMenu);
149
+ onCleanup(() => node.removeEventListener("contextmenu", onContextMenu));
150
+ };
151
+ return (() => {
152
+ const _el$ = createNativeElement("div");
153
+ spread({
154
+ element: _el$,
155
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
156
+ ref: setRef,
157
+ "data-context-menu-trigger": "",
158
+ "data-state": () => ctx.isOpen() ? "open" : "closed"
159
+ })
160
+ });
161
+ insert(_el$, local.children, null);
162
+ return _el$;
163
+ })();
118
164
  }
165
+ /** Portals the menu content to the document body while open. */
119
166
  function ContextMenuPortal(props) {
120
- const ctx = useContextMenuContext();
121
- const ref = props.ref || useRef(null);
122
- createEffect(() => {
123
- if (!ctx.isOpen() && ref.current) {
124
- ref.current.remove();
125
- }
126
- });
127
- return createMemo(() => createComponent(Show, { get when() {
128
- return ctx.isOpen();
129
- }, get children() {
130
- return createMemo(() => createComponent(Portal, { get ref() {
131
- return ref;
132
- }, get children() {
133
- return props.children;
134
- } }));
135
- } }));
167
+ const ctx = useContextMenuContext();
168
+ const ref = props.ref || useRef(null);
169
+ createEffect(() => {
170
+ if (!ctx.isOpen() && ref.current) ref.current.remove();
171
+ });
172
+ return createMemo(() => createComponent(Show, {
173
+ get when() {
174
+ return ctx.isOpen();
175
+ },
176
+ get children() {
177
+ return createMemo(() => createComponent(Portal, {
178
+ get ref() {
179
+ return ref;
180
+ },
181
+ get children() {
182
+ return props.children;
183
+ }
184
+ }));
185
+ }
186
+ }));
136
187
  }
188
+ /** The floating `role="menu"` surface positioned at the pointer. */
137
189
  function ContextMenuContent(props) {
138
- const ctx = useContextMenuContext();
139
- const [local, others] = splitProps(props, ["ref", "children", "style", "fx", "style"]);
140
- const [element, setElement] = createSignal(void 0);
141
- createDismissableLayer(element, { onDismiss: () => ctx.setOpen(false) });
142
- createFocusScope(element, { trap: false, autoFocus: false, restoreFocus: true });
143
- createRenderEffect(() => {
144
- const el = element();
145
- if (!el) return;
146
- const { x, y } = ctx.anchor();
147
- el.style.position = "fixed";
148
- const rect = el.getBoundingClientRect();
149
- const margin = 8;
150
- const maxLeft = window.innerWidth - rect.width - margin;
151
- const maxTop = window.innerHeight - rect.height - margin;
152
- const left = x > maxLeft ? Math.max(margin, x - rect.width) : x;
153
- const top = y > maxTop ? Math.max(margin, y - rect.height) : y;
154
- el.style.left = `${Math.min(Math.max(margin, left), Math.max(margin, maxLeft))}px`;
155
- el.style.top = `${Math.min(Math.max(margin, top), Math.max(margin, maxTop))}px`;
156
- });
157
- onMount(() => queueMicrotask(() => ctx.focusFirst()));
158
- const setRef = (node) => {
159
- setElement(node);
160
- handleRef(local.ref, node);
161
- };
162
- return (() => {
163
- const _el$ = createNativeElement("div");
164
- spread({ element: _el$, props: mergeProps(fxProps(
165
- () => local.fx,
166
- () => local.style
167
- ), others, { ref: setRef, role: "menu", id: () => ctx.contentId, "data-state": "open", tabindex: -1, onKeyDown: ctx.onContentKeyDown }) });
168
- insert(_el$, local.children);
169
- return _el$;
170
- })();
190
+ const ctx = useContextMenuContext();
191
+ const [local, others] = splitProps(props, [
192
+ "ref",
193
+ "children",
194
+ "style",
195
+ "fx",
196
+ "style"
197
+ ]);
198
+ const [element, setElement] = createSignal(void 0);
199
+ createDismissableLayer(element, {
200
+ shouldExcludeTarget: (target) => {
201
+ return !!(target instanceof Element ? target : target.parentElement)?.closest(`[data-menu-owner="${ctx.contentId}"]`);
202
+ },
203
+ onDismiss: () => ctx.setOpen(false)
204
+ });
205
+ createFocusScope(element, {
206
+ trap: false,
207
+ autoFocus: false,
208
+ restoreFocus: true
209
+ });
210
+ createRenderEffect(() => {
211
+ const el = element();
212
+ if (!el) return;
213
+ const { x, y } = ctx.anchor();
214
+ el.style.position = "fixed";
215
+ const rect = el.getBoundingClientRect();
216
+ const margin = 8;
217
+ const maxLeft = window.innerWidth - rect.width - margin;
218
+ const maxTop = window.innerHeight - rect.height - margin;
219
+ const left = x > maxLeft ? Math.max(margin, x - rect.width) : x;
220
+ const top = y > maxTop ? Math.max(margin, y - rect.height) : y;
221
+ el.style.left = `${Math.min(Math.max(margin, left), Math.max(margin, maxLeft))}px`;
222
+ el.style.top = `${Math.min(Math.max(margin, top), Math.max(margin, maxTop))}px`;
223
+ });
224
+ onMount(() => queueMicrotask(() => ctx.focusFirst()));
225
+ const setRef = (node) => {
226
+ setElement(node);
227
+ handleRef(local.ref, node);
228
+ };
229
+ return (() => {
230
+ const _el$ = createNativeElement("div");
231
+ spread({
232
+ element: _el$,
233
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
234
+ ref: setRef,
235
+ role: "menu",
236
+ id: () => ctx.contentId,
237
+ "data-state": "open",
238
+ tabindex: -1,
239
+ onKeyDown: ctx.onContentKeyDown
240
+ })
241
+ });
242
+ insert(_el$, local.children, null);
243
+ return _el$;
244
+ })();
171
245
  }
246
+ /** A menu action; runs `onSelect` and closes the menu when chosen. */
172
247
  function ContextMenuItem(props) {
173
- const ctx = useContextMenuContext();
174
- const [local, others] = splitProps(props, ["disabled", "onSelect", "onClick", "onPointerEnter", "ref", "children", "fx", "style"]);
175
- const setRef = (node) => {
176
- const remove = ctx.collection.register({ ref: node, disabled: local.disabled });
177
- onCleanup(remove);
178
- handleRef(local.ref, node);
179
- };
180
- const select = () => {
181
- if (local.disabled) return;
182
- local.onSelect?.();
183
- ctx.select();
184
- };
185
- return (() => {
186
- const _el$ = createNativeElement("div");
187
- spread({ element: _el$, props: mergeProps(fxProps(
188
- () => local.fx,
189
- () => local.style
190
- ), others, { ref: setRef, role: "menuitem", tabindex: -1, "aria-disabled": () => local.disabled ? "true" : void 0, "data-disabled": () => dataAttr(Boolean(local.disabled)), onClick: composeEventHandlers([
191
- local.onClick,
192
- () => select()
193
- ]), onKeyDown: (event) => {
194
- if (event.key === "Enter" || event.key === " ") {
195
- event.preventDefault();
196
- select();
197
- }
198
- }, onPointerEnter: composeEventHandlers([
199
- local.onPointerEnter,
200
- (e) => {
201
- if (local.disabled) return;
202
- e.currentTarget.focus();
203
- }
204
- ]) }) });
205
- insert(_el$, local.children);
206
- return _el$;
207
- })();
248
+ const ctx = useContextMenuContext();
249
+ const [local, others] = splitProps(props, [
250
+ "disabled",
251
+ "onSelect",
252
+ "onClick",
253
+ "onPointerEnter",
254
+ "ref",
255
+ "children",
256
+ "fx",
257
+ "style"
258
+ ]);
259
+ const setRef = (node) => {
260
+ const remove = ctx.collection.register({
261
+ ref: node,
262
+ disabled: local.disabled
263
+ });
264
+ onCleanup(remove);
265
+ handleRef(local.ref, node);
266
+ };
267
+ const select = () => {
268
+ if (local.disabled) return;
269
+ local.onSelect?.();
270
+ ctx.select();
271
+ };
272
+ return (() => {
273
+ const _el$ = createNativeElement("div");
274
+ spread({
275
+ element: _el$,
276
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
277
+ ref: setRef,
278
+ role: "menuitem",
279
+ tabindex: -1,
280
+ "aria-disabled": () => local.disabled ? "true" : void 0,
281
+ "data-disabled": () => dataAttr(Boolean(local.disabled)),
282
+ onClick: composeEventHandlers([local.onClick, () => select()]),
283
+ onKeyDown: (event) => {
284
+ if (event.key === "Enter" || event.key === " ") {
285
+ event.preventDefault();
286
+ select();
287
+ }
288
+ },
289
+ onPointerEnter: composeEventHandlers([local.onPointerEnter, (e) => {
290
+ if (local.disabled) return;
291
+ e.currentTarget.focus();
292
+ }])
293
+ })
294
+ });
295
+ insert(_el$, local.children, null);
296
+ return _el$;
297
+ })();
208
298
  }
299
+ /** A visual divider between groups of menu items. */
209
300
  function ContextMenuSeparator(props) {
210
- return (() => {
211
- const _el$ = createNativeElement("div");
212
- spread({ element: _el$, props: mergeProps(props, { role: "separator", "aria-orientation": "horizontal" }) });
213
- return _el$;
214
- })();
301
+ return (() => {
302
+ const _el$ = createNativeElement("div");
303
+ spread({
304
+ element: _el$,
305
+ props: mergeProps(props, {
306
+ role: "separator",
307
+ "aria-orientation": "horizontal"
308
+ })
309
+ });
310
+ return _el$;
311
+ })();
215
312
  }
313
+ /** A non-interactive heading labelling a group of menu items. */
216
314
  function ContextMenuLabel(props) {
217
- const [local, others] = splitProps(props, ["children", "fx", "style"]);
218
- return (() => {
219
- const _el$ = createNativeElement("div");
220
- spread({ element: _el$, props: mergeProps(fxProps(
221
- () => local.fx,
222
- () => local.style
223
- ), others, { "data-menu-label": "" }) });
224
- insert(_el$, local.children);
225
- return _el$;
226
- })();
315
+ const [local, others] = splitProps(props, [
316
+ "children",
317
+ "fx",
318
+ "style"
319
+ ]);
320
+ return (() => {
321
+ const _el$ = createNativeElement("div");
322
+ spread({
323
+ element: _el$,
324
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, { "data-menu-label": "" })
325
+ });
326
+ insert(_el$, local.children, null);
327
+ return _el$;
328
+ })();
227
329
  }
228
- const [SubMenuProvider, useSubMenuContext] = createSafeContext("ContextMenuSub");
330
+ var [SubMenuProvider, useSubMenuContext] = createSafeContext("ContextMenuSub");
331
+ /** Wraps a sub-trigger + sub-content pair to create a nested flyout menu. */
229
332
  function ContextMenuSub(props) {
230
- const rootCtx = useContextMenuContext();
231
- const baseId = createId("context-menu-sub");
232
- const [isOpen, setIsOpen] = createSignal(false);
233
- const [triggerRef, setTriggerRef] = createSignal(void 0);
234
- const subCollection = createCollection();
235
- const [focusedIndex, setFocusedIndex] = createSignal(-1);
236
- let openTimer;
237
- let closeTimer;
238
- onCleanup(() => {
239
- clearTimeout(openTimer);
240
- clearTimeout(closeTimer);
241
- });
242
- const focusIndex = (index) => {
243
- const item = subCollection.items()[index];
244
- if (!item) return;
245
- setFocusedIndex(index);
246
- focusWithoutScrolling(item.ref);
247
- };
248
- const focusFirst = () => {
249
- const i = subCollection.items().findIndex((item) => !item.disabled);
250
- if (i !== -1) focusIndex(i);
251
- };
252
- const openSub = () => {
253
- rootCtx.openSub(() => setIsOpen(false));
254
- setIsOpen(true);
255
- };
256
- createEffect(() => {
257
- if (!rootCtx.isOpen()) setIsOpen(false);
258
- });
259
- const context = {
260
- isOpen,
261
- setOpen: (open) => {
262
- if (open) openSub();
263
- else setIsOpen(false);
264
- },
265
- ids: { trigger: composeId(baseId, "trigger"), content: composeId(baseId, "content") },
266
- triggerRef,
267
- setTriggerRef,
268
- collection: subCollection,
269
- focusedIndex,
270
- focusIndex,
271
- focusFirst,
272
- scheduleOpen: () => {
273
- clearTimeout(closeTimer);
274
- openTimer = setTimeout(openSub, 200);
275
- },
276
- scheduleClose: (movingTowardSub = false) => {
277
- clearTimeout(openTimer);
278
- closeTimer = setTimeout(() => setIsOpen(false), movingTowardSub ? 500 : 200);
279
- },
280
- cancelClose: () => clearTimeout(closeTimer),
281
- closeRoot: () => rootCtx.select()
282
- };
283
- return createMemo(() => createComponent(SubMenuProvider, { get value() {
284
- return context;
285
- }, get children() {
286
- return props.children;
287
- } }));
333
+ const rootCtx = useContextMenuContext();
334
+ const baseId = createId("context-menu-sub");
335
+ const [isOpen, setIsOpen] = createSignal(false);
336
+ const [triggerRef, setTriggerRef] = createSignal(void 0);
337
+ const subCollection = createCollection();
338
+ const [focusedIndex, setFocusedIndex] = createSignal(-1);
339
+ let openTimer;
340
+ let closeTimer;
341
+ onCleanup(() => {
342
+ clearTimeout(openTimer);
343
+ clearTimeout(closeTimer);
344
+ });
345
+ const focusIndex = (index) => {
346
+ const item = subCollection.items()[index];
347
+ if (!item) return;
348
+ setFocusedIndex(index);
349
+ focusWithoutScrolling(item.ref);
350
+ };
351
+ const focusFirst = () => {
352
+ const i = subCollection.items().findIndex((item) => !item.disabled);
353
+ if (i !== -1) focusIndex(i);
354
+ };
355
+ const openSub = () => {
356
+ rootCtx.openSub(() => setIsOpen(false));
357
+ setIsOpen(true);
358
+ };
359
+ createEffect(() => {
360
+ if (!rootCtx.isOpen()) setIsOpen(false);
361
+ });
362
+ const context = {
363
+ isOpen,
364
+ setOpen: (open) => {
365
+ if (open) openSub();
366
+ else setIsOpen(false);
367
+ },
368
+ ids: {
369
+ trigger: composeId(baseId, "trigger"),
370
+ content: composeId(baseId, "content")
371
+ },
372
+ triggerRef,
373
+ setTriggerRef,
374
+ collection: subCollection,
375
+ focusedIndex,
376
+ focusIndex,
377
+ focusFirst,
378
+ scheduleOpen: () => {
379
+ clearTimeout(closeTimer);
380
+ openTimer = setTimeout(openSub, 200);
381
+ },
382
+ scheduleClose: (movingTowardSub = false) => {
383
+ clearTimeout(openTimer);
384
+ closeTimer = setTimeout(() => setIsOpen(false), movingTowardSub ? 500 : 200);
385
+ },
386
+ cancelClose: () => clearTimeout(closeTimer),
387
+ closeRoot: () => rootCtx.select()
388
+ };
389
+ return createMemo(() => createComponent(SubMenuProvider, {
390
+ get value() {
391
+ return context;
392
+ },
393
+ get children() {
394
+ return props.children;
395
+ }
396
+ }));
288
397
  }
398
+ /** A `menuitem` inside a context menu that opens a nested flyout on hover or `ArrowRight`. */
289
399
  function ContextMenuSubTrigger(props) {
290
- const ctx = useContextMenuContext();
291
- const sub = useSubMenuContext();
292
- const [local, others] = splitProps(props, ["disabled", "onKeyDown", "onPointerEnter", "onPointerLeave", "ref", "children", "fx", "style"]);
293
- const setRef = (node) => {
294
- sub.setTriggerRef(node);
295
- const remove = ctx.collection.register({ ref: node, disabled: local.disabled });
296
- onCleanup(remove);
297
- handleRef(local.ref, node);
298
- };
299
- const open = () => {
300
- sub.setOpen(true);
301
- queueMicrotask(() => sub.focusFirst());
302
- };
303
- return (() => {
304
- const _el$ = createNativeElement("div");
305
- spread({ element: _el$, props: mergeProps(fxProps(
306
- () => local.fx,
307
- () => local.style
308
- ), others, { ref: setRef, role: "menuitem", tabindex: -1, "aria-haspopup": "menu", "aria-expanded": () => sub.isOpen() ? "true" : "false", "aria-controls": () => sub.ids.content, "data-state": () => sub.isOpen() ? "open" : "closed", "data-disabled": () => dataAttr(Boolean(local.disabled)), "aria-disabled": () => local.disabled ? "true" : void 0, onPointerEnter: composeEventHandlers([
309
- local.onPointerEnter,
310
- (e) => {
311
- if (local.disabled) return;
312
- e.currentTarget.focus();
313
- sub.scheduleOpen();
314
- }
315
- ]), onPointerLeave: composeEventHandlers([
316
- local.onPointerLeave,
317
- (e) => sub.scheduleClose(e.movementX > 0)
318
- ]), onKeyDown: composeEventHandlers([
319
- local.onKeyDown,
320
- (e) => {
321
- if (local.disabled) return;
322
- if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
323
- e.preventDefault();
324
- e.stopPropagation();
325
- open();
326
- }
327
- }
328
- ]) }) });
329
- insert(_el$, local.children);
330
- return _el$;
331
- })();
400
+ const ctx = useContextMenuContext();
401
+ const sub = useSubMenuContext();
402
+ const [local, others] = splitProps(props, [
403
+ "disabled",
404
+ "onKeyDown",
405
+ "onPointerEnter",
406
+ "onPointerLeave",
407
+ "ref",
408
+ "children",
409
+ "fx",
410
+ "style"
411
+ ]);
412
+ const setRef = (node) => {
413
+ sub.setTriggerRef(node);
414
+ const remove = ctx.collection.register({
415
+ ref: node,
416
+ disabled: local.disabled
417
+ });
418
+ onCleanup(remove);
419
+ handleRef(local.ref, node);
420
+ };
421
+ const open = () => {
422
+ sub.setOpen(true);
423
+ queueMicrotask(() => sub.focusFirst());
424
+ };
425
+ return (() => {
426
+ const _el$ = createNativeElement("div");
427
+ spread({
428
+ element: _el$,
429
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
430
+ ref: setRef,
431
+ role: "menuitem",
432
+ tabindex: -1,
433
+ "aria-haspopup": "menu",
434
+ "aria-expanded": () => sub.isOpen() ? "true" : "false",
435
+ "aria-controls": () => sub.ids.content,
436
+ "data-state": () => sub.isOpen() ? "open" : "closed",
437
+ "data-disabled": () => dataAttr(Boolean(local.disabled)),
438
+ "aria-disabled": () => local.disabled ? "true" : void 0,
439
+ onPointerEnter: composeEventHandlers([local.onPointerEnter, (e) => {
440
+ if (local.disabled) return;
441
+ e.currentTarget.focus();
442
+ sub.scheduleOpen();
443
+ }]),
444
+ onPointerLeave: composeEventHandlers([local.onPointerLeave, (e) => sub.scheduleClose(e.movementX > 0)]),
445
+ onKeyDown: composeEventHandlers([local.onKeyDown, (e) => {
446
+ if (local.disabled) return;
447
+ if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") {
448
+ e.preventDefault();
449
+ e.stopPropagation();
450
+ open();
451
+ }
452
+ }])
453
+ })
454
+ });
455
+ insert(_el$, local.children, null);
456
+ return _el$;
457
+ })();
332
458
  }
459
+ /** The floating `role="menu"` surface for a nested context-menu submenu. Self-portals while open. */
333
460
  function ContextMenuSubContent(props) {
334
- const sub = useSubMenuContext();
335
- const [local, others] = splitProps(props, ["ref", "children", "style", "fx", "style"]);
336
- const [element, setElement] = createSignal(void 0);
337
- const portalRef = useRef(null);
338
- createEffect(() => {
339
- if (!sub.isOpen() && portalRef.current) portalRef.current.remove();
340
- });
341
- const position = createFloatingPosition(sub.triggerRef, element, {
342
- placement: "right-start",
343
- offset: -2
344
- });
345
- createRenderEffect(() => {
346
- const el = element();
347
- if (!el) return;
348
- el.style.position = "absolute";
349
- el.style.left = `${Math.round(position.x())}px`;
350
- el.style.top = `${Math.round(position.y())}px`;
351
- });
352
- onMount(() => queueMicrotask(() => sub.focusFirst()));
353
- const move = (action) => {
354
- const next = getNextEnabledIndex(sub.collection.items(), sub.focusedIndex(), action, true);
355
- if (next !== -1) sub.focusIndex(next);
356
- };
357
- const focusLast = () => {
358
- const items = sub.collection.items();
359
- for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) {
360
- sub.focusIndex(i);
361
- return;
362
- }
363
- };
364
- const typeahead = createTypeahead({
365
- getItems: () => sub.collection.items().map((item) => ({ textValue: item.ref.textContent ?? "", disabled: item.disabled })),
366
- getActiveIndex: () => sub.focusedIndex(),
367
- onMatch: (index) => sub.focusIndex(index)
368
- });
369
- const onContentKeyDown = (event) => {
370
- switch (event.key) {
371
- case "ArrowDown":
372
- event.preventDefault();
373
- move("next");
374
- break;
375
- case "ArrowUp":
376
- event.preventDefault();
377
- move("previous");
378
- break;
379
- case "Home":
380
- event.preventDefault();
381
- sub.focusFirst();
382
- break;
383
- case "End":
384
- event.preventDefault();
385
- focusLast();
386
- break;
387
- case "ArrowLeft":
388
- case "Escape":
389
- event.preventDefault();
390
- event.stopPropagation();
391
- sub.setOpen(false);
392
- focusWithoutScrolling(sub.triggerRef());
393
- break;
394
- case "Tab":
395
- event.preventDefault();
396
- sub.closeRoot();
397
- break;
398
- default:
399
- typeahead.onKeyDown(event);
400
- }
401
- };
402
- const setRef = (node) => {
403
- setElement(node);
404
- handleRef(local.ref, node);
405
- };
406
- return createMemo(() => createComponent(Show, { get when() {
407
- return sub.isOpen();
408
- }, get children() {
409
- return createMemo(() => createComponent(Portal, { get ref() {
410
- return portalRef;
411
- }, get children() {
412
- return (() => {
413
- const _el$ = createNativeElement("div");
414
- spread({ element: _el$, props: mergeProps(fxProps(
415
- () => local.fx,
416
- () => local.style
417
- ), others, { ref: setRef, role: "menu", id: () => sub.ids.content, "aria-labelledby": () => sub.ids.trigger, "data-state": "open", "data-placement": () => position.placement(), tabindex: -1, onKeyDown: onContentKeyDown, onPointerEnter: () => sub.cancelClose(), onPointerLeave: () => sub.scheduleClose() }) });
418
- insert(_el$, local.children);
419
- return _el$;
420
- })();
421
- } }));
422
- } }));
461
+ const sub = useSubMenuContext();
462
+ const root = useContextMenuContext();
463
+ const [local, others] = splitProps(props, [
464
+ "ref",
465
+ "children",
466
+ "style",
467
+ "fx",
468
+ "style"
469
+ ]);
470
+ const [element, setElement] = createSignal(void 0);
471
+ const portalRef = useRef(null);
472
+ createEffect(() => {
473
+ if (!sub.isOpen() && portalRef.current) portalRef.current.remove();
474
+ });
475
+ const position = createFloatingPosition(sub.triggerRef, element, {
476
+ placement: "right-start",
477
+ offset: -2
478
+ });
479
+ createRenderEffect(() => {
480
+ const el = element();
481
+ if (!el) return;
482
+ el.style.position = "absolute";
483
+ el.style.left = `${Math.round(position.x())}px`;
484
+ el.style.top = `${Math.round(position.y())}px`;
485
+ });
486
+ onMount(() => queueMicrotask(() => sub.focusFirst()));
487
+ const move = (action) => {
488
+ const next = getNextEnabledIndex(sub.collection.items(), sub.focusedIndex(), action, true);
489
+ if (next !== -1) sub.focusIndex(next);
490
+ };
491
+ const focusLast = () => {
492
+ const items = sub.collection.items();
493
+ for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) {
494
+ sub.focusIndex(i);
495
+ return;
496
+ }
497
+ };
498
+ const typeahead = createTypeahead({
499
+ getItems: () => sub.collection.items().map((item) => ({
500
+ textValue: item.ref.textContent ?? "",
501
+ disabled: item.disabled
502
+ })),
503
+ getActiveIndex: () => sub.focusedIndex(),
504
+ onMatch: (index) => sub.focusIndex(index)
505
+ });
506
+ const onContentKeyDown = (event) => {
507
+ switch (event.key) {
508
+ case "ArrowDown":
509
+ event.preventDefault();
510
+ move("next");
511
+ break;
512
+ case "ArrowUp":
513
+ event.preventDefault();
514
+ move("previous");
515
+ break;
516
+ case "Home":
517
+ event.preventDefault();
518
+ sub.focusFirst();
519
+ break;
520
+ case "End":
521
+ event.preventDefault();
522
+ focusLast();
523
+ break;
524
+ case "ArrowLeft":
525
+ case "Escape":
526
+ event.preventDefault();
527
+ event.stopPropagation();
528
+ sub.setOpen(false);
529
+ focusWithoutScrolling(sub.triggerRef());
530
+ break;
531
+ case "Tab":
532
+ event.preventDefault();
533
+ sub.closeRoot();
534
+ break;
535
+ default: typeahead.onKeyDown(event);
536
+ }
537
+ };
538
+ const setRef = (node) => {
539
+ setElement(node);
540
+ handleRef(local.ref, node);
541
+ };
542
+ return createMemo(() => createComponent(Show, {
543
+ get when() {
544
+ return sub.isOpen();
545
+ },
546
+ get children() {
547
+ return createMemo(() => createComponent(Portal, {
548
+ get ref() {
549
+ return portalRef;
550
+ },
551
+ get children() {
552
+ return (() => {
553
+ const _el$ = createNativeElement("div");
554
+ spread({
555
+ element: _el$,
556
+ props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
557
+ ref: setRef,
558
+ role: "menu",
559
+ id: () => sub.ids.content,
560
+ "data-menu-owner": () => root.contentId,
561
+ "aria-labelledby": () => sub.ids.trigger,
562
+ "data-state": "open",
563
+ "data-placement": () => position.placement(),
564
+ tabindex: -1,
565
+ onKeyDown: onContentKeyDown,
566
+ onPointerEnter: () => sub.cancelClose(),
567
+ onPointerLeave: () => sub.scheduleClose()
568
+ })
569
+ });
570
+ insert(_el$, local.children, null);
571
+ return _el$;
572
+ })();
573
+ }
574
+ }));
575
+ }
576
+ }));
423
577
  }
424
- export {
425
- ContextMenu,
426
- ContextMenuContent,
427
- ContextMenuItem,
428
- ContextMenuLabel,
429
- ContextMenuPortal,
430
- ContextMenuSeparator,
431
- ContextMenuSub,
432
- ContextMenuSubContent,
433
- ContextMenuSubTrigger,
434
- ContextMenuTrigger
435
- };
578
+ //#endregion
579
+ export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };