solid-baseui 0.1.0-alpha.0

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

@@ -0,0 +1,201 @@
+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 { n as useToolbarItemOwnerContext } from "../ToolbarItemOwnerContext-L5dsZ_vS.js";
+import { n as useToggleGroupContext } from "../ToggleGroupContext-COor8gYc.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack } from "solid-js";
+//#region src/toggle/Toggle.tsx
+/** A two-state button that can be on or off. */
+function Toggle(props) {
+	const group = useToggleGroupContext();
+	const toolbarItemOwner = useToolbarItemOwnerContext();
+	const internalProps = props;
+	const allProps = props;
+	const generatedValue = `base-ui-${createUniqueId()}`;
+	const token = Symbol("Toggle");
+	const controlled = untrack(() => internalProps.pressed !== void 0);
+	const [uncontrolledPressed, setUncontrolledPressed] = createSignal(() => Boolean(untrack(() => internalProps.defaultPressed)));
+	let uncontrolledPressedSnapshot = untrack(uncontrolledPressed);
+	const [element, setElement] = createSignal();
+	const others = omit(allProps, "as", "class", "defaultPressed", "disabled", "form", "nativeButton", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPressedChange", "pressed", "ref", "style", "type", "value");
+	const value = createMemo(() => internalProps.value || generatedValue);
+	const disabled = createMemo(() => (group?.disabled() ?? false) || (internalProps.disabled ?? false));
+	const pressed = createMemo(() => group ? group.value().indexOf(value()) > -1 : controlled ? Boolean(internalProps.pressed) : uncontrolledPressed());
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		pressed: pressed()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const item = {
+		token,
+		order: 0,
+		disabled,
+		element,
+		focusableWhenDisabled: () => false
+	};
+	const unregister = toolbarItemOwner ? void 0 : group?.registerItem(item);
+	const disabledAttribute = createMemo(() => nativeButton() && disabled() && !(toolbarItemOwner?.disabled() && toolbarItemOwner.focusableWhenDisabled()) && (group === void 0 || group.toolbar !== void 0));
+	const ariaDisabled = createMemo(() => {
+		if (nativeButton()) return group && !group.toolbar ? disabled() ? "true" : "false" : void 0;
+		return disabled() ? "true" : void 0;
+	});
+	const tabIndex = createMemo(() => {
+		if (group) return group.isTabStop(item) ? 0 : -1;
+		return !nativeButton() && disabled() ? -1 : 0;
+	});
+	createEffect(() => ({
+		disabled: disabled(),
+		element: element(),
+		nativeButton: nativeButton(),
+		ownerDisabled: toolbarItemOwner?.disabled() ?? false,
+		toolbarGroup: group?.toolbar !== void 0
+	}), (current) => {
+		if (current.element && current.nativeButton && current.toolbarGroup && current.disabled && !current.ownerDisabled) current.element.setAttribute("disabled", "");
+	});
+	createEffect(() => group?.disabled() ?? false, (value) => {
+		toolbarItemOwner?.setChildDisabled(value);
+	});
+	function handleClick(event) {
+		const nextPressed = !(group ? group.isPressed(value()) : controlled ? Boolean(internalProps.pressed) : uncontrolledPressedSnapshot);
+		const details = createChangeEventDetails(none, event);
+		internalProps.onPressedChange?.(nextPressed, details);
+		if (details.isCanceled) return;
+		group?.setGroupValue(value(), nextPressed, details);
+		if (details.isCanceled) return;
+		if (!group && !controlled) {
+			uncontrolledPressedSnapshot = nextPressed;
+			setUncontrolledPressed(nextPressed);
+		}
+	}
+	function handleFocus() {
+		group?.setActiveItem(item);
+	}
+	function handleGroupKeyDown(event) {
+		handleCompositeKeyDown(event, nativeButton());
+	}
+	function handleGroupKeyUp(event) {
+		handleCompositeKeyUp(event, nativeButton());
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventInteraction : void 0), () => internalProps.onClick, () => handleClick);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	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() ? group ? preventFocusableDisabledKeyDown : stopInteraction : void 0), () => internalProps.onKeyDown, () => untrack(() => group ? handleGroupKeyDown : nativeButton() ? void 0 : handleNonNativeKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => group ? handleGroupKeyUp : nativeButton() ? void 0 : handleNonNativeKeyUp));
+	createEffect(() => ({
+		initialized: group?.isValueInitialized() ?? false,
+		missingValue: group !== void 0 && internalProps.value === void 0
+	}), (current) => {});
+	onSettled(() => {
+		element();
+	});
+	onCleanup(() => {
+		toolbarItemOwner?.setChildDisabled(false);
+		unregister?.();
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((current) => setElement(current)), 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 disabled() {
+			return disabledAttribute();
+		},
+		get ["aria-disabled"]() {
+			return ariaDisabled();
+		},
+		get ["aria-pressed"]() {
+			return pressed() ? "true" : "false";
+		},
+		get tabIndex() {
+			return tabIndex();
+		},
+		onClick,
+		onFocus,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown,
+		onPointerDown
+	}, stateAttributes, others));
+}
+function preventInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function preventFocusableDisabledKeyDown(event) {
+	if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End") return;
+	if (event.key !== "Tab") event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function handleCompositeKeyDown(event, nativeButton) {
+	if (event.target !== event.currentTarget || event.key !== " ") {
+		if (!nativeButton) handleNonNativeKeyDown(event);
+		return;
+	}
+	event.preventDefault();
+	if (!nativeButton || event.currentTarget.tagName === "BUTTON") {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+}
+function handleCompositeKeyUp(event, nativeButton) {
+	if (event.target === event.currentTarget && nativeButton && event.currentTarget.tagName === "BUTTON" && event.key === " ") event.preventDefault();
+}
+function handleNonNativeKeyDown(event) {
+	if (event.target !== event.currentTarget) return;
+	const isLink = event.currentTarget.tagName === "A" && Boolean(event.currentTarget.href);
+	if (isLink || event.key !== " " && event.key !== "Enter") {
+		if (isLink && event.key === " ") event.preventDefault();
+		return;
+	}
+	if (event.defaultPrevented) return;
+	event.preventDefault();
+	if (event.key === "Enter") {
+		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 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
+	}));
+}
+//#endregion
+export { Toggle };

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

