onejs-react 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/__tests__/host-config.test.ts

@@ -108,6 +108,36 @@ describe('host-config', () => {
                 createInstance('unknown-type', {});
             }).toThrow('Unknown element type: unknown-type');
         });
+
+        it('forwards the focusable prop to the element', () => {
+            const instance = createInstance('ojs-view', { focusable: true } as TestProps);
+            expect((instance.element as unknown as { focusable: boolean }).focusable).toBe(true);
+        });
+
+        it('forwards focusable=false explicitly', () => {
+            const instance = createInstance('ojs-button', { focusable: false } as TestProps);
+            expect((instance.element as unknown as { focusable: boolean }).focusable).toBe(false);
+        });
+
+        it('does not set focusable when prop is omitted', () => {
+            const instance = createInstance('ojs-view', {});
+            expect((instance.element as unknown as { focusable?: boolean }).focusable).toBeUndefined();
+        });
+
+        it('applies disabled=true by calling SetEnabled(false)', () => {
+            const instance = createInstance('ojs-button', { disabled: true } as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(false);
+        });
+
+        it('applies disabled=false by calling SetEnabled(true)', () => {
+            const instance = createInstance('ojs-button', { disabled: false } as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(true);
+        });
+
+        it('leaves element enabled by default when disabled prop is omitted', () => {
+            const instance = createInstance('ojs-view', {});
+            expect(getMockElement(instance).enabledSelf).toBe(true);
+        });
     });
 
     describe('style application', () => {
@@ -302,6 +332,46 @@ describe('host-config', () => {
             expect(instance.appliedStyleKeys.has('width')).toBe(false);
             expect(instance.appliedStyleKeys.has('height')).toBe(true);
         });
+
+        it('updates focusable when the prop changes', () => {
+            const instance = createInstance('ojs-view', { focusable: false } as TestProps);
+            expect((instance.element as unknown as { focusable: boolean }).focusable).toBe(false);
+
+            commitUpdate(instance, 'ojs-view', { focusable: false } as TestProps, { focusable: true } as TestProps);
+            expect((instance.element as unknown as { focusable: boolean }).focusable).toBe(true);
+        });
+
+        it('does not clobber focusable when the prop becomes undefined', () => {
+            // Removing the prop should leave the element's current state alone,
+            // so element-specific defaults (Button etc.) remain intact.
+            const instance = createInstance('ojs-button', { focusable: true } as TestProps);
+            expect((instance.element as unknown as { focusable: boolean }).focusable).toBe(true);
+
+            commitUpdate(instance, 'ojs-button', { focusable: true } as TestProps, {} as TestProps);
+            expect((instance.element as unknown as { focusable: boolean }).focusable).toBe(true);
+        });
+
+        it('updates disabled when the prop changes', () => {
+            const instance = createInstance('ojs-button', { disabled: false } as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(true);
+
+            commitUpdate(instance, 'ojs-button', { disabled: false } as TestProps, { disabled: true } as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(false);
+
+            commitUpdate(instance, 'ojs-button', { disabled: true } as TestProps, { disabled: false } as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(true);
+        });
+
+        it('restores disabled to enabled when prop is removed', () => {
+            // Unlike focusable, every VisualElement starts enabled by default,
+            // so removing `disabled={true}` must call SetEnabled(true) to
+            // restore the element rather than leaving it stuck disabled.
+            const instance = createInstance('ojs-button', { disabled: true } as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(false);
+
+            commitUpdate(instance, 'ojs-button', { disabled: true } as TestProps, {} as TestProps);
+            expect(getMockElement(instance).enabledSelf).toBe(true);
+        });
     });
 
     describe('className management', () => {

package/src/__tests__/mocks.ts

@@ -71,6 +71,7 @@ export class MockVisualElement {
     text = '';
     value: unknown = undefined;
     label = '';
+    enabledSelf = true;
 
     constructor(csType = 'UnityEngine.UIElements.VisualElement') {
         this.__csHandle = Math.floor(Math.random() * 1000000);
@@ -117,6 +118,11 @@ export class MockVisualElement {
         this._children = [];
     }
 
+    // Enabled state
+    SetEnabled(value: boolean): void {
+        this.enabledSelf = value;
+    }
+
     // Class list methods
     AddToClassList(className: string): void {
         this._classList.add(className);

package/src/host-config.ts

@@ -71,6 +71,10 @@ declare const CS: {
             };
             FrostedGlassElement: new () => CSObject;
         };
+        StyleBridge: {
+            ApplyStyles: (element: CSObject, styles: Record<string, unknown>) => void;
+            AddClassesBatch: (element: CSObject, classes: string[]) => void;
+        };
     };
 };
 
@@ -385,47 +389,73 @@ function getRenderTextureHandle(value: RenderTextureRef): number {
     return value.__rtHandle ?? value.__handle ?? -1;
 }
 
-// Apply style properties to element, returns the set of applied keys
+// Apply style properties to element, returns the set of applied keys.
+//
+// Batched path: parsed style values are collected into a single dict and sent
+// to CS.OneJS.StyleBridge.ApplyStyles in one __cs.invoke crossing instead of
+// one per property. On WebGL each crossing is ~3ms (JSON marshal + reflection),
+// so the difference is ~N invokes vs 1 invoke per element. backgroundImage
+// stays on its individual GPU-bridge path since it's not a plain IStyle setter.
 function applyStyle(element: CSObject, style: ViewStyle | undefined): Set<string> {
     const appliedKeys = new Set<string>();
     if (!style) return appliedKeys;
 
-    const s = element.style;
+    const batched: Record<string, unknown> = {}
+
     for (const [key, value] of Object.entries(style)) {
         if (value === undefined) continue;
 
-        // Handle shorthand properties
         const expanded = STYLE_SHORTHANDS[key];
         if (expanded) {
-            // Parse the value once, apply to all expanded properties
-            const parsed = parseStyleValue(expanded[0], value);
+            const parsed = resolveForBatch(parseStyleValue(expanded[0], value));
             for (const prop of expanded) {
-                s[prop] = parsed;
+                batched[prop] = parsed;
                 appliedKeys.add(prop);
             }
         } else if (key === "backgroundImage") {
             if (value == null) {
                 CS.OneJS.GPU.GPUBridge.ClearElementBackgroundImage(element);
             } else if (isRenderTextureHandle(value)) {
-                // GPU compute RenderTexture handles (via rt.getUnityObject())
                 const handle = getRenderTextureHandle(value);
                 if (handle >= 0) {
                     CS.OneJS.GPU.GPUBridge.SetElementBackgroundImage(element, handle);
                 }
             } else if (typeof value === "object" && "__csHandle" in value) {
-                // C# objects: Texture2D, Sprite, VectorImage, RenderTexture
                 CS.OneJS.GPU.GPUBridge.SetElementBackgroundFromObject(element, value);
             }
             appliedKeys.add(key);
         } else {
-            // Parse and apply individual property
-            s[key] = parseStyleValue(key, value);
+            batched[key] = resolveForBatch(parseStyleValue(key, value));
             appliedKeys.add(key);
         }
     }
+
+    if (Object.keys(batched).length > 0) {
+        CS.OneJS.StyleBridge.ApplyStyles(element, batched);
+    }
+
     return appliedKeys;
 }
 
+// Force-resolve CS path proxies (e.g. CS.UnityEngine.UIElements.Justify.Center)
+// to their underlying int value. parseEnumValue and parseLength's StyleKeyword
+// cases return path proxies whose .valueOf() reads the int via GetField. The
+// non-batched __cs.invoke path resolved these implicitly via __resolveValue;
+// the batched path JSON.stringifies the whole dict, so path proxies serialize
+// via toJSON to {__csTypeRef:...} which C# can't interpret as an enum value.
+// CS object proxies (with __csHandle) keep their toJSON shape — only path
+// proxies need coercion.
+function resolveForBatch(value: unknown): unknown {
+    // Path proxies (e.g. CS.UnityEngine.UIElements.Justify.Center) have a
+    // function as their underlying Proxy target so they can also be invoked
+    // as constructors — so typeof is "function", not "object". Just check the
+    // __csPathProxy sentinel and rely on truthy/property semantics.
+    if (value && (value as any).__csPathProxy) {
+        return Number(value)
+    }
+    return value
+}
+
 // Clear style properties that are no longer in the new style
 function clearRemovedStyles(element: CSObject, oldKeys: Set<string>, newKeys: Set<string>) {
     const s = element.style;
@@ -458,13 +488,18 @@ function parseClassNames(className: string | undefined): Set<string> {
     return result;
 }
 
-// Apply className(s) to element (with escaping for Tailwind/USS compatibility)
+// Apply className(s) to element (with escaping for Tailwind/USS compatibility).
+// Routes through StyleBridge.AddClassesBatch so a multi-class string is one
+// __cs.invoke crossing instead of one per class.
 function applyClassName(element: CSObject, className: string | undefined) {
     if (!className) return;
 
-    const classes = className.split(/\s+/).filter(Boolean);
-    for (const cls of classes) {
-        element.AddToClassList(escapeClassName(cls));
+    const classes: string[] = [];
+    for (const cls of className.split(/\s+/)) {
+        if (cls) classes.push(escapeClassName(cls));
+    }
+    if (classes.length > 0) {
+        CS.OneJS.StyleBridge.AddClassesBatch(element, classes);
     }
 }
 
@@ -786,7 +821,7 @@ function applyListViewProps(element: CSListView, props: Record<string, unknown>,
 
 // Props handled by the reconciler infrastructure - not forwarded to C# elements
 const RESERVED_PROPS = new Set([
-    'children', 'key', 'ref', 'style', 'className', 'pickingMode',
+    'children', 'key', 'ref', 'style', 'className', 'pickingMode', 'focusable', 'disabled',
     'onGenerateVisualContent',
     ...Object.keys(EVENT_PROPS),
 ]);
@@ -862,6 +897,16 @@ function createInstance(type: string, props: BaseProps): Instance {
         element.pickingMode = CS.UnityEngine.UIElements.PickingMode[props.pickingMode];
     }
 
+    // Apply focusable
+    if (props.focusable !== undefined) {
+        element.focusable = props.focusable;
+    }
+
+    // Apply disabled (inverted — SetEnabled(true) means "not disabled")
+    if (props.disabled !== undefined) {
+        element.SetEnabled(!props.disabled);
+    }
+
     return instance;
 }
 
@@ -901,6 +946,24 @@ function updateInstance(instance: Instance, oldProps: BaseProps, newProps: BaseP
         }
     }
 
+    // Update focusable - only set if explicitly provided, do not override
+    // element-specific defaults (Button is focusable by default, View is not)
+    // when the prop is removed.
+    if (oldProps.focusable !== newProps.focusable && newProps.focusable !== undefined) {
+        element.focusable = newProps.focusable;
+    }
+
+    // Update disabled - unlike focusable, every VisualElement starts enabled
+    // by default, so removing the prop after a previous `disabled={true}` is
+    // expected to restore the enabled state.
+    if (oldProps.disabled !== newProps.disabled) {
+        if (newProps.disabled !== undefined) {
+            element.SetEnabled(!newProps.disabled);
+        } else {
+            element.SetEnabled(true);
+        }
+    }
+
     instance.props = newProps;
 }
 

package/src/index.ts

@@ -61,6 +61,7 @@ export type {
   DragEventData,
   GeometryEventData,
   NavigationEventData,
+  NavigationDirection,
   TransitionEventData,
   // Event handler types
   PointerEventHandler,

package/src/style-parser.ts

@@ -14,7 +14,8 @@ declare const CS: {
         UIElements: {
             Length: new (value: number, unit?: number) => CSLength;
             LengthUnit: { Pixel: number; Percent: number };
-            StyleKeyword: { Auto: number; None: number; Initial: number };
+            StyleKeyword: { Auto: number; None: number; Initial: number; Null: number };
+            StyleMaterialDefinition: new (v: unknown) => unknown;
             Angle: { Degrees: (v: number) => any; Radians: (v: number) => any; Turns: (v: number) => any; Gradians: (v: number) => any };
             Translate: new (x: any, y: any) => any;
             Rotate: new (angle: any) => any;
@@ -499,6 +500,18 @@ function parseTransformOriginStyle(value: unknown): unknown {
  * @returns Parsed value suitable for Unity UI Toolkit
  */
 export function parseStyleValue(key: string, value: unknown): unknown {
+    // `unityMaterial` is special: it can legitimately be `null` (meaning
+    // "reset to the panel default") so we can't short-circuit like the
+    // length/color paths below. Wrap in StyleMaterialDefinition either way.
+    if (key === "unityMaterial") {
+        if (value === undefined) return undefined
+        const SMD = CS.UnityEngine.UIElements.StyleMaterialDefinition
+        if (value === null) {
+            return new SMD(CS.UnityEngine.UIElements.StyleKeyword.Null)
+        }
+        return new SMD(value as any)
+    }
+
     if (value === undefined || value === null) return value
 
     // Length properties

package/src/types.ts

@@ -163,6 +163,17 @@ export interface ViewStyle {
   /** Tint color applied to the background image */
   unityBackgroundImageTintColor?: StyleColor;
 
+  /**
+   * Override the shader / material used to render the element. Accepts a
+   * Unity `Material` (typical) or a `MaterialDefinition`; `null` clears the
+   * inline override so the element falls back to the panel default.
+   *
+   * Typed loosely as `object | null` because the React layer has no reason
+   * to pin the caller to a specific C# shape — the style parser constructs
+   * a `StyleMaterialDefinition` at assignment time.
+   */
+  unityMaterial?: object | null;
+
   // Slicing
   /** 9-slice top inset */
   unitySliceTop?: number;
@@ -262,9 +273,32 @@ export interface ChangeEventData<T = unknown> {
   value: T;
 }
 
+/**
+ * Shape of the synthetic event object passed to focus / blur handlers at
+ * runtime. Matches `QuickJSBootstrap.__dispatchEvent` (see
+ * `OneJS/Resources/OneJS/QuickJSBootstrap.js.txt:980-1031`) — every synthetic
+ * event carries `target` / `currentTarget` as integer C# handles plus the
+ * propagation-control surface, and the C# bridge's `OnFocusIn` / `OnFocusOut`
+ * dispatch an empty data object, so focus events add no fields beyond the
+ * base.
+ *
+ * `relatedTarget` is intentionally absent: the C# bridge serializes `{}` for
+ * focus events and never includes it. Any code that previously depended on
+ * `e.relatedTarget` at runtime has been silently receiving `undefined`.
+ *
+ * `target` / `currentTarget` are raw C# handles, not `VisualElement` proxies.
+ * Resolve them via `CS.QuickJSNative.GetObjectByHandle(handle)` when an
+ * element reference is needed, or compare them directly against
+ * `ref.current?.__csHandle` to check element identity.
+ */
 export interface FocusEventData {
   type: string;
-  relatedTarget?: unknown;
+  target: number;
+  currentTarget: number;
+  preventDefault(): void;
+  stopPropagation(): void;
+  defaultPrevented: boolean;
+  propagationStopped: boolean;
 }
 
 export interface DragEventData {
@@ -281,9 +315,26 @@ export interface GeometryEventData {
   newRect: { x: number; y: number; width: number; height: number };
 }
 
+/**
+ * Direction values dispatched by `NavigationMoveEvent`. Mirrors
+ * `UnityEngine.UIElements.NavigationMoveEvent.Direction`, serialized to
+ * lowercase strings by the C# bridge (see `QuickJSUIBridge.OnNavigationMove`
+ * and `QuickJSBootstrap.__NAV_DIRECTION_NAMES`). `NavigationSubmitEvent` /
+ * `NavigationCancelEvent` do not carry a direction — the field is only
+ * populated for navigation-move.
+ */
+export type NavigationDirection =
+  | 'none'
+  | 'left'
+  | 'up'
+  | 'right'
+  | 'down'
+  | 'next'
+  | 'previous';
+
 export interface NavigationEventData {
   type: string;
-  direction?: string;
+  direction?: NavigationDirection;
   modifiers?: number;
 }
 
@@ -430,6 +481,29 @@ export interface BaseProps {
    */
   pickingMode?: 'Position' | 'Ignore';
 
+  // Focus
+  /**
+   * Whether this element can receive focus.
+   * Maps directly to `VisualElement.focusable` in Unity UI Toolkit.
+   *
+   * Default is element-specific (e.g. Button is focusable by default, View is not).
+   * Setting this to `true` makes the element a focus target for keyboard/gamepad
+   * navigation and enables `NavigationMoveEvent`/`NavigationSubmitEvent` routing.
+   */
+  focusable?: boolean;
+
+  // Enabled state
+  /**
+   * Whether this element is disabled. When `true`, the reconciler calls
+   * `VisualElement.SetEnabled(false)` on the underlying C# element, which
+   * applies the `:disabled` USS pseudo-class, blocks pointer events, and
+   * prevents the element and its descendants from receiving focus.
+   *
+   * Removing the prop (or setting it to `false`) restores the element to
+   * `SetEnabled(true)`. Every VisualElement starts enabled by default.
+   */
+  disabled?: boolean;
+
   // Vector drawing
   /**
    * Callback for custom vector drawing via Unity's generateVisualContent.
@@ -572,6 +646,7 @@ export interface VisualElement extends RenderContainer {
   visible: boolean;
   enabledSelf: boolean;
   enabledInHierarchy: boolean;
+  SetEnabled: (value: boolean) => void;
 
   // Text content (for TextElement-derived types)
   text?: string;