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

package/dist/_chunk/select.js

@@ -1,14 +1,40 @@
-import { t as createPress } from "./createPress.js";
-import { i as mergeProps$1 } 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/select/HiddenSelect.tsx
+/*
+* 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/select/useSelect.ts
+import { t as mergeProps } from "./mergeProps.js";
 import { t as filterDOMProps } from "./filterDOMProps.js";
 import { t as access } from "./reactivity.js";
+import { v as nodeContains } from "./dom.js";
+import { t as createPress } from "./createPress.js";
 import { t as createFocusRing } from "./createFocusRing.js";
 import { createId } from "../ssr/index.js";
-import { t as createLabel } from "./createLabel.js";
-import { t as createTypeSelect } from "./createTypeSelect.js";
 import { t as createFormValidation } from "./createFormValidation.js";
-import { For, createEffect, onCleanup } from "solid-js";
-import { createComponent, effect, getNextElement, getNextMarker, insert, runHydrationEvents, setProperty, spread, template } from "solid-js/web";
+import { t as createField } from "./createField.js";
+import { t as createTypeSelect } from "./createTypeSelect.js";
+import { n as visuallyHiddenStyles } from "./createVisuallyHidden.js";
+import { For, Show, createRenderEffect, createSignal, createTrackedEffect } from "solid-js";
+import { createComponent, effect, getNextElement, getNextMarker, insert, memo, runHydrationEvents, setProperty, spread, template } from "@solidjs/web";
 //#region src/select/createSelect.ts
 /**
 * Provides the behavior and accessibility implementation for a select component.
@@ -28,28 +54,42 @@ function createSelect(props, state, _ref) {
 	const buttonId = `${id}-button`;
 	const listBoxId = `${id}-listbox`;
 	const valueId = `${id}-value`;
-	const descriptionId = `${id}-description`;
-	const errorMessageId = `${id}-error`;
 	const domProps = () => filterDOMProps(getProps(), { labelable: true });
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		selectData.set(state, { id });
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			selectData.delete(state);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	const { labelProps, fieldProps } = createLabel({
+	const field = createField({
 		get id() {
 			return buttonId;
 		},
 		get label() {
 			return getProps().label;
 		},
+		get description() {
+			return getProps().description;
+		},
+		get errorMessage() {
+			return getProps().errorMessage;
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
 		get "aria-label"() {
 			return getProps()["aria-label"];
 		},
 		get "aria-labelledby"() {
 			return getProps()["aria-labelledby"];
 		},
+		get "aria-describedby"() {
+			return getProps()["aria-describedby"];
+		},
 		labelElementType: "span"
 	});
 	const { isFocusVisible, focusProps } = createFocusRing({ get autoFocus() {
@@ -157,12 +197,10 @@ function createSelect(props, state, _ref) {
 					if (lastKey != null) state.setSelectedKey(lastKey);
 				}
 				break;
-			case "Escape":
-				if (state.isOpen()) {
-					e.preventDefault();
-					state.close();
-				}
-				break;
+			case "Escape": if (state.isOpen()) {
+				e.preventDefault();
+				state.close();
+			}
 		}
 	};
 	const handleFocus = (e) => {
@@ -178,13 +216,14 @@ function createSelect(props, state, _ref) {
 	};
 	return {
 		get labelProps() {
-			return labelProps;
+			return field.labelProps;
 		},
 		get triggerProps() {
 			const p = getProps();
 			const isOpen = state.isOpen();
 			const isDisabled = p.isDisabled ?? state.isDisabled;
-			const baseProps = mergeProps$1(domProps(), pressProps, focusProps, fieldProps, {
+			const fieldProps = field.fieldProps;
+			const baseProps = mergeProps(domProps(), pressProps, focusProps, fieldProps, {
 				id: buttonId,
 				type: "button",
 				tabIndex: isDisabled ? void 0 : 0,
@@ -193,8 +232,11 @@ function createSelect(props, state, _ref) {
 				"aria-controls": isOpen ? listBoxId : void 0,
 				"aria-disabled": isDisabled || void 0,
 				"aria-required": p.isRequired || void 0,
-				"aria-describedby": p["aria-describedby"] || void 0,
-				"aria-labelledby": fieldProps["aria-labelledby"] ? [valueId, fieldProps["aria-labelledby"]].filter(Boolean).join(" ") : void 0,
+				"aria-labelledby": [
+					valueId,
+					fieldProps["aria-labelledby"],
+					fieldProps["aria-label"] && !fieldProps["aria-labelledby"] ? fieldProps.id : void 0
+				].filter(Boolean).join(" "),
 				onKeyDown,
 				onFocus: handleFocus,
 				onBlur: handleBlur,
@@ -202,7 +244,7 @@ function createSelect(props, state, _ref) {
 				"data-disabled": isDisabled || void 0,
 				"data-focus-visible": isFocusVisible() || void 0
 			});
-			if (!p.disallowTypeAhead) return mergeProps$1(baseProps, typeSelectProps);
+			if (!p.disallowTypeAhead) return mergeProps(baseProps, typeSelectProps);
 			return baseProps;
 		},
 		get valueProps() {
@@ -210,14 +252,15 @@ function createSelect(props, state, _ref) {
 		},
 		isPressed,
 		get menuProps() {
+			const fieldProps = field.fieldProps;
 			return {
 				id: listBoxId,
 				role: "listbox",
-				"aria-labelledby": fieldProps["aria-labelledby"] ?? buttonId,
-				"aria-multiselectable": state.selectionMode() === "multiple" ? true : void 0,
+				"aria-labelledby": [fieldProps["aria-labelledby"], fieldProps["aria-label"] && !fieldProps["aria-labelledby"] ? fieldProps.id : void 0].filter(Boolean).join(" "),
+				"aria-multiselectable": state.selectionMode() === "multiple" ? "true" : void 0,
 				tabIndex: -1,
 				onBlur: (e) => {
-					if (e.currentTarget?.contains(e.relatedTarget)) return;
+					if (nodeContains(e.currentTarget, e.relatedTarget)) return;
 					getProps().onBlur?.(e);
 					getProps().onFocusChange?.(false);
 					state.setFocused(false);
@@ -225,10 +268,10 @@ function createSelect(props, state, _ref) {
 			};
 		},
 		get descriptionProps() {
-			return { id: descriptionId };
+			return field.descriptionProps;
 		},
 		get errorMessageProps() {
-			return { id: errorMessageId };
+			return field.errorMessageProps;
 		},
 		isFocused,
 		isFocusVisible: () => isFocused() && isFocusVisible(),
@@ -240,56 +283,98 @@ function createSelect(props, state, _ref) {
 //#region src/select/createHiddenSelect.tsx
 /**
 * Provides a hidden native select element for form integration.
-* Based on @react-aria/select useHiddenSelect.
+* Ported from packages/react-aria/src/select/HiddenSelect.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div><label><!$><!/><select><option></option><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<option>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><label><!$><!/><select><option value label= > </option><!$><!/><!$><!/>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<option>`);
 /**
 * Provides the accessibility implementation for a hidden select.
 * This is used for native form submission and accessibility on mobile devices.
 */
 function createHiddenSelect(props) {
 	const getProps = () => access(props);
-	let selectRef;
-	createEffect(() => {
+	const [selectEl, setSelectEl] = createSignal();
+	const assignSelectRef = (el) => {
+		setSelectEl(el);
+	};
+	createFormValidation({
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		},
+		focus: () => getProps().triggerRef?.()?.focus()
+	}, getProps().state, () => selectEl());
+	const nativeSelectValue = () => {
+		const state = getProps().state;
+		const selectedKey = state.selectedKey();
+		if (typeof state.selectionMode === "function" && state.selectionMode() === "multiple") {
+			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+			if (selectedKeys === "all") return Array.from(state.collection()).map((item) => String(item.key));
+			return Array.from(selectedKeys).map(String);
+		}
+		return selectedKey != null ? String(selectedKey) : "";
+	};
+	createRenderEffect(() => [selectEl(), nativeSelectValue()], ([el, next]) => {
+		if (!el) return;
+		if (Array.isArray(next)) {
+			const selected = new Set(next);
+			for (const option of el.options) option.selected = selected.has(option.value);
+		} else if (el.value !== next) el.value = next;
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const p = getProps();
-		if (!selectRef) return;
-		const form = selectRef.form;
+		const el = selectEl();
+		if (!el) return;
+		const form = el.form;
 		if (!form) return;
 		const handleReset = () => {
 			const defaultKey = p.state.collection().getFirstKey();
 			p.state.setSelectedKey(defaultKey);
 		};
 		form.addEventListener("reset", handleReset);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			form.removeEventListener("reset", handleReset);
 		});
-	});
-	createEffect(() => {
-		const p = getProps();
-		if (!selectRef || p.validationBehavior !== "native" || !p.validationState) return;
-		createFormValidation({
-			validationBehavior: p.validationBehavior,
-			focus: () => p.triggerRef?.()?.focus()
-		}, p.validationState, () => selectRef);
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return {
 		get containerProps() {
 			return {
-				"aria-hidden": true,
-				"data-a11y-ignore": "aria-hidden-focus"
+				style: {
+					...visuallyHiddenStyles,
+					position: "fixed",
+					top: 0,
+					left: 0
+				},
+				"aria-hidden": "true",
+				"data-a11y-ignore": "aria-hidden-focus",
+				"data-react-aria-prevent-focus": true
 			};
 		},
 		get selectProps() {
 			const p = getProps();
 			const state = p.state;
 			const selectedKey = state.selectedKey();
-			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? new Set([selectedKey]) : /* @__PURE__ */ new Set();
+			const selectedKeys = typeof state.selectedKeys === "function" ? state.selectedKeys() : selectedKey != null ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
 			const validationBehavior = p.validationBehavior ?? "aria";
 			const isMultiple = typeof state.selectionMode === "function" && state.selectionMode() === "multiple";
 			const multipleValue = selectedKeys === "all" ? Array.from(state.collection()).map((item) => String(item.key)) : Array.from(selectedKeys).map(String);
+			const applyNativeSelectChange = (e) => {
+				const target = e.target;
+				if (isMultiple) {
+					if (typeof state.setSelectedKeys === "function") state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value));
+					else {
+						const first = target.selectedOptions[0]?.value;
+						state.setSelectedKey(first ?? null);
+					}
+				} else state.setSelectedKey(target.value);
+			};
 			return {
 				ref: (el) => {
-					selectRef = el;
+					assignSelectRef(el ?? void 0);
 				},
 				tabIndex: -1,
 				autoComplete: p.autoComplete,
@@ -299,15 +384,8 @@ function createHiddenSelect(props) {
 				form: p.form,
 				required: validationBehavior === "native" && p.isRequired,
 				value: isMultiple ? multipleValue : selectedKey != null ? String(selectedKey) : "",
-				onChange: (e) => {
-					const target = e.target;
-					if (isMultiple) if (typeof state.setSelectedKeys === "function") state.setSelectedKeys(Array.from(target.selectedOptions).map((o) => o.value));
-					else {
-						const first = target.selectedOptions[0]?.value;
-						state.setSelectedKey(first ?? null);
-					}
-					else state.setSelectedKey(target.value);
-				},
+				onChange: applyNativeSelectChange,
+				onInput: applyNativeSelectChange,
 				style: {
 					position: "absolute",
 					top: 0,
@@ -346,7 +424,7 @@ function createHiddenSelect(props) {
 * This is useful on mobile devices where native select behavior is preferred.
 */
 function HiddenSelect(props) {
-	const { containerProps, selectProps } = createHiddenSelect({
+	const { containerProps, selectProps, inputProps } = createHiddenSelect({
 		get state() {
 			return props.state;
 		},
@@ -370,35 +448,103 @@ function HiddenSelect(props) {
 		},
 		get triggerRef() {
 			return props.triggerRef;
-		},
-		get validationState() {
-			return props.validationState;
 		}
 	});
 	const collection = () => props.state.collection();
 	const selectedKey = () => props.state.selectedKey();
-	const selectedKeys = () => typeof props.state.selectedKeys === "function" ? props.state.selectedKeys() : selectedKey() != null ? new Set([selectedKey()]) : /* @__PURE__ */ new Set();
+	const selectedKeys = () => typeof props.state.selectedKeys === "function" ? props.state.selectedKeys() : selectedKey() != null ? /* @__PURE__ */ new Set([selectedKey()]) : /* @__PURE__ */ new Set();
 	const isMultiple = () => typeof props.state.selectionMode === "function" && props.state.selectionMode() === "multiple";
-	return (() => {
-		var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$7 = _el$2.firstChild, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling), _el$3 = _el$8.nextSibling, _el$5 = _el$3.firstChild.nextSibling, [_el$6, _co$] = getNextMarker(_el$5.nextSibling);
-		spread(_el$, containerProps, false, true);
-		insert(_el$2, () => props.label, _el$8, _co$2);
-		spread(_el$3, selectProps, false, true);
-		insert(_el$3, createComponent(For, {
-			get each() {
-				return Array.from(collection());
-			},
-			children: (item) => (() => {
-				var _el$9 = getNextElement(_tmpl$2);
-				insert(_el$9, () => item.textValue);
-				effect(() => setProperty(_el$9, "selected", isMultiple() ? selectedKeys() === "all" ? true : selectedKeys().has(item.key) : item.key === selectedKey()));
-				effect(() => setProperty(_el$9, "value", String(item.key)));
-				return _el$9;
-			})()
-		}), _el$6, _co$);
-		runHydrationEvents();
-		return _el$;
-	})();
+	const collectionSize = () => collection().size;
+	const hiddenInputValues = () => {
+		if (isMultiple()) {
+			const keys = selectedKeys();
+			if (keys === "all") return Array.from(collection()).map((item) => item.key);
+			const listed = Array.from(keys);
+			return listed.length === 0 ? [null] : listed;
+		}
+		return [selectedKey()];
+	};
+	return createComponent(Show, {
+		get when() {
+			return collectionSize() <= 300;
+		},
+		get fallback() {
+			return createComponent(Show, {
+				get when() {
+					return props.name;
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return hiddenInputValues();
+						},
+						children: (value) => (() => {
+							var _el$14 = getNextElement(_tmpl$2);
+							spread(_el$14, [inputProps, { get value() {
+								return value != null ? String(value) : "";
+							} }], false);
+							runHydrationEvents();
+							return _el$14;
+						})()
+					});
+				}
+			});
+		},
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			var _el$2 = _el$.firstChild;
+			var _el$3 = _el$2.firstChild;
+			var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+			var _el$6 = _el$4.nextSibling;
+			var _el$8 = _el$6.firstChild.nextSibling;
+			var [_el$9, _el$10] = getNextMarker(_el$8.nextSibling);
+			var _el$11 = _el$9.nextSibling;
+			var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+			spread(_el$, [containerProps, { "data-testid": "hidden-select-container" }], true);
+			insert(_el$2, () => {
+				return props.label;
+			}, _el$4, _el$5);
+			spread(_el$6, [selectProps, { get value() {
+				return isMultiple() ? selectedKeys() === "all" ? Array.from(collection()).map((item) => String(item.key)) : Array.from(selectedKeys()).map(String) : selectedKey() != null ? String(selectedKey()) : "";
+			} }], true);
+			insert(_el$6, createComponent(For, {
+				get each() {
+					return Array.from(collection()).filter((item) => item.type === "item");
+				},
+				children: (item) => (() => {
+					var _el$15 = getNextElement(_tmpl$3);
+					insert(_el$15, () => {
+						return item.textValue;
+					});
+					effect(() => String(item.key), (_v$) => {
+						setProperty(_el$15, "value", _v$);
+					});
+					return _el$15;
+				})()
+			}), _el$9, _el$10);
+			insert(_el$6, createComponent(Show, {
+				get when() {
+					return memo(() => {
+						return collectionSize() === 0;
+					})() && props.name;
+				},
+				get children() {
+					return createComponent(For, {
+						get each() {
+							return hiddenInputValues();
+						},
+						children: (value) => (() => {
+							var _el$16 = getNextElement(_tmpl$3);
+							setProperty(_el$16, "value", value ?? "");
+							return _el$16;
+						})()
+					});
+				}
+			}), _el$12, _el$13);
+			runHydrationEvents();
+			return _el$;
+		}
+	});
 }
 //#endregion
 export { getSelectData as i, createHiddenSelect as n, createSelect as r, HiddenSelect as t };