@lattice-ui/layer 0.3.2 → 0.4.0

package/out/dismissable/DismissableLayer.luau

@@ -1,6 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local FocusLayerProvider = _core.FocusLayerProvider
+local React = _core.React
 local DEFAULT_LAYER_IGNORE_GUI_INSET = TS.import(script, script.Parent.Parent, "internals", "constants").DEFAULT_LAYER_IGNORE_GUI_INSET
 local Portal = TS.import(script, script.Parent.Parent, "portal", "Portal").Portal
 local usePortalContext = TS.import(script, script.Parent.Parent, "portal", "PortalProvider").usePortalContext
@@ -24,13 +26,13 @@ local function DismissableLayer(props)
 	local shouldBlockOutsidePointer = props.modal == true or props.disableOutsidePointerEvents == true
 	local layerIgnoresGuiInset = DEFAULT_LAYER_IGNORE_GUI_INSET
 	local portalContext = usePortalContext()
-	local contentRootRef = React.useRef()
+	local contentWrapperRef = React.useRef()
 	local stackOrder, setStackOrder = React.useState(0)
 	local enabledRef = useLatest(enabled)
+	local insideRefsRef = useLatest(props.insideRefs or {})
 	local onDismissRef = useLatest(props.onDismiss)
 	local onPointerDownOutsideRef = useLatest(props.onPointerDownOutside)
 	local onInteractOutsideRef = useLatest(props.onInteractOutside)
-	local onEscapeKeyDownRef = useLatest(props.onEscapeKeyDown)
 	local callPointerDownOutside = React.useCallback(function(event)
 		local _result = onPointerDownOutsideRef.current
 		if _result ~= nil then
@@ -43,12 +45,6 @@ local function DismissableLayer(props)
 			_result(event)
 		end
 	end, {})
-	local callEscape = React.useCallback(function(event)
-		local _result = onEscapeKeyDownRef.current
-		if _result ~= nil then
-			_result(event)
-		end
-	end, {})
 	local callDismiss = React.useCallback(function()
 		local _result = onDismissRef.current
 		if _result ~= nil then
@@ -61,24 +57,35 @@ local function DismissableLayer(props)
 				return enabledRef.current
 			end,
 			isPointerOutside = function(inputObject)
-				local contentRoot = contentRootRef.current
-				if not contentRoot then
+				local contentWrapper = contentWrapperRef.current
+				if not contentWrapper then
 					return false
 				end
-				return isOutsidePointerEvent(inputObject, portalContext.container, contentRoot, {
+				local _exp = insideRefsRef.current
+				-- ▼ ReadonlyArray.map ▼
+				local _newValue = table.create(#_exp)
+				local _callback = function(ref)
+					return ref.current
+				end
+				for _k, _v in _exp do
+					_newValue[_k] = _callback(_v, _k - 1, _exp)
+				end
+				-- ▲ ReadonlyArray.map ▲
+				local insideRoots = _newValue
+				return isOutsidePointerEvent(inputObject, portalContext.container, contentWrapper, {
+					insideRoots = insideRoots,
 					layerIgnoresGuiInset = layerIgnoresGuiInset,
 				})
 			end,
 			onPointerDownOutside = callPointerDownOutside,
 			onInteractOutside = callInteractOutside,
-			onEscapeKeyDown = callEscape,
 			onDismiss = callDismiss,
 		})
 		setStackOrder(registration.mountOrder)
 		return function()
 			unregisterLayer(registration.id)
 		end
-	end, { callDismiss, callEscape, callInteractOutside, callPointerDownOutside, enabledRef, layerIgnoresGuiInset, portalContext.container })
+	end, { callDismiss, callInteractOutside, callPointerDownOutside, enabledRef, insideRefsRef, layerIgnoresGuiInset, portalContext.container })
 	return React.createElement(Portal, nil, React.createElement("screengui", {
 		key = `Layer_{stackOrder}`,
 		DisplayOrder = portalContext.displayOrderBase + stackOrder,
@@ -102,9 +109,11 @@ local function DismissableLayer(props)
 		BorderSizePixel = 0,
 		Position = UDim2.fromScale(0, 0),
 		Size = UDim2.fromScale(1, 1),
-		ref = contentRootRef,
+		ref = contentWrapperRef,
 		ZIndex = 1,
-	}, props.children)))
+	}, React.createElement(FocusLayerProvider, {
+		layerOrder = stackOrder,
+	}, props.children))))
 end
 return {
 	DismissableLayer = DismissableLayer,

package/out/dismissable/events.d.ts

@@ -1,8 +1,9 @@
 import type { LayerInteractEvent } from "./types";
 type OutsidePointerOptions = {
     layerIgnoresGuiInset: boolean;
+    insideRoots?: Array<GuiObject | undefined>;
 };
 export declare function isPointerInput(inputObject: InputObject): boolean;
 export declare function toLayerInteractEvent(originalEvent: InputObject): LayerInteractEvent;
-export declare function isOutsidePointerEvent(inputObject: InputObject, container: BasePlayerGui, contentRoot: GuiObject, options: OutsidePointerOptions): boolean;
+export declare function isOutsidePointerEvent(inputObject: InputObject, container: BasePlayerGui, contentWrapper: GuiObject, options: OutsidePointerOptions): boolean;
 export {};

package/out/dismissable/events.luau

@@ -15,6 +15,20 @@ local function toLayerInteractEvent(originalEvent)
 	}
 	return event
 end
