@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/server/tabs.js

@@ -0,0 +1,668 @@
+/*
+ * 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/Tabs.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 { assignRef, createContextProps, createRenderProps, createSlottedContext, dom } from "./utils.js";
+import { CollectionRendererContext, DefaultCollectionRenderer } from "./collection.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { mergeProps } from "@solid2-aria/core/utils/merge-props";
+import { Show, createContext, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { applyRef, dynamic, mergeProps as mergeProps$1 } from "@solidjs/web";
+import { BaseCollection, ItemNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, 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 { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { createEnterAnimation, createExitAnimation } from "@solid2-aria/core/utils/animation";
+import { createTab } from "@solid2-aria/core/tabs/create-tab";
+import { createTabList } from "@solid2-aria/core/tabs/create-tab-list";
+import { createTabPanel } from "@solid2-aria/core/tabs/create-tab-panel";
+import { createTabListState } from "@solid2-aria/stately/tabs/create-tab-list-state";
+// src/tabs.tsx
+var _m$ = Symbol();
+var _m$2 = Symbol();
+var _m$3 = Symbol();
+var _m$4 = Symbol();
+var _m$5 = Symbol();
+var _m$6 = Symbol();
+var _d$ = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$(_p, _p2) {
+	this[_m$] = _p;
+	this.value = _p2;
+	Object.defineProperty(this, "children", _d$);
+}
+_P$.prototype = Object.prototype;
+var _d$2 = {
+	get() {
+		return this[_m$].isSelected || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$3 = {
+	get() {
+		return this[_m$].isDisabled || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$4 = {
+	get() {
+		return this[_m$2].isHovered || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$5 = {
+	get() {
+		return this[_m$].isPressed || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$6 = {
+	get() {
+		return this[_m$3].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$7 = {
+	get() {
+		return this[_m$3].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$8 = {
+	get() {
+		const render = this[_m$4];
+		const aria = this[_m$];
+		return SelectionIndicatorContext(new _P$(render, { get isSelected() {
+			return aria.isSelected;
+		} }));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$2(_p3, _p4, _p5, _p6, _p7) {
+	this[_m$] = _p3;
+	this[_m$2] = _p4;
+	this[_m$3] = _p5;
+	this[_m$4] = _p6;
+	this.ref = _p7;
+	Object.defineProperty(this, "data-selected", _d$2);
+	Object.defineProperty(this, "data-disabled", _d$3);
+	Object.defineProperty(this, "data-hovered", _d$4);
+	Object.defineProperty(this, "data-pressed", _d$5);
+	Object.defineProperty(this, "data-focused", _d$6);
+	Object.defineProperty(this, "data-focus-visible", _d$7);
+	Object.defineProperty(this, "children", _d$8);
+}
+_P$2.prototype = Object.prototype;
+var _d$9 = {
+	get() {
+		return this[_m$].render;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$10 = {
+	get() {
+		return this[_m$].class ?? "solid2-aria-TabPanels";
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$11 = {
+	get() {
+		return this[_m$].style;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$12 = {
+	get() {
+		const props = this[_m$];
+		return Collection(props);
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$3(_p8) {
+	this[_m$] = _p8;
+	this.ref = (r$) => {
+		const props = this[_m$];
+		var _ref$ = props.ref;
+		typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : props.ref = r$;
+	};
+	Object.defineProperty(this, "render", _d$9);
+	Object.defineProperty(this, "class", _d$10);
+	Object.defineProperty(this, "style", _d$11);
+	Object.defineProperty(this, "children", _d$12);
+}
+_P$3.prototype = Object.prototype;
+var _d$13 = {
+	get() {
+		const state = this[_m$];
+		const props = this[_m$2];
+		const exiting = this[_m$3];
+		return (state.selectedKey === props.id || props.shouldForceMount) ?? exiting();
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$14 = {
+	get() {
+		const props = this[_m$2];
+		const state = this[_m$];
+		const panelRef = this[_m$4];
+		const setPanelRef = this[_m$5];
+		const initiallySelected = this[_m$6];
+		const exiting = this[_m$3];
+		return TabPanelInner({
+			props,
+			state,
+			panelRef,
+			setPanelRef: (element) => {
+				setPanelRef(element);
+			},
+			initiallySelected,
+			exiting
+		});
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$4(_p9, _p0, _p1, _p10, _p11, _p12) {
+	this[_m$] = _p9;
+	this[_m$2] = _p0;
+	this[_m$3] = _p1;
+	this[_m$4] = _p10;
+	this[_m$5] = _p11;
+	this[_m$6] = _p12;
+	Object.defineProperty(this, "when", _d$13);
+	Object.defineProperty(this, "children", _d$14);
+}
+_P$4.prototype = Object.prototype;
+var _d$15 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$5(_p13, _p14) {
+	this[_m$] = _p13;
+	this.value = _p14;
+	Object.defineProperty(this, "children", _d$15);
+}
+_P$5.prototype = Object.prototype;
+var _d$16 = {
+	get() {
+		const render = this[_m$];
+		return CollectionRendererContext(new _P$5(render, DefaultCollectionRenderer));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$6(_p15, _p16) {
+	this[_m$] = _p15;
+	this.value = _p16;
+	Object.defineProperty(this, "children", _d$16);
+}
+_P$6.prototype = Object.prototype;
+var _d$17 = {
+	get() {
+		const render = this[_m$];
+		return TabListStateContext(new _P$6(render, null));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$7(_p17, _p18) {
+	this[_m$] = _p17;
+	this.value = _p18;
+	Object.defineProperty(this, "children", _d$17);
+}
+_P$7.prototype = Object.prototype;
+var _d$18 = {
+	get() {
+		const selected = this[_m$];
+		const input = this[_m$2];
+		return !selected() || input.props.inert;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$19 = {
+	get() {
+		return this[_m$3].isEntering || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$20 = {
+	get() {
+		return this[_m$3].isExiting || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$21 = {
+	get() {
+		const selected = this[_m$];
+		return !selected() || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$22 = {
+	get() {
+		return this[_m$4].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$23 = {
+	get() {
+		return this[_m$4].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$24 = {
+	get() {
+		const render = this[_m$5];
+		return TabsContext(new _P$7(render, null));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$8(_p19, _p20, _p21, _p22, _p23, _p24) {
+	this[_m$] = _p19;
+	this[_m$2] = _p20;
+	this[_m$3] = _p21;
+	this[_m$4] = _p22;
+	this[_m$5] = _p23;
+	this.ref = _p24;
+	Object.defineProperty(this, "inert", _d$18);
+	Object.defineProperty(this, "data-entering", _d$19);
+	Object.defineProperty(this, "data-exiting", _d$20);
+	Object.defineProperty(this, "data-inert", _d$21);
+	Object.defineProperty(this, "data-focused", _d$22);
+	Object.defineProperty(this, "data-focus-visible", _d$23);
+	Object.defineProperty(this, "children", _d$24);
+}
+_P$8.prototype = Object.prototype;
+var _d$25 = {
+	get() {
+		const content = this[_m$];
+		return content();
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$9(_p25, _p26, _p27) {
+	this[_m$] = _p25;
+	this.createCollection = _p26;
+	Object.defineProperty(this, "content", _d$25);
+	this.children = _p27;
+}
+_P$9.prototype = Object.prototype;
+var _d$26 = {
+	get() {
+		const content = this[_m$];
+		const props = this[_m$2];
+		const setRef = this[_m$3];
+		return CollectionBuilder(new _P$9(content, () => new BaseCollection(), (collection) => TabsInner({
+			props,
+			collection,
+			tabsRef: setRef
+		})));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$10(_p28, _p29, _p30, _p31) {
+	this[_m$] = _p28;
+	this[_m$2] = _p29;
+	this[_m$3] = _p30;
+	this.value = _p31;
+	Object.defineProperty(this, "children", _d$26);
+}
+_P$10.prototype = Object.prototype;
+var _d$27 = {
+	get() {
+		return this[_m$].children;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$11(_p32, _p33) {
+	this[_m$] = _p32;
+	this.value = _p33;
+	Object.defineProperty(this, "children", _d$27);
+}
+_P$11.prototype = Object.prototype;
+var _d$28 = {
+	get() {
+		const render = this[_m$];
+		const state = this[_m$2];
+		return TabListStateContext(new _P$11(render, state));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$12(_p34, _p35, _p36) {
+	this[_m$] = _p34;
+	this[_m$2] = _p35;
+	this.value = _p36;
+	Object.defineProperty(this, "children", _d$28);
+}
+_P$12.prototype = Object.prototype;
+var _d$29 = {
+	get() {
+		return this[_m$].props.slot ?? void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$30 = {
+	get() {
+		return this[_m$2].orientation;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$31 = {
+	get() {
+		return this[_m$3].isFocused || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$32 = {
+	get() {
+		return this[_m$3].isFocusVisible || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$33 = {
+	get() {
+		return this[_m$4].isDisabled || void 0;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$34 = {
+	get() {
+		const render = this[_m$5];
+		const state = this[_m$4];
+		const tabProps = this[_m$6];
+		return TabsContext(new _P$12(render, state, tabProps));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$13(_p37, _p38, _p39, _p40, _p41, _p42) {
+	this[_m$] = _p37;
+	this[_m$2] = _p38;
+	this[_m$3] = _p39;
+	this[_m$4] = _p40;
+	this[_m$5] = _p41;
+	this[_m$6] = _p42;
+	this.ref = (r$) => {
+		const input = this[_m$];
+		var _ref$2 = input.tabsRef;
+		typeof _ref$2 === "function" || Array.isArray(_ref$2) ? applyRef(_ref$2, r$) : input.tabsRef = r$;
+	};
+	Object.defineProperty(this, "slot", _d$29);
+	Object.defineProperty(this, "data-orientation", _d$30);
+	Object.defineProperty(this, "data-focused", _d$31);
+	Object.defineProperty(this, "data-focus-visible", _d$32);
+	Object.defineProperty(this, "data-disabled", _d$33);
+	Object.defineProperty(this, "children", _d$34);
+}
+_P$13.prototype = Object.prototype;
+var _d$35 = {
+	get() {
+		return this[_m$].state.collection;
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$14(_p43) {
+	this[_m$] = _p43;
+	Object.defineProperty(this, "collection", _d$35);
+}
+_P$14.prototype = Object.prototype;
+var _d$36 = {
+	get() {
+		return this[_m$].orientation;
+	},
+	enumerable: true,
+	configurable: true
+};
+var _d$37 = {
+	get() {
+		const Root = this[_m$2];
+		const input = this[_m$3];
+		return Root(new _P$14(input));
+	},
+	enumerable: true,
+	configurable: true
+};
+function _P$15(_p44, _p45, _p46, _p47) {
+	this[_m$] = _p44;
+	this[_m$2] = _p45;
+	this[_m$3] = _p46;
+	this.ref = _p47;
+	Object.defineProperty(this, "data-orientation", _d$36);
+	Object.defineProperty(this, "children", _d$37);
+}
+_P$15.prototype = Object.prototype;
+const TabsContext = createContext(null);
+const TabListStateContext = createContext(null);
+const TabCollection = createLeafComponent(ItemNode, (props, forwardedRef, node) => {
+	const state = useContext(TabListStateContext);
+	if (!state) throw new Error("Tab must be rendered in Tabs.");
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createTab(mergeProps(props, { get key() {
+		return node.key;
+	} }), state, ref);
+	const focus = createFocusRing();
+	const hover = createHover(mergeProps(props, { get isDisabled() {
+		return aria.isDisabled;
+	} }));
+	const render = createRenderProps(mergeProps(props, {
+		defaultClass: "solid2-aria-Tab",
+		values: {
+			get isDisabled() {
+				return aria.isDisabled;
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocused() {
+				return focus.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			},
+			get isPressed() {
+				return aria.isPressed;
+			},
+			get isSelected() {
+				return aria.isSelected;
+			}
+		}
+	}));
+	return dynamic(() => isTruthy(props.href) ? dom.a : dom.div)(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(props, { global: true }), "id", "onClick"), merge(() => aria.tabProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, new _P$2(aria, hover, focus, render, [(element) => {
+		setRef(element);
+	}, (element) => {
+		assignRef(forwardedRef, element);
+	}])));
+});
+function TabPanels(props) {
+	if (createIsHidden()) return null;
+	return dom.div(mergeProps$1(() => {
+		return omit(filterDOMProps(props, {
+			global: true,
+			labelable: true
+		}), "id");
+	}, new _P$3(props)));
+}
+function TabPanel(props) {
+	if (createIsHidden()) return null;
+	const state = useContext(TabListStateContext);
+	if (!state) throw new Error("TabPanel must be rendered in Tabs.");
+	const [panelRef, setPanelRef] = createSignal(null, { ownedWrite: true });
+	const initiallySelected = untrack(() => state.selectedKey === props.id);
+	const exiting = createExitAnimation(panelRef, () => state.selectedKey === props.id);
+	return Show(new _P$4(state, props, exiting, panelRef, setPanelRef, initiallySelected));
+}
+function TabPanelInner(input) {
+	const ref = untrack(() => input.panelRef);
+	const aria = createTabPanel(untrack(() => input.props), untrack(() => input.state), ref);
+	const focus = createFocusRing();
+	const selected = () => input.state.selectedKey === input.props.id;
+	const entering = createEnterAnimation(ref);
+	const values = {
+		get isEntering() {
+			return !input.initiallySelected && entering();
+		},
+		get isExiting() {
+			return input.exiting();
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isInert() {
+			return !selected();
+		},
+		get state() {
+			return input.state;
+		}
+	};
+	const render = createRenderProps(mergeProps(merge(() => input.props ?? {}), {
+		defaultClass: "solid2-aria-TabPanel",
+		values
+	}));
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(input.props, { global: true }), "id"), merge(() => aria.tabPanelProps ?? {}), merge(() => focus.focusProps ?? {}), render);
+	}, new _P$8(selected, input, values, focus, render, [(element) => {
+		input.setPanelRef(element);
+	}, (element) => {
+		assignRef(untrack(() => input.props.ref), element);
+	}])));
+}
+function Tab(props) {
+	return TabCollection(mergeProps$1(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function Tabs(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), TabsContext);
+	const values = { get orientation() {
+		return props.orientation ?? "horizontal";
+	} };
+	const content = () => {
+		const child = props.children;
+		return typeof child === "function" ? child({
+			...values,
+			defaultChildren: void 0
+		}) : child;
+	};
+	return TabListStateContext(new _P$10(content, props, setRef, null));
+}
+function TabsInner(input) {
+	const state = createTabListState(mergeProps(merge(() => input.props ?? {}), {
+		children: void 0,
+		get collection() {
+			return input.collection;
+		}
+	}));
+	const focus = createFocusRing({ within: true });
+	const values = { get orientation() {
+		return input.props.orientation ?? "horizontal";
+	} };
+	const render = createRenderProps(mergeProps(merge(() => input.props ?? {}), {
+		defaultClass: "solid2-aria-Tabs",
+		values
+	}));
+	const tabProps = merge(() => input.props);
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(filterDOMProps(input.props, { global: true }), merge(() => focus.focusProps ?? {}), render);
+	}, new _P$13(input, values, focus, state, render, tabProps)));
+}
+function TabList(props) {
+	const state = useContext(TabListStateContext);
+	if (!state) return Collection(props);
+	return TabListInner({
+		props,
+		state
+	});
+}
+function TabListInner(input) {
+	const context = createSlottedContext(TabsContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const Root = useContext(CollectionRendererContext).CollectionRoot;
+	const aria = createTabList(mergeProps(merge(() => input.props ?? {}), {
+		get keyboardActivation() {
+			return context?.keyboardActivation;
+		},
+		get orientation() {
+			return context?.orientation;
+		}
+	}), untrack(() => input.state), ref);
+	const values = {
+		get orientation() {
+			return context?.orientation ?? "horizontal";
+		},
+		get state() {
+			return input.state;
+		}
+	};
+	const render = createRenderProps(mergeProps(merge(() => input.props ?? {}), {
+		children: void 0,
+		defaultClass: "solid2-aria-TabList",
+		values
+	}));
+	return dom.div(mergeProps$1(() => {
+		return mergeProps(omit(filterDOMProps(input.props, { global: true }), "id"), merge(() => aria.tabListProps ?? {}), render);
+	}, new _P$15(values, Root, input, [(element) => {
+		setRef(element);
+	}, (element) => {
+		assignRef(untrack(() => input.props.ref), element);
+	}])));
+}
+export { Tab, TabList, TabListStateContext, TabPanel, TabPanels, Tabs, TabsContext };
+
+//# sourceMappingURL=tabs.js.map