@lattice-ui/layer 0.1.1

package/out/dismissable/DismissableLayer.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { DismissableLayerProps } from "./types";
+export declare function DismissableLayer(props: DismissableLayerProps): React.JSX.Element;

package/out/dismissable/DismissableLayer.luau

@@ -0,0 +1,111 @@
+-- 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 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
+local isOutsidePointerEvent = TS.import(script, script.Parent, "events").isOutsidePointerEvent
+local _layerStack = TS.import(script, script.Parent, "layerStack")
+local registerLayer = _layerStack.registerLayer
+local unregisterLayer = _layerStack.unregisterLayer
+local function useLatest(value)
+	local ref = React.useRef(value)
+	React.useEffect(function()
+		ref.current = value
+	end, { value })
+	return ref
+end
+local function DismissableLayer(props)
+	local _condition = props.enabled
+	if _condition == nil then
+		_condition = true
+	end
+	local enabled = _condition
+	local shouldBlockOutsidePointer = props.modal == true or props.disableOutsidePointerEvents == true
+	local layerIgnoresGuiInset = DEFAULT_LAYER_IGNORE_GUI_INSET
+	local portalContext = usePortalContext()
+	local contentRootRef = React.useRef()
+	local stackOrder, setStackOrder = React.useState(0)
+	local enabledRef = useLatest(enabled)
+	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
+			_result(event)
+		end
+	end, {})
+	local callInteractOutside = React.useCallback(function(event)
+		local _result = onInteractOutsideRef.current
+		if _result ~= nil then
+			_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
+			_result()
+		end
+	end, {})
+	React.useEffect(function()
+		local registration = registerLayer({
+			getEnabled = function()
+				return enabledRef.current
+			end,
+			isPointerOutside = function(inputObject)
+				local contentRoot = contentRootRef.current
+				if not contentRoot then
+					return false
+				end
+				return isOutsidePointerEvent(inputObject, portalContext.container, contentRoot, {
+					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 })
+	return React.createElement(Portal, nil, React.createElement("screengui", {
+		key = `Layer_{stackOrder}`,
+		DisplayOrder = portalContext.displayOrderBase + stackOrder,
+		IgnoreGuiInset = layerIgnoresGuiInset,
+		ResetOnSpawn = false,
+		ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+	}, if shouldBlockOutsidePointer then (React.createElement("textbutton", {
+		Active = true,
+		AutoButtonColor = false,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Modal = true,
+		Position = UDim2.fromScale(0, 0),
+		Selectable = false,
+		Size = UDim2.fromScale(1, 1),
+		Text = "",
+		TextTransparency = 1,
+		ZIndex = 0,
+	})) else nil, React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Position = UDim2.fromScale(0, 0),
+		Size = UDim2.fromScale(1, 1),
+		ref = contentRootRef,
+		ZIndex = 1,
+	}, props.children)))
+end
+return {
+	DismissableLayer = DismissableLayer,
+}

package/out/dismissable/events.d.ts

@@ -0,0 +1,8 @@
+import type { LayerInteractEvent } from "./types";
+type OutsidePointerOptions = {
+    layerIgnoresGuiInset: boolean;
+};
+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 {};

package/out/dismissable/events.luau

@@ -0,0 +1,63 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local getGuiInsetTopLeft = TS.import(script, script.Parent.Parent, "internals", "env").getGuiInsetTopLeft
+local function isPointerInput(inputObject)
+	return inputObject.UserInputType == Enum.UserInputType.MouseButton1 or inputObject.UserInputType == Enum.UserInputType.Touch
+end
+local function toLayerInteractEvent(originalEvent)
+	local event
+	event = {
+		originalEvent = originalEvent,
+		defaultPrevented = false,
+		preventDefault = function()
+			event.defaultPrevented = true
+		end,
+	}
+	return event
+end
+local function addUniqueSample(samples, sampleKeys, x, y)
+	local roundedX = math.round(x)
+	local roundedY = math.round(y)
+	local key = `{roundedX}:{roundedY}`
+	if sampleKeys[key] then
+		return nil
+	end
+	sampleKeys[key] = true
+	local _samples = samples
+	local _vector2 = Vector2.new(roundedX, roundedY)
+	table.insert(_samples, _vector2)
+end
+local function getPointerSamples(pointerPosition, options)
+	local insetTopLeft = getGuiInsetTopLeft()
+	local samples = {}
+	local sampleKeys = {}
+	addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y)
+	addUniqueSample(samples, sampleKeys, pointerPosition.X + insetTopLeft.X, pointerPosition.Y + insetTopLeft.Y)
+	addUniqueSample(samples, sampleKeys, pointerPosition.X - insetTopLeft.X, pointerPosition.Y - insetTopLeft.Y)
+	if options.layerIgnoresGuiInset then
+		addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y + insetTopLeft.Y)
+		addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y - insetTopLeft.Y)
+		addUniqueSample(samples, sampleKeys, pointerPosition.X + insetTopLeft.X, pointerPosition.Y)
+		addUniqueSample(samples, sampleKeys, pointerPosition.X - insetTopLeft.X, pointerPosition.Y)
+	end
+	return samples
+end
+local function isOutsidePointerEvent(inputObject, container, contentRoot, options)
+	local rawPointerPosition = inputObject.Position
+	local pointerPosition = Vector2.new(rawPointerPosition.X, rawPointerPosition.Y)
+	local pointerSamples = getPointerSamples(pointerPosition, options)
+	for _, sample in pointerSamples do
+		local hitGuiObjects = container:GetGuiObjectsAtPosition(sample.X, sample.Y)
+		for _1, hitObject in hitGuiObjects do
+			if hitObject:IsDescendantOf(contentRoot) then
+				return false
+			end
+		end
+	end
+	return true
+end
+return {
+	isPointerInput = isPointerInput,
+	toLayerInteractEvent = toLayerInteractEvent,
+	isOutsidePointerEvent = isOutsidePointerEvent,
+}

