@lattice-ui/tabs 0.3.1 → 0.4.0

package/README.md

@@ -9,3 +9,8 @@ Behavior-only Tabs primitives for Roblox UI, aligned with the lattice compound p
 - `Tabs.List`
 - `Tabs.Trigger`
 - `Tabs.Content`
+
+## Notes
+
+- `orientation` supports `horizontal` and `vertical` trigger navigation.
+- Enabled triggers are selectable and activate immediately when selection focus moves onto them.

package/out/Tabs/TabsList.luau

@@ -3,27 +3,19 @@ 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 useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
 local function TabsList(props)
-	local tabsContext = useTabsContext()
-	local listNode = if props.asChild then ((function()
+	if props.asChild then
 		local child = props.children
 		if not React.isValidElement(child) then
 			error("[TabsList] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, nil, child)
-	end)()) else (React.createElement("frame", {
+	end
+	return React.createElement("frame", {
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(0, 0),
-	}, props.children))
-	return React.createElement(RovingFocusGroup, {
-		active = true,
-		autoFocus = "none",
-		loop = true,
-		orientation = tabsContext.orientation,
-	}, listNode)
+	}, props.children)
 end
 return {
 	TabsList = TabsList,

package/out/Tabs/TabsRoot.luau

@@ -1,24 +1,18 @@
 -- 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 getOrderedSelectionEntries = _core.getOrderedSelectionEntries
+local getRelativeOrderedSelectionEntry = _core.getRelativeOrderedSelectionEntry
 local React = _core.React
 local useControllableState = _core.useControllableState
 local TabsContextProvider = TS.import(script, script.Parent, "context").TabsContextProvider
-local function getOrderedTriggers(triggers)
-	local _array = {}
-	local _length = #_array
-	table.move(triggers, 1, #triggers, _length + 1, _array)
-	local ordered = _array
-	table.sort(ordered, function(a, b)
-		return a.order < b.order
-	end)
-	return ordered
-end
 local function resolveNextValue(currentValue, orderedTriggers, fallbackOrder)
 	-- ▼ ReadonlyArray.filter ▼
 	local _newValue = {}
 	local _callback = function(trigger)
-		return not trigger.disabled
+		return not trigger.getDisabled()
 	end
 	local _length = 0
 	for _k, _v in orderedTriggers do
@@ -102,6 +96,7 @@ local function resolveNextValue(currentValue, orderedTriggers, fallbackOrder)
 	return _result_3
 end
 local function TabsRoot(props)
+	local orientation = props.orientation or "horizontal"
 	local _binding = useControllableState({
 		value = props.value,
 		defaultValue = props.defaultValue,
@@ -116,8 +111,6 @@ local function TabsRoot(props)
 	})
 	local value = _binding[1]
 	local setValueState = _binding[2]
-	local orientation = props.orientation or "horizontal"
-	local activationMode = props.activationMode or "automatic"
 	local triggerRegistryRef = React.useRef({})
 	local lastSelectedOrderRef = React.useRef()
 	local registryRevision, setRegistryRevision = React.useState(0)
@@ -152,10 +145,10 @@ local function TabsRoot(props)
 		end
 	end, {})
 	local setValue = React.useCallback(function(nextValue)
-		local orderedTriggers = getOrderedTriggers(triggerRegistryRef.current)
+		local orderedTriggers = getOrderedSelectionEntries(triggerRegistryRef.current)
 		-- ▼ ReadonlyArray.find ▼
 		local _callback = function(trigger)
-			return trigger.value == nextValue and not trigger.disabled
+			return trigger.value == nextValue and not trigger.getDisabled()
 		end
 		local _result
 		for _i, _v in orderedTriggers do
@@ -171,11 +164,27 @@ local function TabsRoot(props)
 		end
 		setValueState(nextValue)
 	end, { setValueState })
+	local moveSelection = React.useCallback(function(fromValue, direction)
+		local currentTrigger = findOrderedSelectionEntry(triggerRegistryRef.current, function(trigger)
+			return trigger.value == fromValue
+		end) or nil
+		local _exp = triggerRegistryRef.current
+		local _result = currentTrigger
+		if _result ~= nil then
+			_result = _result.id
+		end
+		local nextTrigger = getRelativeOrderedSelectionEntry(_exp, _result, direction)
+		if not nextTrigger then
+			return nil
+		end
+		focusOrderedSelectionEntry(nextTrigger)
+		setValue(nextTrigger.value)
+	end, { setValue })
 	React.useEffect(function()
-		local orderedTriggers = getOrderedTriggers(triggerRegistryRef.current)
+		local orderedTriggers = getOrderedSelectionEntries(triggerRegistryRef.current)
 		-- ▼ ReadonlyArray.find ▼
 		local _callback = function(trigger)
-			return trigger.value == value and not trigger.disabled
+			return trigger.value == value and not trigger.getDisabled()
 		end
 		local _result
 		for _i, _v in orderedTriggers do
@@ -197,12 +206,12 @@ local function TabsRoot(props)
 	local contextValue = React.useMemo(function()
 		return {
 			value = value,
-			setValue = setValue,
 			orientation = orientation,
-			activationMode = activationMode,
+			setValue = setValue,
 			registerTrigger = registerTrigger,
+			moveSelection = moveSelection,
 		}
-	end, { activationMode, orientation, registerTrigger, setValue, value })
+	end, { moveSelection, orientation, registerTrigger, setValue, value })
 	return React.createElement(TabsContextProvider, {
 		value = contextValue,
 	}, props.children)

package/out/Tabs/TabsTrigger.luau

@@ -3,7 +3,7 @@ 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 useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
 local createTabsTriggerName = TS.import(script, script.Parent, "internals", "ids").createTabsTriggerName
 local nextTriggerId = 0
@@ -19,6 +19,10 @@ local function TabsTrigger(props)
 	local triggerRef = React.useRef()
 	local selected = tabsContext.value == props.value
 	local disabled = props.disabled == true
+	local disabledRef = React.useRef(disabled)
+	React.useEffect(function()
+		disabledRef.current = disabled
+	end, { disabled })
 	local triggerIdRef = React.useRef(0)
 	if triggerIdRef.current == 0 then
 		nextTriggerId += 1
@@ -33,11 +37,19 @@ local function TabsTrigger(props)
 		return tabsContext.registerTrigger({
 			id = triggerIdRef.current,
 			value = props.value,
-			disabled = disabled,
 			ref = triggerRef,
 			order = triggerOrderRef.current,
+			getDisabled = function()
+				return disabledRef.current
+			end,
 		})
-	end, { disabled, props.value, tabsContext })
+	end, { props.value, tabsContext })
+	useFocusNode({
+		ref = triggerRef,
+		getDisabled = function()
+			return disabledRef.current
+		end,
+	})
 	local setTriggerRef = React.useCallback(function(instance)
 		triggerRef.current = toGuiObject(instance)
 	end, {})
