@lattice-ui/tabs 0.4.3 → 0.5.0-next.1

package/default.project.json

@@ -0,0 +1,9 @@
+{
+  "name": "tabs",
+  "tree": {
+    "$path": "out",
+    "out": {
+      "$path": "out"
+    }
+  }
+}

package/out/Tabs/TabsContent.d.ts

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

package/out/Tabs/TabsContent.luau

@@ -4,10 +4,23 @@ local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
 local Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
+local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createSurfaceRevealRecipe = _motion.createSurfaceRevealRecipe
+local usePresenceMotion = _motion.usePresenceMotion
 local useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
 local createTabsContentName = TS.import(script, script.Parent, "internals", "ids").createTabsContentName
 local function TabsContentImpl(props)
 	local contentName = createTabsContentName(props.value)
+	local defaultTransition = React.useMemo(function()
+		return createSurfaceRevealRecipe()
+	end, {})
+	local config = React.useMemo(function()
+		if not props.transition then
+			return defaultTransition
+		end
+		return props.transition
+	end, { defaultTransition, props.transition })
+	local motionRef = usePresenceMotion(props.motionPresent, config, props.onExitComplete)
 	if props.asChild then
 		local child = props.children
 		if not React.isValidElement(child) then
@@ -16,6 +29,7 @@ local function TabsContentImpl(props)
 		return React.createElement(Slot, {
 			Name = contentName,
 			Visible = props.visible,
+			ref = motionRef,
 		}, child)
 	end
 	return React.createElement("frame", {
@@ -23,30 +37,32 @@ local function TabsContentImpl(props)
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(0, 0),
 		Visible = props.visible,
+		ref = motionRef,
 	}, props.children)
 end
 local function TabsContent(props)
 	local tabsContext = useTabsContext()
 	local selected = tabsContext.value == props.value
 	local forceMount = props.forceMount == true
-	if not selected and not forceMount then
-		return nil
-	end
 	if forceMount then
 		return React.createElement(TabsContentImpl, {
 			asChild = props.asChild,
+			motionPresent = selected,
+			transition = props.transition,
 			value = props.value,
 			visible = selected,
 		}, props.children)
 	end
 	return React.createElement(Presence, {
-		exitFallbackMs = 0,
 		present = selected,
 		render = function(state)
 			return React.createElement(TabsContentImpl, {
 				asChild = props.asChild,
+				motionPresent = state.isPresent,
+				onExitComplete = state.onExitComplete,
+				transition = props.transition,
 				value = props.value,
-				visible = state.isPresent,
+				visible = true,
 			}, props.children)
 		end,
 	})

package/out/Tabs/TabsRoot.luau

@@ -1,12 +1,13 @@
 -- 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 _focus = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out)
+local findOrderedSelectionEntry = _focus.findOrderedSelectionEntry
+local focusOrderedSelectionEntry = _focus.focusOrderedSelectionEntry
+local getOrderedSelectionEntries = _focus.getOrderedSelectionEntries
+local getRelativeOrderedSelectionEntry = _focus.getRelativeOrderedSelectionEntry
 local TabsContextProvider = TS.import(script, script.Parent, "context").TabsContextProvider
 local function resolveNextValue(currentValue, orderedTriggers, fallbackOrder)
 	-- ▼ ReadonlyArray.filter ▼

package/out/Tabs/TabsTrigger.luau

@@ -3,7 +3,10 @@ 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 useFocusNode = _core.useFocusNode
+local useFocusNode = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).useFocusNode
+local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createSelectionResponseRecipe = _motion.createSelectionResponseRecipe
+local useResponseMotion = _motion.useResponseMotion
 local useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
 local createTabsTriggerName = TS.import(script, script.Parent, "internals", "ids").createTabsTriggerName
 local nextTriggerId = 0
@@ -50,9 +53,21 @@ local function TabsTrigger(props)
 			return disabledRef.current
 		end,
 	})
