solid-baseui 0.1.0-alpha.0

package/dist/lib/server/DialogPopup-BebI-w5P.js

@@ -0,0 +1,159 @@
+import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
+import { composeEventHandlers } from "./internals/composeEventHandlers.js";
+import { t as FocusManager } from "./FocusManager-BrbZVWME.js";
+import { d as dialogTransitionStateAttributesMapping, f as mergeDialogStyles, h as useDialogRootContext, s as useDialogPortalContext, u as dialogStateAttributesMapping } from "./DialogHandle-ATZlm9RC.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { Show, createEffect, createMemo, omit, onCleanup } from "solid-js";
+//#region src/dialog/backdrop/DialogBackdrop.tsx
+/** An overlay displayed beneath the dialog popup. */
+function DialogBackdrop(props) {
+	const context = useDialogRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "forceRender", "ref", "style");
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		transitionStatus: context.store.track().transitionStatus
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeDialogStyles({
+		"user-select": "none",
+		"-webkit-user-select": "none"
+	}, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), dialogTransitionStateAttributesMapping));
+	const shouldRender = createMemo(() => Boolean(internalProps.forceRender) || !context.nested);
+	function BackdropElement() {
+		let backdropElement = null;
+		onCleanup(() => {
+			if (context.backdropElement() === backdropElement) context.setBackdropElement(null);
+		});
+		return Dynamic(mergeProps({
+			get component() {
+				return props.as ?? "div";
+			},
+			ref: [((element) => {
+				backdropElement = element;
+				context.setBackdropElement(element);
+			}), internalProps.ref],
+			role: "presentation",
+			get hidden() {
+				return !context.presence.mounted();
+			},
+			get ["class"]() {
+				return classValue();
+			},
+			get style() {
+				return styleValue();
+			}
+		}, stateAttributes, others));
+	}
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return BackdropElement({});
+		}
+	});
+}
+//#endregion
+//#region src/dialog/popup/DialogPopup.tsx
+var COMPOSITE_KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+/** A container for the dialog contents. */
+function DialogPopup(props) {
+	useDialogPortalContext();
+	const context = useDialogRootContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "finalFocus", "id", "initialFocus", "onKeyDown", "ref", "style");
+	const state = createMemo(() => ({
+		open: context.store.open(),
+		transitionStatus: context.store.track().transitionStatus,
+		nested: context.nested,
+		nestedDialogOpen: context.nestedOpenDialogCount() > 0
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => mergeDialogStyles({ "--nested-dialogs": context.nestedOpenDialogCount() }, resolveStyle(props.style, state())));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), dialogStateAttributesMapping));
+	const id = createMemo(() => internalProps.id ?? context.store.context.floatingId);
+	const initialFocus = createMemo(() => internalProps.initialFocus ?? ((interactionType) => interactionType === "touch" ? context.store.state.popupElement : true));
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => (event) => {
+		if (COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
+	});
+	let popupElement = null;
+	createEffect(() => id(), (currentId) => {
+		context.store.setPopupId(currentId);
+	});
+	onCleanup(() => {
+		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
+	});
+	const popup = Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [((element) => {
+			popupElement = element;
+			context.store.setPopupElement(element);
+		}), internalProps.ref],
+		get id() {
+			return id();
+		},
+		get role() {
+			return context.role;
+		},
+		tabIndex: -1,
+		"data-base-ui-focusable": "",
+		get hidden() {
+			return !context.presence.mounted();
+		},
+		get ["aria-labelledby"]() {
+			return context.titleId();
+		},
+		get ["aria-describedby"]() {
+			return context.descriptionId();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onKeyDown
+	}, stateAttributes, others));
+	return FocusManager({
+		get context() {
+			return context.store.context.floatingRoot;
+		},
+		get tree() {
+			return context.tree;
+		},
+		get disabled() {
+			return !context.presence.mounted();
+		},
+		get closeOnFocusOut() {
+			return !context.disablePointerDismissal();
+		},
+		get initialFocus() {
+			return initialFocus();
+		},
+		get returnFocus() {
+			return internalProps.finalFocus;
+		},
+		get modal() {
+			return context.modal() !== false;
+		},
+		restoreFocus: "popup",
+		get openInteractionType() {
+			return context.store.openMethod();
+		},
+		children: popup
+	});
+}
+//#endregion
+export { DialogBackdrop as n, DialogPopup as t };

