@rbxts/react-clean-ui 1.2.9 → 1.4.0

package/out/Components/Surface/Icon.luau

@@ -30,6 +30,7 @@ local function SpinningIcon(props)
 	_attributes.BorderSizePixel = 0
 	_attributes.Size = UDim2.fromOffset(0, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.LayoutOrder = props.LayoutOrder
 	return React.createElement("frame", _attributes, React.createElement(Icon, {
 		Size = props.Size,
 		color = props.color,

package/out/Components/Typography/Text.luau

@@ -89,8 +89,8 @@ local Text = React.forwardRef(function(props, ref)
 	end
 	_attributes.key = _condition_1
 	_attributes.ref = ref
-	_attributes.Size = UDim2.fromScale(0, 0)
-	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Size = props.Size or UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = props.AutomaticSize or Enum.AutomaticSize.XY
 	_attributes.AnchorPoint = props.AnchorPoint
 	local _condition_2 = props.LineHeight
 	if _condition_2 == nil then

package/out/Contexts/draggable.context.d.ts

@@ -1,4 +1,10 @@
 import React from "@rbxts/react";
+export interface DragEventInfo {
+    inputType: Enum.UserInputType;
+    input: InputObject;
+    position: Vector2;
+    id?: string;
+}
 export interface DraggableContextValue {
     isDragging: boolean;
     beginDrag: (input: InputObject, handle: GuiObject) => void;
@@ -6,3 +12,8 @@ export interface DraggableContextValue {
     endDrag: (input: InputObject) => void;
 }
 export declare const DraggableContext: React.Context<DraggableContextValue | undefined>;
+export interface DragStateContextValue {
+    preview: boolean;
+    dragging: boolean;
+}
+export declare const DragStateContext: React.Context<DragStateContextValue>;

package/out/Contexts/draggable.context.luau

@@ -2,6 +2,11 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local DraggableContext = React.createContext(nil)
+local DragStateContext = React.createContext({
+	preview = false,
+	dragging = false,
+})
 return {
 	DraggableContext = DraggableContext,
+	DragStateContext = DragStateContext,
 }

package/out/Helpers/create-ui-story.d.ts

@@ -7,7 +7,7 @@ declare const controls: {
 type StoryControl = Parameters<typeof import("@rbxts/ui-labs").Ordered>[0];
 type StoryControls = Record<string, StoryControl>;
 type StoryProps<T extends StoryControls> = InferProps<typeof controls & T>;
-export declare function createStory<T extends StoryControls = {}>(StoryComponent: (props: StoryProps<T>) => React.ReactNode, additionalControls?: T): {
+export declare function createStory<T extends StoryControls = Record<never, never>>(StoryComponent: (props: StoryProps<T>) => React.ReactNode, additionalControls?: T): {
     react: typeof React;
     reactRoblox: typeof ReactRoblox;
     controls: {

package/out/Helpers/element.helper.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+type EventCallback = (...args: never[]) => void;
+export declare class ElementHelper {
+    static isHostElement(element: React.ReactElement): boolean;
+    static getEventKey(name: string): unknown;
+    static cloneWithEvents<P>(element: React.ReactElement<P>, props: Record<string, unknown>, events: Record<string, EventCallback>): React.ReactElement<P>;
+}
+export {};

package/out/Helpers/element.helper.luau

@@ -0,0 +1,77 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ElementHelper
+do
+	ElementHelper = setmetatable({}, {
+		__tostring = function()
+			return "ElementHelper"
+		end,
+	})
+	ElementHelper.__index = ElementHelper
+	function ElementHelper.new(...)
+		local self = setmetatable({}, ElementHelper)
+		return self:constructor(...) or self
+	end
+	function ElementHelper:constructor()
+	end
+	function ElementHelper:isHostElement(element)
+		local _type = element.type
+		return type(_type) == "string"
+	end
+	function ElementHelper:getEventKey(name)
+		return React.Event[name]
+	end
+	function ElementHelper:cloneWithEvents(element, props, events)
+		local config = {}
+		for key, value in pairs(props) do
+			config[key] = value
+		end
+		local elementProps = element.props
+		if self:isHostElement(element) then
+			for name, handler in pairs(events) do
+				local key = self:getEventKey(name)
+				local original = elementProps[key]
+				config[key] = function(...)
+					local args = { ... }
+					local _result = original
+					if _result ~= nil then
+						_result(unpack(args))
+					end
+					handler(unpack(args))
+				end
+			end
+		else
+			local originalEvents = elementProps.Event
+			local _result
+			if originalEvents ~= nil then
+				local _object = table.clone(originalEvents)
+				setmetatable(_object, nil)
+				_result = _object
+			else
+				_result = {}
+			end
+			local mergedEvents = _result
+			for name, handler in pairs(events) do
+				local _original = originalEvents
+				if _original ~= nil then
+					_original = _original[name]
+				end
+				local original = _original
+				mergedEvents[name] = function(...)
+					local args = { ... }
+					local _result_1 = original
+					if _result_1 ~= nil then
+						_result_1(unpack(args))
+					end
+					handler(unpack(args))
+				end
+			end
+			config.Event = mergedEvents
+		end
+		return React.cloneElement(element, config)
+	end
+end
+return {
+	ElementHelper = ElementHelper,
+}

package/out/Helpers/gui.helper.d.ts

@@ -5,6 +5,12 @@ export declare class GuiHelper {
     static getGuiObjectsAtPosition(instance: Instance, point: Vector2): GuiObject[];
     static getGuiRenderOrder(instance: Instance): GuiObject[];
     private static getGuiRoot;
+    static getRenderSurface(instance: Instance): LayerCollector | undefined;
+    static isGuiObjectHitAtPoint(guiObject: GuiObject, point: Vector2): boolean;
+    static isRenderedAbove(a: GuiObject, b: GuiObject): boolean;
+    private static isLaterInTree;
+    private static getDivergingAncestors;
+    private static getChildIndex;
     private static getRenderSurfaces;
     private static appendGuiObjects;
 }

package/out/Helpers/gui.helper.luau

@@ -64,20 +64,152 @@ do
 		return result
 	end
 	function GuiHelper:getGuiRoot(instance)
-		if RunService:IsRunning() then
+		local surface = self:findHighestAncestorOfClass(instance, "LayerCollector")
+		local _result = surface
+		if _result ~= nil then
+			_result = _result.Parent
+		end
+		if _result ~= nil then
+			return surface.Parent
+		end
+		if RunService:IsRunning() and Players.LocalPlayer ~= nil then
 			return Players.LocalPlayer:WaitForChild("PlayerGui")
 		end
-		local r = self:findHighestAncestorOfClass(instance, "PluginGuiService")
-		if r == nil then
-			error(`No root`)
+		local root = instance
+		while root.Parent ~= nil and root.Parent ~= game do
+			root = root.Parent
+		end
+		return root
+	end
+	function GuiHelper:getRenderSurface(instance)
+		return instance:FindFirstAncestorWhichIsA("LayerCollector")
+	end
+	function GuiHelper:isGuiObjectHitAtPoint(guiObject, point)
+		if not guiObject.Visible or not self:isPointInsideGuiObject(guiObject, point) then
+			return false
+		end
+		local current = guiObject.Parent
+		while current ~= nil do
+			if current:IsA("LayerCollector") then
+				return current.Enabled and not current:IsA("SurfaceGuiBase")
+			end
+			if current:IsA("GuiObject") then
+				if not current.Visible then
+					return false
+				end
+				if (current.ClipsDescendants or current:IsA("CanvasGroup")) and not self:isPointInsideGuiObject(current, point) then
+					return false
+				end
+			end
+			current = current.Parent
+		end
+		return false
+	end
+	function GuiHelper:isRenderedAbove(a, b)
+		if a == b then
+			return false
+		end
+		local surfaceA = self:getRenderSurface(a)
+		local surfaceB = self:getRenderSurface(b)
+		if surfaceA ~= surfaceB then
+			local _result = surfaceA
+			if _result ~= nil then
+				_result = _result:IsA("ScreenGui")
+			end
+			local orderA = if _result then surfaceA.DisplayOrder else 0
+			local _result_1 = surfaceB
+			if _result_1 ~= nil then
+				_result_1 = _result_1:IsA("ScreenGui")
+			end
+			local orderB = if _result_1 then surfaceB.DisplayOrder else 0
+			if orderA ~= orderB then
+				return orderA > orderB
+			end
+			return self:isLaterInTree(surfaceA or a, surfaceB or b)
+		end
+		local _result = surfaceA
+		if _result ~= nil then
+			_result = _result.ZIndexBehavior
+		end
+		local _condition = _result == Enum.ZIndexBehavior.Global
+		if _condition then
+			_condition = a.ZIndex ~= b.ZIndex
+		end
+		if _condition then
+			return a.ZIndex > b.ZIndex
+		end
+		if a:IsDescendantOf(b) then
+			return true
+		end
+		if b:IsDescendantOf(a) then
+			return false
+		end
+		local _result_1 = surfaceA
+		if _result_1 ~= nil then
+			_result_1 = _result_1.ZIndexBehavior
+		end
+		if _result_1 == Enum.ZIndexBehavior.Global then
+			return self:isLaterInTree(a, b)
+		end
+		local divergence = self:getDivergingAncestors(a, b)
+		if divergence == nil then
+			return false
+		end
+		local _binding = divergence
+		local branchA = _binding[1]
+		local branchB = _binding[2]
+		if branchA:IsA("GuiObject") and branchB:IsA("GuiObject") and branchA.ZIndex ~= branchB.ZIndex then
+			return branchA.ZIndex > branchB.ZIndex
+		end
+		return self:getChildIndex(branchA) > self:getChildIndex(branchB)
+	end
+	function GuiHelper:isLaterInTree(a, b)
+		local divergence = self:getDivergingAncestors(a, b)
+		if divergence == nil then
+			return false
+		end
+		return self:getChildIndex(divergence[1]) > self:getChildIndex(divergence[2])
+	end
+	function GuiHelper:getDivergingAncestors(a, b)
+		local branchByAncestor = {}
+		local previous = a
+		local current = a.Parent
+		while current ~= nil do
+			local _current = current
+			local _previous = previous
+			branchByAncestor[_current] = _previous
+			previous = current
+			current = current.Parent
+		end
+		previous = b
+		current = b.Parent
+		while current ~= nil do
+			local _current = current
+			local branchA = branchByAncestor[_current]
+			if branchA ~= nil then
+				return { branchA, previous }
+			end
+			previous = current
+			current = current.Parent
+		end
+		return nil
+	end
+	function GuiHelper:getChildIndex(instance)
+		local parent = instance.Parent
+		if parent == nil then
+			return 0
 		end
-		return r
+		local _exp = parent:GetChildren()
+		local _instance = instance
+		return (table.find(_exp, _instance) or 0) - 1
 	end
 	function GuiHelper:getRenderSurfaces(root)
 		local surfaces = {}
 		local visit
 		visit = function(instance)
-			for index, child in ipairs(instance:GetChildren()) do
+			local instanceChildren = instance:GetChildren()
+			for index = 0, #instanceChildren - 1 do
+				local child = instanceChildren[index + 1]
 				if child:IsA("LayerCollector") then
 					local _arg0 = {
 						root = child,
@@ -102,7 +234,9 @@ do
 	end
 	function GuiHelper:appendGuiObjects(parent, result)
 		local children = {}
-		for index, child in ipairs(parent:GetChildren()) do
+		local parentChildren = parent:GetChildren()
+		for index = 0, #parentChildren - 1 do
+			local child = parentChildren[index + 1]
 			if not child:IsA("GuiObject") then
 				continue
 			end

package/out/Helpers/index.d.ts

@@ -1,6 +1,7 @@
 export * from './breakpoint.helper';
 export * from './color.helper';
 export * from './css.helper';
+export * from './element.helper';
 export * from './gui.helper';
 export * from './input.helper';
 export * from './size.helper';

package/out/Helpers/init.luau

@@ -10,6 +10,9 @@ end
 for _k, _v in TS.import(script, script, "css.helper") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "element.helper") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "gui.helper") or {} do
 	exports[_k] = _v
 end

package/out/Helpers/size.helper.luau

@@ -65,21 +65,13 @@ do
 		end
 		local width = if props.width == "Auto" then nil else props.width
 		local height = if props.height == "Auto" then nil else props.height
-		local _condition = props.Size ~= nil
-		if not _condition then
-			local _condition_1 = width
-			if _condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1 then
-				_condition_1 = height
-			end
-			_condition = _condition_1
-		end
-		if _condition ~= 0 and _condition == _condition and _condition ~= "" and _condition then
+		if props.Size ~= nil or (width ~= nil and width ~= 0 and height ~= nil and height ~= 0) then
 			return Enum.AutomaticSize.None
 		end
 		if width == nil and height == nil and defaultValue == nil then
 			return Enum.AutomaticSize.XY
 		end
-		if not (width ~= 0 and width == width and width ~= "" and width) then
+		if width == nil or width == 0 then
 			return Enum.AutomaticSize.X
 		end
 		return if defaultValue ~= nil then defaultValue else Enum.AutomaticSize.Y

package/out/Providers/registry.provider.d.ts

@@ -1,12 +1,14 @@
 import React from "@rbxts/react";
-import { DraggableContextValue } from "../Contexts";
-export interface RegistryKey<T extends defined> {
+import { DragEventInfo, DraggableContextValue } from "../Contexts";
+export interface RegistryKey<_T extends defined> {
     readonly name: string;
 }
 export interface DroppableRegistration {
     guiObject: GuiObject;
     id?: string;
-    drop: (draggedObject: GuiObject) => void;
+    drop: (draggedObject: GuiObject, info?: DragEventInfo) => void;
+    dragEnter?: (draggedObject: GuiObject, info: DragEventInfo) => void;
+    dragLeave?: (draggedObject: GuiObject, info: DragEventInfo) => void;
 }
 export declare const DroppableRegistryKey: RegistryKey<DroppableRegistration>;
 export interface DraggableRegistration {
@@ -26,6 +28,8 @@ export declare const RegistryContext: React.Context<RegistryContextValue | undef
 export interface RegistryProviderProps {
     children?: React.ReactNode;
 }
+export declare function createRegistry(): RegistryContextValue;
+export declare const GlobalRegistry: RegistryContextValue;
 export declare function RegistryProvider(props: RegistryProviderProps): React.JSX.Element;
 export declare function useRegistryRegistration<T extends defined>(key: RegistryKey<T>, createRegistration: (guiObject: GuiObject) => T, dependencies: React.DependencyList): {
     ref: React.Dispatch<React.SetStateAction<GuiObject | undefined>>;

package/out/Providers/registry.provider.luau

@@ -9,18 +9,16 @@ local DraggableRegistryKey = {
 	name = "Draggable",
 }
 local RegistryContext = React.createContext(nil)
-local function RegistryProvider(props)
-	local entries = React.useRef({})
+local function createRegistry()
+	local entries = {}
 	local register = function(guiObject, key, value)
-		local _current = entries.current
 		local _name = key.name
-		local keyEntries = _current[_name]
+		local keyEntries = entries[_name]
 		if keyEntries == nil then
 			keyEntries = {}
-			local _current_1 = entries.current
 			local _name_1 = key.name
 			local _keyEntries = keyEntries
-			_current_1[_name_1] = _keyEntries
+			entries[_name_1] = _keyEntries
 		end
 		local _keyEntries = keyEntries
 		local _guiObject = guiObject
@@ -28,9 +26,8 @@ local function RegistryProvider(props)
 		_keyEntries[_guiObject] = _value
 	end
 	local unregister = function(guiObject, key)
-		local _current = entries.current
 		local _name = key.name
-		local keyEntries = _current[_name]
+		local keyEntries = entries[_name]
 		if keyEntries == nil then
 			return nil
 		end
@@ -43,15 +40,13 @@ local function RegistryProvider(props)
 		end
 		-- ▲ ReadonlyMap.size ▲
 		if _size == 0 then
-			local _current_1 = entries.current
 			local _name_1 = key.name
-			_current_1[_name_1] = nil
+			entries[_name_1] = nil
 		end
 	end
 	local get = function(guiObject, key)
-		local _current = entries.current
 		local _name = key.name
-		local _result = _current[_name]
+		local _result = entries[_name]
 		if _result ~= nil then
 			local _guiObject = guiObject
 			_result = _result[_guiObject]
@@ -59,9 +54,8 @@ local function RegistryProvider(props)
 		return _result
 	end
 	local getAll = function(key)
-		local _current = entries.current
 		local _name = key.name
-		local keyEntries = _current[_name]
+		local keyEntries = entries[_name]
 		if keyEntries == nil then
 			return {}
 		end
@@ -74,13 +68,17 @@ local function RegistryProvider(props)
 	local GetNextId = function()
 		return HttpService:GenerateGUID(false)
 	end
-	local contextValue = {
+	return {
 		register = register,
 		unregister = unregister,
 		get = get,
 		getAll = getAll,
 		GetNextId = GetNextId,
 	}
+end
+local GlobalRegistry = createRegistry()
+local function RegistryProvider(props)
+	local contextValue = React.useState(createRegistry)
 	return React.createElement(RegistryContext.Provider, {
 		value = contextValue,
 	}, props.children)
@@ -114,9 +112,11 @@ local function useRegistryRegistration(key, createRegistration, dependencies)
 	}
 end
 return {
+	createRegistry = createRegistry,
 	RegistryProvider = RegistryProvider,
 	useRegistryRegistration = useRegistryRegistration,
 	DroppableRegistryKey = DroppableRegistryKey,
 	DraggableRegistryKey = DraggableRegistryKey,
 	RegistryContext = RegistryContext,
+	GlobalRegistry = GlobalRegistry,
 }

package/out/Theme/themes/wooden.theme.luau

@@ -388,6 +388,15 @@ local WoodenTheme = createTheme({
 				},
 			},
 		},
+		draggable = {
+			placeholder = {
+				backgroundColor = Color3.fromHex("#3D2712"),
+				backgroundTransparency = 0.35,
+				borderColor = Color3.fromHex("#A16B30"),
+				borderThickness = 2,
+				cornerRadius = 0,
+			},
+		},
 		box = {
 			borderThickness = 0,
 			boxShadow = 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.2.9",
+  "version": "1.4.0",
   "description": "A clean UI library for Roblox TypeScript projects",
   "main": "out/init.lua",
   "scripts": {