@rbxts/react-clean-ui 1.0.12 → 1.0.19

package/out/Components/Layout/Fieldset.luau

@@ -1,9 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local FlexItem = TS.import(script, script.Parent, "FlexItem").FlexItem
 local Container = TS.import(script, script.Parent, "Container").Container
 local HStack = TS.import(script, script.Parent, "HStack").HStack
@@ -24,10 +21,7 @@ local function FieldsetLabel(props)
 		AutomaticSize = Enum.AutomaticSize.XY,
 		Event = {
 			Activated = function()
-				local _result = context.labelActivated
-				if _result ~= nil then
-					_result:Fire()
-				end
+				context.labelActivated:Fire()
 			end,
 		},
 	}, props.children))
@@ -42,88 +36,52 @@ local function FieldsetControl(props)
 		GrowRatio = if context.checkbox then 0 else 1,
 	}, props.children)
 end
-local Fieldset
-do
-	local super = Component
-	Fieldset = setmetatable({}, {
-		__tostring = function()
-			return "Fieldset"
-		end,
-		__index = super,
-	})
-	Fieldset.__index = Fieldset
-	function Fieldset.new(...)
-		local self = setmetatable({}, Fieldset)
-		return self:constructor(...) or self
-	end
-	function Fieldset:constructor(...)
-		super.constructor(self, ...)
-		self.labelActivated = Instance.new("BindableEvent")
-		self.fieldsetContext = {
-			disabled = false,
-			checkbox = false,
-			labelActivated = self.labelActivated,
-		}
-	end
-	function Fieldset:getFieldsetContext()
-		local _condition = self.props.disabled
+local Fieldset = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local width, setWidth = React.useState(0)
+	local labelActivated = React.useRef(Instance.new("BindableEvent")).current
+	React.useEffect(function()
+		return function()
+			labelActivated:Destroy()
+		end
+	end, {})
+	local fieldsetContext = React.useMemo(function()
+		local _object = {}
+		local _left = "disabled"
+		local _condition = props.disabled
 		if _condition == nil then
 			_condition = false
 		end
-		local disabled = _condition
-		local _condition_1 = self.props.checkbox
+		_object[_left] = _condition
+		local _left_1 = "checkbox"
+		local _condition_1 = props.checkbox
 		if _condition_1 == nil then
 			_condition_1 = false
 		end
-		local checkbox = _condition_1
-		if self.fieldsetContext.disabled ~= disabled or self.fieldsetContext.checkbox ~= checkbox then
-			self.fieldsetContext = {
-				disabled = disabled,
-				checkbox = checkbox,
-				labelActivated = self.labelActivated,
-			}
-		end
-		return self.fieldsetContext
-	end
-	function Fieldset:componentWillUnmount()
-		self.labelActivated:Destroy()
-	end
-	function Fieldset:render()
-		local context = self:getFieldsetContext()
-		local wrap = false
-		local breakpoints = (if self.props.breakpoints ~= nil then self.props.breakpoints else self.context.breakpoints)
-		local _condition = self.state.width
-		if _condition == nil then
-			_condition = 0
-		end
-		local breakpoint = BreakpointHelper:getBreakpoint(_condition, breakpoints)
-		if BreakpointHelper:compare(breakpoint, "<=", self.props.wrap or "lg") then
-			wrap = true
-		end
-		return React.createElement(FieldsetContext.Provider, {
-			value = context,
-		}, React.createElement(Container, {
-			Change = {
-				AbsoluteSize = function(instance)
-					local width = instance.AbsoluteSize.X
-					if width ~= self.state.width then
-						self:setState({
-							width = width,
-						})
-					end
-				end,
-			},
-		}, React.createElement(HStack, {
-			Wraps = wrap,
-			valign = "Center",
-			HorizontalFlex = Enum.UIFlexAlignment.Fill,
-		}, self.props.children)))
-	end
-	Fieldset.Label = FieldsetLabel
-	Fieldset.Control = FieldsetControl
-	Fieldset.contextType = CleanThemeContext
-	Fieldset = ReactComponent(Fieldset) or Fieldset
-end
+		_object[_left_1] = _condition_1
+		_object.labelActivated = labelActivated
+		return _object
+	end, { props.disabled, props.checkbox })
+	local breakpoints = props.breakpoints or theme.breakpoints
+	local breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
+	local wrap = BreakpointHelper:compare(breakpoint, "<=", props.wrap or "lg")
+	return React.createElement(FieldsetContext.Provider, {
+		value = fieldsetContext,
+	}, React.createElement(Container, {
+		ref = ref,
+		Change = {
+			AbsoluteSize = function(instance)
+				setWidth(instance.AbsoluteSize.X)
+			end,
+		},
+	}, React.createElement(HStack, {
+		Wraps = wrap,
+		valign = "Center",
+		HorizontalFlex = Enum.UIFlexAlignment.Fill,
+	}, props.children)))
+end)
+Fieldset.Label = FieldsetLabel
+Fieldset.Control = FieldsetControl
 return {
 	FieldsetContext = FieldsetContext,
 	Fieldset = Fieldset,

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

@@ -1,4 +1,4 @@
-import React, { Component } from "@rbxts/react";
+import React from "@rbxts/react";
 import { ResolvedPadding } from "../../Interfaces";
 interface GroupContextValue {
     size: Vector2;
@@ -16,19 +16,12 @@ declare function GroupElement(props: GroupElementProps): boolean | ReadonlyMap<R
     readonly [key: string]: React.ReactNode;
     readonly [key: number]: React.ReactNode;
 } | readonly React.ReactNode[] | React.JSX.Element | undefined;
-interface Group2Props {
+interface GroupProps {
     children?: React.ReactNode;
     BackgroundTransparency?: number;
 }
-interface GroupState {
-    size: Vector2;
-    sizes: Map<string, Vector2>;
-}
-export declare class Group extends Component<Group2Props, GroupState> {
-    static Element: typeof GroupElement;
-    static contextType: React.Context<GroupContextValue | undefined>;
-    state: GroupState;
-    context: React.ContextType<typeof GroupContext>;
-    render(): React.ReactNode;
-}
-export {};
+type GroupComponent = React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<Frame>> & {
+    Element: typeof GroupElement;
+};
+declare const Group: GroupComponent;
+export { Group };

package/out/Components/Layout/Group.luau

@@ -1,78 +1,82 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
-local HttpService = TS.import(script, TS.getModule(script, "@rbxts", "services")).HttpService
+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 function GroupElement(props)
+	local registry = React.useContext(RegistryContext)
 	local context = React.useContext(GroupContext)
-	local id = React.useRef(HttpService:GenerateGUID(false)).current
-	local _result = context
+	local _result = registry
 	if _result ~= nil then
-		_result = _result.removeElement
+		_result = _result.GetNextId()
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = ""
+	end
+	local id = React.useRef(_condition).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)
+			end
+			return nil
+		end
+		return function()
+			context.removeElement(id)
+		end
 	end
-	local removeElementRef = React.useRef(_result)
 	local _result_1 = context
 	if _result_1 ~= nil then
 		_result_1 = _result_1.removeElement
 	end
-	removeElementRef.current = _result_1
-	React.useEffect(function()
-		return function()
-			local _result_2 = removeElementRef.current
-			if _result_2 ~= nil then
-				_result_2(id)
-			end
-		end
-	end, {})
-	if not props.enabled or context == nil then
+	React.useEffect(_exp, { enabled, _result_1 })
+	if not enabled then
 		return props.children
 	end
+	local _result_2 = props.padding
+	if _result_2 ~= nil then
+		_result_2 = _result_2.left
+	end
+	local _condition_1 = _result_2
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local _result_3 = props.padding
+	if _result_3 ~= nil then
+		_result_3 = _result_3.right
+	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
+	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
+	if _condition_4 == nil then
+		_condition_4 = 0
+	end
+	local verticalPadding = _condition_3 + _condition_4
 	return React.createElement("frame", {
 		BackgroundTransparency = 1,
 		AutomaticSize = Enum.AutomaticSize.XY,
 		Change = {
 			AbsoluteSize = function(instance)
-				local _exp = instance.AbsoluteSize.X
-				local _result_2 = props.padding
-				if _result_2 ~= nil then
-					_result_2 = _result_2.left
-				end
-				local _condition = _result_2
-				if _condition == nil then
-					_condition = 0
-				end
-				local _exp_1 = _exp + _condition
-				local _result_3 = props.padding
-				if _result_3 ~= nil then
-					_result_3 = _result_3.right
-				end
-				local _condition_1 = _result_3
-				if _condition_1 == nil then
-					_condition_1 = 0
-				end
-				local _exp_2 = _exp_1 + _condition_1
-				local _exp_3 = instance.AbsoluteSize.Y
-				local _result_4 = props.padding
-				if _result_4 ~= nil then
-					_result_4 = _result_4.top
-				end
-				local _condition_2 = _result_4
-				if _condition_2 == nil then
-					_condition_2 = 0
-				end
-				local _exp_4 = _exp_3 + _condition_2
-				local _result_5 = props.padding
-				if _result_5 ~= nil then
-					_result_5 = _result_5.bottom
-				end
-				local _condition_3 = _result_5
-				if _condition_3 == nil then
-					_condition_3 = 0
-				end
-				context.reportSize(id, Vector2.new(_exp_2, _exp_4 + _condition_3))
+				context.reportSize(id, Vector2.new(instance.AbsoluteSize.X + horizontalPadding, instance.AbsoluteSize.Y + verticalPadding))
 			end,
 		},
 	}, props.children)
@@ -88,80 +92,58 @@ local function getMaxVector2(map)
 	end
 	return max
 end
-local Group
-do
-	local super = Component
-	Group = setmetatable({}, {
-		__tostring = function()
-			return "Group"
-		end,
-		__index = super,
-	})
-	Group.__index = Group
-	function Group.new(...)
-		local self = setmetatable({}, Group)
-		return self:constructor(...) or self
-	end
-	function Group:constructor(...)
-		super.constructor(self, ...)
-		self.state = {
-			size = Vector2.new(0, 0),
-			sizes = {},
-		}
-	end
-	function Group:render()
-		local context = {
-			size = self.state.size,
-			sizes = self.state.sizes,
-			reportSize = function(id, size)
-				local _sizes = self.state.sizes
-				local _id = id
-				local current = _sizes[_id]
-				if current ~= nil and current.X == size.X and current.Y == size.Y then
-					return nil
-				end
-				self:setState(function(state)
-					local sizes = {}
-					for elementId, elementSize in state.sizes do
-						sizes[elementId] = elementSize
-					end
-					local _id_1 = id
-					local _size = size
-					sizes[_id_1] = _size
-					return {
-						sizes = sizes,
-						size = getMaxVector2(sizes) or Vector2.new(0, 0),
-					}
-				end)
-			end,
-			removeElement = function(id)
-				local _sizes = self.state.sizes
-				local _id = id
-				if not (_sizes[_id] ~= nil) then
-					return nil
+local Group = React.forwardRef(function(props, _ref)
+	local sizes, setSizes = React.useState({})
+	local size = React.useMemo(function()
+		return getMaxVector2(sizes) or Vector2.zero
+	end, { sizes })
+	local reportSize = React.useCallback(function(id, reportedSize)
+		setSizes(function(currentSizes)
+			local _currentSizes = currentSizes
+			local _id = id
+			local current = _currentSizes[_id]
+			if current ~= nil and current.X == reportedSize.X and current.Y == reportedSize.Y then
+				return currentSizes
+			end
+			local newSizes = {}
+			for elementId, elementSize in currentSizes do
+				newSizes[elementId] = elementSize
+			end
+			local _id_1 = id
+			local _reportedSize = reportedSize
+			newSizes[_id_1] = _reportedSize
+			return newSizes
+		end)
+	end, {})
+	local removeElement = React.useCallback(function(id)
+		setSizes(function(currentSizes)
+			local _currentSizes = currentSizes
+			local _id = id
+			if not (_currentSizes[_id] ~= nil) then
+				return currentSizes
+			end
+			local newSizes = {}
+			for elementId, elementSize in currentSizes do
+				if elementId ~= id then
+					newSizes[elementId] = elementSize
 				end
-				self:setState(function(state)
-					local sizes = {}
-					for elementId, elementSize in state.sizes do
-						if elementId ~= id then
-							sizes[elementId] = elementSize
-						end
-					end
-					return {
-						sizes = sizes,
-						size = getMaxVector2(sizes) or Vector2.new(0, 0),
-					}
-				end)
-			end,
+			end
+			return newSizes
+		end)
+	end, {})
+	local context = React.useMemo(function()
+		return {
+			size = size,
+			sizes = sizes,
+			reportSize = reportSize,
+			removeElement = removeElement,
 		}
-		return React.createElement(GroupContext.Provider, {
-			value = context,
-		}, self.props.children)
-	end
-	Group.Element = GroupElement
-	Group.contextType = GroupContext
-	Group = ReactComponent(Group) or Group
-end
+	end, { size, sizes, reportSize, removeElement })
+	return React.createElement(GroupContext.Provider, {
+		value = context,
+	}, props.children)
+end)
+Group.Element = GroupElement
 return {
 	GroupContext = GroupContext,
 	Group = Group,

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

@@ -1,15 +1,6 @@
-import React, { Component } from "@rbxts/react";
+import React from "@rbxts/react";
 import { BreakPointElementProps, SpacedElementProps } from "../../Interfaces/";
-import { CleanThemeContext } from "../../Contexts";
 interface RowProps extends SpacedElementProps, BreakPointElementProps {
 }
-interface RowState {
-    width: number;
-}
-export declare class Row extends Component<RowProps, RowState> {
-    static contextType: React.Context<import("../..").CleanTheme>;
-    context: React.ContextType<typeof CleanThemeContext>;
-    state: RowState;
-    render(): React.JSX.Element;
-}
+export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<Frame>>;
 export {};

package/out/Components/Layout/Row.luau

@@ -1,9 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local React = _react
-local Component = _react.Component
-local ReactComponent = _react.ReactComponent
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Column = TS.import(script, script.Parent, "Column").Column
 local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
 local CleanThemeContext = _Contexts.CleanThemeContext
@@ -11,77 +8,55 @@ local RowContext = _Contexts.RowContext
 local _ = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local BreakpointHelper = _.BreakpointHelper
 local SpacingHelper = _.SpacingHelper
-local Row
-do
-	local super = Component
-	Row = setmetatable({}, {
-		__tostring = function()
-			return "Row"
-		end,
-		__index = super,
+local Row = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local width, setWidth = React.useState(0)
+	local breakpoints = props.breakpoints or theme.breakpoints
+	local padding = UDim.new(0, SpacingHelper:GetPadding(theme, props.spacing))
+	local _exp = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = padding,
+		Wraps = true,
 	})
-	Row.__index = Row
-	function Row.new(...)
-		local self = setmetatable({}, Row)
-		return self:constructor(...) or self
+	local _attributes = {}
+	local _object = {
+		width = width,
+	}
+	local _left = "children"
+	local _exp_1 = React.Children.toArray(props.children)
+	-- ▼ ReadonlyArray.filter ▼
+	local _newValue = {}
+	local _callback = function(child)
+		return React.isValidElement(child) and child.type == Column
 	end
-	function Row:constructor(...)
-		super.constructor(self, ...)
-		self.state = {
-			width = 0,
-		}
-	end
-	function Row:render()
-		local breakpoints = (if self.props.breakpoints ~= nil then self.props.breakpoints else self.context.breakpoints)
-		local padding = UDim.new(0, SpacingHelper:GetPadding(self.context, self.props.spacing))
-		local _exp = React.createElement("uilistlayout", {
-			FillDirection = Enum.FillDirection.Horizontal,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = padding,
-			Wraps = true,
-		})
-		local _attributes = {}
-		local _object = {
-			width = self.state.width,
-		}
-		local _left = "children"
-		local _exp_1 = React.Children.toArray(self.props.children)
-		-- ▼ ReadonlyArray.filter ▼
-		local _newValue = {}
-		local _callback = function(child)
-			return React.isValidElement(child) and child.type == Column
-		end
-		local _length = 0
-		for _k, _v in _exp_1 do
-			if _callback(_v, _k - 1, _exp_1) == true then
-				_length += 1
-				_newValue[_length] = _v
-			end
+	local _length = 0
+	for _k, _v in _exp_1 do
+		if _callback(_v, _k - 1, _exp_1) == true then
+			_length += 1
+			_newValue[_length] = _v
 		end
-		-- ▲ ReadonlyArray.filter ▲
-		_object[_left] = #_newValue
-		_object.padding = padding
-		_object.breakpoint = BreakpointHelper:getBreakpoint(self.state.width, breakpoints)
-		_attributes.value = _object
-		return React.createElement("frame", {
-			Size = UDim2.fromScale(1, 1),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-			Change = {
-				AbsoluteSize = function(instance)
-					local width = instance.AbsoluteSize.X
-					if width ~= self.state.width then
-						self:setState({
-							width = width,
-						})
-					end
-				end,
-			},
-		}, _exp, React.createElement(RowContext.Provider, _attributes, self.props.children))
 	end
-	Row.contextType = CleanThemeContext
-	Row = ReactComponent(Row) or Row
-end
+	-- ▲ ReadonlyArray.filter ▲
+	_object[_left] = #_newValue
+	_object.padding = padding
+	_object.breakpoint = BreakpointHelper:getBreakpoint(width, breakpoints)
+	_attributes.value = _object
+	return React.createElement("frame", {
+		ref = ref,
+		Size = UDim2.fromScale(1, 1),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		Change = {
+			AbsoluteSize = function(instance)
+				local nextWidth = instance.AbsoluteSize.X
+				setWidth(function(currentWidth)
+					return if currentWidth == nextWidth then currentWidth else nextWidth
+				end)
+			end,
+		},
+	}, _exp, React.createElement(RowContext.Provider, _attributes, props.children))
+end)
 return {
 	Row = Row,
 }

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

@@ -1,31 +1,23 @@
-import React, { Component } from "@rbxts/react";
-import { CleanThemeContext } from "../../Contexts";
+import React from "@rbxts/react";
 import { ScalableElementProps } from "../../Interfaces";
 interface TabProps {
     children?: React.ReactNode;
 }
-declare function Tab(props: TabProps): undefined;
+declare function Tab(_props: TabProps): undefined;
 interface TabTitleProps {
     text: string;
-    children?: React.ReactNode;
 }
-declare function TabTitle(props: TabTitleProps): undefined;
+declare function TabTitle(_props: TabTitleProps): undefined;
 interface TabContentProps {
     children?: React.ReactNode;
 }
 declare function TabContent(props: TabContentProps): undefined;
 interface TabsProps extends ScalableElementProps {
 }
-interface TabsState {
-    selected: number;
-}
-export declare class Tabs extends Component<TabsProps, TabsState> {
-    static Tab: typeof Tab;
-    static Title: typeof TabTitle;
-    static Content: typeof TabContent;
-    static contextType: React.Context<import("../..").CleanTheme>;
-    context: React.ContextType<typeof CleanThemeContext>;
-    state: TabsState;
-    render(): React.ReactNode;
-}
-export {};
+type TabsComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<Frame>> & {
+    Tab: typeof Tab;
+    Title: typeof TabTitle;
+    Content: typeof TabContent;
+};
+declare const Tabs: TabsComponent;
+export { Tabs };