solid-baseui 0.1.0-alpha.0

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

@@ -0,0 +1,389 @@
+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 { composeEventHandlers } from "../internals/composeEventHandlers.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 { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey } from "@solidjs/web";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
+//#region src/switch/stateAttributesMapping.ts
+var switchStateAttributesMapping = {
+	...fieldStateAttributesMapping,
+	checked(value) {
+		return value ? { "data-checked": "" } : { "data-unchecked": "" };
+	}
+};
+//#endregion
+//#region src/switch/root/SwitchRootContext.ts
+var MISSING_CONTEXT = Symbol("SwitchRootContext");
+var SwitchRootContext = createContext(MISSING_CONTEXT);
+function useSwitchRootContext() {
+	const context = useContext(SwitchRootContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: SwitchRootContext is missing. Switch parts must be placed within <Switch.Root>.");
+	return context;
+}
+//#endregion
+//#region src/switch/root/SwitchRoot.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 the visible switch and renders a hidden native checkbox beside it. */
+function SwitchRoot(props) {
+	const field = useFieldRootContext(true);
+	const formContext = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const source = Symbol("Switch");
+	const labelSource = Symbol("SwitchLabelSource");
+	const ownInputId = `base-ui-${createUniqueId()}`;
+	const ownRootId = `base-ui-${createUniqueId()}`;
+	const ownLabelId = `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(() => Boolean(untrack(() => internalProps.defaultChecked)));
+	const [rootElement, setRootElement] = createSignal();
+	const [inputElement, setInputElement] = createSignal();
+	const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = createSignal();
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "checked", "class", "defaultChecked", "disabled", "form", "id", "inputRef", "name", "nativeButton", "onBlur", "onChange", "onCheckedChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "readOnly", "ref", "required", "style", "uncheckedValue", "value");
+	const checked = createMemo(() => controlled ? Boolean(internalProps.checked) : uncontrolledChecked());
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? false);
+	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
+	const readOnly = createMemo(() => internalProps.readOnly ?? false);
+	const required = createMemo(() => internalProps.required ?? false);
+	const name = createMemo(() => field.name() ?? internalProps.name);
+	const inputId = createMemo(() => internalProps.id ?? fallbackInputId);
+	const rootId = createMemo(() => nativeButton() ? inputId() : ownRootId);
+	const state = createMemo(() => ({
+		...field.state(),
+		checked: checked(),
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), switchStateAttributesMapping));
+	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
+	const rootAriaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
+	const inputAriaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(void 0));
+	let previousChecked = untrack(checked);
+	const registration = {
+		id: ownRootId,
+		name: internalProps.name,
+		value: checked,
+		getControl: () => rootElement() ?? null
+	};
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => handleRootClick);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleRootFocus);
+	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleRootBlur);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeKeyUp));
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onMouseDown);
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
+	function handleRootClick(event) {
+		if (readOnly() || disabled()) return;
+		event.preventDefault();
+		const input = inputElement();
+		if (input) dispatchClickWithModifiers(input, event);
+	}
+	function handleRootFocus() {
+		if (!disabled()) field.setFocused(true);
+	}
+	function handleRootBlur() {
+		if (!inputElement() || disabled()) return;
+		field.setTouched(true);
+		field.setFocused(false);
+		if (field.validationMode() === "onBlur") field.validation.commit(checked());
+	}
+	function syncInputChecked() {
+		const input = inputElement();
+		if (input) input.checked = untrack(checked);
+	}
+	createEffect(() => ({
+		disabled: disabled(),
+		element: rootElement(),
+		name: internalProps.name
+	}), (current) => {
+		registration.name = current.name;
+		field.registerFieldControl(source, current.disabled || !current.element ? void 0 : registration);
+	});
+	createEffect(() => ({
+		input: inputElement(),
+		id: inputId()
+	}), (current) => {
+		labelable.registerControlId(labelSource, current.input ? current.id : void 0);
+	});
+	createEffect(() => ({
+		input: inputElement(),
+		disabled: disabled()
+	}), (current) => {
+		if (!current.input || current.disabled) return;
+		return field.validation.registerInput(source, current.input, () => untrack(() => rootElement() ?? null));
+	});
+	createEffect(() => ({
+		explicit: internalProps["aria-labelledby"],
+		fieldLabel: labelable.labelId(),
+		input: inputElement(),
+		inputId: inputId(),
+		nativeButton: nativeButton()
+	}), (current) => {
+		if (current.explicit || current.fieldLabel || current.nativeButton || !current.input) {
+			setFallbackAriaLabelledBy(void 0);
+			return;
+		}
+		const label = current.input.closest("label") ?? current.input.labels?.[0];
+		if (!label) {
+			setFallbackAriaLabelledBy(void 0);
+			return;
+		}
+		if (!label.id) label.id = ownLabelId;
+		setFallbackAriaLabelledBy(label.id || void 0);
+	});
+	createEffect(() => ({
+		checked: checked(),
+		initialValue: field.validityData().initialValue,
+		name: name()
+	}), (current) => {
+		if (current.checked === previousChecked) return;
+		previousChecked = current.checked;
+		untrack(() => {
+			formContext.clearError(current.name);
+			field.setDirty(current.checked !== current.initialValue);
+			field.setFilled(current.checked);
+			field.validation.change(current.checked);
+		});
+	});
+	createEffect(() => inputElement(), (input) => {
+		if (!input) return;
+		return listenForFormReset(input, syncInputChecked);
+	});
+	onSettled(() => {
+		field.setFilled(checked());
+		rootElement();
+	});
+	onCleanup(() => {
+		field.registerFieldControl(source, void 0);
+		labelable.registerControlId(labelSource, void 0);
+	});
+	return SwitchRootContext({
+		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: "switch",
+					get tabIndex() {
+						return disabled() && !nativeButton() ? -1 : 0;
+					},
+					get disabled() {
+						return nativeButton() && disabled() ? true : void 0;
+					},
+					get ["aria-disabled"]() {
+						return !nativeButton() && disabled() ? "true" : void 0;
+					},
+					get ["aria-checked"]() {
+						return 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 rootAriaDescribedBy();
+					},
+					get ["aria-invalid"]() {
+						return state().valid === false && !disabled() ? "true" : void 0;
+					},
+					onClick,
+					onFocus,
+					onBlur,
+					onKeyDown,
+					onKeyUp,
+					onMouseDown,
+					onPointerDown
+				}, stateAttributes, others)),
+				memo(() => {
+					var _v$, _g$, _v$5, _v$4;
+					return escape(memo(() => {
+						return !!(!checked() && name() && internalProps.uncheckedValue !== void 0);
+					})() ? (_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)) : !checked() && name() && internalProps.uncheckedValue !== void 0);
+				}),
+				ssrElement("input", () => {
+					return mergeProps({
+						type: "checkbox",
+						get form() {
+							return internalProps.form;
+						},
+						get id() {
+							return nativeButton() ? void 0 : inputId();
+						},
+						get name() {
+							return name();
+						},
+						tabindex: -1,
+						get style() {
+							return name() ? HIDDEN_NAMED_INPUT_STYLE : HIDDEN_INPUT_STYLE;
+						},
+						"aria-hidden": "true",
+						get ["aria-describedby"]() {
+							return inputAriaDescribedBy();
+						},
+						get ["aria-invalid"]() {
+							return state().valid === false && !disabled() ? "true" : void 0;
+						},
+						get disabled() {
+							return disabled();
+						},
+						get checked() {
+							return checked();
+						},
+						get required() {
+							return required();
+						}
+					}, () => {
+						return internalProps.value === void 0 ? {} : { value: internalProps.value };
+					});
+				}, void 0, true)
+			];
+		}
+	});
+}
+function preventInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function handleNonNativeKeyDown(event) {
+	if (event.target !== event.currentTarget) return;
+	const isLink = isValidLinkElement(event.currentTarget);
+	const isEnter = event.key === "Enter";
+	const isSpace = event.key === " ";
+	if (isLink || !isEnter && !isSpace) {
+		if (isLink && isSpace) event.preventDefault();
+		return;
+	}
+	if (event.defaultPrevented) return;
+	event.preventDefault();
+	if (isEnter) {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+}
+function handleNonNativeKeyUp(event) {
+	if (event.target === event.currentTarget && !event.defaultPrevented && event.key === " ") {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+}
+function isValidLinkElement(element) {
+	return element.tagName === "A" && Boolean(element.href);
+}
+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 listenForFormReset(input, syncChecked) {
+	const handleReset = (event) => {
+		if (event.target === input.form) queueMicrotask(syncChecked);
+	};
+	const targets = /* @__PURE__ */ new Set([input.ownerDocument, input.getRootNode()]);
+	for (const target of targets) target.addEventListener("reset", handleReset);
+	return () => {
+		for (const target of targets) target.removeEventListener("reset", handleReset);
+	};
+}
+//#endregion
+//#region src/switch/thumb/SwitchThumb.tsx
+/** The movable part that indicates whether the enclosing switch is on or off. */
+function SwitchThumb(props) {
+	const rootState = useSwitchRootContext();
+	const others = omit(props, "as", "class", "style");
+	const state = createMemo(() => rootState());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), switchStateAttributesMapping));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "span";
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/switch/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Root: () => SwitchRoot,
+	Thumb: () => SwitchThumb
+});
+//#endregion
+export { index_parts_exports as Switch };