+	local motionRef = useResponseMotion(selected, {
+		active = {
+			BackgroundColor3 = Color3.fromRGB(86, 137, 245),
+			TextColor3 = Color3.fromRGB(235, 240, 248),
+		},
+		inactive = {
+			BackgroundColor3 = Color3.fromRGB(47, 53, 68),
+			TextColor3 = Color3.fromRGB(136, 144, 159),
+		},
+	}, createSelectionResponseRecipe())
 	local setTriggerRef = React.useCallback(function(instance)
-		triggerRef.current = toGuiObject(instance)
-	end, {})
+		local nextTrigger = toGuiObject(instance)
+		triggerRef.current = nextTrigger
+		motionRef.current = nextTrigger
+	end, { motionRef })
 	local handleActivated = React.useCallback(function()
 		if disabled then
 			return nil
@@ -112,7 +127,7 @@ local function TabsTrigger(props)
 		Selectable = not disabled,
 		Size = UDim2.fromOffset(132, 34),
 		Text = props.value,
-		TextColor3 = if disabled then Color3.fromRGB(136, 144, 159) else Color3.fromRGB(235, 240, 248),
+		TextColor3 = if selected then Color3.fromRGB(235, 240, 248) elseif disabled then Color3.fromRGB(136, 144, 159) else Color3.fromRGB(235, 240, 248),
 		TextSize = 15,
 		ref = setTriggerRef,
 	}, props.children)

package/out/Tabs/types.d.ts

@@ -1,3 +1,4 @@
+import type { PresenceMotionConfig } from "@lattice-ui/motion";
 import type React from "@rbxts/react";
 export type TabsSetValue = (value: string) => void;
 export type TabsOrientation = "horizontal" | "vertical";
