@fluixi-ui/listbox 0.2.0-alpha.18 → 0.2.0-alpha.20

package/dist/index.js

@@ -1,13 +1,5 @@
-import "@fluixi-ui/tokens/css/base.css";
-import "@fluixi-ui/tokens/css/parts/listbox.css";
 import { Listbox, ListboxGroup, ListboxGroupLabel, ListboxOption, ListboxSearch, useListboxContext } from "./listbox.js";
 import { VirtualListbox } from "./virtual-listbox.js";
-export {
-  Listbox,
-  ListboxGroup,
-  ListboxGroupLabel,
-  ListboxOption,
-  ListboxSearch,
-  VirtualListbox,
-  useListboxContext
-};
+import "@fluixi-ui/tokens/css/base.css";
+import "@fluixi-ui/tokens/css/parts/listbox.css";
+export { Listbox, ListboxGroup, ListboxGroupLabel, ListboxOption, ListboxSearch, VirtualListbox, useListboxContext };

package/dist/listbox.js

@@ -1,281 +1,352 @@
-import { delegateEvents, splitProps, createComponent, createNativeElement, spread, mergeProps, handleRef, insert } from "@fluixi/dom";
-import { createSignal, createEffect, createMemo, createRenderEffect, onCleanup } from "@fluixi/reactive/signal";
-import { createSafeContext, createKeyOf, createValuesEqual, createId, composeEventHandlers, dataAttr, composeId } from "@fluixi-ui/kit";
+import { createComponent, createNativeElement, delegateEvents, handleRef, insert, mergeProps, splitProps, spread } from "@fluixi/dom";
+import { createEffect, createMemo, createRenderEffect, createSignal, onCleanup } from "@fluixi/reactive/signal";
+import { composeEventHandlers, composeId, createId, createKeyOf, createSafeContext, createValuesEqual, dataAttr } from "@fluixi-ui/kit";
 import { createCollection, createSelectionManager, createTypeahead, getNextEnabledIndex } from "@fluixi-ui/primitives";
 import { fxProps } from "@fluixi-ui/fx";
-delegateEvents(["input", "click", "keydown", "focus"]);
-const [ListboxProvider, useListboxContext] = createSafeContext("Listbox");
+//#region src/listbox.tsx
+delegateEvents([
+	"input",
+	"click",
+	"keydown",
+	"focus"
+]);
+var [ListboxProvider, useListboxContext] = createSafeContext("Listbox");
 function toArray(value) {
-  if (value == null) return [];
-  return Array.isArray(value) ? value : [value];
+	if (value == null) return [];
+	return Array.isArray(value) ? value : [value];
 }
