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

package/dist/_chunk/combobox.js

@@ -1,18 +1,35 @@
-import { t as createPress } from "./createPress.js";
-import { i as mergeProps$1, t as isDevEnv } from "./env.js";
+/*
+* 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/combobox/useComboBox.ts
+import { r as attrString, t as mergeProps } from "./mergeProps.js";
+import { y as bindCapture } from "./utils.js";
 import { t as filterDOMProps } from "./filterDOMProps.js";
 import { t as access } from "./reactivity.js";
-import { w as isAppleDevice } from "./utils.js";
-import { b as openLink } from "./focus.js";
+import { G as isAppleDevice, a as getOwnerDocument, n as getActiveElement, v as nodeContains, y as openLink } from "./dom.js";
+import { t as isDevEnv } from "./env.js";
+import { t as createPress } from "./createPress.js";
 import { t as createFocusRing } from "./createFocusRing.js";
 import { n as createStringFormatter } from "./createStringFormatter.js";
-import { createId } from "../ssr/index.js";
+import { createId as createId$1 } from "../ssr/index.js";
+import { t as createFormValidation } from "./createFormValidation.js";
+import { t as createFormReset } from "./createFormReset.js";
 import { t as createLabels } from "./createLabels.js";
-import { t as createLabel } from "./createLabel.js";
-import { t as ariaHideOutside } from "./ariaHideOutside.js";
+import { t as createField } from "./createField.js";
 import { t as announce } from "./announce.js";
-import { createEffect, onCleanup } from "solid-js";
-import { isServer } from "solid-js/web";
+import { t as ariaHideOutside } from "./ariaHideOutside.js";
+import { n as dispatchVirtualFocus } from "./virtualFocus.js";
+import { createEffect, createTrackedEffect, untrack } from "solid-js";
+import { isServer } from "@solidjs/web";
+import { createFormValidationState } from "@proyecto-viviana/solid-stately";
 //#endregion
 //#region src/combobox/intl/index.ts
 const comboBoxIntlStrings = {
@@ -649,7 +666,7 @@ const comboBoxIntlStrings = {
 /**
 * Helper to count items in a collection
 */
