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

package/dist/_chunk/datepicker.jsx

@@ -1,21 +1,82 @@
-import { t as createPress } from "./createPress.jsx";
-import { i as mergeProps$1 } 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/datepicker/useDateField.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/datepicker/useDatePicker.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/datepicker/useDateRangePicker.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/datepicker/useDateSegment.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/datepicker/useDisplayNames.ts
+import { t as mergeProps } from "./mergeProps.jsx";
+import { _ as scrollIntoViewport, i as createDescription } from "./utils.jsx";
+import { t as onOwnedCleanup } from "./owner.jsx";
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
 import { t as access } from "./reactivity.jsx";
-import { A as isMac, D as isIOS, S as scrollIntoViewport, i as createDescription } from "./utils.jsx";
-import { a as getEventTarget, l as getScrollParent, o as getFocusableTreeWalker, y as nodeContains } from "./focus.jsx";
+import { J as isIOS, Z as isMac, c as getScrollParent, i as getFocusableTreeWalker, r as getEventTarget, v as nodeContains } from "./dom.jsx";
+import { t as createPress } from "./createPress.jsx";
 import { t as createFocusWithin } from "./createFocusWithin.jsx";
 import { i as useLocale } from "./locale.jsx";
 import { n as createFilter, r as createDateFormatter } from "./i18n.jsx";
 import { n as createStringFormatter } from "./createStringFormatter.jsx";
 import { createId } from "../ssr/index.jsx";
+import { t as createFormValidation } from "./createFormValidation.jsx";
+import { t as createFormReset } from "./createFormReset.jsx";
 import { t as createLabels } from "./createLabels.jsx";
 import { t as createField } from "./createField.jsx";
-import { t as createFormValidation } from "./createFormValidation.jsx";
 import { n as createFocusManager } from "./FocusScope.jsx";
-import { t as createFormReset } from "./createFormReset.jsx";
 import { t as createSpinButton } from "./spinbutton.jsx";
-import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
+import { createMemo, createTrackedEffect, onSettled } from "solid-js";
 import { NumberParser } from "@internationalized/number";
 import { LocalizedStringDictionary } from "@internationalized/string";
 import { CalendarDate, toCalendar } from "@internationalized/date";
@@ -684,7 +745,10 @@ function createDatePickerGroup(state, ref, disableArrowNavigation) {
 				e.stopPropagation();
 				const root = ref();
 				if (direction === "rtl") {
-					if (root) findNextSegment(root, getEventTarget(e).getBoundingClientRect().left, -1)?.focus();
+					if (root) {
+						const target = getEventTarget(e);
+						findNextSegment(root, target.getBoundingClientRect().left, -1)?.focus();
+					}
 				} else focusManager.focusPrevious();
 				break;
 			}
@@ -693,16 +757,19 @@ function createDatePickerGroup(state, ref, disableArrowNavigation) {
 				e.stopPropagation();
 				const root = ref();
 				if (direction === "rtl") {
-					if (root) findNextSegment(root, getEventTarget(e).getBoundingClientRect().left, 1)?.focus();
+					if (root) {
+						const target = getEventTarget(e);
+						findNextSegment(root, target.getBoundingClientRect().left, 1)?.focus();
+					}
 				} else focusManager.focusNext();
 				break;
 			}
 		}
 	};
