@rbxts/react-clean-ui 1.1.0 → 1.2.4

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,
+}

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

@@ -1,27 +1,32 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
--- import { HttpService } from "@rbxts/services";
 local RegistryContext = TS.import(script, script.Parent.Parent.Parent, "Providers").RegistryContext
 local GroupContext = React.createContext(nil)
+local nextFallbackElementId = 0
 local function GroupElement(props)
 	local registry = React.useContext(RegistryContext)
 	local context = React.useContext(GroupContext)
-	local _result = registry
-	if _result ~= nil then
-		_result = _result.GetNextId()
-	end
-	local _condition = _result
-	if _condition == nil then
-		_condition = ""
+	local idRef = React.useRef()
+	if idRef.current == nil then
+		nextFallbackElementId += 1
+		local _result = registry
+		if _result ~= nil then
+			_result = _result.GetNextId()
+		end
+		local _condition = _result
+		if _condition == nil then
+			_condition = `group-element-{nextFallbackElementId}`
+		end
+		idRef.current = _condition
 	end
-	local id = React.useRef(_condition).current
+	local id = idRef.current
 	local enabled = props.enabled == true and context ~= nil
 	local _exp = function()
 		if not enabled then
-			local _result_1 = context
-			if _result_1 ~= nil then
-				_result_1.removeElement(id)
+			local _result = context
+			if _result ~= nil then
+				_result.removeElement(id)
 			end
 			return nil
 		end
@@ -29,79 +34,62 @@ local function GroupElement(props)
 			context.removeElement(id)
 		end
 	end
-	local _result_1 = context
+	local _result = context
+	if _result ~= nil then
+		_result = _result.removeElement
+	end
+	React.useEffect(_exp, { enabled, _result })
+	if not enabled then
+		return props.children
+	end
+	local _result_1 = props.padding
 	if _result_1 ~= nil then
-		_result_1 = _result_1.removeElement
+		_result_1 = _result_1.left
+	end
+	local _condition = _result_1
+	if _condition == nil then
+		_condition = 0
 	end
-	React.useEffect(_exp, { enabled, _result_1 })
-	local elementRef = React.useRef()
 	local _result_2 = props.padding
 	if _result_2 ~= nil then
-		_result_2 = _result_2.left
+		_result_2 = _result_2.right
 	end
 	local _condition_1 = _result_2
 	if _condition_1 == nil then
 		_condition_1 = 0
 	end
+	local horizontalPadding = _condition + _condition_1
 	local _result_3 = props.padding
 	if _result_3 ~= nil then
-		_result_3 = _result_3.right
+		_result_3 = _result_3.top
 	end
 	local _condition_2 = _result_3
 	if _condition_2 == nil then
 		_condition_2 = 0
 	end
-	local horizontalPadding = _condition_1 + _condition_2
 	local _result_4 = props.padding
 	if _result_4 ~= nil then
-		_result_4 = _result_4.top
+		_result_4 = _result_4.bottom
 	end
 	local _condition_3 = _result_4
 	if _condition_3 == nil then
 		_condition_3 = 0
 	end
-	local _result_5 = props.padding
-	if _result_5 ~= nil then
-		_result_5 = _result_5.bottom
-	end
-	local _condition_4 = _result_5
+	local verticalPadding = _condition_2 + _condition_3
+	local _attributes = {}
+	local _condition_4 = props.name
 	if _condition_4 == nil then
-		_condition_4 = 0
+		_condition_4 = "GroupElement"
 	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
-	end
-	return React.createElement("frame", {
-		ref = elementRef,
-		BackgroundTransparency = 1,
-		AutomaticSize = Enum.AutomaticSize.XY,
-	}, props.children)
+	_attributes.key = _condition_4
+	_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

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

@@ -3,11 +3,15 @@ import { SpacedElementProps } from "../../Interfaces";
 interface HStackProps extends SpacedElementProps {
     children?: React.ReactNode;
     valign?: Enum.VerticalAlignment | "Center" | "Top" | "Bottom" | React.Binding<Enum.VerticalAlignment> | undefined;
+    VerticalAlignment?: Enum.VerticalAlignment;
     Wraps?: boolean;
+    HorizontalAlignment?: Enum.HorizontalAlignment;
     HorizontalFlex?: Enum.UIFlexAlignment;
+    VerticalFlex?: Enum.UIFlexAlignment;
     Event?: React.InstanceEvent<UIListLayout>;
     Change?: React.InstanceChangeEvent<UIListLayout>;
     Padding?: UDim | Binding<UDim>;
+    name?: string;
 }
 export declare function HStack(props: HStackProps): React.JSX.Element;
 export {};

package/out/Components/Layout/HStack.luau

@@ -5,16 +5,23 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function HStack(props)
 	local theme = React.useContext(CleanThemeContext)
-	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", {
-		FillDirection = Enum.FillDirection.Horizontal,
-		HorizontalFlex = props.HorizontalFlex,
-		VerticalAlignment = props.valign,
-		Padding = props.Padding or UDim.new(0, math.ceil(SpacingHelper:GetPadding(theme, props.spacing) / 2)),
-		Wraps = if props.Wraps == nil then true else props.Wraps,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-		Change = props.Change,
-		Event = props.Event,
-	}), props.children)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "HStack"
+	end
+	_attributes.key = _condition
+	_attributes.FillDirection = Enum.FillDirection.Horizontal
+	_attributes.HorizontalFlex = props.HorizontalFlex
+	_attributes.HorizontalAlignment = props.HorizontalAlignment
+	_attributes.VerticalAlignment = props.valign or props.VerticalAlignment
+	_attributes.VerticalFlex = props.VerticalFlex
+	_attributes.Padding = props.Padding or UDim.new(0, math.ceil(SpacingHelper:GetPadding(theme, props.spacing) / 2))
+	_attributes.Wraps = if props.Wraps == nil then true else props.Wraps
+	_attributes.SortOrder = Enum.SortOrder.LayoutOrder
+	_attributes.Change = props.Change
+	_attributes.Event = props.Event
+	return React.createElement(React.Fragment, nil, React.createElement("uilistlayout", _attributes), props.children)
 end
 return {
 	HStack = HStack,

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

@@ -0,0 +1,32 @@
+import React from "@rbxts/react";
+import { PaddingProps } from "../../Interfaces";
+export interface PaginationItemProps extends PaddingProps {
+    value: number;
+    layoutOrder?: number;
+}
+declare function PaginationItem(props: PaginationItemProps): React.JSX.Element;
+declare function PaginationPrev(): React.JSX.Element;
+declare function PaginationNext(): React.JSX.Element;
+declare function PaginationEllipsis(props: {
+    layoutOrder?: number;
+}): React.JSX.Element;
+export interface PaginationListProps {
+    children?: React.ReactNode;
+}
+declare function PaginationList(props: PaginationListProps): React.JSX.Element;
+export interface PaginationProps {
+    page: number;
+    totalPages: number;
+    siblingCount?: number;
+    onPageChange: (page: number) => void;
+    children?: React.ReactNode;
+}
+type PaginationComponent = React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<Frame>> & {
+    Prev: typeof PaginationPrev;
+    Next: typeof PaginationNext;
+    Item: typeof PaginationItem;
+    Ellipsis: typeof PaginationEllipsis;
+    List: typeof PaginationList;
+};
+declare const Pagination: PaginationComponent;
+export { Pagination };