@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/menu.jsx

@@ -1,17 +1,70 @@
-import { t as createPress } from "./createPress.jsx";
-import { i as mergeProps$1, t as isDevEnv } from "./env.jsx";
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useContextMenu.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/menu/useMenu.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/menu/useMenuItem.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/menu/useMenuTrigger.ts
+import { i as attrTrue, t as mergeProps } from "./mergeProps.jsx";
+import { t as onOwnedCleanup } from "./owner.jsx";
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
 import { t as access } from "./reactivity.jsx";
-import { p as isVirtualClick } from "./utils.jsx";
-import { a as getEventTarget } from "./focus.jsx";
+import { D as runAfterPaint, J as isIOS, T as focusWithoutScrolling, V as isVirtualClick, Z as isMac, r as getEventTarget, w as focusSafely } from "./dom.jsx";
+import { t as isDevEnv } from "./env.jsx";
+import { t as createPress } from "./createPress.jsx";
+import { t as createLongPress } from "./createLongPress.jsx";
 import { t as createFocusWithin } from "./createFocusWithin.jsx";
+import { t as createKeyboard } from "./createKeyboard.jsx";
 import { t as createFocusRing } from "./createFocusRing.jsx";
 import { t as createHover } from "./createHover.jsx";
+import { n as createStringFormatter } from "./createStringFormatter.jsx";
 import { createId, createSlotId } from "../ssr/index.jsx";
 import { t as createLabel } from "./createLabel.jsx";
-import { t as createTypeSelect } from "./createTypeSelect.jsx";
+import { n as onCloseMap } from "./createOverlayTrigger.jsx";
 import { n as createSelectableItem, r as selectItem } from "./createSelectableItem.jsx";
