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

package/out/Combobox/ComboboxContent.luau

@@ -1,17 +1,23 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local composeRefs = _core.composeRefs
+local getElementRef = _core.getElementRef
 local React = _core.React
-local Slot = _core.Slot
 local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
 local DismissableLayer = _layer.DismissableLayer
 local Presence = _layer.Presence
 local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
-local createPopperEntranceRecipe = _motion.createPopperEntranceRecipe
-local usePresenceMotion = _motion.usePresenceMotion
+local createCanvasGroupPopperEntranceRecipe = _motion.createCanvasGroupPopperEntranceRecipe
+local usePresenceMotionController = _motion.usePresenceMotionController
 local usePopper = TS.import(script, TS.getModule(script, "@lattice-ui", "popper").out).usePopper
 local useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
 local CONTENT_OFFSET = 6
+local HIDDEN_POSITION = UDim2.fromOffset(-9999, -9999)
+local function toGuiPropBag(value)
+	local _value = value
+	return if type(_value) == "table" then value else {}
+end
 local function toGuiObject(instance)
 	if not instance or not instance:IsA("GuiObject") then
 		return nil
@@ -21,43 +27,64 @@ end
 local function ComboboxContentImpl(props)
 	local comboboxContext = useComboboxContext()
 	local open = comboboxContext.open
+	local shouldMeasure = open or props.motionPresent or props.onExitComplete ~= nil
 	local popper = usePopper({
 		anchorRef = comboboxContext.anchorRef,
 		contentRef = comboboxContext.contentRef,
 		placement = props.placement,
 		offset = props.offset,
 		padding = props.padding,
-		enabled = open,
+		enabled = shouldMeasure,
 	})
 	local defaultTransition = React.useMemo(function()
-		return createPopperEntranceRecipe(popper.placement, CONTENT_OFFSET)
+		return createCanvasGroupPopperEntranceRecipe(popper.placement, CONTENT_OFFSET)
 	end, { popper.placement })
-	local motionRef = usePresenceMotion(props.motionPresent and popper.isPositioned, props.transition or defaultTransition, props.onExitComplete)
+	local recipe = props.transition or defaultTransition
+	local motion = usePresenceMotionController({
+		present = props.motionPresent,
+		ready = popper.isPositioned,
+		forceMount = props.forceMount,
+		config = recipe,
+		onExitComplete = props.onExitComplete,
+	})
 	local setContentRef = React.useCallback(function(instance)
-		comboboxContext.contentRef.current = toGuiObject(instance)
-		motionRef.current = toGuiObject(instance)
-	end, { comboboxContext.contentRef, motionRef })
+		local guiObject = toGuiObject(instance)
+		comboboxContext.contentRef.current = guiObject
+		motion.ref.current = guiObject
+	end, { comboboxContext.contentRef, motion.ref })
 	local handleDismiss = React.useCallback(function()
 		comboboxContext.setOpen(false)
 	end, { comboboxContext })