+/**
+* A selectable list of options using the active-descendant model (focus stays
+* on the listbox; the active option is tracked via `aria-activedescendant`).
+* Supports `single` or `multiple` selection, arrow-key navigation that skips
+* disabled options, Home/End, and type-ahead.
+*
+* @example
+* ```tsx
+* import { Listbox, ListboxOption } from '@fluixi-ui/listbox';
+*
+* <Listbox selectionMode="single" defaultValue="apple" onChange={setFruit}>
+*   <ListboxOption value="apple">Apple</ListboxOption>
+*   <ListboxOption value="banana">Banana</ListboxOption>
+*   <ListboxOption value="cherry" disabled>Cherry</ListboxOption>
+* </Listbox>
+* ```
+*/
 function Listbox(props) {
-  const [local, others] = splitProps(props, [
-    "selectionMode",
-    "value",
-    "defaultValue",
-    "onChange",
-    "disabled",
-    "disallowEmptySelection",
-    "itemToKey",
-    "compare",
-    "ref",
-    "children",
-    "onKeyDown",
-    "onFocus",
-    "fx",
-    "style"
-  ]);
-  const keyOf = createKeyOf(() => local.itemToKey);
-  const valuesEqual = createValuesEqual(keyOf, () => local.compare);
-  const valuesByKey = /* @__PURE__ */ new Map();
-  const registerValue = (key, item) => {
-    valuesByKey.set(key, item);
-    return () => valuesByKey.delete(key);
-  };
-  const valueFor = (key) => valuesByKey.get(key) ?? key;
-  const baseId = createId("listbox");
-  const mode = () => local.selectionMode ?? "single";
-  const isDisabled = () => local.disabled ?? false;
-  const collection = createCollection();
-  const selection = createSelectionManager({
-    mode: local.selectionMode ?? "single",
-    selectedKeys: local.value !== void 0 ? () => toArray(local.value).map(keyOf) : void 0,
-    defaultSelectedKeys: toArray(local.defaultValue).map(keyOf),
-    disallowEmptySelection: local.disallowEmptySelection,
-    onSelectionChange: (keys) => local.onChange?.([...keys].map(valueFor))
-  });
-  const selectedValues = () => {
-    if (local.value !== void 0 && local.value !== null) return toArray(local.value);
-    return [...selection.selectedKeys()].map(valueFor);
-  };
-  const isValueSelected = (candidate) => {
-    if (!local.compare) return selection.isSelected(keyOf(candidate));
-    return selectedValues().some((selected) => valuesEqual(selected, candidate));
-  };
-  const [activeKey, setActiveKey] = createSignal(void 0);
-  const [query, setQuery] = createSignal("");
-  const optionId = (key) => composeId(baseId, `option-${key}`);
-  const activeIndex = () => collection.items().findIndex((item) => item.value === activeKey());
-  const move = (action) => {
-    const items = collection.items();
-    const next = getNextEnabledIndex(items, activeIndex(), action, true);
-    if (next !== -1) setActiveKey(items[next].value);
-  };
-  const firstMeaningfulKey = () => {
-    const selected = selection.firstSelectedKey();
-    if (selected !== void 0) return selected;
-    const first = collection.items().find((item) => !item.disabled);
-    return first?.value;
-  };
-  const pressActive = () => {
-    const key = activeKey();
-    if (key !== void 0) selection.toggle(key);
-  };
-  const onOptionPress = (key) => {
-    setActiveKey(key);
-    selection.toggle(key);
-  };
-  const typeahead = createTypeahead({
-    getItems: () => collection.items().map((item) => ({
-      textValue: item.textValue ?? item.ref.textContent ?? "",
-      disabled: item.disabled
-    })),
-    getActiveIndex: () => activeIndex(),
-    onMatch: (index) => {
-      const item = collection.items()[index];
-      if (item) setActiveKey(item.value);
-    }
-  });
-  const onKeyDown = (event) => {
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        move(activeKey() === void 0 ? "first" : "next");
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        move(activeKey() === void 0 ? "last" : "previous");
-        break;
-      case "Home":
-        event.preventDefault();
-        move("first");
-        break;
-      case "End":
-        event.preventDefault();
-        move("last");
-        break;
-      case "Enter":
-        event.preventDefault();
-        pressActive();
-        break;
-      case " ":
-        if (typeahead.buffer() === "") {
-          event.preventDefault();
-          pressActive();
-        } else {
-          typeahead.onKeyDown(event);
-        }
-        break;
-      default:
-        typeahead.onKeyDown(event);
-    }
-  };
-  const onFocus = () => {
-    if (activeKey() === void 0) setActiveKey(firstMeaningfulKey());
-  };
-  createEffect(() => {
-    const key = activeKey();
-    if (key === void 0) return;
-    const item = collection.items().find((entry) => entry.value === key);
-    item?.ref.scrollIntoView?.({ block: "nearest" });
-  });
-  const context = {
-    selection,
-    keyOf,
-    isValueSelected,
-    registerValue,
-    collection,
-    activeKey,
-    setActiveKey,
-    optionId,
-    isDisabled,
-    onOptionPress,
-    query,
-    setQuery
-  };
-  createEffect(() => {
-    query();
-    const key = activeKey();
-    if (key === void 0) return;
-    const items = collection.items();
-    if (!items.some((item) => item.value === key)) {
-      setActiveKey(items.find((item) => !item.disabled)?.value);
-    }
-  });
-  return createMemo(() => createComponent(ListboxProvider, { get value() {
-    return context;
-  }, get children() {
-    return (() => {
-      const _el$ = createNativeElement("div");
-      spread({ element: _el$, props: mergeProps(fxProps(
-        () => local.fx,
-        () => local.style
-      ), others, { ref: (node) => handleRef(local.ref, node), role: "listbox", id: baseId, tabindex: () => isDisabled() ? -1 : 0, "aria-multiselectable": () => mode() === "multiple" ? "true" : void 0, "aria-disabled": () => isDisabled() ? "true" : void 0, "aria-activedescendant": () => activeKey() !== void 0 ? optionId(activeKey()) : void 0, "data-disabled": () => dataAttr(isDisabled()), onKeyDown: composeEventHandlers([
-        local.onKeyDown,
-        (event) => {
-          if (!isDisabled()) onKeyDown(event);
-        }
-      ]), onFocus: composeEventHandlers([
-        local.onFocus,
-        onFocus
-      ]) }) });
-      insert(_el$, local.children);
-      return _el$;
-    })();
-  } }));
+	const [local, others] = splitProps(props, [
+		"selectionMode",
+		"value",
+		"defaultValue",
+		"onChange",
+		"disabled",
+		"disallowEmptySelection",
+		"itemToKey",
+		"compare",
+		"ref",
+		"children",
+		"onKeyDown",
+		"onFocus",
+		"fx",
+		"style"
+	]);
+	const keyOf = createKeyOf(() => local.itemToKey);
+	const valuesEqual = createValuesEqual(keyOf, () => local.compare);
+	const valuesByKey = /* @__PURE__ */ new Map();
+	const registerValue = (key, item) => {
+		valuesByKey.set(key, item);
+		return () => valuesByKey.delete(key);
+	};
+	const valueFor = (key) => valuesByKey.get(key) ?? key;
+	const baseId = createId("listbox");
+	const mode = () => local.selectionMode ?? "single";
+	const isDisabled = () => local.disabled ?? false;
+	const collection = createCollection();
+	const selection = createSelectionManager({
+		mode: local.selectionMode ?? "single",
+		selectedKeys: local.value !== void 0 ? () => toArray(local.value).map(keyOf) : void 0,
+		defaultSelectedKeys: toArray(local.defaultValue).map(keyOf),
+		disallowEmptySelection: local.disallowEmptySelection,
+		onSelectionChange: (keys) => local.onChange?.([...keys].map(valueFor))
+	});
+	/** The selected values, from the controlled prop or resolved from the keys. */
+	const selectedValues = () => {
+		if (local.value !== void 0 && local.value !== null) return toArray(local.value);
+		return [...selection.selectedKeys()].map(valueFor);
+	};
+	const isValueSelected = (candidate) => {
+		if (!local.compare) return selection.isSelected(keyOf(candidate));
+		return selectedValues().some((selected) => valuesEqual(selected, candidate));
+	};
+	const [activeKey, setActiveKey] = createSignal(void 0);
+	const [query, setQuery] = createSignal("");
+	const optionId = (key) => composeId(baseId, `option-${key}`);
+	const activeIndex = () => collection.items().findIndex((item) => item.value === activeKey());
+	const move = (action) => {
+		const items = collection.items();
+		const next = getNextEnabledIndex(items, activeIndex(), action, true);
+		if (next !== -1) setActiveKey(items[next].value);
+	};
+	const firstMeaningfulKey = () => {
+		const selected = selection.firstSelectedKey();
+		if (selected !== void 0) return selected;
+		return collection.items().find((item) => !item.disabled)?.value;
+	};
+	const pressActive = () => {
+		const key = activeKey();
+		if (key !== void 0) selection.toggle(key);
+	};
+	const onOptionPress = (key) => {
+		setActiveKey(key);
+		selection.toggle(key);
+	};
+	const typeahead = createTypeahead({
+		getItems: () => collection.items().map((item) => ({
+			textValue: item.textValue ?? item.ref.textContent ?? "",
+			disabled: item.disabled
+		})),
+		getActiveIndex: () => activeIndex(),
+		onMatch: (index) => {
+			const item = collection.items()[index];
+			if (item) setActiveKey(item.value);
+		}
+	});
+	const onKeyDown = (event) => {
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				move(activeKey() === void 0 ? "first" : "next");
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				move(activeKey() === void 0 ? "last" : "previous");
+				break;
+			case "Home":
+				event.preventDefault();
+				move("first");
+				break;
+			case "End":
+				event.preventDefault();
+				move("last");
+				break;
+			case "Enter":
+				event.preventDefault();
+				pressActive();
+				break;
+			case " ":
+				if (typeahead.buffer() === "") {
+					event.preventDefault();
+					pressActive();
+				} else typeahead.onKeyDown(event);
+				break;
+			default: typeahead.onKeyDown(event);
+		}
+	};
+	const onFocus = () => {
+		if (activeKey() === void 0) setActiveKey(firstMeaningfulKey());
+	};
+	createEffect(() => {
+		const key = activeKey();
+		if (key === void 0) return;
+		collection.items().find((entry) => entry.value === key)?.ref.scrollIntoView?.({ block: "nearest" });
+	});
+	const context = {
+		selection,
+		keyOf,
+		isValueSelected,
+		registerValue,
+		collection,
+		activeKey,
+		setActiveKey,
+		optionId,
+		isDisabled,
+		onOptionPress,
+		query,
+		setQuery
+	};
+	createEffect(() => {
+		query();
+		const key = activeKey();
+		if (key === void 0) return;
+		const items = collection.items();
+		if (!items.some((item) => item.value === key)) setActiveKey(items.find((item) => !item.disabled)?.value);
+	});
+	return createMemo(() => createComponent(ListboxProvider, {
+		get value() {
+			return context;
+		},
+		get children() {
+			return (() => {
+				const _el$ = createNativeElement("div");
+				spread({
+					element: _el$,
+					props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+						ref: (node) => handleRef(local.ref, node),
+						role: "listbox",
+						id: baseId,
+						tabindex: () => isDisabled() ? -1 : 0,
+						"aria-multiselectable": () => mode() === "multiple" ? "true" : void 0,
+						"aria-disabled": () => isDisabled() ? "true" : void 0,
+						"aria-activedescendant": () => activeKey() !== void 0 ? optionId(activeKey()) : void 0,
+						"data-disabled": () => dataAttr(isDisabled()),
+						onKeyDown: composeEventHandlers([local.onKeyDown, (event) => {
+							if (!isDisabled()) onKeyDown(event);
+						}]),
+						onFocus: composeEventHandlers([local.onFocus, onFocus])
+					})
+				});
+				insert(_el$, local.children, null);
+				return _el$;
+			})();
+		}
+	}));
 }
