@rbxts/react-clean-ui 1.1.0 → 1.2.2

package/out/Components/Surface/Card.luau

@@ -165,6 +165,7 @@ local CardHeader = React.forwardRef(function(props, ref)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
 	local _attributes = {
+		name = "CardHeader",
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -190,7 +191,9 @@ local CardHeader = React.forwardRef(function(props, ref)
 	local _exp = React.createElement(Padding, {
 		resolvedPadding = padding,
 	})
-	local _attributes_1 = {}
+	local _attributes_1 = {
+		key = "Stroke",
+	}
 	local _condition = theme.components.card.header.borderThickness
 	if _condition == nil then
 		_condition = theme.components.card.borderThickness
@@ -199,6 +202,7 @@ local CardHeader = React.forwardRef(function(props, ref)
 	_attributes_1.Color = intent.borderColor
 	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	return React.createElement(Container, _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement("uicorner", {
+		key = "Corners",
 		TopLeftRadius = corners,
 		TopRightRadius = corners,
 		BottomLeftRadius = UDim.new(0, 0),
@@ -217,6 +221,7 @@ local CardBody = React.forwardRef(function(props, ref)
 	-- against `theme.components.card.body`'s own tiers.
 	local paddingSourceProps = props
 	local _attributes = {
+		name = "CardBody",
 		ref = ref,
 		Size = SizeHelper:GetSize(props, UDim2.fromScale(0, 0)),
 	}
@@ -246,6 +251,7 @@ local CardFooter = React.forwardRef(function(props, ref)
 	local overlay = _binding.overlay
 	local positionProps = _binding.positionProps
 	local _attributes = {
+		name = "CardFooter",
 		ref = ref,
 	}
 	for _k, _v in props do
@@ -271,7 +277,9 @@ local CardFooter = React.forwardRef(function(props, ref)
 	local _exp = React.createElement(Padding, {
 		resolvedPadding = padding,
 	})
-	local _attributes_1 = {}
+	local _attributes_1 = {
+		key = "Stroke",
+	}
 	local _condition = theme.components.card.footer.borderThickness
 	if _condition == nil then
 		_condition = theme.components.card.borderThickness
@@ -280,6 +288,7 @@ local CardFooter = React.forwardRef(function(props, ref)
 	_attributes_1.Color = intent.borderColor
 	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	return React.createElement(Container, _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement("uicorner", {
+		key = "Corners",
 		TopLeftRadius = UDim.new(0, 0),
 		TopRightRadius = UDim.new(0, 0),
 		BottomLeftRadius = corners,
@@ -337,8 +346,11 @@ local Card = React.forwardRef(function(props, ref)
 			if child == nil then
 				return nil
 			end
-			if React.isValidElement(child) and child.type == CardHeader and header == nil then
-				local headerElement = child
+			local directHeader = if React.isValidElement(child) and child.type == CardHeader then child else nil
+			local wrappedChild = if React.isValidElement(child) then (child.props).children else nil
+			local wrappedHeader = if React.isValidElement(wrappedChild) and wrappedChild.type == CardHeader then wrappedChild else nil
+			local headerElement = directHeader or wrappedHeader
+			if headerElement ~= nil and header == nil then
 				local _condition = headerElement.props.overlay
 				if _condition == nil then
 					local _result = theme.components.card.header.position
@@ -348,7 +360,7 @@ local Card = React.forwardRef(function(props, ref)
 					_condition = (_result == "absolute")
 				end
 				if _condition then
-					header = headerElement
+					header = child
 					return nil
 				end
 			end
@@ -380,41 +392,6 @@ local Card = React.forwardRef(function(props, ref)
 	local overlayHeader = _binding.overlayHeader
 	local overlayFooter = _binding.overlayFooter
 	local hasOverlay = overlayHeader ~= nil or overlayFooter ~= nil
-	React.useEffect(function()
-		if not hasOverlay then
-			return nil
-		end
-		local frame = overlayWrapperRef.current
-		if not frame 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 overlay clearance tracking.
-		local positionConn
-		local sizeConn
-		pcall(function()
-			positionConn = frame:GetPropertyChangedSignal("AbsolutePosition"):Connect(function()
-				return setWrapperAbsoluteY(frame.AbsolutePosition.Y)
-			end)
-		end)
-		pcall(function()
-			sizeConn = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
-				return setWrapperAbsoluteSize(frame.AbsoluteSize)
-			end)
-		end)
-		return function()
-			local _result = positionConn
-			if _result ~= nil then
-				_result:Disconnect()
-			end
-			local _result_1 = sizeConn
-			if _result_1 ~= nil then
-				_result_1:Disconnect()
-			end
-		end
-	end, { hasOverlay })
 	-- How far the overlay header's bottom edge extends past the
 	-- wrapper's (i.e. the Box's) top edge — 0 when there's no overlap
 	-- (e.g. a small/no theme offset) or nothing has been measured yet.
@@ -497,6 +474,11 @@ local Card = React.forwardRef(function(props, ref)
 	local boxPropsWithOverlayClearance = _result_2
 	local _attributes = table.clone(boxPropsWithOverlayClearance)
 	setmetatable(_attributes, nil)
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Card"
+	end
+	_attributes.name = _condition
 	_attributes.ref = ref
 	_attributes.center = nil
 	_attributes.spacing = "None"
@@ -525,25 +507,46 @@ local Card = React.forwardRef(function(props, ref)
 	setmetatable(_object, nil)
 	_object.center = nil
 	local wrapperPositionProps = _object
-	local boxWithOverlay = if hasOverlay then (React.createElement("frame", {
-		ref = overlayWrapperRef,
-		BackgroundTransparency = 1,
-		ClipsDescendants = false,
-		Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1)),
-		AutomaticSize = SizeHelper:GetAutoSize(props),
-		Position = SizeHelper:GetPosition(wrapperPositionProps),
-		AnchorPoint = SizeHelper:GetAnchor(wrapperPositionProps),
-		ZIndex = props.ZIndex,
-		LayoutOrder = props.LayoutOrder,
-	}, cardBox, overlayHeader, overlayFooter)) else cardBox
+	local _result_3
+	if hasOverlay then
+		local _attributes_1 = {}
+		local _condition_1 = props.name
+		if _condition_1 == nil then
+			_condition_1 = "CardOverlayWrapper"
+		end
+		_attributes_1.key = _condition_1
+		_attributes_1.ref = overlayWrapperRef
+		_attributes_1.BackgroundTransparency = 1
+		_attributes_1.ClipsDescendants = false
+		_attributes_1.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
+		_attributes_1.AutomaticSize = SizeHelper:GetAutoSize(props)
+		_attributes_1.Position = SizeHelper:GetPosition(wrapperPositionProps)
+		_attributes_1.AnchorPoint = SizeHelper:GetAnchor(wrapperPositionProps)
+		_attributes_1.ZIndex = props.ZIndex
+		_attributes_1.LayoutOrder = props.LayoutOrder
+		_attributes_1.Change = {
+			AbsolutePosition = function(instance)
+				return setWrapperAbsoluteY(instance.AbsolutePosition.Y)
+			end,
+			AbsoluteSize = function(instance)
+				return setWrapperAbsoluteSize(instance.AbsoluteSize)
+			end,
+		}
+		_result_3 = (React.createElement("frame", _attributes_1, cardBox, overlayHeader, overlayFooter))
+	else
+		_result_3 = cardBox
+	end
+	local boxWithOverlay = _result_3
 	local isCentered = props.center == true and props.Position == nil and props.AnchorPoint == nil
 	return React.createElement(CardContext.Provider, {
 		value = contextValue,
 	}, if isCentered then (React.createElement(Container, {
+		name = "CardCenterWrapper",
 		Size = UDim2.fromScale(1, 1),
 		ZIndex = props.ZIndex,
 		LayoutOrder = props.LayoutOrder,
 	}, React.createElement("uilistlayout", {
+		key = "CenterLayout",
 		FillDirection = Enum.FillDirection.Horizontal,
 		HorizontalAlignment = Enum.HorizontalAlignment.Center,
 		VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/Components/Surface/Icon.d.ts

@@ -6,5 +6,6 @@ export interface IconProps extends IconElementProps, ScalableElementProps, React
     spinning?: boolean;
     speed?: number;
     Rotation?: number | Binding<number>;
+    name?: string;
 }
 export declare function Icon(props: IconProps): React.JSX.Element;

package/out/Components/Surface/Icon.luau

@@ -20,11 +20,16 @@ local function SpinningIcon(props)
 		tween:setGoal(360)
 		tween:start()
 	end)
-	return React.createElement("frame", {
-		BackgroundTransparency = 1,
-		Size = UDim2.fromOffset(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-	}, React.createElement(Icon, {
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Icon"
+	end
+	_attributes.key = _condition_1
+	_attributes.BackgroundTransparency = 1
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	return React.createElement("frame", _attributes, React.createElement(Icon, {
 		Size = props.Size,
 		color = props.color,
 		icon = props.icon,
@@ -51,19 +56,23 @@ function Icon(props)
 		setmetatable(_attributes, nil)
 		return React.createElement(SpinningIcon, _attributes)
 	end
-	local _attributes = {
-		AnchorPoint = props.AnchorPoint,
-		Rotation = props.Rotation,
-		Size = props.Size or UDim2.fromOffset(size, size),
-		Position = props.Position,
-		LayoutOrder = props.LayoutOrder,
-		Image = if iconId == nil then nil else `rbxassetid://{iconId}`,
-	}
-	local _condition = props.BackgroundTransparency
+	local _attributes = {}
+	local _condition = props.name
 	if _condition == nil then
-		_condition = 1
+		_condition = "Icon"
+	end
+	_attributes.key = _condition
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.Rotation = props.Rotation
+	_attributes.Size = props.Size or UDim2.fromOffset(size, size)
+	_attributes.Position = props.Position
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.Image = if iconId == nil then nil else `rbxassetid://{iconId}`
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.ImageColor3 = props.color or theme.colors.intents.primary.default.textColor
 	_attributes.ZIndex = props.ZIndex
 	_attributes.Visible = props.Visible

package/out/Components/Typography/Text.d.ts

@@ -9,6 +9,7 @@ interface TextProps extends React.InstanceProps<TextLabel> {
     align?: "Left" | "Right" | "Center";
     TextWrap?: boolean;
     letterSpacing?: number;
+    name?: string;
 }
 export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<TextLabel>>;
 export {};

package/out/Components/Typography/Text.luau

@@ -27,7 +27,23 @@ local Text = React.forwardRef(function(props, ref)
 			local _arg0_1 = string.sub(_text, _arg0, _arg1)
 			table.insert(characters, _arg0_1)
 		end
+		local _attributes = {}
+		local _condition_1 = props.name
+		if _condition_1 == nil then
+			_condition_1 = "Text"
+		end
+		_attributes.key = _condition_1
+		_attributes.Size = UDim2.fromScale(0, 0)
+		_attributes.AutomaticSize = Enum.AutomaticSize.XY
+		_attributes.AnchorPoint = props.AnchorPoint
+		_attributes.BackgroundTransparency = 1
+		_attributes.Position = props.Position
+		_attributes.ZIndex = props.ZIndex
+		_attributes.LayoutOrder = props.LayoutOrder
+		_attributes.Visible = props.Visible
+		_attributes.Rotation = props.Rotation
 		local _exp = React.createElement("uilistlayout", {
+			key = "LetterSpacing",
 			FillDirection = Enum.FillDirection.Horizontal,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, letterSpacing),
@@ -37,7 +53,7 @@ local Text = React.forwardRef(function(props, ref)
 		-- ▼ ReadonlyArray.map ▼
 		local _newValue = table.create(#characters)
 		local _callback = function(character, index)
-			local _attributes = {
+			local _attributes_1 = {
 				key = index,
 				LayoutOrder = index,
 				Size = UDim2.fromScale(0, 0),
@@ -46,56 +62,50 @@ local Text = React.forwardRef(function(props, ref)
 				TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor,
 				Text = character,
 			}
-			local _condition_1 = props.LineHeight
-			if _condition_1 == nil then
-				_condition_1 = style.lineHeight
-			end
-			_attributes.LineHeight = _condition_1
-			_attributes.FontFace = Font.fromName(style.font.Name, weight)
-			_attributes.FontSize = style.size
-			_attributes.RichText = false
-			local _condition_2 = props.TextScaled
+			local _condition_2 = props.LineHeight
 			if _condition_2 == nil then
-				_condition_2 = false
+				_condition_2 = style.lineHeight
 			end
-			_attributes.TextScaled = _condition_2
-			_attributes.TextStrokeColor3 = props.TextStrokeColor3
-			_attributes.TextStrokeTransparency = props.TextStrokeTransparency
-			_attributes.TextTransparency = props.TextTransparency
-			return React.createElement("textlabel", _attributes)
+			_attributes_1.LineHeight = _condition_2
+			_attributes_1.FontFace = Font.fromName(style.font.Name, weight)
+			_attributes_1.FontSize = style.size
+			_attributes_1.RichText = false
+			local _condition_3 = props.TextScaled
+			if _condition_3 == nil then
+				_condition_3 = false
+			end
+			_attributes_1.TextScaled = _condition_3
+			_attributes_1.TextStrokeColor3 = props.TextStrokeColor3
+			_attributes_1.TextStrokeTransparency = props.TextStrokeTransparency
+			_attributes_1.TextTransparency = props.TextTransparency
+			return React.createElement("textlabel", _attributes_1)
 		end
 		for _k, _v in characters do
 			_newValue[_k] = _callback(_v, _k - 1, characters)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		return React.createElement("frame", {
-			Size = UDim2.fromScale(0, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
-			AnchorPoint = props.AnchorPoint,
-			BackgroundTransparency = 1,
-			Position = props.Position,
-			ZIndex = props.ZIndex,
-			LayoutOrder = props.LayoutOrder,
-			Visible = props.Visible,
-			Rotation = props.Rotation,
-		}, _exp, _newValue)
+		return React.createElement("frame", _attributes, _exp, _newValue)
 	end
-	local _attributes = {
-		ref = ref,
-		Size = UDim2.fromScale(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		AnchorPoint = props.AnchorPoint,
-	}
-	local _condition_1 = props.LineHeight
+	local _attributes = {}
+	local _condition_1 = props.name
 	if _condition_1 == nil then
-		_condition_1 = style.lineHeight
+		_condition_1 = "Text"
 	end
-	_attributes.LineHeight = _condition_1
-	local _condition_2 = props.BackgroundTransparency
+	_attributes.key = _condition_1
+	_attributes.ref = ref
+	_attributes.Size = UDim2.fromScale(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.AnchorPoint = props.AnchorPoint
+	local _condition_2 = props.LineHeight
 	if _condition_2 == nil then
-		_condition_2 = 1
+		_condition_2 = style.lineHeight
+	end
+	_attributes.LineHeight = _condition_2
+	local _condition_3 = props.BackgroundTransparency
+	if _condition_3 == nil then
+		_condition_3 = 1
 	end
-	_attributes.BackgroundTransparency = _condition_2
+	_attributes.BackgroundTransparency = _condition_3
 	_attributes.TextXAlignment = props.align or (props.TextXAlignment or Enum.TextXAlignment.Left)
 	_attributes.TextColor3 = props.TextColor3 or theme.colors.intents.primary.default.textColor
 	_attributes.Text = props.text
@@ -104,16 +114,16 @@ local Text = React.forwardRef(function(props, ref)
 	_attributes.TextWrapped = textwrapped
 	_attributes.FontFace = Font.fromName(style.font.Name, weight)
 	_attributes.FontSize = style.size
-	local _condition_3 = props.RichText
-	if _condition_3 == nil then
-		_condition_3 = true
-	end
-	_attributes.RichText = _condition_3
-	local _condition_4 = props.TextScaled
+	local _condition_4 = props.RichText
 	if _condition_4 == nil then
-		_condition_4 = false
+		_condition_4 = true
+	end
+	_attributes.RichText = _condition_4
+	local _condition_5 = props.TextScaled
+	if _condition_5 == nil then
+		_condition_5 = false
 	end
-	_attributes.TextScaled = _condition_4
+	_attributes.TextScaled = _condition_5
 	_attributes.ZIndex = props.ZIndex
 	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.Visible = props.Visible

package/out/Contexts/index.d.ts

@@ -1,5 +1,6 @@
 export * from './draggable.context';
 export * from './droppable.context';
+export * from './modal.context';
 export * from './navigation.context';
 export * from './overlay.context';
 export * from './row.context';

package/out/Contexts/init.luau

@@ -7,6 +7,9 @@ end
 for _k, _v in TS.import(script, script, "droppable.context") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "modal.context") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "navigation.context") or {} do
 	exports[_k] = _v
 end

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

@@ -0,0 +1,15 @@
+import React from "@rbxts/react";
+export interface ModalStackLayer {
+    id: string;
+    closeOnEscape: () => boolean;
+    requestClose: () => void;
+}
+export interface ModalStackContextValue {
+    register: (layer: ModalStackLayer) => void;
+    unregister: (id: string) => void;
+    getLayerIndex: (id: string) => number;
+}
+export declare const ModalStackContext: React.Context<ModalStackContextValue | undefined>;
+export declare function useModalStack(): ModalStackContextValue;
+export declare const ModalCloseContext: React.Context<(() => void) | undefined>;
+export declare function useModalClose(): () => void;

package/out/Contexts/modal.context.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ModalStackContext = React.createContext(nil)
+local function useModalStack()
+	local context = React.useContext(ModalStackContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "ModalProvider is missing.")
+	return context
+end
+-- Per-instance, provided by each <Modal> around its own children so a
+-- header close button or footer button can close the nearest modal
+-- without the consumer threading their own handler down manually.
+local ModalCloseContext = React.createContext(nil)
+local function useModalClose()
+	local context = React.useContext(ModalCloseContext)
+	local _arg0 = context ~= nil
+	assert(_arg0, "useModalClose must be used inside a Modal.")
+	return context
+end
+return {
+	useModalStack = useModalStack,
+	useModalClose = useModalClose,
+	ModalStackContext = ModalStackContext,
+	ModalCloseContext = ModalCloseContext,
+}

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

@@ -9,6 +9,7 @@ export interface ToastOptions {
     duration?: number;
     dismissible?: boolean;
     children?: React.ReactNode;
+    name?: string;
 }
 export interface ToastRecord extends ToastOptions {
     id: string;

package/out/Providers/app.provider.luau

@@ -5,6 +5,7 @@ local ToastContainer = TS.import(script, script.Parent.Parent, "Components", "In
 local RegistryProvider = TS.import(script, script.Parent, "registry.provider").RegistryProvider
 local ThemeProvider = TS.import(script, script.Parent, "theme.provider").ThemeProvider
 local OverlayProvider = TS.import(script, script.Parent, "overlay.provider").OverlayProvider
+local ModalProvider = TS.import(script, script.Parent, "modal.provider").ModalProvider
 local ToastProvider = TS.import(script, script.Parent, "toast.provider").ToastProvider
 local function CleanUiProvider(_param)
 	local children = _param.children
@@ -15,7 +16,7 @@ local function CleanUiProvider(_param)
 	end
 	return React.createElement(RegistryProvider, nil, React.createElement(ThemeProvider, {
 		theme = theme,
-	}, React.createElement(OverlayProvider, nil, React.createElement(ToastProvider, nil, children, toasts and React.createElement(ToastContainer)))))
+	}, React.createElement(OverlayProvider, nil, React.createElement(ModalProvider, nil, React.createElement(ToastProvider, nil, children, toasts and React.createElement(ToastContainer))))))
 end
 return {
 	CleanUiProvider = CleanUiProvider,

package/out/Providers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './modal.provider';
 export * from './overlay.provider';
 export * from './registry.provider';
 export * from './theme.provider';

package/out/Providers/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "modal.provider") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "overlay.provider") or {} do
 	exports[_k] = _v
 end

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

@@ -0,0 +1,6 @@
+import React from "@rbxts/react";
+interface ModalProviderProps {
+    children?: React.ReactNode;
+}
+export declare function ModalProvider(props: ModalProviderProps): React.JSX.Element;
+export {};

package/out/Providers/modal.provider.luau

@@ -0,0 +1,86 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ModalStackContext = TS.import(script, script.Parent.Parent, "Contexts", "modal.context").ModalStackContext
+local CustomInputService = TS.import(script, script.Parent.Parent, "Helpers", "input.helper").CustomInputService
+local function ModalProvider(props)
+	local stack, setStack = React.useState({})
+	local stackRef = React.useRef(stack)
+	React.useEffect(function()
+		stackRef.current = stack
+	end, { stack })
+	local register = React.useCallback(function(layer)
+		setStack(function(current)
+			local _array = {}
+			local _length = #_array
+			local _currentLength = #current
+			table.move(current, 1, _currentLength, _length + 1, _array)
+			_length += _currentLength
+			_array[_length + 1] = layer
+			return _array
+		end)
+	end, {})
+	local unregister = React.useCallback(function(id)
+		setStack(function(current)
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue = {}
+			local _callback = function(layer)
+				return layer.id ~= id
+			end
+			local _length = 0
+			for _k, _v in current do
+				if _callback(_v, _k - 1, current) == true then
+					_length += 1
+					_newValue[_length] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			return _newValue
+		end)
+	end, {})
+	local getLayerIndex = React.useCallback(function(id)
+		-- ▼ ReadonlyArray.findIndex ▼
+		local _callback = function(layer)
+			return layer.id == id
+		end
+		local _result = -1
+		for _i, _v in stack do
+			if _callback(_v, _i - 1, stack) == true then
+				_result = _i - 1
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.findIndex ▲
+		return _result
+	end, { stack })
+	React.useEffect(function()
+		local connection = CustomInputService.InputBegan:Connect(function(input, gameProcessed)
+			if gameProcessed then
+				return nil
+			end
+			if input.KeyCode ~= Enum.KeyCode.Escape and input.KeyCode ~= Enum.KeyCode.ButtonB then
+				return nil
+			end
+			local top = stackRef.current[#stackRef.current]
+			if top ~= nil and top.closeOnEscape() then
+				top.requestClose()
+			end
+		end)
+		return function()
+			connection:Disconnect()
+		end
+	end, {})
+	local value = React.useMemo(function()
+		return {
+			register = register,
+			unregister = unregister,
+			getLayerIndex = getLayerIndex,
+		}
+	end, { register, unregister, getLayerIndex })
+	return React.createElement(ModalStackContext.Provider, {
+		value = value,
+	}, props.children)
+end
+return {
+	ModalProvider = ModalProvider,
+}

package/out/Providers/overlay.provider.luau

@@ -11,6 +11,7 @@ local function OverlayProvider(props)
 			overlay = overlay,
 		},
 	}, props.children, React.createElement("frame", {
+		key = "OverlayProvider",
 		ref = function(instance)
 			setOverlay(instance)
 		end,