Section

A container component for grouping related content within a Screen, with focus management capabilities.

Import

import { Section } from '@smart-tv/ui';

Basic Usage

import { Screen, Section, Row, Card } from '@smart-tv/ui';

function HomeScreen() {
  return (
    <Screen focusKey="home">
      <Section focusKey="hero-section">
        <h1>Featured Content</h1>
        <Row focusKey="featured-row">
          <Card focusKey="featured-1">Featured 1</Card>
          <Card focusKey="featured-2">Featured 2</Card>
        </Row>
      </Section>

      <Section focusKey="trending-section">
        <h2>Trending Now</h2>
        <Row focusKey="trending-row">
          <Card focusKey="trending-1">Trending 1</Card>
          <Card focusKey="trending-2">Trending 2</Card>
        </Row>
      </Section>
    </Screen>
  );
}

View Only Section

Use viewOnly to make the section non-focusable while allowing its children to receive focus.

<Section focusKey="header" viewOnly>
  <h1>My App</h1>
  {/* Section itself won't be focused, but buttons inside can be */}
  <Button focusKey="profile">Profile</Button>
  <Button focusKey="settings">Settings</Button>
</Section>

Auto Focus Section

Use selFocus to automatically focus this section when it mounts.

<Section focusKey="main-content" selFocus>
  <Row focusKey="content-row">
    <Card focusKey="card-1">Card 1</Card>
    <Card focusKey="card-2">Card 2</Card>
  </Row>
</Section>

Nested Sections

Sections can be nested to create complex hierarchical layouts.

<Section focusKey="main-section" className="p-8">
  <h1>Main Section</h1>

  <Section focusKey="left-panel" className="w-1/2">
    <h2>Left Panel</h2>
    <Row focusKey="left-row">
      <Button focusKey="btn-1">Button 1</Button>
      <Button focusKey="btn-2">Button 2</Button>
    </Row>
  </Section>

  <Section focusKey="right-panel" className="w-1/2">
    <h2>Right Panel</h2>
    <Row focusKey="right-row">
      <Button focusKey="btn-3">Button 3</Button>
      <Button focusKey="btn-4">Button 4</Button>
    </Row>
  </Section>
</Section>

Track Child Focus

Enable focus tracking to remember which child was last focused.

<Section
  focusKey="category-section"
  trackChildren
  saveLastFocusedChild
>
  <h2>Categories</h2>
  <Grid focusKey="categories" columns={4}>
    <Card focusKey="cat-1">Action</Card>
    <Card focusKey="cat-2">Comedy</Card>
    <Card focusKey="cat-3">Drama</Card>
    <Card focusKey="cat-4">Horror</Card>
  </Grid>
  {/* When returning to this section, focus will restore to the last selected category */}
</Section>

Section with Focus Boundary

Restrict navigation to keep focus within the section.

<Section
  focusKey="sidebar"
  isFocusBoundary
  focusBoundaryDirections={['left']} // Can't navigate left out of sidebar
  className="fixed left-0 top-0 h-full w-64"
>
  <nav>
    <Button focusKey="nav-home">Home</Button>
    <Button focusKey="nav-movies">Movies</Button>
    <Button focusKey="nav-series">Series</Button>
    <Button focusKey="nav-settings">Settings</Button>
  </nav>
</Section>

Preferred Child Focus

Specify which child should receive focus by default.

<Section
  focusKey="menu-section"
  preferredChildFocusKey="play-button"
>
  <Button focusKey="back-button">Back</Button>
  <Button focusKey="play-button">Play</Button>
  <Button focusKey="info-button">Info</Button>
  {/* When this section is focused, "play-button" will be focused first */}
</Section>

Props

Prop	Type	Default	Description
focusKey	string	required	Unique identifier
viewOnly	boolean	false	Non-focusable section
selFocus	boolean	false	Auto-focus on mount
trackChildren	boolean	false	Track child focus
saveLastFocusedChild	boolean	false	Restore child focus
preferredChildFocusKey	string	-	Default child to focus
isFocusBoundary	boolean	false	Restrict focus within
focusBoundaryDirections	Direction[]	-	Blocked directions
className	string	-	CSS classes

Best Practices

Use Section to group related content within a Screen
Set viewOnly=true for non-interactive header/footer sections
Enable trackChildren and saveLastFocusedChild for better navigation memory
Use preferredChildFocusKey to guide initial focus within the section
Combine with Grid or Row components for structured layouts
Use focus boundaries sparingly, only for modal-like sections