+/** A selectable option within a {@link Listbox}, identified by `value`. */
 function ListboxOption(props) {
-  const ctx = useListboxContext();
-  const [local, others] = splitProps(props, [
-    "value",
-    "textValue",
-    "disabled",
-    "onClick",
-    "ref",
-    "children",
-    "fx",
-    "style"
-  ]);
-  const key = () => ctx.keyOf(local.value);
-  const isDisabled = () => local.disabled ?? false;
-  const isSelected = () => ctx.isValueSelected(local.value);
-  const isActive = () => ctx.activeKey() === key();
-  const [node, setNode] = createSignal(void 0);
-  const label = () => local.textValue ?? (typeof local.children === "string" ? local.children : void 0) ?? node()?.textContent ?? // Falls back to the key, never the raw value: an object would stringify to
-  // "[object Object]" and make typeahead match nothing.
-  key();
-  const isMatch = () => {
-    const q = ctx.query().trim().toLowerCase();
-    return q === "" || label().toLowerCase().includes(q);
-  };
-  const setRef = (element) => {
-    setNode(element);
-    handleRef(local.ref, element);
-  };
-  createRenderEffect(() => {
-    const element = node();
-    if (!element || !isMatch()) return;
-    const remove = ctx.collection.register({
-      ref: element,
-      value: key(),
-      textValue: local.textValue,
-      disabled: local.disabled
-    });
-    onCleanup(remove);
-    onCleanup(ctx.registerValue(key(), local.value));
-  });
-  return (() => {
-    const _el$ = createNativeElement("div");
-    spread({ element: _el$, props: mergeProps(fxProps(
-      () => local.fx,
-      () => local.style
-    ), others, { ref: setRef, role: "option", id: () => ctx.optionId(key()), hidden: () => !isMatch(), "aria-selected": () => isSelected() ? "true" : "false", "aria-disabled": () => isDisabled() ? "true" : void 0, "data-selected": () => dataAttr(isSelected()), "data-active": () => dataAttr(isActive()), "data-disabled": () => dataAttr(isDisabled()), onClick: composeEventHandlers([
-      local.onClick,
-      () => {
-        if (!isDisabled()) ctx.onOptionPress(key());
-      }
-    ]), onPointerMove: () => {
-      if (!isDisabled()) ctx.setActiveKey(key());
-    } }) });
-    insert(_el$, local.children);
-    return _el$;
-  })();
+	const ctx = useListboxContext();
+	const [local, others] = splitProps(props, [
+		"value",
+		"textValue",
+		"disabled",
+		"onClick",
+		"ref",
+		"children",
+		"fx",
+		"style"
+	]);
+	const key = () => ctx.keyOf(local.value);
+	const isDisabled = () => local.disabled ?? false;
+	const isSelected = () => ctx.isValueSelected(local.value);
+	const isActive = () => ctx.activeKey() === key();
+	const [node, setNode] = createSignal(void 0);
+	const label = () => local.textValue ?? (typeof local.children === "string" ? local.children : void 0) ?? node()?.textContent ?? key();
+	const isMatch = () => {
+		const q = ctx.query().trim().toLowerCase();
+		return q === "" || label().toLowerCase().includes(q);
+	};
+	const setRef = (element) => {
+		setNode(element);
+		handleRef(local.ref, element);
+	};
+	createRenderEffect(() => {
+		const element = node();
+		if (!element || !isMatch()) return;
+		const remove = ctx.collection.register({
+			ref: element,
+			value: key(),
+			textValue: local.textValue,
+			disabled: local.disabled
+		});
+		onCleanup(remove);
+		onCleanup(ctx.registerValue(key(), local.value));
+	});
+	return (() => {
+		const _el$ = createNativeElement("div");
+		spread({
+			element: _el$,
+			props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+				ref: setRef,
+				role: "option",
+				id: () => ctx.optionId(key()),
+				hidden: () => !isMatch(),
+				"aria-selected": () => isSelected() ? "true" : "false",
+				"aria-disabled": () => isDisabled() ? "true" : void 0,
+				"data-selected": () => dataAttr(isSelected()),
+				"data-active": () => dataAttr(isActive()),
+				"data-disabled": () => dataAttr(isDisabled()),
+				onClick: composeEventHandlers([local.onClick, () => {
+					if (!isDisabled()) ctx.onOptionPress(key());
+				}]),
+				onPointerMove: () => {
+					if (!isDisabled()) ctx.setActiveKey(key());
+				}
+			})
+		});
+		insert(_el$, local.children, null);
+		return _el$;
+	})();
 }
