@lattice-ui/select 0.3.2 → 0.4.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/select@0.4.1 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\select
+> rbxtsc -p tsconfig.json
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/select@0.4.1 typecheck C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\select
+> tsc -p tsconfig.typecheck.json
+

package/README.md

@@ -19,5 +19,5 @@ Headless single-select primitives built for Roblox UI.
 
 - Single value only in this release.
 - Supports controlled/uncontrolled `value` and `open`.
-- Content uses dismissable-layer semantics (outside pointer / escape dismiss).
-- Item navigation uses roving focus and includes typeahead matching.
+- Content uses dismissable-layer semantics (outside pointer dismiss).
+- No built-in Roblox native selection or directional keyboard navigation.

package/out/Select/SelectContent.luau

@@ -3,112 +3,24 @@ 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 RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
+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
 local usePopper = TS.import(script, TS.getModule(script, "@lattice-ui", "popper").out).usePopper
 local useSelectContext = TS.import(script, script.Parent, "context").useSelectContext
-local GuiService = game:GetService("GuiService")
-local UserInputService = game:GetService("UserInputService")
-local digitKeyMap = {
-	Zero = "0",
-	One = "1",
-	Two = "2",
-	Three = "3",
-	Four = "4",
-	Five = "5",
-	Six = "6",
-	Seven = "7",
-	Eight = "8",
-	Nine = "9",
-}
+local TweenService = game:GetService("TweenService")
+local OPEN_TWEEN_INFO = TweenInfo.new(0.12, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
+local CLOSE_TWEEN_INFO = TweenInfo.new(0.09, Enum.EasingStyle.Quad, Enum.EasingDirection.In)
+local CONTENT_OPEN_Y_OFFSET = 6
 local function toGuiObject(instance)
 	if not instance or not instance:IsA("GuiObject") then
 		return nil
 	end
 	return instance
 end
-local function toSearchCharacter(keyCode)
-	if keyCode == Enum.KeyCode.Space then
-		return " "
-	end
-	local digitCharacter = digitKeyMap[keyCode.Name]
-	if digitCharacter ~= nil then
-		return digitCharacter
-	end
-	if #keyCode.Name == 1 then
-		return string.lower(keyCode.Name)
-	end
-	return nil
-end
-local function startsWithIgnoreCase(value, query)
-	if #query == 0 then
-		return false
-	end
-	local normalizedValue = string.lower(value)
-	return string.sub(normalizedValue, 1, #query) == query
-end
-local function findCurrentIndex(items, selectedObject)
-	if not selectedObject then
-		return -1
-	end
-	-- ▼ ReadonlyArray.findIndex ▼
-	local _callback = function(item)
-		local node = item.getNode()
-		if not node then
-			return false
-		end
-		return selectedObject == node or selectedObject:IsDescendantOf(node)
-	end
-	local _result = -1
-	for _i, _v in items do
-		if _callback(_v, _i - 1, items) == true then
-			_result = _i - 1
-			break
-		end
-	end
-	-- ▲ ReadonlyArray.findIndex ▲
-	return _result
-end
-local function findTypeaheadMatch(items, query, startIndex)
-	local itemCount = #items
-	if itemCount == 0 then
-		return -1
-	end
-	do
-		local attempts = 0
-		local _shouldIncrement = false
-		while true do
-			if _shouldIncrement then
-				attempts += 1
-			else
-				_shouldIncrement = true
-			end
-			if not (attempts < itemCount) then
-				break
-			end
-			local candidateIndex = (startIndex + attempts) % itemCount
-			local candidate = items[candidateIndex + 1]
-			if not candidate or candidate.getDisabled() then
-				continue
-			end
-			if startsWithIgnoreCase(candidate.getTextValue(), query) then
-				return candidateIndex
-			end
-		end
-	end
-	return -1
-end
-local function focusItem(item)
-	if not item then
-		return nil
-	end
-	local node = item.getNode()
-	if not node or not node.Selectable then
-		return nil
-	end
-	GuiService.SelectedObject = node
+local function withVerticalOffset(position, offset)
+	return UDim2.new(position.X.Scale, position.X.Offset, position.Y.Scale, position.Y.Offset + offset)
 end
 local function SelectContentImpl(props)
 	local selectContext = useSelectContext()
@@ -123,69 +35,68 @@ local function SelectContentImpl(props)
 	local setContentRef = React.useCallback(function(instance)
 		selectContext.contentRef.current = toGuiObject(instance)
 	end, { selectContext.contentRef })
-	local searchRef = React.useRef("")
-	local searchTimestampRef = React.useRef(0)
-	React.useEffect(function()
-		if not props.enabled then
-			return nil
+	local positionTweenRef = React.useRef()
+	local tweenCompletedConnectionRef = React.useRef()
+	local previousVisibleRef = React.useRef(props.visible)
+	local previousExitingRef = React.useRef(props.exiting)
+	local clearTween = React.useCallback(function()
+		local tween = positionTweenRef.current
+		if tween then
+			tween:Cancel()
+			positionTweenRef.current = nil
 		end
-		local orderedItems = selectContext.getOrderedItems()
-		-- ▼ ReadonlyArray.find ▼
-		local _callback = function(item)
-			return item.value == selectContext.value and not item.getDisabled()
+		local completedConnection = tweenCompletedConnectionRef.current
+		if completedConnection then
+			completedConnection:Disconnect()
+			tweenCompletedConnectionRef.current = nil
 		end
-		local _result
-		for _i, _v in orderedItems do
-			if _callback(_v, _i - 1, orderedItems) == true then
-				_result = _v
-				break
-			end
+	end, {})
+	React.useEffect(function()
+		return function()
+			clearTween()
 		end
-		-- ▲ ReadonlyArray.find ▲
-		local selectedItem = _result
-		focusItem(selectedItem)
-	end, { props.enabled, selectContext, selectContext.value })
+	end, { clearTween })
 	React.useEffect(function()
-		if not props.enabled then
+		local contentNode = selectContext.contentRef.current
+		if not contentNode then
 			return nil
 		end
-		searchRef.current = ""
-		searchTimestampRef.current = 0
-		local connection = UserInputService.InputBegan:Connect(function(inputObject, gameProcessedEvent)
-			if gameProcessedEvent then
-				return nil
-			end
-			if inputObject.UserInputType ~= Enum.UserInputType.Keyboard then
+		local wasVisible = previousVisibleRef.current
+		local wasExiting = previousExitingRef.current
+		previousVisibleRef.current = props.visible
+		previousExitingRef.current = props.exiting
+		if props.exiting then
+			if wasExiting then
 				return nil
 			end
-			local contentNode = selectContext.contentRef.current
-			local selectedObject = GuiService.SelectedObject
-			if not contentNode or not selectedObject or not selectedObject:IsDescendantOf(contentNode) then
-				return nil
-			end
-			local searchCharacter = toSearchCharacter(inputObject.KeyCode)
-			if searchCharacter == nil then
-				return nil
-			end
-			local now = os.clock()
-			local shouldResetQuery = now - searchTimestampRef.current > 0.8
-			local nextQuery = if shouldResetQuery then searchCharacter else `{searchRef.current}{searchCharacter}`
-			searchRef.current = nextQuery
-			searchTimestampRef.current = now
-			local orderedItems = selectContext.getOrderedItems()
-			local currentIndex = findCurrentIndex(orderedItems, selectedObject)
-			local startIndex = if currentIndex >= 0 then currentIndex + 1 else 0
-			local matchIndex = findTypeaheadMatch(orderedItems, string.lower(nextQuery), startIndex)
-			if matchIndex < 0 then
-				return nil
-			end
-			local matchedItem = orderedItems[matchIndex + 1]
-			focusItem(matchedItem)
-		end)
-		return function()
-			connection:Disconnect()
+			clearTween()
+			local tween = TweenService:Create(contentNode, CLOSE_TWEEN_INFO, {
+				Position = withVerticalOffset(popper.position, CONTENT_OPEN_Y_OFFSET),
+			})
+			positionTweenRef.current = tween
+			tweenCompletedConnectionRef.current = tween.Completed:Connect(function(playbackState)
+				if playbackState == Enum.PlaybackState.Completed then
+					local _result = props.onExitComplete
+					if _result ~= nil then
+						_result()
+					end
+				end
+			end)
+			tween:Play()
+			return nil
+		end
+		clearTween()
+		if props.visible and not wasVisible then
+			contentNode.Position = withVerticalOffset(popper.position, CONTENT_OPEN_Y_OFFSET)
+			local tween = TweenService:Create(contentNode, OPEN_TWEEN_INFO, {
+				Position = popper.position,
+			})
+			positionTweenRef.current = tween
+			tween:Play()
+			return nil
 		end
-	end, { props.enabled, selectContext })
+		contentNode.Position = popper.position
+	end, { clearTween, popper.position, props.exiting, props.onExitComplete, props.visible, selectContext.contentRef })
 	local contentNode = if props.asChild then ((function()
 		local child = props.children
 		if not React.isValidElement(child) then
@@ -194,7 +105,7 @@ local function SelectContentImpl(props)
 		return React.createElement(Slot, {
 			AnchorPoint = popper.anchorPoint,
 			Position = popper.position,
-			Visible = props.visible,
+			Visible = props.visible or props.exiting,
 			ref = setContentRef,
 		}, child)
 	end)()) else (React.createElement("frame", {
@@ -203,21 +114,19 @@ local function SelectContentImpl(props)
 		BorderSizePixel = 0,
 		Position = popper.position,
 		Size = UDim2.fromOffset(0, 0),
-		Visible = props.visible,
+		Visible = props.visible or props.exiting,
 		ref = setContentRef,
 	}, props.children))
 	return React.createElement(DismissableLayer, {
 		enabled = props.enabled,
 		modal = false,
 		onDismiss = props.onDismiss,
-		onEscapeKeyDown = props.onEscapeKeyDown,
 		onInteractOutside = props.onInteractOutside,
 		onPointerDownOutside = props.onPointerDownOutside,
-	}, React.createElement(RovingFocusGroup, {
+	}, React.createElement(FocusScope, {
 		active = props.enabled,
-		autoFocus = "first",
-		loop = selectContext.loop,
-		orientation = "vertical",
+		restoreFocus = true,
+		trapped = false,
 	}, contentNode))
 end
 local function SelectContent(props)
@@ -234,9 +143,9 @@ local function SelectContent(props)
 		return React.createElement(SelectContentImpl, {
 			asChild = props.asChild,
 			enabled = open,
+			exiting = false,
 			offset = props.offset,
 			onDismiss = handleDismiss,
-			onEscapeKeyDown = props.onEscapeKeyDown,
 			onInteractOutside = props.onInteractOutside,
 			onPointerDownOutside = props.onPointerDownOutside,
 			padding = props.padding,
@@ -245,15 +154,16 @@ local function SelectContent(props)
 		}, props.children)
 	end
 	return React.createElement(Presence, {
-		exitFallbackMs = 0,
+		exitFallbackMs = 180,
 		present = open,
 		render = function(state)
 			return React.createElement(SelectContentImpl, {
 				asChild = props.asChild,
 				enabled = state.isPresent,
+				exiting = not state.isPresent,
 				offset = props.offset,
 				onDismiss = handleDismiss,
-				onEscapeKeyDown = props.onEscapeKeyDown,
+				onExitComplete = state.onExitComplete,
 				onInteractOutside = props.onInteractOutside,
 				onPointerDownOutside = props.onPointerDownOutside,
 				padding = props.padding,

package/out/Select/SelectItem.luau

@@ -3,19 +3,11 @@ 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 RovingFocusItem = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusItem
 local useSelectContext = TS.import(script, script.Parent, "context").useSelectContext
 local nextItemId = 0
 local nextItemOrder = 0
-local function toGuiObject(instance)
-	if not instance or not instance:IsA("GuiObject") then
-		return nil
-	end
-	return instance
-end
 local function SelectItem(props)
 	local selectContext = useSelectContext()
-	local itemRef = React.useRef()
 	local disabled = selectContext.disabled or props.disabled == true
 	local _condition = props.textValue
 	if _condition == nil then
@@ -45,9 +37,6 @@ local function SelectItem(props)
 			id = itemIdRef.current,
 			value = props.value,
 			order = itemOrderRef.current,
-			getNode = function()
-				return itemRef.current
-			end,
 			getDisabled = function()
 				return disabledRef.current
 			end,
@@ -56,9 +45,6 @@ local function SelectItem(props)
 			end,
 		})
 	end, { props.value, selectContext })
-	local setItemRef = React.useCallback(function(instance)
-		itemRef.current = toGuiObject(instance)
-	end, {})
 	local handleSelect = React.useCallback(function()
 		if disabled then
 			return nil
@@ -88,36 +74,28 @@ local function SelectItem(props)
 		if not child then
 			error("[SelectItem] `asChild` requires a child element.")
 		end
-		return React.createElement(RovingFocusItem, {
-			asChild = true,
-			disabled = disabled,
-		}, React.createElement(Slot, {
+		return React.createElement(Slot, {
 			Active = not disabled,
 			Event = eventHandlers,
-			Selectable = not disabled,
-			ref = setItemRef,
-		}, child))
+			Selectable = false,
+		}, child)
 	end
-	return React.createElement(RovingFocusItem, {
-		asChild = true,
-		disabled = disabled,
-	}, React.createElement("textbutton", {
+	return React.createElement("textbutton", {
 		Active = not disabled,
 		AutoButtonColor = false,
 		BackgroundColor3 = Color3.fromRGB(47, 53, 68),
 		BorderSizePixel = 0,
 		Event = eventHandlers,
-		Selectable = not disabled,
+		Selectable = false,
 		Size = UDim2.fromOffset(220, 32),
 		Text = textValue,
 		TextColor3 = if disabled then Color3.fromRGB(134, 141, 156) else Color3.fromRGB(234, 239, 247),
 		TextSize = 15,
 		TextXAlignment = Enum.TextXAlignment.Left,
-		ref = setItemRef,
 	}, React.createElement("uipadding", {
 		PaddingLeft = UDim.new(0, 10),
 		PaddingRight = UDim.new(0, 10),
-	}), props.children))
+	}), props.children)
 end
 return {
 	SelectItem = SelectItem,

package/out/Select/SelectRoot.luau

@@ -44,11 +44,6 @@ local function SelectRoot(props)
 	local setValueState = _binding_1[2]
 	local disabled = props.disabled == true
 	local required = props.required == true
-	local _condition_1 = props.loop
-	if _condition_1 == nil then
-		_condition_1 = true
-	end
-	local loop = _condition_1
 	local triggerRef = React.useRef()
 	local contentRef = React.useRef()
 	local itemEntriesRef = React.useRef({})
@@ -184,14 +179,12 @@ local function SelectRoot(props)
 			setValue = setValue,
 			disabled = disabled,
 			required = required,
-			loop = loop,
 			triggerRef = triggerRef,
 			contentRef = contentRef,
 			registerItem = registerItem,
-			getOrderedItems = resolveOrderedItems,
 			getItemText = getItemText,
 		}
-	end, { disabled, getItemText, loop, open, registerItem, required, resolveOrderedItems, setOpen, setValue, value })
+	end, { disabled, getItemText, open, registerItem, required, setOpen, setValue, value })
 	return React.createElement(SelectContextProvider, {
 		value = contextValue,
 	}, props.children)

package/out/Select/SelectTrigger.luau

@@ -13,9 +13,10 @@ end
 local function SelectTrigger(props)
 	local selectContext = useSelectContext()
 	local disabled = selectContext.disabled or props.disabled == true
+	local triggerRef = selectContext.triggerRef
 	local setTriggerRef = React.useCallback(function(instance)
-		selectContext.triggerRef.current = toGuiObject(instance)
-	end, { selectContext.triggerRef })
+		triggerRef.current = toGuiObject(instance)
+	end, { triggerRef })
 	local handleActivated = React.useCallback(function()
 		if disabled then
 			return nil
@@ -29,10 +30,6 @@ local function SelectTrigger(props)
 		local keyCode = inputObject.KeyCode
 		if keyCode == Enum.KeyCode.Return or keyCode == Enum.KeyCode.Space then
 			selectContext.setOpen(not selectContext.open)
-			return nil
-		end
-		if keyCode == Enum.KeyCode.Down or keyCode == Enum.KeyCode.Up then
-			selectContext.setOpen(true)
 		end
 	end, { disabled, selectContext })
 	local eventHandlers = React.useMemo(function()
@@ -49,7 +46,7 @@ local function SelectTrigger(props)
 		return React.createElement(Slot, {
 			Active = not disabled,
 			Event = eventHandlers,
-			Selectable = not disabled,
+			Selectable = false,
 			ref = setTriggerRef,
 		}, child)
 	end
@@ -59,7 +56,7 @@ local function SelectTrigger(props)
 		BackgroundColor3 = Color3.fromRGB(41, 48, 63),
 		BorderSizePixel = 0,
 		Event = eventHandlers,
-		Selectable = not disabled,
+		Selectable = false,
 		Size = UDim2.fromOffset(220, 36),
 		Text = "Select",
 		TextColor3 = if disabled then Color3.fromRGB(140, 148, 164) else Color3.fromRGB(235, 241, 248),

package/out/Select/types.d.ts

@@ -7,7 +7,6 @@ export type SelectItemRegistration = {
     id: number;
     value: string;
     order: number;
-    getNode: () => GuiObject | undefined;
     getDisabled: () => boolean;
     getTextValue: () => string;
 };
@@ -18,11 +17,9 @@ export type SelectContextValue = {
     setValue: SelectSetValue;
     disabled: boolean;
     required: boolean;
-    loop: boolean;
     triggerRef: React.MutableRefObject<GuiObject | undefined>;
     contentRef: React.MutableRefObject<GuiObject | undefined>;
     registerItem: (item: SelectItemRegistration) => () => void;
-    getOrderedItems: () => Array<SelectItemRegistration>;
     getItemText: (value: string) => string | undefined;
 };
 export type SelectProps = {
@@ -34,7 +31,6 @@ export type SelectProps = {
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     required?: boolean;
-    loop?: boolean;
     children?: React.ReactNode;
 };
 export type SelectTriggerProps = {
@@ -58,7 +54,6 @@ export type SelectContentProps = {
     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

@@ -18,5 +18,5 @@ export declare const Select: {
     readonly Label: typeof SelectLabel;
     readonly Separator: typeof SelectSeparator;
 };
-export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, };
 export type { SelectContentProps, SelectContextValue, SelectGroupProps, SelectItemProps, SelectItemRegistration, SelectLabelProps, SelectPortalProps, SelectProps, SelectSeparatorProps, SelectSetOpen, SelectSetValue, SelectTriggerProps, SelectValueProps, } from "./Select/types";
+export { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, };

package/package.json

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

package/src/Select/SelectContent.tsx

@@ -1,35 +1,27 @@
 import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusGroup } from "@lattice-ui/focus";
+import { FocusScope } from "@lattice-ui/focus";
 import { DismissableLayer, Presence } from "@lattice-ui/layer";
 import { usePopper } from "@lattice-ui/popper";
 import { useSelectContext } from "./context";
-import type { SelectContentProps, SelectItemRegistration } from "./types";
+import type { SelectContentProps } from "./types";
 
-const GuiService = game.GetService("GuiService");
-const UserInputService = game.GetService("UserInputService");
+const TweenService = game.GetService("TweenService");
 
-const digitKeyMap: Record<string, string> = {
-  Zero: "0",
-  One: "1",
-  Two: "2",
-  Three: "3",
-  Four: "4",
-  Five: "5",
-  Six: "6",
-  Seven: "7",
-  Eight: "8",
-  Nine: "9",
-};
+const OPEN_TWEEN_INFO = new TweenInfo(0.12, Enum.EasingStyle.Quad, Enum.EasingDirection.Out);
+const CLOSE_TWEEN_INFO = new TweenInfo(0.09, Enum.EasingStyle.Quad, Enum.EasingDirection.In);
+const CONTENT_OPEN_Y_OFFSET = 6;
 
 type SelectContentImplProps = {
   enabled: boolean;
   visible: boolean;
+  exiting: boolean;
   onDismiss: () => void;
+  onExitComplete?: () => void;
   asChild?: boolean;
   placement?: SelectContentProps["placement"];
   offset?: SelectContentProps["offset"];
   padding?: SelectContentProps["padding"];
-} & Pick<SelectContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+} & Pick<SelectContentProps, "children" | "onInteractOutside" | "onPointerDownOutside">;
 
 function toGuiObject(instance: Instance | undefined) {
   if (!instance || !instance.IsA("GuiObject")) {
@@ -39,79 +31,8 @@ function toGuiObject(instance: Instance | undefined) {
   return instance;
 }
 
-function toSearchCharacter(keyCode: Enum.KeyCode) {
-  if (keyCode === Enum.KeyCode.Space) {
-    return " ";
-  }
-
-  const digitCharacter = digitKeyMap[keyCode.Name];
-  if (digitCharacter !== undefined) {
-    return digitCharacter;
-  }
-
-  if (keyCode.Name.size() === 1) {
-    return string.lower(keyCode.Name);
-  }
-
-  return undefined;
-}
-
-function startsWithIgnoreCase(value: string, query: string) {
-  if (query.size() === 0) {
-    return false;
-  }
-
-  const normalizedValue = string.lower(value);
-  return string.sub(normalizedValue, 1, query.size()) === query;
-}
-
-function findCurrentIndex(items: Array<SelectItemRegistration>, selectedObject: GuiObject | undefined) {
-  if (!selectedObject) {
-    return -1;
-  }
-
-  return items.findIndex((item) => {
-    const node = item.getNode();
-    if (!node) {
-      return false;
-    }
-
-    return selectedObject === node || selectedObject.IsDescendantOf(node);
-  });
-}
-
-function findTypeaheadMatch(items: Array<SelectItemRegistration>, query: string, startIndex: number) {
-  const itemCount = items.size();
-  if (itemCount === 0) {
-    return -1;
-  }
-
-  for (let attempts = 0; attempts < itemCount; attempts++) {
-    const candidateIndex = (startIndex + attempts) % itemCount;
-    const candidate = items[candidateIndex];
-    if (!candidate || candidate.getDisabled()) {
-      continue;
-    }
-
-    if (startsWithIgnoreCase(candidate.getTextValue(), query)) {
-      return candidateIndex;
-    }
-  }
-
-  return -1;
-}
-
-function focusItem(item: SelectItemRegistration | undefined) {
-  if (!item) {
-    return;
-  }
-
-  const node = item.getNode();
-  if (!node || !node.Selectable) {
-    return;
-  }
-
-  GuiService.SelectedObject = node;
+function withVerticalOffset(position: UDim2, offset: number) {
+  return new UDim2(position.X.Scale, position.X.Offset, position.Y.Scale, position.Y.Offset + offset);
 }
 
 function SelectContentImpl(props: SelectContentImplProps) {
@@ -133,69 +54,78 @@ function SelectContentImpl(props: SelectContentImplProps) {
     [selectContext.contentRef],
   );
 
-  const searchRef = React.useRef("");
-  const searchTimestampRef = React.useRef(0);
+  const positionTweenRef = React.useRef<Tween>();
+  const tweenCompletedConnectionRef = React.useRef<RBXScriptConnection>();
+  const previousVisibleRef = React.useRef(props.visible);
+  const previousExitingRef = React.useRef(props.exiting);
 
-  React.useEffect(() => {
-    if (!props.enabled) {
-      return;
+  const clearTween = React.useCallback(() => {
+    const tween = positionTweenRef.current;
+    if (tween) {
+      tween.Cancel();
+      positionTweenRef.current = undefined;
     }
 
-    const orderedItems = selectContext.getOrderedItems();
-    const selectedItem = orderedItems.find((item) => item.value === selectContext.value && !item.getDisabled());
-    focusItem(selectedItem);
-  }, [props.enabled, selectContext, selectContext.value]);
+    const completedConnection = tweenCompletedConnectionRef.current;
+    if (completedConnection) {
+      completedConnection.Disconnect();
+      tweenCompletedConnectionRef.current = undefined;
+    }
+  }, []);
 
   React.useEffect(() => {
-    if (!props.enabled) {
+    return () => {
+      clearTween();
+    };
+  }, [clearTween]);
+
+  React.useEffect(() => {
+    const contentNode = selectContext.contentRef.current;
+    if (!contentNode) {
       return;
     }
 
-    searchRef.current = "";
-    searchTimestampRef.current = 0;
+    const wasVisible = previousVisibleRef.current;
+    const wasExiting = previousExitingRef.current;
+    previousVisibleRef.current = props.visible;
+    previousExitingRef.current = props.exiting;
 
-    const connection = UserInputService.InputBegan.Connect((inputObject, gameProcessedEvent) => {
-      if (gameProcessedEvent) {
+    if (props.exiting) {
+      if (wasExiting) {
         return;
       }
 
-      if (inputObject.UserInputType !== Enum.UserInputType.Keyboard) {
-        return;
-      }
+      clearTween();
 
-      const contentNode = selectContext.contentRef.current;
-      const selectedObject = GuiService.SelectedObject;
-      if (!contentNode || !selectedObject || !selectedObject.IsDescendantOf(contentNode)) {
-        return;
-      }
+      const tween = TweenService.Create(contentNode, CLOSE_TWEEN_INFO, {
+        Position: withVerticalOffset(popper.position, CONTENT_OPEN_Y_OFFSET),
+      });
 
-      const searchCharacter = toSearchCharacter(inputObject.KeyCode);
-      if (searchCharacter === undefined) {
-        return;
-      }
+      positionTweenRef.current = tween;
+      tweenCompletedConnectionRef.current = tween.Completed.Connect((playbackState) => {
+        if (playbackState === Enum.PlaybackState.Completed) {
+          props.onExitComplete?.();
+        }
+      });
 
-      const now = os.clock();
-      const shouldResetQuery = now - searchTimestampRef.current > 0.8;
-      const nextQuery = shouldResetQuery ? searchCharacter : `${searchRef.current}${searchCharacter}`;
-      searchRef.current = nextQuery;
-      searchTimestampRef.current = now;
+      tween.Play();
+      return;
+    }
 
-      const orderedItems = selectContext.getOrderedItems();
-      const currentIndex = findCurrentIndex(orderedItems, selectedObject);
-      const startIndex = currentIndex >= 0 ? currentIndex + 1 : 0;
-      const matchIndex = findTypeaheadMatch(orderedItems, string.lower(nextQuery), startIndex);
-      if (matchIndex < 0) {
-        return;
-      }
+    clearTween();
 
-      const matchedItem = orderedItems[matchIndex];
-      focusItem(matchedItem);
-    });
+    if (props.visible && !wasVisible) {
+      contentNode.Position = withVerticalOffset(popper.position, CONTENT_OPEN_Y_OFFSET);
+      const tween = TweenService.Create(contentNode, OPEN_TWEEN_INFO, {
+        Position: popper.position,
+      });
+      positionTweenRef.current = tween;
+      tween.Play();
+      return;
+    }
 
-    return () => {
-      connection.Disconnect();
-    };
-  }, [props.enabled, selectContext]);
+    contentNode.Position = popper.position;
+  }, [clearTween, popper.position, props.exiting, props.onExitComplete, props.visible, selectContext.contentRef]);
 
   const contentNode = props.asChild ? (
     (() => {
@@ -205,7 +135,12 @@ function SelectContentImpl(props: SelectContentImplProps) {
       }
 
       return (
-        <Slot AnchorPoint={popper.anchorPoint} Position={popper.position} Visible={props.visible} ref={setContentRef}>
+        <Slot
+          AnchorPoint={popper.anchorPoint}
+          Position={popper.position}
+          Visible={props.visible || props.exiting}
+          ref={setContentRef}
+        >
           {child}
         </Slot>
       );
@@ -217,7 +152,7 @@ function SelectContentImpl(props: SelectContentImplProps) {
       BorderSizePixel={0}
       Position={popper.position}
       Size={UDim2.fromOffset(0, 0)}
-      Visible={props.visible}
+      Visible={props.visible || props.exiting}
       ref={setContentRef}
     >
       {props.children}
@@ -229,13 +164,12 @@ function SelectContentImpl(props: SelectContentImplProps) {
       enabled={props.enabled}
       modal={false}
       onDismiss={props.onDismiss}
-      onEscapeKeyDown={props.onEscapeKeyDown}
       onInteractOutside={props.onInteractOutside}
       onPointerDownOutside={props.onPointerDownOutside}
     >
-      <RovingFocusGroup active={props.enabled} autoFocus="first" loop={selectContext.loop} orientation="vertical">
+      <FocusScope active={props.enabled} restoreFocus={true} trapped={false}>
         {contentNode}
-      </RovingFocusGroup>
+      </FocusScope>
     </DismissableLayer>
   );
 }
@@ -258,9 +192,9 @@ export function SelectContent(props: SelectContentProps) {
       <SelectContentImpl
         asChild={props.asChild}
         enabled={open}
+        exiting={false}
         offset={props.offset}
         onDismiss={handleDismiss}
-        onEscapeKeyDown={props.onEscapeKeyDown}
         onInteractOutside={props.onInteractOutside}
         onPointerDownOutside={props.onPointerDownOutside}
         padding={props.padding}
@@ -274,15 +208,16 @@ export function SelectContent(props: SelectContentProps) {
 
   return (
     <Presence
-      exitFallbackMs={0}
+      exitFallbackMs={180}
       present={open}
       render={(state) => (
         <SelectContentImpl
           asChild={props.asChild}
           enabled={state.isPresent}
+          exiting={!state.isPresent}
           offset={props.offset}
           onDismiss={handleDismiss}
-          onEscapeKeyDown={props.onEscapeKeyDown}
+          onExitComplete={state.onExitComplete}
           onInteractOutside={props.onInteractOutside}
           onPointerDownOutside={props.onPointerDownOutside}
           padding={props.padding}

package/src/Select/SelectItem.tsx

@@ -1,23 +1,12 @@
 import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusItem } from "@lattice-ui/focus";
 import { useSelectContext } from "./context";
 import type { SelectItemProps } from "./types";
 
 let nextItemId = 0;
 let nextItemOrder = 0;
 
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
 export function SelectItem(props: SelectItemProps) {
   const selectContext = useSelectContext();
-  const itemRef = React.useRef<GuiObject>();
-
   const disabled = selectContext.disabled || props.disabled === true;
   const textValue = props.textValue ?? props.value;
 
@@ -49,16 +38,11 @@ export function SelectItem(props: SelectItemProps) {
       id: itemIdRef.current,
       value: props.value,
       order: itemOrderRef.current,
-      getNode: () => itemRef.current,
       getDisabled: () => disabledRef.current,
       getTextValue: () => textValueRef.current,
     });
   }, [props.value, selectContext]);
 
-  const setItemRef = React.useCallback((instance: Instance | undefined) => {
-    itemRef.current = toGuiObject(instance);
-  }, []);
-
   const handleSelect = React.useCallback(() => {
     if (disabled) {
       return;
@@ -100,33 +84,28 @@ export function SelectItem(props: SelectItemProps) {
     }
 
     return (
-      <RovingFocusItem asChild disabled={disabled}>
-        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} ref={setItemRef}>
-          {child}
-        </Slot>
-      </RovingFocusItem>
+      <Slot Active={!disabled} Event={eventHandlers} Selectable={false}>
+        {child}
+      </Slot>
     );
   }
 
   return (
-    <RovingFocusItem asChild disabled={disabled}>
-      <textbutton
-        Active={!disabled}
-        AutoButtonColor={false}
-        BackgroundColor3={Color3.fromRGB(47, 53, 68)}
-        BorderSizePixel={0}
-        Event={eventHandlers}
-        Selectable={!disabled}
-        Size={UDim2.fromOffset(220, 32)}
-        Text={textValue}
-        TextColor3={disabled ? Color3.fromRGB(134, 141, 156) : Color3.fromRGB(234, 239, 247)}
-        TextSize={15}
-        TextXAlignment={Enum.TextXAlignment.Left}
-        ref={setItemRef}
-      >
-        <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
-        {props.children}
-      </textbutton>
-    </RovingFocusItem>
+    <textbutton
+      Active={!disabled}
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(47, 53, 68)}
+      BorderSizePixel={0}
+      Event={eventHandlers}
+      Selectable={false}
+      Size={UDim2.fromOffset(220, 32)}
+      Text={textValue}
+      TextColor3={disabled ? Color3.fromRGB(134, 141, 156) : Color3.fromRGB(234, 239, 247)}
+      TextSize={15}
+      TextXAlignment={Enum.TextXAlignment.Left}
+    >
+      <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+      {props.children}
+    </textbutton>
   );
 }

package/src/Select/SelectRoot.tsx

@@ -27,7 +27,6 @@ export function SelectRoot(props: SelectProps) {
 
   const disabled = props.disabled === true;
   const required = props.required === true;
-  const loop = props.loop ?? true;
 
   const triggerRef = React.useRef<GuiObject>();
   const contentRef = React.useRef<GuiObject>();
@@ -110,14 +109,12 @@ export function SelectRoot(props: SelectProps) {
       setValue,
       disabled,
       required,
-      loop,
       triggerRef,
       contentRef,
       registerItem,
-      getOrderedItems: resolveOrderedItems,
       getItemText,
     }),
-    [disabled, getItemText, loop, open, registerItem, required, resolveOrderedItems, setOpen, setValue, value],
+    [disabled, getItemText, open, registerItem, required, setOpen, setValue, value],
   );
 
   return <SelectContextProvider value={contextValue}>{props.children}</SelectContextProvider>;

package/src/Select/SelectTrigger.tsx

@@ -13,12 +13,13 @@ function toGuiObject(instance: Instance | undefined) {
 export function SelectTrigger(props: SelectTriggerProps) {
   const selectContext = useSelectContext();
   const disabled = selectContext.disabled || props.disabled === true;
+  const triggerRef = selectContext.triggerRef;
 
   const setTriggerRef = React.useCallback(
     (instance: Instance | undefined) => {
-      selectContext.triggerRef.current = toGuiObject(instance);
+      triggerRef.current = toGuiObject(instance);
     },
-    [selectContext.triggerRef],
+    [triggerRef],
   );
 
   const handleActivated = React.useCallback(() => {
@@ -38,11 +39,6 @@ export function SelectTrigger(props: SelectTriggerProps) {
       const keyCode = inputObject.KeyCode;
       if (keyCode === Enum.KeyCode.Return || keyCode === Enum.KeyCode.Space) {
         selectContext.setOpen(!selectContext.open);
-        return;
-      }
-
-      if (keyCode === Enum.KeyCode.Down || keyCode === Enum.KeyCode.Up) {
-        selectContext.setOpen(true);
       }
     },
     [disabled, selectContext],
@@ -63,7 +59,7 @@ export function SelectTrigger(props: SelectTriggerProps) {
     }
 
     return (
-      <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} ref={setTriggerRef}>
+      <Slot Active={!disabled} Event={eventHandlers} Selectable={false} ref={setTriggerRef}>
         {child}
       </Slot>
     );
@@ -76,7 +72,7 @@ export function SelectTrigger(props: SelectTriggerProps) {
       BackgroundColor3={Color3.fromRGB(41, 48, 63)}
       BorderSizePixel={0}
       Event={eventHandlers}
-      Selectable={!disabled}
+      Selectable={false}
       Size={UDim2.fromOffset(220, 36)}
       Text="Select"
       TextColor3={disabled ? Color3.fromRGB(140, 148, 164) : Color3.fromRGB(235, 241, 248)}

package/src/Select/types.ts

@@ -9,7 +9,6 @@ export type SelectItemRegistration = {
   id: number;
   value: string;
   order: number;
-  getNode: () => GuiObject | undefined;
   getDisabled: () => boolean;
   getTextValue: () => string;
 };
@@ -21,11 +20,9 @@ export type SelectContextValue = {
   setValue: SelectSetValue;
   disabled: boolean;
   required: boolean;
-  loop: boolean;
   triggerRef: React.MutableRefObject<GuiObject | undefined>;
   contentRef: React.MutableRefObject<GuiObject | undefined>;
   registerItem: (item: SelectItemRegistration) => () => void;
-  getOrderedItems: () => Array<SelectItemRegistration>;
   getItemText: (value: string) => string | undefined;
 };
 
@@ -38,7 +35,6 @@ export type SelectProps = {
   onOpenChange?: (open: boolean) => void;
   disabled?: boolean;
   required?: boolean;
-  loop?: boolean;
   children?: React.ReactNode;
 };
 
@@ -66,7 +62,6 @@ export type SelectContentProps = {
   placement?: PopperPlacement;
   offset?: Vector2;
   padding?: number;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
   onPointerDownOutside?: (event: LayerInteractEvent) => void;
   onInteractOutside?: (event: LayerInteractEvent) => void;
   children?: React.ReactNode;

package/src/index.ts

@@ -30,18 +30,6 @@ export const Select = {
   Separator: typeof SelectSeparator;
 };
 
-export {
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectPortal,
-  SelectRoot,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-};
-
 export type {
   SelectContentProps,
   SelectContextValue,
@@ -57,3 +45,14 @@ export type {
   SelectTriggerProps,
   SelectValueProps,
 } from "./Select/types";
+export {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPortal,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};