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

package/out/Accordion/AccordionContent.luau

@@ -6,53 +6,106 @@ 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 getImplRestProps(props)
+	local restProps = {}
+	for rawKey, value in pairs(props) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if rawKey == "present" or rawKey == "forceMount" or rawKey == "transition" or rawKey == "onExitComplete" or rawKey == "asChild" or rawKey == "children" then
+			continue
+		end
+		restProps[rawKey] = value
+	end
+	return restProps
+end
+local function getContentRestProps(props)
+	local restProps = {}
+	for rawKey, value in pairs(props) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if rawKey == "asChild" or rawKey == "forceMount" or rawKey == "transition" or rawKey == "children" then
+			continue
+		end
+		restProps[rawKey] = value
+	end
+	return restProps
+end
 local function AccordionContentImpl(props)
+	local present = props.present
+	local forceMount = props.forceMount
+	local transition = props.transition
+	local onExitComplete = props.onExitComplete
+	local asChild = props.asChild
+	local children = props.children
+	local restProps = getImplRestProps(props)
 	local defaultTransition = React.useMemo(function()
 		return createSurfaceRevealRecipe()
 	end, {})
-	local config = props.transition or defaultTransition
-	local motionRef = usePresenceMotion(props.motionPresent, config, props.onExitComplete)
-	if props.asChild then
-		local child = props.children
-		if not React.isValidElement(child) then
-			error("[AccordionContent] `asChild` requires a child element.")
+	local config = transition or defaultTransition
+	local motion = usePresenceMotionController({
+		present = present,
+		forceMount = forceMount,
+		config = config,
+		onExitComplete = onExitComplete,
+	})
+	local mounted = motion.mounted
+	local visible = mounted and (motion.present or motion.phase ~= "exited")
+	if not mounted then
+		return nil
+	end
+	if asChild then
+		local child = children
+		if React.Children.count(children) ~= 1 or not React.isValidElement(child) then
+			error("[AccordionContent] `asChild` requires a single child element.")
 		end
-		return React.createElement(Slot, {
-			Visible = props.visible,
-			ref = motionRef,
-		}, child)
+		local _attributes = table.clone(restProps)
+		setmetatable(_attributes, nil)
+		_attributes.Visible = visible
+		_attributes.ref = motion.ref
+		return React.createElement(Slot, _attributes, child)
 	end
-	return React.createElement("frame", {
+	local _attributes = {
 		BackgroundColor3 = Color3.fromRGB(35, 41, 54),
 		BorderSizePixel = 0,
-		Size = UDim2.fromOffset(260, 44),
-		Visible = props.visible,
-		ref = motionRef,
-	}, props.children)
+	}
+	for _k, _v in restProps do
+		_attributes[_k] = _v
+	end
+	_attributes.Visible = visible
+	_attributes.ref = motion.ref
+	return React.createElement("frame", _attributes, children)
 end
 local function AccordionContent(props)
 	local itemContext = useAccordionItemContext()
-	local forceMount = props.forceMount == true
-	if forceMount then
-		return React.createElement(AccordionContentImpl, {
-			asChild = props.asChild,
-			motionPresent = itemContext.open,
-			transition = props.transition,
-			visible = itemContext.open,
-		}, props.children)
+	local asChild = props.asChild
+	local forceMount = props.forceMount
+	local transition = props.transition
+	local children = props.children
+	local restProps = getContentRestProps(props)
+	local shouldForceMount = forceMount == true
+	if shouldForceMount then
+		local _attributes = table.clone(restProps)
+		setmetatable(_attributes, nil)
+		_attributes.asChild = asChild
+		_attributes.forceMount = true
+		_attributes.present = itemContext.open
+		_attributes.transition = transition
+		return React.createElement(AccordionContentImpl, _attributes, children)
 	end
 	return React.createElement(Presence, {
 		present = itemContext.open,
 		render = function(state)
-			return React.createElement(AccordionContentImpl, {
-				asChild = props.asChild,
-				motionPresent = state.isPresent,
-				onExitComplete = state.onExitComplete,
-				transition = props.transition,
-				visible = true,
-			}, props.children)
+			local _attributes = table.clone(restProps)
+			setmetatable(_attributes, nil)
+			_attributes.asChild = asChild
+			_attributes.onExitComplete = state.onExitComplete
+			_attributes.present = state.isPresent
+			_attributes.transition = transition
+			return React.createElement(AccordionContentImpl, _attributes, children)
 		end,
 	})
 end

package/out/Accordion/types.d.ts

@@ -33,9 +33,11 @@ export type AccordionTriggerProps = {
     asChild?: boolean;
     children?: React.ReactElement;
 };
+type AccordionContentGuiProps = React.Attributes & Record<string, unknown>;
 export type AccordionContentProps = {
     asChild?: boolean;
     forceMount?: boolean;
     transition?: PresenceMotionConfig;
     children?: React.ReactNode;
-};
+} & AccordionContentGuiProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/accordion",
-  "version": "0.5.0-next.1",
+  "version": "0.5.0-next.3",
   "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.3",
+    "@lattice-ui/layer": "0.5.0-next.3",
+    "@lattice-ui/motion": "0.5.0-next.3"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -30,8 +30,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "biome check src",
+    "lint:fix": "biome check src --write --unsafe",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/Accordion/AccordionContent.tsx

@@ -1,30 +1,93 @@
 import { React, Slot } from "@lattice-ui/core";
 import { Presence } from "@lattice-ui/layer";