package/out/dismissable/layerStack.d.ts

@@ -0,0 +1,19 @@
+import type { LayerInteractEvent } from "./types";
+type LayerEntry = {
+    id: number;
+    mountOrder: number;
+    getEnabled: () => boolean;
+    isPointerOutside: (inputObject: InputObject) => boolean;
+    onPointerDownOutside?: (event: LayerInteractEvent) => void;
+    onInteractOutside?: (event: LayerInteractEvent) => void;
+    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+    onDismiss?: () => void;
+};
+type RegisterLayerParams = Omit<LayerEntry, "id" | "mountOrder">;
+export type LayerRegistration = {
+    id: number;
+    mountOrder: number;
+};
+export declare function registerLayer(params: RegisterLayerParams): LayerRegistration;
+export declare function unregisterLayer(layerId: number): void;
+export {};

package/out/dismissable/layerStack.luau

@@ -0,0 +1,141 @@
+-- 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 _events = TS.import(script, script.Parent, "events")
+local isPointerInput = _events.isPointerInput
+local toLayerInteractEvent = _events.toLayerInteractEvent
+local layerEntries = {}
+local nextLayerId = 0
+local nextMountOrder = 0
+local inputConnection
+local function getTopMostEnabledLayer()
+	for index = #layerEntries - 1, 0, -1 do
+		local entry = layerEntries[index + 1]
+		if entry.getEnabled() then
+			return entry
+		end
+	end
+	return nil
+end
+local function handleDismissEvent(entry, event)
+	if not event.defaultPrevented then
+		local _result = entry.onDismiss
+		if _result ~= nil then
+			_result()
+		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)
+		return nil
+	end
+	if not isPointerInput(inputObject) then
+		return nil
+	end
+	if not topLayer.isPointerOutside(inputObject) then
+		return nil
+	end
+	local outsideEvent = toLayerInteractEvent(inputObject)
+	local _result = topLayer.onPointerDownOutside
+	if _result ~= nil then
+		_result(outsideEvent)
+	end
+	local _result_1 = topLayer.onInteractOutside
+	if _result_1 ~= nil then
+		_result_1(outsideEvent)
+	end
+	handleDismissEvent(topLayer, outsideEvent)
+end
+local function startInputListener()
+	if inputConnection then
+		return nil
+	end
+	inputConnection = UserInputService.InputBegan:Connect(function(inputObject, gameProcessedEvent)
+		handleInputBegan(inputObject, gameProcessedEvent)
+	end)
+end
+local function stopInputListener()
+	if not inputConnection then
+		return nil
+	end
+	inputConnection:Disconnect()
+	inputConnection = nil
+end
+local function syncInputListener()
+	if #layerEntries > 0 then
+		startInputListener()
+	else
+		stopInputListener()
+	end
+end
+local function registerLayer(params)
+	nextLayerId += 1
+	nextMountOrder += 1
+	local _object = {
+		id = nextLayerId,
+		mountOrder = nextMountOrder,
+	}
+	for _k, _v in params do
+		_object[_k] = _v
+	end
+	local entry = _object
+	table.insert(layerEntries, entry)
+	syncInputListener()
+	return {
+		id = entry.id,
+		mountOrder = entry.mountOrder,
+	}
+end
+local function unregisterLayer(layerId)
+	-- ▼ ReadonlyArray.findIndex ▼
+	local _callback = function(entry)
+		return entry.id == layerId
+	end
+	local _result = -1
+	for _i, _v in layerEntries do
+		if _callback(_v, _i - 1, layerEntries) == true then
+			_result = _i - 1
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.findIndex ▲
+	local layerIndex = _result
+	if layerIndex == -1 then
+		return nil
+	end
+	table.remove(layerEntries, layerIndex + 1)
+	syncInputListener()
+end
+return {
+	registerLayer = registerLayer,
+	unregisterLayer = unregisterLayer,
+}

