solid-baseui 0.1.0-alpha.0

package/dist/lib/server/checkbox/index.js

@@ -0,0 +1,537 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { fieldStateAttributesMapping } from "../internals/field-constants.js";
+import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { n as useFormContext } from "../FormContext-pvESt85v.js";
+import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { n as useFieldItemContext } from "../FieldItemContext-x-C7ZlmX.js";
+import { n as useCheckboxGroupContext } from "../CheckboxGroupContext-DTP679kK.js";
+import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
+//#region src/checkbox/utils/getCheckboxStateAttributesMapping.ts
+function getCheckboxStateAttributesMapping(state) {
+	return {
+		...fieldStateAttributesMapping,
+		checked(value) {
+			if (state.indeterminate) return null;
+			return value ? { "data-checked": "" } : { "data-unchecked": "" };
+		}
+	};
+}
+//#endregion
+//#region src/checkbox/root/CheckboxRootContext.ts
+var MISSING_CONTEXT = Symbol("CheckboxRootContext");
+var CheckboxRootContext = createContext(MISSING_CONTEXT);
+function useCheckboxRootContext() {
+	const context = useContext(CheckboxRootContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>.");
+	return context;
+}
+//#endregion
+//#region src/checkbox/root/CheckboxRoot.tsx
+var _tmpl$ = [
+	"<input",
+	" type=\"hidden\"",
+	"",
+	"",
+	"",
+	">"
+];
+var HIDDEN_INPUT_STYLE = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: "0",
+	padding: "0",
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: "0",
+	left: "0"
+};
+var HIDDEN_NAMED_INPUT_STYLE = {
+	...HIDDEN_INPUT_STYLE,
+	position: "absolute"
+};
+/** Represents a visible checkbox and renders a hidden native checkbox beside it. */
+function CheckboxRoot(props) {
+	var _v$, _g$, _v$5, _v$4;
+	const field = useFieldRootContext(true);
+	const form = useFormContext();
+	const item = useFieldItemContext();
+	const labelable = useLabelableContext();
+	const group = useCheckboxGroupContext();
+	const internalProps = props;
+	const allProps = props;
+	const fieldControlSource = Symbol("Checkbox");
+	const labelSource = Symbol("CheckboxLabelSource");
+	const token = Symbol("CheckboxGroupItem");
+	const ownInputId = `base-ui-${createUniqueId()}`;
+	const ownRootId = `base-ui-${createUniqueId()}`;
+	const ownLabelId = `base-ui-${createUniqueId()}`;
+	const parentInputId = `base-ui-${createUniqueId()}`;
+	const inheritedControlId = untrack(labelable.controlId);
+	const fallbackInputId = typeof inheritedControlId === "string" ? inheritedControlId : ownInputId;
+	const controlled = untrack(() => internalProps.checked !== void 0);
+	const [uncontrolledChecked, setUncontrolledChecked] = createSignal(untrack(() => internalProps.defaultChecked ?? false));
+	const [rootElement, setRootElement] = createSignal();
+	const [inputElement, setInputElement] = createSignal();
+	const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = createSignal();
+	let previousChecked = untrack(() => controlled ? Boolean(internalProps.checked) : uncontrolledChecked());
+	let suppressEnterClick = false;
+	let generatedLabel;
+	let stopEnterSuppression = () => void 0;
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "checked", "class", "defaultChecked", "disabled", "form", "id", "indeterminate", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "parent", "readOnly", "ref", "required", "style", "uncheckedValue", "value");
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? false);
+	const parent = createMemo(() => internalProps.parent ?? false);
+	const parentEnabled = createMemo(() => group?.allValues() !== void 0);
+	const disabled = createMemo(() => field.disabled() || item.disabled() || (group?.disabled() ?? false) || (internalProps.disabled ?? false));
+	const readOnly = createMemo(() => internalProps.readOnly ?? false);
+	const required = createMemo(() => internalProps.required ?? false);
+	const name = createMemo(() => field.name() ?? internalProps.name);
+	const value = createMemo(() => internalProps.value ?? name());
+	const ownChecked = createMemo(() => controlled ? Boolean(internalProps.checked) : uncontrolledChecked());
+	const checked = createMemo(() => {
+		if (!group || value() === void 0 || parent()) return parentEnabled() && parent() ? group?.parent.checked() ?? false : ownChecked();
+		return group.value().includes(value());
+	});
+	const indeterminate = createMemo(() => parentEnabled() && parent() ? (group?.parent.indeterminate() ?? false) || (internalProps.indeterminate ?? false) : internalProps.indeterminate ?? false);
+	const inputId = createMemo(() => {
+		if (!parentEnabled()) return internalProps.id || fallbackInputId;
+		if (parent()) return parentInputId;
+		const checkboxValue = value();
+		return checkboxValue === void 0 ? internalProps.id || fallbackInputId || ownInputId : `${group?.parent.id}-${checkboxValue}`;
+	});
+	const rootId = createMemo(() => {
+		if (parentEnabled() && parent()) return group?.parent.id;
+		return nativeButton() ? inputId() : ownRootId;
+	});
+	const state = createMemo(() => ({
+		...field.state(),
+		checked: checked(),
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required(),
+		indeterminate: indeterminate()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), getCheckboxStateAttributesMapping(state())));
+	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
+	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
+	const checkbox = {
+		token,
+		disabled,
+		element: rootElement,
+		input: inputElement,
+		parent,
+		value
+	};
+	const registration = {
+		id: ownRootId,
+		name: internalProps.name,
+		value: checked,
+		getControl: () => rootElement() ?? null
+	};
+	const callExternalBlur = composeEventHandlers(() => internalProps.onBlur);
+	const callExternalClick = composeEventHandlers(() => internalProps.onClick);
+	const callExternalFocus = composeEventHandlers(() => internalProps.onFocus);
+	const callExternalKeyDown = composeEventHandlers(() => internalProps.onKeyDown);
+	const callExternalKeyUp = composeEventHandlers(() => internalProps.onKeyUp);
+	function handleClick(event) {
+		if (suppressEnterClick) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		callExternalClick.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented || readOnly() || disabled()) return;
+		event.preventDefault();
+		const input = inputElement();
+		if (input) dispatchClickWithModifiers(input, event);
+	}
+	function handleFocus(event) {
+		callExternalFocus.call(event.currentTarget, event);
+		if (!event.baseUIHandlerPrevented && !disabled()) field.setFocused(true);
+	}
+	function handleBlur(event) {
+		callExternalBlur.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		field.setTouched(true);
+		field.setFocused(false);
+		if (field.validationMode() === "onBlur") field.validation.commit(group ? group.value() : checked());
+	}
+	function handleKeyDown(event) {
+		callExternalKeyDown.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		if (event.key === "Enter") {
+			if (nativeButton()) beginEnterSuppression(event.currentTarget);
+			scheduleImplicitSubmission(event, inputElement()?.form ?? null);
+		} else if (!nativeButton() && event.key === " ") event.preventDefault();
+	}
+	function handleKeyUp(event) {
+		callExternalKeyUp.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented || nativeButton() || event.defaultPrevented || event.key !== " " || disabled() || readOnly()) return;
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+	function getRootControl() {
+		return rootElement() ?? null;
+	}
+	function beginEnterSuppression(element) {
+		stopEnterSuppression();
+		suppressEnterClick = true;
+		const ownerDocument = element.ownerDocument;
+		const ownerWindow = ownerDocument.defaultView;
+		let keyupTimeout;
+		const fallbackTimeout = ownerWindow?.setTimeout(clear, 1e3);
+		function clear() {
+			suppressEnterClick = false;
+			ownerDocument.removeEventListener("keyup", handleKeyUp, true);
+			ownerWindow?.removeEventListener("blur", clear);
+			if (keyupTimeout !== void 0) clearTimeout(keyupTimeout);
+			if (fallbackTimeout !== void 0) clearTimeout(fallbackTimeout);
+			stopEnterSuppression = () => void 0;
+		}
+		function handleKeyUp(event) {
+			if (event.key === "Enter") keyupTimeout = setTimeout(clear, 0);
+		}
+		ownerDocument.addEventListener("keyup", handleKeyUp, true);
+		ownerWindow?.addEventListener("blur", clear, { once: true });
+		stopEnterSuppression = clear;
+	}
+	function clearGeneratedLabel(except) {
+		if (generatedLabel && generatedLabel !== except && generatedLabel.id === ownLabelId) generatedLabel.removeAttribute("id");
+		if (generatedLabel !== except) generatedLabel = void 0;
+	}
+	createEffect(inputId, (id) => labelable.registerControlId(labelSource, id));
+	createEffect(() => ({
+		explicit: internalProps["aria-labelledby"],
+		fieldLabel: labelable.labelId(),
+		input: inputElement(),
+		inputId: inputId(),
+		nativeButton: nativeButton()
+	}), (current) => {
+		function updateLabel() {
+			if (current.explicit || current.fieldLabel || current.nativeButton || !current.input) {
+				clearGeneratedLabel();
+				setFallbackAriaLabelledBy(void 0);
+				return;
+			}
+			const label = current.input.closest("label") ?? current.input.labels?.[0];
+			if (!label) {
+				clearGeneratedLabel();
+				setFallbackAriaLabelledBy(void 0);
+				return;
+			}
+			clearGeneratedLabel(label);
+			if (!label.id) {
+				label.id = ownLabelId;
+				generatedLabel = label;
+			}
+			setFallbackAriaLabelledBy(label.id || void 0);
+		}
+		updateLabel();
+		if (current.explicit || current.fieldLabel || current.nativeButton || !current.input || typeof MutationObserver === "undefined") return;
+		let observedRoot;
+		const observer = new MutationObserver(() => {
+			updateLabel();
+			observeCurrentRoot();
+		});
+		function observeCurrentRoot() {
+			const nextRoot = current.input?.getRootNode();
+			if (!nextRoot || nextRoot === observedRoot) return;
+			observer.disconnect();
+			observedRoot = nextRoot;
+			observer.observe(nextRoot, {
+				attributes: true,
+				attributeFilter: ["for", "id"],
+				childList: true,
+				subtree: true
+			});
+		}
+		observeCurrentRoot();
+		return () => {
+			observer.disconnect();
+			clearGeneratedLabel();
+		};
+	});
+	createEffect(() => group, (currentGroup) => currentGroup?.registerCheckbox(checkbox));
+	createEffect(() => ({
+		group,
+		input: inputElement(),
+		parent: parent()
+	}), (current) => {
+		if (!current.input || current.parent) return;
+		const source = current.group?.fieldControlSource ?? fieldControlSource;
+		return field.validation.registerInput(source, current.input, getRootControl);
+	});
+	createEffect(() => ({
+		checked: checked(),
+		group,
+		indeterminate: indeterminate(),
+		input: inputElement(),
+		name: name()
+	}), (current) => {
+		if (current.input) current.input.indeterminate = current.indeterminate;
+		if (current.group || current.checked === previousChecked) return;
+		previousChecked = current.checked;
+		untrack(() => {
+			form.clearError(current.name);
+			field.setFilled(current.checked);
+			field.setDirty(current.checked !== field.validityData().initialValue);
+			field.validation.change(current.checked);
+		});
+	});
+	createEffect(() => ({
+		disabled: disabled(),
+		group,
+		name: internalProps.name,
+		root: rootElement()
+	}), (current) => {
+		registration.name = current.name;
+		field.registerFieldControl(fieldControlSource, !current.group && !current.disabled && current.root ? registration : void 0);
+	});
+	onSettled(() => {
+		if (checked()) field.setFilled(true);
+		rootElement();
+	});
+	onCleanup(() => {
+		stopEnterSuppression();
+		clearGeneratedLabel();
+		labelable.registerControlId(labelSource, void 0);
+		field.registerFieldControl(fieldControlSource, void 0);
+	});
+	return CheckboxRootContext({
+		value: state,
+		get children() {
+			return [
+				Dynamic(mergeProps({
+					get component() {
+						return props.as ?? "span";
+					},
+					ref: [((element) => setRootElement(element)), internalProps.ref],
+					get id() {
+						return rootId();
+					},
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					},
+					get type() {
+						return nativeButton() ? "button" : void 0;
+					},
+					role: "checkbox",
+					get tabIndex() {
+						return disabled() ? -1 : 0;
+					},
+					get disabled() {
+						return nativeButton() && disabled() ? true : void 0;
+					},
+					get ["aria-disabled"]() {
+						return !nativeButton() && disabled() ? "true" : void 0;
+					},
+					get ["aria-checked"]() {
+						return memo(() => {
+							return !!indeterminate();
+						})() ? "mixed" : checked() ? "true" : "false";
+					},
+					get ["aria-readonly"]() {
+						return readOnly() ? "true" : void 0;
+					},
+					get ["aria-required"]() {
+						return required() ? "true" : void 0;
+					},
+					get ["aria-labelledby"]() {
+						return ariaLabelledBy();
+					},
+					get ["aria-describedby"]() {
+						return ariaDescribedBy();
+					},
+					get ["aria-invalid"]() {
+						return state().valid === false && !disabled() ? "true" : void 0;
+					},
+					get ["data-parent"]() {
+						return parent() ? "" : void 0;
+					},
+					get ["aria-controls"]() {
+						return memo(() => {
+							return !!(parentEnabled() && parent());
+						})() ? group?.parent.ariaControls() : void 0;
+					},
+					onBlur: handleBlur,
+					onClick: handleClick,
+					onFocus: handleFocus,
+					onKeyDown: handleKeyDown,
+					onKeyUp: handleKeyUp
+				}, stateAttributes, others)),
+				Show({
+					get when() {
+						return memo(() => {
+							return !!(!checked() && !group && name() && !parent());
+						})() ? internalProps.uncheckedValue !== void 0 : !checked() && !group && name() && !parent();
+					},
+					get children() {
+						return _v$ = ssrHydrationKey(), _g$ = ssrGroup(() => {
+							return [ssrAttribute("form", escape(internalProps.form, true)), ssrAttribute("name", escape(name(), true))];
+						}, 2), _v$5 = () => {
+							return ssrAttribute("disabled", escape(disabled(), true));
+						}, _v$4 = () => {
+							return ssrAttribute("value", escape(internalProps.uncheckedValue, true));
+						}, ssr(_tmpl$, _v$, _g$, _g$, _v$4, _v$5);
+					}
+				}),
+				ssrElement("input", () => {
+					return mergeProps({
+						type: "checkbox",
+						get form() {
+							return internalProps.form;
+						},
+						get id() {
+							return nativeButton() ? void 0 : inputId();
+						},
+						get name() {
+							return parent() ? void 0 : name();
+						},
+						tabindex: -1,
+						get style() {
+							return name() ? HIDDEN_NAMED_INPUT_STYLE : HIDDEN_INPUT_STYLE;
+						},
+						"aria-hidden": "true",
+						get ["aria-describedby"]() {
+							return ariaDescribedBy();
+						},
+						get ["aria-invalid"]() {
+							return state().valid === false && !disabled() ? "true" : void 0;
+						}
+					}, () => {
+						return internalProps.value === void 0 ? {} : { value: group && !checked() ? "" : internalProps.value };
+					}, {
+						get disabled() {
+							return disabled();
+						},
+						get checked() {
+							return checked();
+						},
+						get required() {
+							return required();
+						}
+					});
+				}, void 0, true)
+			];
+		}
+	});
+}
+function dispatchClickWithModifiers(target, sourceEvent) {
+	const ownerWindow = target.ownerDocument.defaultView;
+	if (!ownerWindow) return;
+	const ClickEvent = ownerWindow.PointerEvent ?? ownerWindow.MouseEvent;
+	target.dispatchEvent(new ClickEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		detail: 0,
+		shiftKey: sourceEvent.shiftKey,
+		ctrlKey: sourceEvent.ctrlKey,
+		altKey: sourceEvent.altKey,
+		metaKey: sourceEvent.metaKey
+	}));
+}
+function scheduleImplicitSubmission(event, form) {
+	if (event.defaultPrevented) return;
+	queueMicrotask(() => {
+		if (!event.defaultPrevented) getDefaultFormSubmitter(form)?.click();
+	});
+}
+function getDefaultFormSubmitter(form) {
+	if (!form) return null;
+	for (const candidate of form.elements) if ((candidate.tagName === "BUTTON" || candidate.tagName === "INPUT") && candidate.type === "submit") return candidate;
+	return null;
+}
+//#endregion
+//#region src/checkbox/indicator/CheckboxIndicator.tsx
+/** Indicates whether the enclosing checkbox is checked or indeterminate. */
+function CheckboxIndicator(props) {
+	let indicatorElement;
+	let latestRendered = false;
+	const rootState = useCheckboxRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "keepMounted", "ref", "style");
+	const rendered = createMemo(() => rootState().checked || rootState().indeterminate);
+	const transition = createTransitionStatus(() => rendered());
+	const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || transition.mounted());
+	const state = createMemo(() => ({
+		...rootState(),
+		transitionStatus: transition.transitionStatus()
+	}));
+	const classValue = createMemo(() => shouldRender() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => shouldRender() ? resolveStyle(props.style, state()) : void 0);
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), {
+		...getCheckboxStateAttributesMapping(state()),
+		...transitionStatusMapping
+	}));
+	createEffect(() => ({
+		element: indicatorElement,
+		rendered: rendered(),
+		status: transition.transitionStatus()
+	}), (current) => {
+		latestRendered = current.rendered;
+		if (current.rendered || current.status !== "ending" || !current.element) return;
+		const abortController = new AbortController();
+		runOnceAnimationsFinish(current.element, () => {
+			if (!latestRendered) transition.setMounted(false);
+		}, abortController.signal);
+		return () => abortController.abort();
+	});
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return Show({
+				get when() {
+					return props.as;
+				},
+				get fallback() {
+					return ssrElement("span", () => {
+						return mergeProps({
+							get ["class"]() {
+								return classValue();
+							},
+							get style() {
+								return styleValue();
+							}
+						}, stateAttributes, others);
+					}, void 0, true);
+				},
+				children: (component) => Dynamic(mergeProps({
+					get component() {
+						return component();
+					},
+					ref: [internalProps.ref, ((element) => indicatorElement = element)],
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					}
+				}, stateAttributes, others))
+			});
+		}
+	});
+}
+//#endregion
+//#region src/checkbox/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => CheckboxIndicator,
+	Root: () => CheckboxRoot
+});
+//#endregion
+export { index_parts_exports as Checkbox };