@lattice-ui/tabs 0.5.0-next.1 → 0.5.0-next.2

package/out/Tabs/TabsContent.luau

@@ -6,7 +6,7 @@ local Slot = _core.Slot
 local Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
 local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
 local createSurfaceRevealRecipe = _motion.createSurfaceRevealRecipe
-local usePresenceMotion = _motion.usePresenceMotion
+local usePresenceMotionController = _motion.usePresenceMotionController
 local useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
 local createTabsContentName = TS.import(script, script.Parent, "internals", "ids").createTabsContentName
 local function TabsContentImpl(props)
@@ -20,7 +20,17 @@ local function TabsContentImpl(props)
 		end
 		return props.transition
 	end, { defaultTransition, props.transition })
-	local motionRef = usePresenceMotion(props.motionPresent, config, props.onExitComplete)
+	local motion = usePresenceMotionController({
+		present = props.present,
+		forceMount = props.forceMount,
+		config = config,
+		onExitComplete = props.onExitComplete,
+	})
+	local mounted = motion.mounted
+	local visible = mounted and (motion.present or motion.phase ~= "exited")
+	if not mounted then
+		return nil
+	end
 	if props.asChild then
 		local child = props.children
 		if not React.isValidElement(child) then
@@ -28,16 +38,16 @@ local function TabsContentImpl(props)
 		end
 		return React.createElement(Slot, {
 			Name = contentName,
-			Visible = props.visible,
-			ref = motionRef,
+			Visible = visible,
+			ref = motion.ref,
 		}, child)
 	end
 	return React.createElement("frame", {
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(0, 0),
-		Visible = props.visible,
-		ref = motionRef,
+		Visible = visible,
+		ref = motion.ref,
 	}, props.children)
 end
 local function TabsContent(props)
@@ -47,10 +57,10 @@ local function TabsContent(props)
 	if forceMount then
 		return React.createElement(TabsContentImpl, {
 			asChild = props.asChild,
-			motionPresent = selected,
+			forceMount = true,
+			present = selected,
 			transition = props.transition,
 			value = props.value,
-			visible = selected,
 		}, props.children)
 	end
 	return React.createElement(Presence, {
@@ -58,11 +68,10 @@ local function TabsContent(props)
 		render = function(state)
 			return React.createElement(TabsContentImpl, {
 				asChild = props.asChild,
-				motionPresent = state.isPresent,
 				onExitComplete = state.onExitComplete,
+				present = state.isPresent,
 				transition = props.transition,
 				value = props.value,
-				visible = true,
 			}, props.children)
 		end,
 	})

package/out/Tabs/TabsTrigger.luau

@@ -23,9 +23,7 @@ local function TabsTrigger(props)
 	local selected = tabsContext.value == props.value
 	local disabled = props.disabled == true
 	local disabledRef = React.useRef(disabled)
-	React.useEffect(function()
-		disabledRef.current = disabled
-	end, { disabled })
+	disabledRef.current = disabled
 	local triggerIdRef = React.useRef(0)
 	if triggerIdRef.current == 0 then
 		nextTriggerId += 1
@@ -46,7 +44,7 @@ local function TabsTrigger(props)
 				return disabledRef.current
 			end,
 		})
