@react-aria/menu 3.11.3-nightly.4318 → 3.11.3-nightly.4324
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/import.mjs +321 -72
- package/dist/main.js +318 -68
- package/dist/main.js.map +1 -1
- package/dist/module.js +321 -72
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +44 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/index.ts +2 -0
- package/src/useMenu.ts +5 -5
- package/src/useMenuItem.ts +61 -82
- package/src/useSafelyMouseToSubmenu.ts +158 -0
- package/src/useSubmenuTrigger.ts +235 -0
package/dist/main.js
CHANGED
|
@@ -3,7 +3,6 @@ var $fHYTQ$reactariai18n = require("@react-aria/i18n");
|
|
|
3
3
|
var $fHYTQ$reactariainteractions = require("@react-aria/interactions");
|
|
4
4
|
var $fHYTQ$reactariaoverlays = require("@react-aria/overlays");
|
|
5
5
|
var $fHYTQ$reactariaselection = require("@react-aria/selection");
|
|
6
|
-
var $fHYTQ$reactariafocus = require("@react-aria/focus");
|
|
7
6
|
var $fHYTQ$reactstatelycollections = require("@react-stately/collections");
|
|
8
7
|
var $fHYTQ$react = require("react");
|
|
9
8
|
|
|
@@ -20,6 +19,7 @@ $parcel$export(module.exports, "useMenuTrigger", () => $7211ab9328763fb9$export$
|
|
|
20
19
|
$parcel$export(module.exports, "useMenu", () => $a3815f0132802737$export$38eaa17faae8f579);
|
|
21
20
|
$parcel$export(module.exports, "useMenuItem", () => $38191ed02615ec07$export$9d32628fc2aea7da);
|
|
22
21
|
$parcel$export(module.exports, "useMenuSection", () => $63008655e23408c5$export$73f7a44322579622);
|
|
22
|
+
$parcel$export(module.exports, "UNSTABLE_useSubmenuTrigger", () => $5f4753043c9f6cdf$export$3819f8ee9f4ce664);
|
|
23
23
|
/*
|
|
24
24
|
* Copyright 2020 Adobe. All rights reserved.
|
|
25
25
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -372,7 +372,7 @@ function $7211ab9328763fb9$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
372
372
|
|
|
373
373
|
const $a3815f0132802737$export$6f49b4016bfc8d56 = new WeakMap();
|
|
374
374
|
function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
375
|
-
let { shouldFocusWrap: shouldFocusWrap = true, ...otherProps } = props;
|
|
375
|
+
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
376
376
|
if (!props["aria-label"] && !props["aria-labelledby"]) console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
|
|
377
377
|
let domProps = (0, $fHYTQ$reactariautils.filterDOMProps)(props, {
|
|
378
378
|
labelable: true
|
|
@@ -392,9 +392,10 @@ function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
|
392
392
|
});
|
|
393
393
|
return {
|
|
394
394
|
menuProps: (0, $fHYTQ$reactariautils.mergeProps)(domProps, {
|
|
395
|
+
onKeyDown: onKeyDown,
|
|
396
|
+
onKeyUp: onKeyUp
|
|
397
|
+
}, {
|
|
395
398
|
role: "menu",
|
|
396
|
-
// this forces AT to move their cursors into any open sub dialogs, the sub dialogs contain hidden close buttons in order to come back to this level of the menu
|
|
397
|
-
"aria-hidden": state.expandedKeys.size > 0 ? true : undefined,
|
|
398
399
|
...listProps,
|
|
399
400
|
onKeyDown: (e)=>{
|
|
400
401
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
@@ -420,55 +421,27 @@ function $a3815f0132802737$export$38eaa17faae8f579(props, state, ref) {
|
|
|
420
421
|
|
|
421
422
|
|
|
422
423
|
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
424
|
function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
427
425
|
var _item_props;
|
|
428
|
-
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, "aria-haspopup": hasPopup } = props;
|
|
429
|
-
let { direction: direction } = (0, $fHYTQ$reactariai18n.useLocale)();
|
|
426
|
+
let { key: key, closeOnSelect: closeOnSelect, isVirtualized: isVirtualized, "aria-haspopup": hasPopup, onPressStart: pressStartProp, onPressUp: pressUpProp, onPress: onPress, onPressChange: onPressChange, onPressEnd: onPressEnd, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur } = props;
|
|
430
427
|
let isTrigger = !!hasPopup;
|
|
431
|
-
let isOpen = state.expandedKeys.has(key);
|
|
432
428
|
var _props_isDisabled;
|
|
433
429
|
let isDisabled = (_props_isDisabled = props.isDisabled) !== null && _props_isDisabled !== void 0 ? _props_isDisabled : state.disabledKeys.has(key);
|
|
434
430
|
var _props_isSelected;
|
|
435
431
|
let isSelected = (_props_isSelected = props.isSelected) !== null && _props_isSelected !== void 0 ? _props_isSelected : state.selectionManager.isSelected(key);
|
|
436
|
-
let openTimeout = (0, $fHYTQ$react.useRef)();
|
|
437
|
-
let cancelOpenTimeout = (0, $fHYTQ$react.useCallback)(()=>{
|
|
438
|
-
if (openTimeout.current) {
|
|
439
|
-
clearTimeout(openTimeout.current);
|
|
440
|
-
openTimeout.current = undefined;
|
|
441
|
-
}
|
|
442
|
-
}, [
|
|
443
|
-
openTimeout
|
|
444
|
-
]);
|
|
445
|
-
let onSubmenuOpen = (0, $fHYTQ$reactariautils.useEffectEvent)(()=>{
|
|
446
|
-
cancelOpenTimeout();
|
|
447
|
-
state.setExpandedKeys(new Set([
|
|
448
|
-
key
|
|
449
|
-
]));
|
|
450
|
-
});
|
|
451
|
-
(0, $fHYTQ$reactariautils.useLayoutEffect)(()=>{
|
|
452
|
-
return ()=>cancelOpenTimeout();
|
|
453
|
-
}, [
|
|
454
|
-
cancelOpenTimeout
|
|
455
|
-
]);
|
|
456
432
|
let data = (0, $a3815f0132802737$export$6f49b4016bfc8d56).get(state);
|
|
457
433
|
let onClose = props.onClose || data.onClose;
|
|
458
|
-
let
|
|
459
|
-
onSubmenuOpen();
|
|
460
|
-
// will need to disable this lint rule when using useEffectEvent https://react.dev/learn/separating-events-from-effects#logic-inside-effects-is-reactive
|
|
461
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
462
|
-
}, []);
|
|
463
|
-
let onAction = isTrigger ? onActionMenuDialogTrigger : props.onAction || data.onAction;
|
|
434
|
+
let onAction = isTrigger ? ()=>{} : props.onAction || data.onAction;
|
|
464
435
|
let router = (0, $fHYTQ$reactariautils.useRouter)();
|
|
465
436
|
let performAction = (e)=>{
|
|
466
437
|
if (onAction) onAction(key);
|
|
467
438
|
if (e.target instanceof HTMLAnchorElement) router.open(e.target, e);
|
|
468
439
|
};
|
|
469
440
|
let role = "menuitem";
|
|
470
|
-
if (
|
|
471
|
-
|
|
441
|
+
if (!isTrigger) {
|
|
442
|
+
if (state.selectionManager.selectionMode === "single") role = "menuitemradio";
|
|
443
|
+
else if (state.selectionManager.selectionMode === "multiple") role = "menuitemcheckbox";
|
|
444
|
+
}
|
|
472
445
|
let labelId = (0, $fHYTQ$reactariautils.useSlotId)();
|
|
473
446
|
let descriptionId = (0, $fHYTQ$reactariautils.useSlotId)();
|
|
474
447
|
let keyboardId = (0, $fHYTQ$reactariautils.useSlotId)();
|
|
@@ -480,20 +453,20 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
480
453
|
"aria-describedby": [
|
|
481
454
|
descriptionId,
|
|
482
455
|
keyboardId
|
|
483
|
-
].filter(Boolean).join(" ") || undefined
|
|
456
|
+
].filter(Boolean).join(" ") || undefined,
|
|
457
|
+
"aria-controls": props["aria-controls"],
|
|
458
|
+
"aria-haspopup": hasPopup,
|
|
459
|
+
"aria-expanded": props["aria-expanded"]
|
|
484
460
|
};
|
|
485
|
-
if (state.selectionManager.selectionMode !== "none") ariaProps["aria-checked"] = isSelected;
|
|
461
|
+
if (state.selectionManager.selectionMode !== "none" && !isTrigger) ariaProps["aria-checked"] = isSelected;
|
|
486
462
|
let item = state.collection.getItem(key);
|
|
487
463
|
if (isVirtualized) {
|
|
488
464
|
ariaProps["aria-posinset"] = item === null || item === void 0 ? void 0 : item.index;
|
|
489
465
|
ariaProps["aria-setsize"] = (0, $fHYTQ$reactstatelycollections.getItemCount)(state.collection);
|
|
490
466
|
}
|
|
491
|
-
if (hasPopup != null) {
|
|
492
|
-
ariaProps["aria-haspopup"] = hasPopup;
|
|
493
|
-
ariaProps["aria-expanded"] = isOpen ? "true" : "false";
|
|
494
|
-
}
|
|
495
467
|
let onPressStart = (e)=>{
|
|
496
468
|
if (e.pointerType === "keyboard") performAction(e);
|
|
469
|
+
pressStartProp === null || pressStartProp === void 0 ? void 0 : pressStartProp(e);
|
|
497
470
|
};
|
|
498
471
|
let onPressUp = (e)=>{
|
|
499
472
|
if (e.pointerType !== "keyboard") {
|
|
@@ -502,6 +475,7 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
502
475
|
// selection mode, except if overridden by the closeOnSelect prop.
|
|
503
476
|
if (!isTrigger && onClose && (closeOnSelect !== null && closeOnSelect !== void 0 ? closeOnSelect : state.selectionManager.selectionMode !== "multiple" || state.selectionManager.isLink(key))) onClose();
|
|
504
477
|
}
|
|
478
|
+
pressUpProp === null || pressUpProp === void 0 ? void 0 : pressUpProp(e);
|
|
505
479
|
};
|
|
506
480
|
let { itemProps: itemProps, isFocused: isFocused } = (0, $fHYTQ$reactariaselection.useSelectableItem)({
|
|
507
481
|
selectionManager: state.selectionManager,
|
|
@@ -517,27 +491,23 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
517
491
|
});
|
|
518
492
|
let { pressProps: pressProps, isPressed: isPressed } = (0, $fHYTQ$reactariainteractions.usePress)({
|
|
519
493
|
onPressStart: onPressStart,
|
|
494
|
+
onPress: onPress,
|
|
520
495
|
onPressUp: onPressUp,
|
|
521
|
-
|
|
496
|
+
onPressChange: onPressChange,
|
|
497
|
+
onPressEnd: onPressEnd,
|
|
498
|
+
isDisabled: isDisabled
|
|
522
499
|
});
|
|
523
500
|
let { hoverProps: hoverProps } = (0, $fHYTQ$reactariainteractions.useHover)({
|
|
524
501
|
isDisabled: isDisabled,
|
|
525
|
-
onHoverStart () {
|
|
526
|
-
if (!(0, $fHYTQ$reactariainteractions.isFocusVisible)()
|
|
502
|
+
onHoverStart (e) {
|
|
503
|
+
if (!(0, $fHYTQ$reactariainteractions.isFocusVisible)()) {
|
|
527
504
|
state.selectionManager.setFocused(true);
|
|
528
505
|
state.selectionManager.setFocusedKey(key);
|
|
529
|
-
// focus immediately so that a focus scope opened on hover has the correct restore node
|
|
530
|
-
let isFocused = key === state.selectionManager.focusedKey;
|
|
531
|
-
if (isFocused && state.selectionManager.isFocused && document.activeElement !== ref.current) (0, $fHYTQ$reactariafocus.focusSafely)(ref.current);
|
|
532
506
|
}
|
|
507
|
+
hoverStartProp === null || hoverStartProp === void 0 ? void 0 : hoverStartProp(e);
|
|
533
508
|
},
|
|
534
|
-
onHoverChange:
|
|
535
|
-
|
|
536
|
-
if (!openTimeout.current) openTimeout.current = setTimeout(()=>{
|
|
537
|
-
onSubmenuOpen();
|
|
538
|
-
}, 200);
|
|
539
|
-
} else if (!isHovered) cancelOpenTimeout();
|
|
540
|
-
}
|
|
509
|
+
onHoverChange: onHoverChange,
|
|
510
|
+
onHoverEnd: onHoverEnd
|
|
541
511
|
});
|
|
542
512
|
let { keyboardProps: keyboardProps } = (0, $fHYTQ$reactariainteractions.useKeyboard)({
|
|
543
513
|
onKeyDown: (e)=>{
|
|
@@ -555,19 +525,18 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
555
525
|
// The Enter key should always close on select, except if overridden.
|
|
556
526
|
if (!isDisabled && closeOnSelect !== false && !isTrigger && onClose) onClose();
|
|
557
527
|
break;
|
|
558
|
-
case "ArrowRight":
|
|
559
|
-
if (isTrigger && direction === "ltr") onSubmenuOpen();
|
|
560
|
-
else e.continuePropagation();
|
|
561
|
-
break;
|
|
562
|
-
case "ArrowLeft":
|
|
563
|
-
if (isTrigger && direction === "rtl") onSubmenuOpen();
|
|
564
|
-
else e.continuePropagation();
|
|
565
|
-
break;
|
|
566
528
|
default:
|
|
567
|
-
e.continuePropagation();
|
|
529
|
+
if (!isTrigger) e.continuePropagation();
|
|
530
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
568
531
|
break;
|
|
569
532
|
}
|
|
570
|
-
}
|
|
533
|
+
},
|
|
534
|
+
onKeyUp: onKeyUp
|
|
535
|
+
});
|
|
536
|
+
let { focusProps: focusProps } = (0, $fHYTQ$reactariainteractions.useFocus)({
|
|
537
|
+
onBlur: onBlur,
|
|
538
|
+
onFocus: onFocus,
|
|
539
|
+
onFocusChange: onFocusChange
|
|
571
540
|
});
|
|
572
541
|
let domProps = (0, $fHYTQ$reactariautils.filterDOMProps)(item.props, {
|
|
573
542
|
isLink: !!(item === null || item === void 0 ? void 0 : (_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.href)
|
|
@@ -576,7 +545,10 @@ function $38191ed02615ec07$export$9d32628fc2aea7da(props, state, ref) {
|
|
|
576
545
|
return {
|
|
577
546
|
menuItemProps: {
|
|
578
547
|
...ariaProps,
|
|
579
|
-
...(0, $fHYTQ$reactariautils.mergeProps)(domProps,
|
|
548
|
+
...(0, $fHYTQ$reactariautils.mergeProps)(domProps, isTrigger ? {
|
|
549
|
+
onFocus: itemProps.onFocus
|
|
550
|
+
} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
551
|
+
tabIndex: itemProps.tabIndex != null ? -1 : undefined
|
|
580
552
|
},
|
|
581
553
|
labelProps: {
|
|
582
554
|
id: labelId
|
|
@@ -629,6 +601,284 @@ function $63008655e23408c5$export$73f7a44322579622(props) {
|
|
|
629
601
|
}
|
|
630
602
|
|
|
631
603
|
|
|
604
|
+
/*
|
|
605
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
606
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
607
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
608
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
609
|
+
*
|
|
610
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
611
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
612
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
613
|
+
* governing permissions and limitations under the License.
|
|
614
|
+
*/
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
|
|
618
|
+
|
|
619
|
+
|
|
620
|
+
const $62347d8c4183e713$var$ALLOWED_INVALID_MOVEMENTS = 2;
|
|
621
|
+
const $62347d8c4183e713$var$THROTTLE_TIME = 50;
|
|
622
|
+
const $62347d8c4183e713$var$TIMEOUT_TIME = 1000;
|
|
623
|
+
const $62347d8c4183e713$var$ANGLE_PADDING = Math.PI / 12; // 15°
|
|
624
|
+
function $62347d8c4183e713$export$85ec83e04c95f50a(options) {
|
|
625
|
+
let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
|
|
626
|
+
let prevPointerPos = (0, $fHYTQ$react.useRef)();
|
|
627
|
+
let submenuRect = (0, $fHYTQ$react.useRef)();
|
|
628
|
+
let lastProcessedTime = (0, $fHYTQ$react.useRef)(0);
|
|
629
|
+
let timeout = (0, $fHYTQ$react.useRef)();
|
|
630
|
+
let autoCloseTimeout = (0, $fHYTQ$react.useRef)();
|
|
631
|
+
let submenuSide = (0, $fHYTQ$react.useRef)();
|
|
632
|
+
let movementsTowardsSubmenuCount = (0, $fHYTQ$react.useRef)(2);
|
|
633
|
+
let [preventPointerEvents, setPreventPointerEvents] = (0, $fHYTQ$react.useState)(false);
|
|
634
|
+
let updateSubmenuRect = ()=>{
|
|
635
|
+
if (submenuRef.current) {
|
|
636
|
+
submenuRect.current = submenuRef.current.getBoundingClientRect();
|
|
637
|
+
submenuSide.current = undefined;
|
|
638
|
+
}
|
|
639
|
+
};
|
|
640
|
+
(0, $fHYTQ$reactariautils.useResizeObserver)({
|
|
641
|
+
ref: submenuRef,
|
|
642
|
+
onResize: updateSubmenuRect
|
|
643
|
+
});
|
|
644
|
+
let reset = ()=>{
|
|
645
|
+
setPreventPointerEvents(false);
|
|
646
|
+
movementsTowardsSubmenuCount.current = $62347d8c4183e713$var$ALLOWED_INVALID_MOVEMENTS;
|
|
647
|
+
};
|
|
648
|
+
let modality = (0, $fHYTQ$reactariainteractions.useInteractionModality)();
|
|
649
|
+
(0, $fHYTQ$react.useEffect)(()=>{
|
|
650
|
+
if (preventPointerEvents && menuRef.current) menuRef.current.style.pointerEvents = "none";
|
|
651
|
+
else menuRef.current.style.pointerEvents = "";
|
|
652
|
+
}, [
|
|
653
|
+
menuRef,
|
|
654
|
+
preventPointerEvents
|
|
655
|
+
]);
|
|
656
|
+
(0, $fHYTQ$react.useEffect)(()=>{
|
|
657
|
+
let submenu = submenuRef.current;
|
|
658
|
+
let menu = menuRef.current;
|
|
659
|
+
if (isDisabled || !submenu || !isOpen || modality !== "pointer") {
|
|
660
|
+
reset();
|
|
661
|
+
return;
|
|
662
|
+
}
|
|
663
|
+
submenuRect.current = submenu.getBoundingClientRect();
|
|
664
|
+
let onPointerMove = (e)=>{
|
|
665
|
+
if (e.pointerType === "touch" || e.pointerType === "pen") return;
|
|
666
|
+
let currentTime = Date.now();
|
|
667
|
+
// Throttle
|
|
668
|
+
if (currentTime - lastProcessedTime.current < $62347d8c4183e713$var$THROTTLE_TIME) return;
|
|
669
|
+
clearTimeout(timeout.current);
|
|
670
|
+
clearTimeout(autoCloseTimeout.current);
|
|
671
|
+
let { clientX: mouseX, clientY: mouseY } = e;
|
|
672
|
+
if (!prevPointerPos.current) {
|
|
673
|
+
prevPointerPos.current = {
|
|
674
|
+
x: mouseX,
|
|
675
|
+
y: mouseY
|
|
676
|
+
};
|
|
677
|
+
return;
|
|
678
|
+
}
|
|
679
|
+
if (!submenuRect.current) return;
|
|
680
|
+
if (!submenuSide.current) submenuSide.current = mouseX > submenuRect.current.right ? "left" : "right";
|
|
681
|
+
// Pointer is outside of parent menu
|
|
682
|
+
if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {
|
|
683
|
+
reset();
|
|
684
|
+
return;
|
|
685
|
+
}
|
|
686
|
+
/* Check if pointer is moving towards submenu.
|
|
687
|
+
Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:
|
|
688
|
+
- angle between previous pointer and top of submenu
|
|
689
|
+
- angle between previous pointer and bottom of submenu
|
|
690
|
+
- angle between previous pointer and current pointer (delta)
|
|
691
|
+
If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.
|
|
692
|
+
*/ let prevMouseX = prevPointerPos.current.x;
|
|
693
|
+
let prevMouseY = prevPointerPos.current.y;
|
|
694
|
+
let toSubmenuX = submenuSide.current === "right" ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;
|
|
695
|
+
let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + $62347d8c4183e713$var$ANGLE_PADDING;
|
|
696
|
+
let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - $62347d8c4183e713$var$ANGLE_PADDING;
|
|
697
|
+
let anglePointer = Math.atan2(prevMouseY - mouseY, submenuSide.current === "left" ? -(mouseX - prevMouseX) : mouseX - prevMouseX);
|
|
698
|
+
let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
|
|
699
|
+
movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ? Math.min(movementsTowardsSubmenuCount.current + 1, $62347d8c4183e713$var$ALLOWED_INVALID_MOVEMENTS) : Math.max(movementsTowardsSubmenuCount.current - 1, 0);
|
|
700
|
+
if (movementsTowardsSubmenuCount.current >= $62347d8c4183e713$var$ALLOWED_INVALID_MOVEMENTS) setPreventPointerEvents(true);
|
|
701
|
+
else setPreventPointerEvents(false);
|
|
702
|
+
lastProcessedTime.current = currentTime;
|
|
703
|
+
prevPointerPos.current = {
|
|
704
|
+
x: mouseX,
|
|
705
|
+
y: mouseY
|
|
706
|
+
};
|
|
707
|
+
// If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
|
|
708
|
+
if (isMovingTowardsSubmenu) timeout.current = setTimeout(()=>{
|
|
709
|
+
reset();
|
|
710
|
+
autoCloseTimeout.current = setTimeout(()=>{
|
|
711
|
+
// Fire a pointerover event to trigger the menu to close.
|
|
712
|
+
// Wait until pointer-events:none is no longer applied
|
|
713
|
+
let target = document.elementFromPoint(mouseX, mouseY);
|
|
714
|
+
if (target && menu.contains(target)) target.dispatchEvent(new PointerEvent("pointerover", {
|
|
715
|
+
bubbles: true,
|
|
716
|
+
cancelable: true
|
|
717
|
+
}));
|
|
718
|
+
}, 100);
|
|
719
|
+
}, $62347d8c4183e713$var$TIMEOUT_TIME);
|
|
720
|
+
};
|
|
721
|
+
window.addEventListener("pointermove", onPointerMove);
|
|
722
|
+
return ()=>{
|
|
723
|
+
window.removeEventListener("pointermove", onPointerMove);
|
|
724
|
+
clearTimeout(timeout.current);
|
|
725
|
+
clearTimeout(autoCloseTimeout.current);
|
|
726
|
+
movementsTowardsSubmenuCount.current = $62347d8c4183e713$var$ALLOWED_INVALID_MOVEMENTS;
|
|
727
|
+
};
|
|
728
|
+
}, [
|
|
729
|
+
isDisabled,
|
|
730
|
+
isOpen,
|
|
731
|
+
menuRef,
|
|
732
|
+
modality,
|
|
733
|
+
setPreventPointerEvents,
|
|
734
|
+
submenuRef
|
|
735
|
+
]);
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
|
|
739
|
+
function $5f4753043c9f6cdf$export$3819f8ee9f4ce664(props, state, ref) {
|
|
740
|
+
let { parentMenuRef: parentMenuRef, submenuRef: submenuRef, type: type = "menu", isDisabled: isDisabled, node: node } = props;
|
|
741
|
+
let submenuTriggerId = (0, $fHYTQ$reactariautils.useId)();
|
|
742
|
+
let overlayId = (0, $fHYTQ$reactariautils.useId)();
|
|
743
|
+
let { direction: direction } = (0, $fHYTQ$reactariai18n.useLocale)();
|
|
744
|
+
let openTimeout = (0, $fHYTQ$react.useRef)();
|
|
745
|
+
let cancelOpenTimeout = (0, $fHYTQ$react.useCallback)(()=>{
|
|
746
|
+
if (openTimeout.current) {
|
|
747
|
+
clearTimeout(openTimeout.current);
|
|
748
|
+
openTimeout.current = undefined;
|
|
749
|
+
}
|
|
750
|
+
}, [
|
|
751
|
+
openTimeout
|
|
752
|
+
]);
|
|
753
|
+
let onSubmenuOpen = (0, $fHYTQ$reactariautils.useEffectEvent)((focusStrategy)=>{
|
|
754
|
+
cancelOpenTimeout();
|
|
755
|
+
state.open(focusStrategy);
|
|
756
|
+
});
|
|
757
|
+
let onSubmenuClose = (0, $fHYTQ$reactariautils.useEffectEvent)(()=>{
|
|
758
|
+
cancelOpenTimeout();
|
|
759
|
+
state.close();
|
|
760
|
+
});
|
|
761
|
+
(0, $fHYTQ$reactariautils.useLayoutEffect)(()=>{
|
|
762
|
+
return ()=>{
|
|
763
|
+
cancelOpenTimeout();
|
|
764
|
+
};
|
|
765
|
+
}, [
|
|
766
|
+
cancelOpenTimeout
|
|
767
|
+
]);
|
|
768
|
+
let submenuKeyDown = (e)=>{
|
|
769
|
+
switch(e.key){
|
|
770
|
+
case "ArrowLeft":
|
|
771
|
+
if (direction === "ltr" && e.currentTarget.contains(e.target)) {
|
|
772
|
+
e.stopPropagation();
|
|
773
|
+
onSubmenuClose();
|
|
774
|
+
ref.current.focus();
|
|
775
|
+
}
|
|
776
|
+
break;
|
|
777
|
+
case "ArrowRight":
|
|
778
|
+
if (direction === "rtl" && e.currentTarget.contains(e.target)) {
|
|
779
|
+
e.stopPropagation();
|
|
780
|
+
onSubmenuClose();
|
|
781
|
+
ref.current.focus();
|
|
782
|
+
}
|
|
783
|
+
break;
|
|
784
|
+
case "Escape":
|
|
785
|
+
e.stopPropagation();
|
|
786
|
+
state.closeAll();
|
|
787
|
+
break;
|
|
788
|
+
}
|
|
789
|
+
};
|
|
790
|
+
let submenuProps = {
|
|
791
|
+
id: overlayId,
|
|
792
|
+
"aria-label": node.textValue,
|
|
793
|
+
submenuLevel: state.submenuLevel,
|
|
794
|
+
...type === "menu" && {
|
|
795
|
+
onClose: state.closeAll,
|
|
796
|
+
autoFocus: state.focusStrategy,
|
|
797
|
+
onKeyDown: submenuKeyDown
|
|
798
|
+
}
|
|
799
|
+
};
|
|
800
|
+
let submenuTriggerKeyDown = (e)=>{
|
|
801
|
+
switch(e.key){
|
|
802
|
+
case "ArrowRight":
|
|
803
|
+
if (!isDisabled) {
|
|
804
|
+
if (direction === "ltr") {
|
|
805
|
+
if (!state.isOpen) onSubmenuOpen("first");
|
|
806
|
+
if (type === "menu" && !!(submenuRef === null || submenuRef === void 0 ? void 0 : submenuRef.current) && document.activeElement === (ref === null || ref === void 0 ? void 0 : ref.current)) submenuRef.current.focus();
|
|
807
|
+
} else if (state.isOpen) onSubmenuClose();
|
|
808
|
+
else e.continuePropagation();
|
|
809
|
+
}
|
|
810
|
+
break;
|
|
811
|
+
case "ArrowLeft":
|
|
812
|
+
if (!isDisabled) {
|
|
813
|
+
if (direction === "rtl") {
|
|
814
|
+
if (!state.isOpen) onSubmenuOpen("first");
|
|
815
|
+
if (type === "menu" && !!(submenuRef === null || submenuRef === void 0 ? void 0 : submenuRef.current) && document.activeElement === (ref === null || ref === void 0 ? void 0 : ref.current)) submenuRef.current.focus();
|
|
816
|
+
} else if (state.isOpen) onSubmenuClose();
|
|
817
|
+
else e.continuePropagation();
|
|
818
|
+
}
|
|
819
|
+
break;
|
|
820
|
+
case "Escape":
|
|
821
|
+
state.closeAll();
|
|
822
|
+
break;
|
|
823
|
+
default:
|
|
824
|
+
e.continuePropagation();
|
|
825
|
+
break;
|
|
826
|
+
}
|
|
827
|
+
};
|
|
828
|
+
let onPressStart = (e)=>{
|
|
829
|
+
if (!isDisabled && (e.pointerType === "virtual" || e.pointerType === "keyboard")) // If opened with a screen reader or keyboard, auto focus the first submenu item.
|
|
830
|
+
onSubmenuOpen("first");
|
|
831
|
+
};
|
|
832
|
+
let onPress = (e)=>{
|
|
833
|
+
if (!isDisabled && (e.pointerType === "touch" || e.pointerType === "mouse")) // For touch or on a desktop device with a small screen open on press up to possible problems with
|
|
834
|
+
// press up happening on the newly opened tray items
|
|
835
|
+
onSubmenuOpen();
|
|
836
|
+
};
|
|
837
|
+
let onHoverChange = (isHovered)=>{
|
|
838
|
+
if (!isDisabled) {
|
|
839
|
+
if (isHovered && !state.isOpen) {
|
|
840
|
+
if (!openTimeout.current) openTimeout.current = setTimeout(()=>{
|
|
841
|
+
onSubmenuOpen();
|
|
842
|
+
}, 200);
|
|
843
|
+
} else if (!isHovered) cancelOpenTimeout();
|
|
844
|
+
}
|
|
845
|
+
};
|
|
846
|
+
let onBlur = (e)=>{
|
|
847
|
+
if (state.isOpen && parentMenuRef.current.contains(e.relatedTarget)) onSubmenuClose();
|
|
848
|
+
};
|
|
849
|
+
let shouldCloseOnInteractOutside = (target)=>{
|
|
850
|
+
if (target !== ref.current) return true;
|
|
851
|
+
return false;
|
|
852
|
+
};
|
|
853
|
+
(0, $62347d8c4183e713$export$85ec83e04c95f50a)({
|
|
854
|
+
menuRef: parentMenuRef,
|
|
855
|
+
submenuRef: submenuRef,
|
|
856
|
+
isOpen: state.isOpen,
|
|
857
|
+
isDisabled: isDisabled
|
|
858
|
+
});
|
|
859
|
+
return {
|
|
860
|
+
submenuTriggerProps: {
|
|
861
|
+
id: submenuTriggerId,
|
|
862
|
+
"aria-controls": state.isOpen ? overlayId : undefined,
|
|
863
|
+
"aria-haspopup": !isDisabled ? type : undefined,
|
|
864
|
+
"aria-expanded": state.isOpen ? "true" : "false",
|
|
865
|
+
onPressStart: onPressStart,
|
|
866
|
+
onPress: onPress,
|
|
867
|
+
onHoverChange: onHoverChange,
|
|
868
|
+
onKeyDown: submenuTriggerKeyDown,
|
|
869
|
+
onBlur: onBlur,
|
|
870
|
+
isOpen: state.isOpen
|
|
871
|
+
},
|
|
872
|
+
submenuProps: submenuProps,
|
|
873
|
+
popoverProps: {
|
|
874
|
+
isNonModal: true,
|
|
875
|
+
disableFocusManagement: true,
|
|
876
|
+
shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
|
|
877
|
+
}
|
|
878
|
+
};
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
|
|
632
882
|
|
|
633
883
|
|
|
634
884
|
//# sourceMappingURL=main.js.map
|