@lattice-ui/select 0.3.0

package/README.md

@@ -0,0 +1,23 @@
+# @lattice-ui/select
+
+Headless single-select primitives built for Roblox UI.
+
+## Exports
+
+- `Select`
+- `Select.Root`
+- `Select.Trigger`
+- `Select.Value`
+- `Select.Portal`
+- `Select.Content`
+- `Select.Item`
+- `Select.Group`
+- `Select.Label`
+- `Select.Separator`
+
+## Notes
+
+- 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.

package/out/Select/SelectContent.d.ts

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

package/out/Select/SelectContent.luau

@@ -0,0 +1,268 @@
+-- Compiled with roblox-ts v3.0.0
+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 _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 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
+end
+local function SelectContentImpl(props)
+	local selectContext = useSelectContext()
+	local popper = usePopper({
+		anchorRef = selectContext.triggerRef,
+		contentRef = selectContext.contentRef,
+		placement = props.placement,
+		offset = props.offset,
+		padding = props.padding,
+		enabled = props.enabled,
+	})
+	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
+		end
+		local orderedItems = selectContext.getOrderedItems()
+		-- ▼ ReadonlyArray.find ▼
+		local _callback = function(item)
+			return item.value == selectContext.value and not item.getDisabled()
+		end
+		local _result
+		for _i, _v in orderedItems do
+			if _callback(_v, _i - 1, orderedItems) == true then
+				_result = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local selectedItem = _result
+		focusItem(selectedItem)
+	end, { props.enabled, selectContext, selectContext.value })
+	React.useEffect(function()
+		if not props.enabled 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
+				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()
+		end
+	end, { props.enabled, selectContext })
+	local contentNode = if props.asChild then ((function()
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[SelectContent] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			AnchorPoint = popper.anchorPoint,
+			Position = popper.position,
+			Visible = props.visible,
+			ref = setContentRef,
+		}, child)
+	end)()) else (React.createElement("frame", {
+		AnchorPoint = popper.anchorPoint,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Position = popper.position,
+		Size = UDim2.fromOffset(0, 0),
+		Visible = props.visible,
+		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, {
+		active = props.enabled,
+		autoFocus = "first",
+		loop = selectContext.loop,
+		orientation = "vertical",
+	}, contentNode))
+end
+local function SelectContent(props)
+	local selectContext = useSelectContext()
+	local open = selectContext.open
+	local forceMount = props.forceMount == true
+	local handleDismiss = React.useCallback(function()
+		selectContext.setOpen(false)
+	end, { selectContext })
+	if not open and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(SelectContentImpl, {
+			asChild = props.asChild,
+			enabled = open,
+			offset = props.offset,
+			onDismiss = handleDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+			padding = props.padding,
+			placement = props.placement,
+			visible = open,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		exitFallbackMs = 0,
+		present = open,
+		render = function(state)
+			return React.createElement(SelectContentImpl, {
+				asChild = props.asChild,
+				enabled = state.isPresent,
+				offset = props.offset,
+				onDismiss = handleDismiss,
+				onEscapeKeyDown = props.onEscapeKeyDown,
+				onInteractOutside = props.onInteractOutside,
+				onPointerDownOutside = props.onPointerDownOutside,
+				padding = props.padding,
+				placement = props.placement,
+				visible = state.isPresent,
+			}, props.children)
+		end,
+	})
+end
+return {
+	SelectContent = SelectContent,
+}

package/out/Select/SelectGroup.d.ts

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

package/out/Select/SelectGroup.luau

@@ -0,0 +1,22 @@
+-- Compiled with roblox-ts v3.0.0
+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 function SelectGroup(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SelectGroup] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(220, 108),
+	}, props.children)
+end
+return {
+	SelectGroup = SelectGroup,
+}

package/out/Select/SelectItem.d.ts

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

package/out/Select/SelectItem.luau

