solid-baseui 0.1.0-alpha.0

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

@@ -0,0 +1,198 @@
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.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 { t as CheckboxGroupContext } from "../CheckboxGroupContext-DTP679kK.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
+//#region src/checkbox-group/CheckboxGroup.tsx
+var EMPTY_VALUE = [];
+/** Provides shared selection and form state to a series of checkboxes. */
+function CheckboxGroup(props) {
+	const field = useFieldRootContext(true);
+	const form = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const fieldControlSource = Symbol("CheckboxGroup");
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const parentId = `base-ui-${createUniqueId()}`;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(() => [...untrack(() => internalProps.defaultValue) ?? EMPTY_VALUE]);
+	const [rootElement, setRootElement] = createSignal();
+	const [parentStatus, setParentStatus] = createSignal("mixed");
+	const checkboxes = /* @__PURE__ */ new Map();
+	let childSnapshot = untrack(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
+	let valueSnapshot = childSnapshot;
+	let previousValue = childSnapshot;
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "allValues", "as", "class", "defaultValue", "disabled", "onValueChange", "ref", "style", "value");
+	const value = createMemo(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
+	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
+	const state = createMemo(() => ({
+		...field.state(),
+		disabled: disabled()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
+	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId());
+	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
+	const parentChecked = createMemo(() => value().length === (internalProps.allValues ?? EMPTY_VALUE).length);
+	const parentIndeterminate = createMemo(() => value().length > 0 && value().length !== (internalProps.allValues ?? EMPTY_VALUE).length);
+	const parentAriaControls = createMemo(() => (internalProps.allValues ?? EMPTY_VALUE).map((itemValue) => `${parentId}-${itemValue}`).join(" "));
+	function registerCheckbox(checkbox) {
+		checkboxes.set(checkbox.token, checkbox);
+		return () => checkboxes.delete(checkbox.token);
+	}
+	function setValue(nextValue, details) {
+		internalProps.onValueChange?.(nextValue, details);
+		if (details.isCanceled) return false;
+		if (!controlled) {
+			valueSnapshot = nextValue;
+			setUncontrolledValue(nextValue);
+		}
+		return true;
+	}
+	function isChildDisabled(childValue) {
+		for (const checkbox of checkboxes.values()) if (!checkbox.parent() && checkbox.value() === childValue) return checkbox.disabled();
+		return false;
+	}
+	function changeParent(details) {
+		const allValues = internalProps.allValues ?? EMPTY_VALUE;
+		const none = allValues.filter((itemValue) => isChildDisabled(itemValue) && childSnapshot.includes(itemValue));
+		const all = allValues.filter((itemValue) => !isChildDisabled(itemValue) || childSnapshot.includes(itemValue));
+		const allOnOrOff = childSnapshot.length === all.length || childSnapshot.length === 0;
+		let nextValue;
+		let nextStatus = "mixed";
+		if (allOnOrOff) nextValue = getCurrentValue().length === all.length ? none : all;
+		else if (parentStatus() === "mixed") {
+			nextValue = all;
+			nextStatus = "on";
+		} else if (parentStatus() === "on") {
+			nextValue = none;
+			nextStatus = "off";
+		} else nextValue = childSnapshot;
+		if (!setValue(nextValue, details)) return false;
+		if (!allOnOrOff) setParentStatus(nextStatus);
+		return true;
+	}
+	function changeChild(childValue, checked, details) {
+		const nextValue = getCurrentValue().slice();
+		if (checked) nextValue.push(childValue);
+		else {
+			const index = nextValue.indexOf(childValue);
+			if (index !== -1) nextValue.splice(index, 1);
+		}
+		if (!setValue(nextValue, details)) return false;
+		childSnapshot = nextValue;
+		setParentStatus("mixed");
+		return true;
+	}
+	function getFormValue() {
+		const formElement = form.formElement();
+		if (!formElement) return getCurrentValue();
+		const successfulValues = /* @__PURE__ */ new Set();
+		for (const checkbox of checkboxes.values()) {
+			const input = checkbox.input();
+			const checkboxValue = checkbox.value();
+			if (input && !checkbox.parent() && checkboxValue !== void 0 && input.checked && isEligibleInput(input, formElement)) successfulValues.add(checkboxValue);
+		}
+		return getCurrentValue().filter((itemValue) => successfulValues.has(itemValue));
+	}
+	function getCurrentValue() {
+		return controlled ? value() : valueSnapshot;
+	}
+	const registration = {
+		id: generatedId,
+		name: void 0,
+		value,
+		getValue: getFormValue,
+		getControl: () => field.validation.getInputControl()
+	};
+	const context = {
+		allValues: () => internalProps.allValues,
+		disabled,
+		fieldControlSource,
+		getValue: getCurrentValue,
+		parent: {
+			id: parentId,
+			checked: parentChecked,
+			indeterminate: parentIndeterminate,
+			ariaControls: parentAriaControls,
+			changeParent,
+			changeChild
+		},
+		registerCheckbox,
+		setValue,
+		value
+	};
+	createEffect(() => ({
+		disabled: disabled(),
+		element: rootElement(),
+		id: internalProps.id ?? generatedId,
+		name: field.name()
+	}), (current) => {
+		registration.id = current.id;
+		registration.name = current.name;
+		field.registerFieldControl(fieldControlSource, current.name && !current.disabled && current.element ? registration : void 0);
+	});
+	createEffect(() => ({
+		initialValue: field.validityData().initialValue,
+		name: field.name(),
+		value: value()
+	}), (current) => {
+		if (current.value === previousValue) return;
+		previousValue = current.value;
+		valueSnapshot = current.value;
+		untrack(() => {
+			form.clearError(current.name);
+			field.setFilled(current.value.length > 0);
+			field.setDirty(!areArraysEqual(current.value, current.initialValue));
+			field.validation.change(current.value);
+		});
+	});
+	onSettled(() => {
+		field.setFilled(value().length > 0);
+	});
+	onCleanup(() => field.registerFieldControl(fieldControlSource, void 0));
+	return CheckboxGroupContext({
+		value: context,
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => setRootElement(element)), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "group",
+				get ["aria-labelledby"]() {
+					return ariaLabelledBy();
+				},
+				get ["aria-describedby"]() {
+					return ariaDescribedBy();
+				},
+				get ["aria-invalid"]() {
+					return state().valid === false && !disabled() ? "true" : void 0;
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+function areArraysEqual(value, initialValue) {
+	if (!Array.isArray(initialValue) || value.length !== initialValue.length) return false;
+	return value.every((item, index) => item === initialValue[index]);
+}
+function isEligibleInput(input, form) {
+	if (input.matches(":disabled")) return false;
+	if (input.form === form) return true;
+	return input.form === null && !input.hasAttribute("form");
+}
+//#endregion
+export { CheckboxGroup };

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

@@ -0,0 +1,307 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { N as triggerPress, w as none } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { n as createCollapsibleTransitionStatus, t as createCollapsiblePanel } from "../createCollapsiblePanel-DTyVJz0G.js";
+import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { Dynamic, memo, mergeProps, ssrElement } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/collapsible/root/CollapsibleRootContext.ts
+var MISSING_CONTEXT = Symbol("CollapsibleRootContext");
+var CollapsibleRootContext = createContext(MISSING_CONTEXT);
+function useCollapsibleRootContext() {
+	const context = useContext(CollapsibleRootContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>.");
+	return context;
+}
+//#endregion
+//#region src/collapsible/root/stateAttributesMapping.ts
+var OPEN_HOOK = { "data-open": "" };
+var CLOSED_HOOK = { "data-closed": "" };
+var PANEL_OPEN_HOOK = { "data-panel-open": "" };
+var collapsibleStateAttributesMapping = {
+	open(value) {
+		return value ? OPEN_HOOK : CLOSED_HOOK;
+	},
+	...transitionStatusMapping
+};
+var collapsibleTriggerStateAttributesMapping = {
+	open(value) {
+		return value ? PANEL_OPEN_HOOK : null;
+	},
+	...transitionStatusMapping
+};
+//#endregion
+//#region src/collapsible/root/CollapsibleRoot.tsx
+/** Groups all parts of the collapsible. Renders a `<div>` element by default. */
+function CollapsibleRoot(props) {
+	const allProps = props;
+	const rootProps = props;
+	const controlled = untrack(() => rootProps.open !== void 0);
+	const [uncontrolledOpen, setUncontrolledOpen] = createSignal(untrack(() => rootProps.defaultOpen ?? false));
+	const [registeredPanelId, setPanelIdState] = createSignal();
+	const defaultPanelId = `base-ui-${createUniqueId()}`;
+	const others = omit(allProps, "as", "class", "defaultOpen", "disabled", "onOpenChange", "open", "style");
+	const open = createMemo(() => controlled ? rootProps.open ?? false : uncontrolledOpen());
+	const disabled = createMemo(() => rootProps.disabled ?? false);
+	const transition = createCollapsibleTransitionStatus(() => open());
+	const panelId = createMemo(() => {
+		const registeredId = registeredPanelId();
+		return registeredId === null ? void 0 : registeredId ?? defaultPanelId;
+	});
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		open: open(),
+		transitionStatus: transition.transitionStatus()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), collapsibleStateAttributesMapping));
+	function requestOpenChange(nextOpen, event, reason, beforeCommit) {
+		const eventDetails = createChangeEventDetails(reason, event);
+		rootProps.onOpenChange?.(nextOpen, eventDetails);
+		if (eventDetails.isCanceled) return false;
+		beforeCommit?.();
+		if (!controlled) setUncontrolledOpen(nextOpen);
+		flush();
+		return true;
+	}
+	return CollapsibleRootContext({
+		value: {
+			defaultPanelId,
+			disabled,
+			mounted: transition.mounted,
+			open,
+			panelId,
+			requestOpenChange,
+			setMounted: transition.setMounted,
+			setPanelIdState,
+			state,
+			transitionStatus: transition.transitionStatus
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+//#region src/collapsible/trigger/CollapsibleTrigger.tsx
+/** A button that opens and closes the collapsible panel. */
+function CollapsibleTrigger(props) {
+	const context = useCollapsibleRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const disabled = createMemo(() => props.disabled ?? context.disabled());
+	const nativeButton = createMemo(() => props.nativeButton ?? true);
+	const state = context.state;
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), collapsibleTriggerStateAttributesMapping));
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => (event) => {
+		context.requestOpenChange(!context.open(), event, triggerPress);
+	});
+	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onMouseDown);
+	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onPointerDown);
+	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledKeyDown : 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 ariaDisabled = createMemo(() => nativeButton() ? disabled() ? "true" : "false" : disabled() ? "true" : void 0);
+	const ariaExpanded = createMemo(() => context.open() ? "true" : "false");
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return nativeButton() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return nativeButton() ? void 0 : 0;
+		},
+		get ["aria-controls"]() {
+			return memo(() => {
+				return !!context.open();
+			})() ? context.panelId() : void 0;
+		},
+		get ["aria-disabled"]() {
+			return ariaDisabled();
+		},
+		get ["aria-expanded"]() {
+			return ariaExpanded();
+		},
+		onClick,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onPointerDown
+	}, stateAttributes, others));
+}
+function preventInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function preventDisabledKeyDown(event) {
+	if (event.key !== "Tab") event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function handleNonNativeKeyDown(event) {
+	if (event.target !== event.currentTarget) return;
+	const isLink = event.currentTarget.tagName === "A" && Boolean(event.currentTarget.href);
+	if (isLink || event.key !== "Enter" && event.key !== " ") {
+		if (isLink && event.key === " ") event.preventDefault();
+		return;
+	}
+	if (event.defaultPrevented) return;
+	event.preventDefault();
+	if (event.key === "Enter") {
+		event.preventBaseUIHandler();
+		dispatchClick(event.currentTarget, event);
+	}
+}
+function handleNonNativeKeyUp(event) {
+	if (event.target === event.currentTarget && !event.defaultPrevented && event.key === " ") {
+		event.preventBaseUIHandler();
+		dispatchClick(event.currentTarget, event);
+	}
+}
+function dispatchClick(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
+	}));
+}
+//#endregion
+//#region src/collapsible/panel/CollapsiblePanel.tsx
+var HEIGHT_VARIABLE = "--collapsible-panel-height";
+var WIDTH_VARIABLE = "--collapsible-panel-width";
+/** A panel containing the collapsible content. */
+function CollapsiblePanel(props) {
+	const context = useCollapsibleRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const [panelElement, setPanelElement] = createSignal();
+	const registeredId = createMemo(() => internalProps.id || void 0);
+	const id = createMemo(() => registeredId() ?? context.defaultPanelId);
+	const hiddenUntilFound = createMemo(() => internalProps.hiddenUntilFound ?? false);
+	const keepMounted = createMemo(() => internalProps.keepMounted ?? false);
+	const others = omit(allProps, "as", "class", "hiddenUntilFound", "id", "keepMounted", "ref", "style");
+	const controller = createCollapsiblePanel({
+		element: panelElement,
+		hiddenUntilFound,
+		keepMounted,
+		mounted: context.mounted,
+		open: context.open,
+		requestBeforeMatchOpen: (event, beforeCommit) => context.requestOpenChange(true, event, none, beforeCommit),
+		setMounted: context.setMounted,
+		transitionStatus: context.transitionStatus
+	});
+	const state = createMemo(() => ({
+		...context.state(),
+		transitionStatus: controller.panelTransitionStatus()
+	}));
+	const classValue = createMemo(() => controller.shouldRender() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => resolvePanelStyle(controller.dimensions(), controller.shouldRender() ? resolveStyle(props.style, state()) : void 0, controller.shouldPreventOpenAnimation()));
+	const stateAttributes = createMemo(() => {
+		const attributes = getStateAttributesProps(state(), collapsibleStateAttributesMapping);
+		if (controller.shouldPersistHiddenTransitionStyles()) attributes["data-starting-style"] = "";
+		return attributes;
+	});
+	const hiddenValue = createMemo(() => controller.hidden() ? hiddenUntilFound() ? "until-found" : true : void 0);
+	createEffect(() => registeredId(), (currentId) => {
+		context.setPanelIdState((existingId) => currentId ?? (existingId === null ? void 0 : existingId));
+		return () => {
+			context.setPanelIdState((existingId) => existingId === currentId ? null : existingId);
+		};
+	});
+	createEffect(() => ({
+		hiddenUntilFound: hiddenUntilFound(),
+		keepMounted: internalProps.keepMounted
+	}), (current) => {
+		if (current.hiddenUntilFound && current.keepMounted === false && false);
+	});
+	onCleanup(() => setPanelElement(void 0));
+	const commonProps = () => ({
+		ref: [internalProps.ref, ((element) => setPanelElement(element))],
+		id: id(),
+		class: classValue(),
+		style: styleValue(),
+		hidden: hiddenValue(),
+		...stateAttributes(),
+		...others
+	});
+	return Show({
+		get when() {
+			return controller.shouldRender();
+		},
+		get children() {
+			return Show({
+				get when() {
+					return props.as;
+				},
+				get fallback() {
+					return ssrElement("div", commonProps(), void 0, true);
+				},
+				children: (component) => Dynamic(mergeProps({ get component() {
+					return component();
+				} }, commonProps))
+			});
+		}
+	});
+}
+function resolvePanelStyle(dimensions, externalStyle, preventOpenAnimation) {
+	const height = dimensions.height === void 0 ? "auto" : `${dimensions.height}px`;
+	const width = dimensions.width === void 0 ? "auto" : `${dimensions.width}px`;
+	if (typeof externalStyle === "string") return [
+		`${HEIGHT_VARIABLE}:${height}`,
+		`${WIDTH_VARIABLE}:${width}`,
+		externalStyle,
+		preventOpenAnimation ? "animation-name:none" : ""
+	].filter(Boolean).join(";");
+	return {
+		[HEIGHT_VARIABLE]: height,
+		[WIDTH_VARIABLE]: width,
+		...externalStyle,
+		...preventOpenAnimation ? { "animation-name": "none" } : {}
+	};
+}
+//#endregion
+//#region src/collapsible/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Panel: () => CollapsiblePanel,
+	Root: () => CollapsibleRoot,
+	Trigger: () => CollapsibleTrigger
+});
+//#endregion
+export { index_parts_exports as Collapsible };