+/** Groups related options under a shared {@link ListboxGroupLabel}. */
 function ListboxGroup(props) {
-  const [local, others] = splitProps(props, ["ref", "children", "fx", "style"]);
-  const groupId = createId("listbox-group");
-  return (() => {
-    const _el$ = createNativeElement("div");
-    spread({ element: _el$, props: mergeProps(fxProps(
-      () => local.fx,
-      () => local.style
-    ), others, { ref: (node) => handleRef(local.ref, node), role: "group", "aria-labelledby": () => composeId(groupId, "label"), "data-listbox-group": "" }) });
-    insert(_el$, createMemo(() => createComponent(ListboxGroupIdProvider, { get value() {
-      return groupId;
-    }, get children() {
-      return local.children;
-    } })), null);
-    return _el$;
-  })();
+	const [local, others] = splitProps(props, [
+		"ref",
+		"children",
+		"fx",
+		"style"
+	]);
+	const groupId = createId("listbox-group");
+	return (() => {
+		const _el$ = createNativeElement("div");
+		spread({
+			element: _el$,
+			props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+				ref: (node) => handleRef(local.ref, node),
+				role: "group",
+				"aria-labelledby": () => composeId(groupId, "label"),
+				"data-listbox-group": ""
+			})
+		});
+		insert(_el$, createMemo(() => createComponent(ListboxGroupIdProvider, {
+			get value() {
+				return groupId;
+			},
+			get children() {
+				return local.children;
+			}
+		})), null);
+		return _el$;
+	})();
 }