package/out/dismissable/types.d.ts

@@ -0,0 +1,16 @@
+import type React from "@rbxts/react";
+export type LayerInteractEvent = {
+    originalEvent: InputObject;
+    defaultPrevented: boolean;
+    preventDefault: () => void;
+};
+export type DismissableLayerProps = {
+    children?: React.ReactNode;
+    enabled?: boolean;
+    modal?: boolean;
+    disableOutsidePointerEvents?: boolean;
+    onPointerDownOutside?: (event: LayerInteractEvent) => void;
+    onInteractOutside?: (event: LayerInteractEvent) => void;
+    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+    onDismiss?: () => void;
+};

package/out/dismissable/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./dismissable/DismissableLayer";
+export * from "./dismissable/types";
+export * from "./portal/Portal";
+export * from "./portal/PortalProvider";
+export * from "./presence/Presence";

package/out/init.luau

@@ -0,0 +1,19 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "dismissable", "DismissableLayer") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "dismissable", "types") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "portal", "Portal") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "portal", "PortalProvider") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "presence", "Presence") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/internals/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_DISPLAY_ORDER_BASE = 1000;
+export declare const DEFAULT_PRESENCE_EXIT_FALLBACK_MS = 500;
+export declare const DEFAULT_LAYER_IGNORE_GUI_INSET = true;

package/out/internals/constants.luau

@@ -0,0 +1,9 @@
+-- Compiled with roblox-ts v3.0.0
+local DEFAULT_DISPLAY_ORDER_BASE = 1000
+local DEFAULT_PRESENCE_EXIT_FALLBACK_MS = 500
+local DEFAULT_LAYER_IGNORE_GUI_INSET = true
+return {
+	DEFAULT_DISPLAY_ORDER_BASE = DEFAULT_DISPLAY_ORDER_BASE,
+	DEFAULT_PRESENCE_EXIT_FALLBACK_MS = DEFAULT_PRESENCE_EXIT_FALLBACK_MS,
+	DEFAULT_LAYER_IGNORE_GUI_INSET = DEFAULT_LAYER_IGNORE_GUI_INSET,
+}

package/out/internals/env.d.ts

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

package/out/internals/env.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local UserInputService = game:GetService("UserInputService")
+local GuiService = game:GetService("GuiService")
+local function getGuiInsetTopLeft()
+	local topLeftInset = GuiService:GetGuiInset()
+	return topLeftInset
+end
+return {
+	getGuiInsetTopLeft = getGuiInsetTopLeft,
+	UserInputService = UserInputService,
+	GuiService = GuiService,
+}

package/out/portal/Portal.d.ts

@@ -0,0 +1,2 @@
+import type { PortalProps } from "./types";
+export declare function Portal(props: PortalProps): import("@rbxts/react").ReactPortal;

package/out/portal/Portal.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local ReactRoblox = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).ReactRoblox
+local usePortalContext = TS.import(script, script.Parent, "PortalProvider").usePortalContext
+local function Portal(props)
+	local contextValue = usePortalContext()
+	local target = props.container or contextValue.container
+	return ReactRoblox.createPortal(props.children, target)
+end
+return {
+	Portal = Portal,
+}

package/out/portal/PortalProvider.d.ts

@@ -0,0 +1,5 @@
+import { React } from "@lattice-ui/core";
+import type { PortalContextValue, PortalProviderProps } from "./types";
+declare const usePortalContext: () => PortalContextValue;
+export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
+export { usePortalContext };

