@lattice-ui/radio-group 0.3.2 → 0.4.0

package/out/RadioGroup/RadioGroupItem.luau

@@ -3,25 +3,77 @@ 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 useFocusNode = _core.useFocusNode
 local _context = TS.import(script, script.Parent, "context")
 local RadioGroupItemContextProvider = _context.RadioGroupItemContextProvider
 local useRadioGroupContext = _context.useRadioGroupContext
+local nextItemId = 0
+local nextItemOrder = 0
 local function RadioGroupItem(props)
 	local radioGroupContext = useRadioGroupContext()
 	local disabled = radioGroupContext.disabled or props.disabled == true
 	local checked = radioGroupContext.value == props.value
+	local itemRef = React.useRef()
+	local disabledRef = React.useRef(disabled)
+	React.useEffect(function()
+		disabledRef.current = disabled
+	end, { disabled })
+	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 radioGroupContext.registerItem({
+			id = itemIdRef.current,
+			value = props.value,
+			order = itemOrderRef.current,
+			ref = itemRef,
+			getDisabled = function()
+				return disabledRef.current
+			end,
+		})
+	end, { props.value, radioGroupContext })
+	useFocusNode({
+		ref = itemRef,
+		getDisabled = function()
+			return disabledRef.current
+		end,
+	})
+	local setItemRef = React.useCallback(function(instance)
+		if not instance or not instance:IsA("GuiObject") then
+			itemRef.current = nil
+			return nil
+		end
+		itemRef.current = instance
+	end, {})
 	local handleSelect = React.useCallback(function()
 		if disabled then
 			return nil
 		end
 		radioGroupContext.setValue(props.value)
 	end, { disabled, props.value, radioGroupContext })
+	local handleSelectionGained = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		radioGroupContext.setValue(props.value)
+	end, { disabled, props.value, radioGroupContext })
 	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
 		if disabled then
 			return nil
 		end
 		local keyCode = inputObject.KeyCode
+		local direction = if radioGroupContext.orientation == "horizontal" then if keyCode == Enum.KeyCode.Left then -1 elseif keyCode == Enum.KeyCode.Right then 1 else nil elseif keyCode == Enum.KeyCode.Up then -1 elseif keyCode == Enum.KeyCode.Down then 1 else nil
+		if direction ~= nil then
+			radioGroupContext.moveSelection(props.value, direction)
+			return nil
+		end
 		if keyCode ~= Enum.KeyCode.Return and keyCode ~= Enum.KeyCode.Space then
 			return nil
 		end
