@rbxts/react-clean-ui 1.0.5

package/out/Components/Layout/Draggable.luau

@@ -0,0 +1,315 @@
+-- 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 GuiHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").GuiHelper
+local _Providers = TS.import(script, script.Parent.Parent.Parent, "Providers")
+local DraggableRegistryKey = _Providers.DraggableRegistryKey
+local DroppableRegistryKey = _Providers.DroppableRegistryKey
+local RegistryContext = _Providers.RegistryContext
+local _Contexts = TS.import(script, script.Parent.Parent.Parent, "Contexts")
+local CleanThemeContext = _Contexts.CleanThemeContext
+local DraggableContext = _Contexts.DraggableContext
+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, "Interfaces").CustomInputService
+local function DragHandle(_param)
+	local children = _param.children
+	local draggable = React.useContext(DraggableContext)
+	local _arg0 = draggable ~= nil
+	assert(_arg0, "Draggable.Handle must be used inside a Draggable component")
+	local childEvents = children.props.Event
+	React.useEffect(function()
+		local inputChangedListener = CustomInputService.InputChanged:Connect(function(input)
+			if input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
+				draggable.updateDrag(input)
+			end
+		end)
+		local inputEndedListener = CustomInputService.InputEnded:Connect(function(input)
+			if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
+				draggable.endDrag(input)
+			end
+		end)
+		return function()
+			inputChangedListener:Disconnect()
+			inputEndedListener:Disconnect()
+		end
+	end, { draggable })
+	local _object = {
+		Active = true,
+	}
+	local _left = "Event"
+	local _object_1 = {}
+	if childEvents then
+		for _k, _v in childEvents do
+			_object_1[_k] = _v
+		end
+	end
+	_object_1.InputBegan = function(instance, input)
+		local _result = childEvents
+		if _result ~= nil then
+			_result = _result.InputBegan
+			if _result ~= nil then
+				_result(instance, input)
+			end
+		end
+		if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
+			draggable.beginDrag(input, instance)
+		end
+	end
+	_object[_left] = _object_1
+	return React.cloneElement(children, _object)
+end
+local function Placeholder(props)
+	local theme = useContext(CleanThemeContext)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	_attributes.BackgroundTransparency = theme.components.draggable.placeholder.backgroundTransparency
+	_attributes.BackgroundColor3 = theme.components.draggable.placeholder.backgroundColor
+	return React.createElement("frame", _attributes, React.createElement("uistroke", {
+		Thickness = theme.components.draggable.placeholder.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = theme.components.draggable.placeholder.borderColor,
+	}), React.createElement(Corners, {
+		radius = theme.components.draggable.placeholder.cornerRadius,
+	}))
+end
+local Draggable
+do
+	local super = Component
+	Draggable = setmetatable({}, {
+		__tostring = function()
+			return "Draggable"
+		end,
+		__index = super,
+	})
+	Draggable.__index = Draggable
+	function Draggable.new(...)
+		local self = setmetatable({}, Draggable)
+		return self:constructor(...) or self
+	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 result
+		local _exp = GuiHelper:getGuiObjectsAtPosition(instance, position)
+		-- ▼ ReadonlyArray.forEach ▼
+		local _callback = function(guiObject)
+			local _registryEntry = self.context
+			if _registryEntry ~= nil then
+				_registryEntry = _registryEntry.get(guiObject, DroppableRegistryKey)
+			end
+			local registryEntry = _registryEntry
+			if registryEntry then
+				local _result = registryEntry
+				if _result ~= nil then
+					_result.drop(instance)
+				end
+				result = registryEntry
+			end
+		end
+		for _k, _v in _exp do
+			_callback(_v, _k - 1, _exp)
+		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
+				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
+return {
+	Draggable = Draggable,
+}

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

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+type GuiObjectProps = React.InstanceProps<GuiObject>;
+type GuiElement = React.ReactElement<GuiObjectProps>;
+interface DroppableProps {
+    id?: string;
+    children: GuiElement;
+    onDrop?: (draggedObject: GuiObject) => void;
+}
+export declare function Droppable(props: DroppableProps): React.JSX.Element;
+export {};

package/out/Components/Layout/Droppable.luau

@@ -0,0 +1,34 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _ = TS.import(script, script.Parent.Parent.Parent, "Providers")
+local DroppableRegistryKey = _.DroppableRegistryKey
+local useRegistryRegistration = _.useRegistryRegistration
+local DroppableContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").DroppableContext
+local function Droppable(props)
+	local _binding = useRegistryRegistration(DroppableRegistryKey, function(guiObject)
+		return {
+			guiObject = guiObject,
+			id = props.id,
+			drop = function(draggedObject)
+				local _result = props.onDrop
+				if _result ~= nil then
+					_result(draggedObject)
+				end
+			end,
+		}
+	end, { props.id, props.onDrop })
+	local ref = _binding.ref
+	local registration = _binding.registration
+	local child = React.cloneElement(props.children, {
+		ref = ref,
+	})
+	return React.createElement(DroppableContext.Provider, {
+		value = {
+			registration = registration,
+		},
+	}, child)
+end
+return {
+	Droppable = Droppable,
+}

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

