solid-baseui 0.1.0-alpha.0

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

@@ -0,0 +1,480 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { E as pointer, S as listNavigation, b as keyboard, n as chipRemovePress, 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 { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { A as getFilter, C as getIndexAfterChipRemoval, D as ComboboxTrigger, E as useRequiredComboboxChipsContext, M as resolveMultipleLabels, N as resolveSelectedLabel, O as AriaCombobox, P as stringifyAsLabel, S as getChipNavigationKeys, T as ComboboxChipsContext, _ as ComboboxClear, a as ComboboxItem, b as handleInputPress, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, j as hasNullItemLabel, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, o as useComboboxItemContext, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, w as ComboboxChipRegistry, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-DvuctLt3.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { a as stopButtonInteraction, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "../buttonSemantics-BSwDxJhh.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { fieldStateAttributesMapping } from "../internals/field-constants.js";
+import { n as isSolidAccessor, o as findItemIndex } from "../mergeStyleValue-Db8bRCM4.js";
+import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, flush, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/combobox/root/ComboboxRoot.tsx
+/**
+* Groups all parts of the combobox.
+* Doesn't render its own HTML element.
+*/
+function ComboboxRoot(props) {
+	const others = omit(props, "multiple", "value", "defaultValue", "onValueChange", "autoComplete");
+	return AriaCombobox(mergeProps({
+		get selectionMode() {
+			return props.multiple ? "multiple" : "single";
+		},
+		get selectedValue() {
+			return props.value;
+		},
+		get defaultSelectedValue() {
+			return props.defaultValue;
+		},
+		get onSelectedValueChange() {
+			return props.onValueChange;
+		},
+		get formAutoComplete() {
+			return props.autoComplete;
+		}
+	}, others));
+}
+//#endregion
+//#region src/combobox/label/ComboboxLabel.tsx
+/**
+* An accessible label automatically associated with the combobox trigger.
+*
+* When `<Combobox.Input>` is the form control rather than a popup field, use a native `<label>`
+* or `<Field.Label>` instead; this part labels the trigger.
+*/
+function ComboboxLabel(props) {
+	const context = useComboboxRootContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const id = createMemo(() => `${context.id()}-label`);
+	const state = createMemo(() => context.field.state());
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), fieldStateAttributesMapping));
+	const others = omit(allProps, "as", "class", "id", "onClick", "onPointerDown", "ref", "style");
+	function focusControl(event) {
+		const target = event.composedPath()[0];
+		if (target instanceof Element && target.closest("button,input,select,textarea,a[href]")) return;
+		if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+		(context.store.inputInsidePopup() ? context.triggerElement() : context.inputElement() ?? context.triggerElement())?.focus({ focusVisible: true });
+	}
+	function preventPointerFocus(event) {
+		event.preventDefault();
+	}
+	const onClick = composeEventHandlers(() => internalProps.onClick, () => focusControl);
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => preventPointerFocus);
+	createEffect(id, (currentId) => {
+		context.store.setLabelId(currentId);
+		const unregister = labelable.registerLabelId(currentId);
+		return () => {
+			unregister();
+			if (untrack(() => context.store.labelId()) === currentId) context.store.setLabelId(void 0);
+		};
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		ref: [internalProps.ref],
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onPointerDown
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/combobox/value/ComboboxValue.tsx
+/**
+* The current value of the combobox.
+* Doesn't render its own HTML element.
+*/
+function ComboboxValue(props) {
+	const context = useComboboxRootContext();
+	return createMemo(() => {
+		const child = props.children;
+		if (typeof child === "function") return isSolidAccessor(child) ? untrack(() => child()) : child(context.selectedValue());
+		if (child != null) return child;
+		if (!context.hasSelectedValue() && props.placeholder != null && !hasNullItemLabel(context.items())) return props.placeholder;
+		const current = context.selectedValue();
+		if (context.multiple() && Array.isArray(current)) return resolveMultipleLabels(current, context.items(), context.itemToStringLabel());
+		return resolveSelectedLabel(current, context.items(), context.itemToStringLabel());
+	});
+}
+//#endregion
+//#region src/combobox/item-indicator/ComboboxItemIndicator.tsx
+/** Indicates whether the enclosing item is selected. */
+function ComboboxItemIndicator(props) {
+	const item = useComboboxItemContext();
+	const internalProps = props;
+	const allProps = props;
+	const transition = createTransitionStatus(item.selected);
+	const shouldRender = createMemo(() => (internalProps.keepMounted ?? false) || transition.mounted());
+	const state = createMemo(() => ({
+		selected: item.selected(),
+		transitionStatus: transition.transitionStatus()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), transitionStatusMapping));
+	const others = omit(allProps, "as", "class", "keepMounted", "ref", "style");
+	let element;
+	createEffect(() => ({
+		selected: item.selected(),
+		status: transition.transitionStatus(),
+		element
+	}), (current) => {
+		if (current.selected || current.status !== "ending" || !current.element) return;
+		const controller = new AbortController();
+		runOnceAnimationsFinish(current.element, () => {
+			if (!untrack(item.selected)) transition.setMounted(false);
+		}, controller.signal);
+		return () => controller.abort();
+	});
+	return Show({
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "span";
+				},
+				ref: [((value) => element = value), internalProps.ref],
+				"aria-hidden": "true",
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others, { get children() {
+				return props.children ?? "✔️";
+			} }));
+		}
+	});
+}
+//#endregion
+//#region src/combobox/chips/ComboboxChips.tsx
+/** A container for the chips in a multiselectable input. */
+function ComboboxChips(props) {
+	const context = useComboboxRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const [highlightedChipIndex, setHighlightedChipIndex] = createSignal(void 0);
+	const chips = new ComboboxChipRegistry();
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const others = omit(allProps, "as", "class", "onMouseDown", "ref", "style");
+	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => handleInputPress(event, context, context.disabled(), context.readOnly()));
+	createEffect(() => context.store.open(), (open) => {
+		if (open) setHighlightedChipIndex(void 0);
+	});
+	let container = null;
+	onCleanup(() => {
+		if (context.store.chipsContainerElement === container) context.store.chipsContainerElement = null;
+	});
+	return ComboboxChipsContext({
+		value: {
+			highlightedChipIndex,
+			setHighlightedChipIndex: (index) => setHighlightedChipIndex(() => index),
+			chips
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => {
+					container = element;
+					context.store.chipsContainerElement = element;
+				}), internalProps.ref],
+				get role() {
+					return context.hasSelectionChips() ? "toolbar" : void 0;
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				onMouseDown
+			}, others));
+		}
+	});
+}
+//#endregion
+//#region src/combobox/chip/ComboboxChipContext.ts
+var MISSING_CONTEXT = Symbol("ComboboxChipContext");
+var ComboboxChipContext = createContext(MISSING_CONTEXT);
+function useComboboxChipContext() {
+	const context = useContext(ComboboxChipContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: ComboboxChipContext is missing. ComboboxChip parts must be placed within <Combobox.Chip>.");
+	return context;
+}
+//#endregion
+//#region src/combobox/chip/ComboboxChip.tsx
+/** An individual chip representing one value in a multiselectable input. */
+function ComboboxChip(props) {
+	const context = useComboboxRootContext();
+	const chips = useRequiredComboboxChipsContext();
+	const direction = useDirection();
+	const internalProps = props;
+	const allProps = props;
+	const token = Symbol("ComboboxChip");
+	const [element, setElement] = createSignal(null, { ownedWrite: true });
+	const unregister = chips.chips.register(token, element);
+	onCleanup(unregister);
+	const index = createMemo(() => chips.chips.indexOf(token));
+	const state = createMemo(() => ({ disabled: context.disabled() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const others = omit(allProps, "as", "class", "onKeyDown", "ref", "style");
+	function resolveNextIndex(event) {
+		const current = index();
+		const [previousChipKey, nextChipKey] = getChipNavigationKeys(direction());
+		const selected = context.selectedValue();
+		const values = Array.isArray(selected) ? selected : [];
+		if (event.key === previousChipKey) {
+			event.preventDefault();
+			return current > 0 ? current - 1 : void 0;
+		}
+		if (event.key === nextChipKey) {
+			event.preventDefault();
+			return current < chips.chips.size() - 1 ? current + 1 : void 0;
+		}
+		if (event.key === "Backspace" || event.key === "Delete") {
+			event.preventDefault();
+			event.stopPropagation();
+			const nextIndex = getIndexAfterChipRemoval(current, values.length);
+			context.setIndices({
+				activeIndex: null,
+				selectedIndex: null,
+				type: keyboard
+			});
+			context.setSelectedValue(values.filter((_, position) => position !== current), createChangeEventDetails(none, event));
+			return nextIndex;
+		}
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			event.stopPropagation();
+			context.setOpen(true, createChangeEventDetails(listNavigation, event));
+			return;
+		}
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) return;
+		return current;
+	}
+	function handleKeyDown(event) {
+		if (context.disabled() || context.readOnly()) return;
+		const nextIndex = resolveNextIndex(event);
+		chips.setHighlightedChipIndex(nextIndex);
+		flush();
+		if (nextIndex === void 0) context.focusInput();
+		else chips.chips.elements()[nextIndex]?.focus();
+	}
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	return ComboboxChipContext({
+		value: { index },
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((value) => {
+					setElement(value);
+					chips.chips.touch();
+				}), internalProps.ref],
+				tabindex: -1,
+				get ["aria-disabled"]() {
+					return context.disabled() ? "true" : void 0;
+				},
+				get ["aria-readonly"]() {
+					return context.readOnly() ? "true" : void 0;
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				onKeyDown
+			}, stateAttributes, others));
+		}
+	});
+}
+//#endregion
+//#region src/combobox/chip-remove/ComboboxChipRemove.tsx
+/** A button that removes a chip. */
+function ComboboxChipRemove(props) {
+	const context = useComboboxRootContext();
+	const chip = useComboboxChipContext();
+	const internalProps = props;
+	const allProps = props;
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const disabled = createMemo(() => context.disabled() || (internalProps.disabled ?? false));
+	const state = createMemo(() => ({ disabled: disabled() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "ref", "style");
+	/**
+	* Drops the highlight when the removed item is the highlighted one. An item filtered out of
+	* the visible list cannot be the active index, so a miss needs no clearing.
+	*/
+	function clearActiveIndexForRemovedItem(removedItem) {
+		const activeIndex = context.store.activeIndex();
+		if (activeIndex == null) return;
+		const removedIndex = findItemIndex(context.itemValues(), removedItem, context.comparator());
+		if (removedIndex !== -1 && activeIndex === removedIndex) context.setIndices({
+			activeIndex: null,
+			type: context.store.keyboardActive ? keyboard : pointer
+		});
+	}
+	function removeChip(event) {
+		const details = createChangeEventDetails(chipRemovePress, event);
+		const selected = context.selectedValue();
+		const values = Array.isArray(selected) ? selected : [];
+		const index = chip.index();
+		clearActiveIndexForRemovedItem(values[index]);
+		context.setSelectedValue(values.filter((_, position) => position !== index), details);
+		context.focusInput();
+		return details;
+	}
+	function handleClick(event) {
+		if (disabled() || context.readOnly()) return;
+		if (!removeChip(event).isPropagationAllowed) event.stopPropagation();
+	}
+	function handleKeyDown(event) {
+		if (disabled() || context.readOnly()) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		const details = removeChip(event);
+		event.preventDefault();
+		if (!details.isPropagationAllowed) event.stopPropagation();
+	}
+	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
+	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => event.preventDefault());
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [internalProps.ref],
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		tabindex: -1,
+		get ["aria-disabled"]() {
+			return !nativeButton() && disabled() ? "true" : void 0;
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onClick,
+		onKeyDown,
+		onKeyUp,
+		onMouseDown
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/combobox/root/utils/useFilter.ts
+/** Matches items against the query, showing every item while nothing has been typed. */
+function createCollatorItemFilter(collatorFilter, itemToStringLabel) {
+	return (item, query) => item == null ? false : collatorFilter.contains(item, query, itemToStringLabel);
+}
+/**
+* The single-selection variant. A query that exactly matches the current selection's label shows
+* every item again, so reopening the popup on a chosen value stays browsable.
+*/
+function createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue) {
+	return (item, query) => {
+		if (item == null) return false;
+		if (!query) return true;
+		const selectedString = selectedValue != null ? stringifyAsLabel(selectedValue, itemToStringLabel) : "";
+		if (selectedString && selectedString.length === query.length && collatorFilter.contains(selectedString, query)) return true;
+		return collatorFilter.contains(item, query, itemToStringLabel);
+	};
+}
+/**
+* Matches items against a query using `Intl.Collator` for robust string matching.
+*
+* Options may be a plain object or an accessor; either way they are read at match time, so a
+* changing `value` or `locale` is picked up without recreating the filter.
+*/
+function useFilter(options = {}) {
+	const read = () => typeof options === "function" ? options() : options;
+	function core() {
+		const { multiple: _multiple, value: _value, ...collatorOptions } = read();
+		return getFilter(collatorOptions);
+	}
+	return {
+		contains(item, query, itemToString) {
+			const { multiple = false, value } = read();
+			const filter = core();
+			return multiple ? createCollatorItemFilter(filter, itemToString)(item, query) : createSingleSelectionCollatorFilter(filter, itemToString, value)(item, query);
+		},
+		startsWith(item, query, itemToString) {
+			return core().startsWith(item, query, itemToString);
+		},
+		endsWith(item, query, itemToString) {
+			return core().endsWith(item, query, itemToString);
+		}
+	};
+}
+//#endregion
+//#region src/combobox/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => ComboboxArrow,
+	Backdrop: () => ComboboxBackdrop,
+	Chip: () => ComboboxChip,
+	ChipRemove: () => ComboboxChipRemove,
+	Chips: () => ComboboxChips,
+	Clear: () => ComboboxClear,
+	Collection: () => ComboboxCollection,
+	Empty: () => ComboboxEmpty,
+	Group: () => ComboboxGroup,
+	GroupLabel: () => ComboboxGroupLabel,
+	Icon: () => ComboboxIcon,
+	Input: () => ComboboxInput,
+	InputGroup: () => ComboboxInputGroup,
+	Item: () => ComboboxItem,
+	ItemIndicator: () => ComboboxItemIndicator,
+	Label: () => ComboboxLabel,
+	List: () => ComboboxList,
+	Popup: () => ComboboxPopup,
+	Portal: () => ComboboxPortal,
+	Positioner: () => ComboboxPositioner,
+	Root: () => ComboboxRoot,
+	Row: () => ComboboxRow,
+	Separator: () => ComboboxSeparator,
+	Status: () => ComboboxStatus,
+	Trigger: () => ComboboxTrigger,
+	Value: () => ComboboxValue,
+	useFilter: () => useFilter,
+	useFilteredItems: () => useFilteredItems
+});
+//#endregion
+export { index_parts_exports as Combobox };

