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

package/out/Accordion/AccordionContent.luau

@@ -6,30 +6,40 @@ 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 useAccordionItemContext = TS.import(script, script.Parent, "context").useAccordionItemContext
 local function AccordionContentImpl(props)
 	local defaultTransition = React.useMemo(function()
 		return createSurfaceRevealRecipe()
 	end, {})
 	local config = props.transition or defaultTransition
-	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
 			error("[AccordionContent] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
-			Visible = props.visible,
-			ref = motionRef,
+			Visible = visible,
+			ref = motion.ref,
 		}, child)
 	end
 	return React.createElement("frame", {
 		BackgroundColor3 = Color3.fromRGB(35, 41, 54),
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(260, 44),
-		Visible = props.visible,
-		ref = motionRef,
+		Visible = visible,
+		ref = motion.ref,
 	}, props.children)
 end
 local function AccordionContent(props)
@@ -38,9 +48,9 @@ local function AccordionContent(props)
 	if forceMount then
 		return React.createElement(AccordionContentImpl, {
 			asChild = props.asChild,
-			motionPresent = itemContext.open,
+			forceMount = true,
+			present = itemContext.open,
 			transition = props.transition,
-			visible = itemContext.open,
 		}, props.children)
 	end
 	return React.createElement(Presence, {
@@ -48,10 +58,9 @@ local function AccordionContent(props)
 		render = function(state)
 			return React.createElement(AccordionContentImpl, {
 				asChild = props.asChild,
-				motionPresent = state.isPresent,
 				onExitComplete = state.onExitComplete,
+				present = state.isPresent,
 				transition = props.transition,
-				visible = true,
 			}, props.children)
 		end,
 	})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/accordion",
-  "version": "0.5.0-next.1",
+  "version": "0.5.0-next.2",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -16,9 +16,9 @@
     "url": "https://github.com/astra-void/lattice-ui.git"
   },
   "dependencies": {
-    "@lattice-ui/core": "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/motion": "0.5.0-next.2",
+    "@lattice-ui/layer": "0.5.0-next.2"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Accordion/AccordionContent.tsx

@@ -1,12 +1,12 @@
 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 { useAccordionItemContext } from "./context";
 import type { AccordionContentProps } from "./types";
 
 function AccordionContentImpl(props: {
-  motionPresent: boolean;
-  visible: boolean;
+  present: boolean;
+  forceMount?: boolean;
   transition?: PresenceMotionConfig;
   onExitComplete?: () => void;
   asChild?: boolean;
@@ -15,7 +15,19 @@ function AccordionContentImpl(props: {
   const defaultTransition = React.useMemo(() => createSurfaceRevealRecipe(), []);
   const config = props.transition ?? defaultTransition;
 
-  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;
@@ -24,7 +36,7 @@ function AccordionContentImpl(props: {
     }
 
     return (
-      <Slot Visible={props.visible} ref={motionRef}>
+      <Slot Visible={visible} ref={motion.ref}>
         {child}
       </Slot>
     );
@@ -35,8 +47,8 @@ function AccordionContentImpl(props: {
       BackgroundColor3={Color3.fromRGB(35, 41, 54)}
       BorderSizePixel={0}
       Size={UDim2.fromOffset(260, 44)}
-      Visible={props.visible}
-      ref={motionRef}
+      Visible={visible}
+      ref={motion.ref}
     >
       {props.children}
     </frame>
@@ -51,9 +63,9 @@ export function AccordionContent(props: AccordionContentProps) {
     return (
       <AccordionContentImpl
         asChild={props.asChild}
-        motionPresent={itemContext.open}
+        forceMount={true}
+        present={itemContext.open}
         transition={props.transition}
-        visible={itemContext.open}
       >
         {props.children}
       </AccordionContentImpl>
@@ -66,10 +78,9 @@ export function AccordionContent(props: AccordionContentProps) {
       render={(state) => (
         <AccordionContentImpl
           asChild={props.asChild}
-          motionPresent={state.isPresent}
           onExitComplete={state.onExitComplete}
+          present={state.isPresent}
           transition={props.transition}
-          visible={true}
         >
           {props.children}
         </AccordionContentImpl>