@@ -0,0 +1,34 @@
+import React, { Component } from "@rbxts/react";
+import { CleanThemeContext } from "../../Contexts";
+import { Breakpoint, BreakPointElementProps } from "../../Interfaces";
+export interface FieldsetContextValue {
+    disabled: boolean;
+    checkbox: boolean;
+    labelActivated?: BindableEvent;
+}
+export declare const FieldsetContext: React.Context<FieldsetContextValue | undefined>;
+interface FieldsetProps extends BreakPointElementProps {
+    disabled?: boolean;
+    checkbox?: boolean;
+    wrap?: Breakpoint;
+}
+interface FieldsetSlotProps {
+    children?: React.ReactNode;
+}
+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 {};

package/out/Components/Layout/Fieldset.luau

@@ -0,0 +1,130 @@
+-- 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 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
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local BreakpointHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").BreakpointHelper
+local FieldsetContext = React.createContext(nil)
+local function FieldsetLabel(props)
+	local context = React.useContext(FieldsetContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "Fieldset.Label must be used inside a Fieldset")
+	return React.createElement(FlexItem, {
+		mode = "Custom",
+		ShrinkRatio = 0,
+		GrowRatio = 0,
+	}, React.createElement("imagebutton", {
+		Size = UDim2.fromOffset(0, 0),
+		BackgroundTransparency = 1,
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Event = {
+			Activated = function()
+				local _result = context.labelActivated
+				if _result ~= nil then
+					_result:Fire()
+				end
+			end,
+		},
+	}, props.children))
+end
+local function FieldsetControl(props)
+	local context = React.useContext(FieldsetContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "Fieldset.Control must be used inside a Fieldset")
+	return React.createElement(FlexItem, {
+		mode = "Custom",
+		ShrinkRatio = if context.checkbox then 0 else 1,
+		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
+		if _condition == nil then
+			_condition = false
+		end
+		local disabled = _condition
+		local _condition_1 = self.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
+return {
+	FieldsetContext = FieldsetContext,
+	Fieldset = Fieldset,
+}

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

@@ -0,0 +1,11 @@
+import React, { Binding } from "@rbxts/react";
+import { ContainerProps } from "./Container";
+interface FlexItemProps extends ContainerProps {
+    children?: React.ReactNode;
+    align?: Enum.HorizontalAlignment | "Right" | "Left" | "Center" | React.Binding<Enum.HorizontalAlignment>;
+    mode?: Enum.UIFlexMode | "Grow" | "None" | "Shrink" | "Fill" | "Custom" | Binding<Enum.UIFlexMode>;
+    GrowRatio?: number;
+    ShrinkRatio?: number;
+}
+export declare const FlexItem: React.ForwardRefExoticComponent<Omit<FlexItemProps, "ref"> & React.RefAttributes<Frame>>;
+export {};

package/out/Components/Layout/FlexItem.luau

@@ -0,0 +1,20 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Container = TS.import(script, script.Parent, "Container").Container
+local FlexItem = React.forwardRef(function(props, ref)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	_attributes.ref = ref
+	return React.createElement(Container, _attributes, React.createElement("uiflexitem", {
+		FlexMode = props.mode or "Grow",
+		GrowRatio = props.GrowRatio,
+		ShrinkRatio = props.ShrinkRatio,
+	}), React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = props.align,
+	}), props.children)
+end)
+return {
+	FlexItem = FlexItem,
+}

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

@@ -0,0 +1,34 @@
+import React, { Component } from "@rbxts/react";
+import { ResolvedPadding } from "../../Interfaces";
+interface GroupContextValue {
+    size: Vector2;
+    sizes: Map<string, Vector2>;
+    reportSize: (id: string, size: Vector2) => void;
+    removeElement: (id: string) => void;
+}
+export declare const GroupContext: React.Context<GroupContextValue | undefined>;
+interface GroupElementProps {
+    enabled?: boolean;
+    padding?: ResolvedPadding;
+    children?: React.ReactNode;
+}
+declare function GroupElement(props: GroupElementProps): boolean | ReadonlyMap<React.Key, React.ReactNode> | {
+    readonly [key: string]: React.ReactNode;
+    readonly [key: number]: React.ReactNode;
+} | readonly React.ReactNode[] | React.JSX.Element | undefined;
+interface Group2Props {
+    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 {};