@postxl/ui-components 1.5.5 → 1.6.0

package/dist/index.js

@@ -91,6 +91,7 @@ import { DndContext, DragOverlay, KeyboardCode, KeyboardSensor, MeasuringStrateg
 import { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
@@ -9756,12 +9757,24 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
 const SidebarTabsContext = React$11.createContext(null);
 function SidebarTabsProvider({ children, storageKey }) {
 	const [tabsMap, setTabsMap] = React$11.useState({});
+	const [portalTargets, setPortalTargets] = React$11.useState({});
 	const fallbackKey = React$11.useId();
 	const [storedActiveTabs, setStoredActiveTabs] = useLocalStorageState(storageKey ?? fallbackKey, {
 		defaultValue: {},
 		storageSync: !!storageKey
 	});
 	const [activeTab, setActiveTabState] = React$11.useState(storedActiveTabs);
+	const setPortalTarget = React$11.useCallback((side, tabId, element) => {
+		setPortalTargets((prev) => {
+			const next = new Map(prev[side]);
+			if (element) next.set(tabId, element);
+			else next.delete(tabId);
+			return {
+				...prev,
+				[side]: next
+			};
+		});
+	}, []);
 	const register = React$11.useCallback((side, tab) => {
 		setTabsMap((prev) => {
 			const next = new Map(prev[side]);
@@ -9815,13 +9828,17 @@ function SidebarTabsProvider({ children, storageKey }) {
 		activeTab: resolvedActiveTab,
 		register,
 		unregister,
-		setActiveTab
+		setActiveTab,
+		portalTargets,
+		setPortalTarget
 	}), [
 		sortedTabs,
 		resolvedActiveTab,
 		register,
 		unregister,
-		setActiveTab
+		setActiveTab,
+		portalTargets,
+		setPortalTarget
 	]);
 	return /* @__PURE__ */ jsx(SidebarTabsContext.Provider, {
 		value,
@@ -9850,21 +9867,17 @@ function useSidebarTabs(side) {
 
 //#endregion
 //#region src/sidebar/sidebar-tab.tsx
-function SidebarTab({ side, id, icon, label, render, order, badge }) {
+function SidebarTab({ side, id, icon, label, order, badge, children }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
 	const { register, unregister } = ctx;
-	const renderRef = React$10.useRef(render);
-	renderRef.current = render;
 	const iconRef = React$10.useRef(icon);
 	iconRef.current = icon;
-	const stableRender = React$10.useCallback(() => renderRef.current(), []);
 	React$10.useEffect(() => {
 		register(side, {
 			id,
 			icon: iconRef.current,
 			label,
-			render: stableRender,
 			order,
 			badge
 		});
@@ -9876,17 +9889,17 @@ function SidebarTab({ side, id, icon, label, render, order, badge }) {
 		order,
 		badge,
 		register,
-		unregister,
-		stableRender
+		unregister
 	]);
-	return null;
+	const target = ctx.portalTargets[side]?.get(id);
+	if (!target) return null;
+	return createPortal(children, target);
 }
 function DynamicTabbedSidebar({ side, orientation = "horizontal", collapsible = "offcanvas", className,...sidebarProps }) {
 	const ctx = React$10.useContext(SidebarTabsContext);
 	if (!ctx) throw new Error("DynamicTabbedSidebar must be used within a SidebarTabsProvider.");
 	const tabs = ctx.tabs[side] ?? [];
 	const activeTabId = ctx.activeTab[side] ?? null;
-	const activeTab = tabs.find((t) => t.id === activeTabId);
 	const isVertical = orientation === "vertical";
 	const effectiveCollapsible = isVertical && collapsible === "offcanvas" ? "icon" : collapsible;
 	if (tabs.length === 0) return null;
@@ -9899,23 +9912,49 @@ function DynamicTabbedSidebar({ side, orientation = "horizontal", collapsible =
 			side,
 			tabs,
 			activeTabId,
-			activeTab,
 			isVertical,
 			collapsible: effectiveCollapsible
 		}), /* @__PURE__ */ jsx(SidebarRail, {})] })
 	});
 }
-function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical, collapsible }) {
+function TabPortalTargets({ side, tabs, activeTabId, hidden }) {
+	const ctx = React$10.useContext(SidebarTabsContext);
+	const callbackRefs = React$10.useRef(new Map());
+	const getRef = (tabId) => {
+		let ref = callbackRefs.current.get(tabId);
+		if (!ref) {
+			ref = (el) => {
+				ctx.setPortalTarget(side, tabId, el);
+			};
+			callbackRefs.current.set(tabId, ref);
+		}
+		return ref;
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: tabs.map((tab) => {
+		const isVisible = !hidden && tab.id === activeTabId;
+		return /* @__PURE__ */ jsx("div", {
+			ref: getRef(tab.id),
+			hidden: !isVisible || void 0,
+			className: isVisible ? "flex flex-col flex-1 min-h-0" : void 0
+		}, tab.id);
+	}) });
+}
+function TabbedSidebarContent({ side, tabs, activeTabId, isVertical, collapsible }) {
 	const { state } = useSidebar(side);
 	const isCollapsed = state === "collapsed";
 	const isIconCollapsible = collapsible === "icon";
-	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsx("div", {
+	if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
-		children: /* @__PURE__ */ jsx(VerticalTabBar, {
+		children: [/* @__PURE__ */ jsx(VerticalTabBar, {
 			side,
 			tabs,
 			activeTabId
-		})
+		}), /* @__PURE__ */ jsx(TabPortalTargets, {
+			side,
+			tabs,
+			activeTabId,
+			hidden: true
+		})]
 	});
 	if (isVertical) return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-row",
@@ -9923,7 +9962,11 @@ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical,
 			side,
 			tabs,
 			activeTabId
-		}), /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })]
+		}), /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(TabPortalTargets, {
+			side,
+			tabs,
+			activeTabId
+		}) })]
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
@@ -9934,7 +9977,11 @@ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical,
 				activeTabId
 			}),
 			tabs.length > 0 && /* @__PURE__ */ jsx(SidebarSeparator, {}),
-			/* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
+			/* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(TabPortalTargets, {
+				side,
+				tabs,
+				activeTabId
+			}) })
 		]
 	});
 }