@rbxts/react-clean-ui 1.2.2 → 1.2.5

package/out/Components/Chart/Pie.luau

@@ -60,7 +60,6 @@ local function getCirclePosition(normalized, radius)
 	end
 	local centerX = 0.5
 	local centerY = 0.5
-	-- Convert 0 → 1 into radians (0 → 2π)
 	local angle = normalized * math.pi * 2 + math.pi
 	local x = centerX + math.cos(angle) * radius
 	local y = centerY + math.sin(angle) * radius

package/out/Components/Decorator/Gradient.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { CssBackgroundGradient } from "../../Interfaces/";
+interface GradientProps {
+    value?: Partial<CssBackgroundGradient>;
+    name?: string;
+}
+export declare function Gradient(props: GradientProps): React.JSX.Element | undefined;
+export {};

package/out/Components/Decorator/Gradient.luau

@@ -0,0 +1,23 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CssHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").CssHelper
+local function Gradient(props)
+	local resolved = CssHelper:resolveBackgroundGradient(props.value)
+	if resolved == nil then
+		return nil
+	end
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Gradient"
+	end
+	_attributes.key = _condition
+	for _k, _v in resolved do
+		_attributes[_k] = _v
+	end
+	return React.createElement("uigradient", _attributes)
+end
+return {
+	Gradient = Gradient,
+}

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

@@ -1,3 +1,4 @@
 export * from './BoxShadow';
 export * from './Corners';
+export * from './Gradient';
 export * from './Padding';

package/out/Components/Decorator/init.luau

@@ -7,6 +7,9 @@ end
 for _k, _v in TS.import(script, script, "Corners") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Gradient") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Padding") or {} do
 	exports[_k] = _v
 end

package/out/Components/Input/Button.luau

