@lattice-ui/combobox 0.3.0

package/README.md

@@ -0,0 +1,23 @@
+# @lattice-ui/combobox
+
+Headless combobox primitives for Roblox UI with typed filtering and enforced option selection.
+
+## Exports
+
+- `Combobox`
+- `Combobox.Root`
+- `Combobox.Trigger`
+- `Combobox.Input`
+- `Combobox.Value`
+- `Combobox.Portal`
+- `Combobox.Content`
+- `Combobox.Item`
+- `Combobox.Group`
+- `Combobox.Label`
+- `Combobox.Separator`
+
+## Notes
+
+- Supports controlled/uncontrolled `value`, `inputValue`, and `open`.
+- Input text is synchronized back to selected option text when the list closes.
+- Filtering defaults to case-insensitive substring matching and can be customized with `filterFn`.

package/out/Combobox/ComboboxContent.d.ts

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

package/out/Combobox/ComboboxContent.luau

@@ -0,0 +1,110 @@
+-- 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 useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function ComboboxContentImpl(props)
+	local comboboxContext = useComboboxContext()
+	local popper = usePopper({
+		anchorRef = comboboxContext.triggerRef,
+		contentRef = comboboxContext.contentRef,
+		placement = props.placement,
+		offset = props.offset,
+		padding = props.padding,
+		enabled = props.enabled,
+	})
+	local setContentRef = React.useCallback(function(instance)
+		comboboxContext.contentRef.current = toGuiObject(instance)
+	end, { comboboxContext.contentRef })
+	local contentNode = if props.asChild then ((function()
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[ComboboxContent] `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 = comboboxContext.loop,
+		orientation = "vertical",
+	}, contentNode))
+end
+local function ComboboxContent(props)
+	local comboboxContext = useComboboxContext()
+	local open = comboboxContext.open
+	local forceMount = props.forceMount == true
+	local handleDismiss = React.useCallback(function()
+		comboboxContext.setOpen(false)
+	end, { comboboxContext })
+	if not open and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(ComboboxContentImpl, {
+			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(ComboboxContentImpl, {
+				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 {
+	ComboboxContent = ComboboxContent,
+}

package/out/Combobox/ComboboxGroup.d.ts

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

package/out/Combobox/ComboboxGroup.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 ComboboxGroup(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ComboboxGroup] `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 {
+	ComboboxGroup = ComboboxGroup,
+}

package/out/Combobox/ComboboxInput.d.ts

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

package/out/Combobox/ComboboxInput.luau

@@ -0,0 +1,88 @@
+-- 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 useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
+local function toTextBox(instance)
+	if not instance or not instance:IsA("TextBox") then
+		return nil
+	end
+	return instance
+end
+local function ComboboxInput(props)
+	local comboboxContext = useComboboxContext()
+	local disabled = comboboxContext.disabled or props.disabled == true
+	local readOnly = comboboxContext.readOnly or props.readOnly == true
+	local setInputRef = React.useCallback(function(instance)
+		comboboxContext.inputRef.current = toTextBox(instance)
+	end, { comboboxContext.inputRef })
+	local handleTextChanged = React.useCallback(function(textBox)
+		if disabled or readOnly then
+			if textBox.Text ~= comboboxContext.inputValue then
+				textBox.Text = comboboxContext.inputValue
+			end
+			return nil
+		end
+		comboboxContext.setInputValue(textBox.Text)
+	end, { comboboxContext, disabled, readOnly })
+	local handleFocusLost = React.useCallback(function()
+		comboboxContext.setOpen(false)
+		comboboxContext.syncInputFromValue()
+	end, { comboboxContext })
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if disabled then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		if keyCode == Enum.KeyCode.Down or keyCode == Enum.KeyCode.Up then
+			comboboxContext.setOpen(true)
+		end
+	end, { comboboxContext, disabled })
+	local _object = {
+		Active = not disabled,
+		ClearTextOnFocus = false,
+	}
+	local _left = "PlaceholderText"
+	local _condition = props.placeholder
+	if _condition == nil then
+		_condition = "Type to filter"
+	end
+	_object[_left] = _condition
+	_object.Selectable = not disabled
+	_object.Text = comboboxContext.inputValue
+	_object.TextEditable = not disabled and not readOnly
+	_object.Change = {
+		Text = handleTextChanged,
+	}
+	_object.Event = {
+		FocusLost = handleFocusLost,
+		InputBegan = handleInputBegan,
+	}
+	_object.ref = setInputRef
+	local sharedProps = _object
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ComboboxInput] `asChild` requires a child element.")
+		end
+		local _attributes = table.clone(sharedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, child)
+	end
+	local _attributes = table.clone(sharedProps)
+	setmetatable(_attributes, nil)
+	_attributes.BackgroundColor3 = Color3.fromRGB(39, 46, 61)
+	_attributes.BorderSizePixel = 0
+	_attributes.Size = UDim2.fromOffset(240, 36)
+	_attributes.TextColor3 = if disabled then Color3.fromRGB(137, 145, 162) else Color3.fromRGB(235, 240, 248)
+	_attributes.TextSize = 15
+	_attributes.TextXAlignment = Enum.TextXAlignment.Left
+	return React.createElement("textbox", _attributes, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, 10),
+		PaddingRight = UDim.new(0, 10),
+	}))
+end
+return {
+	ComboboxInput = ComboboxInput,
+}