-	end, { props.value, tabsContext })
+	end, { disabled, props.value, tabsContext })
 	useFocusNode({
 		ref = triggerRef,
 		getDisabled = function()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/tabs",
-  "version": "0.5.0-next.1",
+  "version": "0.5.0-next.2",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -16,10 +16,10 @@
     "url": "https://github.com/astra-void/lattice-ui.git"
   },
   "dependencies": {
-    "@lattice-ui/core": "0.5.0-next.1",
-    "@lattice-ui/focus": "0.5.0-next.1",
-    "@lattice-ui/layer": "0.5.0-next.1",
-    "@lattice-ui/motion": "0.5.0-next.1"
+    "@lattice-ui/core": "0.5.0-next.2",
+    "@lattice-ui/layer": "0.5.0-next.2",
+    "@lattice-ui/motion": "0.5.0-next.2",
+    "@lattice-ui/focus": "0.5.0-next.2"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Tabs/TabsContent.tsx

@@ -1,13 +1,13 @@
 import { React, Slot } from "@lattice-ui/core";
 import { Presence } from "@lattice-ui/layer";
-import { createSurfaceRevealRecipe, type PresenceMotionConfig, usePresenceMotion } from "@lattice-ui/motion";
+import { createSurfaceRevealRecipe, type PresenceMotionConfig, usePresenceMotionController } from "@lattice-ui/motion";
 import { useTabsContext } from "./context";
 import { createTabsContentName } from "./internals/ids";
 import type { TabsContentProps } from "./types";
 
 function TabsContentImpl(props: {
-  motionPresent: boolean;
-  visible: boolean;
+  present: boolean;
+  forceMount?: boolean;
   transition?: PresenceMotionConfig;
   onExitComplete?: () => void;
   value: string;
@@ -22,7 +22,19 @@ function TabsContentImpl(props: {
     return props.transition;
   }, [defaultTransition, props.transition]);
 
-  const motionRef = usePresenceMotion<Frame>(props.motionPresent, config, props.onExitComplete);
+  const motion = usePresenceMotionController<Frame>({
+    present: props.present,
+    forceMount: props.forceMount,
+    config,
+    onExitComplete: props.onExitComplete,
+  });
+
+  const mounted = motion.mounted;
+  const visible = mounted && (motion.present || motion.phase !== "exited");
+
+  if (!mounted) {
+    return undefined;
+  }
 
   if (props.asChild) {
     const child = props.children;
@@ -31,7 +43,7 @@ function TabsContentImpl(props: {
     }
 
     return (
-      <Slot Name={contentName} Visible={props.visible} ref={motionRef}>
+      <Slot Name={contentName} Visible={visible} ref={motion.ref}>
         {child}
       </Slot>
     );
@@ -42,8 +54,8 @@ function TabsContentImpl(props: {
       BackgroundTransparency={1}
       BorderSizePixel={0}
       Size={UDim2.fromOffset(0, 0)}
-      Visible={props.visible}
-      ref={motionRef}
+      Visible={visible}
+      ref={motion.ref}
     >
       {props.children}
     </frame>
@@ -59,10 +71,10 @@ export function TabsContent(props: TabsContentProps) {
     return (
       <TabsContentImpl
         asChild={props.asChild}
-        motionPresent={selected}
+        forceMount={true}
+        present={selected}
         transition={props.transition}
         value={props.value}
-        visible={selected}
       >
         {props.children}
       </TabsContentImpl>
@@ -75,11 +87,10 @@ export function TabsContent(props: TabsContentProps) {
       render={(state) => (
         <TabsContentImpl
           asChild={props.asChild}
-          motionPresent={state.isPresent}
           onExitComplete={state.onExitComplete}
+          present={state.isPresent}
           transition={props.transition}
           value={props.value}
-          visible={true}
         >
           {props.children}
         </TabsContentImpl>

package/src/Tabs/TabsTrigger.tsx

@@ -22,10 +22,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
   const selected = tabsContext.value === props.value;
   const disabled = props.disabled === true;
   const disabledRef = React.useRef(disabled);
-
-  React.useEffect(() => {
-    disabledRef.current = disabled;
-  }, [disabled]);
+  disabledRef.current = disabled;
 
   const triggerIdRef = React.useRef(0);
   if (triggerIdRef.current === 0) {
@@ -47,7 +44,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
       order: triggerOrderRef.current,
       getDisabled: () => disabledRef.current,
     });
-  }, [props.value, tabsContext]);
+  }, [disabled, props.value, tabsContext]);
 
   useFocusNode({
     ref: triggerRef,