@@ -0,0 +1,192 @@
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { n as useToolbarRootContext } from "../ToolbarRootContext-DD-qe7s8.js";
+import { n as useToolbarGroupContext } from "../ToolbarGroupContext-CzdHxijX.js";
+import { t as ToggleGroupContext } from "../ToggleGroupContext-COor8gYc.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
+//#region src/toggle-group/ToggleGroup.tsx
+var EMPTY_VALUE = [];
+/** Provides shared state and roving focus to a series of toggle buttons. */
+function ToggleGroup(props) {
+	const direction = useDirection();
+	const toolbar = useToolbarRootContext(true);
+	const toolbarGroup = useToolbarGroupContext();
+	const internalProps = props;
+	const allProps = props;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(() => untrack(() => internalProps.defaultValue ?? EMPTY_VALUE));
+	let uncontrolledValueSnapshot = untrack(uncontrolledValue);
+	const [rootElement, setRootElement] = createSignal();
+	const [activeToken, setActiveToken] = createSignal();
+	const [itemVersion, setItemVersion] = createSignal(0);
+	const items = /* @__PURE__ */ new Map();
+	let activeTokenSnapshot;
+	const others = omit(allProps, "as", "class", "defaultValue", "disabled", "loopFocus", "multiple", "onKeyDown", "onValueChange", "orientation", "ref", "style", "value");
+	const value = createMemo(() => controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValue());
+	const disabled = createMemo(() => (toolbar?.disabled() ?? false) || (toolbarGroup?.disabled() ?? false) || (internalProps.disabled ?? false));
+	const multiple = createMemo(() => internalProps.multiple ?? false);
+	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
+	const isValueInitialized = createMemo(() => internalProps.value !== void 0 || internalProps.defaultValue !== void 0);
+	const state = createMemo(() => ({
+		disabled: disabled(),
+		multiple: multiple(),
+		orientation: orientation()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	function getOrderedItems() {
+		return Array.from(items.values()).sort((first, second) => {
+			const firstElement = first.element();
+			const secondElement = second.element();
+			if (!firstElement || !secondElement || firstElement === secondElement) return 0;
+			const position = firstElement.compareDocumentPosition(secondElement);
+			if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+			if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+			return 0;
+		});
+	}
+	function isItemNavigable(item) {
+		if (item.disabled()) return false;
+		const element = item.element();
+		if (!element) return true;
+		const styles = element.ownerDocument.defaultView?.getComputedStyle(element);
+		if (!styles || styles.display === "none" || styles.display === "contents") return false;
+		return styles.visibility !== "hidden" && styles.visibility !== "collapse";
+	}
+	function registerItem(item) {
+		if (toolbar) return toolbar.registerItem(item);
+		items.set(item.token, item);
+		if (!activeTokenSnapshot && !untrack(item.disabled)) activeTokenSnapshot = item.token;
+		return () => {
+			items.delete(item.token);
+			if (activeTokenSnapshot === item.token) activeTokenSnapshot = getOrderedItems().find((current) => untrack(current.disabled))?.token;
+			queueMicrotask(() => setItemVersion((version) => version + 1));
+		};
+	}
+	function setActiveItem(item) {
+		if (toolbar) {
+			toolbar.setActiveItem(item);
+			return;
+		}
+		if (!item.disabled()) {
+			activeTokenSnapshot = item.token;
+			setActiveToken(item.token);
+		}
+	}
+	function isTabStop(item) {
+		if (toolbar) return toolbar.isTabStop(item);
+		itemVersion();
+		const enabledItems = getOrderedItems().filter(isItemNavigable);
+		const activeItem = enabledItems.find((current) => current.token === (activeToken() ?? activeTokenSnapshot));
+		return isItemNavigable(item) && (activeItem ?? enabledItems[0])?.token === item.token;
+	}
+	function isPressed(itemValue) {
+		return (controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValueSnapshot).indexOf(itemValue) > -1;
+	}
+	function setGroupValue(itemValue, nextPressed, eventDetails) {
+		const currentValue = controlled ? internalProps.value ?? EMPTY_VALUE : uncontrolledValueSnapshot;
+		let nextValue;
+		if (multiple()) {
+			nextValue = currentValue.slice();
+			if (nextPressed) nextValue.push(itemValue);
+			else nextValue.splice(currentValue.indexOf(itemValue), 1);
+		} else nextValue = nextPressed ? [itemValue] : [];
+		internalProps.onValueChange?.(nextValue, eventDetails);
+		if (!eventDetails.isCanceled && !controlled) {
+			uncontrolledValueSnapshot = nextValue;
+			setUncontrolledValue(nextValue);
+		}
+	}
+	function handleKeyDown(event) {
+		if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return;
+		const horizontalForward = direction() === "rtl" ? "ArrowLeft" : "ArrowRight";
+		const horizontalBackward = direction() === "rtl" ? "ArrowRight" : "ArrowLeft";
+		const forward = orientation() === "vertical" ? "ArrowDown" : horizontalForward;
+		const backward = orientation() === "vertical" ? "ArrowUp" : horizontalBackward;
+		const navigationKey = event.key === forward || event.key === backward;
+		const boundaryKey = event.key === "Home" || event.key === "End";
+		if (!navigationKey && !boundaryKey) return;
+		itemVersion();
+		const orderedItems = getOrderedItems();
+		const enabledItems = orderedItems.filter(isItemNavigable);
+		if (enabledItems.length === 0) return;
+		const path = event.composedPath();
+		const target = path[0];
+		let currentIndex = orderedItems.findIndex((item) => {
+			const element = item.element();
+			return element && (path.includes(element) || target instanceof Node && element.contains(target));
+		});
+		if (currentIndex === -1) currentIndex = orderedItems.findIndex((item) => item.token === (activeToken() ?? activeTokenSnapshot));
+		let nextItem;
+		if (event.key === "Home") nextItem = enabledItems[0];
+		else if (event.key === "End") nextItem = enabledItems[enabledItems.length - 1];
+		else {
+			const delta = event.key === forward ? 1 : -1;
+			let nextIndex = currentIndex === -1 ? delta > 0 ? -1 : orderedItems.length : currentIndex;
+			for (let count = 0; count < orderedItems.length; count += 1) {
+				nextIndex += delta;
+				if (nextIndex < 0 || nextIndex >= orderedItems.length) {
+					if (!(internalProps.loopFocus ?? true)) break;
+					nextIndex = (nextIndex + orderedItems.length) % orderedItems.length;
+				}
+				const candidate = orderedItems[nextIndex];
+				if (candidate && isItemNavigable(candidate)) {
+					nextItem = candidate;
+					break;
+				}
+			}
+		}
+		if (!nextItem || nextItem === orderedItems[currentIndex]) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setActiveItem(nextItem);
+		queueMicrotask(() => nextItem.element()?.focus());
+	}
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => toolbar ? void 0 : handleKeyDown);
+	const context = {
+		disabled,
+		isPressed,
+		isTabStop,
+		isValueInitialized,
+		registerItem,
+		setActiveItem,
+		setGroupValue,
+		toolbar,
+		value
+	};
+	createEffect(rootElement, (element) => {
+		const Observer = element?.ownerDocument.defaultView?.MutationObserver;
+		if (!element || !Observer) return;
+		const observer = new Observer(() => setItemVersion((version) => version + 1));
+		observer.observe(element, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	});
+	return ToggleGroupContext({
+		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",
+				onKeyDown
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+export { ToggleGroup };