+local function isWithinInsideRoots(hitObject, insideRoots)
+	for _, insideRoot in insideRoots do
+		if not insideRoot then
+			continue
+		end
+		if hitObject == insideRoot or hitObject:IsDescendantOf(insideRoot) then
+			return true
+		end
+	end
+	return false
+end
+local function isWithinContentBoundary(hitObject, contentWrapper)
+	return hitObject:IsDescendantOf(contentWrapper)
+end
 local function addUniqueSample(samples, sampleKeys, x, y)
 	local roundedX = math.round(x)
 	local roundedY = math.round(y)
@@ -42,14 +56,15 @@ local function getPointerSamples(pointerPosition, options)
 	end
 	return samples
 end
-local function isOutsidePointerEvent(inputObject, container, contentRoot, options)
+local function isOutsidePointerEvent(inputObject, container, contentWrapper, options)
 	local rawPointerPosition = inputObject.Position
 	local pointerPosition = Vector2.new(rawPointerPosition.X, rawPointerPosition.Y)
 	local pointerSamples = getPointerSamples(pointerPosition, options)
+	local insideRoots = options.insideRoots or {}
 	for _, sample in pointerSamples do
 		local hitGuiObjects = container:GetGuiObjectsAtPosition(sample.X, sample.Y)
 		for _1, hitObject in hitGuiObjects do
-			if hitObject:IsDescendantOf(contentRoot) then
+			if isWithinContentBoundary(hitObject, contentWrapper) or isWithinInsideRoots(hitObject, insideRoots) then
 				return false
 			end
 		end

package/out/dismissable/layerStack.d.ts

@@ -6,7 +6,6 @@ type LayerEntry = {
     isPointerOutside: (inputObject: InputObject) => boolean;
     onPointerDownOutside?: (event: LayerInteractEvent) => void;
     onInteractOutside?: (event: LayerInteractEvent) => void;
-    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
     onDismiss?: () => void;
 };
 type RegisterLayerParams = Omit<LayerEntry, "id" | "mountOrder">;

package/out/dismissable/layerStack.luau

@@ -1,8 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local _env = TS.import(script, script.Parent.Parent, "internals", "env")
-local GuiService = _env.GuiService
-local UserInputService = _env.UserInputService
+local UserInputService = TS.import(script, script.Parent.Parent, "internals", "env").UserInputService
 local _events = TS.import(script, script.Parent, "events")
 local isPointerInput = _events.isPointerInput
 local toLayerInteractEvent = _events.toLayerInteractEvent
@@ -27,38 +25,15 @@ local function handleDismissEvent(entry, event)
 		end
 	end
 end
-local function shouldIgnoreEscapeDismiss()
-	local focusedTextBox = UserInputService:GetFocusedTextBox()
-	if focusedTextBox then
-		return true
-	end
-	local selectedObject = GuiService.SelectedObject
-	if selectedObject and selectedObject:IsA("TextBox") then
-		return true
-	end
-	return false
-end
 local function handleInputBegan(inputObject, gameProcessedEvent)
 	if gameProcessedEvent then
 		return nil
 	end
-	local topLayer = getTopMostEnabledLayer()
-	if not topLayer then
-		return nil
-	end
-	if inputObject.KeyCode == Enum.KeyCode.Escape then
-		if shouldIgnoreEscapeDismiss() then
-			return nil
-		end
-		local escapeEvent = toLayerInteractEvent(inputObject)
-		local _result = topLayer.onEscapeKeyDown
-		if _result ~= nil then
-			_result(escapeEvent)
-		end
-		handleDismissEvent(topLayer, escapeEvent)
+	if not isPointerInput(inputObject) then
 		return nil
 	end
-	if not isPointerInput(inputObject) then
+	local topLayer = getTopMostEnabledLayer()
+	if not topLayer then
 		return nil
 	end
 	if not topLayer.isPointerOutside(inputObject) then
@@ -84,11 +59,10 @@ local function startInputListener()
 	end)
 end
 local function stopInputListener()
-	if not inputConnection then
-		return nil
+	if inputConnection then
+		inputConnection:Disconnect()
+		inputConnection = nil
 	end
-	inputConnection:Disconnect()
-	inputConnection = nil
 end
 local function syncInputListener()
 	if #layerEntries > 0 then

package/out/dismissable/types.d.ts

@@ -7,10 +7,10 @@ export type LayerInteractEvent = {
 export type DismissableLayerProps = {
     children?: React.ReactNode;
     enabled?: boolean;
+    insideRefs?: Array<React.MutableRefObject<GuiObject | undefined> | React.MutableRefObject<TextBox | undefined>>;
     modal?: boolean;
     disableOutsidePointerEvents?: boolean;
     onPointerDownOutside?: (event: LayerInteractEvent) => void;
     onInteractOutside?: (event: LayerInteractEvent) => void;
-    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
     onDismiss?: () => void;
 };

package/out/internals/env.d.ts

@@ -1,3 +1,4 @@
 export declare const UserInputService: UserInputService;
 export declare const GuiService: GuiService;
+export declare const ContextActionService: ContextActionService;
 export declare function getGuiInsetTopLeft(): Vector2;

package/out/internals/env.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local UserInputService = game:GetService("UserInputService")
 local GuiService = game:GetService("GuiService")
+local ContextActionService = game:GetService("ContextActionService")
 local function getGuiInsetTopLeft()
 	local topLeftInset = GuiService:GetGuiInset()
 	return topLeftInset
@@ -9,4 +10,5 @@ return {
 	getGuiInsetTopLeft = getGuiInsetTopLeft,
 	UserInputService = UserInputService,
 	GuiService = GuiService,
+	ContextActionService = ContextActionService,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/layer",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -9,7 +9,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@lattice-ui/core": "0.3.2"
+    "@lattice-ui/core": "0.4.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",