@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/dist/Tabs.js

@@ -0,0 +1,598 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { SharedElementTransition } from "./SharedElementTransition.js";
+import { SelectionIndicator, SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { addEventListener, className, createComponent, delegateEvents, effect, getNextElement, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createFocusRing, createHover, createTab, createTabList, createTabPanel } from "@proyecto-viviana/solidaria";
+import { createTabListState } from "@proyecto-viviana/solid-stately";
+//#region src/Tabs.tsx
+/**
+* Tabs component for solidaria-components
+*
+* A pre-wired headless tabs component that combines state + aria hooks.
+* Port of react-aria-components/src/Tabs.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div class=solidaria-TabList role=tablist>`), _tmpl$3 = /*#__PURE__*/ template(`<div class=solidaria-Tab role=tab>`);
+function assignRef(ref, element) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(element);
+	else if (typeof ref === "object" && "current" in ref) ref.current = element;
+}
+const TabsContext = createContext(null);
+const TabsStateContext = createContext(null);
+function collectionItemKey(item) {
+	const tab = item;
+	const key = tab.id ?? tab.key;
+	if (key == null) throw new Error("Tabs collection items require an id or key.");
+	return key;
+}
+function staticTabText(tab) {
+	return tab.textValue ?? String(tab.id);
+}
+/**
+* Tabs provide a way to organize content into multiple sections, with only one section visible at a time.
+*/
+function Tabs(props) {
+	const [local, stateProps, rest] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"ref"
+	], [
+		"items",
+		"getKey",
+		"getTextValue",
+		"getDisabled",
+		"disabledKeys",
+		"selectedKey",
+		"defaultSelectedKey",
+		"onSelectionChange",
+		"isDisabled",
+		"keyboardActivation",
+		"orientation"
+	]);
+	const [tabListItems, setTabListItems] = createSignal(void 0);
+	const [registeredTabs, setRegisteredTabs] = createSignal([]);
+	const effectiveItems = createMemo(() => {
+		if (stateProps.items) return stateProps.items;
+		if (tabListItems()) return tabListItems() ?? [];
+		return registeredTabs();
+	});
+	const state = createTabListState({
+		get items() {
+			return effectiveItems();
+		},
+		get getKey() {
+			return stateProps.getKey ?? collectionItemKey;
+		},
+		get getTextValue() {
+			return stateProps.getTextValue ?? ((item) => {
+				const tab = item;
+				return tab.textValue ?? tab.label ?? staticTabText(tab);
+			});
+		},
+		get getDisabled() {
+			return stateProps.getDisabled ?? ((item) => {
+				return item.isDisabled ?? false;
+			});
+		},
+		get disabledKeys() {
+			return stateProps.disabledKeys;
+		},
+		get selectedKey() {
+			return stateProps.selectedKey;
+		},
+		get defaultSelectedKey() {
+			return stateProps.defaultSelectedKey;
+		},
+		get onSelectionChange() {
+			return stateProps.onSelectionChange;
+		},
+		get isDisabled() {
+			return stateProps.isDisabled;
+		},
+		get keyboardActivation() {
+			return stateProps.keyboardActivation;
+		},
+		get orientation() {
+			return stateProps.orientation;
+		}
+	});
+	const renderValues = createMemo(() => ({
+		orientation: state.orientation(),
+		isDisabled: state.isDisabled()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		get children() {
+			return props.children;
+		},
+		defaultClassName: "solidaria-Tabs"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const contextValue = {
+		state,
+		items: effectiveItems,
+		setTabListItems(items) {
+			setTabListItems(() => items);
+		},
+		registerTab(tab) {
+			setRegisteredTabs((current) => {
+				const next = current.filter((item) => item.id !== tab.id);
+				next.push(tab);
+				return next;
+			});
+		},
+		unregisterTab(id) {
+			setRegisteredTabs((current) => current.filter((item) => item.id !== id));
+		}
+	};
+	return createComponent(TabsContext.Provider, {
+		value: contextValue,
+		get children() {
+			return createComponent(TabsStateContext.Provider, {
+				value: state,
+				get children() {
+					var _el$ = getNextElement(_tmpl$);
+					use((element) => assignRef(local.ref, element), _el$);
+					spread(_el$, mergeProps(domProps, {
+						get ["class"]() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						},
+						get ["data-orientation"]() {
+							return state.orientation();
+						},
+						get ["data-disabled"]() {
+							return state.isDisabled() || void 0;
+						}
+					}), false, true);
+					insert(_el$, () => props.children);
+					runHydrationEvents();
+					return _el$;
+				}
+			});
+		}
+	});
+}
+/**
+* A TabList contains Tab elements that represent the available tabs.
+*/
+function TabList(props) {
+	const [local, collectionProps, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot"
+	], ["items"]);
+	return createComponent(Show, {
+		when: useContext(TabsContext),
+		get fallback() {
+			return getNextElement(_tmpl$2);
+		},
+		children: (ctx) => createComponent(TabListInner, {
+			get context() {
+				return ctx();
+			},
+			local,
+			get items() {
+				return collectionProps.items;
+			},
+			ariaProps,
+			get children() {
+				return props.children;
+			}
+		})
+	});
+}
+/** Inner TabList component that has access to context */
+function TabListInner(props) {
+	const state = props.context.state;
+	const items = props.context.items;
+	const renderItem = createMemo(() => {
+		if (typeof props.children !== "function") return;
+		if (props.children.length === 0 && props.items === void 0) return;
+		return props.children;
+	});
+	const renderedChildren = createMemo(() => {
+		if (renderItem() || typeof props.children !== "function") return props.children;
+		return props.children();
+	});
+	createEffect(() => {
+		props.context.setTabListItems(props.items);
+	});
+	onCleanup(() => {
+		props.context.setTabListItems(void 0);
+	});
+	const { tabListProps } = createTabList(props.ariaProps, state);
+	const renderValues = createMemo(() => ({
+		orientation: state.orientation(),
+		isDisabled: state.isDisabled()
+	}));
+	const renderProps = useRenderProps({
+		class: props.local.class,
+		style: props.local.style,
+		defaultClassName: "solidaria-TabList"
+	}, renderValues);
+	const handleKeyDown = (e) => {
+		tabListProps.onKeyDown(e);
+	};
+	const handleFocus = (e) => {
+		tabListProps.onFocusIn(e);
+	};
+	const handleBlur = (e) => {
+		tabListProps.onFocusOut(e);
+	};
+	return (() => {
+		var _el$3 = getNextElement(_tmpl$);
+		_el$3.$$focusout = handleBlur;
+		_el$3.$$focusin = handleFocus;
+		_el$3.$$keydown = handleKeyDown;
+		insert(_el$3, (() => {
+			var _c$ = memo(() => !!renderItem());
+			return () => _c$() ? createComponent(SharedElementTransition, { get children() {
+				return createComponent(For, {
+					get each() {
+						return props.items ?? items();
+					},
+					children: (item) => renderItem()?.(item)
+				});
+			} }) : renderedChildren();
+		})());
+		effect((_p$) => {
+			var _v$ = tabListProps.role, _v$2 = tabListProps["aria-orientation"], _v$3 = tabListProps["aria-label"], _v$4 = tabListProps["aria-labelledby"], _v$5 = tabListProps["aria-describedby"], _v$6 = renderProps.class(), _v$7 = renderProps.style(), _v$8 = state.orientation(), _v$9 = state.isDisabled() || void 0;
+			_v$ !== _p$.e && setAttribute(_el$3, "role", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$3, "aria-orientation", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$3, "aria-labelledby", _p$.o = _v$4);
+			_v$5 !== _p$.i && setAttribute(_el$3, "aria-describedby", _p$.i = _v$5);
+			_v$6 !== _p$.n && className(_el$3, _p$.n = _v$6);
+			_p$.s = style(_el$3, _v$7, _p$.s);
+			_v$8 !== _p$.h && setAttribute(_el$3, "data-orientation", _p$.h = _v$8);
+			_v$9 !== _p$.r && setAttribute(_el$3, "data-disabled", _p$.r = _v$9);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0,
+			r: void 0
+		});
+		runHydrationEvents();
+		return _el$3;
+	})();
+}
+/**
+* A Tab represents an individual tab in a TabList.
+*/
+function Tab(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"id"
+	]);
+	const context = useContext(TabsStateContext);
+	const tabsContext = useContext(TabsContext);
+	return createComponent(Show, {
+		when: context,
+		get fallback() {
+			return getNextElement(_tmpl$3);
+		},
+		children: (state) => createComponent(TabInner, {
+			get state() {
+				return state();
+			},
+			tabsContext,
+			local,
+			ariaProps,
+			get children() {
+				return props.children;
+			}
+		})
+	});
+}
+/** Inner Tab component that has access to context */
+function TabInner(props) {
+	let tabRef;
+	const textValue = () => {
+		if (props.ariaProps["aria-label"]) return props.ariaProps["aria-label"];
+		return typeof props.children === "string" ? props.children : void 0;
+	};
+	createEffect(() => {
+		props.tabsContext?.registerTab({
+			id: props.local.id,
+			textValue: textValue(),
+			isDisabled: props.ariaProps.isDisabled
+		});
+	});
+	onCleanup(() => {
+		props.tabsContext?.unregisterTab(props.local.id);
+	});
+	const tabAria = createTab({
+		key: props.local.id,
+		get isDisabled() {
+			return props.ariaProps.isDisabled;
+		},
+		get "aria-label"() {
+			return props.ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return props.ariaProps["aria-labelledby"];
+		}
+	}, props.state, () => tabRef ?? null);
+	const { isHovered, hoverProps } = createHover({ get isDisabled() {
+		return tabAria.isDisabled();
+	} });
+	const renderValues = createMemo(() => ({
+		isSelected: tabAria.isSelected(),
+		isFocused: tabAria.isFocused(),
+		isFocusVisible: tabAria.isFocusVisible(),
+		isPressed: tabAria.isPressed(),
+		isHovered: isHovered(),
+		isDisabled: tabAria.isDisabled()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: props.local.class,
+		style: props.local.style,
+		defaultClassName: "solidaria-Tab"
+	}, renderValues);
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: tabAria.isSelected }));
+	return createComponent(SelectionIndicatorContext.Provider, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			var _el$5 = getNextElement(_tmpl$);
+			var _ref$ = tabRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$5) : tabRef = _el$5;
+			spread(_el$5, mergeProps({
+				get id() {
+					return tabAria.tabProps.id;
+				},
+				get role() {
+					return tabAria.tabProps.role;
+				},
+				get ["aria-selected"]() {
+					return tabAria.isSelected();
+				},
+				get ["aria-disabled"]() {
+					return tabAria.isDisabled() || void 0;
+				},
+				get ["aria-controls"]() {
+					return memo(() => !!tabAria.isSelected())() ? tabAria.tabProps["aria-controls"] : void 0;
+				},
+				get ["aria-label"]() {
+					return tabAria.tabProps["aria-label"];
+				},
+				get ["aria-labelledby"]() {
+					return tabAria.tabProps["aria-labelledby"];
+				},
+				get tabIndex() {
+					return tabAria.tabProps.tabIndex;
+				},
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get onKeyDown() {
+					return tabAria.tabProps.onKeyDown;
+				},
+				get onMouseDown() {
+					return tabAria.tabProps.onMouseDown;
+				},
+				get onPointerDown() {
+					return tabAria.tabProps.onPointerDown;
+				},
+				get onClick() {
+					return tabAria.tabProps.onClick;
+				},
+				get onFocus() {
+					return tabAria.tabProps.onFocus;
+				},
+				get onFocusIn() {
+					return tabAria.tabProps.onFocusIn;
+				},
+				get onBlur() {
+					return tabAria.tabProps.onBlur;
+				}
+			}, hoverProps, {
+				get ["data-selected"]() {
+					return tabAria.isSelected() || void 0;
+				},
+				get ["data-focused"]() {
+					return tabAria.isFocused() || void 0;
+				},
+				get ["data-focus-visible"]() {
+					return tabAria.isFocusVisible() || void 0;
+				},
+				get ["data-pressed"]() {
+					return tabAria.isPressed() || void 0;
+				},
+				get ["data-hovered"]() {
+					return isHovered() || void 0;
+				},
+				get ["data-disabled"]() {
+					return tabAria.isDisabled() || void 0;
+				}
+			}), false, true);
+			insert(_el$5, () => renderProps.renderChildrenStable());
+			runHydrationEvents();
+			return _el$5;
+		}
+	});
+}
+/**
+* Groups multiple TabPanel elements.
+*/
+function TabPanels(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const state = useContext(TabsStateContext);
+	let ref;
+	let previousSelectedKey = void 0;
+	const [panelSize, setPanelSize] = createSignal({});
+	createEffect(() => {
+		const selectedKey = state?.selectedKey() ?? null;
+		if (!ref) {
+			previousSelectedKey = selectedKey;
+			return;
+		}
+		if (previousSelectedKey === void 0) {
+			previousSelectedKey = selectedKey;
+			return;
+		}
+		if (previousSelectedKey === selectedKey) return;
+		previousSelectedKey = selectedKey;
+		const transition = window.getComputedStyle(ref).transition;
+		const shouldMeasureWidth = /width|inline-size|all/.test(transition);
+		const shouldMeasureHeight = /height|block-size|all/.test(transition);
+		if (!shouldMeasureWidth && !shouldMeasureHeight) return;
+		const selectedPanel = ref.querySelector("[role=\"tabpanel\"]:not([hidden])");
+		if (!selectedPanel) return;
+		setPanelSize({
+			width: shouldMeasureWidth ? `${selectedPanel.offsetWidth}px` : void 0,
+			height: shouldMeasureHeight ? `${selectedPanel.offsetHeight}px` : void 0
+		});
+	});
+	const mergedStyle = () => ({
+		...local.style,
+		...panelSize().width ? { "--tab-panel-width": panelSize().width } : {},
+		...panelSize().height ? { "--tab-panel-height": panelSize().height } : {}
+	});
+	return (() => {
+		var _el$6 = getNextElement(_tmpl$);
+		use((el) => {
+			ref = el;
+		}, _el$6);
+		spread(_el$6, mergeProps(domProps, {
+			get ["class"]() {
+				return local.class ?? "solidaria-TabPanels";
+			},
+			get style() {
+				return mergedStyle();
+			}
+		}), false, true);
+		insert(_el$6, () => local.children);
+		runHydrationEvents();
+		return _el$6;
+	})();
+}
+/**
+* A TabPanel displays the content for a selected Tab.
+*/
+function TabPanel(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"shouldForceMount"
+	]);
+	const state = useContext(TabsStateContext);
+	const { tabPanelProps, isSelected } = createTabPanel(ariaProps, state);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const isInert = () => Boolean(local.shouldForceMount && ariaProps.id !== void 0 && !isSelected());
+	const isEntering = () => false;
+	const isExiting = () => false;
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isInert: isInert(),
+		isEntering: isEntering(),
+		isExiting: isExiting(),
+		state
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TabPanel"
+	}, renderValues);
+	const shouldRender = () => {
+		if (local.shouldForceMount) return true;
+		if (ariaProps.id === void 0) return state ? state.selectedKey() !== null : true;
+		return isSelected();
+	};
+	return createComponent(Show, {
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			var _el$7 = getNextElement(_tmpl$);
+			addEventListener(_el$7, "blur", focusProps.onBlur);
+			addEventListener(_el$7, "focus", focusProps.onFocus);
+			insert(_el$7, () => renderProps.renderChildren());
+			effect((_p$) => {
+				var _v$0 = tabPanelProps.id, _v$1 = tabPanelProps.role, _v$10 = tabPanelProps["aria-labelledby"], _v$11 = tabPanelProps["aria-label"], _v$12 = tabPanelProps["aria-describedby"], _v$13 = tabPanelProps.tabIndex, _v$14 = renderProps.class(), _v$15 = renderProps.style(), _v$16 = isSelected() || void 0, _v$17 = isFocused() || void 0, _v$18 = isFocusVisible() || void 0, _v$19 = isInert() ? true : void 0, _v$20 = isInert() || void 0, _v$21 = isEntering() || void 0, _v$22 = isExiting() || void 0, _v$23 = ariaProps.id !== void 0 && !isSelected() && !local.shouldForceMount ? true : void 0;
+				_v$0 !== _p$.e && setAttribute(_el$7, "id", _p$.e = _v$0);
+				_v$1 !== _p$.t && setAttribute(_el$7, "role", _p$.t = _v$1);
+				_v$10 !== _p$.a && setAttribute(_el$7, "aria-labelledby", _p$.a = _v$10);
+				_v$11 !== _p$.o && setAttribute(_el$7, "aria-label", _p$.o = _v$11);
+				_v$12 !== _p$.i && setAttribute(_el$7, "aria-describedby", _p$.i = _v$12);
+				_v$13 !== _p$.n && setAttribute(_el$7, "tabindex", _p$.n = _v$13);
+				_v$14 !== _p$.s && className(_el$7, _p$.s = _v$14);
+				_p$.h = style(_el$7, _v$15, _p$.h);
+				_v$16 !== _p$.r && setAttribute(_el$7, "data-selected", _p$.r = _v$16);
+				_v$17 !== _p$.d && setAttribute(_el$7, "data-focused", _p$.d = _v$17);
+				_v$18 !== _p$.l && setAttribute(_el$7, "data-focus-visible", _p$.l = _v$18);
+				_v$19 !== _p$.u && setProperty(_el$7, "inert", _p$.u = _v$19);
+				_v$20 !== _p$.c && setAttribute(_el$7, "data-inert", _p$.c = _v$20);
+				_v$21 !== _p$.w && setAttribute(_el$7, "data-entering", _p$.w = _v$21);
+				_v$22 !== _p$.m && setAttribute(_el$7, "data-exiting", _p$.m = _v$22);
+				_v$23 !== _p$.f && setProperty(_el$7, "hidden", _p$.f = _v$23);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0,
+				s: void 0,
+				h: void 0,
+				r: void 0,
+				d: void 0,
+				l: void 0,
+				u: void 0,
+				c: void 0,
+				w: void 0,
+				m: void 0,
+				f: void 0
+			});
+			return _el$7;
+		}
+	});
+}
+Tabs.List = TabList;
+Tabs.Tab = Tab;
+Tabs.Panels = TabPanels;
+Tabs.Panel = TabPanel;
+Tabs.SelectionIndicator = SelectionIndicator;
+delegateEvents([
+	"keydown",
+	"focusin",
+	"focusout"
+]);
+//#endregion
+export { SelectionIndicator, SelectionIndicatorContext, Tab, TabList, TabPanel, TabPanels, Tabs, TabsContext, TabsStateContext };
+
+//# sourceMappingURL=Tabs.js.map