package/dist/lib/server/DirectionContext-YORWLF08.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "solid-js";
+//#region src/internals/direction-context/DirectionContext.ts
+var defaultDirection = () => "ltr";
+var DirectionContext = createContext(defaultDirection);
+/** Returns a reactive accessor for the nearest reading direction. */
+function useDirection() {
+	return useContext(DirectionContext);
+}
+//#endregion
+export { useDirection as n, DirectionContext as t };

package/dist/lib/server/FieldControl-Y_kI7ARp.js

@@ -0,0 +1,174 @@
+import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
+import { w as none } from "./internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails } from "./internals/createBaseUIEventDetails.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, mergeProps } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
+//#region src/field/control/FieldControl.tsx
+/** The native field control. Renders an `<input>` by default. */
+function FieldControl(props) {
+	const field = useFieldRootContext(true);
+	const form = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const source = Symbol("FieldControl");
+	let initialized = false;
+	const controlId = untrack(labelable.controlId);
+	const fallbackId = typeof controlId === "string" ? controlId : `base-ui-${createUniqueId()}`;
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "autofocus", "class", "defaultValue", "disabled", "id", "name", "onBlur", "onFocus", "onInput", "onKeyDown", "onValueChange", "ref", "style", "value");
+	const id = createMemo(() => internalProps.id ?? fallbackId);
+	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
+	const name = createMemo(() => field.name() ?? internalProps.name);
+	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 currentValue = () => {
+		if (internalProps.value !== void 0) return internalProps.value;
+		const currentElement = element();
+		return isNativeFieldControl(currentElement) ? currentElement.value : internalProps.defaultValue;
+	};
+	const getFormValue = () => {
+		const currentElement = element();
+		return isNativeFieldControl(currentElement) ? currentElement.value : currentValue();
+	};
+	const registration = {
+		id: fallbackId,
+		name: void 0,
+		value: currentValue,
+		getValue: getFormValue,
+		getControl: () => element() ?? null
+	};
+	const callExternalInput = composeEventHandlers(() => internalProps.onInput);
+	const callExternalFocus = composeEventHandlers(() => internalProps.onFocus);
+	const callExternalBlur = composeEventHandlers(() => internalProps.onBlur);
+	const callExternalKeyDown = composeEventHandlers(() => internalProps.onKeyDown);
+	function setControlElement(value) {
+		setElement(value);
+		if (initialized || !isNativeFieldControl(value)) return;
+		initialized = true;
+		const initialValue = untrack(() => internalProps.defaultValue);
+		if (untrack(() => internalProps.value) === void 0 && initialValue !== void 0 && !Array.isArray(initialValue)) {
+			const normalizedValue = String(initialValue);
+			if ("defaultValue" in value) value.defaultValue = normalizedValue;
+			value.value = normalizedValue;
+		}
+	}
+	function handleInput(event) {
+		callExternalInput.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		const value = readElementValue(event.currentTarget);
+		internalProps.onValueChange?.(value, createChangeEventDetails(none, event));
+		field.setDirty(value !== (field.validityData().initialValue ?? ""));
+		field.setFilled(value !== "");
+		if (!event.defaultPrevented) {
+			form.clearError(name());
+			field.validation.change(value);
+		}
+	}
+	function handleFocus(event) {
+		callExternalFocus.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		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(readElementValue(event.currentTarget));
+	}
+	function handleKeyDown(event) {
+		callExternalKeyDown.call(event.currentTarget, event);
+		if (event.baseUIHandlerPrevented) return;
+		if (event.currentTarget.tagName === "INPUT" && event.key === "Enter") {
+			field.setTouched(true);
+			field.validation.commit(readElementValue(event.currentTarget));
+		}
+	}
+	createEffect(() => ({
+		id: id(),
+		name: internalProps.name,
+		disabled: disabled(),
+		element: element()
+	}), (current) => {
+		registration.id = current.id;
+		registration.name = current.name;
+		field.registerFieldControl(source, current.disabled || !current.element ? void 0 : registration);
+		labelable.registerControlId(source, current.element ? current.id : void 0);
+	});
+	createEffect(() => element(), (currentElement) => {
+		if (!isNativeFieldControl(currentElement)) return;
+		return field.validation.registerInput(source, currentElement, () => untrack(() => element() ?? null));
+	});
+	createEffect(() => internalProps.value, (value) => {
+		if (value !== void 0) field.setFilled(value !== "");
+	});
+	onSettled(() => {
+		const currentElement = element();
+		if (isNativeFieldControl(currentElement)) field.setFilled(currentElement.value !== "");
+		if (internalProps.autofocus && currentElement?.ownerDocument.activeElement === currentElement) field.setFocused(true);
+	});
+	onCleanup(() => {
+		field.registerFieldControl(source, void 0);
+		labelable.registerControlId(source, void 0);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "input";
+		},
+		ref: [setControlElement, internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get name() {
+			return name();
+		},
+		get disabled() {
+			return disabled();
+		}
+	}, () => {
+		return internalProps.value !== void 0 ? { value: internalProps.value } : { defaultValue: internalProps.defaultValue };
+	}, {
+		get autofocus() {
+			return internalProps.autofocus;
+		},
+		get ["aria-labelledby"]() {
+			return internalProps["aria-labelledby"] ?? labelable.labelId();
+		},
+		get ["aria-describedby"]() {
+			return labelable.getAriaDescribedBy(internalProps["aria-describedby"]);
+		},
+		get ["aria-invalid"]() {
+			return state().valid === false && !disabled() ? "true" : void 0;
+		},
+		onInput: handleInput,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown
+	}, stateAttributes, others));
+}
+function isNativeFieldControl(element) {
+	return Boolean(element && (element.tagName === "INPUT" || element.tagName === "SELECT" || element.tagName === "TEXTAREA"));
+}
+function readElementValue(element) {
+	return "value" in element ? String(element.value) : "";
+}
+//#endregion
+export { FieldControl as t };