-import { createEffect, onCleanup } from "solid-js";
+import { t as createTypeSelect } from "./createTypeSelect.jsx";
+import { createTrackedEffect } from "solid-js";
 //#region src/menu/createMenu.ts
 /**
 * Provides the behavior and accessibility implementation for a menu component.
@@ -63,11 +116,15 @@ function createMenu(props, state, ref) {
 		});
 	};
 	updateSharedData();
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		updateSharedData();
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			menuData.delete(state);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const { focusWithinProps } = createFocusWithin({
 		onFocusWithin: (e) => getProps().onFocus?.(e),
@@ -101,11 +158,45 @@ function createMenu(props, state, ref) {
 			return getProps().disallowTypeAhead ?? false;
 		}
 	});
+	const isNavDisabled = (key) => state.isDisabled(key) && state.disabledBehavior() === "all";
+	let autoFocusDone = false;
+	let cancelAutoFocus;
+	createTrackedEffect(() => {
+		const autoFocus = getProps().autoFocus ?? false;
+		if (autoFocusDone || autoFocus === false) return;
+		const collection = state.collection();
+		if (collection.size === 0) return;
+		let focusedKey = null;
+		if (autoFocus === "first") focusedKey = findNextNonDisabledKey(collection, null, "next", isNavDisabled, false);
+		else if (autoFocus === "last") focusedKey = findNextNonDisabledKey(collection, null, "prev", isNavDisabled, false);
+		const selectedKeys = state.selectionManager.rawSelection;
+		if (selectedKeys !== "all" && selectedKeys.size) {
+			for (const key of selectedKeys) if (state.selectionManager.canSelectItem(key)) {
+				focusedKey = key;
+				break;
+			}
+		}
+		const root = ref?.();
+		if (focusedKey == null && !root) return;
+		autoFocusDone = true;
+		cancelAutoFocus = runAfterPaint(() => {
+			cancelAutoFocus = void 0;
+			state.setFocused(true);
+			state.setFocusedKey(focusedKey);
+			if (focusedKey == null) {
+				const el = ref?.();
+				if (el) focusSafely(el, { focusVisible: true });
+			}
+		});
+	});
+	onOwnedCleanup(() => {
+		cancelAutoFocus?.();
+	});
 	const onKeyDown = (e) => {
 		if (getProps().isDisabled) return;
 		const collection = state.collection();
 		const p = getProps();
-		const wrap = p.shouldFocusWrap ?? false;
+		const wrap = p.shouldFocusWrap ?? true;
 		const isDisabled = (key) => state.isDisabled(key) && state.disabledBehavior() === "all";
 		switch (e.key) {
 			case "ArrowDown": {
@@ -241,7 +332,7 @@ function createMenu(props, state, ref) {
 		},
 		get menuProps() {
 			const p = getProps();
-			const baseProps = mergeProps$1(domProps(), focusWithinProps, fieldProps, {
+			const baseProps = mergeProps(domProps(), focusWithinProps, fieldProps, {
 				role: "menu",
 				get tabIndex() {
 					return getProps().isDisabled ? void 0 : state.focusedKey() == null ? 0 : -1;
@@ -249,7 +340,7 @@ function createMenu(props, state, ref) {
 				"aria-disabled": p.isDisabled || void 0,
 				onKeyDown
 			});
-			if (!p.disallowTypeAhead) return mergeProps$1(baseProps, typeSelectProps);
+			if (!p.disallowTypeAhead) return mergeProps(baseProps, typeSelectProps);
 			return baseProps;
 		}
 	};
@@ -362,20 +453,21 @@ function createMenuItem(props, state, ref) {
 	const selectableItemProps = () => {
 		const props = selectableItem.itemProps;
 		const onClick = props.onClick;
+		const interceptSyntheticClick = (event, fallbackHandler) => {
+			if (isDispatchingMenuSyntheticClick && isVirtualClick(event)) {
+				if (pendingSyntheticClickSelectionEvent != null) {
+					state.selectionManager.emitDuplicateSelectionEvent(pendingSyntheticClickSelectionEvent);
+					pendingSyntheticClickSelectionEvent = null;
+				}
+				return;
+			}
+			if (typeof fallbackHandler === "function") fallbackHandler(event);
+		};
 		return {
 			...props,
 			onPointerUp: withMenuPressUpSelectionSnapshot(props.onPointerUp),
 			onMouseUp: withMenuPressUpSelectionSnapshot(props.onMouseUp),
-			onClick: typeof onClick === "function" ? (event) => {
-				if (isDispatchingMenuSyntheticClick && isVirtualClick(event)) {
-					if (pendingSyntheticClickSelectionEvent != null) {
-						state.selectionManager.emitDuplicateSelectionEvent(pendingSyntheticClickSelectionEvent);
-						pendingSyntheticClickSelectionEvent = null;
-					}
-					return;
-				}
-				onClick(event);
-			} : onClick
+			onClick: typeof onClick === "function" ? (event) => interceptSyntheticClick(event, onClick) : onClick
 		};
 	};
 	const menuPressProps = () => {
@@ -431,18 +523,18 @@ function createMenuItem(props, state, ref) {
 				role: trigger ? "menuitem" : mode === "single" ? "menuitemradio" : mode === "multiple" ? "menuitemcheckbox" : "menuitem",
 				id: p.id ?? String(key),
 				"aria-disabled": isDisabled() || void 0,
-				"aria-checked": mode !== "none" && !trigger ? selected : void 0,
+				"aria-checked": mode !== "none" && !trigger ? selected ? "true" : "false" : void 0,
 				"aria-label": ariaLabel,
 				"aria-labelledby": !ariaLabel ? labelId : void 0,
 				"aria-describedby": [descriptionId(), keyboardId()].filter(Boolean).join(" ") || void 0,
 				"aria-controls": p["aria-controls"],
 				"aria-haspopup": p["aria-haspopup"],
 				"aria-expanded": p["aria-expanded"],
-				"data-selected": selected || void 0,
-				"data-focused": isFocused() || void 0,
-				"data-focus-visible": isFocusVisible() || void 0,
-				"data-pressed": isPressed() || void 0,
-				"data-disabled": isDisabled() || void 0
+				"data-selected": selected ? "true" : void 0,
+				"data-focused": isFocused() ? "true" : void 0,
+				"data-focus-visible": isFocusVisible() ? "true" : void 0,
+				"data-pressed": isPressed() ? "true" : void 0,
+				"data-disabled": isDisabled() ? "true" : void 0
 			};
 			if (isLink()) {
 				baseProps.href = isDisabled() ? void 0 : p.href;
@@ -450,7 +542,7 @@ function createMenuItem(props, state, ref) {
 				if (p.rel) baseProps.rel = p.rel;
 				if (p.download != null && p.download !== false) baseProps.download = p.download === true ? "" : p.download;
 			}
-			return mergeProps$1(selectableItemProps(), menuPressProps(), hoverProps, focusProps, keyboardProps, { onClick: performMenuAction }, baseProps);
+			return mergeProps(selectableItemProps(), menuPressProps(), hoverProps, focusProps, keyboardProps, { onClick: performMenuAction }, baseProps);
 		},
 		labelProps: { id: labelId },
 		get descriptionProps() {
@@ -459,7 +551,7 @@ function createMenuItem(props, state, ref) {
 		get keyboardShortcutProps() {
 			return {
 				id: keyboardId(),
-				"aria-hidden": true
+				"aria-hidden": "true"
 			};
 		},
 		isFocused,
@@ -471,46 +563,195 @@ function createMenuItem(props, state, ref) {
 	};
 }
 //#endregion
+//#region src/interactions/createContextMenu.ts
+/** Handles native and emulated context-menu requests. */
+function createContextMenu(props) {
+	let firedContextMenuEvent = false;
+	const { longPressProps } = createLongPress({
+		onLongPressStart() {
+			firedContextMenuEvent = false;
+		},
+		onLongPress(event) {
+			if (!firedContextMenuEvent) props.onContextMenu?.({
+				target: event.target,
+				x: event.x,
+				y: event.y
+			});
+			else firedContextMenuEvent = false;
+		}
+	});
+	if (!props.onContextMenu) return { contextMenuProps: {} };
+	return { contextMenuProps: mergeProps(isIOS() ? longPressProps : {}, {
+		onContextMenu(event) {
+			event.stopPropagation();
+			event.preventDefault();
+			firedContextMenuEvent = true;
+			const rect = event.currentTarget.getBoundingClientRect();
+			props.onContextMenu?.({
+				target: event.currentTarget,
+				x: event.clientX - rect.x,
+				y: event.clientY - rect.y
+			});
+		},
+		onKeyDown(event) {
+			if (!isMac() || !event.ctrlKey || event.key !== "Enter") return;
+			firedContextMenuEvent = false;
+			const target = event.currentTarget;
+			event.stopPropagation();
+			setTimeout(() => {
+				if (!firedContextMenuEvent) {
+					const rect = target.getBoundingClientRect();
+					props.onContextMenu?.({
+						target,
+						x: rect.width / 2,
+						y: rect.height / 2
+					});
+				} else firedContextMenuEvent = false;
+			}, 10);
+		}
+	}) };
+}
+//#endregion
+//#region src/menu/intl/index.ts
+const menuIntlStrings = {
+	"ar-AE": { longPressMessage: "اضغط مطولاً أو اضغط على Alt + السهم لأسفل لفتح القائمة" },
+	"bg-BG": { longPressMessage: "Натиснете продължително или натиснете Alt+ стрелка надолу, за да отворите менюто" },
+	"cs-CZ": { longPressMessage: "Dlouhým stiskem nebo stisknutím kláves Alt + šipka dolů otevřete nabídku" },
+	"da-DK": { longPressMessage: "Langt tryk eller tryk på Alt + pil ned for at åbne menuen" },
+	"de-DE": { longPressMessage: "Drücken Sie lange oder drücken Sie Alt + Nach-unten, um das Menü zu öffnen" },
+	"el-GR": { longPressMessage: "Πιέστε παρατεταμένα ή πατήστε Alt + κάτω βέλος για να ανοίξετε το μενού" },
+	"en-US": { longPressMessage: "Long press or press Alt + ArrowDown to open menu" },
+	"es-ES": { longPressMessage: "Mantenga pulsado o pulse Alt + flecha abajo para abrir el menú" },
+	"et-EE": { longPressMessage: "Menüü avamiseks vajutage pikalt või vajutage klahve Alt + allanool" },
+	"fi-FI": { longPressMessage: "Avaa valikko painamalla pohjassa tai näppäinyhdistelmällä Alt + Alanuoli" },
+	"fr-FR": { longPressMessage: "Appuyez de manière prolongée ou appuyez sur Alt\xA0+\xA0Flèche vers le bas pour ouvrir le menu." },
+	"he-IL": { longPressMessage: "לחץ לחיצה ארוכה או הקש Alt + ArrowDown כדי לפתוח את התפריט" },
+	"hr-HR": { longPressMessage: "Dugo pritisnite ili pritisnite Alt + strelicu prema dolje za otvaranje izbornika" },
+	"hu-HU": { longPressMessage: "Nyomja meg hosszan, vagy nyomja meg az Alt + lefele nyíl gombot a menü megnyitásához" },
+	"it-IT": { longPressMessage: "Premi a lungo o premi Alt + Freccia giù per aprire il menu" },
+	"ja-JP": { longPressMessage: "長押しまたは Alt+下矢印キーでメニューを開く" },
+	"ko-KR": { longPressMessage: "길게 누르거나 Alt + 아래쪽 화살표를 눌러 메뉴 열기" },
+	"lt-LT": { longPressMessage: "Norėdami atidaryti meniu, nuspaudę palaikykite arba paspauskite „Alt + ArrowDown“." },
+	"lv-LV": { longPressMessage: "Lai atvērtu izvēlni, turiet nospiestu vai nospiediet taustiņu kombināciju Alt + lejupvērstā bultiņa" },
+	"nb-NO": { longPressMessage: "Langt trykk eller trykk Alt + PilNed for å åpne menyen" },
+	"nl-NL": { longPressMessage: "Druk lang op Alt + pijl-omlaag of druk op Alt om het menu te openen" },
+	"pl-PL": { longPressMessage: "Naciśnij i przytrzymaj lub naciśnij klawisze Alt + Strzałka w dół, aby otworzyć menu" },
+	"pt-BR": { longPressMessage: "Pressione e segure ou pressione Alt + Seta para baixo para abrir o menu" },
+	"pt-PT": { longPressMessage: "Prima continuamente ou prima Alt + Seta Para Baixo para abrir o menu" },
+	"ro-RO": { longPressMessage: "Apăsați lung sau apăsați pe Alt + săgeată în jos pentru a deschide meniul" },
+	"ru-RU": { longPressMessage: "Нажмите и удерживайте или нажмите Alt + Стрелка вниз, чтобы открыть меню" },
+	"sk-SK": { longPressMessage: "Ponuku otvoríte dlhým stlačením alebo stlačením klávesu Alt + klávesu so šípkou nadol" },
+	"sl-SI": { longPressMessage: "Za odprtje menija pritisnite in držite gumb ali pritisnite Alt+puščica navzdol" },
+	"sr-SP": { longPressMessage: "Dugo pritisnite ili pritisnite Alt + strelicu prema dole da otvorite meni" },
+	"sv-SE": { longPressMessage: "Håll nedtryckt eller tryck på Alt + pil nedåt för att öppna menyn" },
+	"tr-TR": { longPressMessage: "Menüyü açmak için uzun basın veya Alt + Aşağı Ok tuşuna basın" },
+	"uk-UA": { longPressMessage: "Довго або звичайно натисніть комбінацію клавіш Alt і стрілка вниз, щоб відкрити меню" },
+	"zh-CN": { longPressMessage: "长按或按 Alt + 向下方向键以打开菜单" },
+	"zh-TW": { longPressMessage: "長按或按 Alt+向下鍵以開啟功能表" }
+};
+//#endregion
 //#region src/menu/createMenuTrigger.ts
 /**
-* Provides the behavior and accessibility implementation for a menu trigger.
+* Provides behavior and accessibility for a menu trigger.
+* Based on @react-aria/menu useMenuTrigger.
 */