@@ -33,6 +34,7 @@ export type TabsTriggerProps = {
     children?: React.ReactElement;
 };
 export type TabsContentProps = {
+    transition?: PresenceMotionConfig;
     value: string;
     asChild?: boolean;
     forceMount?: boolean;

package/package.json

@@ -1,16 +1,25 @@
 {
   "name": "@lattice-ui/tabs",
-  "version": "0.4.3",
+  "version": "0.5.0-next.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "source": "src/index.ts",
   "files": [
+    "default.project.json",
     "out",
+    "src",
     "README.md"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/astra-void/lattice-ui.git"
+  },
   "dependencies": {
-    "@lattice-ui/core": "0.4.3",
-    "@lattice-ui/layer": "0.4.3"
+    "@lattice-ui/core": "0.5.0-next.1",
+    "@lattice-ui/focus": "0.5.0-next.1",
+    "@lattice-ui/layer": "0.5.0-next.1",
+    "@lattice-ui/motion": "0.5.0-next.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -22,6 +31,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/Tabs/TabsContent.tsx

@@ -0,0 +1,89 @@
+import { React, Slot } from "@lattice-ui/core";
+import { Presence } from "@lattice-ui/layer";
+import { createSurfaceRevealRecipe, type PresenceMotionConfig, usePresenceMotion } from "@lattice-ui/motion";
+import { useTabsContext } from "./context";
+import { createTabsContentName } from "./internals/ids";
+import type { TabsContentProps } from "./types";
+
+function TabsContentImpl(props: {
+  motionPresent: boolean;
+  visible: boolean;
+  transition?: PresenceMotionConfig;
+  onExitComplete?: () => void;
+  value: string;
+  asChild?: boolean;
+  children?: React.ReactNode;
+}) {
+  const contentName = createTabsContentName(props.value);
+  const defaultTransition = React.useMemo(() => createSurfaceRevealRecipe(), []);
+
+  const config = React.useMemo(() => {
+    if (!props.transition) return defaultTransition;
+    return props.transition;
+  }, [defaultTransition, props.transition]);
+
+  const motionRef = usePresenceMotion<Frame>(props.motionPresent, config, props.onExitComplete);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[TabsContent] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Name={contentName} Visible={props.visible} ref={motionRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <frame
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(0, 0)}
+      Visible={props.visible}
+      ref={motionRef}
+    >
+      {props.children}
+    </frame>
+  );
+}
+
+export function TabsContent(props: TabsContentProps) {
+  const tabsContext = useTabsContext();
+  const selected = tabsContext.value === props.value;
+  const forceMount = props.forceMount === true;
+
+  if (forceMount) {
+    return (
+      <TabsContentImpl
+        asChild={props.asChild}
+        motionPresent={selected}
+        transition={props.transition}
+        value={props.value}
+        visible={selected}
+      >
+        {props.children}
+      </TabsContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      present={selected}
+      render={(state) => (
+        <TabsContentImpl
+          asChild={props.asChild}
+          motionPresent={state.isPresent}
+          onExitComplete={state.onExitComplete}
+          transition={props.transition}
+          value={props.value}
+          visible={true}
+        >
+          {props.children}
+        </TabsContentImpl>
+      )}
+    />
+  );
+}

package/src/Tabs/TabsList.tsx

@@ -0,0 +1,19 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { TabsListProps } from "./types";
+
+export function TabsList(props: TabsListProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[TabsList] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(0, 0)}>
+      {props.children}
+    </frame>
+  );
+}

package/src/Tabs/TabsRoot.tsx

@@ -0,0 +1,124 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import {
+  findOrderedSelectionEntry,
+  focusOrderedSelectionEntry,
+  getOrderedSelectionEntries,
+  getRelativeOrderedSelectionEntry,
+} from "@lattice-ui/focus";
+import { TabsContextProvider } from "./context";
+import type { TabsProps, TabsTriggerRegistration } from "./types";
+
+function resolveNextValue(
+  currentValue: string | undefined,
+  orderedTriggers: Array<TabsTriggerRegistration>,
+  fallbackOrder: number | undefined,
+) {
+  const enabled = orderedTriggers.filter((trigger) => !trigger.getDisabled());
+  if (enabled.size() === 0) {
+    return undefined;
+  }
+
+  if (currentValue === undefined) {
+    return enabled[0]?.value;
+  }
+
+  const selectedEnabled = enabled.find((trigger) => trigger.value === currentValue);
+  if (selectedEnabled) {
+    return selectedEnabled.value;
+  }
+
+  const selected = orderedTriggers.find((trigger) => trigger.value === currentValue);
+  const anchorOrder = selected?.order ?? fallbackOrder;
+  if (anchorOrder !== undefined) {
+    const after = enabled.find((trigger) => trigger.order > anchorOrder);
+    if (after) {
+      return after.value;
+    }
+  }
+
+  return enabled[0]?.value;
+}
+
+export function TabsRoot(props: TabsProps) {
+  const orientation = props.orientation ?? "horizontal";
+  const [value, setValueState] = useControllableState<string | undefined>({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) {
+        props.onValueChange?.(nextValue);
+      }
+    },
+  });
+
+  const triggerRegistryRef = React.useRef<Array<TabsTriggerRegistration>>([]);
+  const lastSelectedOrderRef = React.useRef<number>();
+  const [registryRevision, setRegistryRevision] = React.useState(0);
+
+  const registerTrigger = React.useCallback((trigger: TabsTriggerRegistration) => {
+    triggerRegistryRef.current.push(trigger);
+    setRegistryRevision((revision) => revision + 1);
+
+    return () => {
+      const index = triggerRegistryRef.current.findIndex((entry) => entry.id === trigger.id);
+      if (index >= 0) {
+        triggerRegistryRef.current.remove(index);
+        setRegistryRevision((revision) => revision + 1);
+      }
+    };
+  }, []);
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      const orderedTriggers = getOrderedSelectionEntries(triggerRegistryRef.current);
+      const selected = orderedTriggers.find((trigger) => trigger.value === nextValue && !trigger.getDisabled());
+      if (selected) {
+        lastSelectedOrderRef.current = selected.order;
+      }
+
+      setValueState(nextValue);
+    },
+    [setValueState],
+  );
+
+  const moveSelection = React.useCallback(
+    (fromValue: string, direction: -1 | 1) => {
+      const currentTrigger =
+        findOrderedSelectionEntry(triggerRegistryRef.current, (trigger) => trigger.value === fromValue) ?? undefined;
+      const nextTrigger = getRelativeOrderedSelectionEntry(triggerRegistryRef.current, currentTrigger?.id, direction);
+      if (!nextTrigger) {
+        return;
+      }
+
+      focusOrderedSelectionEntry(nextTrigger);
+      setValue(nextTrigger.value);
+    },
+    [setValue],
+  );
+
+  React.useEffect(() => {
+    const orderedTriggers = getOrderedSelectionEntries(triggerRegistryRef.current);
+    const selected = orderedTriggers.find((trigger) => trigger.value === value && !trigger.getDisabled());
+    if (selected) {
+      lastSelectedOrderRef.current = selected.order;
+    }
+
+    const nextValue = resolveNextValue(value, orderedTriggers, lastSelectedOrderRef.current);
+    if (nextValue !== value) {
+      setValueState(nextValue);
+    }
+  }, [registryRevision, setValueState, value]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      orientation,
+      setValue,
+      registerTrigger,
+      moveSelection,
+    }),
+    [moveSelection, orientation, registerTrigger, setValue, value],
+  );
+
+  return <TabsContextProvider value={contextValue}>{props.children}</TabsContextProvider>;
+}