@@ -30,10 +82,10 @@ local function RadioGroupItem(props)
 	local eventHandlers = React.useMemo(function()
 		return {
 			Activated = handleSelect,
-			SelectionGained = handleSelect,
 			InputBegan = handleInputBegan,
+			SelectionGained = handleSelectionGained,
 		}
-	end, { handleInputBegan, handleSelect })
+	end, { handleInputBegan, handleSelect, handleSelectionGained })
 	local itemContextValue = React.useMemo(function()
 		return {
 			checked = checked,
@@ -47,18 +99,13 @@ local function RadioGroupItem(props)
 		if not child then
 			error("[RadioGroupItem] `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,
-		}, child))
-	end)()) else (React.createElement(RovingFocusItem, {
-		asChild = true,
-		disabled = disabled,
-	}, React.createElement("textbutton", {
+			ref = setItemRef,
+		}, child)
+	end)()) else (React.createElement("textbutton", {
 		Active = not disabled,
 		AutoButtonColor = false,
 		BackgroundColor3 = if checked then Color3.fromRGB(88, 142, 255) else Color3.fromRGB(47, 53, 68),
@@ -69,7 +116,8 @@ local function RadioGroupItem(props)
 		Text = props.value,
 		TextColor3 = if disabled then Color3.fromRGB(139, 146, 160) else Color3.fromRGB(236, 241, 249),
 		TextSize = 15,
-	}, props.children))))
+		ref = setItemRef,
+	}, props.children)))
 end
 return {
 	RadioGroupItem = RadioGroupItem,

package/out/RadioGroup/RadioGroupRoot.luau

@@ -1,11 +1,14 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local findOrderedSelectionEntry = _core.findOrderedSelectionEntry
+local focusOrderedSelectionEntry = _core.focusOrderedSelectionEntry
+local getRelativeOrderedSelectionEntry = _core.getRelativeOrderedSelectionEntry
 local React = _core.React
 local useControllableState = _core.useControllableState
-local RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
 local RadioGroupContextProvider = TS.import(script, script.Parent, "context").RadioGroupContextProvider
 local function RadioGroupRoot(props)
+	local orientation = props.orientation or "vertical"
 	local _binding = useControllableState({
 		value = props.value,
 		defaultValue = props.defaultValue,
@@ -22,34 +25,74 @@ local function RadioGroupRoot(props)
 	local setValueState = _binding[2]
 	local disabled = props.disabled == true
 	local required = props.required == true
-	local _condition = props.loop
-	if _condition == nil then
-		_condition = true
-	end
-	local loop = _condition
-	local orientation = props.orientation or "vertical"
+	local itemEntriesRef = React.useRef({})
+	local _, setRegistryRevision = React.useState(0)
 	local setValue = React.useCallback(function(nextValue)
 		if disabled then
 			return nil
 		end
 		setValueState(nextValue)
 	end, { disabled, setValueState })
+	local registerItem = React.useCallback(function(item)
+		local _current = itemEntriesRef.current
+		local _item = item
+		table.insert(_current, _item)
+		setRegistryRevision(function(revision)
+			return revision + 1
+		end)
+		return function()
+			local _exp = itemEntriesRef.current
+			-- ▼ ReadonlyArray.findIndex ▼
+			local _callback = function(entry)
+				return entry.id == item.id
+			end
+			local _result = -1
+			for _i, _v in _exp do
+				if _callback(_v, _i - 1, _exp) == true then
+					_result = _i - 1
+					break
+				end
+			end
+			-- ▲ ReadonlyArray.findIndex ▲
+			local index = _result
+			if index >= 0 then
+				table.remove(itemEntriesRef.current, index + 1)
+				setRegistryRevision(function(revision)
+					return revision + 1
+				end)
+			end
+		end
+	end, {})
+	local moveSelection = React.useCallback(function(fromValue, direction)
+		local currentItem = findOrderedSelectionEntry(itemEntriesRef.current, function(item)
+			return item.value == fromValue
+		end) or nil
+		local _exp = itemEntriesRef.current
+		local _result = currentItem
+		if _result ~= nil then
+			_result = _result.id
+		end
+		local nextItem = getRelativeOrderedSelectionEntry(_exp, _result, direction)
+		if not nextItem then
+			return nil
+		end
+		focusOrderedSelectionEntry(nextItem)
+		setValue(nextItem.value)
+	end, { setValue })
 	local contextValue = React.useMemo(function()
 		return {
 			value = value,
 			setValue = setValue,
 			disabled = disabled,
 			required = required,
+			orientation = orientation,
+			registerItem = registerItem,
+			moveSelection = moveSelection,
 		}
-	end, { disabled, required, setValue, value })
+	end, { disabled, moveSelection, orientation, registerItem, required, setValue, value })
 	return React.createElement(RadioGroupContextProvider, {
 		value = contextValue,
-	}, React.createElement(RovingFocusGroup, {
-		active = not disabled,
-		autoFocus = "none",
-		loop = loop,
-		orientation = orientation,
-	}, props.children))
+	}, props.children)
 end
 return {
 	RadioGroupRoot = RadioGroupRoot,

package/out/RadioGroup/types.d.ts

@@ -1,11 +1,21 @@
 import type React from "@rbxts/react";
-export type RadioGroupOrientation = "horizontal" | "vertical" | "both";
 export type RadioGroupSetValue = (value: string) => void;
+export type RadioGroupOrientation = "horizontal" | "vertical";
+export type RadioGroupItemRegistration = {
+    id: number;
+    value: string;
+    order: number;
+    ref: React.MutableRefObject<GuiObject | undefined>;
+    getDisabled: () => boolean;
+};
 export type RadioGroupContextValue = {
     value?: string;
     setValue: RadioGroupSetValue;
     disabled: boolean;
     required: boolean;
+    orientation: RadioGroupOrientation;
+    registerItem: (item: RadioGroupItemRegistration) => () => void;
+    moveSelection: (fromValue: string, direction: -1 | 1) => void;
 };
 export type RadioGroupItemContextValue = {
     checked: boolean;
@@ -17,7 +27,6 @@ export type RadioGroupProps = {
     onValueChange?: (value: string) => void;
     disabled?: boolean;
     required?: boolean;
-    loop?: boolean;
     orientation?: RadioGroupOrientation;
     children?: React.ReactNode;
 };

package/out/index.d.ts

@@ -6,5 +6,5 @@ export declare const RadioGroup: {
     readonly Item: typeof RadioGroupItem;
     readonly Indicator: typeof RadioGroupIndicator;
 };
+export type { RadioGroupContextValue, RadioGroupIndicatorProps, RadioGroupItemContextValue, RadioGroupItemProps, RadioGroupItemRegistration, RadioGroupOrientation, RadioGroupProps, RadioGroupSetValue, } from "./RadioGroup/types";
 export { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot };
-export type { RadioGroupContextValue, RadioGroupIndicatorProps, RadioGroupItemContextValue, RadioGroupItemProps, RadioGroupProps, RadioGroupSetValue, } from "./RadioGroup/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/radio-group",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -9,8 +9,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@lattice-ui/core": "0.3.2",
-    "@lattice-ui/focus": "0.3.2"
+    "@lattice-ui/core": "0.4.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",