-const [ListboxGroupIdProvider, useListboxGroupId] = createSafeContext("ListboxGroup");
+var [ListboxGroupIdProvider, useListboxGroupId] = createSafeContext("ListboxGroup");
+/**
+* A search box that filters the {@link Listbox}'s options by their text. Options
+* that don't match are hidden and skipped by keyboard navigation. Place it above
+* the options.
+*
+* @example
+* ```tsx
+* <Listbox>
+*   <ListboxSearch placeholder="Search…" />
+*   <ListboxOption value="apple">Apple</ListboxOption>
+* </Listbox>
+* ```
+*/
 function ListboxSearch(props) {
-  const ctx = useListboxContext();
-  return (() => {
-    const _el$ = createNativeElement("input");
-    spread({ element: _el$, props: mergeProps(props, { type: "text", "data-listbox-search": "", "aria-label": "Search options", value: () => ctx.query(), onInput: (event) => ctx.setQuery(event.target.value) }) });
-    return _el$;
-  })();
+	const ctx = useListboxContext();
+	return (() => {
+		const _el$ = createNativeElement("input");
+		spread({
+			element: _el$,
+			props: mergeProps(props, {
+				type: "text",
+				"data-listbox-search": "",
+				"aria-label": "Search options",
+				value: () => ctx.query(),
+				onInput: (event) => ctx.setQuery(event.target.value)
+			})
+		});
+		return _el$;
+	})();
 }