package/dist/lib/server/FieldItemContext-x-C7ZlmX.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "solid-js";
+var FieldItemContext = createContext({ disabled: () => false });
+function useFieldItemContext() {
+	return useContext(FieldItemContext);
+}
+//#endregion
+export { useFieldItemContext as n, FieldItemContext as t };

package/dist/lib/server/FieldRootContext-IC-LWzVp.js

@@ -0,0 +1,34 @@
+import { DEFAULT_FIELD_STATE, DEFAULT_VALIDITY_DATA } from "./internals/field-constants.js";
+import { createContext, useContext } from "solid-js";
+//#region src/internals/field-root-context/FieldRootContext.ts
+var MISSING_CONTEXT = Symbol("FieldRootContext");
+var DEFAULT_CONTEXT = {
+	state: () => DEFAULT_FIELD_STATE,
+	validityData: () => DEFAULT_VALIDITY_DATA,
+	name: () => void 0,
+	disabled: () => false,
+	invalid: () => false,
+	validationMode: () => "onSubmit",
+	shouldValidateOnChange: () => false,
+	setTouched: () => void 0,
+	setDirty: () => void 0,
+	setFilled: () => void 0,
+	setFocused: () => void 0,
+	registerFieldControl: () => void 0,
+	validation: {
+		commit: () => void 0,
+		change: () => void 0,
+		registerInput: (_source, _element) => () => void 0,
+		getInputControl: () => null,
+		setActiveInputSource: () => void 0
+	}
+};
+var FieldRootContext = createContext(MISSING_CONTEXT);
+function useFieldRootContext(optional = false) {
+	const context = useContext(FieldRootContext);
+	if (context !== MISSING_CONTEXT) return context;
+	if (optional) return DEFAULT_CONTEXT;
+	throw new Error("Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.");
+}
+//#endregion
+export { useFieldRootContext as n, FieldRootContext as t };

