@lattice-ui/popover 0.3.2 → 0.4.1

package/out/Popover/PopoverClose.luau

@@ -15,18 +15,22 @@ local function PopoverClose(props)
 			error("[PopoverClose] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
+			Active = true,
 			Event = {
 				Activated = handleActivated,
 			},
+			Selectable = false,
 		}, child)
 	end
 	return React.createElement("textbutton", {
+		Active = true,
 		AutoButtonColor = false,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Event = {
 			Activated = handleActivated,
 		},
+		Selectable = false,
 		Size = UDim2.fromOffset(110, 34),
 		Text = "Close",
 		TextColor3 = Color3.fromRGB(240, 244, 250),

package/out/Popover/PopoverContent.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
+local FocusScope = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).FocusScope
 local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
 local DismissableLayer = _layer.DismissableLayer
 local Presence = _layer.Presence
@@ -28,33 +29,18 @@ local function PopoverContentImpl(props)
 	local setContentRef = React.useCallback(function(instance)
 		popoverContext.contentRef.current = toGuiObject(instance)
 	end, { popoverContext.contentRef })
-	if props.asChild then
+	local contentNode = if props.asChild then ((function()
 		local child = props.children
 		if not React.isValidElement(child) then
 			error("[PopoverContent] `asChild` requires a child element.")
 		end
-		return React.createElement(DismissableLayer, {
-			enabled = props.enabled,
-			modal = popoverContext.modal,
-			onDismiss = props.onDismiss,
-			onEscapeKeyDown = props.onEscapeKeyDown,
-			onInteractOutside = props.onInteractOutside,
-			onPointerDownOutside = props.onPointerDownOutside,
-		}, React.createElement(Slot, {
+		return React.createElement(Slot, {
 			AnchorPoint = popper.anchorPoint,
 			Position = popper.position,
 			Visible = props.visible,
 			ref = setContentRef,
-		}, child))
-	end
-	return React.createElement(DismissableLayer, {
-		enabled = props.enabled,
-		modal = popoverContext.modal,
-		onDismiss = props.onDismiss,
-		onEscapeKeyDown = props.onEscapeKeyDown,
-		onInteractOutside = props.onInteractOutside,
-		onPointerDownOutside = props.onPointerDownOutside,
-	}, React.createElement("frame", {
+		}, child)
+	end)()) else (React.createElement("frame", {
 		AnchorPoint = popper.anchorPoint,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
@@ -63,6 +49,17 @@ local function PopoverContentImpl(props)
 		Visible = props.visible,
 		ref = setContentRef,
 	}, props.children))
+	return React.createElement(DismissableLayer, {
+		enabled = props.enabled,
+		modal = popoverContext.modal,
+		onDismiss = props.onDismiss,
+		onInteractOutside = props.onInteractOutside,
+		onPointerDownOutside = props.onPointerDownOutside,
+	}, React.createElement(FocusScope, {
+		active = props.enabled,
+		restoreFocus = true,
+		trapped = popoverContext.modal,
+	}, contentNode))
 end
 local function PopoverContent(props)
 	local popoverContext = usePopoverContext()
@@ -80,7 +77,6 @@ local function PopoverContent(props)
 			enabled = open,
 			offset = props.offset,
 			onDismiss = handleDismiss,
-			onEscapeKeyDown = props.onEscapeKeyDown,
 			onInteractOutside = props.onInteractOutside,
 			onPointerDownOutside = props.onPointerDownOutside,
 			padding = props.padding,
@@ -97,7 +93,6 @@ local function PopoverContent(props)
 				enabled = state.isPresent,
 				offset = props.offset,
 				onDismiss = handleDismiss,
-				onEscapeKeyDown = props.onEscapeKeyDown,
 				onInteractOutside = props.onInteractOutside,
 				onPointerDownOutside = props.onPointerDownOutside,
 				padding = props.padding,

package/out/Popover/PopoverTrigger.luau

@@ -1,8 +1,10 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local focusGuiObject = _core.focusGuiObject
 local React = _core.React
 local Slot = _core.Slot
+local useFocusNode = _core.useFocusNode
 local usePopoverContext = TS.import(script, script.Parent, "context").usePopoverContext
 local function toGuiObject(instance)
 	if not instance or not instance:IsA("GuiObject") then
@@ -12,24 +14,35 @@ local function toGuiObject(instance)
 end
 local function PopoverTrigger(props)
 	local popoverContext = usePopoverContext()
+	local triggerRef = popoverContext.triggerRef
 	local setTriggerRef = React.useCallback(function(instance)
-		popoverContext.triggerRef.current = toGuiObject(instance)
-	end, { popoverContext.triggerRef })
+		triggerRef.current = toGuiObject(instance)
+	end, { triggerRef })
+	useFocusNode({
+		ref = triggerRef,
+		disabled = props.disabled == true,
+		syncToRoblox = false,
+	})
 	local handleActivated = React.useCallback(function()
 		if props.disabled then
 			return nil
 		end
+		if not popoverContext.open then
+			focusGuiObject(triggerRef.current)
+		end
 		popoverContext.setOpen(not popoverContext.open)
-	end, { popoverContext.open, popoverContext.setOpen, props.disabled })
+	end, { popoverContext.open, popoverContext.setOpen, props.disabled, triggerRef })
 	if props.asChild then
 		local child = props.children
 		if not child then
 			error("[PopoverTrigger] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
+			Active = props.disabled ~= true,
 			Event = {
 				Activated = handleActivated,
 			},
+			Selectable = false,
 			ref = setTriggerRef,
 		}, child)
 	end
@@ -41,7 +54,7 @@ local function PopoverTrigger(props)
 		Event = {
 			Activated = handleActivated,
 		},
-		Selectable = props.disabled ~= true,
+		Selectable = false,
 		Size = UDim2.fromOffset(150, 38),
 		Text = "Toggle Popover",
 		TextColor3 = Color3.fromRGB(240, 244, 250),

package/out/Popover/types.d.ts

@@ -33,7 +33,6 @@ export type PopoverContentProps = {
     placement?: PopperPlacement;
     offset?: Vector2;
     padding?: number;
-    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
     onPointerDownOutside?: (event: LayerInteractEvent) => void;
     onInteractOutside?: (event: LayerInteractEvent) => void;
     children?: React.ReactNode;

package/out/index.d.ts

@@ -12,5 +12,5 @@ export declare const Popover: {
     readonly Anchor: typeof PopoverAnchor;
     readonly Close: typeof PopoverClose;
 };
-export { PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger };
 export type { PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverPortalProps, PopoverProps, PopoverTriggerProps, } from "./Popover/types";
+export { PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger };

package/package.json

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