+/** The heading for a {@link ListboxGroup}, linked via `aria-labelledby`. */
 function ListboxGroupLabel(props) {
-  const groupId = useListboxGroupId();
-  const [local, others] = splitProps(props, ["children", "fx", "style"]);
-  return (() => {
-    const _el$ = createNativeElement("div");
-    spread({ element: _el$, props: mergeProps(fxProps(
-      () => local.fx,
-      () => local.style
-    ), others, { id: () => composeId(groupId, "label"), "data-listbox-group-label": "" }) });
-    insert(_el$, local.children);
-    return _el$;
-  })();
+	const groupId = useListboxGroupId();
+	const [local, others] = splitProps(props, [
+		"children",
+		"fx",
+		"style"
+	]);
+	return (() => {
+		const _el$ = createNativeElement("div");
+		spread({
+			element: _el$,
+			props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+				id: () => composeId(groupId, "label"),
+				"data-listbox-group-label": ""
+			})
+		});
+		insert(_el$, local.children, null);
+		return _el$;
+	})();
 }
-export {
-  Listbox,
-  ListboxGroup,
-  ListboxGroupLabel,
-  ListboxOption,
-  ListboxSearch,
-  useListboxContext
-};
+//#endregion
+export { Listbox, ListboxGroup, ListboxGroupLabel, ListboxOption, ListboxSearch, useListboxContext };