@lattice-ui/combobox 0.5.0-next.2 → 0.5.0-next.3

package/out/Combobox/ComboboxContent.luau

@@ -19,7 +19,11 @@ local function toGuiPropBag(value)
 	return if type(_value) == "table" then value else {}
 end
 local function toGuiObject(instance)
-	if not instance or not instance:IsA("GuiObject") then
+	local _result = instance
+	if _result ~= nil then
+		_result = _result:IsA("GuiObject")
+	end
+	if not _result then
 		return nil
 	end
 	return instance
@@ -28,12 +32,14 @@ local function ComboboxContentImpl(props)
 	local comboboxContext = useComboboxContext()
 	local open = comboboxContext.open
 	local shouldMeasure = open or props.motionPresent or props.onExitComplete ~= nil
+	local contentBoundaryRef = React.useRef()
 	local popper = usePopper({
 		anchorRef = comboboxContext.anchorRef,
 		contentRef = comboboxContext.contentRef,
+		alignOffset = props.alignOffset,
+		collisionPadding = props.collisionPadding,
+		sideOffset = props.sideOffset,
 		placement = props.placement,
-		offset = props.offset,
-		padding = props.padding,
 		enabled = shouldMeasure,
 	})
 	local defaultTransition = React.useMemo(function()
@@ -50,6 +56,7 @@ local function ComboboxContentImpl(props)
 	local setContentRef = React.useCallback(function(instance)
 		local guiObject = toGuiObject(instance)
 		comboboxContext.contentRef.current = guiObject
+		contentBoundaryRef.current = guiObject
 		motion.ref.current = guiObject
 	end, { comboboxContext.contentRef, motion.ref })
 	local handleDismiss = React.useCallback(function()
@@ -58,6 +65,8 @@ local function ComboboxContentImpl(props)
 	local shouldRender = motion.mounted
 	local contentVisible = shouldRender and (motion.present or motion.phase ~= "exited")
 	local popperPosition = if popper.isPositioned then popper.position else HIDDEN_POSITION
+	local popperContentSize = popper.contentSize or Vector2.new(0, 0)
+	local popperWrapperSize = if popper.isPositioned then UDim2.fromOffset(popperContentSize.X, popperContentSize.Y) else UDim2.fromOffset(0, 0)
 	local contentNode = if props.asChild then ((function()
 		local child = props.children
 		if not React.isValidElement(child) then
@@ -94,12 +103,13 @@ local function ComboboxContentImpl(props)
 		onDismiss = handleDismiss,
 		onInteractOutside = props.onInteractOutside,
 		onPointerDownOutside = props.onPointerDownOutside,
+		contentBoundaryRef = contentBoundaryRef,
 	}, React.createElement("frame", {
 		AnchorPoint = popper.anchorPoint,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Position = popperPosition,
-		Size = UDim2.fromOffset(0, 0),
+		Size = popperWrapperSize,
 		Visible = shouldRender,
 	}, contentNode))
 end
@@ -109,13 +119,14 @@ local function ComboboxContent(props)
 	if props.forceMount then
 		return React.createElement(ComboboxContentImpl, {
 			asChild = props.asChild,
+			alignOffset = props.alignOffset,
+			collisionPadding = props.collisionPadding,
 			forceMount = props.forceMount,
 			motionPresent = open,
-			offset = props.offset,
 			onInteractOutside = props.onInteractOutside,
 			onPointerDownOutside = props.onPointerDownOutside,
-			padding = props.padding,
 			placement = props.placement,
+			sideOffset = props.sideOffset,
 			transition = props.transition,
 		}, props.children)
 	end
@@ -124,14 +135,15 @@ local function ComboboxContent(props)
 		render = function(state)
 			return React.createElement(ComboboxContentImpl, {
 				asChild = props.asChild,
+				alignOffset = props.alignOffset,
+				collisionPadding = props.collisionPadding,
 				forceMount = props.forceMount,
 				motionPresent = state.isPresent,
-				offset = props.offset,
 				onExitComplete = state.onExitComplete,
 				onInteractOutside = props.onInteractOutside,
 				onPointerDownOutside = props.onPointerDownOutside,
-				padding = props.padding,
 				placement = props.placement,
+				sideOffset = props.sideOffset,
 				transition = props.transition,
 			}, props.children)
 		end,

package/out/Combobox/ComboboxInput.luau

@@ -4,8 +4,13 @@ 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 UserInputService = game:GetService("UserInputService")
 local function toTextBox(instance)
-	if not instance or not instance:IsA("TextBox") then
+	local _result = instance
+	if _result ~= nil then
+		_result = _result:IsA("TextBox")
+	end
+	if not _result then
 		return nil
 	end
 	return instance
@@ -32,6 +37,9 @@ local function ComboboxInput(props)
 		if textBox.Text == lastInputValueRef.current then
 			return nil
 		end
+		if UserInputService:GetFocusedTextBox() ~= textBox then
+			return nil
+		end
 		if disabled or readOnly then
 			if textBox.Text ~= lastInputValueRef.current then
 				textBox.Text = lastInputValueRef.current

package/out/Combobox/ComboboxItem.luau

@@ -12,14 +12,10 @@ local function ComboboxItem(props)
 	if _condition == nil then
 		_condition = props.value
 	end
-	local itemQueryMatch = comboboxContext.filterFn(_condition, comboboxContext.inputValue)
+	local textValue = _condition
+	local itemQueryMatch = comboboxContext.filterFn(textValue, comboboxContext.queryValue)
 	local disabled = comboboxContext.disabled or props.disabled == true
 	local interactionDisabled = disabled 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()

package/out/Combobox/ComboboxRoot.luau

@@ -74,6 +74,7 @@ local function ComboboxRoot(props)
 	local _binding_2 = useControllableState(_object_1)
 	local inputValue = _binding_2[1]
 	local setInputValueState = _binding_2[2]
+	local visibleQueryValue, setVisibleQueryValue = React.useState(inputValue)
 	local disabled = props.disabled == true
 	local readOnly = props.readOnly == true
 	local required = props.required == true
@@ -84,6 +85,7 @@ local function ComboboxRoot(props)
 	local contentRef = React.useRef()
 	local itemEntriesRef = React.useRef({})
 	local itemTextCacheRef = React.useRef({})
+	local programmaticInputValueRef = React.useRef()
 	local registryRevision, setRegistryRevision = React.useState(0)
 	local registerItem = React.useCallback(function(item)
 		local _exp = itemEntriesRef.current
@@ -169,6 +171,7 @@ local function ComboboxRoot(props)
 			_result = ""
 		end
 		local nextInputValue = _result
+		programmaticInputValueRef.current = nextInputValue
 		setInputValueState(nextInputValue)
 	end, { getItemText, setInputValueState, value })
 	local setOpen = React.useCallback(function(nextOpen)
@@ -195,7 +198,11 @@ local function ComboboxRoot(props)
 		end
 		-- ▲ ReadonlyArray.find ▲
 		local selected = _result
-		if selected and selected.getDisabled() then
+		local _result_1 = selected
+		if _result_1 ~= nil then
+			_result_1 = _result_1.getDisabled()
+		end
+		if _result_1 then
 			return nil
 		end
 		setValueState(nextValue)
@@ -204,12 +211,21 @@ local function ComboboxRoot(props)
 			_condition_2 = nextValue
 		end
 		local nextInputValue = _condition_2
+		programmaticInputValueRef.current = nextInputValue
 		setInputValueState(nextInputValue)
 	end, { disabled, getItemText, resolveOrderedItems, setInputValueState, setValueState })
 	local setInputValue = React.useCallback(function(nextInputValue)
 		if disabled or readOnly then
 			return nil
 		end
+		if programmaticInputValueRef.current ~= nil and nextInputValue == programmaticInputValueRef.current then
+			programmaticInputValueRef.current = nil
+			return nil
+		end
+		programmaticInputValueRef.current = nil
+		setVisibleQueryValue(function(currentQueryValue)
+			return if currentQueryValue == nextInputValue then currentQueryValue else nextInputValue
+		end)
 		if nextInputValue == inputValue then
 			return nil
 		end
@@ -234,7 +250,11 @@ local function ComboboxRoot(props)
 			return nil
 		end
 		syncInputFromValue()
-	end, { open, syncInputFromValue, value })
+		setVisibleQueryValue(function(currentQueryValue)
+			return if currentQueryValue == inputValue then currentQueryValue else inputValue
+		end)
+	end, { inputValue, open, syncInputFromValue, value })
+	local queryValue = if open then visibleQueryValue else inputValue
 	local contextValue = React.useMemo(function()
 		return {
 			open = open,
@@ -242,6 +262,7 @@ local function ComboboxRoot(props)
 			value = value,
 			setValue = setValue,
 			inputValue = inputValue,
+			queryValue = queryValue,
 			setInputValue = setInputValue,
 			syncInputFromValue = syncInputFromValue,
 			disabled = disabled,
@@ -255,7 +276,7 @@ local function ComboboxRoot(props)
 			registerItem = registerItem,
 			getItemText = getItemText,
 		}
-	end, { disabled, filterFn, getItemText, inputValue, open, readOnly, registerItem, required, resolveOrderedItems, setInputValue, setOpen, setValue, syncInputFromValue, value })
+	end, { disabled, filterFn, getItemText, inputValue, open, queryValue, readOnly, registerItem, required, resolveOrderedItems, setInputValue, setOpen, setValue, syncInputFromValue, value, visibleQueryValue })
 	return React.createElement(ComboboxContextProvider, {
 		value = contextValue,
 	}, props.children)