-function createMenuTrigger(props, state) {
+/** Provides behavior and accessibility for a menu trigger. */
+function createMenuTrigger(props, state, ref) {
 	const getProps = () => access(props);
 	const menuId = createId(getProps().id);
-	const onPress = () => {
-		if (!getProps().isDisabled) state.toggle();
+	const triggerId = createId();
+	const stringFormatter = createStringFormatter(menuIntlStrings, "@react-aria/menu");
+	const open = (shouldOpen, event, focusStrategy = "first") => {
+		if (!shouldOpen || event.defaultPrevented || getProps().isDisabled) return false;
+		state.toggle(focusStrategy);
+		return true;
 	};
-	const onKeyDown = (e) => {
-		if (getProps().isDisabled) return;
-		switch (e.key) {
-			case "Enter":
-			case " ":
-			case "ArrowDown":
-				e.preventDefault();
-				if (!state.isOpen()) state.open();
-				break;
-			case "ArrowUp":
-				e.preventDefault();
-				if (!state.isOpen()) state.open();
-				break;
+	const { keyboardProps } = createKeyboard({ shortcuts: {
+		Enter: (event) => open(getProps().trigger !== "longPress", event, "first"),
+		" ": (event) => open(getProps().trigger !== "longPress", event, "first"),
+		ArrowDown: (event) => open(getProps().trigger !== "longPress", event, "first"),
+		ArrowUp: (event) => open(getProps().trigger !== "longPress", event, "last"),
+		"Alt+Enter": (event) => open(getProps().trigger === "longPress", event, "first"),
+		"Alt+ ": (event) => open(getProps().trigger === "longPress", event, "first"),
+		"Alt+ArrowDown": (event) => open(true, event, "first"),
+		"Alt+ArrowUp": (event) => open(true, event, "last")
+	} });
+	const { longPressProps } = createLongPress({
+		isDisabled: () => Boolean(getProps().isDisabled || getProps().trigger !== "longPress"),
+		accessibilityDescription: () => stringFormatter().format("longPressMessage"),
+		onLongPressStart() {
+			state.close();
+		},
+		onLongPress() {
+			state.open("first");
+		}
+	});
+	const pressProps = {
+		preventFocusOnPress: true,
+		onPressStart(event) {
+			if (event.pointerType !== "touch" && event.pointerType !== "keyboard" && !getProps().isDisabled) {
+				focusWithoutScrolling(event.target);
+				state.open(event.pointerType === "virtual" ? "first" : null);
+			}
+		},
+		onPress(event) {
+			if (event.pointerType === "touch" && !getProps().isDisabled) {
+				focusWithoutScrolling(event.target);
+				state.toggle();
+			}
 		}
 	};
+	const { contextMenuProps } = createContextMenu({ onContextMenu(event) {
+		const rect = event.target.getBoundingClientRect();
+		state.setPoint({
+			x: rect.x + event.x,
+			y: rect.y + event.y
+		});
+		state.open();
+	} });
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
+		if (!state.isOpen() || getProps().trigger !== "contextMenu" || typeof document === "undefined") return;
+		const onMouseDown = (event) => {
+			if ((event.button === 2 || event.button === 0 && event.ctrlKey) && getEventTarget(event) === document.body) state.close();
+		};
+		document.addEventListener("mousedown", onMouseDown);
+		_s2Cleanups.push(() => document.removeEventListener("mousedown", onMouseDown));
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
+	});
+	createTrackedEffect(() => {
+		const element = ref?.();
+		if (element) onCloseMap.set(element, state.close);
+	});
 	return {
 		get menuTriggerProps() {
-			const p = getProps();
-			const type = p.type ?? "menu";
-			const isOpen = state.isOpen();
-			return {
-				"aria-haspopup": type,
-				"aria-expanded": isOpen,
-				"aria-controls": isOpen ? menuId : void 0,
-				"aria-disabled": p.isDisabled || void 0,
-				onPress,
-				onKeyDown
+			const type = getProps().type ?? "menu";
+			const trigger = getProps().trigger ?? "press";
+			const baseProps = {
+				"aria-haspopup": type === "menu" ? "menu" : "listbox",
+				"aria-expanded": state.isOpen() ? "true" : "false",
+				"aria-controls": state.isOpen() ? menuId : void 0,
+				"aria-disabled": attrTrue(getProps().isDisabled),
+				id: triggerId
 			};
+			if (trigger === "contextMenu") return mergeProps({
+				...baseProps,
+				"aria-haspopup": void 0,
+				"aria-expanded": void 0,
+				"aria-controls": void 0
+			}, contextMenuProps);
+			return mergeProps(baseProps, trigger === "longPress" ? longPressProps : pressProps, keyboardProps);
 		},
-		menuProps: { id: menuId }
+		get menuProps() {
+			return {
+				id: menuId,
+				"aria-labelledby": triggerId,
+				autoFocus: state.focusStrategy() || true,
+				onClose: state.close
+			};
+		}
 	};
 }
 //#endregion