-	const focusLast = () => {
+	const focusLast = (clickedTarget) => {
 		const root = ref();
 		if (!root) return;
-		let target = typeof window !== "undefined" ? window.event?.target : null;
+		let target = clickedTarget ?? (typeof window !== "undefined" ? window.event?.target : null);
 		const walker = getFocusableTreeWalker(root, { tabbable: true });
 		if (target) {
 			walker.currentNode = target;
@@ -715,9 +782,9 @@ function createDatePickerGroup(state, ref, disableArrowNavigation) {
 				if (last) target = last;
 			} while (last);
 		}
-		while (target?.hasAttribute("data-placeholder")) {
+		while (target && (target.hasAttribute("data-placeholder") || target.getAttribute("role") !== "spinbutton")) {
 			const prev = walker.previousNode();
-			if (prev && prev.hasAttribute("data-placeholder")) target = prev;
+			if (prev) target = prev;
 			else break;
 		}
 		target?.focus();
@@ -726,13 +793,13 @@ function createDatePickerGroup(state, ref, disableArrowNavigation) {
 		preventFocusOnPress: true,
 		allowTextSelectionOnPress: true,
 		onPressStart(e) {
-			if (e.pointerType === "mouse") focusLast();
+			if (e.pointerType === "mouse") focusLast(e.target);
 		},
 		onPress(e) {
-			if (e.pointerType === "touch" || e.pointerType === "pen") focusLast();
+			if (e.pointerType === "touch" || e.pointerType === "pen") focusLast(e.target);
 		}
 	});
-	return createMemo(() => mergeProps$1(pressProps, { onKeyDown }));
+	return createMemo(() => mergeProps(pressProps, { onKeyDown }));
 }
 //#endregion
 //#region src/datepicker/createDateField.ts
@@ -789,12 +856,13 @@ function createDateField(props, state, ref) {
 		}
 	});
 	const stringFormatter = createStringFormatter(datePickerStrings, "@react-aria/datepicker");
-	const descProps = createDescription(createMemo(() => {
+	const description = createMemo(() => {
 		if (!state.value()) return "";
 		const message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
 		const fieldKey = state.maxGranularity === "hour" ? "time" : "date";
 		return stringFormatter().format(message, { [fieldKey]: state.formatValue({ month: "long" }) });
-	}));
+	});
+	const descProps = createDescription(description);
 	const describedBy = () => {
 		const fp = field.fieldProps;
 		if (isPresentation()) return fp["aria-describedby"];
@@ -809,30 +877,30 @@ function createDateField(props, state, ref) {
 		ariaDescribedBy: describedBy,
 		focusManager
 	});
