@rbxts/react-clean-ui 1.1.0 → 1.2.2

package/out/Components/Interaction/Tooltip.luau

@@ -103,50 +103,61 @@ local function TooltipPopup(props)
 	until true
 	local intent = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.tooltip.intents)
 	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, props.spacing, theme.components.tooltip.spacing))
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Tooltip"
+	end
+	_attributes.key = _condition
+	_attributes.Position = UDim2.fromOffset(position.X, position.Y)
+	_attributes.AnchorPoint = anchor
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.GroupTransparency = groupTransparency
+	_attributes.BackgroundTransparency = 1
 	local _exp_1 = React.createElement(Padding, {
 		resolvedPadding = resolvedPadding,
 	})
-	local _attributes = table.clone(props)
-	setmetatable(_attributes, nil)
-	_attributes.value = theme.components.tooltip.boxShadow
-	local _exp_2 = React.createElement(BoxShadow, _attributes)
+	local _attributes_1 = table.clone(props)
+	setmetatable(_attributes_1, nil)
+	_attributes_1.value = theme.components.tooltip.boxShadow
+	local _exp_2 = React.createElement(BoxShadow, _attributes_1)
 	local _exp_3 = React.createElement(Corners, {
 		radius = theme.components.button.cornerRadius,
 	})
-	local _attributes_1 = table.clone(props)
-	setmetatable(_attributes_1, nil)
-	_attributes_1.resolvedPadding = padding
-	local _exp_4 = React.createElement(Padding, _attributes_1)
-	local _attributes_2 = {}
-	local _condition = props["border-thickness"]
-	if _condition == nil then
-		_condition = theme.components.box.borderThickness
+	local _attributes_2 = table.clone(props)
+	setmetatable(_attributes_2, nil)
+	_attributes_2.resolvedPadding = padding
+	local _exp_4 = React.createElement(Padding, _attributes_2)
+	local _attributes_3 = {
+		key = "Stroke",
+	}
+	local _condition_1 = props["border-thickness"]
+	if _condition_1 == nil then
+		_condition_1 = theme.components.box.borderThickness
 	end
-	_attributes_2.Thickness = _condition
-	_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
-	_attributes_2.Color = props["border-color"] or intent.borderColor
-	local _exp_5 = React.createElement("uistroke", _attributes_2)
+	_attributes_3.Thickness = _condition_1
+	_attributes_3.BorderStrokePosition = Enum.BorderStrokePosition.Inner
+	_attributes_3.Color = props["border-color"] or intent.borderColor
+	local _exp_5 = React.createElement("uistroke", _attributes_3)
 	local _content = props.content
-	return React.createElement("canvasgroup", {
-		Position = UDim2.fromOffset(position.X, position.Y),
-		AnchorPoint = anchor,
-		Size = UDim2.fromOffset(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		GroupTransparency = groupTransparency,
-		BackgroundTransparency = 1,
-	}, React.createElement("frame", {
+	return React.createElement("canvasgroup", _attributes, React.createElement("frame", {
+		key = "ShadowPadding",
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 1,
 	}, _exp_1, React.createElement("frame", {
+		key = "Content",
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundColor3 = intent.backgroundColor,
 		BackgroundTransparency = intent.backgroundTransparency,
 	}, _exp_2, _exp_3, _exp_4, _exp_5, if type(_content) == "string" then React.createElement(Text, {
+		name = "TooltipText",
 		text = props.content,
 		TextColor3 = intent.textColor,
 	}) else props.content)), pointerSize > 0 and React.createElement("frame", {
+		key = "Pointer",
 		Size = UDim2.fromOffset(pointerSize, pointerSize),
 		AnchorPoint = pointerAnchor,
 		Position = pointerPosition,
@@ -156,6 +167,7 @@ local function TooltipPopup(props)
 		BackgroundTransparency = intent.backgroundTransparency,
 		Rotation = 45,
 	}, React.createElement("uigradient", {
+		key = "Gradient",
 		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.4999, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0) }),
 		Rotation = pointerRotation,
 	})))

package/out/Components/Interaction/index.d.ts

@@ -1,2 +1,3 @@
+export * from './Modal';
 export * from './Toast';
 export * from './Tooltip';

package/out/Components/Interaction/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "Modal") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Toast") or {} do
 	exports[_k] = _v
 end

