@tamagui/menu 1.144.3 → 1.144.4
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/cjs/createNonNativeMenu.cjs +288 -0
- package/dist/cjs/createNonNativeMenu.js +240 -0
- package/dist/cjs/createNonNativeMenu.js.map +6 -0
- package/dist/cjs/createNonNativeMenu.native.js +301 -0
- package/dist/cjs/createNonNativeMenu.native.js.map +1 -0
- package/dist/esm/createNonNativeMenu.js +235 -0
- package/dist/esm/createNonNativeMenu.js.map +6 -0
- package/dist/esm/createNonNativeMenu.mjs +253 -0
- package/dist/esm/createNonNativeMenu.mjs.map +1 -0
- package/dist/esm/createNonNativeMenu.native.js +263 -0
- package/dist/esm/createNonNativeMenu.native.js.map +1 -0
- package/dist/jsx/createNonNativeMenu.js +235 -0
- package/dist/jsx/createNonNativeMenu.js.map +6 -0
- package/dist/jsx/createNonNativeMenu.mjs +253 -0
- package/dist/jsx/createNonNativeMenu.mjs.map +1 -0
- package/dist/jsx/createNonNativeMenu.native.js +301 -0
- package/dist/jsx/createNonNativeMenu.native.js.map +1 -0
- package/package.json +6 -6
- package/types/createNonNativeMenu.d.ts.map +1 -0
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf,
|
|
6
|
+
__hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all) __defProp(target, name, {
|
|
9
|
+
get: all[name],
|
|
10
|
+
enumerable: !0
|
|
11
|
+
});
|
|
12
|
+
},
|
|
13
|
+
__copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
|
|
15
|
+
get: () => from[key],
|
|
16
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
17
|
+
});
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: !0
|
|
28
|
+
}) : target, mod)),
|
|
29
|
+
__toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
30
|
+
value: !0
|
|
31
|
+
}), mod);
|
|
32
|
+
var createNonNativeMenu_exports = {};
|
|
33
|
+
__export(createNonNativeMenu_exports, {
|
|
34
|
+
DROPDOWN_MENU_CONTEXT: () => DROPDOWN_MENU_CONTEXT,
|
|
35
|
+
createNonNativeMenu: () => createNonNativeMenu
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(createNonNativeMenu_exports);
|
|
38
|
+
var import_create_menu = require("@tamagui/create-menu"),
|
|
39
|
+
import_scroll_view = require("@tamagui/scroll-view"),
|
|
40
|
+
import_use_controllable_state = require("@tamagui/use-controllable-state"),
|
|
41
|
+
import_web = require("@tamagui/web"),
|
|
42
|
+
React = __toESM(require("react"), 1),
|
|
43
|
+
import_react = require("react"),
|
|
44
|
+
import_jsx_runtime = require("react/jsx-runtime");
|
|
45
|
+
const DROPDOWN_MENU_CONTEXT = "MenuContext";
|
|
46
|
+
function createNonNativeMenu(params) {
|
|
47
|
+
const {
|
|
48
|
+
Menu
|
|
49
|
+
} = (0, import_create_menu.createBaseMenu)(params),
|
|
50
|
+
DROPDOWN_MENU_NAME = "Menu",
|
|
51
|
+
{
|
|
52
|
+
Provider: MenuProvider,
|
|
53
|
+
useStyledContext: useMenuContext
|
|
54
|
+
} = (0, import_web.createStyledContext)(),
|
|
55
|
+
MenuComp = props => {
|
|
56
|
+
const {
|
|
57
|
+
scope,
|
|
58
|
+
children,
|
|
59
|
+
dir,
|
|
60
|
+
open: openProp,
|
|
61
|
+
defaultOpen,
|
|
62
|
+
onOpenChange,
|
|
63
|
+
modal = !0,
|
|
64
|
+
...rest
|
|
65
|
+
} = props,
|
|
66
|
+
triggerRef = React.useRef(null),
|
|
67
|
+
[open = !1, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
68
|
+
prop: openProp,
|
|
69
|
+
defaultProp: defaultOpen,
|
|
70
|
+
onChange: onOpenChange
|
|
71
|
+
});
|
|
72
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
|
|
73
|
+
scope,
|
|
74
|
+
triggerId: (0, import_react.useId)(),
|
|
75
|
+
triggerRef,
|
|
76
|
+
contentId: (0, import_react.useId)(),
|
|
77
|
+
open,
|
|
78
|
+
onOpenChange: setOpen,
|
|
79
|
+
onOpenToggle: React.useCallback(() => setOpen(prevOpen => !prevOpen), [setOpen]),
|
|
80
|
+
modal,
|
|
81
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu, {
|
|
82
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
83
|
+
open,
|
|
84
|
+
onOpenChange: setOpen,
|
|
85
|
+
dir,
|
|
86
|
+
modal,
|
|
87
|
+
...rest,
|
|
88
|
+
children
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
MenuComp.displayName = DROPDOWN_MENU_NAME;
|
|
93
|
+
const TRIGGER_NAME = "MenuTrigger",
|
|
94
|
+
MenuTriggerFrame = Menu.Anchor,
|
|
95
|
+
MenuTrigger = import_web.View.styleable((props, forwardedRef) => {
|
|
96
|
+
const {
|
|
97
|
+
scope,
|
|
98
|
+
asChild,
|
|
99
|
+
children,
|
|
100
|
+
disabled = !1,
|
|
101
|
+
onKeydown,
|
|
102
|
+
...triggerProps
|
|
103
|
+
} = props,
|
|
104
|
+
context = useMenuContext(scope),
|
|
105
|
+
Comp = asChild ? import_web.Slot : import_web.View,
|
|
106
|
+
isTouchDevice = (0, import_web.useIsTouchDevice)(),
|
|
107
|
+
pressEvent = import_web.isWeb ? isTouchDevice ? "onClick" : "onPointerDown" : "onPress";
|
|
108
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuTriggerFrame, {
|
|
109
|
+
asChild: !0,
|
|
110
|
+
componentName: TRIGGER_NAME,
|
|
111
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
112
|
+
children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
|
|
113
|
+
role: "button",
|
|
114
|
+
id: context.triggerId,
|
|
115
|
+
"aria-haspopup": "menu",
|
|
116
|
+
"aria-expanded": context.open,
|
|
117
|
+
"aria-controls": context.open ? context.contentId : void 0,
|
|
118
|
+
"data-state": context.open ? "open" : "closed",
|
|
119
|
+
"data-disabled": disabled ? "" : void 0,
|
|
120
|
+
"aria-disabled": disabled || void 0,
|
|
121
|
+
ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
|
|
122
|
+
[pressEvent]: (0, import_web.composeEventHandlers)(
|
|
123
|
+
//@ts-ignore
|
|
124
|
+
props[pressEvent], event => {
|
|
125
|
+
if (!disabled) {
|
|
126
|
+
if (import_web.isWeb && event instanceof PointerEvent && event.button !== 0 && event.ctrlKey === !0) return;
|
|
127
|
+
context.onOpenToggle(), context.open || event.preventDefault();
|
|
128
|
+
}
|
|
129
|
+
}),
|
|
130
|
+
...(import_web.isWeb && {
|
|
131
|
+
onKeyDown: (0, import_web.composeEventHandlers)(onKeydown, event => {
|
|
132
|
+
disabled || (["Enter", " "].includes(event.key) && context.onOpenToggle(), event.key === "ArrowDown" && context.onOpenChange(!0), ["Enter", " ", "ArrowDown"].includes(event.key) && event.preventDefault());
|
|
133
|
+
})
|
|
134
|
+
}),
|
|
135
|
+
...triggerProps,
|
|
136
|
+
children
|
|
137
|
+
})
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
MenuTrigger.displayName = TRIGGER_NAME;
|
|
141
|
+
const PORTAL_NAME = "MenuPortal",
|
|
142
|
+
MenuPortal = props => {
|
|
143
|
+
const {
|
|
144
|
+
scope,
|
|
145
|
+
children,
|
|
146
|
+
...portalProps
|
|
147
|
+
} = props,
|
|
148
|
+
context = import_web.isAndroid ? useMenuContext(scope) : null,
|
|
149
|
+
content = import_web.isAndroid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(MenuProvider, {
|
|
150
|
+
...context,
|
|
151
|
+
children
|
|
152
|
+
}) : children;
|
|
153
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Portal, {
|
|
154
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
155
|
+
...portalProps,
|
|
156
|
+
children: content
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
MenuPortal.displayName = PORTAL_NAME;
|
|
160
|
+
const CONTENT_NAME = "MenuContent",
|
|
161
|
+
MenuContent = React.forwardRef((props, forwardedRef) => {
|
|
162
|
+
const {
|
|
163
|
+
scope,
|
|
164
|
+
...contentProps
|
|
165
|
+
} = props,
|
|
166
|
+
context = useMenuContext(scope),
|
|
167
|
+
hasInteractedOutsideRef = React.useRef(!1);
|
|
168
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Content, {
|
|
169
|
+
id: context.contentId,
|
|
170
|
+
"aria-labelledby": context.triggerId,
|
|
171
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
172
|
+
...contentProps,
|
|
173
|
+
ref: forwardedRef,
|
|
174
|
+
onCloseAutoFocus: (0, import_web.composeEventHandlers)(props.onCloseAutoFocus, event => {
|
|
175
|
+
hasInteractedOutsideRef.current || requestAnimationFrame(() => {
|
|
176
|
+
const activeEl = document.activeElement;
|
|
177
|
+
(!activeEl || activeEl === document.body) && context.triggerRef.current?.focus();
|
|
178
|
+
}), hasInteractedOutsideRef.current = !1, event.preventDefault();
|
|
179
|
+
}),
|
|
180
|
+
onInteractOutside: (0, import_web.composeEventHandlers)(props.onInteractOutside, event => {
|
|
181
|
+
const originalEvent = event.detail.originalEvent,
|
|
182
|
+
ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
|
|
183
|
+
isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
184
|
+
(!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
|
|
185
|
+
}),
|
|
186
|
+
style: import_web.isWeb ? {
|
|
187
|
+
...props.style,
|
|
188
|
+
"--tamagui-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
|
|
189
|
+
"--tamagui-menu-content-available-width": "var(--tamagui-popper-available-width)",
|
|
190
|
+
"--tamagui-menu-content-available-height": "var(--tamagui-popper-available-height)",
|
|
191
|
+
"--tamagui-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
|
|
192
|
+
"--tamagui-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
|
|
193
|
+
} : props.style
|
|
194
|
+
});
|
|
195
|
+
});
|
|
196
|
+
MenuContent.displayName = CONTENT_NAME;
|
|
197
|
+
const DROPDOWN_MENU_SUB_NAME = "MenuSub",
|
|
198
|
+
MenuSub = props => {
|
|
199
|
+
const {
|
|
200
|
+
scope,
|
|
201
|
+
children,
|
|
202
|
+
open: openProp,
|
|
203
|
+
onOpenChange,
|
|
204
|
+
defaultOpen,
|
|
205
|
+
...rest
|
|
206
|
+
} = props,
|
|
207
|
+
[open = !1, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
208
|
+
prop: openProp,
|
|
209
|
+
defaultProp: defaultOpen,
|
|
210
|
+
onChange: onOpenChange
|
|
211
|
+
});
|
|
212
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.Sub, {
|
|
213
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
214
|
+
open,
|
|
215
|
+
onOpenChange: setOpen,
|
|
216
|
+
...rest,
|
|
217
|
+
children
|
|
218
|
+
});
|
|
219
|
+
};
|
|
220
|
+
MenuSub.displayName = DROPDOWN_MENU_SUB_NAME;
|
|
221
|
+
const SUB_CONTENT_NAME = "MenuSubContent",
|
|
222
|
+
MenuSubContent = React.forwardRef((props, forwardedRef) => {
|
|
223
|
+
const {
|
|
224
|
+
scope,
|
|
225
|
+
...subContentProps
|
|
226
|
+
} = props;
|
|
227
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Menu.SubContent, {
|
|
228
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
229
|
+
...subContentProps,
|
|
230
|
+
ref: forwardedRef,
|
|
231
|
+
style: import_web.isWeb ? {
|
|
232
|
+
...props.style,
|
|
233
|
+
"--tamagui-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
|
|
234
|
+
"--tamagui-menu-content-available-width": "var(--tamagui-popper-available-width)",
|
|
235
|
+
"--tamagui-menu-content-available-height": "var(--tamagui-popper-available-height)",
|
|
236
|
+
"--tamagui-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
|
|
237
|
+
"--tamagui-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
|
|
238
|
+
} : null
|
|
239
|
+
});
|
|
240
|
+
});
|
|
241
|
+
MenuSubContent.displayName = SUB_CONTENT_NAME;
|
|
242
|
+
const MenuScrollView = (0, import_web.styled)(import_scroll_view.ScrollView, {
|
|
243
|
+
flexShrink: 1,
|
|
244
|
+
alignSelf: "stretch",
|
|
245
|
+
showsHorizontalScrollIndicator: !1,
|
|
246
|
+
showsVerticalScrollIndicator: !1,
|
|
247
|
+
"$platform-web": {
|
|
248
|
+
maxHeight: "var(--tamagui-menu-content-available-height)"
|
|
249
|
+
}
|
|
250
|
+
}),
|
|
251
|
+
Group = Menu.Group,
|
|
252
|
+
Label = Menu.Label,
|
|
253
|
+
Item = Menu.Item,
|
|
254
|
+
CheckboxItem = Menu.CheckboxItem,
|
|
255
|
+
RadioGroup = Menu.RadioGroup,
|
|
256
|
+
RadioItem = Menu.RadioItem,
|
|
257
|
+
ItemIndicator = Menu.ItemIndicator,
|
|
258
|
+
Separator = Menu.Separator,
|
|
259
|
+
Arrow = Menu.Arrow,
|
|
260
|
+
SubTrigger = Menu.SubTrigger,
|
|
261
|
+
ItemTitle = Menu.ItemTitle,
|
|
262
|
+
ItemSubtitle = Menu.ItemSubtitle,
|
|
263
|
+
ItemImage = Menu.ItemImage,
|
|
264
|
+
ItemIcon = Menu.ItemIcon;
|
|
265
|
+
return (0, import_web.withStaticProperties)(MenuComp, {
|
|
266
|
+
Root: MenuComp,
|
|
267
|
+
Trigger: MenuTrigger,
|
|
268
|
+
Portal: MenuPortal,
|
|
269
|
+
Content: MenuContent,
|
|
270
|
+
Group,
|
|
271
|
+
Label,
|
|
272
|
+
Item,
|
|
273
|
+
CheckboxItem,
|
|
274
|
+
RadioGroup,
|
|
275
|
+
RadioItem,
|
|
276
|
+
ItemIndicator,
|
|
277
|
+
Separator,
|
|
278
|
+
Arrow,
|
|
279
|
+
Sub: MenuSub,
|
|
280
|
+
SubTrigger,
|
|
281
|
+
SubContent: MenuSubContent,
|
|
282
|
+
ItemTitle,
|
|
283
|
+
ItemSubtitle,
|
|
284
|
+
ItemImage,
|
|
285
|
+
ItemIcon,
|
|
286
|
+
ScrollView: MenuScrollView
|
|
287
|
+
});
|
|
288
|
+
}
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
+
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from == "object" || typeof from == "function")
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
return to;
|
|
14
|
+
};
|
|
15
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
17
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
18
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
19
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
20
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
21
|
+
mod
|
|
22
|
+
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
|
+
var createNonNativeMenu_exports = {};
|
|
24
|
+
__export(createNonNativeMenu_exports, {
|
|
25
|
+
DROPDOWN_MENU_CONTEXT: () => DROPDOWN_MENU_CONTEXT,
|
|
26
|
+
createNonNativeMenu: () => createNonNativeMenu
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(createNonNativeMenu_exports);
|
|
29
|
+
var import_create_menu = require("@tamagui/create-menu"), import_scroll_view = require("@tamagui/scroll-view"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_web = require("@tamagui/web"), React = __toESM(require("react"), 1), import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
const DROPDOWN_MENU_CONTEXT = "MenuContext";
|
|
31
|
+
function createNonNativeMenu(params) {
|
|
32
|
+
const { Menu } = (0, import_create_menu.createBaseMenu)(params), DROPDOWN_MENU_NAME = "Menu", { Provider: MenuProvider, useStyledContext: useMenuContext } = (0, import_web.createStyledContext)(), MenuComp = (props) => {
|
|
33
|
+
const {
|
|
34
|
+
scope,
|
|
35
|
+
children,
|
|
36
|
+
dir,
|
|
37
|
+
open: openProp,
|
|
38
|
+
defaultOpen,
|
|
39
|
+
onOpenChange,
|
|
40
|
+
modal = !0,
|
|
41
|
+
...rest
|
|
42
|
+
} = props, triggerRef = React.useRef(null), [open = !1, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
43
|
+
prop: openProp,
|
|
44
|
+
defaultProp: defaultOpen,
|
|
45
|
+
onChange: onOpenChange
|
|
46
|
+
});
|
|
47
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
48
|
+
MenuProvider,
|
|
49
|
+
{
|
|
50
|
+
scope,
|
|
51
|
+
triggerId: (0, import_react.useId)(),
|
|
52
|
+
triggerRef,
|
|
53
|
+
contentId: (0, import_react.useId)(),
|
|
54
|
+
open,
|
|
55
|
+
onOpenChange: setOpen,
|
|
56
|
+
onOpenToggle: React.useCallback(
|
|
57
|
+
() => setOpen((prevOpen) => !prevOpen),
|
|
58
|
+
[setOpen]
|
|
59
|
+
),
|
|
60
|
+
modal,
|
|
61
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
|
+
Menu,
|
|
63
|
+
{
|
|
64
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
65
|
+
open,
|
|
66
|
+
onOpenChange: setOpen,
|
|
67
|
+
dir,
|
|
68
|
+
modal,
|
|
69
|
+
...rest,
|
|
70
|
+
children
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
MenuComp.displayName = DROPDOWN_MENU_NAME;
|
|
77
|
+
const TRIGGER_NAME = "MenuTrigger", MenuTriggerFrame = Menu.Anchor, MenuTrigger = import_web.View.styleable(
|
|
78
|
+
(props, forwardedRef) => {
|
|
79
|
+
const {
|
|
80
|
+
scope,
|
|
81
|
+
asChild,
|
|
82
|
+
children,
|
|
83
|
+
disabled = !1,
|
|
84
|
+
onKeydown,
|
|
85
|
+
...triggerProps
|
|
86
|
+
} = props, context = useMenuContext(scope), Comp = asChild ? import_web.Slot : import_web.View, isTouchDevice = (0, import_web.useIsTouchDevice)(), pressEvent = import_web.isWeb ? isTouchDevice ? "onClick" : "onPointerDown" : "onPress";
|
|
87
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
|
+
MenuTriggerFrame,
|
|
89
|
+
{
|
|
90
|
+
asChild: !0,
|
|
91
|
+
componentName: TRIGGER_NAME,
|
|
92
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
93
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
Comp,
|
|
95
|
+
{
|
|
96
|
+
role: "button",
|
|
97
|
+
id: context.triggerId,
|
|
98
|
+
"aria-haspopup": "menu",
|
|
99
|
+
"aria-expanded": context.open,
|
|
100
|
+
"aria-controls": context.open ? context.contentId : void 0,
|
|
101
|
+
"data-state": context.open ? "open" : "closed",
|
|
102
|
+
"data-disabled": disabled ? "" : void 0,
|
|
103
|
+
"aria-disabled": disabled || void 0,
|
|
104
|
+
ref: (0, import_web.composeRefs)(forwardedRef, context.triggerRef),
|
|
105
|
+
[pressEvent]: (0, import_web.composeEventHandlers)(
|
|
106
|
+
//@ts-ignore
|
|
107
|
+
props[pressEvent],
|
|
108
|
+
(event) => {
|
|
109
|
+
if (!disabled) {
|
|
110
|
+
if (import_web.isWeb && event instanceof PointerEvent && event.button !== 0 && event.ctrlKey === !0)
|
|
111
|
+
return;
|
|
112
|
+
context.onOpenToggle(), context.open || event.preventDefault();
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
...import_web.isWeb && {
|
|
117
|
+
onKeyDown: (0, import_web.composeEventHandlers)(onKeydown, (event) => {
|
|
118
|
+
disabled || (["Enter", " "].includes(event.key) && context.onOpenToggle(), event.key === "ArrowDown" && context.onOpenChange(!0), ["Enter", " ", "ArrowDown"].includes(event.key) && event.preventDefault());
|
|
119
|
+
})
|
|
120
|
+
},
|
|
121
|
+
...triggerProps,
|
|
122
|
+
children
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
MenuTrigger.displayName = TRIGGER_NAME;
|
|
130
|
+
const PORTAL_NAME = "MenuPortal", MenuPortal = (props) => {
|
|
131
|
+
const { scope, children, ...portalProps } = props, context = import_web.isAndroid ? useMenuContext(scope) : null, content = import_web.isAndroid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuProvider, { ...context, children }) : children;
|
|
132
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu.Portal, { scope: scope || DROPDOWN_MENU_CONTEXT, ...portalProps, children: content });
|
|
133
|
+
};
|
|
134
|
+
MenuPortal.displayName = PORTAL_NAME;
|
|
135
|
+
const CONTENT_NAME = "MenuContent", MenuContent = React.forwardRef(
|
|
136
|
+
(props, forwardedRef) => {
|
|
137
|
+
const { scope, ...contentProps } = props, context = useMenuContext(scope), hasInteractedOutsideRef = React.useRef(!1);
|
|
138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
139
|
+
Menu.Content,
|
|
140
|
+
{
|
|
141
|
+
id: context.contentId,
|
|
142
|
+
"aria-labelledby": context.triggerId,
|
|
143
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
144
|
+
...contentProps,
|
|
145
|
+
ref: forwardedRef,
|
|
146
|
+
onCloseAutoFocus: (0, import_web.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
147
|
+
hasInteractedOutsideRef.current || requestAnimationFrame(() => {
|
|
148
|
+
const activeEl = document.activeElement;
|
|
149
|
+
(!activeEl || activeEl === document.body) && context.triggerRef.current?.focus();
|
|
150
|
+
}), hasInteractedOutsideRef.current = !1, event.preventDefault();
|
|
151
|
+
}),
|
|
152
|
+
onInteractOutside: (0, import_web.composeEventHandlers)(props.onInteractOutside, (event) => {
|
|
153
|
+
const originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0, isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
154
|
+
(!context.modal || isRightClick) && (hasInteractedOutsideRef.current = !0);
|
|
155
|
+
}),
|
|
156
|
+
style: import_web.isWeb ? {
|
|
157
|
+
...props.style,
|
|
158
|
+
"--tamagui-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
|
|
159
|
+
"--tamagui-menu-content-available-width": "var(--tamagui-popper-available-width)",
|
|
160
|
+
"--tamagui-menu-content-available-height": "var(--tamagui-popper-available-height)",
|
|
161
|
+
"--tamagui-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
|
|
162
|
+
"--tamagui-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
|
|
163
|
+
} : props.style
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
MenuContent.displayName = CONTENT_NAME;
|
|
169
|
+
const DROPDOWN_MENU_SUB_NAME = "MenuSub", MenuSub = (props) => {
|
|
170
|
+
const { scope, children, open: openProp, onOpenChange, defaultOpen, ...rest } = props, [open = !1, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
171
|
+
prop: openProp,
|
|
172
|
+
defaultProp: defaultOpen,
|
|
173
|
+
onChange: onOpenChange
|
|
174
|
+
});
|
|
175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
176
|
+
Menu.Sub,
|
|
177
|
+
{
|
|
178
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
179
|
+
open,
|
|
180
|
+
onOpenChange: setOpen,
|
|
181
|
+
...rest,
|
|
182
|
+
children
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
};
|
|
186
|
+
MenuSub.displayName = DROPDOWN_MENU_SUB_NAME;
|
|
187
|
+
const SUB_CONTENT_NAME = "MenuSubContent", MenuSubContent = React.forwardRef((props, forwardedRef) => {
|
|
188
|
+
const { scope, ...subContentProps } = props;
|
|
189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
190
|
+
Menu.SubContent,
|
|
191
|
+
{
|
|
192
|
+
scope: scope || DROPDOWN_MENU_CONTEXT,
|
|
193
|
+
...subContentProps,
|
|
194
|
+
ref: forwardedRef,
|
|
195
|
+
style: import_web.isWeb ? {
|
|
196
|
+
...props.style,
|
|
197
|
+
"--tamagui-menu-content-transform-origin": "var(--tamagui-popper-transform-origin)",
|
|
198
|
+
"--tamagui-menu-content-available-width": "var(--tamagui-popper-available-width)",
|
|
199
|
+
"--tamagui-menu-content-available-height": "var(--tamagui-popper-available-height)",
|
|
200
|
+
"--tamagui-menu-trigger-width": "var(--tamagui-popper-anchor-width)",
|
|
201
|
+
"--tamagui-menu-trigger-height": "var(--tamagui-popper-anchor-height)"
|
|
202
|
+
} : null
|
|
203
|
+
}
|
|
204
|
+
);
|
|
205
|
+
});
|
|
206
|
+
MenuSubContent.displayName = SUB_CONTENT_NAME;
|
|
207
|
+
const MenuScrollView = (0, import_web.styled)(import_scroll_view.ScrollView, {
|
|
208
|
+
flexShrink: 1,
|
|
209
|
+
alignSelf: "stretch",
|
|
210
|
+
showsHorizontalScrollIndicator: !1,
|
|
211
|
+
showsVerticalScrollIndicator: !1,
|
|
212
|
+
"$platform-web": {
|
|
213
|
+
maxHeight: "var(--tamagui-menu-content-available-height)"
|
|
214
|
+
}
|
|
215
|
+
}), Group = Menu.Group, Label = Menu.Label, Item = Menu.Item, CheckboxItem = Menu.CheckboxItem, RadioGroup = Menu.RadioGroup, RadioItem = Menu.RadioItem, ItemIndicator = Menu.ItemIndicator, Separator = Menu.Separator, Arrow = Menu.Arrow, SubTrigger = Menu.SubTrigger, ItemTitle = Menu.ItemTitle, ItemSubtitle = Menu.ItemSubtitle, ItemImage = Menu.ItemImage, ItemIcon = Menu.ItemIcon;
|
|
216
|
+
return (0, import_web.withStaticProperties)(MenuComp, {
|
|
217
|
+
Root: MenuComp,
|
|
218
|
+
Trigger: MenuTrigger,
|
|
219
|
+
Portal: MenuPortal,
|
|
220
|
+
Content: MenuContent,
|
|
221
|
+
Group,
|
|
222
|
+
Label,
|
|
223
|
+
Item,
|
|
224
|
+
CheckboxItem,
|
|
225
|
+
RadioGroup,
|
|
226
|
+
RadioItem,
|
|
227
|
+
ItemIndicator,
|
|
228
|
+
Separator,
|
|
229
|
+
Arrow,
|
|
230
|
+
Sub: MenuSub,
|
|
231
|
+
SubTrigger,
|
|
232
|
+
SubContent: MenuSubContent,
|
|
233
|
+
ItemTitle,
|
|
234
|
+
ItemSubtitle,
|
|
235
|
+
ItemImage,
|
|
236
|
+
ItemIcon,
|
|
237
|
+
ScrollView: MenuScrollView
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
//# sourceMappingURL=createNonNativeMenu.js.map
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/createNonNativeMenu.tsx"],
|
|
4
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAgBO,iCACP,qBAAiD,iCACjD,gCAAqC,4CACrC,aAaO,yBACP,QAAuB,8BACvB,eAAsB,kBAqKd;AAjKD,MAAM,wBAAwB;AAqH9B,SAAS,oBAAoB,QAA6B;AAC/D,QAAM,EAAE,KAAK,QAAI,mCAAe,MAAM,GAMhC,qBAAqB,QAErB,EAAE,UAAU,cAAc,kBAAkB,eAAe,QAC/D,gCAAsC,GAElC,WAAW,CAAC,UAAkC;AAClD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,GAAG;AAAA,IACL,IAAI,OACE,aAAa,MAAM,OAAuB,IAAI,GAC9C,CAAC,OAAO,IAAO,OAAO,QAAI,oDAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,oBAAM;AAAA,QACjB;AAAA,QACA,eAAW,oBAAM;AAAA,QACjB;AAAA,QACA,cAAc;AAAA,QACd,cAAc,MAAM;AAAA,UAClB,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,UACrC,CAAC,OAAO;AAAA,QACV;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,SAAS;AAAA,YAChB;AAAA,YACA,cAAc;AAAA,YACd;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,WAAS,cAAc;AAMvB,QAAM,eAAe,eAEf,mBAAmB,KAAK,QAExB,cAAc,gBAAK;AAAA,IACvB,CAAC,OAAO,iBAAiB;AACvB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,GAAG;AAAA,MACL,IAAI,OACE,UAAU,eAAe,KAAK,GAC9B,OAAO,UAAU,kBAAO,iBACxB,oBAAgB,6BAAiB,GAIjC,aAAa,mBAAS,gBAAgB,YAAY,kBAAmB;AAE3E,aACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO,SAAS;AAAA,UAEhB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI,QAAQ;AAAA,cACZ,iBAAc;AAAA,cACd,iBAAe,QAAQ;AAAA,cACvB,iBAAe,QAAQ,OAAO,QAAQ,YAAY;AAAA,cAClD,cAAY,QAAQ,OAAO,SAAS;AAAA,cACpC,iBAAe,WAAW,KAAK;AAAA,cAC/B,iBAAe,YAAY;AAAA,cAC3B,SAAK,wBAAY,cAAc,QAAQ,UAAU;AAAA,cAE/C,CAAC,UAAU,OAAG;AAAA;AAAA,gBAEZ,MAAM,UAAU;AAAA,gBAChB,CAAC,UAAU;AAGT,sBAAI,CAAC,UAAU;AACb,wBACE,oBACA,iBAAiB,gBACjB,MAAM,WAAW,KACjB,MAAM,YAAY;AAElB;AACF,4BAAQ,aAAa,GAGhB,QAAQ,QAAM,MAAM,eAAe;AAAA,kBAC1C;AAAA,gBACF;AAAA,cACF;AAAA,cAED,GAAI,oBAAS;AAAA,gBACZ,eAAW,iCAAqB,WAAW,CAAC,UAAU;AACpD,kBAAI,aACA,CAAC,SAAS,GAAG,EAAE,SAAS,MAAM,GAAG,KAAG,QAAQ,aAAa,GACzD,MAAM,QAAQ,eAAa,QAAQ,aAAa,EAAI,GAGpD,CAAC,SAAS,KAAK,WAAW,EAAE,SAAS,MAAM,GAAG,KAChD,MAAM,eAAe;AAAA,gBACzB,CAAC;AAAA,cACH;AAAA,cACC,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA,IAEJ;AAAA,EACF;AAEA,cAAY,cAAc;AAM1B,QAAM,cAAc,cAEd,aAAa,CAAC,UAAwC;AAC1D,UAAM,EAAE,OAAO,UAAU,GAAG,YAAY,IAAI,OAEtC,UAAU,uBAAY,eAAe,KAAK,IAAI,MAE9C,UAAU,uBACd,4CAAC,gBAAc,GAAG,SAAU,UAAS,IAErC;AAEF,WACE,4CAAC,KAAK,QAAL,EAAY,OAAO,SAAS,uBAAwB,GAAG,aACrD,mBACH;AAAA,EAEJ;AAEA,aAAW,cAAc;AAMzB,QAAM,eAAe,eAEf,cAAc,MAAM;AAAA,IACxB,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,OAAO,GAAG,aAAa,IAAI,OAC7B,UAAU,eAAe,KAAK,GAC9B,0BAA0B,MAAM,OAAO,EAAK;AAElD,aACE;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,IAAI,QAAQ;AAAA,UACZ,mBAAiB,QAAQ;AAAA,UACzB,OAAO,SAAS;AAAA,UACf,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,sBAAkB,iCAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,YAAK,wBAAwB,WAE3B,sBAAsB,MAAM;AAC1B,oBAAM,WAAW,SAAS;AAC1B,eAAI,CAAC,YAAY,aAAa,SAAS,SACrC,QAAQ,WAAW,SAAS,MAAM;AAAA,YAEtC,CAAC,GAEH,wBAAwB,UAAU,IAElC,MAAM,eAAe;AAAA,UACvB,CAAC;AAAA,UACD,uBAAmB,iCAAqB,MAAM,mBAAmB,CAAC,UAAU;AAC1E,kBAAM,gBAAgB,MAAM,OAAO,eAC7B,gBACJ,cAAc,WAAW,KAAK,cAAc,YAAY,IACpD,eAAe,cAAc,WAAW,KAAK;AACnD,aAAI,CAAC,QAAQ,SAAS,kBAAc,wBAAwB,UAAU;AAAA,UACxE,CAAC;AAAA,UACD,OACE,mBACI;AAAA,YACE,GAAI,MAAM;AAAA,YAER,2CACE;AAAA,YACF,0CACE;AAAA,YACF,2CACE;AAAA,YACF,gCAAgC;AAAA,YAChC,iCACE;AAAA,UAEN,IACA,MAAM;AAAA;AAAA,MAEd;AAAA,IAEJ;AAAA,EACF;AAEA,cAAY,cAAc;AAM1B,QAAM,yBAAyB,WAEzB,UAAU,CAAC,UAAqC;AACpD,UAAM,EAAE,OAAO,UAAU,MAAM,UAAU,cAAc,aAAa,GAAG,KAAK,IAAI,OAC1E,CAAC,OAAO,IAAO,OAAO,QAAI,oDAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,OAAO,SAAS;AAAA,QAChB;AAAA,QACA,cAAc;AAAA,QACb,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,UAAQ,cAAc;AAMtB,QAAM,mBAAmB,kBAEnB,iBAAiB,MAAM,WAG3B,CAAC,OAAO,iBAAiB;AACzB,UAAM,EAAE,OAAO,GAAG,gBAAgB,IAAI;AAEtC,WACE;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,OAAO,SAAS;AAAA,QACf,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,OACE,mBACI;AAAA,UACE,GAAI,MAAM;AAAA,UAER,2CACE;AAAA,UACF,0CACE;AAAA,UACF,2CACE;AAAA,UACF,gCAAgC;AAAA,UAChC,iCAAiC;AAAA,QAErC,IACA;AAAA;AAAA,IAER;AAAA,EAEJ,CAAC;AAED,iBAAe,cAAc;AAM7B,QAAM,qBAAiB,mBAAO,+BAAY;AAAA,IACxC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,gCAAgC;AAAA,IAChC,8BAA8B;AAAA,IAE9B,iBAAiB;AAAA,MACf,WAAW;AAAA,IACb;AAAA,EACF,CAAC,GAKK,QAAQ,KAAK,OACb,QAAQ,KAAK,OACb,OAAO,KAAK,MACZ,eAAe,KAAK,cACpB,aAAa,KAAK,YAClB,YAAY,KAAK,WACjB,gBAAgB,KAAK,eACrB,YAAY,KAAK,WACjB,QAAQ,KAAK,OACb,aAAa,KAAK,YAClB,YAAY,KAAK,WACjB,eAAe,KAAK,cACpB,YAAY,KAAK,WACjB,WAAW,KAAK;AAEtB,aAAO,iCAAqB,UAAU;AAAA,IACpC,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,CAAC;AACH;",
|
|
5
|
+
"names": []
|
|
6
|
+
}
|