-function getItemCount(collection) {
+function getItemCount$1(collection) {
 	let count = 0;
 	for (const _ of collection.getKeys()) count++;
 	return count;
@@ -661,63 +678,103 @@ function getComboBoxData(state) {
 /**
 * Provides the behavior and accessibility implementation for a combobox component.
 */
-function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
+function createComboBox(props, state, inputRef, buttonRef, listBoxRef, popoverRef) {
 	const getProps = () => access(props);
-	const id = createId(getProps().id);
+	const id = createId$1(getProps().id);
 	if (isDevEnv()) {
 		const p = getProps();
 		if (!p.label && !p["aria-label"] && !p["aria-labelledby"]) console.warn("[solidaria] A ComboBox requires a label, aria-label, or aria-labelledby attribute for accessibility.");
 	}
 	let isPointerDownInsideListBox = false;
+	bindCapture(() => listBoxRef?.() ?? null, {
+		pointerdown: () => {
+			isPointerDownInsideListBox = true;
+		},
+		mousedown: () => {
+			isPointerDownInsideListBox = true;
+		}
+	});
 	const inputId = `${id}-input`;
 	const buttonId = `${id}-button`;
 	const listBoxId = `${id}-listbox`;
-	const descriptionId = `${id}-description`;
-	const errorMessageId = `${id}-error`;
-	const getAriaDescribedBy = () => {
-		const p = getProps();
-		const ids = [];
-		if (p["aria-describedby"]) ids.push(p["aria-describedby"]);
-		if (p.description) ids.push(descriptionId);
-		if (p.isInvalid && p.errorMessage) ids.push(errorMessageId);
-		return ids.length > 0 ? ids.join(" ") : void 0;
-	};
+	const validationState = createFormValidationState({
+		get value() {
+			return state.inputValue();
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
+		get name() {
+			return getProps().name;
+		},
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		}
+	});
+	const displayValidation = () => validationState.displayValidation();
+	createFormReset(() => inputRef() ?? void 0, state.defaultInputValue, (value) => state.setInputValue(value));
+	createFormValidation({
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		},
+		focus: () => inputRef()?.focus()
+	}, validationState, () => inputRef() ?? void 0);
 	createEffect(() => {
-		if (typeof document === "undefined") return;
+		if (typeof document === "undefined") return false;
+		return true;
+	}, (ready) => {
+		if (!ready) return;
 		const handleGlobalPointerDown = (e) => {
-			if (e.target.closest(`[id="${listBoxId}"]`)) isPointerDownInsideListBox = true;
+			const target = e.target;
+			if (target.closest(`[id="${listBoxId}"]`) || target.closest("[role='option']")) isPointerDownInsideListBox = true;
 		};
 		document.addEventListener("pointerdown", handleGlobalPointerDown, true);
-		onCleanup(() => {
+		return () => {
 			document.removeEventListener("pointerdown", handleGlobalPointerDown, true);
-		});
+		};
 	});
 	const domProps = () => filterDOMProps(getProps(), {
 		labelable: true,
-		propNames: new Set(["form"])
+		propNames: /* @__PURE__ */ new Set(["form"])
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		comboBoxData.set(state, {
 			id,
 			listBoxId
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			comboBoxData.delete(state);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	const { labelProps, fieldProps } = createLabel({
+	const field = createField({
 		get id() {
 			return inputId;
 		},
 		get label() {
 			return getProps().label;
 		},
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage || displayValidation().validationErrors;
+		},
+		get isInvalid() {
+			return displayValidation().isInvalid;
+		},
 		get "aria-label"() {
 			return getProps()["aria-label"];
 		},
 		get "aria-labelledby"() {
 			return getProps()["aria-labelledby"];
 		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		},
 		labelElementType: "label"
 	});
 	const { isFocusVisible, focusProps } = createFocusRing({
@@ -727,13 +784,13 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 		}
 	});
 	const isFocused = state.isFocused;
-	const stringFormatter = !isServer ? createStringFormatter(comboBoxIntlStrings) : null;
+	const stringFormatter = createStringFormatter(comboBoxIntlStrings);
 	let lastFocusedKey = null;
 	let lastSelectedKey = null;
 	let lastOptionCount = 0;
 	let lastIsOpen = false;
-	createEffect(() => {
-		if (isServer || !stringFormatter) return;
+	createTrackedEffect(() => {
+		if (isServer) return;
 		const focusedKey = state.focusedKey();
 		const isOpen = state.isOpen();
 		const collection = state.collection();
@@ -741,42 +798,74 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 		if (isAppleDevice() && focusedItem != null && focusedKey !== lastFocusedKey) {
 			const isSelected = state.selectedKey() === focusedKey;
 			const optionText = focusedItem.textValue || "";
-			announce(stringFormatter().format("focusAnnouncement", {
+			const announcement = stringFormatter().format("focusAnnouncement", {
 				isGroupChange: false,
 				groupTitle: "",
 				groupCount: 0,
 				optionText,
 				isSelected
-			}), "polite");
+			});
+			announce(announcement);
 		}
 		lastFocusedKey = focusedKey;
 	});
-	createEffect(() => {
-		if (isServer || !stringFormatter) return;
+	createTrackedEffect(() => {
+		if (isServer) return;
 		const isOpen = state.isOpen();
-		const optionCount = getItemCount(state.collection());
+		const optionCount = getItemCount$1(state.collection());
 		const focusedKey = state.focusedKey();
-		const didOpenWithoutFocusedItem = isOpen !== lastIsOpen && (focusedKey == null || isAppleDevice());
-		if (isOpen && (didOpenWithoutFocusedItem || optionCount !== lastOptionCount)) announce(stringFormatter().format("countAnnouncement", { optionCount }), "polite");
-		lastOptionCount = optionCount;
+		const didOpenWithoutFocusedItem = isOpen !== lastIsOpen && isOpen && (focusedKey == null || isAppleDevice());
+		if (isOpen && (didOpenWithoutFocusedItem || optionCount !== lastOptionCount)) {
+			const announcement = stringFormatter().format("countAnnouncement", { optionCount });
+			announce(announcement);
+		}
+		if (isOpen) lastOptionCount = optionCount;
 		lastIsOpen = isOpen;
 	});
-	createEffect(() => {
-		if (isServer || !stringFormatter) return;
+	createTrackedEffect(() => {
+		if (isServer) return;
 		const selectedKey = state.selectedKey();
 		const selectedItem = state.selectedItem();
 		if (isAppleDevice() && state.isFocused() && selectedItem && selectedKey !== lastSelectedKey) {
 			const optionText = selectedItem.textValue || "";
-			announce(stringFormatter().format("selectedAnnouncement", { optionText }), "polite");
+			const announcement = stringFormatter().format("selectedAnnouncement", { optionText });
+			announce(announcement);
 		}
 		lastSelectedKey = selectedKey;
 	});
+	let skipVirtualFocusRestore = true;
+	let hadVirtualFocusedItem = false;
 	createEffect(() => {
-		if (isServer) return;
+		const focusedKey = state.focusedKey();
 		const isOpen = state.isOpen();
-		const inputEl = inputRef();
-		const listBoxEl = listBoxRef?.();
-		if (isOpen && inputEl && listBoxEl) onCleanup(ariaHideOutside([inputEl, listBoxEl]));
+		return focusedKey != null && isOpen && state.collection().getItem(focusedKey) != null;
+	}, (hasVirtualFocusedItem) => {
+		if (skipVirtualFocusRestore) {
+			skipVirtualFocusRestore = false;
+			hadVirtualFocusedItem = hasVirtualFocusedItem;
+			return;
+		}
+		const lostVirtualFocusedItem = hadVirtualFocusedItem && !hasVirtualFocusedItem;
+		hadVirtualFocusedItem = hasVirtualFocusedItem;
+		if (!lostVirtualFocusedItem) return;
+		const input = untrack(() => inputRef());
+		if (isServer || !input) return;
+		if (getActiveElement(getOwnerDocument(input)) === input) dispatchVirtualFocus(input, null);
+	});
+	createEffect(() => {
+		if (isServer) return {
+			isOpen: false,
+			inputEl: null,
+			popoverEl: null
+		};
+		return {
+			isOpen: state.isOpen(),
+			inputEl: inputRef(),
+			popoverEl: popoverRef ? popoverRef() : listBoxRef?.() ?? null
+		};
+	}, ({ isOpen, inputEl, popoverEl }) => {
+		if (!isOpen || !inputEl || !popoverEl) return;
+		return ariaHideOutside([inputEl, popoverEl].filter((element) => element != null));
 	});
 	let wasOpenOnButtonPressStart = false;
 	const scheduleButtonOpenFallback = (startedOpen) => {
@@ -822,9 +911,10 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 		const focusedKey = state.focusedKey();
 		const shouldWrap = p.shouldFocusWrap ?? false;
 		switch (e.key) {
-			case "Enter":
-				if (state.isOpen() && focusedKey != null) {
-					e.preventDefault();
+			case "Enter": {
+				const wasOpen = state.isOpen();
+				if (wasOpen) e.preventDefault();
+				if (wasOpen && focusedKey != null) {
 					const collectionItem = collection.getItem(focusedKey);
 					if (collectionItem?.props?.href ?? (collectionItem?.value)?.href) {
 						const listBox = listBoxRef?.();
@@ -833,53 +923,50 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 							if (item instanceof HTMLAnchorElement) openLink(item, e);
 						}
 						state.close();
-					} else state.commit();
+						break;
+					}
 				}
+				state.commit();
 				break;
-			case "Escape":
-				if (state.isOpen()) {
-					e.preventDefault();
-					e.stopPropagation();
-					state.revert();
-				}
+			}
+			case "Escape": {
+				const shouldContinuePropagation = !state.selectionManager.isEmpty || state.inputValue() === "" || Boolean(p.allowsCustomValue);
+				state.revert();
+				if (!shouldContinuePropagation) e.stopPropagation();
 				break;
+			}
 			case "ArrowDown":
-				e.preventDefault();
 				if (!state.isOpen()) state.open("first", "manual");
-				else if (focusedKey == null) {
-					const firstKey = collection.getFirstKey();
-					if (firstKey != null) state.setFocusedKey(firstKey);
-				} else {
-					let nextKey = collection.getKeyAfter(focusedKey);
+				else {
+					let nextKey = focusedKey == null ? collection.getFirstKey() : collection.getKeyAfter(focusedKey);
 					while (nextKey != null && state.isKeyDisabled(nextKey)) nextKey = collection.getKeyAfter(nextKey);
-					if (nextKey != null) state.setFocusedKey(nextKey);
-					else if (shouldWrap) {
-						let firstKey = collection.getFirstKey();
-						while (firstKey != null && state.isKeyDisabled(firstKey)) firstKey = collection.getKeyAfter(firstKey);
-						if (firstKey != null) state.setFocusedKey(firstKey);
+					if (nextKey == null && shouldWrap) {
+						nextKey = collection.getFirstKey();
+						while (nextKey != null && state.isKeyDisabled(nextKey)) nextKey = collection.getKeyAfter(nextKey);
+					}
+					if (nextKey != null) {
+						e.preventDefault();
+						state.setFocusedKey(nextKey);
 					}
 				}
 				break;
 			case "ArrowUp":
-				e.preventDefault();
 				if (!state.isOpen()) state.open("last", "manual");
-				else if (focusedKey == null) {
-					const lastKey = collection.getLastKey();
-					if (lastKey != null) state.setFocusedKey(lastKey);
-				} else {
-					let prevKey = collection.getKeyBefore(focusedKey);
+				else {
+					let prevKey = focusedKey == null ? collection.getLastKey() : collection.getKeyBefore(focusedKey);
 					while (prevKey != null && state.isKeyDisabled(prevKey)) prevKey = collection.getKeyBefore(prevKey);
-					if (prevKey != null) state.setFocusedKey(prevKey);
-					else if (shouldWrap) {
-						let lastKey = collection.getLastKey();
-						while (lastKey != null && state.isKeyDisabled(lastKey)) lastKey = collection.getKeyBefore(lastKey);
-						if (lastKey != null) state.setFocusedKey(lastKey);
+					if (prevKey == null && shouldWrap) {
+						prevKey = collection.getLastKey();
+						while (prevKey != null && state.isKeyDisabled(prevKey)) prevKey = collection.getKeyBefore(prevKey);
+					}
+					if (prevKey != null) {
+						e.preventDefault();
+						state.setFocusedKey(prevKey);
 					}
 				}
 				break;
 			case "Home":
 				if (state.isOpen()) {
-					e.preventDefault();
 					let firstKey = collection.getFirstKey();
 					while (firstKey != null && state.isKeyDisabled(firstKey)) firstKey = collection.getKeyAfter(firstKey);
 					if (firstKey != null) state.setFocusedKey(firstKey);
@@ -887,7 +974,6 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 				break;
 			case "End":
 				if (state.isOpen()) {
-					e.preventDefault();
 					let lastKey = collection.getLastKey();
 					while (lastKey != null && state.isKeyDisabled(lastKey)) lastKey = collection.getKeyBefore(lastKey);
 					if (lastKey != null) state.setFocusedKey(lastKey);
@@ -902,9 +988,7 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 					}
 				}
 				break;
-			case "Tab":
-				if (state.isOpen() && focusedKey != null) state.commit();
-				break;
+			case "Tab": if (state.isOpen() && focusedKey != null) state.commit();
 		}
 	};
 	const handleFocus = (e) => {
@@ -917,8 +1001,8 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 		const relatedTarget = e.relatedTarget;
 		const button = buttonRef?.();
 		const listBox = listBoxRef?.();
-		const blurFromButton = button && button === relatedTarget;
-		const blurIntoPopover = listBox?.contains(relatedTarget);
+		const blurFromButton = nodeContains(button ?? null, relatedTarget);
+		const blurIntoPopover = nodeContains(listBox ?? null, relatedTarget) || relatedTarget?.closest?.("[role='listbox']") != null || relatedTarget?.closest?.("[role='option']") != null;
 		if (blurFromButton || blurIntoPopover) return;
 		if (isPointerDownInsideListBox) {
 			isPointerDownInsideListBox = false;
@@ -951,7 +1035,7 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 	};
 	return {
 		get labelProps() {
-			return labelProps;
+			return field.labelProps;
 		},
 		get inputProps() {
 			const p = getProps();
@@ -959,7 +1043,8 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 			const isDisabled = p.isDisabled ?? state.isDisabled;
 			const isReadOnly = p.isReadOnly ?? state.isReadOnly;
 			const focusedKey = state.focusedKey();
-			return mergeProps$1(domProps(), focusProps, fieldProps, {
+			const fieldProps = field.fieldProps;
+			return mergeProps(domProps(), focusProps, fieldProps, {
 				id: inputId,
 				type: "text",
 				role: "combobox",
@@ -972,14 +1057,13 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 				placeholder: p.placeholder,
 				autoComplete: "off",
 				"aria-autocomplete": p.autoComplete ?? "list",
-				"aria-haspopup": "listbox",
 				"aria-expanded": isOpen,
 				"aria-controls": isOpen ? listBoxId : void 0,
 				"aria-activedescendant": isOpen && focusedKey != null ? `${listBoxId}-option-${focusedKey}` : void 0,
 				"aria-disabled": isDisabled || void 0,
-				"aria-required": p.isRequired || void 0,
-				"aria-invalid": p.isInvalid || void 0,
-				"aria-describedby": getAriaDescribedBy(),
+				required: (p.validationBehavior ?? "native") === "native" && !!p.isRequired,
+				"aria-required": (p.validationBehavior ?? "native") === "aria" && p.isRequired || void 0,
+				"aria-invalid": displayValidation().isInvalid || void 0,
 				name: p.name,
 				onInput: onInputChange,
 				onKeyDown: onInputKeyDown,
@@ -1000,9 +1084,9 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 			const triggerLabels = createLabels({
 				id: buttonId,
 				"aria-label": stringFormatter?.().format("buttonLabel") ?? "Show suggestions",
-				"aria-labelledby": p["aria-labelledby"] ?? labelProps.id
+				"aria-labelledby": p["aria-labelledby"] ?? attrString(field.labelProps.id)
 			});
-			return mergeProps$1(pressProps, {
+			return mergeProps(pressProps, {
 				id: buttonId,
 				type: "button",
 				tabIndex: -1,
@@ -1023,14 +1107,14 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 			const boxLabels = createLabels({
 				id: listBoxId,
 				"aria-label": stringFormatter?.().format("listboxLabel") ?? "Suggestions",
-				"aria-labelledby": p["aria-labelledby"] ?? labelProps.id
+				"aria-labelledby": p["aria-labelledby"] ?? attrString(field.labelProps.id)
 			});
 			return {
 				id: listBoxId,
 				role: "listbox",
 				"aria-label": boxLabels["aria-label"],
 				"aria-labelledby": boxLabels["aria-labelledby"],
-				"aria-multiselectable": isMulti || void 0,
+				"aria-multiselectable": isMulti ? "true" : void 0,
 				shouldSelectOnPressUp: true,
 				shouldFocusOnHover: true,
 				onPointerDownCapture: () => {
@@ -1042,18 +1126,24 @@ function createComboBox(props, state, inputRef, buttonRef, listBoxRef) {
 			};
 		},
 		get descriptionProps() {
-			return { id: descriptionId };
+			return field.descriptionProps;
 		},
 		get errorMessageProps() {
-			return {
-				id: errorMessageId,
-				role: "alert"
-			};
+			return field.errorMessageProps;
 		},
 		isFocused,
 		isFocusVisible: () => isFocused() && isFocusVisible(),
 		isOpen: state.isOpen,
-		selectedItem: state.selectedItem
+		selectedItem: state.selectedItem,
+		get isInvalid() {
+			return displayValidation().isInvalid;
+		},
+		get validationErrors() {
+			return displayValidation().validationErrors;
+		},
+		get validationDetails() {
+			return displayValidation().validationDetails;
+		}
 	};
 }
 //#endregion