@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/tree.js

@@ -0,0 +1,1096 @@
+/*
+ * Copyright 2024 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/Tree.tsx.
+ * Modified for Solid Aria: preserve flattened tree traversal with Solid collection nodes, controlled expansion, and reactive accessibility primitives; 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, dom } from "./utils.js";
+import { CollectionRendererContext, DefaultCollectionRenderer } from "./collection.js";
+import { ButtonContext } from "./button.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { CheckboxContext, CheckboxFieldContext } from "./checkbox.js";
+import { DragAndDropContext, DropIndicatorContext, createDndPersistedKeys, createRenderDropIndicator } from "./drag-and-drop.js";
+import { CollectionDropIndicator, createCollectionDragAndDrop, createCollectionItemDragAndDrop } from "./collection-dnd.js";
+import { GridListHeader, GridListHeaderContext, GridListHeaderInnerContext, RootDropIndicator } from "./grid-list.js";
+import { TreeDropTargetDelegate } from "./tree-drop-target-delegate.js";
+import { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createMemo, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { applyRef, escape, memo, mergeProps as mergeProps$1, scope, ssr, ssrElement, ssrElementAttribute, ssrHydrationKey, ssrStyleProperties, ssrStyleProperty } from "@solidjs/web";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { BaseCollection, CollectionNode, 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 { createCachedChildren } from "@solid2-aria/core/collections/create-cached-children";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { getTruthyValue, isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { createVisuallyHidden } from "@solid2-aria/core/visually-hidden/visually-hidden";
+import { ListKeyboardDelegate } from "@solid2-aria/core/selection/list-keyboard-delegate";
+import { isPresent } from "@solid2-aria/core/utils/is-present";
+import { createCollator } from "@solid2-aria/core/i18n/create-collator";
+import { createLoadMoreSentinel } from "@solid2-aria/core/utils/create-load-more-sentinel";
+import { createGridListSection } from "@solid2-aria/core/gridlist/create-grid-list-section";
+import { createGridListSelectionCheckbox } from "@solid2-aria/core/gridlist/create-grid-list-selection-checkbox";
+import { createTreeState } from "@solid2-aria/stately/tree/create-tree-state";
+import { createControlledSignal } from "@solid2-aria/stately/utils/create-controlled-signal";
+import { getNodeProps } from "@solid2-aria/stately/utils/get-node-props";
+import { createTree } from "@solid2-aria/core/tree/create-tree";
+import { createTreeItem } from "@solid2-aria/core/tree/create-tree-item";
+// src/tree.tsx
+var _tmpl$ = [
+	"<div",
+	" role=\"row\"><div role=\"gridcell\">",
+	"</div></div>"
+];
+var _tmpl$2 = [
+	"<div",
+	" role=\"row\" style=\"",
+	"\"><div role=\"gridcell\">",
+	"<!--$-->",
+	"<!--/--></div></div>"
+];
+var _tmpl$3 = [
+	"<div",
+	" inert style=\"",
+	"\"><div style=\"",
+	"\"></div></div>"
+];
+var _tmpl$4 = [
+	"<div",
+	" role=\"gridcell\">",
+	"</div>"
+];
+var _sk$ = (k) => k === "style";
+var _sk$2 = (k) => k === "role";
+var _sk$3 = (k) => k === "role" || k === "tabindex";
+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 _m$8 = Symbol();
+var _m$9 = Symbol();
+var _m$10 = Symbol();
+var _m$11 = 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$].collection;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$3 = {
+	get() {
+		return this[_m$2].elementRef;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$4 = {
+	get() {
+		const state = this[_m$];
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		return createDndPersistedKeys(state.selectionManager, props.dragAndDropHooks, dnd.dropState);
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		const props = this[_m$3];
+		const dnd = this[_m$4];
+		return createRenderDropIndicator(props.dragAndDropHooks, dnd.dropState);
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p4, _p5, _p6, _p7) {
+	this[_m$] = _p4;
+	this[_m$2] = _p5;
+	this[_m$3] = _p6;
+	this[_m$4] = _p7;
+	Object.defineProperty(this, "collection", _d$2);
+	Object.defineProperty(this, "scrollRef", _d$3);
+	Object.defineProperty(this, "persistedKeys", _d$4);
+	Object.defineProperty(this, "renderDropIndicator", _d$5);
+}
+_P$2.prototype = Object.prototype;
+var _d$6 = {
+	get() {
+		const dnd = this[_m$];
+		const Root = this[_m$2];
+		const state = this[_m$3];
+		const outer = this[_m$4];
+		const props = this[_m$5];
+		return [memo(() => {
+			return memo(() => {
+				return !!dnd.dropState;
+			})() ? RootDropIndicator({}) : dnd.dropState;
+		}), Root(new _P$2(state, outer, props, dnd))];
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p8, _p9, _p0, _p1, _p10, _p11) {
+	this[_m$] = _p8;
+	this[_m$2] = _p9;
+	this[_m$3] = _p0;
+	this[_m$4] = _p1;
+	this[_m$5] = _p10;
+	this.value = _p11;
+	Object.defineProperty(this, "children", _d$6);
+}
+_P$3.prototype = Object.prototype;
+var _d$7 = {
+	get() {
+		const dnd = this[_m$];
+		const Root = this[_m$2];
+		const state = this[_m$3];
+		const outer = this[_m$4];
+		const props = this[_m$5];
+		return DropIndicatorContext(new _P$3(dnd, Root, state, outer, props, { render: (indicatorProps, ref) => CollectionDropIndicator(mergeProps$1(indicatorProps, { ref(r$) {
+			var _ref$ = ref;
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : ref = r$;
+		} })) }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p12, _p13, _p14, _p15, _p16, _p17) {
+	this[_m$] = _p12;
+	this[_m$2] = _p13;
+	this[_m$3] = _p14;
+	this[_m$4] = _p15;
+	this[_m$5] = _p16;
+	this.value = _p17;
+	Object.defineProperty(this, "children", _d$7);
+}
+_P$4.prototype = Object.prototype;
+var _d$8 = {
+	get() {
+		const dnd = this[_m$];
+		const Root = this[_m$2];
+		const state = this[_m$3];
+		const outer = this[_m$4];
+		const props = this[_m$5];
+		return DragAndDropContext(new _P$4(dnd, Root, state, outer, props, dnd));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p18, _p19, _p20, _p21, _p22, _p23) {
+	this[_m$] = _p18;
+	this[_m$2] = _p19;
+	this[_m$3] = _p20;
+	this[_m$4] = _p21;
+	this[_m$5] = _p22;
+	this.value = _p23;
+	Object.defineProperty(this, "children", _d$8);
+}
+_P$5.prototype = Object.prototype;
+var _d$9 = {
+	get() {
+		return this[_m$].slot ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$10 = {
+	get() {
+		return this[_m$2].isEmpty || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$11 = {
+	get() {
+		return this[_m$3].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$12 = {
+	get() {
+		return this[_m$3].isFocusVisible || 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() {
+		const dnd = this[_m$4];
+		const Root = this[_m$5];
+		const state = this[_m$6];
+		const outer = this[_m$7];
+		const props = this[_m$];
+		const values = this[_m$2];
+		return [
+			TreeStateContext(new _P$5(dnd, Root, state, outer, props, state)),
+			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$, _v$2)) : values.isEmpty && props.renderEmptyState;
+			}),
+			memo(() => {
+				return dnd.preview;
+			})
+		];
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p24, _p25, _p26, _p27, _p28, _p29, _p30, _p31) {
+	this[_m$] = _p24;
+	this[_m$2] = _p25;
+	this[_m$3] = _p26;
+	this[_m$4] = _p27;
+	this[_m$5] = _p28;
+	this[_m$6] = _p29;
+	this[_m$7] = _p30;
+	this.ref = _p31;
+	Object.defineProperty(this, "slot", _d$9);
+	Object.defineProperty(this, "data-empty", _d$10);
+	Object.defineProperty(this, "data-focused", _d$11);
+	Object.defineProperty(this, "data-focus-visible", _d$12);
+	Object.defineProperty(this, "data-drop-target", _d$13);
+	Object.defineProperty(this, "children", _d$14);
+}
+_P$6.prototype = Object.prototype;
+var _d$15 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p32, _p33) {
+	this[_m$] = _p32;
+	this.value = _p33;
+	Object.defineProperty(this, "children", _d$15);
+}
+_P$7.prototype = Object.prototype;
+var _d$16 = {
+	get() {
+		return this[_m$].key;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$8(_p34, _p35) {
+	this[_m$] = _p34;
+	this.state = _p35;
+	Object.defineProperty(this, "itemKey", _d$16);
+}
+_P$8.prototype = Object.prototype;
+var _d$17 = {
+	get() {
+		const item = this[_m$];
+		const state = this[_m$2];
+		return TreeItemChildren(new _P$8(item, state));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$9(_p36, _p37, _p38) {
+	this[_m$] = _p36;
+	this[_m$2] = _p37;
+	this.value = _p38;
+	Object.defineProperty(this, "children", _d$17);
+}
+_P$9.prototype = Object.prototype;
+var _d$18 = {
+	get() {
+		const item = this[_m$];
+		const state = this[_m$2];
+		const aria = this[_m$3];
+		return SelectionIndicatorContext(new _P$9(item, state, { get isSelected() {
+			return aria.isSelected;
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$10(_p39, _p40, _p41, _p42) {
+	this[_m$] = _p39;
+	this[_m$2] = _p40;
+	this[_m$3] = _p41;
+	this.value = _p42;
+	Object.defineProperty(this, "children", _d$18);
+}
+_P$10.prototype = Object.prototype;
+var _d$19 = {
+	get() {
+		const aria = this[_m$];
+		const drag = this[_m$2];
+		return { slots: {
+			[DEFAULT_SLOT]: {},
+			chevron: mergeProps(merge(() => aria.expandButtonProps ?? {}), {}),
+			drag: mergeProps(merge(() => drag?.dragButtonProps ?? {}), { style: { "pointer-events": "none" } })
+		} };
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$20 = {
+	get() {
+		const item = this[_m$3];
+		const state = this[_m$4];
+		const aria = this[_m$];
+		const values = this[_m$5];
+		return TreeItemContentContext(new _P$10(item, state, aria, values));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$11(_p43, _p44, _p45, _p46, _p47) {
+	this[_m$] = _p43;
+	this[_m$2] = _p44;
+	this[_m$3] = _p45;
+	this[_m$4] = _p46;
+	this[_m$5] = _p47;
+	Object.defineProperty(this, "value", _d$19);
+	Object.defineProperty(this, "children", _d$20);
+}
+_P$11.prototype = Object.prototype;
+var _d$21 = {
+	get() {
+		const aria = this[_m$];
+		const drag = this[_m$2];
+		const item = this[_m$3];
+		const state = this[_m$4];
+		const values = this[_m$5];
+		return ButtonContext(new _P$11(aria, drag, item, state, values));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$12(_p48, _p49, _p50, _p51, _p52, _p53) {
+	this[_m$] = _p48;
+	this[_m$2] = _p49;
+	this[_m$3] = _p50;
+	this[_m$4] = _p51;
+	this[_m$5] = _p52;
+	this.value = _p53;
+	Object.defineProperty(this, "children", _d$21);
+}
+_P$12.prototype = Object.prototype;
+var _d$22 = {
+	get() {
+		const aria = this[_m$];
+		const drag = this[_m$2];
+		const item = this[_m$3];
+		const state = this[_m$4];
+		const values = this[_m$5];
+		const checkbox = this[_m$6];
+		return CheckboxFieldContext(new _P$12(aria, drag, item, state, values, { slots: {
+			[DEFAULT_SLOT]: {},
+			get selection() {
+				return checkbox.checkboxProps;
+			}
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$13(_p54, _p55, _p56, _p57, _p58, _p59, _p60) {
+	this[_m$] = _p54;
+	this[_m$2] = _p55;
+	this[_m$3] = _p56;
+	this[_m$4] = _p57;
+	this[_m$5] = _p58;
+	this[_m$6] = _p59;
+	this.value = _p60;
+	Object.defineProperty(this, "children", _d$22);
+}
+_P$13.prototype = Object.prototype;
+var _d$23 = {
+	get() {
+		const values = this[_m$];
+		return getTruthyValue(values.hasChildItems && values.isExpanded);
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$24 = {
+	get() {
+		return this[_m$].hasChildItems || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$25 = {
+	get() {
+		return this[_m$].level;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$26 = {
+	get() {
+		return this[_m$2].isSelected || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$27 = {
+	get() {
+		return this[_m$2].isDisabled || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$28 = {
+	get() {
+		return this[_m$3].isHovered || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$29 = {
+	get() {
+		return this[_m$2].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$30 = {
+	get() {
+		return this[_m$4].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$31 = {
+	get() {
+		return this[_m$5].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$32 = {
+	get() {
+		return this[_m$2].isPressed || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$33 = {
+	get() {
+		return !!this[_m$6].dragState || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$34 = {
+	get() {
+		return this[_m$].isDragging ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$35 = {
+	get() {
+		return this[_m$7]?.isDropTarget ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$36 = {
+	get() {
+		const state = this[_m$8];
+		return memo(() => {
+			return state.selectionManager.selectionMode === "none";
+		})() ? void 0 : state.selectionManager.selectionMode;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$37 = {
+	get() {
+		const aria = this[_m$2];
+		const drag = this[_m$9];
+		const item = this[_m$10];
+		const state = this[_m$8];
+		const values = this[_m$];
+		const checkbox = this[_m$11];
+		return ssrElement("div", () => {
+			return aria.gridCellProps;
+		}, () => {
+			return escape(CheckboxContext(new _P$13(aria, drag, item, state, values, checkbox, { slots: {
+				[DEFAULT_SLOT]: {},
+				get selection() {
+					return checkbox.checkboxProps;
+				}
+			} })));
+		}, true, _sk$, () => ssrElementAttribute("style", { display: "contents" }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$14(_p61, _p62, _p63, _p64, _p65, _p66, _p67, _p68, _p69, _p70, _p71, _p72) {
+	this[_m$] = _p61;
+	this[_m$2] = _p62;
+	this[_m$3] = _p63;
+	this[_m$4] = _p64;
+	this[_m$5] = _p65;
+	this[_m$6] = _p66;
+	this[_m$7] = _p67;
+	this[_m$8] = _p68;
+	this[_m$9] = _p69;
+	this[_m$10] = _p70;
+	this[_m$11] = _p71;
+	this.ref = _p72;
+	Object.defineProperty(this, "data-expanded", _d$23);
+	Object.defineProperty(this, "data-has-child-items", _d$24);
+	Object.defineProperty(this, "data-level", _d$25);
+	Object.defineProperty(this, "data-selected", _d$26);
+	Object.defineProperty(this, "data-disabled", _d$27);
+	Object.defineProperty(this, "data-hovered", _d$28);
+	Object.defineProperty(this, "data-focused", _d$29);
+	Object.defineProperty(this, "data-focus-visible", _d$30);
+	Object.defineProperty(this, "data-focus-visible-within", _d$31);
+	Object.defineProperty(this, "data-pressed", _d$32);
+	Object.defineProperty(this, "data-allows-dragging", _d$33);
+	Object.defineProperty(this, "data-dragging", _d$34);
+	Object.defineProperty(this, "data-drop-target", _d$35);
+	Object.defineProperty(this, "data-selection-mode", _d$36);
+	Object.defineProperty(this, "children", _d$37);
+}
+_P$14.prototype = Object.prototype;
+var _d$38 = {
+	get() {
+		return this[_m$].collection;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$15(_p73, _p74) {
+	this[_m$] = _p73;
+	Object.defineProperty(this, "collection", _d$38);
+	this.parent = _p74;
+}
+_P$15.prototype = Object.prototype;
+var _d$39 = {
+	get() {
+		return this[_m$].rowHeaderProps;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$40 = {
+	get() {
+		const Branch = this[_m$2];
+		const state = this[_m$3];
+		const item = this[_m$4];
+		return Branch(new _P$15(state, item));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$16(_p75, _p76, _p77, _p78) {
+	this[_m$] = _p75;
+	this[_m$2] = _p76;
+	this[_m$3] = _p77;
+	this[_m$4] = _p78;
+	Object.defineProperty(this, "value", _d$39);
+	Object.defineProperty(this, "children", _d$40);
+}
+_P$16.prototype = Object.prototype;
+var _d$41 = {
+	get() {
+		const aria = this[_m$];
+		const Branch = this[_m$2];
+		const state = this[_m$3];
+		const item = this[_m$4];
+		return GridListHeaderInnerContext(new _P$16(aria, Branch, state, item));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$17(_p79, _p80, _p81, _p82, _p83) {
+	this[_m$] = _p79;
+	this[_m$2] = _p80;
+	this[_m$3] = _p81;
+	this[_m$4] = _p82;
+	this.value = _p83;
+	Object.defineProperty(this, "children", _d$41);
+}
+_P$17.prototype = Object.prototype;
+var _d$42 = {
+	get() {
+		return this[_m$].render;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$43 = {
+	get() {
+		return this[_m$].class ?? "solid2-aria-TreeSection";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$44 = {
+	get() {
+		const aria = this[_m$2];
+		const Branch = this[_m$3];
+		const state = this[_m$4];
+		const item = this[_m$5];
+		return GridListHeaderContext(new _P$17(aria, Branch, state, item, { role: "row" }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$18(_p84, _p85, _p86, _p87, _p88, _p89) {
+	this[_m$] = _p84;
+	this[_m$2] = _p85;
+	this[_m$3] = _p86;
+	this[_m$4] = _p87;
+	this[_m$5] = _p88;
+	Object.defineProperty(this, "render", _d$42);
+	Object.defineProperty(this, "class", _d$43);
+	this.ref = _p89;
+	Object.defineProperty(this, "children", _d$44);
+}
+_P$18.prototype = Object.prototype;
+var _d$45 = {
+	get() {
+		return this[_m$].class ?? "solid2-aria-TreeHeader";
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$19(_p90, _p91) {
+	this[_m$] = _p90;
+	this.ref = _p91;
+	Object.defineProperty(this, "class", _d$45);
+}
+_P$19.prototype = Object.prototype;
+var TreeCollection = class TreeCollection extends BaseCollection {
+	expandedKeys = /* @__PURE__ */ new Set();
+	withExpandedKeys(lastExpandedKeys, expandedKeys) {
+		const collection = this.clone();
+		collection.expandedKeys = expandedKeys;
+		TreeCollection.cloneAncestorSections(expandedKeys, lastExpandedKeys, collection);
+		TreeCollection.cloneAncestorSections(lastExpandedKeys, expandedKeys, collection);
+		collection.frozen = this.frozen;
+		return collection;
+	}
+	static cloneAncestorSections(keys, excludeSet, collection) {
+		for (const key of keys) if (!excludeSet.has(key)) {
+			let currentKey = key;
+			while (isPresent(currentKey)) {
+				const item = requireValue(collection.getItem(currentKey), "Expected collection.getItem(currentKey)");
+				if (item?.type === "section") {
+					collection.keyMap.set(currentKey, item.clone());
+					break;
+				} else currentKey = item?.parentKey ?? null;
+			}
+		}
+	}
+	*[Symbol.iterator]() {
+		const firstKey = this.getFirstKey();
+		let node = isPresent(firstKey) ? this.getItem(firstKey) : null;
+		while (node) {
+			yield node;
+			if (node.type === "section") node = isPresent(node.nextKey) ? this.getItem(node.nextKey) : null;
+			else {
+				const key = this.getKeyAfter(node.key);
+				node = isPresent(key) ? this.getItem(key) : null;
+			}
+		}
+	}
+	getLastKey() {
+		const key = this.lastKey;
+		if (!isPresent(key)) return null;
+		let node = requireValue(this.getItem(key), "Expected this.getItem(key)");
+		while (isPresent(node?.lastChildKey) && (node.type !== "item" || this.expandedKeys.has(node.key))) node = requireValue(this.getItem(node.lastChildKey), "Expected this.getItem(node.lastChildKey)");
+		return node?.key;
+	}
+	getKeyAfter(key) {
+		let node = requireValue(this.getItem(key), "Expected this.getItem(key)");
+		if (!isTruthy(node)) return null;
+		if ((this.expandedKeys.has(node.key) || node.type !== "item") && isPresent(node.firstChildKey)) return node.firstChildKey;
+		while (isTruthy(node)) {
+			if (isPresent(node.nextKey)) return node.nextKey;
+			if (!isPresent(node.parentKey)) return null;
+			node = requireValue(this.getItem(node.parentKey), "Expected this.getItem(node.parentKey)");
+		}
+		return null;
+	}
+	getKeyBefore(key) {
+		let node = requireValue(this.getItem(key), "Expected this.getItem(key)");
+		if (!isTruthy(node)) return null;
+		if (isPresent(node.prevKey)) {
+			node = requireValue(this.getItem(node.prevKey), "Expected this.getItem(node.prevKey)");
+			while (Boolean(node) && (node.type !== "item" || this.expandedKeys.has(node.key)) && isPresent(node.lastChildKey)) node = requireValue(this.getItem(node.lastChildKey), "Expected this.getItem(node.lastChildKey)");
+			return node?.key ?? null;
+		}
+		return node.parentKey;
+	}
+	*getChildren(key) {
+		const parent = this.getItem(key);
+		let node = isPresent(parent?.firstChildKey) ? this.getItem(parent.firstChildKey) : null;
+		if (parent?.type === "section") {
+			while (node && node.key !== parent.nextKey) {
+				yield node;
+				const nextKey = this.getKeyAfter(node.key);
+				node = isPresent(nextKey) ? this.getItem(nextKey) : null;
+			}
+			return;
+		}
+		while (node) {
+			yield node;
+			node = isPresent(node.nextKey) ? this.getItem(node.nextKey) : null;
+		}
+	}
+	getTextValue(key) {
+		const item = this.getItem(key);
+		return item ? item.textValue : "";
+	}
+};
+const TreeContext = createContext(null);
+const TreeStateContext = createContext(null);
+const TreeItemContentContext = createContext(null);
+function Tree(input) {
+	const [props, ref, setRef] = createContextProps(input, untrack(() => input.ref), TreeContext);
+	return CollectionBuilder(new _P$(props, () => new TreeCollection(), (collection) => TreeInner({
+		props,
+		collection,
+		elementRef: ref,
+		setElementRef: (element) => {
+			setRef(element);
+		}
+	})));
+}
+function TreeInner(outer) {
+	const { props } = untrack(() => outer);
+	const renderer = useContext(CollectionRendererContext);
+	const [expanded, setExpanded] = createControlledSignal(() => props.expandedKeys ? new Set(props.expandedKeys) : void 0, untrack(() => new Set(props.defaultExpandedKeys)), (keys) => {
+		props.onExpandedChange?.(keys);
+	});
+	const collection = createMemo(() => outer.collection.withExpandedKeys(/* @__PURE__ */ new Set(), expanded()));
+	const state = createTreeState(mergeProps(props, {
+		get collection() {
+			return collection();
+		},
+		get expandedKeys() {
+			return expanded();
+		},
+		onExpandedChange: setExpanded
+	}));
+	const locale = createLocale();
+	const collator = createCollator({
+		sensitivity: "base",
+		usage: "search"
+	});
+	const delegate = createMemo(() => new ListKeyboardDelegate({
+		collator,
+		get collection() {
+			return state.collection;
+		},
+		get disabledBehavior() {
+			return state.selectionManager.disabledBehavior;
+		},
+		get disabledKeys() {
+			return state.disabledKeys;
+		},
+		layoutDelegate: renderer.layoutDelegate,
+		ref: outer.elementRef
+	}));
+	const aria = createTree(mergeProps(props, {
+		get isVirtualized() {
+			return renderer.isVirtualized;
+		},
+		get keyboardDelegate() {
+			return delegate();
+		}
+	}), state, untrack(() => outer.elementRef));
+	const treeDelegate = new TreeDropTargetDelegate();
+	const hooks = untrack(() => props.dragAndDropHooks);
+	if (hooks?.createDroppableCollectionState) treeDelegate.setup(hooks.dropTargetDelegate ?? renderer.dropTargetDelegate ?? new hooks.ListDropTargetDelegate({ [Symbol.iterator]() {
+		return state.collection[Symbol.iterator]();
+	} }, untrack(() => outer.elementRef)), state, locale.direction);
+	const dnd = createCollectionDragAndDrop({
+		get collection() {
+			return state.collection;
+		},
+		dropTargetDelegate: treeDelegate,
+		get hooks() {
+			return props.dragAndDropHooks;
+		},
+		get keyboardDelegate() {
+			return delegate();
+		},
+		onDropActivate: (event) => {
+			if (event.target.type === "item") {
+				const { key } = event.target;
+				const item = state.collection.getItem(key);
+				if ((isTruthy(getNodeProps(item).hasChildItems) || [...state.collection.getChildren?.(key) ?? []].some((child) => child.type === "item")) && (!state.expandedKeys.has(key) || props.dragAndDropHooks?.isVirtualDragging?.() === true)) state.toggleKey(key);
+			}
+		},
+		onKeyDown: (event) => {
+			const target = dnd.dropState?.target;
+			if (target?.type !== "item" || target.dropPosition !== "on") return;
+			const isExpanded = state.expandedKeys.has(target.key);
+			if (event.key === (locale.direction === "rtl" ? "ArrowLeft" : "ArrowRight") && !isExpanded || event.key === (locale.direction === "rtl" ? "ArrowRight" : "ArrowLeft") && isExpanded) state.toggleKey(target.key);
+		},
+		get ref() {
+			return outer.elementRef;
+		},
+		get selectionManager() {
+			return state.selectionManager;
+		}
+	});
+	const focus = createFocusRing();
+	const values = {
+		get allowsDragging() {
+			return !!dnd.dragState;
+		},
+		get isDropTarget() {
+			return dnd.dropState?.isDropTarget({ type: "root" }) === true;
+		},
+		get isEmpty() {
+			return ![...state.collection].some((node) => node.type === "item");
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get selectionMode() {
+			return state.selectionManager.selectionMode;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-Tree",
+		values
+	}));
+	const Root = renderer.CollectionRoot;
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(filterDOMProps(props, { global: true }), render, merge(() => aria.gridProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => dnd.collectionProps ?? {}));
+	}, new _P$6(props, values, focus, dnd, Root, state, outer, (element) => {
+		outer.setElementRef(element);
+	})));
+}
+var TreeContentNode = class extends CollectionNode {
+	static type = "content";
+};
+var TreeItemNode = class extends CollectionNode {
+	static type = "item";
+};
+const TreeItemContent = createLeafComponent(TreeContentNode, (props) => {
+	const values = useContext(TreeItemContentContext);
+	if (!values) throw new Error("TreeItemContent must be rendered within TreeItem.");
+	const render = createRenderProps(mergeProps(props, { values }));
+	return CollectionRendererContext(new _P$7(render, DefaultCollectionRenderer));
+});
+const TreeItem = createBranchComponent(TreeItemNode, (props, forwardedRef, item) => {
+	const state = requireValue(useContext(TreeStateContext), "Expected useContext(TreeStateContext)");
+	const dnd = useContext(DragAndDropContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createTreeItem({
+		get allowsArrowNavigation() {
+			return props.allowsArrowNavigation;
+		},
+		get focusMode() {
+			return props.focusMode;
+		},
+		get hasChildItems() {
+			return props.hasChildItems;
+		},
+		node: item,
+		shouldSelectOnPressUp: !!dnd.dragState
+	}, state, ref);
+	const hover = createHover(mergeProps(props, { get isDisabled() {
+		return !aria.allowsSelection && !aria.hasAction && !dnd.dragState;
+	} }));
+	const focus = createFocusRing();
+	const within = createFocusRing({ within: true });
+	const checkbox = createGridListSelectionCheckbox({ key: item.key }, state);
+	const [dropRef, setDropRef] = createSignal(null, { ownedWrite: true });
+	const [activateRef, setActivateRef] = createSignal(null, { ownedWrite: true });
+	const { drag, drop } = createCollectionItemDragAndDrop(dnd, item.key, dropRef, activateRef);
+	const values = {
+		get allowsDragging() {
+			return !!dnd.dragState;
+		},
+		get hasChildItems() {
+			return props.hasChildItems === true || [...state.collection.getChildren?.(item.key) ?? []].some((node) => node.type === "item");
+		},
+		id: item.key,
+		get isDisabled() {
+			return aria.isDisabled;
+		},
+		get isDragging() {
+			return dnd.dragState?.isDragging(item.key) === true;
+		},
+		get isDropTarget() {
+			return drop?.isDropTarget === true;
+		},
+		get isExpanded() {
+			return state.expandedKeys.has(item.key);
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocusVisibleWithin() {
+			return within.isFocusVisible;
+		},
+		get isFocused() {
+			return aria.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isSelected() {
+			return aria.isSelected;
+		},
+		get level() {
+			return Number(aria.rowProps["aria-level"] ?? 1);
+		},
+		get selectionBehavior() {
+			return state.selectionManager.selectionBehavior;
+		},
+		get selectionMode() {
+			return state.selectionManager.selectionMode;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-TreeItem",
+		values
+	}));
+	const hidden = createVisuallyHidden();
+	return [memo(() => {
+		var _v$3, _v$4, _v$5;
+		return memo(() => {
+			return !!(drop && !drop.isHidden);
+		})() ? (_v$3 = ssrHydrationKey(), _v$4 = ssrElement("div", () => {
+			return mergeProps(merge(() => hidden.visuallyHiddenProps ?? {}), merge(() => drop.dropIndicatorProps ?? {}));
+		}, void 0, false, _sk$2, " role=\"button\""), _v$5 = scope((() => {
+			var _c$ = memo(() => {
+				return !!values.hasChildItems;
+			});
+			return () => {
+				return _c$() ? ssrElement("div", () => {
+					return mergeProps(merge(() => hidden.visuallyHiddenProps ?? {}), merge(() => aria.expandButtonProps ?? {}));
+				}, void 0, true, _sk$3, () => " role=\"button\"" + ssrElementAttribute("tabindex", -1)) : escape(values.hasChildItems);
+			};
+		})()), ssr(_tmpl$2, _v$3, ssrStyleProperty("position:", "absolute"), _v$4, _v$5)) : drop && !drop.isHidden;
+	}), dom.div(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.rowProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => within.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), merge(() => drag?.dragProps ?? {}));
+	}, new _P$14(values, aria, hover, focus, within, dnd, drop, state, drag, item, checkbox, (element) => {
+		setRef(element);
+	})))];
+}, (props) => memo(() => {
+	return props.children;
+}));
+const TreeLoadMoreItem = createLeafComponent(LoaderNode, (props, ref, item) => {
+	var _v$6;
+	const state = requireValue(useContext(TreeStateContext), "Expected useContext(TreeStateContext)");
+	const [sentinel, setSentinel] = createSignal(null, { ownedWrite: true });
+	createLoadMoreSentinel(mergeProps(props, { get collection() {
+		return state.collection;
+	} }), sentinel);
+	const render = createRenderProps(mergeProps(props, {
+		get children() {
+			return item.rendered;
+		},
+		defaultClass: "solid2-aria-TreeLoadingIndicator",
+		values: { level: item.level + 1 }
+	}));
+	return [(_v$6 = ssrHydrationKey(), ssr(_tmpl$3, _v$6, ssrStyleProperties("height:", 0, "position:", "relative", "width:", 0), ssrStyleProperties("height:", "1px", "position:", "absolute", "width:", "1px"))), memo(() => {
+		var _v$7, _v$8;
+		return memo(() => {
+			return props.isLoading === true;
+		})() && dom.div(mergeProps$1(render, {
+			role: "row",
+			ref(r$) {
+				var _ref$3 = ref;
+				typeof _ref$3 === "function" || Array.isArray(_ref$3) ? applyRef(_ref$3, r$) : ref = r$;
+			},
+			get children() {
+				return _v$7 = ssrHydrationKey(), _v$8 = scope(() => {
+					return escape(render.children);
+				}), ssr(_tmpl$4, _v$7, _v$8);
+			}
+		}));
+	})];
+});
+const TreeSection = createBranchComponent(SectionNode, (props, forwardedRef, item) => {
+	const state = requireValue(useContext(TreeStateContext), "Expected useContext(TreeStateContext)");
+	const Branch = useContext(CollectionRendererContext).CollectionBranch;
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createGridListSection(props, state, ref);
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "id"), merge(() => aria.rowGroupProps ?? {}));
+	}, new _P$18(props, aria, Branch, state, item, (element) => {
+		setRef(element);
+	})));
+});
+function TreeHeader(props) {
+	return GridListHeader(mergeProps$1(() => {
+		return omit(props, "ref");
+	}, new _P$19(props, (element) => {
+		assignRef(untrack(() => props.ref), element);
+	})));
+}
+function TreeItemChildren(props) {
+	const content = createCachedChildren({
+		children: (node) => node.type === "content" ? node.render?.(node) ?? node.rendered : null,
+		get items() {
+			return props.state.collection.getChildren?.(props.itemKey);
+		}
+	});
+	return memo(content);
+}
+export { Tree, TreeContext, TreeHeader, TreeItem, TreeItemContent, TreeItemContentContext, TreeLoadMoreItem, TreeSection, TreeStateContext };
+
+//# sourceMappingURL=tree.js.map