-import { createSurfaceRevealRecipe, type PresenceMotionConfig, usePresenceMotion } from "@lattice-ui/motion";
+import { createSurfaceRevealRecipe, usePresenceMotionController } from "@lattice-ui/motion";
 import { useAccordionItemContext } from "./context";
 import type { AccordionContentProps } from "./types";
 
-function AccordionContentImpl(props: {
-  motionPresent: boolean;
-  visible: boolean;
-  transition?: PresenceMotionConfig;
+type GuiPropBag = React.Attributes & Record<string, unknown>;
+
+type AccordionContentImplProps = AccordionContentProps & {
+  present: boolean;
   onExitComplete?: () => void;
-  asChild?: boolean;
-  children?: React.ReactNode;
-}) {
+};
+
+function getImplRestProps(props: AccordionContentImplProps): GuiPropBag {
+  const restProps: GuiPropBag = {};
+
+  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
+    if (!typeIs(rawKey, "string")) {
+      continue;
+    }
+
+    if (
+      rawKey === "present" ||
+      rawKey === "forceMount" ||
+      rawKey === "transition" ||
+      rawKey === "onExitComplete" ||
+      rawKey === "asChild" ||
+      rawKey === "children"
+    ) {
+      continue;
+    }
+
+    restProps[rawKey] = value;
+  }
+
+  return restProps;
+}
+
+function getContentRestProps(props: AccordionContentProps): GuiPropBag {
+  const restProps: GuiPropBag = {};
+
+  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
+    if (!typeIs(rawKey, "string")) {
+      continue;
+    }
+
+    if (rawKey === "asChild" || rawKey === "forceMount" || rawKey === "transition" || rawKey === "children") {
+      continue;
+    }
+
+    restProps[rawKey] = value;
+  }
+
+  return restProps;
+}
+
+function AccordionContentImpl(props: AccordionContentImplProps) {
+  const present = props.present;
+  const forceMount = props.forceMount;
+  const transition = props.transition;
+  const onExitComplete = props.onExitComplete;
+  const asChild = props.asChild;
+  const children = props.children;
+  const restProps = getImplRestProps(props);
+
   const defaultTransition = React.useMemo(() => createSurfaceRevealRecipe(), []);
-  const config = props.transition ?? defaultTransition;
+  const config = transition ?? defaultTransition;
+
+  const motion = usePresenceMotionController<Frame>({
+    present,
+    forceMount,
+    config,
+    onExitComplete,
+  });
 
-  const motionRef = usePresenceMotion<Frame>(props.motionPresent, config, props.onExitComplete);
+  const mounted = motion.mounted;
+  const visible = mounted && (motion.present || motion.phase !== "exited");
 
-  if (props.asChild) {
-    const child = props.children;
-    if (!React.isValidElement(child)) {
-      error("[AccordionContent] `asChild` requires a child element.");
+  if (!mounted) {
+    return undefined;
+  }
+
+  if (asChild) {
+    const child = children;
+    if (React.Children.count(children) !== 1 || !React.isValidElement(child)) {
+      error("[AccordionContent] `asChild` requires a single child element.");
     }
 
     return (
-      <Slot Visible={props.visible} ref={motionRef}>
+      <Slot {...restProps} Visible={visible} ref={motion.ref}>
         {child}
       </Slot>
     );
@@ -34,28 +97,35 @@ function AccordionContentImpl(props: {
     <frame
       BackgroundColor3={Color3.fromRGB(35, 41, 54)}
       BorderSizePixel={0}
-      Size={UDim2.fromOffset(260, 44)}
-      Visible={props.visible}
-      ref={motionRef}
+      {...restProps}
+      Visible={visible}
+      ref={motion.ref}
     >
-      {props.children}
+      {children}
     </frame>
   );
 }
 
 export function AccordionContent(props: AccordionContentProps) {
   const itemContext = useAccordionItemContext();
-  const forceMount = props.forceMount === true;
+  const asChild = props.asChild;
+  const forceMount = props.forceMount;
+  const transition = props.transition;
+  const children = props.children;
+  const restProps = getContentRestProps(props);
+
+  const shouldForceMount = forceMount === true;
 
-  if (forceMount) {
+  if (shouldForceMount) {
     return (
       <AccordionContentImpl
-        asChild={props.asChild}
-        motionPresent={itemContext.open}
-        transition={props.transition}
-        visible={itemContext.open}
+        {...restProps}
+        asChild={asChild}
+        forceMount={true}
+        present={itemContext.open}
+        transition={transition}
       >
-        {props.children}
+        {children}
       </AccordionContentImpl>
     );
   }
@@ -65,13 +135,13 @@ export function AccordionContent(props: AccordionContentProps) {
       present={itemContext.open}
       render={(state) => (
         <AccordionContentImpl
-          asChild={props.asChild}
-          motionPresent={state.isPresent}
+          {...restProps}
+          asChild={asChild}
           onExitComplete={state.onExitComplete}
-          transition={props.transition}
-          visible={true}
+          present={state.isPresent}
+          transition={transition}
         >
-          {props.children}
+          {children}
         </AccordionContentImpl>
       )}
     />

package/src/Accordion/types.ts

@@ -40,9 +40,11 @@ export type AccordionTriggerProps = {
   children?: React.ReactElement;
 };
 
+type AccordionContentGuiProps = React.Attributes & Record<string, unknown>;
+
 export type AccordionContentProps = {
   asChild?: boolean;
   forceMount?: boolean;
   transition?: PresenceMotionConfig;
   children?: React.ReactNode;
-};
+} & AccordionContentGuiProps;