package/out/Combobox/ComboboxItem.d.ts

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

package/out/Combobox/ComboboxItem.luau

@@ -0,0 +1,131 @@
+-- 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 useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
+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 ComboboxItem(props)
+	local comboboxContext = useComboboxContext()
+	local itemRef = React.useRef()
+	local _condition = props.textValue
+	if _condition == nil then
+		_condition = props.value
+	end
+	local itemQueryMatch = comboboxContext.filterFn(_condition, comboboxContext.inputValue)
+	local disabled = comboboxContext.disabled or props.disabled == true or not itemQueryMatch
+	local _condition_1 = props.textValue
+	if _condition_1 == nil then
+		_condition_1 = props.value
+	end
+	local textValue = _condition_1
+	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 comboboxContext.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, { comboboxContext, props.value })
+	local setItemRef = React.useCallback(function(instance)
+		itemRef.current = toGuiObject(instance)
+	end, {})
+	local handleSelect = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		comboboxContext.setValue(props.value)
+		comboboxContext.setOpen(false)
+	end, { comboboxContext, disabled, props.value })
+	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
+		comboboxContext.setValue(props.value)
+		comboboxContext.setOpen(false)
+	end, { comboboxContext, disabled, props.value })
+	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("[ComboboxItem] `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,
+			Visible = itemQueryMatch,
+			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,
+		Visible = itemQueryMatch,
+		ref = setItemRef,
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, 10),
+		PaddingRight = UDim.new(0, 10),
+	}), props.children))
+end
+return {
+	ComboboxItem = ComboboxItem,
+}

package/out/Combobox/ComboboxLabel.d.ts

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

package/out/Combobox/ComboboxLabel.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 ComboboxLabel(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ComboboxLabel] `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 {
+	ComboboxLabel = ComboboxLabel,
+}

package/out/Combobox/ComboboxPortal.d.ts

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

package/out/Combobox/ComboboxPortal.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 ComboboxPortalWithOverrides(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 ComboboxPortal(props)
+	local hasOverrides = props.container ~= nil or props.displayOrderBase ~= nil
+	if hasOverrides then
+		return React.createElement(ComboboxPortalWithOverrides, {
+			container = props.container,
+			displayOrderBase = props.displayOrderBase,
+		}, props.children)
+	end
+	return React.createElement(Portal, nil, props.children)
+end
+return {
+	ComboboxPortal = ComboboxPortal,
+}

package/out/Combobox/ComboboxRoot.d.ts

@@ -0,0 +1,4 @@
+import { React } from "@lattice-ui/core";
+import type { ComboboxProps } from "./types";
+export declare function ComboboxRoot(props: ComboboxProps): React.JSX.Element;
+export { ComboboxRoot as Combobox };