solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/lib/server/tabs/index.js

@@ -1,16 +1,17 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { C as missing, p as initial, s as disabled, w as none } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "../internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
-import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-CYq38H8J.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-184v7j3-.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { t as mergeStyleValue } from "../mergeStyleValue-DecVaoac.js";
 import { n as useCSPContext } from "../CSPContext-DOxR0PO7.js";
-import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, escape, isServer, memo, mergeProps, ssrElement } from "@solidjs/web";
+import { escape, isServer, memo, mergeProps, ssrElement } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, sharedConfig, untrack, useContext } from "solid-js";
 //#region src/tabs/root/TabsRootContext.ts
 var MISSING_CONTEXT$1 = Symbol("TabsRootContext");
@@ -62,7 +63,7 @@ function TabsRoot(props) {
 	let disposed = false;
 	let warnedMode = false;
 	let warnedDefault = false;
-	const others = omit(allProps, "as", "class", "defaultValue", "onValueChange", "orientation", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "defaultValue", "onValueChange", "orientation", "ref", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value : uncontrolledValue());
 	const orientation = createMemo(() => internalProps.orientation ?? "horizontal");
 	const state = createMemo(() => ({
@@ -263,13 +264,11 @@ function TabsRoot(props) {
 	onCleanup(() => {
 		disposed = true;
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return TabsRootContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -334,9 +333,11 @@ function TabsList(props) {
 	const [highlightedTab, setHighlightedTabToken] = createSignal();
 	const indicatorListeners = /* @__PURE__ */ new Set();
 	let initializedHighlight = false;
+	let highlightedIndex = 0;
+	let highlightedToken;
 	let navigating = false;
 	let navigationResetQueued = false;
-	const others = omit(allProps, "activateOnFocus", "as", "class", "loopFocus", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "activateOnFocus", "render", "class", "loopFocus", "onKeyDown", "ref", "style");
 	const activateOnFocus = createMemo(() => internalProps.activateOnFocus ?? false);
 	const loopFocus = createMemo(() => internalProps.loopFocus ?? true);
 	const state = createMemo(() => root.state());
@@ -353,6 +354,8 @@ function TabsList(props) {
 		});
 	}
 	function setHighlightedTab(registration) {
+		highlightedIndex = untrack(root.getOrderedTabs).indexOf(registration);
+		highlightedToken = registration.token;
 		setHighlightedTabToken(registration.token);
 	}
 	function registerIndicatorUpdateListener(listener) {
@@ -393,7 +396,7 @@ function TabsList(props) {
 		scrollTabIntoView(targetElement, root.orientation());
 		queueMicrotask(() => target.element()?.focus());
 	}
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
 	const context = {
 		activateOnFocus,
 		highlightedTab,
@@ -409,17 +412,27 @@ function TabsList(props) {
 			element: listElement(),
 			tabs: root.getOrderedTabs().map((tab) => ({
 				registration: tab,
+				element: tab.element(),
 				disabled: tab.disabled(),
 				value: tab.value()
 			}))
 		};
 	}, (current) => {
 		const active = current.tabs.find((tab) => tab.value === current.activeValue);
+		const eligible = (tab) => {
+			const element = tab?.element;
+			return element && !isNativelyDisabled(element) && !element.hidden && element.ownerDocument.defaultView?.getComputedStyle(element).display !== "none";
+		};
 		if (!initializedHighlight && current.tabs.length > 0) {
 			initializedHighlight = true;
-			setHighlightedTab(active?.registration ?? current.tabs[0].registration);
+			setHighlightedTab((eligible(active) ? active : current.tabs.find(eligible) ?? current.tabs[0]).registration);
 			return;
 		}
+		const highlighted = current.tabs.findIndex((tab) => tab.registration.token === highlightedToken);
+		if (highlighted === -1 && current.tabs.length > 0) {
+			const successor = current.tabs[highlightedIndex];
+			setHighlightedTab((eligible(successor) ? successor : eligible(active) ? active : current.tabs.find(eligible) ?? current.tabs[0]).registration);
+		} else if (highlighted !== -1) highlightedIndex = highlighted;
 		if (!active || active.disabled || navigating) return;
 		const activeElement = current.element ? getDeepActiveElement(current.element.ownerDocument) : null;
 		if (current.element && activeElement && containsComposed(current.element, activeElement)) return;
@@ -456,13 +469,11 @@ function TabsList(props) {
 		activeValue: root.value(),
 		version: root.tabsVersion()
 	}), () => notifyIndicators());
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return TabsListContext({
 		value: context,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((element) => setListElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -573,7 +584,7 @@ function TabsTab(props) {
 		disabled
 	};
 	const unregister = root.registerTab(registration);
-	const others = omit(allProps, "as", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "disabled", "id", "nativeButton", "onClick", "onFocus", "onKeyDown", "onPointerDown", "ref", "style", "value");
 	const state = createMemo(() => ({
 		disabled: disabled(),
 		active: active(),
@@ -628,10 +639,10 @@ function TabsTab(props) {
 		event.preventDefault();
 		activate(event);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	createEffect(() => ({
 		disabled: disabled(),
 		element: element(),
@@ -642,10 +653,7 @@ function TabsTab(props) {
 		removePointerListeners?.();
 		unregister();
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((current) => setElement(current)), internalProps.ref],
 		get id() {
 			return id();
@@ -694,7 +702,61 @@ var TabsIndicatorCssVars = /* @__PURE__ */ function(TabsIndicatorCssVars) {
 }({});
 //#endregion
 //#region src/tabs/indicator/prehydrationScript.ts
-var tabsIndicatorPrehydrationScript = `!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest('[role="tablist"]');if(!e)return;const i=e.querySelector("[data-active]");if(!i)return;function o(t){const e=getComputedStyle(t);let i=parseFloat(e.width)||0,o=parseFloat(e.height)||0;return(Math.round(i)!==t.offsetWidth||Math.round(o)!==t.offsetHeight)&&(i=t.offsetWidth,o=t.offsetHeight),{width:i,height:o}}function n(){let n=0,r=0,s=0,h=0;const{width:c,height:f}=o(i),{width:l,height:u}=o(e),d=i.getBoundingClientRect(),a=e.getBoundingClientRect(),g=l>0?a.width/l:1,b=u>0?a.height/u:1;if(Math.abs(g)>Number.EPSILON&&Math.abs(b)>Number.EPSILON){const t=d.left-a.left,i=d.top-a.top;n=t/g+e.scrollLeft-e.clientLeft,s=i/b+e.scrollTop-e.clientTop}else n=i.offsetLeft,s=i.offsetTop;const p=c,m=f;function v(e,i){t.style.setProperty(\`--active-tab-\${e}\`,\`\${i}px\`)}return r=e.scrollWidth-n-p,h=e.scrollHeight-s-m,v("left",n),v("right",r),v("top",s),v("bottom",h),v("width",p),v("height",m),p>0&&m>0&&(t.removeAttribute("hidden"),!0)}if(n()||"undefined"==typeof ResizeObserver)return;let r,s;function h(){s.disconnect(),clearTimeout(r)}s=new ResizeObserver(()=>{t.isConnected&&t.hasAttribute("hidden")&&i.hasAttribute("data-active")?n()&&h():h()}),s.observe(i),r=setTimeout(h,1e4)}();`;
+var tabsIndicatorPrehydrationScript = `(() => {
+  const indicator = document.currentScript.previousElementSibling;
+  const list = indicator?.closest('[role="tablist"]');
+  const tab = list?.querySelector('[data-active]');
+  if (!tab) return;
+  const style = getComputedStyle(tab);
+  if (['transform', 'translate', 'rotate', 'scale'].some(key => style[key] && style[key] !== 'none')) return;
+  function cumulative(element) {
+    let left = 0, top = 0;
+    while (element) {
+      left += element.offsetLeft;
+      top += element.offsetTop;
+      element = element.offsetParent;
+      if (element) {
+        left += element.clientLeft;
+        top += element.clientTop;
+      }
+    }
+    return { left, top };
+  }
+  function update() {
+    const css = getComputedStyle(tab);
+    let width = parseFloat(css.width) || 0, height = parseFloat(css.height) || 0;
+    if (Math.round(width) !== tab.offsetWidth || Math.round(height) !== tab.offsetHeight) {
+      width = tab.offsetWidth;
+      height = tab.offsetHeight;
+    }
+    const tabOffset = cumulative(tab), listOffset = cumulative(list);
+    let left = tabOffset.left - listOffset.left - list.clientLeft;
+    let top = tabOffset.top - listOffset.top - list.clientTop;
+    for (let parent = tab.parentElement; parent && parent !== list; parent = parent.parentElement) {
+      left -= parent.scrollLeft;
+      top -= parent.scrollTop;
+    }
+    left = Math.min(left, list.scrollWidth - width);
+    top = Math.min(top, list.scrollHeight - height);
+    const values = { left, top, right: list.scrollWidth - left - width, bottom: list.scrollHeight - top - height, width, height };
+    for (const key in values) indicator.style.setProperty('--active-tab-' + key, values[key] + 'px');
+    if (width > 0 && height > 0) {
+      indicator.removeAttribute('hidden');
+      return true;
+    }
+    return false;
+  }
+  if (update() || typeof ResizeObserver === 'undefined') return;
+  let timer;
+  const observer = new ResizeObserver(() => {
+    if (!indicator.isConnected || !indicator.hasAttribute('hidden') || !tab.hasAttribute('data-active') || update()) {
+      observer.disconnect();
+      clearTimeout(timer);
+    }
+  });
+  observer.observe(tab);
+  timer = setTimeout(() => observer.disconnect(), 10000);
+})();`;
 //#endregion
 //#region src/tabs/indicator/TabsIndicator.tsx
 var stateAttributesMapping$1 = {
@@ -713,7 +775,7 @@ function TabsIndicator(props) {
 	const [measureVersion, setMeasureVersion] = createSignal(0);
 	const [hydrating, setHydrating] = createSignal(Boolean(isServer || sharedConfig.hydrating));
 	const trustedPrehydrationScript = { innerHTML: tabsIndicatorPrehydrationScript };
-	const others = omit(allProps, "as", "class", "ref", "renderBeforeHydration", "style");
+	const others = omit(allProps, "render", "class", "ref", "renderBeforeHydration", "style");
 	const state = createMemo(() => ({
 		...root.state(),
 		activeTabPosition: geometry()?.position ?? null,
@@ -732,7 +794,11 @@ function TabsIndicator(props) {
 			[TabsIndicatorCssVars.activeTabHeight]: `${current.size.height}px`
 		};
 	});
-	const styleValue = createMemo(() => mergeStyles(internalStyle(), resolveStyle(props.style, state())));
+	const styleValue = createMemo(() => {
+		const internal = internalStyle();
+		const external = resolveStyle(props.style, state());
+		return internal ? mergeStyleValue(internal, external) : external;
+	});
 	const hidden = createMemo(() => {
 		const current = geometry();
 		return !current || current.size.width <= 0 || current.size.height <= 0;
@@ -748,14 +814,13 @@ function TabsIndicator(props) {
 		const listRect = listElement.getBoundingClientRect();
 		const scaleX = listSize.width > 0 ? listRect.width / listSize.width : 1;
 		const scaleY = listSize.height > 0 ? listRect.height / listSize.height : 1;
-		let left;
-		let top;
-		if (scaleX > Number.EPSILON && scaleY > Number.EPSILON) {
-			left = (tabRect.left - listRect.left) / scaleX + listElement.scrollLeft - listElement.clientLeft;
-			top = (tabRect.top - listRect.top) / scaleY + listElement.scrollTop - listElement.clientTop;
-		} else {
-			left = activeTab.offsetLeft;
-			top = activeTab.offsetTop;
+		let { left, top } = getLayoutOffset(activeTab, listElement);
+		const rectLeft = (tabRect.left - listRect.left) / scaleX + listElement.scrollLeft - listElement.clientLeft;
+		const rectTop = (tabRect.top - listRect.top) / scaleY + listElement.scrollTop - listElement.clientTop;
+		const translation = getActiveTabTranslation(activeTab);
+		if (Math.abs(rectLeft - translation.x - left) <= 2 && Math.abs(rectTop - translation.y - top) <= 2) {
+			left = rectLeft;
+			top = rectTop;
 		}
 		return {
 			position: {
@@ -781,47 +846,25 @@ function TabsIndicator(props) {
 		setHydrating(false);
 	});
 	onCleanup(unregisterListener);
+	const Render = useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true));
 	return Show({
 		get when() {
 			return root.value() != null;
 		},
 		get children() {
-			return [Show({
-				get when() {
-					return props.as;
+			return [Render(mergeProps({
+				ref: [internalProps.ref],
+				get ["class"]() {
+					return classValue();
 				},
-				get fallback() {
-					return ssrElement("span", () => {
-						return mergeProps({
-							get ["class"]() {
-								return classValue();
-							},
-							get style() {
-								return styleValue();
-							},
-							role: "presentation",
-							get hidden() {
-								return hidden();
-							}
-						}, stateAttributes, others);
-					}, void 0, true);
+				get style() {
+					return styleValue();
 				},
-				children: (component) => Dynamic(mergeProps({
-					get component() {
-						return component();
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					},
-					role: "presentation",
-					get hidden() {
-						return hidden();
-					}
-				}, stateAttributes, others))
-			}), memo(() => {
+				role: "presentation",
+				get hidden() {
+					return hidden();
+				}
+			}, stateAttributes, others)), memo(() => {
 				return escape(memo(() => {
 					return !!((internalProps.renderBeforeHydration ?? false) && hydrating());
 				})() ? ssrElement("script", () => {
@@ -833,6 +876,61 @@ function TabsIndicator(props) {
 		}
 	});
 }
+function getLayoutOffset(element, ancestor) {
+	const elementOffset = getCumulativeOffset(element);
+	const ancestorOffset = getCumulativeOffset(ancestor);
+	let left = elementOffset.left - ancestorOffset.left - ancestor.clientLeft;
+	let top = elementOffset.top - ancestorOffset.top - ancestor.clientTop;
+	let node = element.assignedSlot ?? element.parentNode;
+	while (node && node !== ancestor) {
+		if (node.nodeType === 1) {
+			left -= node.scrollLeft || 0;
+			top -= node.scrollTop || 0;
+		}
+		node = node.assignedSlot ?? node.parentNode ?? node.host;
+	}
+	return {
+		left,
+		top
+	};
+}
+function getCumulativeOffset(element) {
+	let left = 0;
+	let top = 0;
+	let current = element;
+	while (current) {
+		left += current.offsetLeft;
+		top += current.offsetTop;
+		const parent = current.offsetParent;
+		if (parent) {
+			left += parent.clientLeft;
+			top += parent.clientTop;
+		}
+		current = parent;
+	}
+	return {
+		left,
+		top
+	};
+}
+function getActiveTabTranslation(element) {
+	const style = element.ownerDocument.defaultView.getComputedStyle(element);
+	const matrix = style.transform.match(/matrix(?:3d)?\(([^)]+)\)/)?.[1]?.split(",").map(Number);
+	let x = matrix?.[matrix.length === 16 ? 12 : 4] ?? 0;
+	let y = matrix?.[matrix.length === 16 ? 13 : 5] ?? 0;
+	const translate = style.translate?.split(" ") ?? [];
+	for (let index = 0; index < 2; index += 1) {
+		const value = translate[index] ?? "";
+		const numeric = Number.parseFloat(value);
+		const offset = Number.isFinite(numeric) ? numeric * (value.endsWith("%") ? (index === 0 ? element.offsetWidth : element.offsetHeight) / 100 : 1) : 0;
+		if (index === 0) x += offset;
+		else y += offset;
+	}
+	return {
+		x,
+		y
+	};
+}
 function getCssDimensions(element) {
 	const computedStyle = element.ownerDocument.defaultView?.getComputedStyle(element);
 	let width = Number.parseFloat(computedStyle?.width ?? "") || 0;
@@ -884,7 +982,7 @@ function TabsPanel(props) {
 		rendered: shouldRender
 	};
 	const unregister = root.registerPanel(registration);
-	const others = omit(allProps, "as", "class", "id", "keepMounted", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "id", "keepMounted", "ref", "style", "value");
 	const state = createMemo(() => ({
 		...root.state(),
 		hidden: hidden(),
@@ -919,78 +1017,40 @@ function TabsPanel(props) {
 		else root.notifyPanelChange();
 	});
 	onCleanup(() => unregister());
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Show({
-				get when() {
-					return props.as;
+			return Render(mergeProps({
+				ref: [((current) => setElement(current)), internalProps.ref],
+				get id() {
+					return id();
 				},
-				get fallback() {
-					return ssrElement("div", () => {
-						return mergeProps({
-							get id() {
-								return id();
-							},
-							get ["class"]() {
-								return classValue();
-							},
-							get style() {
-								return styleValue();
-							},
-							role: "tabpanel",
-							get tabIndex() {
-								return open() ? 0 : -1;
-							},
-							get ["aria-labelledby"]() {
-								return correspondingTabId();
-							},
-							get hidden() {
-								return hidden();
-							},
-							get inert() {
-								return !open() ? true : void 0;
-							},
-							get ["data-index"]() {
-								return index();
-							}
-						}, stateAttributes, others);
-					}, void 0, true);
+				get ["class"]() {
+					return classValue();
 				},
-				children: (component) => Dynamic(mergeProps({
-					get component() {
-						return component();
-					},
-					ref: [((current) => setElement(current)), internalProps.ref],
-					get id() {
-						return id();
-					},
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					},
-					role: "tabpanel",
-					get tabIndex() {
-						return open() ? 0 : -1;
-					},
-					get ["aria-labelledby"]() {
-						return correspondingTabId();
-					},
-					get hidden() {
-						return hidden();
-					},
-					get inert() {
-						return !open() ? true : void 0;
-					},
-					get ["data-index"]() {
-						return index();
-					}
-				}, stateAttributes, others))
-			});
+				get style() {
+					return styleValue();
+				},
+				role: "tabpanel",
+				get tabIndex() {
+					return open() ? 0 : -1;
+				},
+				get ["aria-labelledby"]() {
+					return correspondingTabId();
+				},
+				get hidden() {
+					return hidden();
+				},
+				get inert() {
+					return !open() ? true : void 0;
+				},
+				get ["data-index"]() {
+					return index();
+				}
+			}, stateAttributes, others));
 		}
 	});
 }