package/out/Combobox/ComboboxTrigger.luau

@@ -5,7 +5,11 @@ local React = _core.React
 local Slot = _core.Slot
 local useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
 local function toGuiObject(instance)
-	if not instance or not instance:IsA("GuiObject") then
+	local _result = instance
+	if _result ~= nil then
+		_result = _result:IsA("GuiObject")
+	end
+	if not _result then
 		return nil
 	end
 	return instance

package/out/Combobox/types.d.ts

@@ -19,6 +19,7 @@ export type ComboboxContextValue = {
     value?: string;
     setValue: ComboboxSetValue;
     inputValue: string;
+    queryValue: string;
     setInputValue: ComboboxSetInputValue;
     syncInputFromValue: () => void;
     disabled: boolean;
@@ -75,8 +76,9 @@ export type ComboboxContentProps = {
     asChild?: boolean;
     forceMount?: boolean;
     placement?: PopperPlacement;
-    offset?: Vector2;
-    padding?: number;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionPadding?: number;
     onPointerDownOutside?: (event: LayerInteractEvent) => void;
     onInteractOutside?: (event: LayerInteractEvent) => void;
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/combobox",
-  "version": "0.5.0-next.2",
+  "version": "0.5.0-next.3",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -16,10 +16,10 @@
     "url": "https://github.com/astra-void/lattice-ui.git"
   },
   "dependencies": {
-    "@lattice-ui/core": "0.5.0-next.2",
-    "@lattice-ui/motion": "0.5.0-next.2",
-    "@lattice-ui/popper": "0.5.0-next.2",
-    "@lattice-ui/layer": "0.5.0-next.2"
+    "@lattice-ui/core": "0.5.0-next.3",
+    "@lattice-ui/layer": "0.5.0-next.3",
+    "@lattice-ui/popper": "0.5.0-next.3",
+    "@lattice-ui/motion": "0.5.0-next.3"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -31,8 +31,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "biome check src",
+    "lint:fix": "biome check src --write --unsafe",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/Combobox/ComboboxContent.tsx

@@ -17,7 +17,7 @@ function toGuiPropBag(value: unknown): GuiPropBag {
 }
 
 function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
+  if (!instance?.IsA("GuiObject")) {
     return undefined;
   }
   return instance;
@@ -27,8 +27,9 @@ function ComboboxContentImpl(props: {
   motionPresent: boolean;
   onExitComplete?: () => void;
   placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
+  sideOffset?: number;
+  alignOffset?: number;
+  collisionPadding?: number;
   forceMount?: boolean;
   onPointerDownOutside?: (event: LayerInteractEvent) => void;
   onInteractOutside?: (event: LayerInteractEvent) => void;
@@ -39,13 +40,15 @@ function ComboboxContentImpl(props: {
   const comboboxContext = useComboboxContext();
   const open = comboboxContext.open;
   const shouldMeasure = open || props.motionPresent || props.onExitComplete !== undefined;
+  const contentBoundaryRef = React.useRef<GuiObject>();
 
   const popper = usePopper({
     anchorRef: comboboxContext.anchorRef,
     contentRef: comboboxContext.contentRef,
+    alignOffset: props.alignOffset,
+    collisionPadding: props.collisionPadding,
+    sideOffset: props.sideOffset,
     placement: props.placement,
-    offset: props.offset,
-    padding: props.padding,
     enabled: shouldMeasure,
   });
 
@@ -67,6 +70,7 @@ function ComboboxContentImpl(props: {
     (instance: Instance | undefined) => {
       const guiObject = toGuiObject(instance);
       comboboxContext.contentRef.current = guiObject;
+      contentBoundaryRef.current = guiObject;
       motion.ref.current = guiObject;
     },
     [comboboxContext.contentRef, motion.ref],
@@ -79,6 +83,10 @@ function ComboboxContentImpl(props: {
   const shouldRender = motion.mounted;
   const contentVisible = shouldRender && (motion.present || motion.phase !== "exited");
   const popperPosition = popper.isPositioned ? popper.position : HIDDEN_POSITION;
+  const popperContentSize = (popper as { contentSize?: Vector2 }).contentSize ?? new Vector2(0, 0);
+  const popperWrapperSize = popper.isPositioned
+    ? UDim2.fromOffset(popperContentSize.X, popperContentSize.Y)
+    : UDim2.fromOffset(0, 0);
 
   const contentNode = props.asChild ? (
     (() => {
@@ -129,13 +137,14 @@ function ComboboxContentImpl(props: {
       onDismiss={handleDismiss}
       onInteractOutside={props.onInteractOutside}
       onPointerDownOutside={props.onPointerDownOutside}
+      contentBoundaryRef={contentBoundaryRef}
     >
       <frame
         AnchorPoint={popper.anchorPoint}
         BackgroundTransparency={1}
         BorderSizePixel={0}
         Position={popperPosition}
-        Size={UDim2.fromOffset(0, 0)}
+        Size={popperWrapperSize}
         Visible={shouldRender}
       >
         {contentNode}
@@ -152,13 +161,14 @@ export function ComboboxContent(props: ComboboxContentProps) {
     return (
       <ComboboxContentImpl
         asChild={props.asChild}
+        alignOffset={props.alignOffset}
+        collisionPadding={props.collisionPadding}
         forceMount={props.forceMount}
         motionPresent={open}
-        offset={props.offset}
         onInteractOutside={props.onInteractOutside}
         onPointerDownOutside={props.onPointerDownOutside}
-        padding={props.padding}
         placement={props.placement}
+        sideOffset={props.sideOffset}
         transition={props.transition}
       >
         {props.children}
@@ -172,14 +182,15 @@ export function ComboboxContent(props: ComboboxContentProps) {
       render={(state) => (
         <ComboboxContentImpl
           asChild={props.asChild}
+          alignOffset={props.alignOffset}
+          collisionPadding={props.collisionPadding}
           forceMount={props.forceMount}
           motionPresent={state.isPresent}
-          offset={props.offset}
           onExitComplete={state.onExitComplete}
           onInteractOutside={props.onInteractOutside}
           onPointerDownOutside={props.onPointerDownOutside}
-          padding={props.padding}
           placement={props.placement}
+          sideOffset={props.sideOffset}
           transition={props.transition}
         >
           {props.children}

package/src/Combobox/ComboboxInput.tsx

@@ -2,8 +2,10 @@ import { React, Slot } from "@lattice-ui/core";
 import { useComboboxContext } from "./context";
 import type { ComboboxInputProps } from "./types";
 
+const UserInputService = game.GetService("UserInputService");
+
 function toTextBox(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("TextBox")) {
+  if (!instance?.IsA("TextBox")) {
     return undefined;
   }
 
@@ -43,6 +45,10 @@ export function ComboboxInput(props: ComboboxInputProps) {
         return;
       }
 
+      if (UserInputService.GetFocusedTextBox() !== textBox) {
+        return;
+      }
+
       if (disabled || readOnly) {
         if (textBox.Text !== lastInputValueRef.current) {
           textBox.Text = lastInputValueRef.current;

package/src/Combobox/ComboboxItem.tsx

@@ -7,10 +7,10 @@ let nextItemOrder = 0;
 
 export function ComboboxItem(props: ComboboxItemProps) {
   const comboboxContext = useComboboxContext();
-  const itemQueryMatch = comboboxContext.filterFn(props.textValue ?? props.value, comboboxContext.inputValue);
+  const textValue = props.textValue ?? props.value;
+  const itemQueryMatch = comboboxContext.filterFn(textValue, comboboxContext.queryValue);
   const disabled = comboboxContext.disabled || props.disabled === true;
   const interactionDisabled = disabled || !itemQueryMatch;
-  const textValue = props.textValue ?? props.value;
 
   const disabledRef = React.useRef(disabled);
   const textValueRef = React.useRef(textValue);

package/src/Combobox/ComboboxRoot.tsx

@@ -39,6 +39,7 @@ export function ComboboxRoot(props: ComboboxProps) {
     defaultValue: props.defaultInputValue ?? "",
     onChange: props.onInputValueChange,
   });
+  const [visibleQueryValue, setVisibleQueryValue] = React.useState(inputValue);
 
   const disabled = props.disabled === true;
   const readOnly = props.readOnly === true;
@@ -52,6 +53,7 @@ export function ComboboxRoot(props: ComboboxProps) {
 
   const itemEntriesRef = React.useRef<Array<ComboboxItemRegistration>>([]);
   const itemTextCacheRef = React.useRef<Record<string, string>>({});
+  const programmaticInputValueRef = React.useRef<string | undefined>();
   const [registryRevision, setRegistryRevision] = React.useState(0);
 
   const registerItem = React.useCallback((item: ComboboxItemRegistration) => {
@@ -90,6 +92,7 @@ export function ComboboxRoot(props: ComboboxProps) {
 
   const syncInputFromValue = React.useCallback(() => {
     const nextInputValue = value !== undefined ? (getItemText(value) ?? "") : "";
+    programmaticInputValueRef.current = nextInputValue;
     setInputValueState(nextInputValue);
   }, [getItemText, setInputValueState, value]);
 
@@ -111,12 +114,13 @@ export function ComboboxRoot(props: ComboboxProps) {
       }
 
       const selected = resolveOrderedItems().find((item) => item.value === nextValue);
-      if (selected && selected.getDisabled()) {
+      if (selected?.getDisabled()) {
         return;
       }
 
       setValueState(nextValue);
       const nextInputValue = getItemText(nextValue) ?? nextValue;
+      programmaticInputValueRef.current = nextInputValue;
       setInputValueState(nextInputValue);
     },
     [disabled, getItemText, resolveOrderedItems, setInputValueState, setValueState],
@@ -128,6 +132,16 @@ export function ComboboxRoot(props: ComboboxProps) {
         return;
       }
 
+      if (programmaticInputValueRef.current !== undefined && nextInputValue === programmaticInputValueRef.current) {
+        programmaticInputValueRef.current = undefined;
+        return;
+      }
+
+      programmaticInputValueRef.current = undefined;
+      setVisibleQueryValue((currentQueryValue) =>
+        currentQueryValue === nextInputValue ? currentQueryValue : nextInputValue,
+      );
+
       if (nextInputValue === inputValue) {
         return;
       }
@@ -160,7 +174,10 @@ export function ComboboxRoot(props: ComboboxProps) {
     }
 
     syncInputFromValue();
-  }, [open, syncInputFromValue, value]);
+    setVisibleQueryValue((currentQueryValue) => (currentQueryValue === inputValue ? currentQueryValue : inputValue));
+  }, [inputValue, open, syncInputFromValue, value]);
+
+  const queryValue = open ? visibleQueryValue : inputValue;
 
   const contextValue = React.useMemo(
     () => ({
@@ -169,6 +186,7 @@ export function ComboboxRoot(props: ComboboxProps) {
       value,
       setValue,
       inputValue,
+      queryValue,
       setInputValue,
       syncInputFromValue,
       disabled,
@@ -188,6 +206,7 @@ export function ComboboxRoot(props: ComboboxProps) {
       getItemText,
       inputValue,
       open,
+      queryValue,
       readOnly,
       registerItem,
       required,
@@ -197,6 +216,7 @@ export function ComboboxRoot(props: ComboboxProps) {
       setValue,
       syncInputFromValue,
       value,
+      visibleQueryValue,
     ],
   );
 

package/src/Combobox/ComboboxTrigger.tsx

@@ -3,7 +3,7 @@ import { useComboboxContext } from "./context";
 import type { ComboboxTriggerProps } from "./types";
 
 function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
+  if (!instance?.IsA("GuiObject")) {
     return undefined;
   }
 

package/src/Combobox/types.ts

@@ -23,6 +23,7 @@ export type ComboboxContextValue = {
   value?: string;
   setValue: ComboboxSetValue;
   inputValue: string;
+  queryValue: string;
   setInputValue: ComboboxSetInputValue;
   syncInputFromValue: () => void;
   disabled: boolean;
@@ -85,8 +86,9 @@ export type ComboboxContentProps = {
   asChild?: boolean;
   forceMount?: boolean;
   placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
+  sideOffset?: number;
+  alignOffset?: number;
+  collisionPadding?: number;
   onPointerDownOutside?: (event: LayerInteractEvent) => void;
   onInteractOutside?: (event: LayerInteractEvent) => void;
   children?: React.ReactNode;