package/dist/lib/server/FieldsetRootContext-DyNqCjK6.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "solid-js";
+//#region src/fieldset/root/FieldsetRootContext.ts
+var MISSING_CONTEXT = Symbol("FieldsetRootContext");
+var FieldsetRootContext = createContext(MISSING_CONTEXT);
+function useFieldsetRootContext(optional = false) {
+	const context = useContext(FieldsetRootContext);
+	if (context === MISSING_CONTEXT) {
+		if (optional) return;
+		throw new Error("Base UI: FieldsetRootContext is missing. Fieldset parts must be placed within <Fieldset.Root>.");
+	}
+	return context;
+}
+//#endregion
+export { useFieldsetRootContext as n, FieldsetRootContext as t };

package/dist/lib/server/FloatingTree-z1JPD1dR.js

@@ -0,0 +1,101 @@
+import { createContext, createEffect, createUniqueId, untrack, useContext } from "solid-js";
+//#region src/internals/overlay/eventEmitter.ts
+function createEventEmitter() {
+	const listeners = /* @__PURE__ */ new Map();
+	return {
+		emit(event, data) {
+			listeners.get(event)?.forEach((listener) => listener(data));
+		},
+		on(event, listener) {
+			let eventListeners = listeners.get(event);
+			if (!eventListeners) {
+				eventListeners = /* @__PURE__ */ new Set();
+				listeners.set(event, eventListeners);
+			}
+			eventListeners.add(listener);
+			return () => eventListeners.delete(listener);
+		},
+		off(event, listener) {
+			listeners.get(event)?.delete(listener);
+		},
+		clear() {
+			listeners.clear();
+		}
+	};
+}
+//#endregion
+//#region src/internals/overlay/FloatingTree.ts
+var FloatingTreeStore = class {
+	nodes = [];
+	events = createEventEmitter();
+	addNode(node) {
+		this.nodes.push(node);
+	}
+	removeNode(node) {
+		const index = this.nodes.indexOf(node);
+		if (index !== -1) this.nodes.splice(index, 1);
+	}
+};
+var MISSING_TREE = Symbol("FloatingTreeContext");
+var FloatingTreeContext = createContext(MISSING_TREE);
+var FloatingParentNodeContext = createContext(null);
+function useFloatingTree(external) {
+	const context = useContext(FloatingTreeContext);
+	return external ?? (context === MISSING_TREE ? void 0 : context);
+}
+function useFloatingParentNodeId() {
+	return useContext(FloatingParentNodeContext);
+}
+function createFloatingNode(options) {
+	const node = {
+		id: options.id ?? createUniqueId(),
+		parentId: typeof options.parentId === "function" ? untrack(options.parentId) : options.parentId ?? null
+	};
+	Object.defineProperty(node, "context", {
+		enumerable: true,
+		get: () => options.context?.()
+	});
+	const tree = () => typeof options.tree === "function" ? options.tree() : options.tree;
+	const parentId = () => typeof options.parentId === "function" ? options.parentId() : options.parentId ?? null;
+	createEffect(() => ({
+		tree: tree(),
+		parentId: parentId()
+	}), (current) => {
+		node.parentId = current.parentId;
+		current.tree.addNode(node);
+		return () => {
+			current.tree.removeNode(node);
+			current.tree.events.emit("openchange", {
+				node,
+				open: false
+			});
+		};
+	});
+	createEffect(() => {
+		const context = options.context?.();
+		return {
+			context,
+			open: context?.track().open ?? false,
+			tree: tree()
+		};
+	}, (state) => state.tree.events.emit("openchange", {
+		node,
+		open: state.open
+	}));
+	return node;
+}
+function getNodeChildren(nodes, id, onlyOpenChildren = true) {
+	return nodes.filter((node) => node.parentId === id).flatMap((child) => [...!onlyOpenChildren || child.context?.state.open ? [child] : [], ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+}
+function getNodeAncestors(nodes, id) {
+	const ancestors = [];
+	let parentId = nodes.find((node) => node.id === id)?.parentId;
+	while (parentId) {
+		const parent = nodes.find((node) => node.id === parentId);
+		parentId = parent?.parentId;
+		if (parent) ancestors.push(parent);
+	}
+	return ancestors;
+}
+//#endregion
+export { getNodeAncestors as a, useFloatingTree as c, createFloatingNode as i, createEventEmitter as l, FloatingTreeContext as n, getNodeChildren as o, FloatingTreeStore as r, useFloatingParentNodeId as s, FloatingParentNodeContext as t };