@rbxts/react-clean-ui 1.0.12 → 1.0.19

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

@@ -1,13 +1,7 @@
-import React, { Component } from "@rbxts/react";
-import { RowContext } from "../../Contexts/";
+import React from "@rbxts/react";
 import { ResponsiveGridSpan } from "../../Interfaces/";
 interface ColumnProps {
     span?: ResponsiveGridSpan | number | `${number}`;
 }
-export declare class Column extends Component<ColumnProps> {
-    static contextType: React.Context<import("../../Contexts/row.context").RowContextValue>;
-    context: React.ContextType<typeof RowContext>;
-    private getSpan;
-    render(): React.JSX.Element;
-}
+export declare const Column: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<Frame>>;
 export {};

package/out/Components/Layout/Column.luau

@@ -1,60 +1,40 @@
 -- 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 RowContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").RowContext
 local BreakpointHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").BreakpointHelper
-local Column
-do
-	local super = Component
-	Column = setmetatable({}, {
-		__tostring = function()
-			return "Column"
-		end,
-		__index = super,
-	})
-	Column.__index = Column
-	function Column.new(...)
-		local self = setmetatable({}, Column)
-		return self:constructor(...) or self
+local function resolveSpan(span, children, breakpoint)
+	if span == nil then
+		return math.floor(12 / math.max(children, 1))
 	end
-	function Column:constructor(...)
-		super.constructor(self, ...)
+	local _span = span
+	if type(_span) == "number" then
+		return span
 	end
-	function Column:getSpan()
-		local span = self.props.span
-		if span == nil then
-			return math.floor(12 / math.max(self.context.children, 1))
+	local _span_1 = span
+	if type(_span_1) == "string" then
+		local _condition = tonumber(span)
+		if _condition == nil then
+			_condition = 12
 		end
-		if type(span) == "number" then
-			return span
-		end
-		if type(span) == "string" then
-			local _condition = tonumber(span)
-			if _condition == nil then
-				_condition = 12
-			end
-			return _condition
-		end
-		return BreakpointHelper:getValue(self.context.breakpoint, span) or 12
-	end
-	function Column:render()
-		local span = self:getSpan()
-		local fraction = math.floor((span / 12) * 1000) / 1000
-		local padding = self.context.padding
-		local widthScale = fraction + ((fraction - 1) * padding.Scale)
-		local widthOffset = (fraction - 1) * padding.Offset
-		return React.createElement("frame", {
-			Size = UDim2.new(widthScale, widthOffset, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		}, self.props.children)
+		return _condition
 	end
-	Column.contextType = RowContext
-	Column = ReactComponent(Column) or Column
+	return BreakpointHelper:getValue(breakpoint, span) or 12
 end
+local Column = React.forwardRef(function(props, ref)
+	local context = React.useContext(RowContext)
+	local span = resolveSpan(props.span, context.children, context.breakpoint)
+	local fraction = math.floor((span / 12) * 1000) / 1000
+	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)
+end)
 return {
 	Column = Column,
 }

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

@@ -1,5 +1,5 @@
-import React, { Component, ReactNode } from "@rbxts/react";
-import { DroppableRegistration, RegistryContext } from "../../Providers";
+import React from "@rbxts/react";
+import { DroppableRegistration } from "../../Providers";
 type GuiObjectProps = React.InstanceProps<GuiObject>;
 type GuiElement = React.ReactElement<GuiObjectProps>;
 interface DragHandleProps {
@@ -15,32 +15,8 @@ interface DraggableProps {
     children: GuiElement;
     id?: string;
 }
-interface DraggableState {
-    dragging: boolean;
-    overlayPosition: Vector2;
-    overlaySize: Vector2;
-    placeholderPosition: UDim2;
-    placeholderAnchorPoint: Vector2;
-    placeholderLayoutOrder: number;
-    placeholderZIndex: number;
-}
-export declare class Draggable extends Component<DraggableProps, DraggableState> {
-    static Handle: typeof DragHandle;
-    readonly state: DraggableState;
-    static contextType: React.Context<import("../../Providers").RegistryContextValue | undefined>;
-    context: React.ContextType<typeof RegistryContext>;
-    rootRef: React.RefObject<GuiObject>;
-    private readonly placeholderRef;
-    private dragInformation;
-    private usePlaceholder;
-    private registration;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private beginDrag;
-    private updateDrag;
-    private endDrag;
-    private findDroppable;
-    private readonly contextValue;
-    render(): ReactNode;
-}
-export {};
+type DraggableComponent = React.ForwardRefExoticComponent<DraggableProps & React.RefAttributes<Frame>> & {
+    Handle: typeof DragHandle;
+};
+declare const Draggable: DraggableComponent;
+export { Draggable };

package/out/Components/Layout/Draggable.luau

@@ -1,10 +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 useContext = _react.useContext
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local GuiHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").GuiHelper
 local _Providers = TS.import(script, script.Parent.Parent.Parent, "Providers")
 local DraggableRegistryKey = _Providers.DraggableRegistryKey
@@ -65,7 +61,7 @@ local function DragHandle(_param)
 	return React.cloneElement(children, _object)
 end
 local function Placeholder(props)
-	local theme = useContext(CleanThemeContext)
+	local theme = React.useContext(CleanThemeContext)
 	local _attributes = table.clone(props)
 	setmetatable(_attributes, nil)
 	_attributes.BackgroundTransparency = theme.components.draggable.placeholder.backgroundTransparency
@@ -78,180 +74,32 @@ local function Placeholder(props)
 		radius = theme.components.draggable.placeholder.cornerRadius,
 	}))
 end