package/dist/lib/server/compositeNavigation-BRVT1C38.js

@@ -0,0 +1,68 @@
+import { o as isElementVisible } from "./dom-Crg_2R-j.js";
+//#region src/internals/overlay/compositeNavigation.ts
+function isListIndexDisabled(list, index, disabledIndices) {
+	if (typeof disabledIndices === "function" ? disabledIndices(index) : disabledIndices?.includes(index) ?? false) return true;
+	const element = list[index];
+	if (!element) return false;
+	if (!isElementVisible(element) || element.matches(":disabled")) return true;
+	return disabledIndices === void 0 && (element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true");
+}
+function findNonDisabledListIndex(list, options = {}) {
+	const { startingIndex = -1, decrement = false, amount = 1, disabledIndices } = options;
+	let index = startingIndex;
+	do
+		index += decrement ? -amount : amount;
+	while (index >= 0 && index < list.length && isListIndexDisabled(list, index, disabledIndices));
+	return index;
+}
+function getMinListIndex(list, disabledIndices) {
+	return findNonDisabledListIndex(list, { disabledIndices });
+}
+function getMaxListIndex(list, disabledIndices) {
+	return findNonDisabledListIndex(list, {
+		startingIndex: list.length,
+		decrement: true,
+		disabledIndices
+	});
+}
+function getNavigatedIndex(options) {
+	const { list, currentIndex, key, orientation = "vertical", rtl = false, loop = false, cols = 1, disabledIndices } = options;
+	const min = getMinListIndex(list, disabledIndices);
+	const max = getMaxListIndex(list, disabledIndices);
+	if (key === "Home") return min;
+	if (key === "End") return max;
+	let direction;
+	let amount = 1;
+	if (orientation !== "horizontal" && (key === "ArrowDown" || key === "ArrowUp")) {
+		direction = key === "ArrowDown" ? 1 : -1;
+		amount = orientation === "both" ? cols : 1;
+	} else if (orientation !== "vertical" && (key === "ArrowRight" || key === "ArrowLeft")) direction = key === "ArrowRight" !== rtl ? 1 : -1;
+	if (!direction) return currentIndex;
+	if (currentIndex === -1) return direction === 1 ? min : max;
+	const next = findNonDisabledListIndex(list, {
+		startingIndex: currentIndex,
+		decrement: direction === -1,
+		amount,
+		disabledIndices
+	});
+	if (next >= min && next <= max) return next;
+	if (!loop) return currentIndex;
+	if (orientation === "both" && amount > 1) {
+		const column = Math.max(0, currentIndex) % cols;
+		if (direction === 1) return findNonDisabledListIndex(list, {
+			startingIndex: column - cols,
+			amount: cols,
+			disabledIndices
+		});
+		const lastRowStart = max - max % cols;
+		return findNonDisabledListIndex(list, {
+			startingIndex: Math.min(lastRowStart + column, max) + cols,
+			decrement: true,
+			amount: cols,
+			disabledIndices
+		});
+	}
+	return direction === 1 ? min : max;
+}
+//#endregion
+export { isListIndexDisabled as i, getMinListIndex as n, getNavigatedIndex as r, getMaxListIndex as t };