package/out/portal/PortalProvider.luau

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local createStrictContext = _core.createStrictContext
+local React = _core.React
+local DEFAULT_DISPLAY_ORDER_BASE = TS.import(script, script.Parent.Parent, "internals", "constants").DEFAULT_DISPLAY_ORDER_BASE
+local _binding = createStrictContext("PortalProvider")
+local PortalContextProvider = _binding[1]
+local usePortalContext = _binding[2]
+local function PortalProvider(props)
+	local _condition = props.displayOrderBase
+	if _condition == nil then
+		_condition = DEFAULT_DISPLAY_ORDER_BASE
+	end
+	local displayOrderBase = _condition
+	local contextValue = React.useMemo(function()
+		return {
+			container = props.container,
+			displayOrderBase = displayOrderBase,
+		}
+	end, { displayOrderBase, props.container })
+	return React.createElement(PortalContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	PortalProvider = PortalProvider,
+	usePortalContext = usePortalContext,
+}

package/out/portal/types.d.ts

@@ -0,0 +1,14 @@
+import type React from "@rbxts/react";
+export type PortalContextValue = {
+    container: BasePlayerGui;
+    displayOrderBase: number;
+};
+export type PortalProviderProps = {
+    container: BasePlayerGui;
+    displayOrderBase?: number;
+    children?: React.ReactNode;
+};
+export type PortalProps = {
+    children?: React.ReactNode;
+    container?: Instance;
+};