@@ -5,6 +5,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local BoxShadow = _Decorator.BoxShadow
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
@@ -224,9 +225,12 @@ local Button = React.forwardRef(function(props, ref)
 	end
 	_attributes_3.value = _condition_4
 	local _exp_4 = React.createElement(BoxShadow, _attributes_3)
+	local _exp_5 = React.createElement(Gradient, {
+		value = intentColors.backgroundGradient,
+	})
 	local _attributes_4 = table.clone(props)
 	setmetatable(_attributes_4, nil)
-	return React.createElement("imagebutton", _attributes, _exp_2, _exp_3, _exp_4, React.createElement(Padding, _attributes_4), React.createElement(Group.Element, {
+	return React.createElement("imagebutton", _attributes, _exp_2, _exp_3, _exp_4, _exp_5, React.createElement(Padding, _attributes_4), React.createElement(Group.Element, {
 		enabled = props.group,
 		padding = padding,
 	}, (props.icon ~= nil or props.text ~= nil) and React.createElement(HStack, {

package/out/Components/Input/Checkbox.luau

@@ -6,6 +6,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
@@ -64,7 +65,7 @@ local function Checkbox(props)
 		_condition_2 = theme.components.button.backgroundTransparency
 	end
 	_attributes.BackgroundTransparency = _condition_2
-	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).backgroundColor
+	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.checkbox.intents).backgroundColor
 	_attributes.AutoButtonColor = false
 	_attributes.Image = backgroundImage.Image
 	_attributes.ImageColor3 = backgroundImage.ImageColor3
@@ -76,6 +77,9 @@ local function Checkbox(props)
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.checkbox.cornerRadius,
 	})
+	local _exp_1 = React.createElement(Gradient, {
+		value = theme.components.checkbox.backgroundGradient,
+	})
 	local _attributes_1 = {
 		key = "Stroke",
 		Thickness = theme.components.checkbox.borderThickness,
@@ -87,7 +91,7 @@ local function Checkbox(props)
 	end
 	_attributes_1.Transparency = _condition_3
 	_attributes_1.Color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).borderColor
-	return React.createElement("imagebutton", _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement(Padding, {
+	return React.createElement("imagebutton", _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_1), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing, theme.components.checkbox.padding),
 	}), React.createElement(Icon, {
 		name = "CheckboxIcon",

package/out/Components/Input/HoverButton.luau

@@ -6,8 +6,6 @@ local function HoverButton(propSet)
 	local hovering, setHovering = React.useState(false)
 	local state = if propSet.isSelected then "focus" elseif hovering then "hover" else "default"
 	local stateProps = propSet[state]
-	-- Object spreading into a new object is supported.
-	-- It is object rest destructuring that roblox-ts does not support.
 	local _object = table.clone(propSet.default)
 	setmetatable(_object, nil)
 	if stateProps then

package/out/Components/Input/Input.luau

@@ -10,6 +10,7 @@ local CssHelper = _Helpers.CssHelper
 local TypographyHelper = _Helpers.TypographyHelper
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local _Layout = TS.import(script, script.Parent.Parent, "Layout")
 local FieldsetContext = _Layout.FieldsetContext
@@ -31,8 +32,6 @@ local function Input(props)
 	local value, setValue = useState(props.value)
 	local lastValidText = useRef(props.value)
 	local typography = TypographyHelper:getTypography(theme, props.scale, theme.components.input.typography)
-	-- Roblox's TextBox has no PlaceholderTransparency and shares font/size/weight/lineHeight
-	-- between Text and PlaceholderText, so only `.color` from this resolution is actually used below.
 	local placeholderTypography = TypographyHelper:getTypography(theme, props.scale, theme.components.input.placeholder)
 	local backgroundImage = CssHelper:resolveBackgroundImage(theme.components.input.backgroundImage)
 	React.useEffect(function()
@@ -79,10 +78,13 @@ local function Input(props)
 	local _exp_1 = React.createElement(Corners, {
 		radius = theme.components.input.cornerRadius,
 	})
+	local _exp_2 = React.createElement(Gradient, {
+		value = theme.components.input.backgroundGradient,
+	})
 	local _attributes_1 = table.clone(props)
 	setmetatable(_attributes_1, nil)
-	local _exp_2 = React.createElement(Padding, _attributes_1)
-	local _exp_3 = props.icon ~= nil and (React.createElement(Icon, {
+	local _exp_3 = React.createElement(Padding, _attributes_1)
+	local _exp_4 = props.icon ~= nil and (React.createElement(Icon, {
 		name = "InputIcon",
 		icon = props.icon,
 		color = theme.components.input.iconColor,
@@ -198,10 +200,10 @@ local function Input(props)
 		end
 	end
 	_attributes_2.Change = _object_1
-	return React.createElement("imagelabel", _attributes, _exp, _exp_1, _exp_2, React.createElement(HStack, {
+	return React.createElement("imagelabel", _attributes, _exp, _exp_1, _exp_2, _exp_3, React.createElement(HStack, {
 		valign = "Center",
 		Wraps = false,
-	}, _exp_3, React.createElement(FlexItem, nil, React.createElement("textbox", _attributes_2))))
+	}, _exp_4, React.createElement(FlexItem, nil, React.createElement("textbox", _attributes_2))))
 end
 return {
 	Input = Input,

package/out/Components/Input/Select.d.ts

@@ -1,10 +1,11 @@
 import React from "@rbxts/react";
-import { CssSize, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+import { CssBackgroundGradient, CssSize, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
 import { CssBackgroundImage } from "../../Theme";
 export interface SelectProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<ImageLabel> {
     selected?: number;
     'max-height'?: CssSize;
     backgroundImage?: CssBackgroundImage;
+    backgroundGradient?: CssBackgroundGradient;
     onChange?: (selected: number, value?: string) => void;
     name?: string;
     searchable?: boolean;

package/out/Components/Input/Select.luau

@@ -12,6 +12,7 @@ local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local _Layout = TS.import(script, script.Parent.Parent, "Layout")
 local Container = _Layout.Container
@@ -89,9 +90,6 @@ local function parseSelectChildren(children)
 	local index = 0
 	local nodeCount = 0
 	local groupCount = 0
-	-- Fragment-wrapped children (`<>...</>`) are unwrapped/recursed into so
-	-- consumers can conditionally compose Option/OptGroup lists (a common
-	-- React pattern) without breaking option indexing.
 	local collectGroupOptions
 	collectGroupOptions = function(node, options)
 		React.Children.forEach(node, function(groupChild)
@@ -178,8 +176,6 @@ local function optionMatchesQuery(option, normalizedQuery)
 	if option.text == nil then
 		return true
 	end
-	-- Plain-text/literal find (the trailing `true`) avoids treating Lua
-	-- pattern characters in the query (e.g. `%`, `-`) as patterns.
 	local _exp = string.lower(option.text)
 	local _normalizedQuery = normalizedQuery
 	return (string.find(_exp, _normalizedQuery, 1, true)) ~= nil
@@ -437,18 +433,21 @@ local Select = React.forwardRef(function(props, ref)
 	_attributes.Size = UDim2.fromScale(1, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.Y
 	_attributes.backgroundImage = props.backgroundImage or theme.components.select.backgroundImage
-	local _exp_1 = React.createElement("uistroke", {
+	local _exp_1 = React.createElement(Gradient, {
+		value = props.backgroundGradient or theme.components.select.backgroundGradient,
+	})
+	local _exp_2 = React.createElement("uistroke", {
 		key = "Stroke",
 		Thickness = theme.components.select.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.select.borderColor,
 	})
-	local _exp_2 = React.createElement(Corners, {
+	local _exp_3 = React.createElement(Corners, {
 		radius = theme.components.select.cornerRadius,
 	})
 	local _attributes_1 = table.clone(props)
 	setmetatable(_attributes_1, nil)
-	local _exp_3 = React.createElement(Padding, _attributes_1)
+	local _exp_4 = React.createElement(Padding, _attributes_1)
 	local _attributes_2 = {
 		name = "SelectedText",
 	}
@@ -462,7 +461,7 @@ local Select = React.forwardRef(function(props, ref)
 	end
 	_attributes_2.text = _condition_4
 	_attributes_2.typography = typography
-	local _exp_4 = React.createElement(HStack, nil, React.createElement(FlexItem, nil, React.createElement(Text, _attributes_2)), React.createElement(Icon, {
+	local _exp_5 = React.createElement(HStack, nil, React.createElement(FlexItem, nil, React.createElement(Text, _attributes_2)), React.createElement(Icon, {
 		name = "SelectCaret",
 		icon = "caret-down",
 		color = theme.colors.intents.primary.default.textColor,
@@ -510,7 +509,7 @@ local Select = React.forwardRef(function(props, ref)
 			typography = typography,
 		}))))), overlay.overlay)
 	end
-	return React.createElement(Container, _attributes, React.createElement(SelectContext.Provider, {
+	return React.createElement(Container, _attributes, _exp_1, React.createElement(SelectContext.Provider, {
 		value = context,
 	}, React.createElement("imagebutton", {
 		key = "SelectButton",
@@ -521,7 +520,7 @@ local Select = React.forwardRef(function(props, ref)
 		Event = {
 			Activated = activateSelect,
 		},
-	}, _exp_1, _exp_2, _exp_3, _exp_4, _condition_5)))
+	}, _exp_2, _exp_3, _exp_4, _exp_5, _condition_5)))
 end)
 Select.Option = SelectOption
 Select.OptGroup = SelectOptGroup

package/out/Components/Input/Slider.luau

@@ -68,11 +68,6 @@ local Slider = React.forwardRef(function(props, ref)
 		end
 		setValue(nextValue)
 	end, {})
-	--[[
-		*
-		         * Converts an input position into a single slider value.
-		         
-	]]
 	local getNumberFromInput = React.useCallback(function(input)
 		local container = containerRef.current
 		if not container then
@@ -95,14 +90,7 @@ local Slider = React.forwardRef(function(props, ref)
 		local nextValue = minValue + percentage * (maxValue - minValue)
 		local step = currentProps.step
 		if step ~= nil and step > 0 then
-			--[[
-				
-				                     * Offset snapping from minValue so ranges such as
-				                     * min=5, step=2 produce 5, 7, 9, etc.
-				                     
-			]]
 			nextValue = minValue + math.round((nextValue - minValue) / step) * step
-			-- Remove floating-point artifacts.
 			local parts = string.split(tostring(step), ".")
 			local decimals = if #parts > 1 then #parts[2] else 0
 			local scale = 10 ^ decimals
@@ -110,12 +98,6 @@ local Slider = React.forwardRef(function(props, ref)
 		end
 		return math.clamp(nextValue, minValue, maxValue)
 	end, {})
-	--[[
-		*
-		         * Converts a single input value into either a number or Vector2,
-		         * depending on whether range mode is enabled.
-		         
-	]]
 	local getValueFromInput = React.useCallback(function(input)
 		local inputValue = getNumberFromInput(input)
 		if inputValue == nil then
@@ -186,12 +168,6 @@ local Slider = React.forwardRef(function(props, ref)
 			if not isDraggingRef.current then
 				return nil
 			end
-			--[[
-				
-				                         * Stop processing movement immediately, before
-				                         * React gets around to updating the state.
-				                         
-			]]
 			isDraggingRef.current = false
 			local nextValue = getValueFromInput(input)
 			activeHandleRef.current = nil

package/out/Components/Input/Switch.luau

@@ -10,8 +10,6 @@ local BoxShadow = _Decorator.BoxShadow
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local SizeHelper = _Helpers.SizeHelper
--- Linearly interpolates between two UDim values by treating Scale and Offset
--- as independent components, since UDim itself has no Lerp method.
 local function lerpUDim(from, to, alpha)
 	return UDim.new(from.Scale + (to.Scale - from.Scale) * alpha, from.Offset + (to.Offset - from.Offset) * alpha)
 end

package/out/Components/Interaction/Modal.luau

@@ -18,10 +18,6 @@ local function generateModalId()
 	nextModalId += 1
 	return `modal-{nextModalId}`
 end
--- GuiService.SelectedObject can only be set to a descendant of a PlayerGui —
--- it throws otherwise (e.g. a ui-labs Studio plugin preview, or any other
--- non-PlayerGui host). Focus is a non-essential enhancement, so failures here
--- are swallowed rather than crashing the whole render.
 local function trySetSelectedObject(target)
 	pcall(function()
 		GuiService.SelectedObject = target
@@ -111,9 +107,6 @@ local function Modal(props)
 			setShouldRender(false)
 		end)
 	end, { fadeDuration })
-	-- Public open state vs. animated-unmount state: closing must finish its
-	-- fade before the portal actually disappears, so `shouldRender` lags
-	-- `open` on the way down (see beginExit above).
 	React.useEffect(function()
 		if open then
 			local fadeThread = fadeThreadRef.current
@@ -142,11 +135,6 @@ local function Modal(props)
 			end
 		end
 	end, {})
-	-- Registers with the shared modal stack only while actually visible
-	-- (including through the closing fade), so escape only ever targets the
-	-- topmost visible modal. closeOnEscape/requestClose are read through
-	-- refs kept current every render (see above) so this effect only needs
-	-- to run when shouldRender flips.
 	React.useEffect(function()
 		if not shouldRender then
 			return nil
@@ -164,8 +152,6 @@ local function Modal(props)
 			stack.unregister(id)
 		end
 	end, { shouldRender })
-	-- Scoped per-instance so nested modals restore focus to whatever was
-	-- selected right before THEY opened, not a single shared value.
 	React.useEffect(function()
 		if not shouldRender then
 			return nil

package/out/Components/Interaction/Tooltip.luau

@@ -212,7 +212,6 @@ local function Tooltip(props)
 			return nil
 		end
 		task.delay(fadeDuration, function()
-			-- Do not remove it if the tooltip was shown again.
 			if hideRequest.current == request then
 				setTarget(nil)
 			end

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

@@ -1,9 +1,11 @@
 import React from "@rbxts/react";
 import { PositionElementProps, SizeElementProps, ZIndexElementProps } from "../../Interfaces/";
 import { CssBackgroundImage } from "../../Theme";
+import { CssBackgroundGradient } from "../../Interfaces/";
 export interface ContainerProps extends SizeElementProps, PositionElementProps, ZIndexElementProps, React.InstanceProps<ImageLabel> {
     group?: boolean;
     backgroundImage?: Partial<CssBackgroundImage>;
+    backgroundGradient?: Partial<CssBackgroundGradient>;
     name?: string;
 }
 export declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Layout/Container.luau

@@ -4,6 +4,7 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local _ = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local SizeHelper = _.SizeHelper
 local CssHelper = _.CssHelper
+local Gradient = TS.import(script, script.Parent.Parent, "Decorator").Gradient
 local _Group = TS.import(script, script.Parent, "Group")
 local Group = _Group.Group
 local GroupContext = _Group.GroupContext
@@ -80,7 +81,9 @@ local Container = React.forwardRef(function(props, ref)
 	_attributes.TileSize = backgroundImage.TileSize
 	_attributes.Change = props.Change
 	_attributes.Event = props.Event
-	local content = (React.createElement("imagelabel", _attributes, React.createElement(Group.Element, {
+	local content = (React.createElement("imagelabel", _attributes, React.createElement(Gradient, {
+		value = props.backgroundGradient,
+	}), React.createElement(Group.Element, {
 		enabled = props.group,
 	}, props.children)))
 	if not centerViaLayout then

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

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { BreakPointElementProps, ResponsiveCssSize, ResponsiveValue, ScaleSize } from "../../Interfaces/";
+export interface GridProps extends BreakPointElementProps {
+    cols?: ResponsiveValue<number>;
+    gap?: ScaleSize | "None";
+    width?: ResponsiveCssSize;
+    children?: React.ReactNode;
+    name?: string;
+}
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<Frame>>;

package/out/Components/Layout/Grid.luau

@@ -0,0 +1,172 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _ = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local BreakpointHelper = _.BreakpointHelper
+local SizeHelper = _.SizeHelper
+local SpacingHelper = _.SpacingHelper
+local SETTLE_POLL_FRAMES = 10
+local function GridCell(props)
+	local measurementRef = React.useRef()
+	local reportMeasurement = React.useCallback(function()
+		local instance = measurementRef.current
+		if instance ~= nil then
+			props.onMeasured(props.measureKey, props.index, instance.AbsoluteSize.Y)
+		end
+	end, { props.onMeasured, props.measureKey, props.index })
+	React.useEffect(function()
+		if props.locked then
+			return nil
+		end
+		local mounted = true
+		reportMeasurement()
+		task.spawn(function()
+			for frame = 0, SETTLE_POLL_FRAMES - 1 do
+				task.wait()
+				if not mounted then
+					return nil
+				end
+				reportMeasurement()
+			end
+		end)
+		return function()
+			mounted = false
+		end
+	end, { props.locked, props.measureKey, reportMeasurement })
+	return React.createElement("frame", {
+		key = "GridCell",
+		ref = measurementRef,
+		LayoutOrder = props.index,
+		Size = UDim2.new(props.width, UDim.new(0, if props.locked then props.height else 0)),
+		AutomaticSize = if props.locked then Enum.AutomaticSize.None else Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		ClipsDescendants = true,
+		Change = if props.locked then nil else {
+			AbsoluteSize = reportMeasurement,
+		},
+	}, props.children)
+end
+local Grid = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local width, setWidth = React.useState(0)
+	local heights, setHeights = React.useState({
+		key = "",
+		values = {},
+	})
+	local lock, setLock = React.useState(nil)
+	local breakpoints = props.breakpoints or theme.breakpoints
+	local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
+	local _condition = SizeHelper:resolveResponsiveValue(props.cols, breakpoint)
+	if _condition == nil then
+		_condition = 1
+	end
+	local cols = math.max(_condition, 1)
+	local gap = SpacingHelper:GetPadding(theme, props.gap)
+	local cellWidthScale = 1 / cols
+	local cellWidthOffset = math.floor(-gap * (cols - 1) / cols)
+	local cellWidth = UDim.new(cellWidthScale, cellWidthOffset)
+	local childCount = React.Children.count(props.children)
+	local measureKey = `{width}:{cols}:{gap}:{childCount}`
+	local locked = lock ~= nil and lock.key == measureKey
+	local lockedHeight = if locked then lock.height else 0
+	React.useEffect(function()
+		local _condition_1 = locked or heights.key ~= measureKey
+		if not _condition_1 then
+			-- ▼ ReadonlyMap.size ▼
+			local _size = 0
+			for _1 in heights.values do
+				_size += 1
+			end
+			-- ▲ ReadonlyMap.size ▲
+			_condition_1 = _size < childCount
+		end
+		if _condition_1 then
+			return nil
+		end
+		local cancelled = false
+		task.spawn(function()
+			task.wait()
+			task.wait()
+			if cancelled then
+				return nil
+			end
+			local max = 0
+			for _1, height in heights.values do
+				max = math.max(max, height)
+			end
+			setLock({
+				key = measureKey,
+				height = max,
+			})
+		end)
+		return function()
+			cancelled = true
+		end
+	end, { heights, locked, measureKey, childCount })
+	local reportHeight = React.useCallback(function(reportKey, index, height)
+		setHeights(function(current)
+			local values = if current.key == reportKey then current.values else {}
+			local updated = {}
+			for key, value in values do
+				updated[key] = value
+			end
+			local _index = index
+			local _height = height
+			updated[_index] = _height
+			return {
+				key = reportKey,
+				values = updated,
+			}
+		end)
+	end, {})
+	local cellIndex = 0
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Grid"
+	end
+	_attributes.key = _condition_1
+	_attributes.ref = ref
+	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = 1
+	_attributes.Change = {
+		AbsoluteSize = function(instance)
+			local nextWidth = instance.AbsoluteSize.X
+			setWidth(function(currentWidth)
+				return if currentWidth == nextWidth then currentWidth else nextWidth
+			end)
+		end,
+	}
+	return React.createElement("frame", _attributes, if locked then (React.createElement("uigridlayout", {
+		key = "GridLayout",
+		CellSize = UDim2.new(cellWidthScale, cellWidthOffset, 0, lockedHeight),
+		CellPadding = UDim2.new(0, gap, 0, gap),
+		FillDirection = Enum.FillDirection.Horizontal,
+		FillDirectionMaxCells = cols,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})) else (React.createElement("uilistlayout", {
+		key = "GridMeasureLayout",
+		FillDirection = Enum.FillDirection.Horizontal,
+		Wraps = true,
+		Padding = UDim.new(0, gap),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})), React.Children.map(props.children, function(child)
+		local _original = cellIndex
+		cellIndex += 1
+		local index = _original
+		return React.createElement(GridCell, {
+			key = index,
+			index = index,
+			width = cellWidth,
+			height = lockedHeight,
+			locked = locked,
+			measureKey = measureKey,
+			onMeasured = reportHeight,
+		}, child)
+	end))
+end)
+return {
+	Grid = Grid,
+}