package/src/Tabs/TabsTrigger.tsx

@@ -0,0 +1,171 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useFocusNode } from "@lattice-ui/focus";
+import { createSelectionResponseRecipe, useResponseMotion } from "@lattice-ui/motion";
+import { useTabsContext } from "./context";
+import { createTabsTriggerName } from "./internals/ids";
+import type { TabsTriggerProps } from "./types";
+
+let nextTriggerId = 0;
+let nextTriggerOrder = 0;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function TabsTrigger(props: TabsTriggerProps) {
+  const tabsContext = useTabsContext();
+  const triggerRef = React.useRef<GuiObject>();
+  const selected = tabsContext.value === props.value;
+  const disabled = props.disabled === true;
+  const disabledRef = React.useRef(disabled);
+
+  React.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+
+  const triggerIdRef = React.useRef(0);
+  if (triggerIdRef.current === 0) {
+    nextTriggerId += 1;
+    triggerIdRef.current = nextTriggerId;
+  }
+
+  const triggerOrderRef = React.useRef(0);
+  if (triggerOrderRef.current === 0) {
+    nextTriggerOrder += 1;
+    triggerOrderRef.current = nextTriggerOrder;
+  }
+
+  React.useEffect(() => {
+    return tabsContext.registerTrigger({
+      id: triggerIdRef.current,
+      value: props.value,
+      ref: triggerRef,
+      order: triggerOrderRef.current,
+      getDisabled: () => disabledRef.current,
+    });
+  }, [props.value, tabsContext]);
+
+  useFocusNode({
+    ref: triggerRef,
+    getDisabled: () => disabledRef.current,
+  });
+
+  const motionRef = useResponseMotion<GuiObject>(
+    selected,
+    {
+      active: { BackgroundColor3: Color3.fromRGB(86, 137, 245), TextColor3: Color3.fromRGB(235, 240, 248) },
+      inactive: { BackgroundColor3: Color3.fromRGB(47, 53, 68), TextColor3: Color3.fromRGB(136, 144, 159) },
+    },
+    createSelectionResponseRecipe(),
+  );
+  const setTriggerRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      const nextTrigger = toGuiObject(instance);
+      triggerRef.current = nextTrigger;
+      motionRef.current = nextTrigger;
+    },
+    [motionRef],
+  );
+
+  const handleActivated = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    tabsContext.setValue(props.value);
+  }, [disabled, props.value, tabsContext]);
+
+  const handleSelectionGained = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    tabsContext.setValue(props.value);
+  }, [disabled, props.value, tabsContext]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: TextButton, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      const direction =
+        tabsContext.orientation === "horizontal"
+          ? keyCode === Enum.KeyCode.Left
+            ? -1
+            : keyCode === Enum.KeyCode.Right
+              ? 1
+              : undefined
+          : keyCode === Enum.KeyCode.Up
+            ? -1
+            : keyCode === Enum.KeyCode.Down
+              ? 1
+              : undefined;
+
+      if (direction !== undefined) {
+        tabsContext.moveSelection(props.value, direction);
+        return;
+      }
+
+      if (keyCode !== Enum.KeyCode.Return && keyCode !== Enum.KeyCode.Space) {
+        return;
+      }
+
+      tabsContext.setValue(props.value);
+    },
+    [disabled, props.value, tabsContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleActivated,
+      InputBegan: handleInputBegan,
+      SelectionGained: handleSelectionGained,
+    }),
+    [handleActivated, handleInputBegan, handleSelectionGained],
+  );
+
+  const triggerName = React.useMemo(() => createTabsTriggerName(props.value), [props.value]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TabsTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Active={!disabled} Event={eventHandlers} Name={triggerName} Selectable={!disabled} ref={setTriggerRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active={!disabled}
+      AutoButtonColor={false}
+      BackgroundColor3={selected ? Color3.fromRGB(86, 137, 245) : Color3.fromRGB(47, 53, 68)}
+      BorderSizePixel={0}
+      Event={eventHandlers}
+      Selectable={!disabled}
+      Size={UDim2.fromOffset(132, 34)}
+      Text={props.value}
+      TextColor3={
+        selected
+          ? Color3.fromRGB(235, 240, 248)
+          : disabled
+            ? Color3.fromRGB(136, 144, 159)
+            : Color3.fromRGB(235, 240, 248)
+      }
+      TextSize={15}
+      ref={setTriggerRef}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Tabs/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { TabsContextValue } from "./types";
+
+const [TabsContextProvider, useTabsContext] = createStrictContext<TabsContextValue>("Tabs");
+
+export { TabsContextProvider, useTabsContext };

package/src/Tabs/internals/ids.ts

@@ -0,0 +1,13 @@
+function sanitizeValue(value: string) {
+  const lowered = string.lower(value);
+  const sanitized = string.gsub(lowered, "[^%w_%-]", "-")[0];
+  return sanitized.size() > 0 ? sanitized : "tab";
+}
+
+export function createTabsTriggerName(value: string) {
+  return `TabsTrigger:${sanitizeValue(value)}`;
+}
+
+export function createTabsContentName(value: string) {
+  return `TabsContent:${sanitizeValue(value)}`;
+}

package/src/Tabs/types.ts

@@ -0,0 +1,49 @@
+import type { PresenceMotionConfig } from "@lattice-ui/motion";
+import type React from "@rbxts/react";
+
+export type TabsSetValue = (value: string) => void;
+export type TabsOrientation = "horizontal" | "vertical";
+
+export type TabsTriggerRegistration = {
+  id: number;
+  value: string;
+  ref: React.MutableRefObject<GuiObject | undefined>;
+  order: number;
+  getDisabled: () => boolean;
+};
+
+export type TabsContextValue = {
+  value?: string;
+  orientation: TabsOrientation;
+  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;
+  children?: React.ReactNode;
+};
+
+export type TabsListProps = {
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export type TabsTriggerProps = {
+  value: string;
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TabsContentProps = {
+  transition?: PresenceMotionConfig;
+  value: string;
+  asChild?: boolean;
+  forceMount?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,20 @@
+import { TabsContent } from "./Tabs/TabsContent";
+import { TabsList } from "./Tabs/TabsList";
+import { TabsRoot } from "./Tabs/TabsRoot";
+import { TabsTrigger } from "./Tabs/TabsTrigger";
+
+export const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+} as const;
+
+export type {
+  TabsContentProps,
+  TabsContextValue,
+  TabsListProps,
+  TabsOrientation,
+  TabsProps,
+  TabsTriggerProps,
+} from "./Tabs/types";