onejs-react 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "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

@@ -786,7 +786,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 +862,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 +911,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;