package/out/Components/Layout/Accordion.d.ts

@@ -24,6 +24,7 @@ export interface AccordionProps extends ScalableElementProps {
     defaultValue?: string;
     value?: string;
     onValueChange?: (value: string | undefined) => void;
+    name?: string;
 }
 type AccordionComponent = React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<ImageLabel>> & {
     Item: typeof AccordionItem;

package/out/Components/Layout/Accordion.luau

@@ -79,12 +79,14 @@ local function AccordionHeaderVisual(props)
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props.header, theme.components.accordion.header.spacing, theme.components.accordion.header.padding),
 	})
 	local _exp_1 = props.header.icon ~= nil and React.createElement(Icon, {
+		name = "AccordionHeaderIcon",
 		icon = props.header.icon,
 		color = colors.textColor,
 	})
 	local _result_1
 	if props.header.text ~= nil then
 		_result_1 = React.createElement(Text, {
+			name = "AccordionHeaderText",
 			text = props.header.text,
 			TextColor3 = colors.textColor,
 			typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.accordion.header.typography),
@@ -92,6 +94,7 @@ local function AccordionHeaderVisual(props)
 	else
 		local _children = props.header.children
 		_result_1 = if type(_children) == "string" then React.createElement(Text, {
+			name = "AccordionHeaderText",
 			text = props.header.children,
 			TextColor3 = colors.textColor,
 			typography = TypographyHelper:getTypography(theme, nil, colors.typography or theme.components.accordion.header.typography),
@@ -102,9 +105,13 @@ local function AccordionHeaderVisual(props)
 		Wraps = false,
 		HorizontalFlex = Enum.UIFlexAlignment.Fill,
 	}, _exp_1, React.createElement(Container, {
+		name = "AccordionHeaderTextContainer",
 		Size = UDim2.new(1, theme.components.accordion.header.indicatorSize, 0, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
-	}, _result_1), React.createElement(Container, nil, React.createElement(Icon, {
+	}, _result_1), React.createElement(Container, {
+		name = "AccordionChevronContainer",
+	}, React.createElement(Icon, {
+		name = "AccordionChevronIcon",
 		icon = "chevron-down",
 		color = if props.disabled then colors.textColor else theme.components.accordion.header.indicatorColor,
 		Size = UDim2.fromOffset(theme.components.accordion.header.indicatorSize, theme.components.accordion.header.indicatorSize),
@@ -118,43 +125,6 @@ local function RenderedAccordionItem(props)
 	local height, heightTween = useTween(0, {
 		duration = props.duration,
 	})
-	local contentRef = React.useRef()
-	local onContentSizeRef = React.useRef()
-	onContentSizeRef.current = function(instance)
-		if props.open then
-			heightTween:setGoal(instance.AbsoluteSize.Y, {
-				duration = props.duration,
-			})
-			if props.duration == 0 then
-				heightTween:setPosition(instance.AbsoluteSize.Y)
-			end
-			heightTween:start()
-		end
-	end
-	React.useEffect(function()
-		local frame = contentRef.current
-		if not frame then
-			return nil
-		end
-		-- Some renderers (e.g. the browser-based Loom scene preview) don't back
-		-- this ref with an instance that supports property-changed signals, so
-		-- guard the subscription instead of throwing and losing height tracking.
-		local conn
-		pcall(function()
-			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-				local _result = onContentSizeRef.current
-				if _result ~= nil then
-					_result(frame)
-				end
-			end)
-		end)
-		return function()
-			local _result = conn
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-		end
-	end, { mounted })
 	React.useEffect(function()
 		if props.open then
 			setMounted(true)
@@ -192,6 +162,7 @@ local function RenderedAccordionItem(props)
 	local _condition = not props.first
 	if _condition then
 		local _attributes = {
+			key = "Divider",
 			BackgroundColor3 = theme.components.accordion.borderColor,
 			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
@@ -202,6 +173,7 @@ local function RenderedAccordionItem(props)
 		_condition = (React.createElement("frame", _attributes))
 	end
 	local _attributes = {
+		name = `AccordionHeaderButton-{props.value}`,
 		isSelected = props.open,
 	}
 	local _object = {
@@ -265,10 +237,12 @@ local function RenderedAccordionItem(props)
 	_object_2.TileSize = focusBackgroundImage.TileSize
 	_attributes.focus = _object_2
 	return React.createElement(Container, {
+		name = `AccordionItem-{props.value}`,
 		width = "100%",
 	}, React.createElement(VStack, {
 		spacing = "None",
 	}, _condition, React.createElement(HoverButton, _attributes, props.first and (React.createElement("uicorner", {
+		key = "Corners",
 		TopLeftRadius = SizeHelper:toUDim(theme.components.accordion.cornerRadius),
 		TopRightRadius = SizeHelper:toUDim(theme.components.accordion.cornerRadius),
 		BottomLeftRadius = UDim.new(0, 0),
@@ -279,6 +253,7 @@ local function RenderedAccordionItem(props)
 		duration = props.duration,
 		open = props.open,
 	})), mounted and (React.createElement("frame", {
+		key = "ContentClip",
 		BackgroundTransparency = 1,
 		ClipsDescendants = true,
 		Size = height:map(function(value)
@@ -287,14 +262,28 @@ local function RenderedAccordionItem(props)
 			return _exp + _arg0
 		end),
 	}, React.createElement("frame", {
-		ref = contentRef,
+		key = "Content",
 		BackgroundColor3 = theme.components.accordion.content.backgroundColor,
 		BackgroundTransparency = theme.components.accordion.content.backgroundTransparency,
 		Size = UDim2.fromScale(1, 0),
 		AutomaticSize = Enum.AutomaticSize.Y,
+		Change = {
+			AbsoluteSize = function(instance)
+				if props.open then
+					heightTween:setGoal(instance.AbsoluteSize.Y, {
+						duration = props.duration,
+					})
+					if props.duration == 0 then
+						heightTween:setPosition(instance.AbsoluteSize.Y)
+					end
+					heightTween:start()
+				end
+			end,
+		},
 	}, React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props.contentProps, theme.components.accordion.content.spacing, theme.components.accordion.content.padding),
 	}), if props.contentText ~= nil then React.createElement(Text, {
+		name = "AccordionContentText",
 		text = props.contentText,
 	}) else props.content)))))
 end
@@ -431,10 +420,22 @@ local Accordion = React.forwardRef(function(props, ref)
 			_result(nextValues[1])
 		end
 	end
+	local _attributes = {
+		ref = ref,
+	}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Accordion"
+	end
+	_attributes.name = _condition
+	_attributes.width = "100%"
+	_attributes.height = "100%"
+	_attributes.ClipsDescendants = true
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.accordion.cornerRadius,
 	})
 	local _exp_1 = React.createElement("uistroke", {
+		key = "Stroke",
 		Color = theme.components.accordion.borderColor,
 		Thickness = theme.components.accordion.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Outer,
@@ -442,35 +443,30 @@ local Accordion = React.forwardRef(function(props, ref)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue_2 = table.create(#items)
 	local _callback_2 = function(item, index)
-		local _attributes = {
+		local _attributes_1 = {
 			key = item.value,
 		}
 		for _k, _v in item do
-			_attributes[_k] = _v
+			_attributes_1[_k] = _v
 		end
-		_attributes.first = index == 0
+		_attributes_1.first = index == 0
 		local _value = item.value
-		_attributes.open = table.find(openValues, _value) ~= nil
-		local _condition = props.animationDuration
-		if _condition == nil then
-			_condition = theme.components.accordion.animation.duration
+		_attributes_1.open = table.find(openValues, _value) ~= nil
+		local _condition_1 = props.animationDuration
+		if _condition_1 == nil then
+			_condition_1 = theme.components.accordion.animation.duration
 		end
-		_attributes.duration = _condition
-		_attributes.onActivate = function()
+		_attributes_1.duration = _condition_1
+		_attributes_1.onActivate = function()
 			return activate(item)
 		end
-		return React.createElement(RenderedAccordionItem, _attributes)
+		return React.createElement(RenderedAccordionItem, _attributes_1)
 	end
 	for _k, _v in items do
 		_newValue_2[_k] = _callback_2(_v, _k - 1, items)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(Container, {
-		ref = ref,
-		width = "100%",
-		height = "100%",
-		ClipsDescendants = true,
-	}, _exp, _exp_1, React.createElement(VStack, {
+	return React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(VStack, {
 		Padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.scale, theme.components.accordion.spacing)),
 	}, _newValue_2))
 end)

package/out/Components/Layout/Column.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { ResponsiveGridSpan } from "../../Interfaces/";
 interface ColumnProps {
     span?: ResponsiveGridSpan | number | `${number}`;
+    name?: string;
 }
 export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<Frame>>;
 export {};

package/out/Components/Layout/Column.luau

@@ -28,12 +28,17 @@ local Column = React.forwardRef(function(props, ref)
 	local padding = context.padding
 	local widthScale = fraction + ((fraction - 1) * padding.Scale)
 	local widthOffset = (fraction - 1) * padding.Offset
-	return React.createElement("frame", {
-		ref = ref,
-		Size = UDim2.new(widthScale, widthOffset, 0, 0),
-		AutomaticSize = Enum.AutomaticSize.Y,
-		BackgroundTransparency = 1,
-	}, props.children)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Column"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Size = UDim2.new(widthScale, widthOffset, 0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = 1
+	return React.createElement("frame", _attributes, props.children)
 end)
 return {
 	Column = Column,

package/out/Components/Layout/Container.d.ts

@@ -4,5 +4,6 @@ import { CssBackgroundImage } from "../../Theme";
 export interface ContainerProps extends SizeElementProps, PositionElementProps, ZIndexElementProps, React.InstanceProps<ImageLabel> {
     group?: boolean;
     backgroundImage?: Partial<CssBackgroundImage>;
+    name?: string;
 }
 export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Layout/Container.luau

@@ -13,20 +13,24 @@ local Container = React.forwardRef(function(props, ref)
 	local isAutoSizeActive = autoSize ~= Enum.AutomaticSize.None and autoSize ~= "None"
 	local centerViaLayout = props.center == true and props.Position == nil and props.AnchorPoint == nil and isAutoSizeActive
 	local backgroundImage = CssHelper:resolveBackgroundImage(props.backgroundImage)
-	local _attributes = {
-		ref = ref,
-		Archivable = props.Archivable,
-		Tag = props.Tag,
-		Active = props.Active,
-		AnchorPoint = if centerViaLayout then Vector2.zero else SizeHelper:GetAnchor(props),
-		AutomaticSize = autoSize,
-		BackgroundColor3 = props.BackgroundColor3,
-	}
-	local _condition = props.BackgroundTransparency
+	local _attributes = {}
+	local _condition = props.name
 	if _condition == nil then
-		_condition = 1
+		_condition = "Container"
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Archivable = props.Archivable
+	_attributes.Tag = props.Tag
+	_attributes.Active = props.Active
+	_attributes.AnchorPoint = if centerViaLayout then Vector2.zero else SizeHelper:GetAnchor(props)
+	_attributes.AutomaticSize = autoSize
+	_attributes.BackgroundColor3 = props.BackgroundColor3
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BorderColor3 = props.BorderColor3
 	_attributes.BorderMode = props.BorderMode
 	_attributes.BorderSizePixel = props.BorderSizePixel
@@ -53,11 +57,11 @@ local Container = React.forwardRef(function(props, ref)
 				_result_1 = _result_1.X
 			end
 		end
-		local _condition_1 = _result_1
-		if _condition_1 == nil then
-			_condition_1 = 0
+		local _condition_2 = _result_1
+		if _condition_2 == nil then
+			_condition_2 = 0
 		end
-		_result = _condition_1
+		_result = _condition_2
 	else
 		_result = 0
 	end
@@ -83,11 +87,13 @@ local Container = React.forwardRef(function(props, ref)
 		return content
 	end
 	return React.createElement("frame", {
+		key = if props.name ~= nil then `{props.name}CenterWrapper` else "ContainerCenterWrapper",
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
 		ZIndex = props.ZIndex,
 		LayoutOrder = props.LayoutOrder,
 	}, React.createElement("uilistlayout", {
+		key = "CenterLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = Enum.HorizontalAlignment.Center,
 		VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/Components/Layout/Draggable.luau

@@ -13,6 +13,23 @@ local OverlayConsumer = _Contexts.OverlayConsumer
 local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
 local Corners = TS.import(script, script.Parent.Parent, "Decorator").Corners
 local CustomInputService = TS.import(script, script.Parent.Parent.Parent, "Helpers").CustomInputService
+local function isInteractiveDescendantAtInput(handle, input)
+	local point = Vector2.new(input.Position.X, input.Position.Y)
+	local _exp = GuiHelper:getGuiObjectsAtPosition(handle, point)
+	-- ▼ ReadonlyArray.some ▼
+	local _result = false
+	local _callback = function(guiObject)
+		return guiObject ~= handle and guiObject:IsDescendantOf(handle) and (guiObject:IsA("GuiButton") or guiObject:IsA("TextBox"))
+	end
+	for _k, _v in _exp do
+		if _callback(_v, _k - 1, _exp) then
+			_result = true
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.some ▲
+	return _result
+end
 local function DragHandle(_param)
 	local children = _param.children
 	local draggable = React.useContext(DraggableContext)
@@ -53,7 +70,7 @@ local function DragHandle(_param)
 				_result(instance, input)
 			end
 		end
-		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
+		if (input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch) and not isInteractiveDescendantAtInput(instance, input) then
 			draggable.beginDrag(input, instance)
 		end
 	end
@@ -62,11 +79,16 @@ local function DragHandle(_param)
 end
 local function Placeholder(props)
 	local theme = React.useContext(CleanThemeContext)
-	local _attributes = table.clone(props)
-	setmetatable(_attributes, nil)
+	local _attributes = {
+		key = "DraggablePlaceholder",
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
 	_attributes.BackgroundTransparency = theme.components.draggable.placeholder.backgroundTransparency
 	_attributes.BackgroundColor3 = theme.components.draggable.placeholder.backgroundColor
 	return React.createElement("frame", _attributes, React.createElement("uistroke", {
+		key = "Stroke",
 		Thickness = theme.components.draggable.placeholder.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.draggable.placeholder.borderColor,

package/out/Components/Layout/Fieldset.d.ts

@@ -10,6 +10,7 @@ interface FieldsetProps extends BreakPointElementProps {
     disabled?: boolean;
     checkbox?: boolean;
     wrap?: Breakpoint;
+    name?: string;
 }
 interface FieldsetSlotProps {
     children?: React.ReactNode;

package/out/Components/Layout/Fieldset.luau

@@ -16,6 +16,7 @@ local function FieldsetLabel(props)
 		ShrinkRatio = 0,
 		GrowRatio = 0,
 	}, React.createElement("imagebutton", {
+		key = "FieldsetLabelButton",
 		Size = UDim2.fromOffset(0, 0),
 		BackgroundTransparency = 1,
 		AutomaticSize = Enum.AutomaticSize.XY,
@@ -45,45 +46,6 @@ local Fieldset = React.forwardRef(function(props, ref)
 			labelActivated:Destroy()
 		end
 	end, {})
-	local containerRef = React.useRef()
-	local setContainerRef = function(instance)
-		containerRef.current = instance
-		local _ref = ref
-		if type(_ref) == "function" then
-			ref(instance)
-		else
-			local _condition = ref ~= nil
-			if _condition then
-				local _ref_1 = ref
-				_condition = type(_ref_1) == "table"
-			end
-			if _condition then
-				ref.current = instance
-			end
-		end
-	end
-	React.useEffect(function()
-		local frame = containerRef.current
-		if not frame then
-			return nil
-		end
-		-- Some renderers (e.g. the browser-based Loom scene preview) don't
-		-- back this ref with an instance that supports property-changed
-		-- signals, so guard the subscription instead of throwing and
-		-- losing breakpoint width tracking.
-		local conn
-		pcall(function()
-			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-				return setWidth(frame.AbsoluteSize.X)
-			end)
-		end)
-		return function()
-			local _result = conn
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-		end
-	end, {})
 	local fieldsetContext = React.useMemo(function()
 		local _object = {}
 		local _left = "disabled"
@@ -104,11 +66,21 @@ local Fieldset = React.forwardRef(function(props, ref)
 	local breakpoints = props.breakpoints or theme.breakpoints
 	local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
 	local wrap = BreakpointHelper:compare(breakpoint, "<=", props.wrap or "lg")
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Fieldset"
+	end
+	_attributes.name = _condition
+	_attributes.ref = ref
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			setWidth(instance.AbsoluteSize.X)
+		end,
+	}
 	return React.createElement(FieldsetContext.Provider, {
 		value = fieldsetContext,
-	}, React.createElement(Container, {
-		ref = setContainerRef,
-	}, React.createElement(HStack, {
+	}, React.createElement(Container, _attributes, React.createElement(HStack, {
 		Wraps = wrap,
 		valign = "Center",
 		HorizontalFlex = Enum.UIFlexAlignment.Fill,

package/out/Components/Layout/FlexItem.luau

@@ -6,11 +6,18 @@ local FlexItem = React.forwardRef(function(props, ref)
 	local _attributes = table.clone(props)
 	setmetatable(_attributes, nil)
 	_attributes.ref = ref
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "FlexItem"
+	end
+	_attributes.name = _condition
 	return React.createElement(Container, _attributes, React.createElement("uiflexitem", {
+		key = "FlexItemConstraint",
 		FlexMode = props.mode or "Grow",
 		GrowRatio = props.GrowRatio,
 		ShrinkRatio = props.ShrinkRatio,
 	}), React.createElement("uilistlayout", {
+		key = "FlexItemLayout",
 		HorizontalFlex = props.HorizontalFlex,
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = props.align,

package/out/Components/Layout/Group.d.ts

@@ -11,6 +11,7 @@ interface GroupElementProps {
     enabled?: boolean;
     padding?: ResolvedPadding;
     children?: React.ReactNode;
+    name?: string;
 }
 declare function GroupElement(props: GroupElementProps): boolean | ReadonlyMap<React.Key, React.ReactNode> | {
     readonly [key: string]: React.ReactNode;

package/out/Components/Layout/Group.luau

@@ -34,7 +34,9 @@ local function GroupElement(props)
 		_result_1 = _result_1.removeElement
 	end
 	React.useEffect(_exp, { enabled, _result_1 })
-	local elementRef = React.useRef()
+	if not enabled then
+		return props.children
+	end
 	local _result_2 = props.padding
 	if _result_2 ~= nil then
 		_result_2 = _result_2.left
@@ -69,39 +71,20 @@ local function GroupElement(props)
 		_condition_4 = 0
 	end
 	local verticalPadding = _condition_3 + _condition_4
-	React.useEffect(function()
-		if not enabled then
-			return nil
-		end
-		local frame = elementRef.current
-		if not frame or not context then
-			return nil
-		end
-		-- Some renderers (e.g. the browser-based Loom scene preview) don't
-		-- back this ref with an instance that supports property-changed
-		-- signals, so guard the subscription instead of throwing and
-		-- losing size reporting.
-		local conn
-		pcall(function()
-			conn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-				context.reportSize(id, Vector2.new(frame.AbsoluteSize.X + horizontalPadding, frame.AbsoluteSize.Y + verticalPadding))
-			end)
-		end)
-		return function()
-			local _result_6 = conn
-			if _result_6 ~= nil then
-				_result_6:Disconnect()
-			end
-		end
-	end, { enabled, context, id, horizontalPadding, verticalPadding })
-	if not enabled then
-		return props.children
+	local _attributes = {}
+	local _condition_5 = props.name
+	if _condition_5 == nil then
+		_condition_5 = "GroupElement"
 	end
-	return React.createElement("frame", {
-		ref = elementRef,
-		BackgroundTransparency = 1,
-		AutomaticSize = Enum.AutomaticSize.XY,
-	}, props.children)
+	_attributes.key = _condition_5
+	_attributes.BackgroundTransparency = 1
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			context.reportSize(id, Vector2.new(instance.AbsoluteSize.X + horizontalPadding, instance.AbsoluteSize.Y + verticalPadding))
+		end,
+	}
+	return React.createElement("frame", _attributes, props.children)
 end
 local function getMaxVector2(map)
 	local max