@@ -48,16 +60,21 @@ local function TabsTrigger(props)
 		tabsContext.setValue(props.value)
 	end, { disabled, props.value, tabsContext })
 	local handleSelectionGained = React.useCallback(function()
-		if disabled or tabsContext.activationMode ~= "automatic" then
+		if disabled then
 			return nil
 		end
 		tabsContext.setValue(props.value)
 	end, { disabled, props.value, tabsContext })
 	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
-		if disabled or tabsContext.activationMode ~= "manual" then
+		if disabled then
 			return nil
 		end
 		local keyCode = inputObject.KeyCode
+		local direction = if tabsContext.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
+			tabsContext.moveSelection(props.value, direction)
+			return nil
+		end
 		if keyCode ~= Enum.KeyCode.Return and keyCode ~= Enum.KeyCode.Space then
 			return nil
 		end
@@ -66,8 +83,8 @@ local function TabsTrigger(props)
 	local eventHandlers = React.useMemo(function()
 		return {
 			Activated = handleActivated,
-			SelectionGained = handleSelectionGained,
 			InputBegan = handleInputBegan,
+			SelectionGained = handleSelectionGained,
 		}
 	end, { handleActivated, handleInputBegan, handleSelectionGained })
 	local triggerName = React.useMemo(function()
@@ -78,19 +95,15 @@ local function TabsTrigger(props)
 		if not child then
 			error("[TabsTrigger] `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,
 			Name = triggerName,
+			Selectable = not disabled,
 			ref = setTriggerRef,
-		}, child))
+		}, child)
 	end
-	return React.createElement(RovingFocusItem, {
-		asChild = true,
-		disabled = disabled,
-	}, React.createElement("textbutton", {
+	return React.createElement("textbutton", {
 		Active = not disabled,
 		AutoButtonColor = false,
 		BackgroundColor3 = if selected then Color3.fromRGB(86, 137, 245) else Color3.fromRGB(47, 53, 68),
@@ -102,7 +115,7 @@ local function TabsTrigger(props)
 		TextColor3 = if disabled then Color3.fromRGB(136, 144, 159) else Color3.fromRGB(235, 240, 248),
 		TextSize = 15,
 		ref = setTriggerRef,
-	}, props.children))
+	}, props.children)
 end
 return {
 	TabsTrigger = TabsTrigger,

package/out/Tabs/types.d.ts

@@ -1,27 +1,25 @@
 import type React from "@rbxts/react";
-export type TabsOrientation = "horizontal" | "vertical";
-export type TabsActivationMode = "automatic" | "manual";
 export type TabsSetValue = (value: string) => void;
+export type TabsOrientation = "horizontal" | "vertical";
 export type TabsTriggerRegistration = {
     id: number;
     value: string;
-    disabled: boolean;
     ref: React.MutableRefObject<GuiObject | undefined>;
     order: number;
+    getDisabled: () => boolean;
 };
 export type TabsContextValue = {
     value?: string;
-    setValue: TabsSetValue;
     orientation: TabsOrientation;
-    activationMode: TabsActivationMode;
+    setValue: TabsSetValue;
     registerTrigger: (trigger: TabsTriggerRegistration) => () => void;
+    moveSelection: (fromValue: string, direction: -1 | 1) => void;
 };
 export type TabsProps = {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     orientation?: TabsOrientation;
-    activationMode?: TabsActivationMode;
     children?: React.ReactNode;
 };
 export type TabsListProps = {

package/out/index.d.ts

@@ -8,4 +8,4 @@ export declare const Tabs: {
     readonly Trigger: typeof TabsTrigger;
     readonly Content: typeof TabsContent;
 };
-export type { TabsActivationMode, TabsContentProps, TabsContextValue, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps, } from "./Tabs/types";
+export type { TabsContentProps, TabsContextValue, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps, } from "./Tabs/types";

package/package.json

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