@react-aria/menu 3.11.3-nightly.4321 → 3.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ar-AE.main.js +6 -0
- package/dist/ar-AE.main.js.map +1 -0
- package/dist/ar-AE.mjs +8 -0
- package/dist/ar-AE.module.js +8 -0
- package/dist/ar-AE.module.js.map +1 -0
- package/dist/bg-BG.main.js +6 -0
- package/dist/bg-BG.main.js.map +1 -0
- package/dist/bg-BG.mjs +8 -0
- package/dist/bg-BG.module.js +8 -0
- package/dist/bg-BG.module.js.map +1 -0
- package/dist/cs-CZ.main.js +6 -0
- package/dist/cs-CZ.main.js.map +1 -0
- package/dist/cs-CZ.mjs +8 -0
- package/dist/cs-CZ.module.js +8 -0
- package/dist/cs-CZ.module.js.map +1 -0
- package/dist/da-DK.main.js +6 -0
- package/dist/da-DK.main.js.map +1 -0
- package/dist/da-DK.mjs +8 -0
- package/dist/da-DK.module.js +8 -0
- package/dist/da-DK.module.js.map +1 -0
- package/dist/de-DE.main.js +6 -0
- package/dist/de-DE.main.js.map +1 -0
- package/dist/de-DE.mjs +8 -0
- package/dist/de-DE.module.js +8 -0
- package/dist/de-DE.module.js.map +1 -0
- package/dist/el-GR.main.js +6 -0
- package/dist/el-GR.main.js.map +1 -0
- package/dist/el-GR.mjs +8 -0
- package/dist/el-GR.module.js +8 -0
- package/dist/el-GR.module.js.map +1 -0
- package/dist/en-US.main.js +6 -0
- package/dist/en-US.main.js.map +1 -0
- package/dist/en-US.mjs +8 -0
- package/dist/en-US.module.js +8 -0
- package/dist/en-US.module.js.map +1 -0
- package/dist/es-ES.main.js +6 -0
- package/dist/es-ES.main.js.map +1 -0
- package/dist/es-ES.mjs +8 -0
- package/dist/es-ES.module.js +8 -0
- package/dist/es-ES.module.js.map +1 -0
- package/dist/et-EE.main.js +6 -0
- package/dist/et-EE.main.js.map +1 -0
- package/dist/et-EE.mjs +8 -0
- package/dist/et-EE.module.js +8 -0
- package/dist/et-EE.module.js.map +1 -0
- package/dist/fi-FI.main.js +6 -0
- package/dist/fi-FI.main.js.map +1 -0
- package/dist/fi-FI.mjs +8 -0
- package/dist/fi-FI.module.js +8 -0
- package/dist/fi-FI.module.js.map +1 -0
- package/dist/fr-FR.main.js +6 -0
- package/dist/fr-FR.main.js.map +1 -0
- package/dist/fr-FR.mjs +8 -0
- package/dist/fr-FR.module.js +8 -0
- package/dist/fr-FR.module.js.map +1 -0
- package/dist/he-IL.main.js +6 -0
- package/dist/he-IL.main.js.map +1 -0
- package/dist/he-IL.mjs +8 -0
- package/dist/he-IL.module.js +8 -0
- package/dist/he-IL.module.js.map +1 -0
- package/dist/hr-HR.main.js +6 -0
- package/dist/hr-HR.main.js.map +1 -0
- package/dist/hr-HR.mjs +8 -0
- package/dist/hr-HR.module.js +8 -0
- package/dist/hr-HR.module.js.map +1 -0
- package/dist/hu-HU.main.js +6 -0
- package/dist/hu-HU.main.js.map +1 -0
- package/dist/hu-HU.mjs +8 -0
- package/dist/hu-HU.module.js +8 -0
- package/dist/hu-HU.module.js.map +1 -0
- package/dist/import.mjs +356 -243
- package/dist/it-IT.main.js +6 -0
- package/dist/it-IT.main.js.map +1 -0
- package/dist/it-IT.mjs +8 -0
- package/dist/it-IT.module.js +8 -0
- package/dist/it-IT.module.js.map +1 -0
- package/dist/ja-JP.main.js +6 -0
- package/dist/ja-JP.main.js.map +1 -0
- package/dist/ja-JP.mjs +8 -0
- package/dist/ja-JP.module.js +8 -0
- package/dist/ja-JP.module.js.map +1 -0
- package/dist/ko-KR.main.js +6 -0
- package/dist/ko-KR.main.js.map +1 -0
- package/dist/ko-KR.mjs +8 -0
- package/dist/ko-KR.module.js +8 -0
- package/dist/ko-KR.module.js.map +1 -0
- package/dist/lt-LT.main.js +6 -0
- package/dist/lt-LT.main.js.map +1 -0
- package/dist/lt-LT.mjs +8 -0
- package/dist/lt-LT.module.js +8 -0
- package/dist/lt-LT.module.js.map +1 -0
- package/dist/lv-LV.main.js +6 -0
- package/dist/lv-LV.main.js.map +1 -0
- package/dist/lv-LV.mjs +8 -0
- package/dist/lv-LV.module.js +8 -0
- package/dist/lv-LV.module.js.map +1 -0
- package/dist/main.js +353 -239
- package/dist/main.js.map +1 -1
- package/dist/module.js +356 -243
- package/dist/module.js.map +1 -1
- package/dist/nb-NO.main.js +6 -0
- package/dist/nb-NO.main.js.map +1 -0
- package/dist/nb-NO.mjs +8 -0
- package/dist/nb-NO.module.js +8 -0
- package/dist/nb-NO.module.js.map +1 -0
- package/dist/nl-NL.main.js +6 -0
- package/dist/nl-NL.main.js.map +1 -0
- package/dist/nl-NL.mjs +8 -0
- package/dist/nl-NL.module.js +8 -0
- package/dist/nl-NL.module.js.map +1 -0
- package/dist/pl-PL.main.js +6 -0
- package/dist/pl-PL.main.js.map +1 -0
- package/dist/pl-PL.mjs +8 -0
- package/dist/pl-PL.module.js +8 -0
- package/dist/pl-PL.module.js.map +1 -0
- package/dist/pt-BR.main.js +6 -0
- package/dist/pt-BR.main.js.map +1 -0
- package/dist/pt-BR.mjs +8 -0
- package/dist/pt-BR.module.js +8 -0
- package/dist/pt-BR.module.js.map +1 -0
- package/dist/pt-PT.main.js +6 -0
- package/dist/pt-PT.main.js.map +1 -0
- package/dist/pt-PT.mjs +8 -0
- package/dist/pt-PT.module.js +8 -0
- package/dist/pt-PT.module.js.map +1 -0
- package/dist/ro-RO.main.js +6 -0
- package/dist/ro-RO.main.js.map +1 -0
- package/dist/ro-RO.mjs +8 -0
- package/dist/ro-RO.module.js +8 -0
- package/dist/ro-RO.module.js.map +1 -0
- package/dist/ru-RU.main.js +6 -0
- package/dist/ru-RU.main.js.map +1 -0
- package/dist/ru-RU.mjs +8 -0
- package/dist/ru-RU.module.js +8 -0
- package/dist/ru-RU.module.js.map +1 -0
- package/dist/sk-SK.main.js +6 -0
- package/dist/sk-SK.main.js.map +1 -0
- package/dist/sk-SK.mjs +8 -0
- package/dist/sk-SK.module.js +8 -0
- package/dist/sk-SK.module.js.map +1 -0
- package/dist/sl-SI.main.js +6 -0
- package/dist/sl-SI.main.js.map +1 -0
- package/dist/sl-SI.mjs +8 -0
- package/dist/sl-SI.module.js +8 -0
- package/dist/sl-SI.module.js.map +1 -0
- package/dist/sr-SP.main.js +6 -0
- package/dist/sr-SP.main.js.map +1 -0
- package/dist/sr-SP.mjs +8 -0
- package/dist/sr-SP.module.js +8 -0
- package/dist/sr-SP.module.js.map +1 -0
- package/dist/sv-SE.main.js +6 -0
- package/dist/sv-SE.main.js.map +1 -0
- package/dist/sv-SE.mjs +8 -0
- package/dist/sv-SE.module.js +8 -0
- package/dist/sv-SE.module.js.map +1 -0
- package/dist/tr-TR.main.js +6 -0
- package/dist/tr-TR.main.js.map +1 -0
- package/dist/tr-TR.mjs +8 -0
- package/dist/tr-TR.module.js +8 -0
- package/dist/tr-TR.module.js.map +1 -0
- package/dist/types.d.ts +45 -4
- package/dist/types.d.ts.map +1 -1
- package/dist/uk-UA.main.js +6 -0
- package/dist/uk-UA.main.js.map +1 -0
- package/dist/uk-UA.mjs +8 -0
- package/dist/uk-UA.module.js +8 -0
- package/dist/uk-UA.module.js.map +1 -0
- package/dist/zh-CN.main.js +6 -0
- package/dist/zh-CN.main.js.map +1 -0
- package/dist/zh-CN.mjs +8 -0
- package/dist/zh-CN.module.js +8 -0
- package/dist/zh-CN.module.js.map +1 -0
- package/dist/zh-TW.main.js +6 -0
- package/dist/zh-TW.main.js.map +1 -0
- package/dist/zh-TW.mjs +8 -0
- package/dist/zh-TW.module.js +8 -0
- package/dist/zh-TW.module.js.map +1 -0
- 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/useMenuTrigger.ts +2 -1
- package/src/useSafelyMouseToSubmenu.ts +158 -0
- package/src/useSubmenuTrigger.ts +235 -0
package/dist/sv-SE.mjs
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $9e9fef000aa4c013$exports = {};
|
|
2
|
+
$9e9fef000aa4c013$exports = {
|
|
3
|
+
"longPressMessage": `H\xe5ll nedtryckt eller tryck p\xe5 Alt + pil ned\xe5t f\xf6r att \xf6ppna menyn`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$9e9fef000aa4c013$exports as default};
|
|
8
|
+
//# sourceMappingURL=sv-SE.module.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $9e9fef000aa4c013$exports = {};
|
|
2
|
+
$9e9fef000aa4c013$exports = {
|
|
3
|
+
"longPressMessage": `H\xe5ll nedtryckt eller tryck p\xe5 Alt + pil ned\xe5t f\xf6r att \xf6ppna menyn`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$9e9fef000aa4c013$exports as default};
|
|
8
|
+
//# sourceMappingURL=sv-SE.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,oBAAoB,CAAC,gFAAiE,CAAC;AAC3G","sources":["packages/@react-aria/menu/intl/sv-SE.json"],"sourcesContent":["{\n \"longPressMessage\": \"Håll nedtryckt eller tryck på Alt + pil nedåt för att öppna menyn\"\n}\n"],"names":[],"version":3,"file":"sv-SE.module.js.map"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AAAA,iBAAiB;IAAG,oBAAoB,CAAC,6GAA6D,CAAC;AACvG","sources":["packages/@react-aria/menu/intl/tr-TR.json"],"sourcesContent":["{\n \"longPressMessage\": \"Menüyü açmak için uzun basın veya Alt + Aşağı Ok tuşuna basın\"\n}\n"],"names":[],"version":3,"file":"tr-TR.main.js.map"}
|
package/dist/tr-TR.mjs
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $c016c8183bbe3d68$exports = {};
|
|
2
|
+
$c016c8183bbe3d68$exports = {
|
|
3
|
+
"longPressMessage": `Men\xfcy\xfc a\xe7mak i\xe7in uzun bas\u{131}n veya Alt + A\u{15F}a\u{11F}\u{131} Ok tu\u{15F}una bas\u{131}n`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$c016c8183bbe3d68$exports as default};
|
|
8
|
+
//# sourceMappingURL=tr-TR.module.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $c016c8183bbe3d68$exports = {};
|
|
2
|
+
$c016c8183bbe3d68$exports = {
|
|
3
|
+
"longPressMessage": `Men\xfcy\xfc a\xe7mak i\xe7in uzun bas\u{131}n veya Alt + A\u{15F}a\u{11F}\u{131} Ok tu\u{15F}una bas\u{131}n`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$c016c8183bbe3d68$exports as default};
|
|
8
|
+
//# sourceMappingURL=tr-TR.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,oBAAoB,CAAC,6GAA6D,CAAC;AACvG","sources":["packages/@react-aria/menu/intl/tr-TR.json"],"sourcesContent":["{\n \"longPressMessage\": \"Menüyü açmak için uzun basın veya Alt + Aşağı Ok tuşuna basın\"\n}\n"],"names":[],"version":3,"file":"tr-TR.module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { AriaMenuProps, MenuTriggerType } from "@react-types/menu";
|
|
2
|
-
import { DOMAttributes, KeyboardDelegate, FocusableElement, Key } from "@react-types/shared";
|
|
2
|
+
import { DOMAttributes, KeyboardDelegate, KeyboardEvents, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, PressEvents, Node } from "@react-types/shared";
|
|
3
3
|
import { RefObject, ReactNode } from "react";
|
|
4
4
|
import { TreeState } from "@react-stately/tree";
|
|
5
5
|
import { AriaButtonProps } from "@react-types/button";
|
|
6
|
-
import { MenuTriggerState } from "@react-stately/menu";
|
|
6
|
+
import { MenuTriggerState, SubmenuTriggerState } from "@react-stately/menu";
|
|
7
|
+
import { AriaPopoverProps, OverlayProps } from "@react-aria/overlays";
|
|
7
8
|
export interface MenuAria {
|
|
8
9
|
/** Props for the menu element. */
|
|
9
10
|
menuProps: DOMAttributes;
|
|
10
11
|
}
|
|
11
|
-
export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'
|
|
12
|
+
export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {
|
|
12
13
|
/** Whether the menu uses virtual scrolling. */
|
|
13
14
|
isVirtualized?: boolean;
|
|
14
15
|
/**
|
|
@@ -42,6 +43,7 @@ export interface MenuTriggerAria<T> {
|
|
|
42
43
|
* Provides the behavior and accessibility implementation for a menu trigger.
|
|
43
44
|
* @param props - Props for the menu trigger.
|
|
44
45
|
* @param state - State for the menu trigger.
|
|
46
|
+
* @param ref - Ref to the HTML element trigger for the menu.
|
|
45
47
|
*/
|
|
46
48
|
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element>): MenuTriggerAria<T>;
|
|
47
49
|
export interface MenuItemAria {
|
|
@@ -62,7 +64,7 @@ export interface MenuItemAria {
|
|
|
62
64
|
/** Whether the item is disabled. */
|
|
63
65
|
isDisabled: boolean;
|
|
64
66
|
}
|
|
65
|
-
export interface AriaMenuItemProps {
|
|
67
|
+
export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {
|
|
66
68
|
/**
|
|
67
69
|
* Whether the menu item is disabled.
|
|
68
70
|
* @deprecated - pass disabledKeys to useTreeState instead.
|
|
@@ -96,6 +98,10 @@ export interface AriaMenuItemProps {
|
|
|
96
98
|
onAction?: (key: Key) => void;
|
|
97
99
|
/** What kind of popup the item opens. */
|
|
98
100
|
'aria-haspopup'?: 'menu' | 'dialog';
|
|
101
|
+
/** Indicates whether the menu item's popup element is expanded or collapsed. */
|
|
102
|
+
'aria-expanded'?: boolean | 'true' | 'false';
|
|
103
|
+
/** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */
|
|
104
|
+
'aria-controls'?: string;
|
|
99
105
|
}
|
|
100
106
|
/**
|
|
101
107
|
* Provides the behavior and accessibility implementation for an item in a menu.
|
|
@@ -124,6 +130,41 @@ export interface MenuSectionAria {
|
|
|
124
130
|
* @param props - Props for the section.
|
|
125
131
|
*/
|
|
126
132
|
export function useMenuSection(props: AriaMenuSectionProps): MenuSectionAria;
|
|
133
|
+
export interface AriaSubmenuTriggerProps {
|
|
134
|
+
/** An object representing the submenu trigger menu item. Contains all the relevant information that makes up the menu item. */
|
|
135
|
+
node: Node<unknown>;
|
|
136
|
+
/** Whether the submenu trigger is disabled. */
|
|
137
|
+
isDisabled?: boolean;
|
|
138
|
+
/** The type of the contents that the submenu trigger opens. */
|
|
139
|
+
type?: 'dialog' | 'menu';
|
|
140
|
+
/** Ref of the menu that contains the submenu trigger. */
|
|
141
|
+
parentMenuRef: RefObject<HTMLElement>;
|
|
142
|
+
/** Ref of the submenu opened by the submenu trigger. */
|
|
143
|
+
submenuRef: RefObject<HTMLElement>;
|
|
144
|
+
}
|
|
145
|
+
interface SubmenuTriggerProps extends AriaMenuItemProps {
|
|
146
|
+
/** Whether the submenu trigger is in an expanded state. */
|
|
147
|
+
isOpen: boolean;
|
|
148
|
+
}
|
|
149
|
+
interface SubmenuProps<T> extends AriaMenuOptions<T> {
|
|
150
|
+
/** The level of the submenu. */
|
|
151
|
+
submenuLevel: number;
|
|
152
|
+
}
|
|
153
|
+
export interface SubmenuTriggerAria<T> {
|
|
154
|
+
/** Props for the submenu trigger menu item. */
|
|
155
|
+
submenuTriggerProps: SubmenuTriggerProps;
|
|
156
|
+
/** Props for the submenu controlled by the submenu trigger menu item. */
|
|
157
|
+
submenuProps: SubmenuProps<T>;
|
|
158
|
+
/** Props for the submenu's popover container. */
|
|
159
|
+
popoverProps: Pick<AriaPopoverProps, 'isNonModal' | 'shouldCloseOnInteractOutside'> & Pick<OverlayProps, 'disableFocusManagement'>;
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Provides the behavior and accessibility implementation for a submenu trigger and its associated submenu.
|
|
163
|
+
* @param props - Props for the submenu trigger and refs attach to its submenu and parent menu.
|
|
164
|
+
* @param state - State for the submenu trigger.
|
|
165
|
+
* @param ref - Ref to the submenu trigger element.
|
|
166
|
+
*/
|
|
167
|
+
export function UNSTABLE_useSubmenuTrigger<T>(props: AriaSubmenuTriggerProps, state: SubmenuTriggerState, ref: RefObject<FocusableElement>): SubmenuTriggerAria<T>;
|
|
127
168
|
export type { AriaMenuProps } from '@react-types/menu';
|
|
128
169
|
|
|
129
170
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenu.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuTrigger.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuItem.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useMenuSection.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useSafelyMouseToSubmenu.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/useSubmenuTrigger.ts","packages/@react-aria/menu/src/packages/@react-aria/menu/src/index.ts","packages/@react-aria/menu/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useMenuTrigger} from './useMenuTrigger';\nexport {useMenu} from './useMenu';\nexport {useMenuItem} from './useMenuItem';\nexport {useMenuSection} from './useMenuSection';\nexport {UNSTABLE_useSubmenuTrigger} from './useSubmenuTrigger';\n\nexport type {AriaMenuProps} from '@react-types/menu';\nexport type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';\nexport type {AriaMenuOptions, MenuAria} from './useMenu';\nexport type {AriaMenuItemProps, MenuItemAria} from './useMenuItem';\nexport type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection';\nexport type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
"longPressMessage": `\u{414}\u{43E}\u{432}\u{433}\u{43E} \u{430}\u{431}\u{43E} \u{437}\u{432}\u{438}\u{447}\u{430}\u{439}\u{43D}\u{43E} \u{43D}\u{430}\u{442}\u{438}\u{441}\u{43D}\u{456}\u{442}\u{44C} \u{43A}\u{43E}\u{43C}\u{431}\u{456}\u{43D}\u{430}\u{446}\u{456}\u{44E} \u{43A}\u{43B}\u{430}\u{432}\u{456}\u{448} Alt \u{456} \u{441}\u{442}\u{440}\u{456}\u{43B}\u{43A}\u{430} \u{432}\u{43D}\u{438}\u{437}, \u{449}\u{43E}\u{431} \u{432}\u{456}\u{434}\u{43A}\u{440}\u{438}\u{442}\u{438} \u{43C}\u{435}\u{43D}\u{44E}`
|
|
3
|
+
};
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=uk-UA.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AAAA,iBAAiB;IAAG,oBAAoB,CAAC,4eAAoF,CAAC;AAC9H","sources":["packages/@react-aria/menu/intl/uk-UA.json"],"sourcesContent":["{\n \"longPressMessage\": \"Довго або звичайно натисніть комбінацію клавіш Alt і стрілка вниз, щоб відкрити меню\"\n}\n"],"names":[],"version":3,"file":"uk-UA.main.js.map"}
|
package/dist/uk-UA.mjs
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $ca4f6c8462244e62$exports = {};
|
|
2
|
+
$ca4f6c8462244e62$exports = {
|
|
3
|
+
"longPressMessage": `\u{414}\u{43E}\u{432}\u{433}\u{43E} \u{430}\u{431}\u{43E} \u{437}\u{432}\u{438}\u{447}\u{430}\u{439}\u{43D}\u{43E} \u{43D}\u{430}\u{442}\u{438}\u{441}\u{43D}\u{456}\u{442}\u{44C} \u{43A}\u{43E}\u{43C}\u{431}\u{456}\u{43D}\u{430}\u{446}\u{456}\u{44E} \u{43A}\u{43B}\u{430}\u{432}\u{456}\u{448} Alt \u{456} \u{441}\u{442}\u{440}\u{456}\u{43B}\u{43A}\u{430} \u{432}\u{43D}\u{438}\u{437}, \u{449}\u{43E}\u{431} \u{432}\u{456}\u{434}\u{43A}\u{440}\u{438}\u{442}\u{438} \u{43C}\u{435}\u{43D}\u{44E}`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$ca4f6c8462244e62$exports as default};
|
|
8
|
+
//# sourceMappingURL=uk-UA.module.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $ca4f6c8462244e62$exports = {};
|
|
2
|
+
$ca4f6c8462244e62$exports = {
|
|
3
|
+
"longPressMessage": `\u{414}\u{43E}\u{432}\u{433}\u{43E} \u{430}\u{431}\u{43E} \u{437}\u{432}\u{438}\u{447}\u{430}\u{439}\u{43D}\u{43E} \u{43D}\u{430}\u{442}\u{438}\u{441}\u{43D}\u{456}\u{442}\u{44C} \u{43A}\u{43E}\u{43C}\u{431}\u{456}\u{43D}\u{430}\u{446}\u{456}\u{44E} \u{43A}\u{43B}\u{430}\u{432}\u{456}\u{448} Alt \u{456} \u{441}\u{442}\u{440}\u{456}\u{43B}\u{43A}\u{430} \u{432}\u{43D}\u{438}\u{437}, \u{449}\u{43E}\u{431} \u{432}\u{456}\u{434}\u{43A}\u{440}\u{438}\u{442}\u{438} \u{43C}\u{435}\u{43D}\u{44E}`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$ca4f6c8462244e62$exports as default};
|
|
8
|
+
//# sourceMappingURL=uk-UA.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,oBAAoB,CAAC,4eAAoF,CAAC;AAC9H","sources":["packages/@react-aria/menu/intl/uk-UA.json"],"sourcesContent":["{\n \"longPressMessage\": \"Довго або звичайно натисніть комбінацію клавіш Alt і стрілка вниз, щоб відкрити меню\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AAAA,iBAAiB;IAAG,oBAAoB,CAAC,uHAAqB,CAAC;AAC/D","sources":["packages/@react-aria/menu/intl/zh-CN.json"],"sourcesContent":["{\n \"longPressMessage\": \"长按或按 Alt + 向下方向键以打开菜单\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}
|
package/dist/zh-CN.mjs
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $2d9960c02ccac927$exports = {};
|
|
2
|
+
$2d9960c02ccac927$exports = {
|
|
3
|
+
"longPressMessage": `\u{957F}\u{6309}\u{6216}\u{6309} Alt + \u{5411}\u{4E0B}\u{65B9}\u{5411}\u{952E}\u{4EE5}\u{6253}\u{5F00}\u{83DC}\u{5355}`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$2d9960c02ccac927$exports as default};
|
|
8
|
+
//# sourceMappingURL=zh-CN.module.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $2d9960c02ccac927$exports = {};
|
|
2
|
+
$2d9960c02ccac927$exports = {
|
|
3
|
+
"longPressMessage": `\u{957F}\u{6309}\u{6216}\u{6309} Alt + \u{5411}\u{4E0B}\u{65B9}\u{5411}\u{952E}\u{4EE5}\u{6253}\u{5F00}\u{83DC}\u{5355}`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$2d9960c02ccac927$exports as default};
|
|
8
|
+
//# sourceMappingURL=zh-CN.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,oBAAoB,CAAC,uHAAqB,CAAC;AAC/D","sources":["packages/@react-aria/menu/intl/zh-CN.json"],"sourcesContent":["{\n \"longPressMessage\": \"长按或按 Alt + 向下方向键以打开菜单\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AAAA,iBAAiB;IAAG,oBAAoB,CAAC,6GAAkB,CAAC;AAC5D","sources":["packages/@react-aria/menu/intl/zh-TW.json"],"sourcesContent":["{\n \"longPressMessage\": \"長按或按 Alt+向下鍵以開啟功能表\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}
|
package/dist/zh-TW.mjs
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $f1b682a4c8c5631c$exports = {};
|
|
2
|
+
$f1b682a4c8c5631c$exports = {
|
|
3
|
+
"longPressMessage": `\u{9577}\u{6309}\u{6216}\u{6309} Alt+\u{5411}\u{4E0B}\u{9375}\u{4EE5}\u{958B}\u{555F}\u{529F}\u{80FD}\u{8868}`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$f1b682a4c8c5631c$exports as default};
|
|
8
|
+
//# sourceMappingURL=zh-TW.module.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var $f1b682a4c8c5631c$exports = {};
|
|
2
|
+
$f1b682a4c8c5631c$exports = {
|
|
3
|
+
"longPressMessage": `\u{9577}\u{6309}\u{6216}\u{6309} Alt+\u{5411}\u{4E0B}\u{9375}\u{4EE5}\u{958B}\u{555F}\u{529F}\u{80FD}\u{8868}`
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export {$f1b682a4c8c5631c$exports as default};
|
|
8
|
+
//# sourceMappingURL=zh-TW.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":";AAAA,4BAAiB;IAAG,oBAAoB,CAAC,6GAAkB,CAAC;AAC5D","sources":["packages/@react-aria/menu/intl/zh-TW.json"],"sourcesContent":["{\n \"longPressMessage\": \"長按或按 Alt+向下鍵以開啟功能表\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/menu",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.12.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "3.
|
|
26
|
-
"@react-aria/i18n": "3.
|
|
27
|
-
"@react-aria/interactions": "3.
|
|
28
|
-
"@react-aria/overlays": "3.
|
|
29
|
-
"@react-aria/selection": "3.
|
|
30
|
-
"@react-aria/utils": "3.
|
|
31
|
-
"@react-stately/collections": "3.
|
|
32
|
-
"@react-stately/menu": "3.
|
|
33
|
-
"@react-stately/tree": "3.
|
|
34
|
-
"@react-types/button": "3.9.
|
|
35
|
-
"@react-types/menu": "3.9.
|
|
36
|
-
"@react-types/shared": "3.
|
|
25
|
+
"@react-aria/focus": "^3.16.0",
|
|
26
|
+
"@react-aria/i18n": "^3.10.0",
|
|
27
|
+
"@react-aria/interactions": "^3.20.1",
|
|
28
|
+
"@react-aria/overlays": "^3.20.0",
|
|
29
|
+
"@react-aria/selection": "^3.17.3",
|
|
30
|
+
"@react-aria/utils": "^3.23.0",
|
|
31
|
+
"@react-stately/collections": "^3.10.4",
|
|
32
|
+
"@react-stately/menu": "^3.6.0",
|
|
33
|
+
"@react-stately/tree": "^3.7.5",
|
|
34
|
+
"@react-types/button": "^3.9.1",
|
|
35
|
+
"@react-types/menu": "^3.9.6",
|
|
36
|
+
"@react-types/shared": "^3.22.0",
|
|
37
37
|
"@swc/helpers": "^0.5.0"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
|
|
47
47
|
}
|
package/src/index.ts
CHANGED
|
@@ -14,9 +14,11 @@ export {useMenuTrigger} from './useMenuTrigger';
|
|
|
14
14
|
export {useMenu} from './useMenu';
|
|
15
15
|
export {useMenuItem} from './useMenuItem';
|
|
16
16
|
export {useMenuSection} from './useMenuSection';
|
|
17
|
+
export {UNSTABLE_useSubmenuTrigger} from './useSubmenuTrigger';
|
|
17
18
|
|
|
18
19
|
export type {AriaMenuProps} from '@react-types/menu';
|
|
19
20
|
export type {AriaMenuTriggerProps, MenuTriggerAria} from './useMenuTrigger';
|
|
20
21
|
export type {AriaMenuOptions, MenuAria} from './useMenu';
|
|
21
22
|
export type {AriaMenuItemProps, MenuItemAria} from './useMenuItem';
|
|
22
23
|
export type {AriaMenuSectionProps, MenuSectionAria} from './useMenuSection';
|
|
24
|
+
export type {AriaSubmenuTriggerProps, SubmenuTriggerAria} from './useSubmenuTrigger';
|
package/src/useMenu.ts
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {AriaMenuProps} from '@react-types/menu';
|
|
14
|
-
import {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';
|
|
14
|
+
import {DOMAttributes, Key, KeyboardDelegate, KeyboardEvents} from '@react-types/shared';
|
|
15
15
|
import {filterDOMProps, mergeProps} from '@react-aria/utils';
|
|
16
16
|
import {RefObject} from 'react';
|
|
17
17
|
import {TreeState} from '@react-stately/tree';
|
|
@@ -22,7 +22,7 @@ export interface MenuAria {
|
|
|
22
22
|
menuProps: DOMAttributes
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'
|
|
25
|
+
export interface AriaMenuOptions<T> extends Omit<AriaMenuProps<T>, 'children'>, KeyboardEvents {
|
|
26
26
|
/** Whether the menu uses virtual scrolling. */
|
|
27
27
|
isVirtualized?: boolean,
|
|
28
28
|
|
|
@@ -49,6 +49,8 @@ export const menuData = new WeakMap<TreeState<unknown>, MenuData>();
|
|
|
49
49
|
export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref: RefObject<HTMLElement>): MenuAria {
|
|
50
50
|
let {
|
|
51
51
|
shouldFocusWrap = true,
|
|
52
|
+
onKeyDown,
|
|
53
|
+
onKeyUp,
|
|
52
54
|
...otherProps
|
|
53
55
|
} = props;
|
|
54
56
|
|
|
@@ -73,10 +75,8 @@ export function useMenu<T>(props: AriaMenuOptions<T>, state: TreeState<T>, ref:
|
|
|
73
75
|
});
|
|
74
76
|
|
|
75
77
|
return {
|
|
76
|
-
menuProps: mergeProps(domProps, {
|
|
78
|
+
menuProps: mergeProps(domProps, {onKeyDown, onKeyUp}, {
|
|
77
79
|
role: 'menu',
|
|
78
|
-
// 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
|
|
79
|
-
'aria-hidden': state.expandedKeys.size > 0 ? true : undefined,
|
|
80
80
|
...listProps,
|
|
81
81
|
onKeyDown: (e) => {
|
|
82
82
|
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
package/src/useMenuItem.ts
CHANGED
|
@@ -10,15 +10,13 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {DOMAttributes, FocusableElement, Key, PressEvent} from '@react-types/shared';
|
|
14
|
-
import {filterDOMProps, mergeProps,
|
|
15
|
-
import {focusSafely} from '@react-aria/focus';
|
|
13
|
+
import {DOMAttributes, DOMProps, FocusableElement, FocusEvents, HoverEvents, Key, KeyboardEvents, PressEvent, PressEvents} from '@react-types/shared';
|
|
14
|
+
import {filterDOMProps, mergeProps, useRouter, useSlotId} from '@react-aria/utils';
|
|
16
15
|
import {getItemCount} from '@react-stately/collections';
|
|
17
|
-
import {isFocusVisible, useHover, useKeyboard, usePress} from '@react-aria/interactions';
|
|
16
|
+
import {isFocusVisible, useFocus, useHover, useKeyboard, usePress} from '@react-aria/interactions';
|
|
18
17
|
import {menuData} from './useMenu';
|
|
19
|
-
import {RefObject
|
|
18
|
+
import {RefObject} from 'react';
|
|
20
19
|
import {TreeState} from '@react-stately/tree';
|
|
21
|
-
import {useLocale} from '@react-aria/i18n';
|
|
22
20
|
import {useSelectableItem} from '@react-aria/selection';
|
|
23
21
|
|
|
24
22
|
export interface MenuItemAria {
|
|
@@ -44,7 +42,7 @@ export interface MenuItemAria {
|
|
|
44
42
|
isDisabled: boolean
|
|
45
43
|
}
|
|
46
44
|
|
|
47
|
-
export interface AriaMenuItemProps {
|
|
45
|
+
export interface AriaMenuItemProps extends DOMProps, PressEvents, HoverEvents, KeyboardEvents, FocusEvents {
|
|
48
46
|
/**
|
|
49
47
|
* Whether the menu item is disabled.
|
|
50
48
|
* @deprecated - pass disabledKeys to useTreeState instead.
|
|
@@ -85,7 +83,13 @@ export interface AriaMenuItemProps {
|
|
|
85
83
|
onAction?: (key: Key) => void,
|
|
86
84
|
|
|
87
85
|
/** What kind of popup the item opens. */
|
|
88
|
-
'aria-haspopup'?: 'menu' | 'dialog'
|
|
86
|
+
'aria-haspopup'?: 'menu' | 'dialog',
|
|
87
|
+
|
|
88
|
+
/** Indicates whether the menu item's popup element is expanded or collapsed. */
|
|
89
|
+
'aria-expanded'?: boolean | 'true' | 'false',
|
|
90
|
+
|
|
91
|
+
/** Identifies the menu item's popup element whose contents or presence is controlled by the menu item. */
|
|
92
|
+
'aria-controls'?: string
|
|
89
93
|
}
|
|
90
94
|
|
|
91
95
|
/**
|
|
@@ -99,41 +103,28 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
99
103
|
key,
|
|
100
104
|
closeOnSelect,
|
|
101
105
|
isVirtualized,
|
|
102
|
-
'aria-haspopup': hasPopup
|
|
106
|
+
'aria-haspopup': hasPopup,
|
|
107
|
+
onPressStart: pressStartProp,
|
|
108
|
+
onPressUp: pressUpProp,
|
|
109
|
+
onPress,
|
|
110
|
+
onPressChange,
|
|
111
|
+
onPressEnd,
|
|
112
|
+
onHoverStart: hoverStartProp,
|
|
113
|
+
onHoverChange,
|
|
114
|
+
onHoverEnd,
|
|
115
|
+
onKeyDown,
|
|
116
|
+
onKeyUp,
|
|
117
|
+
onFocus,
|
|
118
|
+
onFocusChange,
|
|
119
|
+
onBlur
|
|
103
120
|
} = props;
|
|
104
|
-
let {direction} = useLocale();
|
|
105
121
|
|
|
106
122
|
let isTrigger = !!hasPopup;
|
|
107
|
-
let isOpen = state.expandedKeys.has(key);
|
|
108
|
-
|
|
109
123
|
let isDisabled = props.isDisabled ?? state.disabledKeys.has(key);
|
|
110
124
|
let isSelected = props.isSelected ?? state.selectionManager.isSelected(key);
|
|
111
|
-
|
|
112
|
-
let openTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();
|
|
113
|
-
let cancelOpenTimeout = useCallback(() => {
|
|
114
|
-
if (openTimeout.current) {
|
|
115
|
-
clearTimeout(openTimeout.current);
|
|
116
|
-
openTimeout.current = undefined;
|
|
117
|
-
}
|
|
118
|
-
}, [openTimeout]);
|
|
119
|
-
|
|
120
|
-
let onSubmenuOpen = useEffectEvent(() => {
|
|
121
|
-
cancelOpenTimeout();
|
|
122
|
-
state.setExpandedKeys(new Set([key]));
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
useLayoutEffect(() => {
|
|
126
|
-
return () => cancelOpenTimeout();
|
|
127
|
-
}, [cancelOpenTimeout]);
|
|
128
|
-
|
|
129
125
|
let data = menuData.get(state);
|
|
130
126
|
let onClose = props.onClose || data.onClose;
|
|
131
|
-
let
|
|
132
|
-
onSubmenuOpen();
|
|
133
|
-
// will need to disable this lint rule when using useEffectEvent https://react.dev/learn/separating-events-from-effects#logic-inside-effects-is-reactive
|
|
134
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
135
|
-
}, []);
|
|
136
|
-
let onAction = isTrigger ? onActionMenuDialogTrigger : props.onAction || data.onAction;
|
|
127
|
+
let onAction = isTrigger ? () => {} : props.onAction || data.onAction;
|
|
137
128
|
let router = useRouter();
|
|
138
129
|
let performAction = (e: PressEvent) => {
|
|
139
130
|
if (onAction) {
|
|
@@ -146,10 +137,12 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
146
137
|
};
|
|
147
138
|
|
|
148
139
|
let role = 'menuitem';
|
|
149
|
-
if (
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
140
|
+
if (!isTrigger) {
|
|
141
|
+
if (state.selectionManager.selectionMode === 'single') {
|
|
142
|
+
role = 'menuitemradio';
|
|
143
|
+
} else if (state.selectionManager.selectionMode === 'multiple') {
|
|
144
|
+
role = 'menuitemcheckbox';
|
|
145
|
+
}
|
|
153
146
|
}
|
|
154
147
|
|
|
155
148
|
let labelId = useSlotId();
|
|
@@ -161,10 +154,13 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
161
154
|
role,
|
|
162
155
|
'aria-label': props['aria-label'],
|
|
163
156
|
'aria-labelledby': labelId,
|
|
164
|
-
'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined
|
|
157
|
+
'aria-describedby': [descriptionId, keyboardId].filter(Boolean).join(' ') || undefined,
|
|
158
|
+
'aria-controls': props['aria-controls'],
|
|
159
|
+
'aria-haspopup': hasPopup,
|
|
160
|
+
'aria-expanded': props['aria-expanded']
|
|
165
161
|
};
|
|
166
162
|
|
|
167
|
-
if (state.selectionManager.selectionMode !== 'none') {
|
|
163
|
+
if (state.selectionManager.selectionMode !== 'none' && !isTrigger) {
|
|
168
164
|
ariaProps['aria-checked'] = isSelected;
|
|
169
165
|
}
|
|
170
166
|
|
|
@@ -174,15 +170,12 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
174
170
|
ariaProps['aria-setsize'] = getItemCount(state.collection);
|
|
175
171
|
}
|
|
176
172
|
|
|
177
|
-
if (hasPopup != null) {
|
|
178
|
-
ariaProps['aria-haspopup'] = hasPopup;
|
|
179
|
-
ariaProps['aria-expanded'] = isOpen ? 'true' : 'false';
|
|
180
|
-
}
|
|
181
|
-
|
|
182
173
|
let onPressStart = (e: PressEvent) => {
|
|
183
174
|
if (e.pointerType === 'keyboard') {
|
|
184
175
|
performAction(e);
|
|
185
176
|
}
|
|
177
|
+
|
|
178
|
+
pressStartProp?.(e);
|
|
186
179
|
};
|
|
187
180
|
|
|
188
181
|
let onPressUp = (e: PressEvent) => {
|
|
@@ -195,6 +188,8 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
195
188
|
onClose();
|
|
196
189
|
}
|
|
197
190
|
}
|
|
191
|
+
|
|
192
|
+
pressUpProp?.(e);
|
|
198
193
|
};
|
|
199
194
|
|
|
200
195
|
let {itemProps, isFocused} = useSelectableItem({
|
|
@@ -212,33 +207,23 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
212
207
|
|
|
213
208
|
let {pressProps, isPressed} = usePress({
|
|
214
209
|
onPressStart,
|
|
210
|
+
onPress,
|
|
215
211
|
onPressUp,
|
|
216
|
-
|
|
212
|
+
onPressChange,
|
|
213
|
+
onPressEnd,
|
|
214
|
+
isDisabled
|
|
217
215
|
});
|
|
218
216
|
let {hoverProps} = useHover({
|
|
219
217
|
isDisabled,
|
|
220
|
-
onHoverStart() {
|
|
221
|
-
if (!isFocusVisible()
|
|
218
|
+
onHoverStart(e) {
|
|
219
|
+
if (!isFocusVisible()) {
|
|
222
220
|
state.selectionManager.setFocused(true);
|
|
223
221
|
state.selectionManager.setFocusedKey(key);
|
|
224
|
-
// focus immediately so that a focus scope opened on hover has the correct restore node
|
|
225
|
-
let isFocused = key === state.selectionManager.focusedKey;
|
|
226
|
-
if (isFocused && state.selectionManager.isFocused && document.activeElement !== ref.current) {
|
|
227
|
-
focusSafely(ref.current);
|
|
228
|
-
}
|
|
229
222
|
}
|
|
223
|
+
hoverStartProp?.(e);
|
|
230
224
|
},
|
|
231
|
-
onHoverChange
|
|
232
|
-
|
|
233
|
-
if (!openTimeout.current) {
|
|
234
|
-
openTimeout.current = setTimeout(() => {
|
|
235
|
-
onSubmenuOpen();
|
|
236
|
-
}, 200);
|
|
237
|
-
}
|
|
238
|
-
} else if (!isHovered) {
|
|
239
|
-
cancelOpenTimeout();
|
|
240
|
-
}
|
|
241
|
-
}
|
|
225
|
+
onHoverChange,
|
|
226
|
+
onHoverEnd
|
|
242
227
|
});
|
|
243
228
|
|
|
244
229
|
let {keyboardProps} = useKeyboard({
|
|
@@ -262,33 +247,27 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
|
|
|
262
247
|
onClose();
|
|
263
248
|
}
|
|
264
249
|
break;
|
|
265
|
-
|
|
266
|
-
if (isTrigger
|
|
267
|
-
onSubmenuOpen();
|
|
268
|
-
} else {
|
|
269
|
-
e.continuePropagation();
|
|
270
|
-
}
|
|
271
|
-
break;
|
|
272
|
-
case 'ArrowLeft':
|
|
273
|
-
if (isTrigger && direction === 'rtl') {
|
|
274
|
-
onSubmenuOpen();
|
|
275
|
-
} else {
|
|
250
|
+
default:
|
|
251
|
+
if (!isTrigger) {
|
|
276
252
|
e.continuePropagation();
|
|
277
253
|
}
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
e.continuePropagation();
|
|
254
|
+
|
|
255
|
+
onKeyDown?.(e);
|
|
281
256
|
break;
|
|
282
257
|
}
|
|
283
|
-
}
|
|
258
|
+
},
|
|
259
|
+
onKeyUp
|
|
284
260
|
});
|
|
285
261
|
|
|
262
|
+
let {focusProps} = useFocus({onBlur, onFocus, onFocusChange});
|
|
286
263
|
let domProps = filterDOMProps(item.props, {isLink: !!item?.props?.href});
|
|
287
264
|
delete domProps.id;
|
|
265
|
+
|
|
288
266
|
return {
|
|
289
267
|
menuItemProps: {
|
|
290
268
|
...ariaProps,
|
|
291
|
-
...mergeProps(domProps, itemProps, pressProps, hoverProps, keyboardProps)
|
|
269
|
+
...mergeProps(domProps, isTrigger ? {onFocus: itemProps.onFocus} : itemProps, pressProps, hoverProps, keyboardProps, focusProps),
|
|
270
|
+
tabIndex: itemProps.tabIndex != null ? -1 : undefined
|
|
292
271
|
},
|
|
293
272
|
labelProps: {
|
|
294
273
|
id: labelId
|
package/src/useMenuTrigger.ts
CHANGED
|
@@ -43,6 +43,7 @@ export interface MenuTriggerAria<T> {
|
|
|
43
43
|
* Provides the behavior and accessibility implementation for a menu trigger.
|
|
44
44
|
* @param props - Props for the menu trigger.
|
|
45
45
|
* @param state - State for the menu trigger.
|
|
46
|
+
* @param ref - Ref to the HTML element trigger for the menu.
|
|
46
47
|
*/
|
|
47
48
|
export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTriggerState, ref: RefObject<Element>): MenuTriggerAria<T> {
|
|
48
49
|
let {
|
|
@@ -95,7 +96,7 @@ export function useMenuTrigger<T>(props: AriaMenuTriggerProps, state: MenuTrigge
|
|
|
95
96
|
}
|
|
96
97
|
};
|
|
97
98
|
|
|
98
|
-
let stringFormatter = useLocalizedStringFormatter(intlMessages);
|
|
99
|
+
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/menu');
|
|
99
100
|
let {longPressProps} = useLongPress({
|
|
100
101
|
isDisabled: isDisabled || trigger !== 'longPress',
|
|
101
102
|
accessibilityDescription: stringFormatter.format('longPressMessage'),
|