-	local isActuallyVisible = open or (props.motionPresent and popper.isPositioned)
+	local shouldRender = motion.mounted
+	local contentVisible = shouldRender and (motion.present or motion.phase ~= "exited")
+	local popperPosition = if popper.isPositioned then popper.position else HIDDEN_POSITION
 	local contentNode = if props.asChild then ((function()
 		local child = props.children
 		if not React.isValidElement(child) then
 			error("[ComboboxContent] `asChild` requires a child element.")
 		end
-		return React.createElement(Slot, {
-			AnchorPoint = popper.anchorPoint,
-			Visible = isActuallyVisible,
+		local childProps = toGuiPropBag(child.props)
+		local childRef = getElementRef(child)
+		local _exp = child
+		local _object = table.clone(childProps)
+		setmetatable(_object, nil)
+		_object.Position = UDim2.fromOffset(0, 0)
+		_object.Visible = contentVisible
+		_object.ref = composeRefs(childRef)
+		return React.createElement("canvasgroup", {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromOffset(0, 0),
+			Visible = contentVisible,
 			ref = setContentRef,
-		}, child)
-	end)()) else (React.createElement("frame", {
-		AnchorPoint = popper.anchorPoint,
+		}, React.cloneElement(_exp, _object))
+	end)()) else (React.createElement("canvasgroup", {
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(0, 0),
-		Visible = isActuallyVisible,
+		Visible = contentVisible,
 		ref = setContentRef,
 	}, props.children))
 	return React.createElement(DismissableLayer, {
@@ -68,10 +95,12 @@ local function ComboboxContentImpl(props)
 		onInteractOutside = props.onInteractOutside,
 		onPointerDownOutside = props.onPointerDownOutside,
 	}, React.createElement("frame", {
+		AnchorPoint = popper.anchorPoint,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		Position = if popper.isPositioned then popper.position else UDim2.fromOffset(-9999, -9999),
+		Position = popperPosition,
 		Size = UDim2.fromOffset(0, 0),
+		Visible = shouldRender,
 	}, contentNode))
 end
 local function ComboboxContent(props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/combobox",
-  "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/layer": "0.5.0-next.1",
-    "@lattice-ui/motion": "0.5.0-next.1",
-    "@lattice-ui/popper": "0.5.0-next.1"
+    "@lattice-ui/core": "0.5.0-next.2",
+    "@lattice-ui/motion": "0.5.0-next.2",
+    "@lattice-ui/popper": "0.5.0-next.2",
+    "@lattice-ui/layer": "0.5.0-next.2"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Combobox/ComboboxContent.tsx

@@ -1,13 +1,20 @@
-import { React, Slot } from "@lattice-ui/core";
+import { composeRefs, getElementRef, React } from "@lattice-ui/core";
 import type { LayerInteractEvent } from "@lattice-ui/layer";
 import { DismissableLayer, Presence } from "@lattice-ui/layer";
-import { createPopperEntranceRecipe, usePresenceMotion } from "@lattice-ui/motion";
+import { createCanvasGroupPopperEntranceRecipe, usePresenceMotionController } from "@lattice-ui/motion";
 import type { PopperPlacement } from "@lattice-ui/popper";
 import { usePopper } from "@lattice-ui/popper";
 import { useComboboxContext } from "./context";
 import type { ComboboxContentProps } from "./types";
 
 const CONTENT_OFFSET = 6;
+const HIDDEN_POSITION = UDim2.fromOffset(-9999, -9999);
+
+type GuiPropBag = React.Attributes & Record<string, unknown>;
+
+function toGuiPropBag(value: unknown): GuiPropBag {
+  return typeIs(value, "table") ? (value as GuiPropBag) : {};
+}
 
 function toGuiObject(instance: Instance | undefined) {
   if (!instance || !instance.IsA("GuiObject")) {
@@ -31,6 +38,7 @@ function ComboboxContentImpl(props: {
 }) {
   const comboboxContext = useComboboxContext();
   const open = comboboxContext.open;
+  const shouldMeasure = open || props.motionPresent || props.onExitComplete !== undefined;
 
   const popper = usePopper({
     anchorRef: comboboxContext.anchorRef,
@@ -38,31 +46,39 @@ function ComboboxContentImpl(props: {
     placement: props.placement,
     offset: props.offset,
     padding: props.padding,
-    enabled: open,
+    enabled: shouldMeasure,
   });
 
   const defaultTransition = React.useMemo(
-    () => createPopperEntranceRecipe(popper.placement, CONTENT_OFFSET),
+    () => createCanvasGroupPopperEntranceRecipe(popper.placement, CONTENT_OFFSET),
     [popper.placement],
   );
-  const motionRef = usePresenceMotion<GuiObject>(
-    props.motionPresent && popper.isPositioned,
-    props.transition ?? defaultTransition,
-    props.onExitComplete,
-  );
+  const recipe = props.transition ?? defaultTransition;
+
+  const motion = usePresenceMotionController<GuiObject>({
+    present: props.motionPresent,
+    ready: popper.isPositioned,
+    forceMount: props.forceMount,
+    config: recipe,
+    onExitComplete: props.onExitComplete,
+  });
 
   const setContentRef = React.useCallback(
     (instance: Instance | undefined) => {
-      comboboxContext.contentRef.current = toGuiObject(instance);
-      motionRef.current = toGuiObject(instance);
+      const guiObject = toGuiObject(instance);
+      comboboxContext.contentRef.current = guiObject;
+      motion.ref.current = guiObject;
     },
-    [comboboxContext.contentRef, motionRef],
+    [comboboxContext.contentRef, motion.ref],
   );
 
   const handleDismiss = React.useCallback(() => {
     comboboxContext.setOpen(false);
   }, [comboboxContext]);
-  const isActuallyVisible = open || (props.motionPresent && popper.isPositioned);
+
+  const shouldRender = motion.mounted;
+  const contentVisible = shouldRender && (motion.present || motion.phase !== "exited");
+  const popperPosition = popper.isPositioned ? popper.position : HIDDEN_POSITION;
 
   const contentNode = props.asChild ? (
     (() => {
@@ -71,24 +87,38 @@ function ComboboxContentImpl(props: {
         error("[ComboboxContent] `asChild` requires a child element.");
       }
 
+      const childProps = toGuiPropBag((child as { props?: unknown }).props);
+      const childRef = getElementRef<Instance>(child);
+
       return (
-        <Slot AnchorPoint={popper.anchorPoint} Visible={isActuallyVisible} ref={setContentRef}>
-          {child}
-        </Slot>
+        <canvasgroup
+          AutomaticSize={Enum.AutomaticSize.XY}
+          BackgroundTransparency={1}
+          BorderSizePixel={0}
+          Size={UDim2.fromOffset(0, 0)}
+          Visible={contentVisible}
+          ref={setContentRef as React.Ref<CanvasGroup>}
+        >
+          {React.cloneElement(child as React.ReactElement<GuiPropBag>, {
+            ...childProps,
+            Position: UDim2.fromOffset(0, 0),
+            Visible: contentVisible,
+            ref: composeRefs(childRef),
+          })}
+        </canvasgroup>
       );
     })()
   ) : (
-    <frame
-      AnchorPoint={popper.anchorPoint}
+    <canvasgroup
       AutomaticSize={Enum.AutomaticSize.XY}
       BackgroundTransparency={1}
       BorderSizePixel={0}
       Size={UDim2.fromOffset(0, 0)}
-      Visible={isActuallyVisible}
+      Visible={contentVisible}
       ref={setContentRef}
     >
       {props.children}
-    </frame>
+    </canvasgroup>
   );
 
   return (
@@ -101,10 +131,12 @@ function ComboboxContentImpl(props: {
       onPointerDownOutside={props.onPointerDownOutside}
     >
       <frame
+        AnchorPoint={popper.anchorPoint}
         BackgroundTransparency={1}
         BorderSizePixel={0}
-        Position={popper.isPositioned ? popper.position : UDim2.fromOffset(-9999, -9999)}
+        Position={popperPosition}
         Size={UDim2.fromOffset(0, 0)}
+        Visible={shouldRender}
       >
         {contentNode}
       </frame>