-	onMount(() => {
+	onSettled(() => {
 		if (getProps().autoFocus) focusManager.focusFirst();
 	});
-	if (props && typeof props === "object") {
-		createFormReset(() => getProps().inputRef?.(), state.defaultValue, state.setValue);
-		createFormValidation({
-			get validationBehavior() {
-				return getProps().validationBehavior;
-			},
-			focus() {
-				focusManager.focusFirst();
-			}
-		}, state, () => getProps().inputRef?.());
-	}
+	createFormReset(() => getProps().inputRef?.(), state.defaultValue, state.setValue);
+	createFormValidation({
+		get validationBehavior() {
+			return getProps().validationBehavior ?? "native";
+		},
+		focus() {
+			focusManager.focusFirst();
+		}
+	}, state, () => getProps().inputRef?.());
 	const fieldDOMProps = createMemo(() => {
 		if (isPresentation()) return { role: "presentation" };
-		return mergeProps$1(field.fieldProps, {
+		return mergeProps(field.fieldProps, {
 			role: "group",
 			"aria-disabled": getProps().isDisabled || void 0,
 			"aria-describedby": describedBy()
 		});
 	});
 	const fieldProps = createMemo(() => {
-		return mergeProps$1(filterDOMProps(getProps()), fieldDOMProps(), groupProps(), {
+		const p = getProps();
+		const domProps = filterDOMProps(p);
+		return mergeProps(domProps, fieldDOMProps(), groupProps(), {
 			onFocusIn: focusWithinProps.onFocus,
 			onFocusOut: focusWithinProps.onBlur
 		}, {
@@ -1040,7 +1108,6 @@ function createDateSegment(props, state, ref) {
 				e.preventDefault();
 				e.stopPropagation();
 				backspace();
-				break;
 		}
 	};
 	const { startsWith } = createFilter({ sensitivity: "base" })();
@@ -1129,17 +1196,22 @@ function createDateSegment(props, state, ref) {
 			window.getSelection()?.collapse(el);
 		}
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (typeof document === "undefined") return;
 		const handler = () => {
 			const selection = window.getSelection();
 			if (selection?.anchorNode && nodeContains(ref(), selection.anchorNode)) selection.collapse(ref());
 		};
 		document.addEventListener("selectionchange", handler);
-		onCleanup(() => document.removeEventListener("selectionchange", handler));
+		_s2Cleanups.push(() => document.removeEventListener("selectionchange", handler));
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	let compositionValue = "";
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const el = ref();
 		if (!el) return;
 		const onBeforeInput = (e) => {
@@ -1154,9 +1226,7 @@ function createDateSegment(props, state, ref) {
 					compositionValue = el.textContent ?? "";
 					el.textContent = el.textContent;
 					break;
-				default:
-					if (e.data != null) onInput(e.data);
-					break;
+				default: if (e.data != null) onInput(e.data);
 			}
 		};
 		const onInputEvent = (e) => {
@@ -1165,21 +1235,23 @@ function createDateSegment(props, state, ref) {
 				case "insertCompositionText":
 					if (ref()) el.textContent = compositionValue;
 					if (data != null && (startsWith(am(), data) || startsWith(pm(), data))) onInput(data);
-					break;
 			}
 		};
 		el.addEventListener("beforeinput", onBeforeInput);
 		el.addEventListener("input", onInputEvent);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			el.removeEventListener("beforeinput", onBeforeInput);
 			el.removeEventListener("input", onInputEvent);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	let focusedElement = null;
-	createEffect(() => {
+	createTrackedEffect(() => {
 		focusedElement = ref();
 	});
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		if (typeof document !== "undefined" && document.activeElement === focusedElement) {
 			if (!focusManager?.focusPrevious()) focusManager?.focusNext();
 		}
@@ -1207,14 +1279,14 @@ function createDateSegment(props, state, ref) {
 			"aria-label": `${name}${ariaLabel ? `, ${ariaLabel}` : ""}${ariaLabelledBy ? ", " : ""}`,
 			"aria-labelledby": ariaLabelledBy
 		});
-		if (seg.type === "literal") return { "aria-hidden": true };
+		if (seg.type === "literal") return { "aria-hidden": "true" };
 		const segmentStyle = { "caret-color": "transparent" };
 		if (direction() === "rtl") {
 			segmentStyle["unicode-bidi"] = "embed";
-			const format = resolvedOptions[seg.type];
+			const format = state.dateFormatter.resolvedOptions()[seg.type];
 			if (format === "numeric" || format === "2-digit") segmentStyle.direction = "ltr";
 		}
-		return mergeProps$1(spinButton.spinButtonProps, labelProps, {
+		return mergeProps(spinButton.spinButtonProps, labelProps, {
 			id: segmentId,
 			...touchPropOverrides,
 			"aria-invalid": state.isInvalid() ? "true" : void 0,
@@ -1222,7 +1294,7 @@ function createDateSegment(props, state, ref) {
 			"aria-readonly": state.isReadOnly() || !seg.isEditable ? "true" : void 0,
 			"aria-controls": p["aria-controls"] || void 0,
 			"data-placeholder": seg.isPlaceholder || void 0,
-			contentEditable: isEditable,
+			contenteditable: isEditable ? "true" : void 0,
 			suppressContentEditableWarning: isEditable,
 			spellCheck: isEditable ? "false" : void 0,
 			autoCorrect: isEditable ? "off" : void 0,
@@ -1240,6 +1312,17 @@ function createDateSegment(props, state, ref) {
 			}
 		});
 	});
+	createTrackedEffect(() => {
+		const el = ref();
+		const seg = segment();
+		if (!el || seg.type === "literal") return;
+		if (direction() === "rtl") {
+			el.style.setProperty("unicode-bidi", "embed");
+			const format = state.dateFormatter.resolvedOptions()[seg.type];
+			if (format === "numeric" || format === "2-digit") el.style.setProperty("direction", "ltr");
+			else el.style.removeProperty("direction");
+		}
+	});
 	return { get segmentProps() {
 		return segmentProps();
 	} };
@@ -1328,17 +1411,18 @@ function createDatePicker(props, state, overlayState, _calendarState, ref = () =
 		return fp["aria-labelledby"] || fp.id;
 	};
 	const stringFormatter = createStringFormatter(datePickerStrings, "@react-aria/datepicker");
-	const descProps = createDescription(createMemo(() => {
+	const valueDescription = createMemo(() => {
 		if (!state.value?.()) return "";
 		const date = state.formatValue({ month: "long" });
 		return date ? stringFormatter().format("selectedDateDescription", { date }) : "";
-	}));
+	});
+	const descProps = createDescription(valueDescription);
 	const ariaDescribedBy = () => {
 		const fp = field.fieldProps;
 		return [descProps["aria-describedby"], fp["aria-describedby"]].filter(Boolean).join(" ") || void 0;
 	};
 	const outerGroup = createDatePickerGroup({ setOpen: (isOpen) => isOpen ? overlayState.open() : overlayState.close() }, ref, false);
-	const groupProps = createMemo(() => mergeProps$1(outerGroup(), {
+	const groupProps = createMemo(() => mergeProps(outerGroup(), {
 		role: "group",
 		"aria-disabled": getProps().isDisabled || void 0,
 		"aria-labelledby": labelledBy(),
@@ -1352,7 +1436,7 @@ function createDatePicker(props, state, overlayState, _calendarState, ref = () =
 	}));
 	const fieldProps = createMemo(() => {
 		const p = getProps();
-		return mergeProps$1(field.fieldProps, {
+		return mergeProps(field.fieldProps, {
 			id: fieldId,
 			[roleSymbol]: "presentation",
 			"aria-labelledby": labelledBy(),
@@ -1390,7 +1474,7 @@ function createDatePicker(props, state, overlayState, _calendarState, ref = () =
 	});
 	const buttonProps = createMemo(() => {
 		const p = getProps();
-		return mergeProps$1(buttonPress.pressProps, {
+		return mergeProps(buttonPress.pressProps, {
 			id: buttonId,
 			type: "button",
 			"aria-haspopup": "dialog",
@@ -1553,20 +1637,21 @@ function createDateRangePicker(props, state, overlayState, ref = () => null) {
 		const fp = field.fieldProps;
 		return fp["aria-labelledby"] || fp.id;
 	};
-	const descProps = createDescription(createMemo(() => {
+	const valueDescription = createMemo(() => {
 		const range = state.formatValue(locale().locale, { month: "long" });
 		return range ? stringFormatter().format("selectedRangeDescription", {
 			startDate: range.start,
 			endDate: range.end
 		}) : "";
-	}));
+	});
+	const descProps = createDescription(valueDescription);
 	const ariaDescribedBy = () => {
 		const fp = field.fieldProps;
 		return [descProps["aria-describedby"], fp["aria-describedby"]].filter(Boolean).join(" ") || void 0;
 	};
 	const sharedFocusManager = createFocusManager(ref);
 	const outerGroup = createDatePickerGroup({ setOpen: (isOpen) => isOpen ? overlayState.open() : overlayState.close() }, ref, false);
-	const groupProps = createMemo(() => mergeProps$1(outerGroup(), {
+	const groupProps = createMemo(() => mergeProps(outerGroup(), {
 		role: "group",
 		"aria-disabled": getProps().isDisabled || void 0,
 		"aria-labelledby": labelledBy(),
@@ -1594,7 +1679,7 @@ function createDateRangePicker(props, state, overlayState, ref = () => null) {
 	};
 	const startFieldProps = createMemo(() => {
 		const p = getProps();
-		return mergeProps$1(commonFieldProps(), {
+		return mergeProps(commonFieldProps(), {
 			id: startFieldId,
 			"aria-label": stringFormatter().format("startDate"),
 			autoFocus: p.autoFocus,
@@ -1603,7 +1688,7 @@ function createDateRangePicker(props, state, overlayState, ref = () => null) {
 	});
 	const endFieldProps = createMemo(() => {
 		const p = getProps();
-		return mergeProps$1(commonFieldProps(), {
+		return mergeProps(commonFieldProps(), {
 			id: endFieldId,
 			"aria-label": stringFormatter().format("endDate"),
 			name: p.endName
@@ -1623,7 +1708,7 @@ function createDateRangePicker(props, state, overlayState, ref = () => null) {
 	});
 	const buttonProps = createMemo(() => {
 		const p = getProps();
-		return mergeProps$1(buttonPress.pressProps, {
+		return mergeProps(buttonPress.pressProps, {
 			id: buttonId,
 			type: "button",
 			"aria-haspopup": "dialog",