@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.0

package/dist/Calendar.js

@@ -1,8 +1,21 @@
-import { dataAttr, useIsHydrated, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 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-components/src/Calendar.tsx
+import { coerceDomRecord, dataAttr, useRenderProps } from "./utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { For, Index, Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createMemo, createSignal, useContext } from "solid-js";
 import { createCalendar, createCalendarCell, createCalendarGrid, createHover } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createCalendarState, endOfMonth, isSameMonth } from "@proyecto-viviana/solid-stately";
 //#region src/Calendar.tsx
 /**
@@ -11,8 +24,19 @@ import { createCalendarState, endOfMonth, isSameMonth } from "@proyecto-viviana/
 * Pre-wired headless calendar component that combines aria hooks.
 * Port of react-aria-components/src/Calendar.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div class="solidaria-Calendar solidaria-Calendar--placeholder"aria-hidden=true>`), _tmpl$2 = /*#__PURE__*/ template(`<h2>`), _tmpl$3 = /*#__PURE__*/ template(`<button tabindex=-1>`), _tmpl$4 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /*#__PURE__*/ template(`<h2 aria-live=polite>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<table><thead><tr></tr></thead><tbody>`), _tmpl$8 = /*#__PURE__*/ template(`<th scope=col>`), _tmpl$9 = /*#__PURE__*/ template(`<tr>`), _tmpl$0 = /*#__PURE__*/ template(`<td>`), _tmpl$1 = /*#__PURE__*/ template(`<thead>`), _tmpl$10 = /*#__PURE__*/ template(`<tbody>`), _tmpl$11 = /*#__PURE__*/ template(`<td><div>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<h2>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button tabindex=-1>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<h2 aria-live=polite>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<table><thead><tr></tr></thead><tbody>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<th scope=col>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<tr>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<td>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<thead>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<tbody>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<td><div>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -44,24 +68,13 @@ function useCalendarContext() {
 */
 function Calendar(props) {
 	const inheritedState = useContext(CalendarContext);
-	const isHydrated = useIsHydrated();
 	return createComponent(Show, {
-		get when() {
-			return isHydrated();
-		},
+		when: inheritedState,
 		get fallback() {
-			return getNextElement(_tmpl$);
+			return createComponent(CalendarInner, props);
 		},
 		get children() {
-			return createComponent(Show, {
-				when: inheritedState,
-				get fallback() {
-					return createComponent(CalendarInner, props);
-				},
-				get children() {
-					return createComponent(CalendarWithState, mergeProps({ state: inheritedState }, props));
-				}
-			});
+			return createComponent(CalendarWithState, mergeProps({ state: inheritedState }, props));
 		}
 	});
 }
@@ -112,50 +125,62 @@ function CalendarWithState(props) {
 		style: local.style,
 		defaultClassName: "solidaria-Calendar"
 	}, renderValues);
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$4), _el$5 = _el$2.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$7 = _el$6.nextSibling, [_el$8, _co$2] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$3] = getNextMarker(_el$9.nextSibling);
-		use((el) => assignRef(local.ref, el), _el$2);
-		spread(_el$2, mergeProps(() => calendarAria.calendarProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["data-disabled"]() {
-				return dataAttr(state().isDisabled());
-			},
-			get ["data-readonly"]() {
-				return dataAttr(state().isReadOnly());
-			},
-			get ["data-invalid"]() {
-				return dataAttr(state().isValueInvalid());
-			}
-		}), false, true);
-		insert(_el$2, createComponent(VisuallyHidden, { get children() {
-			var _el$3 = getNextElement(_tmpl$2);
-			insert(_el$3, () => String(calendarAria.calendarProps["aria-label"] ?? ""));
-			return _el$3;
-		} }), _el$6, _co$);
-		insert(_el$2, () => props.children, _el$8, _co$2);
-		insert(_el$2, createComponent(VisuallyHidden, { get children() {
-			var _el$4 = getNextElement(_tmpl$3);
-			_el$4.$$click = () => state().focusNextPage();
-			effect((_p$) => {
-				var _v$ = String(calendarAria.nextButtonProps["aria-label"] ?? ""), _v$2 = Boolean(calendarAria.nextButtonProps.disabled);
-				_v$ !== _p$.e && setAttribute(_el$4, "aria-label", _p$.e = _v$);
-				_v$2 !== _p$.t && setProperty(_el$4, "disabled", _p$.t = _v$2);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
-			});
-			runHydrationEvents();
-			return _el$4;
-		} }), _el$0, _co$3);
-		runHydrationEvents();
+	var _el$ = getNextElement(_tmpl$3);
+	var _el$3 = _el$.firstChild;
+	var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+	var _el$6 = _el$4.nextSibling;
+	var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+	var _el$10 = _el$7.nextSibling;
+	var [_el$11, _el$12] = getNextMarker(_el$10.nextSibling);
+	ref(() => {
+		return (el) => assignRef$1(local.ref, el);
+	}, _el$);
+	spread(_el$, [() => {
+		return calendarAria.calendarProps;
+	}, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get "data-disabled"() {
+			return dataAttr(state().isDisabled());
+		},
+		get "data-readonly"() {
+			return dataAttr(state().isReadOnly());
+		},
+		get "data-invalid"() {
+			return dataAttr(state().isValueInvalid());
+		}
+	}], true);
+	insert(_el$, createComponent(VisuallyHidden, { get children() {
+		var _el$2 = getNextElement(_tmpl$);
+		insert(_el$2, scope(() => {
+			return String(calendarAria.calendarProps["aria-label"] ?? "");
+		}));
 		return _el$2;
-	})();
+	} }), _el$4, _el$5);
+	insert(_el$, scope(() => {
+		return props.children;
+	}), _el$7, _el$8);
+	insert(_el$, createComponent(VisuallyHidden, { get children() {
+		var _el$9 = getNextElement(_tmpl$2);
+		_el$9._$$click = () => state().focusNextPage();
+		effect(() => {
+			return {
+				e: String(calendarAria.nextButtonProps["aria-label"] ?? ""),
+				t: Boolean(calendarAria.nextButtonProps.disabled)
+			};
+		}, ({ e, t }, _p$) => {
+			e !== _p$?.e && setAttribute(_el$9, "aria-label", e);
+			t !== _p$?.t && setAttribute(_el$9, "disabled", t);
+		});
+		runHydrationEvents();
+		return _el$9;
+	} }), _el$11, _el$12);
+	runHydrationEvents();
+	return _el$;
 }
 /**
 * Internal Calendar component that renders after client mount.
@@ -206,51 +231,65 @@ function CalendarInner(props) {
 		style: local.style,
 		defaultClassName: "solidaria-Calendar"
 	}, renderValues);
-	return createComponent(CalendarContext.Provider, {
+	return createComponent(CalendarContext, {
 		value: state,
 		get children() {
-			var _el$1 = getNextElement(_tmpl$4), _el$12 = _el$1.firstChild, [_el$13, _co$4] = getNextMarker(_el$12.nextSibling), _el$14 = _el$13.nextSibling, [_el$15, _co$5] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$6] = getNextMarker(_el$16.nextSibling);
-			use((el) => assignRef(local.ref, el), _el$1);
-			spread(_el$1, mergeProps(() => calendarAria.calendarProps, {
-				get ["class"]() {
+			var _el$13 = getNextElement(_tmpl$3);
+			var _el$15 = _el$13.firstChild;
+			var [_el$16, _el$17] = getNextMarker(_el$15.nextSibling);
+			var _el$18 = _el$16.nextSibling;
+			var [_el$19, _el$20] = getNextMarker(_el$18.nextSibling);
+			var _el$22 = _el$19.nextSibling;
+			var [_el$23, _el$24] = getNextMarker(_el$22.nextSibling);
+			ref(() => {
+				return (el) => assignRef$1(local.ref, el);
+			}, _el$13);
+			spread(_el$13, [() => {
+				return calendarAria.calendarProps;
+			}, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				},
-				get ["data-disabled"]() {
+				get "data-disabled"() {
 					return dataAttr(state.isDisabled());
 				},
-				get ["data-readonly"]() {
+				get "data-readonly"() {
 					return dataAttr(state.isReadOnly());
 				},
-				get ["data-invalid"]() {
+				get "data-invalid"() {
 					return dataAttr(state.isValueInvalid());
 				}
-			}), false, true);
-			insert(_el$1, createComponent(VisuallyHidden, { get children() {
-				var _el$10 = getNextElement(_tmpl$2);
-				insert(_el$10, () => String(calendarAria.calendarProps["aria-label"] ?? ""));
-				return _el$10;
-			} }), _el$13, _co$4);
-			insert(_el$1, () => props.children, _el$15, _co$5);
-			insert(_el$1, createComponent(VisuallyHidden, { get children() {
-				var _el$11 = getNextElement(_tmpl$3);
-				_el$11.$$click = () => state.focusNextPage();
-				effect((_p$) => {
-					var _v$3 = String(calendarAria.nextButtonProps["aria-label"] ?? ""), _v$4 = Boolean(calendarAria.nextButtonProps.disabled);
-					_v$3 !== _p$.e && setAttribute(_el$11, "aria-label", _p$.e = _v$3);
-					_v$4 !== _p$.t && setProperty(_el$11, "disabled", _p$.t = _v$4);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0
+			}], true);
+			insert(_el$13, createComponent(VisuallyHidden, { get children() {
+				var _el$14 = getNextElement(_tmpl$);
+				insert(_el$14, scope(() => {
+					return String(calendarAria.calendarProps["aria-label"] ?? "");
+				}));
+				return _el$14;
+			} }), _el$16, _el$17);
+			insert(_el$13, scope(() => {
+				return props.children;
+			}), _el$19, _el$20);
+			insert(_el$13, createComponent(VisuallyHidden, { get children() {
+				var _el$21 = getNextElement(_tmpl$2);
+				_el$21._$$click = () => state.focusNextPage();
+				effect(() => {
+					return {
+						e: String(calendarAria.nextButtonProps["aria-label"] ?? ""),
+						t: Boolean(calendarAria.nextButtonProps.disabled)
+					};
+				}, ({ e, t }, _p$) => {
+					e !== _p$?.e && setAttribute(_el$21, "aria-label", e);
+					t !== _p$?.t && setAttribute(_el$21, "disabled", t);
 				});
 				runHydrationEvents();
-				return _el$11;
-			} }), _el$17, _co$6);
+				return _el$21;
+			} }), _el$23, _el$24);
 			runHydrationEvents();
-			return _el$1;
+			return _el$13;
 		}
 	});
 }
@@ -268,23 +307,25 @@ function CalendarHeading(props) {
 		style: props.style,
 		defaultClassName: "solidaria-CalendarHeading"
 	}, renderValues);
-	return (() => {
-		var _el$18 = getNextElement(_tmpl$5);
-		insert(_el$18, (() => {
-			var _c$ = memo(() => typeof props.children === "function");
-			return () => _c$() ? renderProps.renderChildren() : state.title();
-		})());
-		effect((_p$) => {
-			var _v$5 = renderProps.class(), _v$6 = renderProps.style();
-			_v$5 !== _p$.e && className(_el$18, _p$.e = _v$5);
-			_p$.t = style(_el$18, _v$6, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
+	var _el$25 = getNextElement(_tmpl$4);
+	insert(_el$25, scope((() => {
+		var _c$ = memo(() => {
+			return typeof props.children === "function";
 		});
-		return _el$18;
-	})();
+		return () => {
+			return _c$() ? renderProps.renderChildren() : state.title();
+		};
+	})()));
+	effect(() => {
+		return {
+			e: readShallow(renderProps.class()),
+			t: readShallow(renderProps.style())
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$25, e, _p$?.e);
+		style(_el$25, t, _p$?.t);
+	});
+	return _el$25;
 }
 /**
 * A button for navigating the calendar.
@@ -296,27 +337,32 @@ function CalendarButton(props) {
 		if (props.slot === "previous") return calendarAria.prevButtonProps;
 		return calendarAria.nextButtonProps;
 	});
-	const isDisabled = () => props.isDisabled || state.isDisabled();
-	return (() => {
-		var _el$19 = getNextElement(_tmpl$6);
-		spread(_el$19, mergeProps(buttonProps, {
-			get ["class"]() {
-				return props.class ?? "solidaria-CalendarButton";
-			},
-			get style() {
-				return props.style;
-			},
-			get disabled() {
-				return isDisabled();
-			},
-			get tabindex() {
-				return isDisabled() ? void 0 : 0;
-			}
-		}), false, true);
-		insert(_el$19, () => props.children);
-		runHydrationEvents();
-		return _el$19;
-	})();
+	const isDisabled = () => props.isDisabled || Boolean(buttonProps().disabled) || state.isDisabled();
+	var _el$26 = getNextElement(_tmpl$5);
+	spread(_el$26, [buttonProps, {
+		get "class"() {
+			return props.class ?? "solidaria-CalendarButton";
+		},
+		get style() {
+			return props.style;
+		},
+		get disabled() {
+			return isDisabled();
+		},
+		get tabindex() {
+			return isDisabled() ? void 0 : 0;
+		},
+		onClick: (event) => {
+			const click = buttonProps().onClick;
+			click?.(event);
+			if (!isDisabled()) event.currentTarget.focus();
+		}
+	}], true);
+	insert(_el$26, scope(() => {
+		return props.children;
+	}));
+	runHydrationEvents();
+	return _el$26;
 }
 /**
 * Displays a grid of calendar cells.
@@ -330,9 +376,15 @@ function CalendarGrid(props) {
 		return offsetMonths ? baseStart.add({ months: offsetMonths }) : baseStart;
 	});
 	const gridAria = createCalendarGrid({
-		startDate: startDate(),
-		endDate: endOfMonth(startDate()),
-		weekdayStyle: props.weekdayStyle
+		get startDate() {
+			return startDate();
+		},
+		get endDate() {
+			return endOfMonth(startDate());
+		},
+		get weekdayStyle() {
+			return props.weekdayStyle;
+		}
 	}, state, gridRef);
 	const renderValues = createMemo(() => ({ isDisabled: state.isDisabled() }));
 	const renderProps = useRenderProps({
@@ -347,50 +399,63 @@ function CalendarGrid(props) {
 		for (let weekIndex = 0; weekIndex < numWeeks; weekIndex++) weekDates.push(state.getDatesInWeek(weekIndex, monthStart));
 		return weekDates;
 	});
-	return createComponent(CalendarGridMonthContext.Provider, {
+	return createComponent(CalendarGridMonthContext, {
 		value: startDate,
 		get children() {
-			var _el$20 = getNextElement(_tmpl$7), _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$21.nextSibling;
-			use(setGridRef, _el$20);
-			spread(_el$20, mergeProps(() => gridAria.gridProps, {
-				get ["class"]() {
+			var _el$27 = getNextElement(_tmpl$6);
+			var _el$28 = _el$27.firstChild;
+			var _el$29 = _el$28.firstChild;
+			var _el$30 = _el$28.nextSibling;
+			ref(() => {
+				return setGridRef;
+			}, _el$27);
+			spread(_el$27, [() => {
+				return coerceDomRecord(gridAria.gridProps);
+			}, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				}
-			}), false, true);
-			spread(_el$21, mergeProps(() => gridAria.headerProps), false, true);
-			insert(_el$22, createComponent(For, {
+			}], true);
+			spread(_el$28, () => {
+				return coerceDomRecord(gridAria.headerProps);
+			}, true);
+			insert(_el$29, createComponent(For, {
 				get each() {
 					return gridAria.weekDays;
 				},
 				children: (day) => (() => {
-					var _el$24 = getNextElement(_tmpl$8);
-					insert(_el$24, day);
-					effect(() => className(_el$24, props.headerCellClass ?? "solidaria-CalendarHeaderCell"));
-					return _el$24;
+					var _el$31 = getNextElement(_tmpl$7);
+					insert(_el$31, day);
+					effect(() => readShallow(props.headerCellClass ?? "solidaria-CalendarHeaderCell"), (_v$, _$p) => {
+						className(_el$31, _v$, _$p);
+					});
+					return _el$31;
 				})()
 			}));
-			insert(_el$23, createComponent(Index, {
+			insert(_el$30, createComponent(For, {
 				get each() {
 					return allDates();
 				},
+				keyed: false,
 				children: (weekDates, weekIndex) => (() => {
-					var _el$25 = getNextElement(_tmpl$9);
-					insert(_el$25, createComponent(Index, {
+					var _el$32 = getNextElement(_tmpl$8);
+					insert(_el$32, createComponent(For, {
 						get each() {
 							return weekDates();
 						},
+						keyed: false,
 						children: (date, dayIndex) => createComponent(Show, {
 							get when() {
 								return date();
 							},
 							get fallback() {
-								return getNextElement(_tmpl$0);
+								return getNextElement(_tmpl$9);
 							},
 							get children() {
-								return createComponent(CalendarGridCellPositionContext.Provider, {
+								return createComponent(CalendarGridCellPositionContext, {
 									value: () => ({
 										weekIndex,
 										dayIndex,
@@ -403,61 +468,61 @@ function CalendarGrid(props) {
 							}
 						})
 					}));
-					return _el$25;
+					return _el$32;
 				})()
 			}));
 			runHydrationEvents();
-			return _el$20;
+			return _el$27;
 		}
 	});
 }
 function CalendarGridHeader(props) {
-	return (() => {
-		var _el$27 = getNextElement(_tmpl$1);
-		insert(_el$27, () => props.children);
-		effect((_p$) => {
-			var _v$7 = props.class ?? "solidaria-CalendarGridHeader", _v$8 = props.style;
-			_v$7 !== _p$.e && className(_el$27, _p$.e = _v$7);
-			_p$.t = style(_el$27, _v$8, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$27;
-	})();
+	var _el$34 = getNextElement(_tmpl$10);
+	insert(_el$34, scope(() => {
+		return props.children;
+	}));
+	effect(() => {
+		return {
+			e: readShallow(props.class ?? "solidaria-CalendarGridHeader"),
+			t: readShallow(props.style)
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$34, e, _p$?.e);
+		style(_el$34, t, _p$?.t);
+	});
+	return _el$34;
 }
 function CalendarGridBody(props) {
-	return (() => {
-		var _el$28 = getNextElement(_tmpl$10);
-		insert(_el$28, () => props.children);
-		effect((_p$) => {
-			var _v$9 = props.class ?? "solidaria-CalendarGridBody", _v$0 = props.style;
-			_v$9 !== _p$.e && className(_el$28, _p$.e = _v$9);
-			_p$.t = style(_el$28, _v$0, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$28;
-	})();
+	var _el$35 = getNextElement(_tmpl$11);
+	insert(_el$35, scope(() => {
+		return props.children;
+	}));
+	effect(() => {
+		return {
+			e: readShallow(props.class ?? "solidaria-CalendarGridBody"),
+			t: readShallow(props.style)
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$35, e, _p$?.e);
+		style(_el$35, t, _p$?.t);
+	});
+	return _el$35;
 }
 function CalendarHeaderCell(props) {
-	return (() => {
-		var _el$29 = getNextElement(_tmpl$8);
-		insert(_el$29, () => props.children);
-		effect((_p$) => {
-			var _v$1 = props.class ?? "solidaria-CalendarHeaderCell", _v$10 = props.style;
-			_v$1 !== _p$.e && className(_el$29, _p$.e = _v$1);
-			_p$.t = style(_el$29, _v$10, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$29;
-	})();
+	var _el$36 = getNextElement(_tmpl$7);
+	insert(_el$36, scope(() => {
+		return props.children;
+	}));
+	effect(() => {
+		return {
+			e: readShallow(props.class ?? "solidaria-CalendarHeaderCell"),
+			t: readShallow(props.style)
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$36, e, _p$?.e);
+		style(_el$36, t, _p$?.t);
+	});
+	return _el$36;
 }
 /**
 * A cell in the calendar grid representing a single day.
@@ -509,62 +574,73 @@ function CalendarCell(props) {
 		defaultClassName: "solidaria-CalendarCellWrapper"
 	}, renderValues);
 	const getChildren = () => {
-		if (typeof props.children === "function") return renderProps.renderChildren();
+		if (typeof props.children === "function") return renderProps.renderChildrenStable();
 		return cellAria.formattedDate;
 	};
-	return (() => {
-		var _el$30 = getNextElement(_tmpl$11), _el$31 = _el$30.firstChild;
-		spread(_el$30, mergeProps(() => cellAria.cellProps, {
-			get ["class"]() {
-				return cellRenderProps.class();
-			},
-			get style() {
-				return cellRenderProps.style();
-			}
-		}), false, true);
-		use(setCellRef, _el$31);
-		spread(_el$31, mergeProps(() => cellAria.buttonProps, hoverProps, {
-			get ["class"]() {
+	var _el$37 = getNextElement(_tmpl$12);
+	var _el$38 = _el$37.firstChild;
+	spread(_el$37, [() => {
+		return coerceDomRecord(cellAria.cellProps);
+	}, {
+		get "class"() {
+			return cellRenderProps.class();
+		},
+		get style() {
+			return cellRenderProps.style();
+		}
+	}], true);
+	ref(() => {
+		return setCellRef;
+	}, _el$38);
+	spread(_el$38, [
+		() => {
+			return coerceDomRecord(cellAria.buttonProps);
+		},
+		hoverProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-selected"]() {
+			get "data-selected"() {
 				return dataAttr(cellAria.isSelected);
 			},
-			get ["data-focused"]() {
+			get "data-focused"() {
 				return dataAttr(cellAria.isFocused);
 			},
-			get ["data-focus-visible"]() {
+			get "data-focus-visible"() {
 				return dataAttr(cellAria.isFocusVisible);
 			},
-			get ["data-disabled"]() {
+			get "data-disabled"() {
 				return dataAttr(cellAria.isDisabled);
 			},
-			get ["data-unavailable"]() {
+			get "data-unavailable"() {
 				return dataAttr(cellAria.isUnavailable);
 			},
-			get ["data-invalid"]() {
+			get "data-invalid"() {
 				return dataAttr(cellAria.isInvalid);
 			},
-			get ["data-outside-month"]() {
+			get "data-outside-month"() {
 				return dataAttr(cellAria.isOutsideMonth);
 			},
-			get ["data-today"]() {
+			get "data-today"() {
 				return dataAttr(cellAria.isToday);
 			},
-			get ["data-pressed"]() {
+			get "data-pressed"() {
 				return dataAttr(cellAria.isPressed);
 			},
-			get ["data-hovered"]() {
+			get "data-hovered"() {
 				return dataAttr(isHovered());
 			}
-		}), false, true);
-		insert(_el$31, getChildren);
-		runHydrationEvents();
-		return _el$30;
-	})();
+		}
+	], true);
+	insert(_el$38, scope(() => {
+		return getChildren();
+	}));
+	runHydrationEvents();
+	return _el$37;
 }
 delegateEvents(["click"]);
 //#endregion