@@ -0,0 +1,124 @@
+-- Compiled with roblox-ts v3.0.0
+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
+		_condition = props.value
+	end
+	local textValue = _condition
+	local disabledRef = React.useRef(disabled)
+	local textValueRef = React.useRef(textValue)
+	React.useEffect(function()
+		disabledRef.current = disabled
+	end, { disabled })
+	React.useEffect(function()
+		textValueRef.current = textValue
+	end, { textValue })
+	local itemIdRef = React.useRef(0)
+	if itemIdRef.current == 0 then
+		nextItemId += 1
+		itemIdRef.current = nextItemId
+	end
+	local itemOrderRef = React.useRef(0)
+	if itemOrderRef.current == 0 then
+		nextItemOrder += 1
+		itemOrderRef.current = nextItemOrder
+	end
+	React.useEffect(function()
+		return selectContext.registerItem({
+			id = itemIdRef.current,
+			value = props.value,
+			order = itemOrderRef.current,
+			getNode = function()
+				return itemRef.current
+			end,
+			getDisabled = function()
+				return disabledRef.current
+			end,
+			getTextValue = function()
+				return textValueRef.current
+			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
+		end
+		selectContext.setValue(props.value)
+		selectContext.setOpen(false)
+	end, { disabled, props.value, selectContext })
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if disabled then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		if keyCode ~= Enum.KeyCode.Return and keyCode ~= Enum.KeyCode.Space then
+			return nil
+		end
+		selectContext.setValue(props.value)
+		selectContext.setOpen(false)
+	end, { disabled, props.value, selectContext })
+	local eventHandlers = React.useMemo(function()
+		return {
+			Activated = handleSelect,
+			InputBegan = handleInputBegan,
+		}
+	end, { handleInputBegan, handleSelect })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SelectItem] `asChild` requires a child element.")
+		end
+		return React.createElement(RovingFocusItem, {
+			asChild = true,
+			disabled = disabled,
+		}, React.createElement(Slot, {
+			Active = not disabled,
+			Event = eventHandlers,
+			Selectable = not disabled,
+			ref = setItemRef,
+		}, child))
+	end
+	return React.createElement(RovingFocusItem, {
+		asChild = true,
+		disabled = disabled,
+	}, React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(47, 53, 68),
+		BorderSizePixel = 0,
+		Event = eventHandlers,
+		Selectable = not disabled,
+		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))
+end
+return {
+	SelectItem = SelectItem,
+}

package/out/Select/SelectLabel.d.ts

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

package/out/Select/SelectLabel.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+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 function SelectLabel(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[SelectLabel] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("textlabel", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(220, 20),
+		Text = "Label",
+		TextColor3 = Color3.fromRGB(168, 176, 191),
+		TextSize = 13,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	}, props.children)
+end
+return {
+	SelectLabel = SelectLabel,
+}

package/out/Select/SelectPortal.d.ts

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

package/out/Select/SelectPortal.luau

@@ -0,0 +1,33 @@
+-- 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 _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local Portal = _layer.Portal
+local PortalProvider = _layer.PortalProvider
+local usePortalContext = _layer.usePortalContext
+local function SelectPortalWithOverrides(props)
+	local portalContext = usePortalContext()
+	local container = props.container or portalContext.container
+	local _condition = props.displayOrderBase
+	if _condition == nil then
+		_condition = portalContext.displayOrderBase
+	end
+	local displayOrderBase = _condition
+	return React.createElement(PortalProvider, {
+		container = container,
+		displayOrderBase = displayOrderBase,
+	}, React.createElement(Portal, nil, props.children))
+end
+local function SelectPortal(props)
+	local hasOverrides = props.container ~= nil or props.displayOrderBase ~= nil
+	if hasOverrides then
+		return React.createElement(SelectPortalWithOverrides, {
+			container = props.container,
+			displayOrderBase = props.displayOrderBase,
+		}, props.children)
+	end
+	return React.createElement(Portal, nil, props.children)
+end
+return {
+	SelectPortal = SelectPortal,
+}

package/out/Select/SelectRoot.d.ts

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