@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/list-box.js

@@ -0,0 +1,906 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/ListBox.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { DEFAULT_SLOT, assignRef, createContextProps, createRenderProps, createSlot, dom } from "./utils.js";
+import { SelectableCollectionContext } from "./autocomplete.js";
+import { CollectionRendererContext, SectionContext } from "./collection.js";
+import { TextContext } from "./text.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { DragAndDropContext, DropIndicatorContext, createDndPersistedKeys, createRenderDropIndicator } from "./drag-and-drop.js";
+import { createCollectionDragAndDrop } from "./collection-dnd.js";
+import { HeaderContext } from "./header.js";
+import { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { Show, createContext, createMemo, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { applyRef, dynamic, escape, memo, mergeProps as mergeProps$1, scope, ssr, ssrHydrationKey, ssrStyleProperties, ssrStyleProperty } from "@solidjs/web";
+import { BaseCollection, ItemNode, LoaderNode, SectionNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, createBranchComponent, createLeafComponent } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { ListKeyboardDelegate } from "@solid2-aria/core/selection/list-keyboard-delegate";
+import { createCollator } from "@solid2-aria/core/i18n/create-collator";
+import { createFocus } from "@solid2-aria/core/interactions/create-focus";
+import { createKeyboard } from "@solid2-aria/core/interactions/create-keyboard";
+import { createListBox } from "@solid2-aria/core/listbox/create-list-box";
+import { createListBoxSection } from "@solid2-aria/core/listbox/create-list-box-section";
+import { createOption } from "@solid2-aria/core/listbox/create-option";
+import { createLoadMoreSentinel } from "@solid2-aria/core/utils/create-load-more-sentinel";
+import { createListState } from "@solid2-aria/stately/list/create-list-state";
+// src/list-box.tsx
+var _tmpl$ = [
+	"<div",
+	" role=\"option\" style=\"",
+	"\">",
+	"</div>"
+];
+var _tmpl$2 = [
+	"<div",
+	" style=\"",
+	"\" inert><div data-testid=\"loadMoreSentinel\" style=\"",
+	"\"></div></div>"
+];
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _m$4 = Symbol();
+var _m$5 = Symbol();
+var _m$6 = Symbol();
+var _m$7 = Symbol();
+var _d$ = {
+	get() {
+		const props = this[_m$];
+		return Collection(props);
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p, _p2, _p3) {
+	this[_m$] = _p;
+	this.createCollection = _p2;
+	Object.defineProperty(this, "content", _d$);
+	this.children = _p3;
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		return this[_m$].props;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$3 = {
+	get() {
+		return this[_m$].listRef;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p4, _p5) {
+	this[_m$] = _p4;
+	Object.defineProperty(this, "props", _d$2);
+	this.state = _p5;
+	Object.defineProperty(this, "listRef", _d$3);
+}
+_P$2.prototype = Object.prototype;
+var _d$4 = {
+	get() {
+		return this[_m$].collection;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		const state = this[_m$];
+		const props = this[_m$2];
+		const dnd = this[_m$3];
+		return createDndPersistedKeys(state.selectionManager, props.dragAndDropHooks, dnd.dropState);
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$6 = {
+	get() {
+		const props = this[_m$2];
+		const dnd = this[_m$3];
+		return createRenderDropIndicator(props.dragAndDropHooks, dnd.dropState);
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p6, _p7, _p8, _p9) {
+	this[_m$] = _p6;
+	this[_m$2] = _p7;
+	this[_m$3] = _p8;
+	Object.defineProperty(this, "collection", _d$4);
+	this.scrollRef = _p9;
+	Object.defineProperty(this, "persistedKeys", _d$5);
+	Object.defineProperty(this, "renderDropIndicator", _d$6);
+}
+_P$3.prototype = Object.prototype;
+var _d$7 = {
+	get() {
+		const Root = this[_m$];
+		const state = this[_m$2];
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		const ref = this[_m$5];
+		return Root(new _P$3(state, props, dnd, ref));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p0, _p1, _p10, _p11, _p12, _p13) {
+	this[_m$] = _p0;
+	this[_m$2] = _p1;
+	this[_m$3] = _p10;
+	this[_m$4] = _p11;
+	this[_m$5] = _p12;
+	this.value = _p13;
+	Object.defineProperty(this, "children", _d$7);
+}
+_P$4.prototype = Object.prototype;
+var _d$8 = {
+	get() {
+		const Root = this[_m$];
+		const state = this[_m$2];
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		const ref = this[_m$5];
+		return DropIndicatorContext(new _P$4(Root, state, props, dnd, ref, { render: (indicatorProps, indicatorRef) => ListBoxDropIndicator(mergeProps$1(indicatorProps, { ref(r$) {
+			var _ref$ = indicatorRef;
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : indicatorRef = r$;
+		} })) }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p14, _p15, _p16, _p17, _p18, _p19) {
+	this[_m$] = _p14;
+	this[_m$2] = _p15;
+	this[_m$3] = _p16;
+	this[_m$4] = _p17;
+	this[_m$5] = _p18;
+	this.value = _p19;
+	Object.defineProperty(this, "children", _d$8);
+}
+_P$5.prototype = Object.prototype;
+var _d$9 = {
+	get() {
+		const Root = this[_m$];
+		const state = this[_m$2];
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		const ref = this[_m$5];
+		return DragAndDropContext(new _P$5(Root, state, props, dnd, ref, dnd));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p20, _p21, _p22, _p23, _p24, _p25) {
+	this[_m$] = _p20;
+	this[_m$2] = _p21;
+	this[_m$3] = _p22;
+	this[_m$4] = _p23;
+	this[_m$5] = _p24;
+	this.value = _p25;
+	Object.defineProperty(this, "children", _d$9);
+}
+_P$6.prototype = Object.prototype;
+var _d$10 = {
+	get() {
+		const Root = this[_m$];
+		const state = this[_m$2];
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		const ref = this[_m$5];
+		return SectionContext(new _P$6(Root, state, props, dnd, ref, {
+			name: "ListBoxSection",
+			render: (sectionProps, sectionRef, sectionNode, defaultClass) => ListBoxSectionContent({
+				props: sectionProps,
+				sectionRef,
+				node: sectionNode,
+				defaultClass
+			})
+		}));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p26, _p27, _p28, _p29, _p30, _p31) {
+	this[_m$] = _p26;
+	this[_m$2] = _p27;
+	this[_m$3] = _p28;
+	this[_m$4] = _p29;
+	this[_m$5] = _p30;
+	this.value = _p31;
+	Object.defineProperty(this, "children", _d$10);
+}
+_P$7.prototype = Object.prototype;
+var _d$11 = {
+	get() {
+		const Root = this[_m$];
+		const state = this[_m$2];
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		const ref = this[_m$5];
+		return ListStateContext(new _P$7(Root, state, props, dnd, ref, state));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$8(_p32, _p33, _p34, _p35, _p36, _p37) {
+	this[_m$] = _p32;
+	this[_m$2] = _p33;
+	this[_m$3] = _p34;
+	this[_m$4] = _p35;
+	this[_m$5] = _p36;
+	this.value = _p37;
+	Object.defineProperty(this, "children", _d$11);
+}
+_P$8.prototype = Object.prototype;
+var _d$12 = {
+	get() {
+		return this[_m$].slot ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$13 = {
+	get() {
+		return this[_m$2].isDropTarget || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$14 = {
+	get() {
+		return this[_m$2].isEmpty || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$15 = {
+	get() {
+		return this[_m$3].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$16 = {
+	get() {
+		return this[_m$3].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$17 = {
+	get() {
+		return this[_m$2].layout;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$18 = {
+	get() {
+		return this[_m$2].orientation;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$19 = {
+	get() {
+		const Root = this[_m$4];
+		const state = this[_m$5];
+		const props = this[_m$];
+		const dnd = this[_m$6];
+		const ref = this[_m$7];
+		const values = this[_m$2];
+		return [
+			ListBoxContext(new _P$8(Root, state, props, dnd, ref, props)),
+			memo(() => {
+				return dnd.preview;
+			}),
+			memo(() => {
+				var _v$, _v$2;
+				return memo(() => {
+					return !!(values.isEmpty && props.renderEmptyState);
+				})() ? (_v$ = ssrHydrationKey(), _v$2 = scope(() => {
+					return escape(props.renderEmptyState(values));
+				}), ssr(_tmpl$, _v$, ssrStyleProperty("display:", "contents"), _v$2)) : null;
+			})
+		];
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$9(_p38, _p39, _p40, _p41, _p42, _p43, _p44, _p45) {
+	this[_m$] = _p38;
+	this[_m$2] = _p39;
+	this[_m$3] = _p40;
+	this[_m$4] = _p41;
+	this[_m$5] = _p42;
+	this[_m$6] = _p43;
+	this[_m$7] = _p44;
+	this.ref = _p45;
+	Object.defineProperty(this, "slot", _d$12);
+	Object.defineProperty(this, "data-drop-target", _d$13);
+	Object.defineProperty(this, "data-empty", _d$14);
+	Object.defineProperty(this, "data-focused", _d$15);
+	Object.defineProperty(this, "data-focus-visible", _d$16);
+	Object.defineProperty(this, "data-layout", _d$17);
+	Object.defineProperty(this, "data-orientation", _d$18);
+	Object.defineProperty(this, "children", _d$19);
+}
+_P$9.prototype = Object.prototype;
+var _d$20 = {
+	get() {
+		return this[_m$].collection;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$10(_p46, _p47) {
+	this[_m$] = _p46;
+	Object.defineProperty(this, "collection", _d$20);
+	this.parent = _p47;
+}
+_P$10.prototype = Object.prototype;
+var _d$21 = {
+	get() {
+		const aria = this[_m$];
+		const registerHeading = this[_m$2];
+		return mergeProps(merge(() => aria.headingProps ?? {}), { registerSlot: registerHeading });
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$22 = {
+	get() {
+		const Branch = this[_m$3];
+		const state = this[_m$4];
+		const section = this[_m$5];
+		return Branch(new _P$10(state, section));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$11(_p48, _p49, _p50, _p51, _p52) {
+	this[_m$] = _p48;
+	this[_m$2] = _p49;
+	this[_m$3] = _p50;
+	this[_m$4] = _p51;
+	this[_m$5] = _p52;
+	Object.defineProperty(this, "value", _d$21);
+	Object.defineProperty(this, "children", _d$22);
+}
+_P$11.prototype = Object.prototype;
+var _d$23 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$12(_p53, _p54) {
+	this[_m$] = _p53;
+	this.value = _p54;
+	Object.defineProperty(this, "children", _d$23);
+}
+_P$12.prototype = Object.prototype;
+var _d$24 = {
+	get() {
+		const render = this[_m$];
+		const aria = this[_m$2];
+		return SelectionIndicatorContext(new _P$12(render, { get isSelected() {
+			return aria.isSelected;
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$13(_p55, _p56, _p57) {
+	this[_m$] = _p55;
+	this[_m$2] = _p56;
+	this.value = _p57;
+	Object.defineProperty(this, "children", _d$24);
+}
+_P$13.prototype = Object.prototype;
+var _d$25 = {
+	get() {
+		return this[_m$].allowsDragging ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$26 = {
+	get() {
+		return this[_m$].isDragging ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$27 = {
+	get() {
+		return this[_m$].isDropTarget ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$28 = {
+	get() {
+		return this[_m$2].isSelected || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$29 = {
+	get() {
+		return this[_m$2].isDisabled || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$30 = {
+	get() {
+		return this[_m$3].isHovered || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$31 = {
+	get() {
+		return this[_m$2].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$32 = {
+	get() {
+		return this[_m$2].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$33 = {
+	get() {
+		return this[_m$2].isPressed || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$34 = {
+	get() {
+		const state = this[_m$4];
+		return memo(() => {
+			return state.selectionManager.selectionMode === "none";
+		})() ? void 0 : state.selectionManager.selectionMode;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$35 = {
+	get() {
+		const render = this[_m$5];
+		const aria = this[_m$2];
+		return TextContext(new _P$13(render, aria, { slots: {
+			get [DEFAULT_SLOT]() {
+				return aria.labelProps;
+			},
+			get description() {
+				return aria.descriptionProps;
+			},
+			get label() {
+				return aria.labelProps;
+			}
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$14(_p58, _p59, _p60, _p61, _p62, _p63) {
+	this[_m$] = _p58;
+	this[_m$2] = _p59;
+	this[_m$3] = _p60;
+	this[_m$4] = _p61;
+	this[_m$5] = _p62;
+	this.ref = _p63;
+	Object.defineProperty(this, "data-allows-dragging", _d$25);
+	Object.defineProperty(this, "data-dragging", _d$26);
+	Object.defineProperty(this, "data-drop-target", _d$27);
+	Object.defineProperty(this, "data-selected", _d$28);
+	Object.defineProperty(this, "data-disabled", _d$29);
+	Object.defineProperty(this, "data-hovered", _d$30);
+	Object.defineProperty(this, "data-focused", _d$31);
+	Object.defineProperty(this, "data-focus-visible", _d$32);
+	Object.defineProperty(this, "data-pressed", _d$33);
+	Object.defineProperty(this, "data-selection-mode", _d$34);
+	Object.defineProperty(this, "children", _d$35);
+}
+_P$14.prototype = Object.prototype;
+var _d$36 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$15(_p64, _p65, _p66, _p67) {
+	this[_m$] = _p64;
+	this.role = _p65;
+	this.tabindex = _p66;
+	this.ref = _p67;
+	Object.defineProperty(this, "children", _d$36);
+}
+_P$15.prototype = Object.prototype;
+var _d$37 = {
+	get() {
+		return this[_m$].isLoading;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$38 = {
+	get() {
+		const props = this[_m$];
+		const render = this[_m$2];
+		const forwardedRef = this[_m$3];
+		return dom.div(mergeProps$1(() => {
+			return filterDOMProps(props, { global: true });
+		}, render, new _P$15(render, "option", -1, (element) => {
+			assignRef(forwardedRef, element);
+		})));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$16(_p68, _p69, _p70) {
+	this[_m$] = _p68;
+	this[_m$2] = _p69;
+	this[_m$3] = _p70;
+	Object.defineProperty(this, "when", _d$37);
+	Object.defineProperty(this, "children", _d$38);
+}
+_P$16.prototype = Object.prototype;
+var _d$39 = {
+	get() {
+		return this[_m$].isDropTarget || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$17(_p71, _p72, _p73) {
+	this[_m$] = _p71;
+	this.role = _p72;
+	this.ref = _p73;
+	Object.defineProperty(this, "data-drop-target", _d$39);
+}
+_P$17.prototype = Object.prototype;
+var _d$40 = {
+	get() {
+		return !this[_m$].isHidden;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$41 = {
+	get() {
+		const aria = this[_m$];
+		const render = this[_m$2];
+		const setRef = this[_m$3];
+		const props = this[_m$4];
+		return dom.div(mergeProps$1(() => {
+			return aria.dropIndicatorProps;
+		}, render, new _P$17(aria, "option", [(element) => {
+			setRef(element);
+		}, (element) => {
+			assignRef(untrack(() => props.ref), element);
+		}])));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$18(_p74, _p75, _p76, _p77) {
+	this[_m$] = _p74;
+	this[_m$2] = _p75;
+	this[_m$3] = _p76;
+	this[_m$4] = _p77;
+	Object.defineProperty(this, "when", _d$40);
+	Object.defineProperty(this, "children", _d$41);
+}
+_P$18.prototype = Object.prototype;
+const ListBoxContext = createContext(null);
+const ListStateContext = createContext(null);
+function ListBox(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), ListBoxContext);
+	const state = useContext(ListStateContext);
+	if (state) return ListBoxInner({
+		props,
+		state,
+		listRef: setRef
+	});
+	return CollectionBuilder(new _P$(props, () => new BaseCollection(), (collection) => StandaloneListBox({
+		props,
+		collection,
+		listRef: setRef
+	})));
+}
+function StandaloneListBox(input) {
+	return ListBoxInner(new _P$2(input, createListState(mergeProps(merge(() => input.props ?? {}), {
+		children: null,
+		get collection() {
+			return input.collection;
+		},
+		items: void 0
+	}))));
+}
+function ListBoxInner(input) {
+	const [props, ref, setRef] = createContextProps(untrack(() => input.props), untrack(() => input.listRef), SelectableCollectionContext);
+	const renderer = useContext(CollectionRendererContext);
+	const filtered = createMemo(() => props.filter && input.state.collection.filter ? input.state.collection.filter(props.filter) : input.state.collection);
+	const state = {
+		get collection() {
+			return filtered();
+		},
+		get disabledKeys() {
+			return input.state.disabledKeys;
+		},
+		get selectionManager() {
+			return input.state.selectionManager.withCollection(filtered());
+		}
+	};
+	const locale = createLocale();
+	const collator = createCollator({
+		sensitivity: "base",
+		usage: "search"
+	});
+	const keyboardDelegate = createMemo(() => new ListKeyboardDelegate({
+		collator,
+		collection: state.collection,
+		direction: locale.direction,
+		disabledBehavior: state.selectionManager.disabledBehavior,
+		disabledKeys: state.disabledKeys,
+		layout: props.layout ?? "stack",
+		layoutDelegate: renderer.layoutDelegate,
+		orientation: props.orientation ?? "vertical",
+		ref
+	}));
+	const dnd = createCollectionDragAndDrop({
+		get collection() {
+			return state.collection;
+		},
+		get direction() {
+			return locale.direction;
+		},
+		get dropTargetDelegate() {
+			return renderer.dropTargetDelegate;
+		},
+		get hooks() {
+			return props.dragAndDropHooks;
+		},
+		get keyboardDelegate() {
+			return keyboardDelegate();
+		},
+		get layout() {
+			return props.layout;
+		},
+		get orientation() {
+			return props.orientation;
+		},
+		ref,
+		get selectionManager() {
+			return state.selectionManager;
+		}
+	});
+	const aria = createListBox(mergeProps(props, {
+		get isVirtualized() {
+			return renderer.isVirtualized;
+		},
+		get keyboardDelegate() {
+			return keyboardDelegate();
+		}
+	}), state, ref);
+	const focus = createFocusRing();
+	const values = {
+		get isDropTarget() {
+			return dnd.dropState?.isDropTarget({ type: "root" }) === true;
+		},
+		get isEmpty() {
+			return state.collection.size === 0;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get layout() {
+			return props.layout ?? "stack";
+		},
+		get orientation() {
+			return props.orientation ?? "vertical";
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-ListBox",
+		values
+	}));
+	const Root = renderer.CollectionRoot;
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(filterDOMProps(props, { global: true }), merge(() => aria.listBoxProps ?? {}), merge(() => dnd.collectionProps ?? {}), merge(() => focus.focusProps ?? {}), render);
+	}, new _P$9(props, values, focus, Root, state, dnd, ref, (element) => {
+		setRef(element);
+	})));
+}
+function ListBoxSectionInner(props, ref, section, defaultClass = "solid2-aria-ListBoxSection") {
+	const state = useContext(ListStateContext);
+	if (!state) throw new Error("ListBoxSection must be rendered in a ListBox.");
+	const Branch = useContext(CollectionRendererContext).CollectionBranch;
+	const [registerHeading, heading] = createSlot();
+	const aria = createListBoxSection({
+		get "aria-label"() {
+			return props["aria-label"] ?? void 0;
+		},
+		get heading() {
+			return heading();
+		}
+	});
+	return dom.section(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "id"), merge(() => aria.groupProps ?? {}));
+	}, {
+		get "class"() {
+			return props.class ?? defaultClass;
+		},
+		get style() {
+			return props.style;
+		},
+		get render() {
+			return props.render;
+		},
+		ref(r$) {
+			var _ref$2 = ref;
+			typeof _ref$2 === "function" || Array.isArray(_ref$2) ? applyRef(_ref$2, r$) : ref = r$;
+		},
+		get children() {
+			return HeaderContext(new _P$11(aria, registerHeading, Branch, state, section));
+		}
+	}));
+}
+const ListBoxSectionCollection = createBranchComponent(SectionNode, ListBoxSectionInner);
+const ListBoxItemCollection = createLeafComponent(ItemNode, (props, forwardedRef, item) => {
+	const state = useContext(ListStateContext);
+	if (!state) throw new Error("ListBoxItem must be rendered in a ListBox.");
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createOption({
+		get "aria-label"() {
+			return props["aria-label"];
+		},
+		key: item.key
+	}, state, ref);
+	const hover = createHover(mergeProps(props, { get isDisabled() {
+		return aria.isDisabled;
+	} }));
+	const dnd = useContext(DragAndDropContext);
+	const drag = dnd.dragState ? dnd.dragAndDropHooks?.createDraggableItem?.({
+		hasAction: aria.hasAction,
+		key: item.key
+	}, dnd.dragState) : void 0;
+	const drop = dnd.dropState ? dnd.dragAndDropHooks?.createDroppableItem?.({ target: {
+		dropPosition: "on",
+		key: item.key,
+		type: "item"
+	} }, dnd.dropState, ref) : void 0;
+	const keyboard = createKeyboard(props);
+	const focus = createFocus(props);
+	const values = {
+		get allowsDragging() {
+			return !!dnd.dragState;
+		},
+		get isDisabled() {
+			return aria.isDisabled;
+		},
+		get isDragging() {
+			return dnd.dragState?.isDragging(item.key) === true;
+		},
+		get isDropTarget() {
+			return drop?.isDropTarget === true;
+		},
+		get isFocusVisible() {
+			return aria.isFocusVisible;
+		},
+		get isFocused() {
+			return aria.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isSelected() {
+			return aria.isSelected;
+		},
+		get selectionBehavior() {
+			return state.selectionManager.selectionBehavior;
+		},
+		get selectionMode() {
+			return state.selectionManager.selectionMode;
+		}
+	};
+	const render = createRenderProps(mergeProps(props, {
+		defaultClass: "solid2-aria-ListBoxItem",
+		values
+	}));
+	return dynamic(() => isTruthy(props.href) ? dom.a : dom.div)(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.optionProps ?? {}), merge(() => hover.hoverProps ?? {}), merge(() => keyboard.keyboardProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => drag?.dragProps ?? {}), merge(() => drop?.dropProps ?? {}));
+	}, new _P$14(values, aria, hover, state, render, [(element) => {
+		setRef(element);
+	}, (element) => {
+		assignRef(forwardedRef, element);
+	}])));
+});
+const ListBoxLoadMoreItemCollection = createLeafComponent(LoaderNode, (props, forwardedRef, _node) => {
+	var _v$3;
+	const state = useContext(ListStateContext);
+	if (!state) throw new Error("ListBoxLoadMoreItem must be rendered in a ListBox.");
+	const [sentinel, setSentinel] = createSignal(null, { ownedWrite: true });
+	createLoadMoreSentinel(mergeProps(props, { get collection() {
+		return state.collection;
+	} }), sentinel);
+	const render = createRenderProps(mergeProps(props, {
+		defaultClass: "solid2-aria-ListBoxLoadingIndicator",
+		values: void 0
+	}));
+	return [(_v$3 = ssrHydrationKey(), ssr(_tmpl$2, _v$3, ssrStyleProperties("height:", 0, "position:", "relative", "width:", 0), ssrStyleProperties("height:", "1px", "position:", "absolute", "width:", "1px"))), Show(new _P$16(props, render, forwardedRef))];
+});
+function ListBoxSectionContent(input) {
+	return ListBoxSectionInner(input.props, input.sectionRef, input.node, input.defaultClass);
+}
+function ListBoxItem(props) {
+	return ListBoxItemCollection(mergeProps$1(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function ListBoxSection(props) {
+	return ListBoxSectionCollection(mergeProps$1(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function ListBoxLoadMoreItem(props) {
+	return ListBoxLoadMoreItemCollection(mergeProps$1(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function ListBoxDropIndicator(props) {
+	const context = useContext(DragAndDropContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	if (!context.dragAndDropHooks?.createDropIndicator || !context.dropState) return null;
+	const aria = context.dragAndDropHooks.createDropIndicator(props, context.dropState, ref);
+	const render = createRenderProps(mergeProps(props, {
+		defaultClass: "solid2-aria-DropIndicator",
+		values: { get isDropTarget() {
+			return aria.isDropTarget;
+		} }
+	}));
+	return Show(new _P$18(aria, render, setRef, props));
+}
+export { ListBox, ListBoxContext, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, ListStateContext };
+
+//# sourceMappingURL=list-box.js.map