package/out/portal/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/presence/Presence.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PresenceProps } from "./types";
+export declare function Presence(props: PresenceProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;

package/out/presence/Presence.luau

@@ -0,0 +1,88 @@
+-- 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 DEFAULT_PRESENCE_EXIT_FALLBACK_MS = TS.import(script, script.Parent.Parent, "internals", "constants").DEFAULT_PRESENCE_EXIT_FALLBACK_MS
+local function Presence(props)
+	local mounted, setMounted = React.useState(props.present)
+	local isPresent, setIsPresent = React.useState(props.present)
+	local mountedRef = React.useRef(mounted)
+	local fallbackTaskRef = React.useRef()
+	local onExitCompleteRef = React.useRef(props.onExitComplete)
+	React.useEffect(function()
+		onExitCompleteRef.current = props.onExitComplete
+	end, { props.onExitComplete })
+	React.useEffect(function()
+		mountedRef.current = mounted
+	end, { mounted })
+	local completeExit = React.useCallback(function()
+		if not mountedRef.current then
+			return nil
+		end
+		local fallbackTask = fallbackTaskRef.current
+		if fallbackTask then
+			task.cancel(fallbackTask)
+			fallbackTaskRef.current = nil
+		end
+		mountedRef.current = false
+		setMounted(false)
+		local _result = onExitCompleteRef.current
+		if _result ~= nil then
+			_result()
+		end
+	end, {})
+	React.useEffect(function()
+		if props.present then
+			local fallbackTask = fallbackTaskRef.current
+			if fallbackTask then
+				task.cancel(fallbackTask)
+				fallbackTaskRef.current = nil
+			end
+			if not mountedRef.current then
+				mountedRef.current = true
+				setMounted(true)
+			end
+			setIsPresent(true)
+			return nil
+		end
+		if not mountedRef.current then
+			return nil
+		end
+		setIsPresent(false)
+		local fallbackTask = fallbackTaskRef.current
+		if fallbackTask then
+			task.cancel(fallbackTask)
+			fallbackTaskRef.current = nil
+		end
+		local _condition = props.exitFallbackMs
+		if _condition == nil then
+			_condition = DEFAULT_PRESENCE_EXIT_FALLBACK_MS
+		end
+		local timeoutMs = _condition
+		fallbackTaskRef.current = task.delay(timeoutMs / 1000, function()
+			completeExit()
+		end)
+	end, { completeExit, props.exitFallbackMs, props.present })
+	React.useEffect(function()
+		return function()
+			local fallbackTask = fallbackTaskRef.current
+			if fallbackTask then
+				task.cancel(fallbackTask)
+				fallbackTaskRef.current = nil
+			end
+		end
+	end, {})
+	if not mounted then
+		return nil
+	end
+	local render = props.render or props.children
+	if not render then
+		return nil
+	end
+	return render({
+		isPresent = isPresent,
+		onExitComplete = completeExit,
+	})
+end
+return {
+	Presence = Presence,
+}

package/out/presence/types.d.ts

@@ -0,0 +1,13 @@
+import type React from "@rbxts/react";
+export type PresenceRenderState = {
+    isPresent: boolean;
+    onExitComplete: () => void;
+};
+export type PresenceRender = (state: PresenceRenderState) => React.ReactElement | undefined;
+export type PresenceProps = {
+    present: boolean;
+    exitFallbackMs?: number;
+    onExitComplete?: () => void;
+    children?: PresenceRender;
+    render?: PresenceRender;
+};

package/out/presence/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/layer",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/src/dismissable/DismissableLayer.tsx

@@ -0,0 +1,118 @@
+import { React } from "@lattice-ui/core";
+import { DEFAULT_LAYER_IGNORE_GUI_INSET } from "../internals/constants";
+import { Portal } from "../portal/Portal";
+import { usePortalContext } from "../portal/PortalProvider";
+import { isOutsidePointerEvent } from "./events";
+import { registerLayer, unregisterLayer } from "./layerStack";
+import type { DismissableLayerProps, LayerInteractEvent } from "./types";
+
+function useLatest<T>(value: T) {
+  const ref = React.useRef(value);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
+export function DismissableLayer(props: DismissableLayerProps) {
+  const enabled = props.enabled ?? true;
+  const shouldBlockOutsidePointer = props.modal === true || props.disableOutsidePointerEvents === true;
+  const layerIgnoresGuiInset = DEFAULT_LAYER_IGNORE_GUI_INSET;
+
+  const portalContext = usePortalContext();
+  const contentRootRef = React.useRef<Frame>();
+  const [stackOrder, setStackOrder] = React.useState(0);
+
+  const enabledRef = useLatest(enabled);
+  const onDismissRef = useLatest(props.onDismiss);
+  const onPointerDownOutsideRef = useLatest(props.onPointerDownOutside);
+  const onInteractOutsideRef = useLatest(props.onInteractOutside);
+  const onEscapeKeyDownRef = useLatest(props.onEscapeKeyDown);
+
+  const callPointerDownOutside = React.useCallback((event: LayerInteractEvent) => {
+    onPointerDownOutsideRef.current?.(event);
+  }, []);
+
+  const callInteractOutside = React.useCallback((event: LayerInteractEvent) => {
+    onInteractOutsideRef.current?.(event);
+  }, []);
+
+  const callEscape = React.useCallback((event: LayerInteractEvent) => {
+    onEscapeKeyDownRef.current?.(event);
+  }, []);
+
+  const callDismiss = React.useCallback(() => {
+    onDismissRef.current?.();
+  }, []);
+
+  React.useEffect(() => {
+    const registration = registerLayer({
+      getEnabled: () => enabledRef.current,
+      isPointerOutside: (inputObject) => {
+        const contentRoot = contentRootRef.current;
+        if (!contentRoot) {
+          return false;
+        }
+        return isOutsidePointerEvent(inputObject, portalContext.container, contentRoot, {
+          layerIgnoresGuiInset,
+        });
+      },
+      onPointerDownOutside: callPointerDownOutside,
+      onInteractOutside: callInteractOutside,
+      onEscapeKeyDown: callEscape,
+      onDismiss: callDismiss,
+    });
+
+    setStackOrder(registration.mountOrder);
+
+    return () => {
+      unregisterLayer(registration.id);
+    };
+  }, [
+    callDismiss,
+    callEscape,
+    callInteractOutside,
+    callPointerDownOutside,
+    enabledRef,
+    layerIgnoresGuiInset,
+    portalContext.container,
+  ]);
+
+  return (
+    <Portal>
+      <screengui
+        key={`Layer_${stackOrder}`}
+        DisplayOrder={portalContext.displayOrderBase + stackOrder}
+        IgnoreGuiInset={layerIgnoresGuiInset}
+        ResetOnSpawn={false}
+        ZIndexBehavior={Enum.ZIndexBehavior.Sibling}
+      >
+        {shouldBlockOutsidePointer ? (
+          <textbutton
+            Active={true}
+            AutoButtonColor={false}
+            BackgroundTransparency={1}
+            BorderSizePixel={0}
+            Modal={true}
+            Position={UDim2.fromScale(0, 0)}
+            Selectable={false}
+            Size={UDim2.fromScale(1, 1)}
+            Text=""
+            TextTransparency={1}
+            ZIndex={0}
+          />
+        ) : undefined}
+        <frame
+          BackgroundTransparency={1}
+          BorderSizePixel={0}
+          Position={UDim2.fromScale(0, 0)}
+          Size={UDim2.fromScale(1, 1)}
+          ref={contentRootRef}
+          ZIndex={1}
+        >
+          {props.children}
+        </frame>
+      </screengui>
+    </Portal>
+  );
+}

package/src/dismissable/events.ts

@@ -0,0 +1,78 @@
+import { getGuiInsetTopLeft } from "../internals/env";
+import type { LayerInteractEvent } from "./types";
+
+type OutsidePointerOptions = {
+  layerIgnoresGuiInset: boolean;
+};
+
+export function isPointerInput(inputObject: InputObject) {
+  return (
+    inputObject.UserInputType === Enum.UserInputType.MouseButton1 ||
+    inputObject.UserInputType === Enum.UserInputType.Touch
+  );
+}
+
+export function toLayerInteractEvent(originalEvent: InputObject): LayerInteractEvent {
+  const event: LayerInteractEvent = {
+    originalEvent,
+    defaultPrevented: false,
+    preventDefault: () => {
+      event.defaultPrevented = true;
+    },
+  };
+  return event;
+}
+
+function addUniqueSample(samples: Array<Vector2>, sampleKeys: Record<string, true>, x: number, y: number) {
+  const roundedX = math.round(x);
+  const roundedY = math.round(y);
+  const key = `${roundedX}:${roundedY}`;
+  if (sampleKeys[key]) {
+    return;
+  }
+
+  sampleKeys[key] = true;
+  samples.push(new Vector2(roundedX, roundedY));
+}
+
+function getPointerSamples(pointerPosition: Vector2, options: OutsidePointerOptions) {
+  const insetTopLeft = getGuiInsetTopLeft();
+
+  const samples = new Array<Vector2>();
+  const sampleKeys: Record<string, true> = {};
+
+  addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y);
+  addUniqueSample(samples, sampleKeys, pointerPosition.X + insetTopLeft.X, pointerPosition.Y + insetTopLeft.Y);
+  addUniqueSample(samples, sampleKeys, pointerPosition.X - insetTopLeft.X, pointerPosition.Y - insetTopLeft.Y);
+
+  if (options.layerIgnoresGuiInset) {
+    addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y + insetTopLeft.Y);
+    addUniqueSample(samples, sampleKeys, pointerPosition.X, pointerPosition.Y - insetTopLeft.Y);
+    addUniqueSample(samples, sampleKeys, pointerPosition.X + insetTopLeft.X, pointerPosition.Y);
+    addUniqueSample(samples, sampleKeys, pointerPosition.X - insetTopLeft.X, pointerPosition.Y);
+  }
+
+  return samples;
+}
+
+export function isOutsidePointerEvent(
+  inputObject: InputObject,
+  container: BasePlayerGui,
+  contentRoot: GuiObject,
+  options: OutsidePointerOptions,
+) {
+  const rawPointerPosition = inputObject.Position;
+  const pointerPosition = new Vector2(rawPointerPosition.X, rawPointerPosition.Y);
+  const pointerSamples = getPointerSamples(pointerPosition, options);
+
+  for (const sample of pointerSamples) {
+    const hitGuiObjects = container.GetGuiObjectsAtPosition(sample.X, sample.Y);
+    for (const hitObject of hitGuiObjects) {
+      if (hitObject.IsDescendantOf(contentRoot)) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}

package/src/dismissable/layerStack.ts

@@ -0,0 +1,147 @@
+import { GuiService, UserInputService } from "../internals/env";
+import { isPointerInput, toLayerInteractEvent } from "./events";
+import type { LayerInteractEvent } from "./types";
+
+type LayerEntry = {
+  id: number;
+  mountOrder: number;
+  getEnabled: () => boolean;
+  isPointerOutside: (inputObject: InputObject) => boolean;
+  onPointerDownOutside?: (event: LayerInteractEvent) => void;
+  onInteractOutside?: (event: LayerInteractEvent) => void;
+  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+  onDismiss?: () => void;
+};
+
+type RegisterLayerParams = Omit<LayerEntry, "id" | "mountOrder">;
+
+export type LayerRegistration = {
+  id: number;
+  mountOrder: number;
+};
+
+const layerEntries = new Array<LayerEntry>();
+let nextLayerId = 0;
+let nextMountOrder = 0;
+let inputConnection: RBXScriptConnection | undefined;
+
+function getTopMostEnabledLayer() {
+  for (let index = layerEntries.size() - 1; index >= 0; index--) {
+    const entry = layerEntries[index];
+    if (entry.getEnabled()) {
+      return entry;
+    }
+  }
+  return undefined;
+}
+
+function handleDismissEvent(entry: LayerEntry, event: LayerInteractEvent) {
+  if (!event.defaultPrevented) {
+    entry.onDismiss?.();
+  }
+}
+
+function shouldIgnoreEscapeDismiss() {
+  const focusedTextBox = UserInputService.GetFocusedTextBox();
+  if (focusedTextBox) {
+    return true;
+  }
+
+  const selectedObject = GuiService.SelectedObject;
+  if (selectedObject && selectedObject.IsA("TextBox")) {
+    return true;
+  }
+
+  return false;
+}
+
+function handleInputBegan(inputObject: InputObject, gameProcessedEvent: boolean) {
+  if (gameProcessedEvent) {
+    return;
+  }
+
+  const topLayer = getTopMostEnabledLayer();
+  if (!topLayer) {
+    return;
+  }
+
+  if (inputObject.KeyCode === Enum.KeyCode.Escape) {
+    if (shouldIgnoreEscapeDismiss()) {
+      return;
+    }
+
+    const escapeEvent = toLayerInteractEvent(inputObject);
+    topLayer.onEscapeKeyDown?.(escapeEvent);
+    handleDismissEvent(topLayer, escapeEvent);
+    return;
+  }
+
+  if (!isPointerInput(inputObject)) {
+    return;
+  }
+
+  if (!topLayer.isPointerOutside(inputObject)) {
+    return;
+  }
+
+  const outsideEvent = toLayerInteractEvent(inputObject);
+  topLayer.onPointerDownOutside?.(outsideEvent);
+  topLayer.onInteractOutside?.(outsideEvent);
+  handleDismissEvent(topLayer, outsideEvent);
+}
+
+function startInputListener() {
+  if (inputConnection) {
+    return;
+  }
+
+  inputConnection = UserInputService.InputBegan.Connect((inputObject, gameProcessedEvent) => {
+    handleInputBegan(inputObject, gameProcessedEvent);
+  });
+}
+
+function stopInputListener() {
+  if (!inputConnection) {
+    return;
+  }
+
+  inputConnection.Disconnect();
+  inputConnection = undefined;
+}
+
+function syncInputListener() {
+  if (layerEntries.size() > 0) {
+    startInputListener();
+  } else {
+    stopInputListener();
+  }
+}
+
+export function registerLayer(params: RegisterLayerParams): LayerRegistration {
+  nextLayerId += 1;
+  nextMountOrder += 1;
+
+  const entry: LayerEntry = {
+    id: nextLayerId,
+    mountOrder: nextMountOrder,
+    ...params,
+  };
+
+  layerEntries.push(entry);
+  syncInputListener();
+
+  return {
+    id: entry.id,
+    mountOrder: entry.mountOrder,
+  };
+}
+
+export function unregisterLayer(layerId: number) {
+  const layerIndex = layerEntries.findIndex((entry) => entry.id === layerId);
+  if (layerIndex === -1) {
+    return;
+  }
+
+  layerEntries.remove(layerIndex);
+  syncInputListener();
+}

package/src/dismissable/types.ts

@@ -0,0 +1,18 @@
+import type React from "@rbxts/react";
+
+export type LayerInteractEvent = {
+  originalEvent: InputObject;
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+};
+
+export type DismissableLayerProps = {
+  children?: React.ReactNode;
+  enabled?: boolean;
+  modal?: boolean;
+  disableOutsidePointerEvents?: boolean;
+  onPointerDownOutside?: (event: LayerInteractEvent) => void;
+  onInteractOutside?: (event: LayerInteractEvent) => void;
+  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+  onDismiss?: () => void;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./dismissable/DismissableLayer";
+export * from "./dismissable/types";
+export * from "./portal/Portal";
+export * from "./portal/PortalProvider";
+export * from "./presence/Presence";

package/src/internals/constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_DISPLAY_ORDER_BASE = 1000;
+export const DEFAULT_PRESENCE_EXIT_FALLBACK_MS = 500;
+export const DEFAULT_LAYER_IGNORE_GUI_INSET = true;

package/src/internals/env.ts

@@ -0,0 +1,7 @@
+export const UserInputService = game.GetService("UserInputService");
+export const GuiService = game.GetService("GuiService");
+
+export function getGuiInsetTopLeft() {
+  const [topLeftInset] = GuiService.GetGuiInset();
+  return topLeftInset;
+}

package/src/portal/Portal.tsx

@@ -0,0 +1,9 @@
+import { ReactRoblox } from "@lattice-ui/core";
+import { usePortalContext } from "./PortalProvider";
+import type { PortalProps } from "./types";
+
+export function Portal(props: PortalProps) {
+  const contextValue = usePortalContext();
+  const target = props.container ?? contextValue.container;
+  return ReactRoblox.createPortal(props.children, target);
+}

package/src/portal/PortalProvider.tsx

@@ -0,0 +1,20 @@
+import { createStrictContext, React } from "@lattice-ui/core";
+import { DEFAULT_DISPLAY_ORDER_BASE } from "../internals/constants";
+import type { PortalContextValue, PortalProviderProps } from "./types";
+
+const [PortalContextProvider, usePortalContext] = createStrictContext<PortalContextValue>("PortalProvider");
+
+export function PortalProvider(props: PortalProviderProps) {
+  const displayOrderBase = props.displayOrderBase ?? DEFAULT_DISPLAY_ORDER_BASE;
+  const contextValue = React.useMemo(
+    () => ({
+      container: props.container,
+      displayOrderBase,
+    }),
+    [displayOrderBase, props.container],
+  );
+
+  return <PortalContextProvider value={contextValue}>{props.children}</PortalContextProvider>;
+}
+
+export { usePortalContext };

package/src/portal/types.ts

@@ -0,0 +1,17 @@
+import type React from "@rbxts/react";
+
+export type PortalContextValue = {
+  container: BasePlayerGui;
+  displayOrderBase: number;
+};
+
+export type PortalProviderProps = {
+  container: BasePlayerGui;
+  displayOrderBase?: number;
+  children?: React.ReactNode;
+};
+
+export type PortalProps = {
+  children?: React.ReactNode;
+  container?: Instance;
+};

package/src/presence/Presence.tsx

@@ -0,0 +1,93 @@
+import { React } from "@lattice-ui/core";
+import { DEFAULT_PRESENCE_EXIT_FALLBACK_MS } from "../internals/constants";
+import type { PresenceProps } from "./types";
+
+export function Presence(props: PresenceProps) {
+  const [mounted, setMounted] = React.useState(props.present);
+  const [isPresent, setIsPresent] = React.useState(props.present);
+  const mountedRef = React.useRef(mounted);
+  const fallbackTaskRef = React.useRef<thread>();
+  const onExitCompleteRef = React.useRef(props.onExitComplete);
+
+  React.useEffect(() => {
+    onExitCompleteRef.current = props.onExitComplete;
+  }, [props.onExitComplete]);
+
+  React.useEffect(() => {
+    mountedRef.current = mounted;
+  }, [mounted]);
+
+  const completeExit = React.useCallback(() => {
+    if (!mountedRef.current) {
+      return;
+    }
+
+    const fallbackTask = fallbackTaskRef.current;
+    if (fallbackTask) {
+      task.cancel(fallbackTask);
+      fallbackTaskRef.current = undefined;
+    }
+
+    mountedRef.current = false;
+    setMounted(false);
+    onExitCompleteRef.current?.();
+  }, []);
+
+  React.useEffect(() => {
+    if (props.present) {
+      const fallbackTask = fallbackTaskRef.current;
+      if (fallbackTask) {
+        task.cancel(fallbackTask);
+        fallbackTaskRef.current = undefined;
+      }
+
+      if (!mountedRef.current) {
+        mountedRef.current = true;
+        setMounted(true);
+      }
+      setIsPresent(true);
+      return;
+    }
+
+    if (!mountedRef.current) {
+      return;
+    }
+
+    setIsPresent(false);
+
+    const fallbackTask = fallbackTaskRef.current;
+    if (fallbackTask) {
+      task.cancel(fallbackTask);
+      fallbackTaskRef.current = undefined;
+    }
+
+    const timeoutMs = props.exitFallbackMs ?? DEFAULT_PRESENCE_EXIT_FALLBACK_MS;
+    fallbackTaskRef.current = task.delay(timeoutMs / 1000, () => {
+      completeExit();
+    });
+  }, [completeExit, props.exitFallbackMs, props.present]);
+
+  React.useEffect(() => {
+    return () => {
+      const fallbackTask = fallbackTaskRef.current;
+      if (fallbackTask) {
+        task.cancel(fallbackTask);
+        fallbackTaskRef.current = undefined;
+      }
+    };
+  }, []);
+
+  if (!mounted) {
+    return undefined;
+  }
+
+  const render = props.render ?? props.children;
+  if (!render) {
+    return undefined;
+  }
+
+  return render({
+    isPresent,
+    onExitComplete: completeExit,
+  });
+}

package/src/presence/types.ts

@@ -0,0 +1,16 @@
+import type React from "@rbxts/react";
+
+export type PresenceRenderState = {
+  isPresent: boolean;
+  onExitComplete: () => void;
+};
+
+export type PresenceRender = (state: PresenceRenderState) => React.ReactElement | undefined;
+
+export type PresenceProps = {
+  present: boolean;
+  exitFallbackMs?: number;
+  onExitComplete?: () => void;
+  children?: PresenceRender;
+  render?: PresenceRender;
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}