createFocusHighlightPlugin

Create a focus-highlight plugin

import {
    createFocusHighlightPlugin,
} from "@roku-sdk/flex-grid/focus-highlight";

createFocusHighlightPlugin<T = unknown>(config: FocusHighlightConfig): InitGridPlugin<T>

Description

Create a focus-highlight plugin. Pass the returned object in FlexGridConfig.plugins.

When another plugin declares provides: ["focusVisual"], this plugin suppresses its own node (it still feeds setVisibility to the engine). Cell templates cannot declare capabilities; when a template owns the focus visual (e.g. via withZoomFocus), pass renderNode: false.

Parameters

Name	Type	Description
`config`	FocusHighlightConfig

Return values

Returns InitGridPlugin<T>.

Example

import { createFocusHighlightPlugin } from "@roku-sdk/flex-grid/focus-highlight";
createFocusHighlightPlugin({ layer: "front", hideOnSmoothScroll: true });

Types

FocusHighlightConfig

Focus Highlight Config configuration and callbacks.

Name	Type	Description
`color?`	`string`	Default rectangle color (ARGB). Ignored when `render` is provided. Default `0xCC0000AA`.
`hideOnSmoothScroll?`	`boolean`	When true, the highlight fades out (opacity → 0) while a held smooth scroll glides and fades back in once it settles. Default false.
`layer?`	`"front" \| "back"`	Parent layer for the highlight (both inherit the scrolling content container scroll). `front` (default) → the front layer, above cards. `back` → the behind layer, below cards.
`render?`	`(ctx: { focusedRow: Accessor<number>; height: Accessor<number>; width: Accessor<number> }) => Element`	Renders custom content inside the focus-highlight wrapper, replacing the default red rectangle. Receives reactive accessors; read them inside JSX props, `createEffect`, or `createMemo`; never destructure at the top level. When set, the default width/height size tweens are skipped (size your content from `width`/`height`). The factory runs under `untrack`; no Solid parent context.
`renderNode?`	`boolean`	When false, the plugin feeds `visible` to the engine but does not mount its own highlight node or tweens. Use when the app handles focus visuals in cell templates (e.g. via `withZoomFocus`) but still needs per-cell `focused` gated by region focus. Default: true.
`visible?`	`Accessor<boolean>`	When it returns false, the highlight node hides and the engine clears per-cell `focused` signals (in-cell outlines, zoom-focus scale) while internal row/col focus is preserved. Use when external UI (tab bar, modal) owns focus. Defaults to always-visible.