-local Draggable
-do
-	local super = Component
-	Draggable = setmetatable({}, {
-		__tostring = function()
-			return "Draggable"
-		end,
-		__index = super,
+local Draggable = React.forwardRef(function(props, _ref)
+	local dragging, setDragging = React.useState(false)
+	local overlayPosition, setOverlayPosition = React.useState(Vector2.zero)
+	local overlaySize, setOverlaySize = React.useState(Vector2.zero)
+	local placeholderPosition, setPlaceholderPosition = React.useState({
+		Position = UDim2.fromOffset(0, 0),
+		AnchorPoint = Vector2.zero,
+		LayoutOrder = 0,
+		ZIndex = 1,
 	})
-	Draggable.__index = Draggable
-	function Draggable.new(...)
-		local self = setmetatable({}, Draggable)
-		return self:constructor(...) or self
+	local registry = React.useContext(RegistryContext)
+	local rootRef = React.useRef()
+	local placeholderRef = React.useRef()
+	local dragInformationRef = React.useRef()
+	local _condition = props.placeholder
+	if _condition == nil then
+		_condition = true
 	end
-	function Draggable:constructor(...)
-		super.constructor(self, ...)
-		self.state = {
-			dragging = false,
-			overlayPosition = Vector2.zero,
-			overlaySize = Vector2.zero,
-			placeholderPosition = UDim2.fromOffset(0, 0),
-			placeholderAnchorPoint = Vector2.zero,
-			placeholderLayoutOrder = 0,
-			placeholderZIndex = 1,
-		}
-		self.rootRef = React.createRef()
-		self.placeholderRef = React.createRef()
-		local _condition = self.props.placeholder
-		if _condition == nil then
-			_condition = true
-		end
-		self.usePlaceholder = _condition
-		self.beginDrag = function(input, handle)
-			local root = self.rootRef.current
-			if root == nil then
-				return nil
-			end
-			local _allDraggables = self.context
-			if _allDraggables ~= nil then
-				_allDraggables = _allDraggables.getAll(DraggableRegistryKey)
-			end
-			local allDraggables = _allDraggables
-			local _result = allDraggables
-			if _result ~= nil then
-				-- ▼ ReadonlyArray.some ▼
-				local _result_1 = false
-				local _callback = function(registration)
-					return registration.draggable.isDragging
-				end
-				for _k, _v in _result do
-					if _callback(_v, _k - 1, _result) then
-						_result_1 = true
-						break
-					end
-				end
-				-- ▲ ReadonlyArray.some ▲
-				_result = _result_1
-			end
-			if _result then
-				return nil
-			end
-			if self.registration ~= nil then
-				self.registration.draggable.isDragging = true
-			end
-			self.dragInformation = {
-				input = input,
-				inputStart = Vector2.new(input.Position.X, input.Position.Y),
-				absolutePositionStart = root.AbsolutePosition,
-				positionStart = root.Position,
-			}
-			local _result_1 = self.props.onStartDrag
-			if _result_1 ~= nil then
-				_result_1()
-			end
-			self:setState({
-				dragging = true,
-				overlayPosition = root.AbsolutePosition,
-				overlaySize = root.AbsoluteSize,
-				placeholderPosition = root.Position,
-				placeholderAnchorPoint = root.AnchorPoint,
-				placeholderLayoutOrder = root.LayoutOrder,
-				placeholderZIndex = root.ZIndex,
-			})
-		end
-		self.updateDrag = function(input)
-			local root = self.rootRef.current
-			local drag = self.dragInformation
-			if root == nil or drag == nil then
-				return nil
-			end
-			local inputPosition = Vector2.new(input.Position.X, input.Position.Y)
-			local _inputStart = drag.inputStart
-			local delta = inputPosition - _inputStart
-			local overlayPosition = drag.absolutePositionStart + delta
-			local dropRegisteration = self:findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
-			local _result = self.props.onDragged
-			if _result ~= nil then
-				_result(dropRegisteration)
-			end
-			self:setState({
-				overlayPosition = overlayPosition,
-			})
-		end
-		self.endDrag = function(input)
-			local root = self.rootRef.current
-			local drag = self.dragInformation
-			if root == nil or drag == nil then
-				return nil
-			end
-			if self.registration then
-				self.registration.draggable.isDragging = false
-			end
-			local dropRegisteration = self:findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
-			self.dragInformation = nil
-			local _result = self.props.onDropped
-			if _result ~= nil then
-				_result(dropRegisteration)
-			end
-			if self.props.retainPosition then
-				local parent = root.Parent
-				local _result_1 = parent
-				if _result_1 ~= nil then
-					_result_1 = _result_1:IsA("GuiObject")
-				end
-				if _result_1 then
-					local _overlayPosition = self.state.overlayPosition
-					local _absolutePosition = parent.AbsolutePosition
-					local localTopLeft = _overlayPosition - _absolutePosition
-					local _absoluteSize = root.AbsoluteSize
-					local _anchorPoint = root.AnchorPoint
-					local anchorOffset = _absoluteSize * _anchorPoint
-					root.Position = UDim2.fromOffset(localTopLeft.X + anchorOffset.X, localTopLeft.Y + anchorOffset.Y)
-				end
-			end
-			self:setState({
-				dragging = false,
-			})
-		end
-		self.contextValue = {
-			isDragging = false,
-			beginDrag = self.beginDrag,
-			updateDrag = self.updateDrag,
-			endDrag = self.endDrag,
-		}
-	end
-	function Draggable:componentDidMount()
-		local registry = self.context
-		local root = self.rootRef.current
-		if registry == nil or root == nil then
-			return nil
-		end
-		local registration = {
-			guiObject = root,
-			id = self.props.id,
-			draggable = self.contextValue,
-		}
-		self.registration = registration
-		registry.register(root, DraggableRegistryKey, registration)
-	end
-	function Draggable:componentWillUnmount()
-		local registry = self.context
-		local registration = self.registration
-		if registry == nil or registration == nil then
-			return nil
-		end
-		registry.unregister(registration.guiObject, DraggableRegistryKey)
-		self.registration = nil
-	end
-	function Draggable:findDroppable(instance, position)
+	local usePlaceholder = _condition
+	local registrationRef = React.useRef()
+	local findDroppable = React.useCallback(function(instance, position)
 		local result
 		local _exp = GuiHelper:getGuiObjectsAtPosition(instance, position)
 		-- ▼ ReadonlyArray.forEach ▼
 		local _callback = function(guiObject)
-			local _registryEntry = self.context
+			local _registryEntry = registry
 			if _registryEntry ~= nil then
 				_registryEntry = _registryEntry.get(guiObject, DroppableRegistryKey)
 			end
@@ -269,47 +117,175 @@ do
 		end
 		-- ▲ ReadonlyArray.forEach ▲
 		return result
-	end
-	function Draggable:render()
-		local original = React.cloneElement(self.props.children, {
-			ref = self.rootRef,
-			Visible = not self.state.dragging,
-		})
-		local placeholder = (React.createElement(Placeholder, {
-			ref = self.placeholderRef,
-			Position = self.state.placeholderPosition,
-			AnchorPoint = self.state.placeholderAnchorPoint,
-			Size = UDim2.fromOffset(self.state.overlaySize.X, self.state.overlaySize.Y),
-			AutomaticSize = Enum.AutomaticSize.None,
-			BackgroundTransparency = 0.3,
-			LayoutOrder = self.state.placeholderLayoutOrder,
-			ZIndex = self.state.placeholderZIndex,
-		}))
-		return React.createElement(DraggableContext.Provider, {
-			value = self.contextValue,
-		}, self.usePlaceholder and self.state.dragging and placeholder, original, React.createElement(OverlayConsumer, {
-			render = function(overlay)
-				if not self.state.dragging or overlay == nil then
-					return nil
+	end, { registry })
+	local beginDrag = React.useCallback(function(input, handle)
+		local root = rootRef.current
+		local registration = registrationRef.current
+		if root == nil then
+			return nil
+		end
+		local _allDraggables = registry
+		if _allDraggables ~= nil then
+			_allDraggables = _allDraggables.getAll(DraggableRegistryKey)
+		end
+		local allDraggables = _allDraggables
+		local _result = allDraggables
+		if _result ~= nil then
+			-- ▼ ReadonlyArray.some ▼
+			local _result_1 = false
+			local _callback = function(registration)
+				return registration.draggable.isDragging
+			end
+			for _k, _v in _result do
+				if _callback(_v, _k - 1, _result) then
+					_result_1 = true
+					break
 				end
-				local _overlayPosition = self.state.overlayPosition
-				local _absolutePosition = overlay.AbsolutePosition
-				local localPosition = _overlayPosition - _absolutePosition
-				return createPortal(React.cloneElement(self.props.children, {
-					Position = UDim2.fromOffset(localPosition.X, localPosition.Y),
-					Size = UDim2.fromOffset(self.state.overlaySize.X, self.state.overlaySize.Y),
-					AnchorPoint = Vector2.zero,
-					AutomaticSize = Enum.AutomaticSize.None,
-					Visible = true,
-					ZIndex = 100001,
-				}), overlay)
-			end,
-		}))
-	end
-	Draggable.Handle = DragHandle
-	Draggable.contextType = RegistryContext
-	Draggable = ReactComponent(Draggable) or Draggable
-end
+			end
+			-- ▲ ReadonlyArray.some ▲
+			_result = _result_1
+		end
+		if _result then
+			return nil
+		end
+		if registration ~= nil then
+			registration.draggable.isDragging = true
+		end
+		dragInformationRef.current = {
+			input = input,
+			inputStart = Vector2.new(input.Position.X, input.Position.Y),
+			absolutePositionStart = root.AbsolutePosition,
+			positionStart = root.Position,
+		}
+		local _result_1 = props.onStartDrag
+		if _result_1 ~= nil then
+			_result_1()
+		end
+		setDragging(true)
+		setOverlayPosition(root.AbsolutePosition)
+		setOverlaySize(root.AbsoluteSize)
+		setPlaceholderPosition({
+			Position = root.Position,
+			AnchorPoint = root.AnchorPoint,
+			LayoutOrder = root.LayoutOrder,
+			ZIndex = root.ZIndex,
+		})
+	end, { registry, props.onStartDrag })
+	local updateDrag = React.useCallback(function(input)
+		local root = rootRef.current
+		local dragInformation = dragInformationRef.current
+		if root == nil or dragInformation == nil then
+			return nil
+		end
+		local inputPosition = Vector2.new(input.Position.X, input.Position.Y)
+		local _inputStart = dragInformation.inputStart
+		local delta = inputPosition - _inputStart
+		local dropRegisteration = findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
+		local _result = props.onDragged
+		if _result ~= nil then
+			_result(dropRegisteration)
+		end
+		setOverlayPosition(dragInformation.absolutePositionStart + delta)
+	end, { findDroppable, props.onDragged })
+	local endDrag = React.useCallback(function(input)
+		local root = rootRef.current
+		local dragInformation = dragInformationRef.current
+		local registration = registrationRef.current
+		if root == nil or dragInformation == nil then
+			return nil
+		end
+		if registration then
+			registration.draggable.isDragging = false
+		end
+		local dropRegisteration = findDroppable(root, Vector2.new(input.Position.X, input.Position.Y))
+		dragInformationRef.current = nil
+		local _result = props.onDropped
+		if _result ~= nil then
+			_result(dropRegisteration)
+		end
+		if props.retainPosition then
+			local parent = root.Parent
+			local _result_1 = parent
+			if _result_1 ~= nil then
+				_result_1 = _result_1:IsA("GuiObject")
+			end
+			if _result_1 then
+				local inputPosition = Vector2.new(input.Position.X, input.Position.Y)
+				local _inputStart = dragInformation.inputStart
+				local delta = inputPosition - _inputStart
+				local finalOverlayPosition = dragInformation.absolutePositionStart + delta
+				local _absolutePosition = parent.AbsolutePosition
+				local localTopLeft = finalOverlayPosition - _absolutePosition
+				local _absoluteSize = root.AbsoluteSize
+				local _anchorPoint = root.AnchorPoint
+				local anchorOffset = _absoluteSize * _anchorPoint
+				root.Position = UDim2.fromOffset(localTopLeft.X + anchorOffset.X, localTopLeft.Y + anchorOffset.Y)
+			end
+		end
+		setDragging(false)
+	end, { findDroppable, props.onDropped, props.retainPosition })
+	local contextValue = React.useMemo(function()
+		return {
+			isDragging = false,
+			beginDrag = beginDrag,
+			updateDrag = updateDrag,
+			endDrag = endDrag,
+		}
+	end, { beginDrag, updateDrag, endDrag })
+	React.useEffect(function()
+		local root = rootRef.current
+		if registry == nil or root == nil then
+			return nil
+		end
+		local registration = {
+			guiObject = root,
+			id = props.id,
+			draggable = contextValue,
+		}
+		registrationRef.current = registration
+		registry.register(root, DraggableRegistryKey, registration)
+		return function()
+			registry.unregister(registration.guiObject, DraggableRegistryKey)
+			if registrationRef.current == registration then
+				registrationRef.current = nil
+			end
+		end
+	end, { registry, props.id, contextValue })
+	local original = React.cloneElement(props.children, {
+		ref = rootRef,
+		Visible = not dragging,
+	})
+	local placeholder = (React.createElement(Placeholder, {
+		ref = placeholderRef,
+		Position = placeholderPosition.Position,
+		AnchorPoint = placeholderPosition.AnchorPoint,
+		Size = UDim2.fromOffset(overlaySize.X, overlaySize.Y),
+		AutomaticSize = Enum.AutomaticSize.None,
+		BackgroundTransparency = 0.3,
+		LayoutOrder = placeholderPosition.LayoutOrder,
+		ZIndex = placeholderPosition.ZIndex,
+	}))
+	return React.createElement(DraggableContext.Provider, {
+		value = contextValue,
+	}, usePlaceholder and dragging and placeholder, original, React.createElement(OverlayConsumer, {
+		render = function(overlay)
+			if not dragging or overlay == nil then
+				return nil
+			end
+			local _absolutePosition = overlay.AbsolutePosition
+			local localPosition = overlayPosition - _absolutePosition
+			return createPortal(React.cloneElement(props.children, {
+				Position = UDim2.fromOffset(localPosition.X, localPosition.Y),
+				Size = UDim2.fromOffset(overlaySize.X, overlaySize.Y),
+				AnchorPoint = Vector2.zero,
+				AutomaticSize = Enum.AutomaticSize.None,
+				Visible = true,
+				ZIndex = 100001,
+			}), overlay)
+		end,
+	}))
+end)
+Draggable.Handle = DragHandle
 return {
 	Draggable = Draggable,
 }

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

@@ -1,10 +1,9 @@
-import React, { Component } from "@rbxts/react";
-import { CleanThemeContext } from "../../Contexts";
+import React from "@rbxts/react";
 import { Breakpoint, BreakPointElementProps } from "../../Interfaces";
 export interface FieldsetContextValue {
     disabled: boolean;
     checkbox: boolean;
-    labelActivated?: BindableEvent;
+    labelActivated: BindableEvent;
 }
 export declare const FieldsetContext: React.Context<FieldsetContextValue | undefined>;
 interface FieldsetProps extends BreakPointElementProps {
@@ -17,18 +16,9 @@ interface FieldsetSlotProps {
 }
 declare function FieldsetLabel(props: FieldsetSlotProps): React.JSX.Element;
 declare function FieldsetControl(props: FieldsetSlotProps): React.JSX.Element;
-interface FieldsetState {
-    width: number;
-}
-export declare class Fieldset extends Component<FieldsetProps, FieldsetState> {
-    static Label: typeof FieldsetLabel;
-    static Control: typeof FieldsetControl;
-    static contextType: React.Context<import("../..").CleanTheme>;
-    context: React.ContextType<typeof CleanThemeContext>;
-    private readonly labelActivated;
-    private fieldsetContext;
-    private getFieldsetContext;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-}
-export {};
+type FieldsetComponent = React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<Frame>> & {
+    Label: typeof FieldsetLabel;
+    Control: typeof FieldsetControl;
+};
+declare const Fieldset: FieldsetComponent;
+export { Fieldset };