@24i/bigscreen-sdk 1.0.34 → 1.0.35-alpha.2578

package/packages/epg/src/v2/interface.ts

@@ -1,1519 +1,1519 @@
-import { Reference, Component, Children } from '@24i/bigscreen-sdk/jsx';
-import { IFocusable } from '@24i/bigscreen-sdk/focus';
-import { ModalService } from '@24i/bigscreen-sdk/modal-service';
-import { IEvents, EventMapType } from '@24i/bigscreen-sdk/events-manager';
-import { Asset } from '@24i/smartapps-datalayer/models';
-import { ICheckbox, PickerMode } from '@24i/bigscreen-sdk/picker';
-
-// MARK: Shared Props (alphabetical order)
-
-type AdditionalRowsProp = {
-    /**
-     * The number of rows that are rendered at the bottom below navigatable rows
-     * These can get covered sometimes by ProgramInfo for example
-     */
-    additionalRows: number,
-};
-
-type ChannelDataProp = {
-    /**
-     * An array with channel data
-     */
-    channelData: Asset[],
-};
-
-type ChannelHeaderWidthPxProp = {
-    /**
-     * The width of the channel header column in pixels
-     */
-    channelHeaderWidthPx: number,
-};
-
-type ChannelLessOnFocusChangeProp<T extends Program> = {
-    /**
-     * Called every time focus moves to different cell (even after mouse focuses the cell)
-     */
-    onFocusChange: ChannelLessFocusChangeCallback<T>,
-};
-
-type ChannelLessOnItemPressProp<T extends Program> = {
-    /**
-     * Called after pressing any item with data (not loading ones)
-     */
-    onItemPress: ChannelLessItemPressCallback<T>,
-};
-
-type DataGetterProp = {
-    dataGetter: (range: DataRange) => Asset[],
-};
-
-type DataProp = {
-    /**
-     * A Data Manager
-     */
-    data: DataManager,
-};
-
-type DataManagersProp = {
-    /**
-     * An array of Data Managers
-     */
-    dataManagers: DataManager[],
-};
-
-type DatePickerProp = {
-    /**
-     * Props for the DatePicker component
-     * If omitted the Day component will be rendered instead
-     */
-    datePickerProps: OutsideDatePickerProps,
-};
-
-type FetchProgramsProp = {
-    /**
-     * Function called by EPG to fetch more data for a channel
-     */
-    fetchPrograms: ProgramsFetcher,
-};
-
-type InitialChannelIndexProp = {
-    /**
-     * The initial index in the channels list that should be scrolled to and focus after
-     * rendering the EPG
-     */
-    initialChannelIndex: number,
-};
-
-type InitialTimestampProp = {
-    /**
-     * The initial timestamp that should be used to render in the center of the EPG
-     */
-    initialTimestamp: number,
-};
-
-type IsLoadingProp = {
-    /**
-     * Flag to distinguish a cell that is intended to be used only for loading placeholder purposes
-     */
-    isLoading: boolean,
-};
-
-type ItemProp = {
-    /**
-     * Data for the program
-     */
-    item: Asset,
-};
-
-type LimitFromMsProp = {
-    /**
-     * The lowest timestamp in ms that can be navigated by EPG
-     * Render, as well as fetch, can go slightly more into history
-     */
-    limitFromMs: number,
-};
-
-type LimitToMsProp = {
-    /**
-     * The highest timestamp in ms that can be navigated by EPG
-     * Render, as well as fetch, can go slightly more into future
-     */
-    limitToMs: number,
-};
-
-type NavigatableRowsProp = {
-    /**
-     * The number of rows that can be navigated with focus up/down
-     */
-    navigatableRows: number,
-};
-
-type OnFocusChangeProp<T extends Program> = {
-    /**
-     * Called every time focus moves to different cell (even after mouse focuses the cell)
-     */
-    onFocusChange: FocusChangeCallback<T>,
-};
-
-type OnItemPressProp<T extends Program> = {
-    /**
-     * Called after pressing any item with data (not loading ones)
-     */
-    onItemPress: ItemPressCallback<T>,
-};
-
-type OnMouseEnterProp = {
-    /**
-     * onMouseEnter listener used only on the inside to synchronize keyboard and mouse navigation
-     */
-    onMouseEnter: (data: Asset | undefined) => void,
-};
-
-type OnScrolledToTimestampProp = {
-    /**
-     * Callback for scrolling left/right
-     * @param timestamp Current timestamp of the center of the EPG in milliseconds
-     */
-    onScrolledToTimestamp: (timestamp: number) => void,
-};
-
-type PixelInMsProp = {
-    /**
-     * The ratio between pixels and milliseconds used in the EPG
-     */
-    pixelInMs: number,
-};
-
-type PluginsProp<T extends Program> = {
-    /**
-     * Prop for extending the EPG functionality
-     */
-    plugins: (PluginComponent<T> | PluginFC)[],
-};
-
-type ProgramTextModeResolverProp = {
-    /**
-     * Prop for resolving the text mode of the component based on the cell width
-     * @param widthPx the width of the cell in pixels
-     * @returns ProgramTextMode to use
-     */
-    programTextModeResolver: (widthPx: number) => ProgramTextMode,
-};
-
-type RenderChannelHeaderProp<T extends Header> = {
-    /**
-     * Function to render custom channel header item
-     */
-    renderChannelHeader: ChannelHeaderRenderer<T>,
-};
-
-type RenderDayProp<X extends Day> = {
-    /**
-     * Function to render custom day displaying component
-     */
-    renderDay?: DayRenderer<X>,
-};
-
-type RenderNowLineHeaderProp = {
-    /**
-     * Function to render custom now line header (e.g. LIVE arrow pointer at the top of the line)
-     */
-    renderNowLineHeader: (timestamp: number, ref: Reference<NowLineHeader>) => JSX.Element,
-};
-
-type RenderProgramProp<T extends Program> = {
-    renderProgram: ProgramRenderer<T>,
-};
-
-type RenderTimeProp<T extends TimelineSection> = {
-    /**
-     * Custom function to render time inside the timeline section
-     */
-    renderTime: TimeRenderer<T>,
-};
-
-type IsFocusInRowsProp = {
-    /**
-     * Returns whether the focus is in Rows part of the epg.
-     * @returns true fif cosu is in rows part, false otherwise
-     */
-    isFocusInRows: () => boolean,
-};
-
-type RowHeightPxProp = {
-    /**
-     * The height of the EPG row in pixels
-     */
-    rowHeightPx: number,
-};
-
-type SectionWidthMsProp = {
-    /**
-     * The width of the section in upper timeline header
-     */
-    sectionWidthMs: number,
-};
-
-type ScrollStepMsProp = {
-    /**
-     * The number of milliseconds that should be scrolled when moving left and right
-     */
-    scrollStepMs: number,
-};
-
-type SmallestAllowedCellPxProp = {
-    /**
-     * If the width of the cell is smaller than this the cell will have a special
-     * class `too-small`. Value in pixels.
-     */
-    smallestAllowedCellPx: number,
-};
-
-type IdleTimerMsProp = {
-    /**
-     * The number of milliseconds of inactivity (no input) after which EPG starts jumps
-     * to the current time.
-     */
-    idleTimerMs: number,
-};
-
-type TimeProp = {
-    /**
-     * The time interface that provides current time and time change events
-     */
-    time: Time,
-};
-
-type TimeProviderProp = {
-    /**
-     * Function for providing current time
-     */
-    timeProvider: TimeProvider,
-};
-
-type TimelineSectionWidthMsProp = {
-    /**
-     * The width of the timeline section (time distance between markers)
-     */
-    timelineSectionWidthMs: number,
-};
-
-type TimelineWidthMsProp = {
-    /**
-     * The width of the visible epg section with data in milliseconds
-     */
-    timelineWidthMs: number,
-};
-
-type TimelineWidthPxProp = {
-    /**
-     * The width of the visible epg section with data in pixels
-     */
-    timelineWidthPx: number,
-};
-
-type TimestampProp = {
-    /**
-     * The current timestamp of the center of the EPG
-     */
-    timestamp: number,
-};
-
-type XOffsetPxProp = {
-    /**
-     * The initial x-axis offset in pixels to set during the render
-     */
-    xOffsetPx: number,
-};
-
-type WidthPxProp = {
-    /**
-     * The initial width in pixels to set during the render
-     */
-    widthPx: number,
-};
-
-// MARK: shared types and interfaces
-
-/**
- * This function should return rendered ChannelHeader.
- * ChannelHeader usually consists of channel number and channel icon or name.
- * @typeparam T Channel header component - defaults to Header component
- * @param data Channel data
- * @param ref Reference to the component
- * @returns JSX.Element
- */
-export type ChannelHeaderRenderer<T extends Header> = (
-    (data: Asset, ref: Reference<T>) => JSX.Element
-);
-
-/**
- * This function should fetch and asynchronously return more programs for given channel
- * and timeframe.
- * @param channel Channel data
- * @param from Timestamp for the start of the timeframe
- * @param to Timestamp for the end of the timeframe
- * @returns Promise<Asset[]>
- */
-export type ProgramsFetcher<
-> = (channel: Asset, from: number, to: number) => Promise<Asset[]>;
-
-export type FetchCallback = () => void;
-
-/**
- * This function should return custom visual for Program.
- * @typeparam T Program component - defaults to EpgProgram component
- * @param isLoading Flag to mark whether it is just a loading placeholder
- * @param data Program data or undefined for loading placeholder
- * @param ref Reference to the component
- * @param widthPx The initial width of the Program component to render with
- * @param xOffsetPx The initial offset of the Program component to render with
- * @param textMode The initial program text mode during the render
- * @returns JSX.Element
- */
-export type ProgramRenderer<T extends Program> = (
-    isLoading: boolean,
-    data: Asset | undefined,
-    ref: Reference<T>,
-    widthPx: number,
-    xOffsetPx: number,
-    textMode: ProgramTextMode,
-) => JSX.Element;
-
-/**
- * This function should return custom visual of the time in Timeline.
- * This component must implement TimelineSection interface.
- * @param timestamp Timestamp of the time for formatting
- * @param offset Initial offset to render with in pixels
- * @param width width of the section to render in pixels
- * @param ref Reference to TimelineSection component
- * @returns JSX.Element
- */
-export type TimeRenderer<
-    T extends TimelineSection = TimelineSection,
-> = (
-    timestamp: number, offset: number, width: number, ref: Reference<T>,
-) => JSX.Element;
-
-/**
- * This function will be called when an Item with Program Data is pressed.
- * @typeparam T extension of a Program component
- * @param data Current Program data
- * @param channel The program's channel
- * @param component Pressed Program component
- */
-export type ItemPressCallback<T extends Program> = (
-    (data: Asset, channel: Asset, component: T) => void
-);
-
-/**
- * This function will be called when an Item with Program Data is pressed.
- * @typeparam T extension of a Program component
- * @param data Current EpgProgram data
- * @param component Pressed Program component
- */
-export type ChannelLessItemPressCallback<T extends Program> = (
-    (data: Asset, component: T) => void
-);
-
-/**
- * This function will be called when any item is focused
- * @typeparam T extension of a Program component
- * @param data Current EpgProgram data or undefined if the focus is on loading cell
- * @param channel The program's channel
- * @param component Program component of the focused Cell
- */
-export type FocusChangeCallback<T extends Program> = (
-    (data: Asset | undefined, channel: Asset, component: T) => void
-);
-
-/**
- * This function will be called when any item is focused
- * @typeparam T extension of a Program component
- * @param data Current EpgProgram data or undefined if the focus is on loading cell
- * @param component Program component of the focused Cell
- */
-export type ChannelLessFocusChangeCallback<T extends Program> = (
-    (data: Asset | undefined, component: T) => void
-);
-
-export type DayRenderer<
-    T extends Day = Day,
-> = (timestamp: number, ref: Reference<T>) => JSX.Element;
-
-/**
- * Simple functions that returns current unix time in milliseconds
- */
-export type TimeProvider = () => number;
-
-// MARK: DataManager
-
-export type DataRange = [number, number];
-
-export type DataUpdateCallback = () => void;
-
-export interface DataManager {
-    getChannel: () => Asset,
-    getData: () => Asset[],
-    getDataFromRange: (range: DataRange) => Asset[],
-    getNextProgramStart: (timestamp: number) => number | null,
-    getPreviousProgramEnd: (timestamp: number, scrollStepMs: number) => number | null,
-    setOnDataUpdated: (callback: DataUpdateCallback) => void,
-    removeOnDataUpdated: () => void,
-    fetchAroundTimestampIfNeeded: (timestamp: number) => void,
-}
-
-// MARK: Time Events
-
-export interface TimeEvents extends EventMapType {
-    'onminute': (timestamp: number) => void,
-    'onsecond': (timestamp: number) => void,
-}
-
-/**
- * Interface for managing time updates inside EPG
- */
-export interface Time extends IEvents<TimeEvents> {
-    /**
-     * This function starts the timer that fires the events every time interval
-     */
-    initialize: () => void,
-    /**
-     * This function stops the timer
-     */
-    destroy: () => void,
-    /**
-     * Returns current timestamp in ms
-     */
-    getCurrentTime: () => number,
-}
-
-// MARK: EPG Program Component
-
-export type ProgramTextMode = 'full' | 'ellipsis_only' | 'empty';
-
-/**
- * Props passed to custom rendered Program Component.
- */
-export type ProgramProps = {
-    /**
-     * Program data
-     */
-    data?: Asset,
-    /**
-     * Flag that it is a loading placeholder
-     */
-    isLoading?: boolean,
-    /**
-     * Initial width of the Component
-     */
-    widthPx: number,
-    /**
-     * Initial x offset of the Component
-     */
-    xOffsetPx: number,
-    /**
-     * The text mode for the initial Program render
-     */
-    textMode: ProgramTextMode,
-};
-
-/**
- * Custom visual component for a program.
- * This component should render a pure div and shouldn't handle any events
- * like onPress or onMouseEnter. This is done by Cell component in EPG core.
- * This component can be reused for multiple programs during its lifetime.
- */
-export interface Program
-    extends Component<any> {
-    /**
-     * Function to offset the Program component inside the cell.
-     * This is so the cells at the start of the viewport show text from the beginning
-     * even though the Cell itself goes more to the past.
-     * @param offset offset in x axis in px
-     */
-    setOffset?(offset: number): void,
-    /**
-     * Function to change width of the Program component inside the cell.
-     * This is so the cells at the start of the viewport show text from the beginning
-     * even though the Cell itself goes more to the past.
-     * @param width width in px
-     */
-    setWidth?(width: number): void,
-    /**
-     * Function to change data and the visuals.
-     * (E.g. Use setText to change the name)
-     * @param data New Program data
-     * @param textMode the text mode to use to display the program
-     * @param widthPx the full width of the cell in pixels that can be used to alter styling
-     * @param xOffsetPx the offset of the cell in pixels that can be used to alter styling
-     */
-    updateData(data: Asset, textMode: ProgramTextMode, widthPx: number, xOffsetPx: number): void,
-}
-
-export interface ProgramComponent {
-    new (props: any): Program,
-}
-
-// MARK: EPG Header Component
-
-/**
- * Props for the Channel Header Component
- */
-export type HeaderProps = {
-    /**
-     * Channel Data
-     */
-    data: Asset,
-};
-
-/**
- * Channel Header component.
- * This component represents the channel header aka channel number and name/icon.
- * It can be reused by multiple headers.
- */
-export interface Header
-    extends Component<any> {
-    /**
-     * Function to show the header element
-     */
-    show(): void,
-    /**
-     * Function to hide the header element
-     */
-    hide(): void,
-    /**
-     * Function to update the visuals
-     */
-    updateData(data: Asset): void,
-}
-
-export interface HeaderComponent {
-    new (props: any): Header,
-}
-
-// MARK: EPG NowLineHeader Component
-
-export interface NowLineHeader extends Component<any> {
-    /**
-     * Function to display the displayed time in the timeline header
-     * @param timestamp current time in ms
-     */
-    updateData: (timestamp: number) => void,
-}
-
-export interface NowLineHeaderComponent {
-    new (props: any): NowLineHeader,
-}
-
-// MARK: EPG Day Component
-
-/**
- * Props for the Day Component
- */
-export type DayProps = (
-    TimestampProp
-);
-
-export interface Day extends Component<any> {
-    /**
-     * Function to update the displayed date when the visible day changes in EPG
-     * @param timestamp New timestamp for the date
-     */
-    updateData: (timestamp: number) => void,
-}
-
-export interface DayComponent {
-    new (props: DayProps): Day,
-}
-
-// MARK: EPG DatePicker Component
-
-/**
- * Props for the EPG DatePicker Component
- */
-export type DatePickerProps = {
-    /**
-     * Number of days into the past to show (today excluded)
-     */
-    daysInPast: number,
-    /**
-     * Number of days to future to show (today excluded)
-     */
-    daysToFuture: number,
-    /**
-     * Number of milliseconds since the day start to scroll to
-     * @example (8 * 60 + 30) * 1000 will scroll directly to 8:30 on date picker day selected
-     */
-    dayStartOffsetMs?: number,
-    /**
-     * Current selected value
-     */
-    timestamp: number,
-    /**
-     * Number of visible items
-     */
-    visibleItems: number,
-    /**
-     * Number of pixels to scroll
-     */
-    scrollStep: number,
-    /**
-     * Reference to the modal service
-     */
-    modalService: Reference<ModalService>,
-    /**
-     * Function to call when the picker value changes
-     * @param timestamp currently selected value as timestamp in ms
-     */
-    onValueChange: (timestamp: number) => void,
-    /**
-     * Function to format the date string in DatePicker
-     * @param date Date object of the value to format
-     * @returns string to display
-     */
-    format?: (date: Date) => string,
-    /**
-     * Custom overrides for the DatePicker
-     */
-    overrides?: Record<number, string>,
-    /**
-     * Optional setting for Picker Mode (defaults to MODAL)
-     */
-    mode?: PickerMode,
-    /**
-     * Optional className to pass to DatePicker
-     */
-    className?: string,
-    /**
-     * Optional className to pass to PickerModal dialog
-     */
-    modalClassName?: string,
-    /**
-     * Optional override for checkbox
-     */
-    Checkbox?: ICheckbox<any>,
-    /**
-     * Optional override for checkmark
-     */
-    checkmark?: Children,
-    /**
-     * Custom render method for picker button
-     */
-    render?: (
-        buttonRef: Reference<HTMLElement>,
-        textRef: Reference<HTMLElement>,
-        openCallback: () => void,
-        text?: string,
-    ) => JSX.Element,
-};
-
-export type OutsideDatePickerProps = Omit<
-DatePickerProps, 'timestamp' | 'onValueChange'
->;
-
-export type DatePickerDateProps = 'daysInPast' | 'daysToFuture' | 'dayStartOffsetMs' | 'timestamp';
-
-/**
- * EPG DatePicker Component
- */
-export interface DatePicker extends Component<DatePickerProps>, IFocusable {
-    /**
-     * Function to update current DatePicker value when the day changes
-     */
-    updateData: (timestamp: number) => void,
-}
-
-export interface DatePickerComponent {
-    new (props: DatePickerProps): DatePicker,
-}
-
-// MARK: EPG NowLine Component
-
-/**
- * Props for NowLine Component (Vertical line marking current time across the rows).
- */
-export type NowLineProps = (
-    & TimelineWidthPxProp
-    & TimestampProp
-    & TimeProp
-    & PixelInMsProp
-    & ChannelHeaderWidthPxProp
-    & Partial<RenderNowLineHeaderProp>
-);
-
-/**
- * NowLine component renders vertical line marking current time.
- */
-export interface NowLine extends Component<NowLineProps> {
-    /**
-     * Function to update NowLine position when EPG scrolls left/right
-     * @param timestamp Current timestamp of the EPG
-     */
-    scrollToTimestamp: (timestamp: number) => void,
-}
-
-export interface NowLineComponent {
-    new (props: NowLineProps): NowLine,
-}
-
-// MARK: EPG Timeline Component
-
-/**
- * Props for the Timeline Component
- * @typeparam T TimelineSection component
- */
-export type TimelineProps<
-    T extends TimelineSection,
-> = (
-    & PixelInMsProp
-    & TimelineWidthPxProp
-    & ChannelHeaderWidthPxProp
-    & TimestampProp
-    & RenderTimeProp<T>
-    & SectionWidthMsProp
-);
-
-/**
- * Timeline Component
- * This component renders the timeline at the top of the EPG
- * @typeparam T TimelineSection component
- */
-export interface Timeline<
-    T extends TimelineSection,
-> extends Component<TimelineProps<T>> {
-    /**
-     * Function to set the current timestamp and scroll to it.
-     */
-    scrollToTimestamp: (timestamp: number) => void,
-}
-
-export interface TimelineComponent<
-    T extends TimelineSection,
-> {
-    new (props: TimelineProps<T>): Timeline<T>,
-}
-
-// MARK: TimelineSection Component
-
-/**
- * Props for the TimelineSection Component
- */
-export type TimelineSectionProps = (
-    & TimestampProp
-    & XOffsetPxProp
-    & WidthPxProp
-);
-
-/**
- * TimelineSection Component
- * This component displays the time on the Timeline
- * It can be reused to display multiple times.
- */
-export interface TimelineSection extends Component<any> {
-    /**
-     * Function to set offset in x direction.
-     * @param x x direction offset in pixels
-     */
-    setOffset: (x: number) => void,
-    /**
-     * Function to update displayed time
-     * @param timestamp New timestamp to format and render
-     */
-    updateData: (timestamp: number) => void,
-}
-
-export interface TimelineSectionComponent {
-    new (props: TimelineSectionProps): TimelineSection,
-}
-
-// MARK: EPG RowsManager Component
-
-export type RowsManagerProps<
-    T extends Header,
-    U extends Program,
-> = (
-    & DataManagersProp
-    & InitialChannelIndexProp
-    & NavigatableRowsProp
-    & AdditionalRowsProp
-    & PixelInMsProp
-    & TimelineWidthPxProp
-    & TimelineWidthMsProp
-    & TimestampProp
-    & TimeProp
-    & ScrollStepMsProp
-    & RowHeightPxProp
-    & ProgramTextModeResolverProp
-    & OnItemPressProp<U>
-    & OnMouseEnterProp
-    & OnFocusChangeProp<U>
-    & RenderChannelHeaderProp<T>
-    & RenderProgramProp<U>
-    & IsFocusInRowsProp
-    & SmallestAllowedCellPxProp
-);
-
-/**
- * RowsManager Component
- * It does heavy lifting for maintaining and managing rows
- * so it could be better split from the main EPG Component
- */
-export interface RowsManager<
-    T extends Header,
-    U extends Program,
-> extends Component<RowsManagerProps<T, U>> {
-    /**
-     * Function called on pressing UP. Used to navigate up in the channels list.
-     */
-    onUp: () => boolean,
-    /**
-     * Function called on pressing DOWN. Used to navigate down in the channels list.
-     */
-    onDown: () => boolean,
-    /**
-     * Function called on pressing CHANNEL_UP. Used to navigate page up in the channels list.
-     */
-    onChannelUp: () => boolean,
-    /**
-     * Function called on pressing CHANNEL_DOWN. Used to navigate page down in the channels list.
-     */
-    onChannelDown: () => boolean,
-    /**
-     * Function to call when fast scrolling starts
-     * - to optimize cell rendering during the fast scroll
-     */
-    onFastScrollingStart: () => void,
-    /**
-     * Function to call when fast vertical scrolling ends
-     * - to render cell data after being optimized for fast scroll
-     * - to call fetch in data managers connected to rows
-     */
-    onFastScrollingEnd: () => void,
-    /**
-     * Function to find the start of the next program on the active row.
-     * @param timestamp timestamp to search from
-     * @returns timestamp of the start of the next program or end loading cell
-     */
-    getNextProgramStart: (timestamp: number) => number | null,
-    /**
-     * Function to find the end of the previous program on the active row.
-     * @param timestamp timestamp to search from
-     * @param customScrollStepMs optional custom offset from previous program end
-     * @returns timestamp of the end of the previous program or start loading cell
-     */
-    getPreviousProgramEnd: (timestamp: number, customScrollStepMs?: number) => number | null,
-    /**
-     * Sets the channel index to scroll to.
-     */
-    setCurrentChannelIndex: (index: number) => void,
-    /**
-     * Sets the focus timestamp
-     */
-    setFocusTimestamp: (timestamp: number) => void,
-    /**
-     * Function that returns whether there are rows higher that could be navigated.
-     */
-    canGoUp: () => boolean,
-    /**
-     * Function that returns whether there are rows lower that could be navigated.
-     */
-    canGoDown: () => boolean,
-    /**
-     * Focuses the active row at a given timestamp.
-     */
-    focus: (timestamp: number, options?: FocusOptions) => void,
-    /**
-     * Scrolls the rows to the given timestamp.
-     */
-    scrollRowsToTimestamp: (timestamp: number) => void,
-    /**
-     * Function to scroll up
-     * @returns true if it was scrolled, false otherwise
-     */
-    scrollUp: () => boolean,
-    /**
-     * Function to scroll down
-     * @returns true if it was scrolled, false otherwise
-     */
-    scrollDown: () => boolean,
-}
-
-export interface RowsManagerComponent<
-    T extends Header,
-    U extends Program,
-> {
-    new (props: RowsManagerProps<T, U>): RowsManager<T, U>,
-}
-
-// MARK: EPG Row Component
-
-/**
- * Props for EPG Row component
- * @typeparam T Program component - defaults to EpgProgram
- */
-export type RowProps<
-    T extends Program,
-> = (
-    & DataProp
-    & PixelInMsProp
-    & TimelineWidthPxProp
-    & TimelineWidthMsProp
-    & TimestampProp
-    & TimeProp
-    & ScrollStepMsProp
-    & SmallestAllowedCellPxProp
-    & ProgramTextModeResolverProp
-    & OnItemPressProp<T>
-    & OnMouseEnterProp
-    & OnFocusChangeProp<T>
-    & RenderProgramProp<T>
-);
-
-/**
- * EPG Row component
- * It can be reused by multiple rows
- * @typeparam T Program component - defaults to EpgProgram
- */
-export interface Row<
-    T extends Program,
-> extends Component<RowProps<T>> {
-    /**
-     * Timestamp for the center of the row
-     */
-    timestamp: number;
-    /**
-     * Function to call when fast scrolling starts
-     * - to optimize cell rendering during the fast scroll
-     */
-    onFastScrollingStart: () => void,
-    /**
-     * Function to call when fast vertical scrolling ends
-     * - to render cell data after being optimized for fast scroll
-     * - to call fetch in data managers connected to rows
-     */
-    onFastScrollingEnd: () => void,
-    /**
-     * Function to find the start of the next program on the active row.
-     * @param timestamp timestamp to search from
-     * @returns timestamp of the start of the next program or end loading cell
-     */
-    getNextProgramStart: (timestamp: number) => number | null,
-    /**
-     * Function to find the end of the previous program on the active row.
-     * @param timestamp timestamp to search from
-     * @param customScrollStepMs optional custom offset from previous program end
-     * @returns timestamp of the end of the previous program or end loading cell
-     */
-    getPreviousProgramEnd: (timestamp: number, customScrollStepMs?: number) => number | null,
-    /**
-     * Function to set the row as active (the one with focus)
-     */
-    setActive: () => void,
-    /**
-     * Function to set the row as inactive (the one without focus)
-     */
-    setInactive: () => void,
-    /**
-     * Function to offset the row for vertucal scrolling
-     * @param yOffsetPx number of pixels to set as y axis offset
-     */
-    setOffset: (yOffsetPx: number) => void,
-    /**
-     * Function to return true if row already has this data manager
-     * @param dataManager DataManager that gets compared to the current dataManager
-     * @returns true if they are the same reference, false otherwise
-     */
-    hasDataManager: (dataManager: DataManager) => boolean,
-    /**
-     * Function to focus the EPG Row
-     * @param timestamp timestamp where the focus should happen
-     * @param options FocusOptions to pass down
-     */
-    focus: (timestamp: number, options?: FocusOptions) => void,
-    /**
-     * Function to set the current timestamp and scroll to it.
-     * @param timestamp timestamp to scroll to
-     */
-    scrollToTimestamp: (timestamp: number) => void,
-    /**
-     * Function to show the row
-     */
-    show: () => void,
-    /**
-     * Function to hide the row
-     */
-    hide: () => void,
-    /**
-     * Updates the row with new channel and data for cells
-     * @param data new data to update the row with
-     */
-    updateData: (data: DataManager) => void,
-}
-
-export interface RowComponent<
-    T extends Program,
-> {
-    new (props: RowProps<T>): Row<T>,
-}
-
-// MARK: EPG CellsManager Component
-
-/**
- * Props for CellsManager Component
- */
-export type CellsManagerProps<
-    T extends Program,
-> = (
-    & DataGetterProp
-    & TimelineWidthMsProp
-    & TimelineWidthPxProp
-    & TimestampProp
-    & TimeProp
-    & PixelInMsProp
-    & ChannelLessOnItemPressProp<T>
-    & ChannelLessOnFocusChangeProp<T>
-    & ProgramTextModeResolverProp
-    & OnMouseEnterProp
-    & RenderProgramProp<T>
-    & SmallestAllowedCellPxProp
-);
-
-/**
- * CellsManager Component is a part of Row that is responsible for rendering and handling the cells.
- * @typeparam T EpgProgram component rendered by cells
- */
-export interface CellsManager<
-    T extends Program,
-> extends Component<CellsManagerProps<T>> {
-    /**
-     * Current timestamp of the manager
-     */
-    timestamp: number,
-    /**
-     * Function to call when fast scrolling starts
-     * - to optimize cell rendering during the fast scroll
-     */
-    onFastScrollingStart: () => void,
-    /**
-     * Function to call when fast vertical scrolling ends
-     * - to render cell data after being optimized for fast scroll
-     */
-    onFastScrollingEnd: () => void,
-    /**
-     * Function to make the row active (the one with focus)
-     */
-    setActive: () => void,
-    /**
-     * Function to make the row inactive (the one without focus)
-     */
-    setInactive: () => void,
-    /**
-     * Function to offset wrapping div in y axis
-     * @param yOffsetPx number of pixels to set as offset
-     */
-    setOffset: (yOffsetPx: number) => void,
-    /**
-     * Function to focus the cell at given timestamp with given options
-     */
-    focus: (timestamp: number, options?: FocusOptions) => void,
-    /**
-     * Function to scroll to the given timestamp
-     */
-    scrollToTimestamp: (timestamp: number) => void,
-    /**
-     * Function to show the whole row
-     */
-    show: () => void,
-    /**
-     * Function to hide the whole row
-     */
-    hide: () => void,
-    /**
-     * Function to return whether the cells are visible or hidden
-     */
-    isVisible: () => boolean,
-    /**
-     * Function to initialize cells update (e.g. after new data fetch)
-     */
-    updateCellsData: () => void,
-}
-
-export interface CellsManagerComponent<
-    T extends Program,
-> {
-    new (props: CellsManagerProps<T>): CellsManager<T>,
-}
-
-// MARK: EPG Cell Component
-
-/**
- * Props for any EPG Cell component
- * @typeparam T Program component - defaults to EpgProgram
- */
-export type CellProps<
-    T extends Program,
-> = (
-    & WidthPxProp
-    & XOffsetPxProp
-    & TimeProp
-    & Partial<ItemProp>
-    & Partial<IsLoadingProp>
-    & ChannelLessOnItemPressProp<T>
-    & ChannelLessOnFocusChangeProp<T>
-    & ProgramTextModeResolverProp
-    & OnMouseEnterProp
-    & RenderProgramProp<T>
-    & SmallestAllowedCellPxProp
-);
-
-/**
- * EPG Cell component
- * @typeparam T Program component - defaults to EpgProgram
- */
-export interface Cell<
-    T extends Program,
-> extends Component<CellProps<T>>, IFocusable {
-    /**
-     * DOM wrapper element
-     */
-    div: Reference<HTMLDivElement>,
-    /**
-     * Current Program data
-     */
-    item?: Asset,
-    /**
-     * Reference to custom visuals component
-     */
-    programComponent: Reference<T>,
-    /**
-     * Function to get width of the cell in pixels
-     * @returns width of the cell in pixels
-     */
-    getWidth: () => number,
-    /**
-     * Function to get x offset position of the cell in pixels
-     * @returns x direction offset in pixels
-     */
-    getOffset: () => number,
-    /**
-     * Function to set width of the cell in pixels
-     * @param width width of the cell to set
-     */
-    setWidth: (width: number) => void,
-    /**
-     * Function to offset x position of the cell in pixels
-     * @param x x direction offset in pixels
-     */
-    setOffset: (x: number) => void,
-    /**
-     * Function to show the cell
-     */
-    show: () => void,
-    /**
-     * Function to hide the cell
-     */
-    hide: () => void,
-    /**
-     * Function to return whether the cell is visible (does not have .display-none class)
-     */
-    isVisible: () => boolean,
-    /**
-     * Function to return whether the element belongs to the cell's Interactable component.
-     * @param element HTMLElement to compare with Interactable
-     * @returns true if element matches Interactable, false otherwise
-     */
-    hasDom: (element: HTMLElement) => boolean,
-    /**
-     * Function to update data and visuals
-     * @param data New Program data
-     */
-    updateData: (data: Asset) => void,
-}
-
-export interface CellComponent<
-    T extends Program,
-> {
-    new (props: CellProps<T>): Cell<T>,
-}
-
-// MARK: EPG Mouse Navigation
-
-export type EpgMouseNavigationProps = {
-    /**
-     * Function to call on the press of up arrow
-     */
-    onUp: () => void,
-    /**
-     * Function to call on the press of down arrow
-     */
-    onDown: () => void,
-    /**
-     * Function to call on the press of left arrow
-     */
-    onLeft: () => void,
-    /**
-     * Function to call on the press of right arrow
-     */
-    onRight: () => void,
-};
-
-export interface EpgMouseNavigation extends Component<EpgMouseNavigationProps> {
-    /**
-     * Function to enable showing an arrow in given direction
-     */
-    enableDirection: (direction: MouseArrowDirection) => void,
-    /**
-     * Function to disable showing an arrow in given direction
-     */
-    disableDirection: (direction: MouseArrowDirection) => void,
-}
-
-export interface EpgMouseNavigationComponent {
-    new (props: EpgMouseNavigationProps): EpgMouseNavigation,
-}
-
-export type MouseArrowDirection = 'up' | 'down' | 'left' | 'right';
-
-// MARK: EPG Component
-
-/**
- * Props for the main EPG component
- * @typeparam T Channel header component - defaults to Header
- * @typeparam U Program component - defaults to Program
- * @typeparam V Day component - default to Day
- * @typeparam W Timeline section component - default to TimelineSection
- */
-export type Props<
-    T extends Header,
-    U extends Program,
-    V extends Day,
-    W extends TimelineSection,
-> = (
-    & TimelineWidthPxProp
-    & RowHeightPxProp
-    & NavigatableRowsProp
-    & AdditionalRowsProp
-    & ChannelHeaderWidthPxProp
-    & ChannelDataProp
-    & FetchProgramsProp
-    & Partial<TimelineWidthMsProp>
-    & Partial<ScrollStepMsProp>
-    & Partial<IdleTimerMsProp>
-    & Partial<TimelineSectionWidthMsProp>
-    & Partial<LimitFromMsProp>
-    & Partial<LimitToMsProp>
-    & Partial<TimeProviderProp>
-    & Partial<InitialTimestampProp>
-    & Partial<InitialChannelIndexProp>
-    & Partial<ProgramTextModeResolverProp>
-    & Partial<SmallestAllowedCellPxProp>
-    & OnItemPressProp<U>
-    & Partial<OnFocusChangeProp<U>>
-    & Partial<OnScrolledToTimestampProp>
-    & Partial<RenderNowLineHeaderProp>
-    & Partial<RenderChannelHeaderProp<T>>
-    & Partial<RenderProgramProp<U>>
-    & Partial<RenderDayProp<V>>
-    & Partial<RenderTimeProp<W>>
-    & Partial<DatePickerProp>
-    & Partial<PluginsProp<U>>
-);
-
-/**
- * Main EPG component
- * @typeparam T Channel header component - defaults to Header
- * @typeparam U Program component - defaults to Program
- * @typeparam V Day component - default to Day
- * @typeparam W Timeline section component - default to TimelineSection
- */
-export interface Epg<
-    T extends Header,
-    U extends Program,
-    V extends Day,
-    W extends TimelineSection,
-> extends Component<Props<T, U, V, W>>, IFocusable {
-    /**
-     * Function to return whether EPG is fast scrolling
-     * @returns true if is fast scrolling in any axis, false otherwise
-     */
-    isFastScrolling: () => boolean,
-    /**
-     * Function to return whether EPG is fast scrolling horizontally
-     * @returns true if is fast scrolling horizontally, false otherwise
-     */
-    isHorizontallyFastScrolling: () => boolean,
-    /**
-     * Function to return whether EPG is fast scrolling
-     * @returns true if is fast scrolling vertically, false otherwise
-     */
-    isVerticallyFastScrolling: () => boolean,
-    /**
-     * Scrolls to given timestamp if possible
-     * @param timestamp Timestamp to scroll to
-     * @throws when the timestamp is outside of limitFromMs and limitToMs range
-     */
-    scrollToTimestamp: (timestamp: number) => void,
-    /**
-     * Scrolls to given channel index if possible
-     * @param index Index of the channel to scroll to
-     * @throws when the index is outside of 0 and channels.length - 1 range
-     */
-    scrollToChannelIndex: (index: number) => void,
-}
-
-/**
- * Internal interface of the Main EPG Component for internal components
- * but should not be used from the outside.
- * @typeparam T Channel header component - defaults to Header
- * @typeparam U Program component - defaults to Program
- * @typeparam V Day component - default to Day
- * @typeparam W Timeline section component - default to TimelineSection
- */
-export interface InternalEpg<
-    T extends Header,
-    U extends Program,
-    V extends Day,
-    W extends TimelineSection,
-> extends Epg<T, U, V, W> {
-    /**
-     * Current focused part of EPG
-     */
-    focused: EpgFocus,
-    /**
-     * Reference to the RowsManager
-     */
-    rows: Reference<RowsManager<T, U>>,
-    /**
-     * Current timestamp of the EPG
-     */
-    timestamp: number,
-    /**
-     * Current timestamp of the EPG focus
-     */
-    focusTimestamp: number,
-    /**
-     * TimeManager instance
-     */
-    time: Time,
-    /**
-     * Function to set the current EPG timestamp
-     * @param timestamp timestamp to set
-     */
-    setCurrentTime: (timestamp: number) => void,
-    /**
-     * Function to set current focus time
-     * @param timestamp the timestamp to set as focus time
-     */
-    setFocusTimestamp: (timestamp: number) => void,
-    /**
-     * Function to set focus to DatePicker
-     */
-    setFocusToDatePicker: () => void,
-    /**
-     * Function to set focus to Epg rows
-     */
-    setFocusToEpg: () => void,
-    /**
-     * Function to set state of the up/down mouse arrows
-     */
-    setVerticalMouseArrows: () => void,
-    /**
-     * Function to set state of the left/right mouse arrows
-     */
-    setHorizontalMouseArrows: () => void,
-    /**
-     * Function to let EPG and its components know that the EPG
-     * switched to fast vertical scrolling (up/down between channels)
-     */
-    startFastVerticalScrolling: () => void,
-    /**
-     * Function to let EPG and its components know that the EPG
-     * switched to fast horizontal scrolling (left/right in time)
-     */
-    startFastHorizontalScrolling: () => void,
-    /**
-     * Function to let EPG and its components know that the EPG
-     * switched to normal vertical scrolling (up/down between channels)
-     */
-    stopFastVerticalScrolling: () => void,
-    /**
-     * Function to let EPG and its components know that the EPG
-     * switched to normal horizontal scrolling (left/right in time)
-     */
-    stopFastHorizontalScrolling: () => void,
-    /**
-     * Function that returns true if DatePicker is rendered
-     * @returns true if DatePicker is rendered, false otherwise
-     */
-    isDatePickerRendered: () => boolean,
-}
-
-export interface EpgComponent<
-    T extends Header,
-    U extends Program,
-    V extends Day,
-    W extends TimelineSection,
-> {
-    new (props: Props<T, U, V, W>): Epg<T, U, V, W>,
-}
-
-/**
- * Enumerator for current focus positions for EPG or DatePicker
- */
-export type EpgFocus = 'datepicker' | 'epg';
-
-// MARK: EPG Plugin
-
-export type PluginProps<
-    T extends Program = Program,
-> = {
-    /**
-     * Reference to the EPG component so it could be controlled from the plugin
-     */
-    epg?: Epg<any, T, any, any>
-};
-
-/**
- * EPG stores references to all plugins and on certain events it calls these
- * methods if they are implemented by the plugin
- */
-export interface Plugin<
-    T extends Program = Program,
-> extends Component<any> {
-    /**
-     * Called each time a focus changes. Due to implementation this can result
-     * in focus to different element with same data as before as same element
-     * but different data. And also same element and same data
-     */
-    onFocusChange?: FocusChangeCallback<T>,
-    /**
-     * Called each time EPG scrolls left/right in time
-     * @param timestamp current time of EPG in ms
-     */
-    onScrolledToTimestamp?: (timestamp: number) => void,
-    /**
-     * Called each time the Item is pressed. This is called before the outside
-     * callback from props. However, it cannot stop the event. Intended more for
-     * logging purposes than actual overrides.
-     */
-    onItemPress?: ItemPressCallback<T>,
-    /**
-     * Called each time EPG switches to fast scrolling in either direction.
-     * Called after onFast[Vertical/Horizontal]ScrollingStart.
-     * If both are implemented, then both (directional and general) methods are called.
-     */
-    onFastScrollingStart?: () => void,
-    /**
-     * Called each time EPG switches to fast scrolling in vertical (channels) direction.
-     */
-    onFastVerticalScrollingStart?: () => void,
-    /**
-     * Called each time EPG switches to fast scrolling in horizontal (time) direction.
-     */
-    onFastHorizontalScrollingStart?: () => void,
-    /**
-     * Called each time EPG switches back to normal scrolling in either direction.
-     * Called after onFast[Vertical/Horizontal]ScrollingEnd.
-     * If both are implemented, then both (directional and general) methods are called.
-     */
-    onFastScrollingEnd?: () => void,
-    /**
-     * Called each time EPG switches back to normal scrolling in vertical (channels) direction.
-     */
-    onFastVerticalScrollingEnd?: () => void,
-    /**
-     * Called each time EPG switches back to normal scrolling in horizontal (time) direction.
-     */
-    onFastHorizontalScrollingEnd?: () => void,
-}
-
-export interface PluginComponent<
-    T extends Program,
-> {
-    new (props: any): Plugin<T>,
-}
-
-export interface PluginFC {
-    (props: any): JSX.Element,
-}
+import { Reference, Component, Children } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { ModalService } from '@24i/bigscreen-sdk/modal-service';
+import { IEvents, EventMapType } from '@24i/bigscreen-sdk/events-manager';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { ICheckbox, PickerMode } from '@24i/bigscreen-sdk/picker';
+
+// MARK: Shared Props (alphabetical order)
+
+type AdditionalRowsProp = {
+    /**
+     * The number of rows that are rendered at the bottom below navigatable rows
+     * These can get covered sometimes by ProgramInfo for example
+     */
+    additionalRows: number,
+};
+
+type ChannelDataProp = {
+    /**
+     * An array with channel data
+     */
+    channelData: Asset[],
+};
+
+type ChannelHeaderWidthPxProp = {
+    /**
+     * The width of the channel header column in pixels
+     */
+    channelHeaderWidthPx: number,
+};
+
+type ChannelLessOnFocusChangeProp<T extends Program> = {
+    /**
+     * Called every time focus moves to different cell (even after mouse focuses the cell)
+     */
+    onFocusChange: ChannelLessFocusChangeCallback<T>,
+};
+
+type ChannelLessOnItemPressProp<T extends Program> = {
+    /**
+     * Called after pressing any item with data (not loading ones)
+     */
+    onItemPress: ChannelLessItemPressCallback<T>,
+};
+
+type DataGetterProp = {
+    dataGetter: (range: DataRange) => Asset[],
+};
+
+type DataProp = {
+    /**
+     * A Data Manager
+     */
+    data: DataManager,
+};
+
+type DataManagersProp = {
+    /**
+     * An array of Data Managers
+     */
+    dataManagers: DataManager[],
+};
+
+type DatePickerProp = {
+    /**
+     * Props for the DatePicker component
+     * If omitted the Day component will be rendered instead
+     */
+    datePickerProps: OutsideDatePickerProps,
+};
+
+type FetchProgramsProp = {
+    /**
+     * Function called by EPG to fetch more data for a channel
+     */
+    fetchPrograms: ProgramsFetcher,
+};
+
+type InitialChannelIndexProp = {
+    /**
+     * The initial index in the channels list that should be scrolled to and focus after
+     * rendering the EPG
+     */
+    initialChannelIndex: number,
+};
+
+type InitialTimestampProp = {
+    /**
+     * The initial timestamp that should be used to render in the center of the EPG
+     */
+    initialTimestamp: number,
+};
+
+type IsLoadingProp = {
+    /**
+     * Flag to distinguish a cell that is intended to be used only for loading placeholder purposes
+     */
+    isLoading: boolean,
+};
+
+type ItemProp = {
+    /**
+     * Data for the program
+     */
+    item: Asset,
+};
+
+type LimitFromMsProp = {
+    /**
+     * The lowest timestamp in ms that can be navigated by EPG
+     * Render, as well as fetch, can go slightly more into history
+     */
+    limitFromMs: number,
+};
+
+type LimitToMsProp = {
+    /**
+     * The highest timestamp in ms that can be navigated by EPG
+     * Render, as well as fetch, can go slightly more into future
+     */
+    limitToMs: number,
+};
+
+type NavigatableRowsProp = {
+    /**
+     * The number of rows that can be navigated with focus up/down
+     */
+    navigatableRows: number,
+};
+
+type OnFocusChangeProp<T extends Program> = {
+    /**
+     * Called every time focus moves to different cell (even after mouse focuses the cell)
+     */
+    onFocusChange: FocusChangeCallback<T>,
+};
+
+type OnItemPressProp<T extends Program> = {
+    /**
+     * Called after pressing any item with data (not loading ones)
+     */
+    onItemPress: ItemPressCallback<T>,
+};
+
+type OnMouseEnterProp = {
+    /**
+     * onMouseEnter listener used only on the inside to synchronize keyboard and mouse navigation
+     */
+    onMouseEnter: (data: Asset | undefined) => void,
+};
+
+type OnScrolledToTimestampProp = {
+    /**
+     * Callback for scrolling left/right
+     * @param timestamp Current timestamp of the center of the EPG in milliseconds
+     */
+    onScrolledToTimestamp: (timestamp: number) => void,
+};
+
+type PixelInMsProp = {
+    /**
+     * The ratio between pixels and milliseconds used in the EPG
+     */
+    pixelInMs: number,
+};
+
+type PluginsProp<T extends Program> = {
+    /**
+     * Prop for extending the EPG functionality
+     */
+    plugins: (PluginComponent<T> | PluginFC)[],
+};
+
+type ProgramTextModeResolverProp = {
+    /**
+     * Prop for resolving the text mode of the component based on the cell width
+     * @param widthPx the width of the cell in pixels
+     * @returns ProgramTextMode to use
+     */
+    programTextModeResolver: (widthPx: number) => ProgramTextMode,
+};
+
+type RenderChannelHeaderProp<T extends Header> = {
+    /**
+     * Function to render custom channel header item
+     */
+    renderChannelHeader: ChannelHeaderRenderer<T>,
+};
+
+type RenderDayProp<X extends Day> = {
+    /**
+     * Function to render custom day displaying component
+     */
+    renderDay?: DayRenderer<X>,
+};
+
+type RenderNowLineHeaderProp = {
+    /**
+     * Function to render custom now line header (e.g. LIVE arrow pointer at the top of the line)
+     */
+    renderNowLineHeader: (timestamp: number, ref: Reference<NowLineHeader>) => JSX.Element,
+};
+
+type RenderProgramProp<T extends Program> = {
+    renderProgram: ProgramRenderer<T>,
+};
+
+type RenderTimeProp<T extends TimelineSection> = {
+    /**
+     * Custom function to render time inside the timeline section
+     */
+    renderTime: TimeRenderer<T>,
+};
+
+type IsFocusInRowsProp = {
+    /**
+     * Returns whether the focus is in Rows part of the epg.
+     * @returns true fif cosu is in rows part, false otherwise
+     */
+    isFocusInRows: () => boolean,
+};
+
+type RowHeightPxProp = {
+    /**
+     * The height of the EPG row in pixels
+     */
+    rowHeightPx: number,
+};
+
+type SectionWidthMsProp = {
+    /**
+     * The width of the section in upper timeline header
+     */
+    sectionWidthMs: number,
+};
+
+type ScrollStepMsProp = {
+    /**
+     * The number of milliseconds that should be scrolled when moving left and right
+     */
+    scrollStepMs: number,
+};
+
+type SmallestAllowedCellPxProp = {
+    /**
+     * If the width of the cell is smaller than this the cell will have a special
+     * class `too-small`. Value in pixels.
+     */
+    smallestAllowedCellPx: number,
+};
+
+type IdleTimerMsProp = {
+    /**
+     * The number of milliseconds of inactivity (no input) after which EPG starts jumps
+     * to the current time.
+     */
+    idleTimerMs: number,
+};
+
+type TimeProp = {
+    /**
+     * The time interface that provides current time and time change events
+     */
+    time: Time,
+};
+
+type TimeProviderProp = {
+    /**
+     * Function for providing current time
+     */
+    timeProvider: TimeProvider,
+};
+
+type TimelineSectionWidthMsProp = {
+    /**
+     * The width of the timeline section (time distance between markers)
+     */
+    timelineSectionWidthMs: number,
+};
+
+type TimelineWidthMsProp = {
+    /**
+     * The width of the visible epg section with data in milliseconds
+     */
+    timelineWidthMs: number,
+};
+
+type TimelineWidthPxProp = {
+    /**
+     * The width of the visible epg section with data in pixels
+     */
+    timelineWidthPx: number,
+};
+
+type TimestampProp = {
+    /**
+     * The current timestamp of the center of the EPG
+     */
+    timestamp: number,
+};
+
+type XOffsetPxProp = {
+    /**
+     * The initial x-axis offset in pixels to set during the render
+     */
+    xOffsetPx: number,
+};
+
+type WidthPxProp = {
+    /**
+     * The initial width in pixels to set during the render
+     */
+    widthPx: number,
+};
+
+// MARK: shared types and interfaces
+
+/**
+ * This function should return rendered ChannelHeader.
+ * ChannelHeader usually consists of channel number and channel icon or name.
+ * @typeparam T Channel header component - defaults to Header component
+ * @param data Channel data
+ * @param ref Reference to the component
+ * @returns JSX.Element
+ */
+export type ChannelHeaderRenderer<T extends Header> = (
+    (data: Asset, ref: Reference<T>) => JSX.Element
+);
+
+/**
+ * This function should fetch and asynchronously return more programs for given channel
+ * and timeframe.
+ * @param channel Channel data
+ * @param from Timestamp for the start of the timeframe
+ * @param to Timestamp for the end of the timeframe
+ * @returns Promise<Asset[]>
+ */
+export type ProgramsFetcher<
+> = (channel: Asset, from: number, to: number) => Promise<Asset[]>;
+
+export type FetchCallback = () => void;
+
+/**
+ * This function should return custom visual for Program.
+ * @typeparam T Program component - defaults to EpgProgram component
+ * @param isLoading Flag to mark whether it is just a loading placeholder
+ * @param data Program data or undefined for loading placeholder
+ * @param ref Reference to the component
+ * @param widthPx The initial width of the Program component to render with
+ * @param xOffsetPx The initial offset of the Program component to render with
+ * @param textMode The initial program text mode during the render
+ * @returns JSX.Element
+ */
+export type ProgramRenderer<T extends Program> = (
+    isLoading: boolean,
+    data: Asset | undefined,
+    ref: Reference<T>,
+    widthPx: number,
+    xOffsetPx: number,
+    textMode: ProgramTextMode,
+) => JSX.Element;
+
+/**
+ * This function should return custom visual of the time in Timeline.
+ * This component must implement TimelineSection interface.
+ * @param timestamp Timestamp of the time for formatting
+ * @param offset Initial offset to render with in pixels
+ * @param width width of the section to render in pixels
+ * @param ref Reference to TimelineSection component
+ * @returns JSX.Element
+ */
+export type TimeRenderer<
+    T extends TimelineSection = TimelineSection,
+> = (
+    timestamp: number, offset: number, width: number, ref: Reference<T>,
+) => JSX.Element;
+
+/**
+ * This function will be called when an Item with Program Data is pressed.
+ * @typeparam T extension of a Program component
+ * @param data Current Program data
+ * @param channel The program's channel
+ * @param component Pressed Program component
+ */
+export type ItemPressCallback<T extends Program> = (
+    (data: Asset, channel: Asset, component: T) => void
+);
+
+/**
+ * This function will be called when an Item with Program Data is pressed.
+ * @typeparam T extension of a Program component
+ * @param data Current EpgProgram data
+ * @param component Pressed Program component
+ */
+export type ChannelLessItemPressCallback<T extends Program> = (
+    (data: Asset, component: T) => void
+);
+
+/**
+ * This function will be called when any item is focused
+ * @typeparam T extension of a Program component
+ * @param data Current EpgProgram data or undefined if the focus is on loading cell
+ * @param channel The program's channel
+ * @param component Program component of the focused Cell
+ */
+export type FocusChangeCallback<T extends Program> = (
+    (data: Asset | undefined, channel: Asset, component: T) => void
+);
+
+/**
+ * This function will be called when any item is focused
+ * @typeparam T extension of a Program component
+ * @param data Current EpgProgram data or undefined if the focus is on loading cell
+ * @param component Program component of the focused Cell
+ */
+export type ChannelLessFocusChangeCallback<T extends Program> = (
+    (data: Asset | undefined, component: T) => void
+);
+
+export type DayRenderer<
+    T extends Day = Day,
+> = (timestamp: number, ref: Reference<T>) => JSX.Element;
+
+/**
+ * Simple functions that returns current unix time in milliseconds
+ */
+export type TimeProvider = () => number;
+
+// MARK: DataManager
+
+export type DataRange = [number, number];
+
+export type DataUpdateCallback = () => void;
+
+export interface DataManager {
+    getChannel: () => Asset,
+    getData: () => Asset[],
+    getDataFromRange: (range: DataRange) => Asset[],
+    getNextProgramStart: (timestamp: number) => number | null,
+    getPreviousProgramEnd: (timestamp: number, scrollStepMs: number) => number | null,
+    setOnDataUpdated: (callback: DataUpdateCallback) => void,
+    removeOnDataUpdated: () => void,
+    fetchAroundTimestampIfNeeded: (timestamp: number) => void,
+}
+
+// MARK: Time Events
+
+export interface TimeEvents extends EventMapType {
+    'onminute': (timestamp: number) => void,
+    'onsecond': (timestamp: number) => void,
+}
+
+/**
+ * Interface for managing time updates inside EPG
+ */
+export interface Time extends IEvents<TimeEvents> {
+    /**
+     * This function starts the timer that fires the events every time interval
+     */
+    initialize: () => void,
+    /**
+     * This function stops the timer
+     */
+    destroy: () => void,
+    /**
+     * Returns current timestamp in ms
+     */
+    getCurrentTime: () => number,
+}
+
+// MARK: EPG Program Component
+
+export type ProgramTextMode = 'full' | 'ellipsis_only' | 'empty';
+
+/**
+ * Props passed to custom rendered Program Component.
+ */
+export type ProgramProps = {
+    /**
+     * Program data
+     */
+    data?: Asset,
+    /**
+     * Flag that it is a loading placeholder
+     */
+    isLoading?: boolean,
+    /**
+     * Initial width of the Component
+     */
+    widthPx: number,
+    /**
+     * Initial x offset of the Component
+     */
+    xOffsetPx: number,
+    /**
+     * The text mode for the initial Program render
+     */
+    textMode: ProgramTextMode,
+};
+
+/**
+ * Custom visual component for a program.
+ * This component should render a pure div and shouldn't handle any events
+ * like onPress or onMouseEnter. This is done by Cell component in EPG core.
+ * This component can be reused for multiple programs during its lifetime.
+ */
+export interface Program
+    extends Component<any> {
+    /**
+     * Function to offset the Program component inside the cell.
+     * This is so the cells at the start of the viewport show text from the beginning
+     * even though the Cell itself goes more to the past.
+     * @param offset offset in x axis in px
+     */
+    setOffset?(offset: number): void,
+    /**
+     * Function to change width of the Program component inside the cell.
+     * This is so the cells at the start of the viewport show text from the beginning
+     * even though the Cell itself goes more to the past.
+     * @param width width in px
+     */
+    setWidth?(width: number): void,
+    /**
+     * Function to change data and the visuals.
+     * (E.g. Use setText to change the name)
+     * @param data New Program data
+     * @param textMode the text mode to use to display the program
+     * @param widthPx the full width of the cell in pixels that can be used to alter styling
+     * @param xOffsetPx the offset of the cell in pixels that can be used to alter styling
+     */
+    updateData(data: Asset, textMode: ProgramTextMode, widthPx: number, xOffsetPx: number): void,
+}
+
+export interface ProgramComponent {
+    new (props: any): Program,
+}
+
+// MARK: EPG Header Component
+
+/**
+ * Props for the Channel Header Component
+ */
+export type HeaderProps = {
+    /**
+     * Channel Data
+     */
+    data: Asset,
+};
+
+/**
+ * Channel Header component.
+ * This component represents the channel header aka channel number and name/icon.
+ * It can be reused by multiple headers.
+ */
+export interface Header
+    extends Component<any> {
+    /**
+     * Function to show the header element
+     */
+    show(): void,
+    /**
+     * Function to hide the header element
+     */
+    hide(): void,
+    /**
+     * Function to update the visuals
+     */
+    updateData(data: Asset): void,
+}
+
+export interface HeaderComponent {
+    new (props: any): Header,
+}
+
+// MARK: EPG NowLineHeader Component
+
+export interface NowLineHeader extends Component<any> {
+    /**
+     * Function to display the displayed time in the timeline header
+     * @param timestamp current time in ms
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface NowLineHeaderComponent {
+    new (props: any): NowLineHeader,
+}
+
+// MARK: EPG Day Component
+
+/**
+ * Props for the Day Component
+ */
+export type DayProps = (
+    TimestampProp
+);
+
+export interface Day extends Component<any> {
+    /**
+     * Function to update the displayed date when the visible day changes in EPG
+     * @param timestamp New timestamp for the date
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface DayComponent {
+    new (props: DayProps): Day,
+}
+
+// MARK: EPG DatePicker Component
+
+/**
+ * Props for the EPG DatePicker Component
+ */
+export type DatePickerProps = {
+    /**
+     * Number of days into the past to show (today excluded)
+     */
+    daysInPast: number,
+    /**
+     * Number of days to future to show (today excluded)
+     */
+    daysToFuture: number,
+    /**
+     * Number of milliseconds since the day start to scroll to
+     * @example (8 * 60 + 30) * 1000 will scroll directly to 8:30 on date picker day selected
+     */
+    dayStartOffsetMs?: number,
+    /**
+     * Current selected value
+     */
+    timestamp: number,
+    /**
+     * Number of visible items
+     */
+    visibleItems: number,
+    /**
+     * Number of pixels to scroll
+     */
+    scrollStep: number,
+    /**
+     * Reference to the modal service
+     */
+    modalService: Reference<ModalService>,
+    /**
+     * Function to call when the picker value changes
+     * @param timestamp currently selected value as timestamp in ms
+     */
+    onValueChange: (timestamp: number) => void,
+    /**
+     * Function to format the date string in DatePicker
+     * @param date Date object of the value to format
+     * @returns string to display
+     */
+    format?: (date: Date) => string,
+    /**
+     * Custom overrides for the DatePicker
+     */
+    overrides?: Record<number, string>,
+    /**
+     * Optional setting for Picker Mode (defaults to MODAL)
+     */
+    mode?: PickerMode,
+    /**
+     * Optional className to pass to DatePicker
+     */
+    className?: string,
+    /**
+     * Optional className to pass to PickerModal dialog
+     */
+    modalClassName?: string,
+    /**
+     * Optional override for checkbox
+     */
+    Checkbox?: ICheckbox<any>,
+    /**
+     * Optional override for checkmark
+     */
+    checkmark?: Children,
+    /**
+     * Custom render method for picker button
+     */
+    render?: (
+        buttonRef: Reference<HTMLElement>,
+        textRef: Reference<HTMLElement>,
+        openCallback: () => void,
+        text?: string,
+    ) => JSX.Element,
+};
+
+export type OutsideDatePickerProps = Omit<
+DatePickerProps, 'timestamp' | 'onValueChange'
+>;
+
+export type DatePickerDateProps = 'daysInPast' | 'daysToFuture' | 'dayStartOffsetMs' | 'timestamp';
+
+/**
+ * EPG DatePicker Component
+ */
+export interface DatePicker extends Component<DatePickerProps>, IFocusable {
+    /**
+     * Function to update current DatePicker value when the day changes
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface DatePickerComponent {
+    new (props: DatePickerProps): DatePicker,
+}
+
+// MARK: EPG NowLine Component
+
+/**
+ * Props for NowLine Component (Vertical line marking current time across the rows).
+ */
+export type NowLineProps = (
+    & TimelineWidthPxProp
+    & TimestampProp
+    & TimeProp
+    & PixelInMsProp
+    & ChannelHeaderWidthPxProp
+    & Partial<RenderNowLineHeaderProp>
+);
+
+/**
+ * NowLine component renders vertical line marking current time.
+ */
+export interface NowLine extends Component<NowLineProps> {
+    /**
+     * Function to update NowLine position when EPG scrolls left/right
+     * @param timestamp Current timestamp of the EPG
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+}
+
+export interface NowLineComponent {
+    new (props: NowLineProps): NowLine,
+}
+
+// MARK: EPG Timeline Component
+
+/**
+ * Props for the Timeline Component
+ * @typeparam T TimelineSection component
+ */
+export type TimelineProps<
+    T extends TimelineSection,
+> = (
+    & PixelInMsProp
+    & TimelineWidthPxProp
+    & ChannelHeaderWidthPxProp
+    & TimestampProp
+    & RenderTimeProp<T>
+    & SectionWidthMsProp
+);
+
+/**
+ * Timeline Component
+ * This component renders the timeline at the top of the EPG
+ * @typeparam T TimelineSection component
+ */
+export interface Timeline<
+    T extends TimelineSection,
+> extends Component<TimelineProps<T>> {
+    /**
+     * Function to set the current timestamp and scroll to it.
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+}
+
+export interface TimelineComponent<
+    T extends TimelineSection,
+> {
+    new (props: TimelineProps<T>): Timeline<T>,
+}
+
+// MARK: TimelineSection Component
+
+/**
+ * Props for the TimelineSection Component
+ */
+export type TimelineSectionProps = (
+    & TimestampProp
+    & XOffsetPxProp
+    & WidthPxProp
+);
+
+/**
+ * TimelineSection Component
+ * This component displays the time on the Timeline
+ * It can be reused to display multiple times.
+ */
+export interface TimelineSection extends Component<any> {
+    /**
+     * Function to set offset in x direction.
+     * @param x x direction offset in pixels
+     */
+    setOffset: (x: number) => void,
+    /**
+     * Function to update displayed time
+     * @param timestamp New timestamp to format and render
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface TimelineSectionComponent {
+    new (props: TimelineSectionProps): TimelineSection,
+}
+
+// MARK: EPG RowsManager Component
+
+export type RowsManagerProps<
+    T extends Header,
+    U extends Program,
+> = (
+    & DataManagersProp
+    & InitialChannelIndexProp
+    & NavigatableRowsProp
+    & AdditionalRowsProp
+    & PixelInMsProp
+    & TimelineWidthPxProp
+    & TimelineWidthMsProp
+    & TimestampProp
+    & TimeProp
+    & ScrollStepMsProp
+    & RowHeightPxProp
+    & ProgramTextModeResolverProp
+    & OnItemPressProp<U>
+    & OnMouseEnterProp
+    & OnFocusChangeProp<U>
+    & RenderChannelHeaderProp<T>
+    & RenderProgramProp<U>
+    & IsFocusInRowsProp
+    & SmallestAllowedCellPxProp
+);
+
+/**
+ * RowsManager Component
+ * It does heavy lifting for maintaining and managing rows
+ * so it could be better split from the main EPG Component
+ */
+export interface RowsManager<
+    T extends Header,
+    U extends Program,
+> extends Component<RowsManagerProps<T, U>> {
+    /**
+     * Function called on pressing UP. Used to navigate up in the channels list.
+     */
+    onUp: () => boolean,
+    /**
+     * Function called on pressing DOWN. Used to navigate down in the channels list.
+     */
+    onDown: () => boolean,
+    /**
+     * Function called on pressing CHANNEL_UP. Used to navigate page up in the channels list.
+     */
+    onChannelUp: () => boolean,
+    /**
+     * Function called on pressing CHANNEL_DOWN. Used to navigate page down in the channels list.
+     */
+    onChannelDown: () => boolean,
+    /**
+     * Function to call when fast scrolling starts
+     * - to optimize cell rendering during the fast scroll
+     */
+    onFastScrollingStart: () => void,
+    /**
+     * Function to call when fast vertical scrolling ends
+     * - to render cell data after being optimized for fast scroll
+     * - to call fetch in data managers connected to rows
+     */
+    onFastScrollingEnd: () => void,
+    /**
+     * Function to find the start of the next program on the active row.
+     * @param timestamp timestamp to search from
+     * @returns timestamp of the start of the next program or end loading cell
+     */
+    getNextProgramStart: (timestamp: number) => number | null,
+    /**
+     * Function to find the end of the previous program on the active row.
+     * @param timestamp timestamp to search from
+     * @param customScrollStepMs optional custom offset from previous program end
+     * @returns timestamp of the end of the previous program or start loading cell
+     */
+    getPreviousProgramEnd: (timestamp: number, customScrollStepMs?: number) => number | null,
+    /**
+     * Sets the channel index to scroll to.
+     */
+    setCurrentChannelIndex: (index: number) => void,
+    /**
+     * Sets the focus timestamp
+     */
+    setFocusTimestamp: (timestamp: number) => void,
+    /**
+     * Function that returns whether there are rows higher that could be navigated.
+     */
+    canGoUp: () => boolean,
+    /**
+     * Function that returns whether there are rows lower that could be navigated.
+     */
+    canGoDown: () => boolean,
+    /**
+     * Focuses the active row at a given timestamp.
+     */
+    focus: (timestamp: number, options?: FocusOptions) => void,
+    /**
+     * Scrolls the rows to the given timestamp.
+     */
+    scrollRowsToTimestamp: (timestamp: number) => void,
+    /**
+     * Function to scroll up
+     * @returns true if it was scrolled, false otherwise
+     */
+    scrollUp: () => boolean,
+    /**
+     * Function to scroll down
+     * @returns true if it was scrolled, false otherwise
+     */
+    scrollDown: () => boolean,
+}
+
+export interface RowsManagerComponent<
+    T extends Header,
+    U extends Program,
+> {
+    new (props: RowsManagerProps<T, U>): RowsManager<T, U>,
+}
+
+// MARK: EPG Row Component
+
+/**
+ * Props for EPG Row component
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export type RowProps<
+    T extends Program,
+> = (
+    & DataProp
+    & PixelInMsProp
+    & TimelineWidthPxProp
+    & TimelineWidthMsProp
+    & TimestampProp
+    & TimeProp
+    & ScrollStepMsProp
+    & SmallestAllowedCellPxProp
+    & ProgramTextModeResolverProp
+    & OnItemPressProp<T>
+    & OnMouseEnterProp
+    & OnFocusChangeProp<T>
+    & RenderProgramProp<T>
+);
+
+/**
+ * EPG Row component
+ * It can be reused by multiple rows
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export interface Row<
+    T extends Program,
+> extends Component<RowProps<T>> {
+    /**
+     * Timestamp for the center of the row
+     */
+    timestamp: number;
+    /**
+     * Function to call when fast scrolling starts
+     * - to optimize cell rendering during the fast scroll
+     */
+    onFastScrollingStart: () => void,
+    /**
+     * Function to call when fast vertical scrolling ends
+     * - to render cell data after being optimized for fast scroll
+     * - to call fetch in data managers connected to rows
+     */
+    onFastScrollingEnd: () => void,
+    /**
+     * Function to find the start of the next program on the active row.
+     * @param timestamp timestamp to search from
+     * @returns timestamp of the start of the next program or end loading cell
+     */
+    getNextProgramStart: (timestamp: number) => number | null,
+    /**
+     * Function to find the end of the previous program on the active row.
+     * @param timestamp timestamp to search from
+     * @param customScrollStepMs optional custom offset from previous program end
+     * @returns timestamp of the end of the previous program or end loading cell
+     */
+    getPreviousProgramEnd: (timestamp: number, customScrollStepMs?: number) => number | null,
+    /**
+     * Function to set the row as active (the one with focus)
+     */
+    setActive: () => void,
+    /**
+     * Function to set the row as inactive (the one without focus)
+     */
+    setInactive: () => void,
+    /**
+     * Function to offset the row for vertucal scrolling
+     * @param yOffsetPx number of pixels to set as y axis offset
+     */
+    setOffset: (yOffsetPx: number) => void,
+    /**
+     * Function to return true if row already has this data manager
+     * @param dataManager DataManager that gets compared to the current dataManager
+     * @returns true if they are the same reference, false otherwise
+     */
+    hasDataManager: (dataManager: DataManager) => boolean,
+    /**
+     * Function to focus the EPG Row
+     * @param timestamp timestamp where the focus should happen
+     * @param options FocusOptions to pass down
+     */
+    focus: (timestamp: number, options?: FocusOptions) => void,
+    /**
+     * Function to set the current timestamp and scroll to it.
+     * @param timestamp timestamp to scroll to
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+    /**
+     * Function to show the row
+     */
+    show: () => void,
+    /**
+     * Function to hide the row
+     */
+    hide: () => void,
+    /**
+     * Updates the row with new channel and data for cells
+     * @param data new data to update the row with
+     */
+    updateData: (data: DataManager) => void,
+}
+
+export interface RowComponent<
+    T extends Program,
+> {
+    new (props: RowProps<T>): Row<T>,
+}
+
+// MARK: EPG CellsManager Component
+
+/**
+ * Props for CellsManager Component
+ */
+export type CellsManagerProps<
+    T extends Program,
+> = (
+    & DataGetterProp
+    & TimelineWidthMsProp
+    & TimelineWidthPxProp
+    & TimestampProp
+    & TimeProp
+    & PixelInMsProp
+    & ChannelLessOnItemPressProp<T>
+    & ChannelLessOnFocusChangeProp<T>
+    & ProgramTextModeResolverProp
+    & OnMouseEnterProp
+    & RenderProgramProp<T>
+    & SmallestAllowedCellPxProp
+);
+
+/**
+ * CellsManager Component is a part of Row that is responsible for rendering and handling the cells.
+ * @typeparam T EpgProgram component rendered by cells
+ */
+export interface CellsManager<
+    T extends Program,
+> extends Component<CellsManagerProps<T>> {
+    /**
+     * Current timestamp of the manager
+     */
+    timestamp: number,
+    /**
+     * Function to call when fast scrolling starts
+     * - to optimize cell rendering during the fast scroll
+     */
+    onFastScrollingStart: () => void,
+    /**
+     * Function to call when fast vertical scrolling ends
+     * - to render cell data after being optimized for fast scroll
+     */
+    onFastScrollingEnd: () => void,
+    /**
+     * Function to make the row active (the one with focus)
+     */
+    setActive: () => void,
+    /**
+     * Function to make the row inactive (the one without focus)
+     */
+    setInactive: () => void,
+    /**
+     * Function to offset wrapping div in y axis
+     * @param yOffsetPx number of pixels to set as offset
+     */
+    setOffset: (yOffsetPx: number) => void,
+    /**
+     * Function to focus the cell at given timestamp with given options
+     */
+    focus: (timestamp: number, options?: FocusOptions) => void,
+    /**
+     * Function to scroll to the given timestamp
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+    /**
+     * Function to show the whole row
+     */
+    show: () => void,
+    /**
+     * Function to hide the whole row
+     */
+    hide: () => void,
+    /**
+     * Function to return whether the cells are visible or hidden
+     */
+    isVisible: () => boolean,
+    /**
+     * Function to initialize cells update (e.g. after new data fetch)
+     */
+    updateCellsData: () => void,
+}
+
+export interface CellsManagerComponent<
+    T extends Program,
+> {
+    new (props: CellsManagerProps<T>): CellsManager<T>,
+}
+
+// MARK: EPG Cell Component
+
+/**
+ * Props for any EPG Cell component
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export type CellProps<
+    T extends Program,
+> = (
+    & WidthPxProp
+    & XOffsetPxProp
+    & TimeProp
+    & Partial<ItemProp>
+    & Partial<IsLoadingProp>
+    & ChannelLessOnItemPressProp<T>
+    & ChannelLessOnFocusChangeProp<T>
+    & ProgramTextModeResolverProp
+    & OnMouseEnterProp
+    & RenderProgramProp<T>
+    & SmallestAllowedCellPxProp
+);
+
+/**
+ * EPG Cell component
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export interface Cell<
+    T extends Program,
+> extends Component<CellProps<T>>, IFocusable {
+    /**
+     * DOM wrapper element
+     */
+    div: Reference<HTMLDivElement>,
+    /**
+     * Current Program data
+     */
+    item?: Asset,
+    /**
+     * Reference to custom visuals component
+     */
+    programComponent: Reference<T>,
+    /**
+     * Function to get width of the cell in pixels
+     * @returns width of the cell in pixels
+     */
+    getWidth: () => number,
+    /**
+     * Function to get x offset position of the cell in pixels
+     * @returns x direction offset in pixels
+     */
+    getOffset: () => number,
+    /**
+     * Function to set width of the cell in pixels
+     * @param width width of the cell to set
+     */
+    setWidth: (width: number) => void,
+    /**
+     * Function to offset x position of the cell in pixels
+     * @param x x direction offset in pixels
+     */
+    setOffset: (x: number) => void,
+    /**
+     * Function to show the cell
+     */
+    show: () => void,
+    /**
+     * Function to hide the cell
+     */
+    hide: () => void,
+    /**
+     * Function to return whether the cell is visible (does not have .display-none class)
+     */
+    isVisible: () => boolean,
+    /**
+     * Function to return whether the element belongs to the cell's Interactable component.
+     * @param element HTMLElement to compare with Interactable
+     * @returns true if element matches Interactable, false otherwise
+     */
+    hasDom: (element: HTMLElement) => boolean,
+    /**
+     * Function to update data and visuals
+     * @param data New Program data
+     */
+    updateData: (data: Asset) => void,
+}
+
+export interface CellComponent<
+    T extends Program,
+> {
+    new (props: CellProps<T>): Cell<T>,
+}
+
+// MARK: EPG Mouse Navigation
+
+export type EpgMouseNavigationProps = {
+    /**
+     * Function to call on the press of up arrow
+     */
+    onUp: () => void,
+    /**
+     * Function to call on the press of down arrow
+     */
+    onDown: () => void,
+    /**
+     * Function to call on the press of left arrow
+     */
+    onLeft: () => void,
+    /**
+     * Function to call on the press of right arrow
+     */
+    onRight: () => void,
+};
+
+export interface EpgMouseNavigation extends Component<EpgMouseNavigationProps> {
+    /**
+     * Function to enable showing an arrow in given direction
+     */
+    enableDirection: (direction: MouseArrowDirection) => void,
+    /**
+     * Function to disable showing an arrow in given direction
+     */
+    disableDirection: (direction: MouseArrowDirection) => void,
+}
+
+export interface EpgMouseNavigationComponent {
+    new (props: EpgMouseNavigationProps): EpgMouseNavigation,
+}
+
+export type MouseArrowDirection = 'up' | 'down' | 'left' | 'right';
+
+// MARK: EPG Component
+
+/**
+ * Props for the main EPG component
+ * @typeparam T Channel header component - defaults to Header
+ * @typeparam U Program component - defaults to Program
+ * @typeparam V Day component - default to Day
+ * @typeparam W Timeline section component - default to TimelineSection
+ */
+export type Props<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> = (
+    & TimelineWidthPxProp
+    & RowHeightPxProp
+    & NavigatableRowsProp
+    & AdditionalRowsProp
+    & ChannelHeaderWidthPxProp
+    & ChannelDataProp
+    & FetchProgramsProp
+    & Partial<TimelineWidthMsProp>
+    & Partial<ScrollStepMsProp>
+    & Partial<IdleTimerMsProp>
+    & Partial<TimelineSectionWidthMsProp>
+    & Partial<LimitFromMsProp>
+    & Partial<LimitToMsProp>
+    & Partial<TimeProviderProp>
+    & Partial<InitialTimestampProp>
+    & Partial<InitialChannelIndexProp>
+    & Partial<ProgramTextModeResolverProp>
+    & Partial<SmallestAllowedCellPxProp>
+    & OnItemPressProp<U>
+    & Partial<OnFocusChangeProp<U>>
+    & Partial<OnScrolledToTimestampProp>
+    & Partial<RenderNowLineHeaderProp>
+    & Partial<RenderChannelHeaderProp<T>>
+    & Partial<RenderProgramProp<U>>
+    & Partial<RenderDayProp<V>>
+    & Partial<RenderTimeProp<W>>
+    & Partial<DatePickerProp>
+    & Partial<PluginsProp<U>>
+);
+
+/**
+ * Main EPG component
+ * @typeparam T Channel header component - defaults to Header
+ * @typeparam U Program component - defaults to Program
+ * @typeparam V Day component - default to Day
+ * @typeparam W Timeline section component - default to TimelineSection
+ */
+export interface Epg<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> extends Component<Props<T, U, V, W>>, IFocusable {
+    /**
+     * Function to return whether EPG is fast scrolling
+     * @returns true if is fast scrolling in any axis, false otherwise
+     */
+    isFastScrolling: () => boolean,
+    /**
+     * Function to return whether EPG is fast scrolling horizontally
+     * @returns true if is fast scrolling horizontally, false otherwise
+     */
+    isHorizontallyFastScrolling: () => boolean,
+    /**
+     * Function to return whether EPG is fast scrolling
+     * @returns true if is fast scrolling vertically, false otherwise
+     */
+    isVerticallyFastScrolling: () => boolean,
+    /**
+     * Scrolls to given timestamp if possible
+     * @param timestamp Timestamp to scroll to
+     * @throws when the timestamp is outside of limitFromMs and limitToMs range
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+    /**
+     * Scrolls to given channel index if possible
+     * @param index Index of the channel to scroll to
+     * @throws when the index is outside of 0 and channels.length - 1 range
+     */
+    scrollToChannelIndex: (index: number) => void,
+}
+
+/**
+ * Internal interface of the Main EPG Component for internal components
+ * but should not be used from the outside.
+ * @typeparam T Channel header component - defaults to Header
+ * @typeparam U Program component - defaults to Program
+ * @typeparam V Day component - default to Day
+ * @typeparam W Timeline section component - default to TimelineSection
+ */
+export interface InternalEpg<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> extends Epg<T, U, V, W> {
+    /**
+     * Current focused part of EPG
+     */
+    focused: EpgFocus,
+    /**
+     * Reference to the RowsManager
+     */
+    rows: Reference<RowsManager<T, U>>,
+    /**
+     * Current timestamp of the EPG
+     */
+    timestamp: number,
+    /**
+     * Current timestamp of the EPG focus
+     */
+    focusTimestamp: number,
+    /**
+     * TimeManager instance
+     */
+    time: Time,
+    /**
+     * Function to set the current EPG timestamp
+     * @param timestamp timestamp to set
+     */
+    setCurrentTime: (timestamp: number) => void,
+    /**
+     * Function to set current focus time
+     * @param timestamp the timestamp to set as focus time
+     */
+    setFocusTimestamp: (timestamp: number) => void,
+    /**
+     * Function to set focus to DatePicker
+     */
+    setFocusToDatePicker: () => void,
+    /**
+     * Function to set focus to Epg rows
+     */
+    setFocusToEpg: () => void,
+    /**
+     * Function to set state of the up/down mouse arrows
+     */
+    setVerticalMouseArrows: () => void,
+    /**
+     * Function to set state of the left/right mouse arrows
+     */
+    setHorizontalMouseArrows: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to fast vertical scrolling (up/down between channels)
+     */
+    startFastVerticalScrolling: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to fast horizontal scrolling (left/right in time)
+     */
+    startFastHorizontalScrolling: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to normal vertical scrolling (up/down between channels)
+     */
+    stopFastVerticalScrolling: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to normal horizontal scrolling (left/right in time)
+     */
+    stopFastHorizontalScrolling: () => void,
+    /**
+     * Function that returns true if DatePicker is rendered
+     * @returns true if DatePicker is rendered, false otherwise
+     */
+    isDatePickerRendered: () => boolean,
+}
+
+export interface EpgComponent<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> {
+    new (props: Props<T, U, V, W>): Epg<T, U, V, W>,
+}
+
+/**
+ * Enumerator for current focus positions for EPG or DatePicker
+ */
+export type EpgFocus = 'datepicker' | 'epg';
+
+// MARK: EPG Plugin
+
+export type PluginProps<
+    T extends Program = Program,
+> = {
+    /**
+     * Reference to the EPG component so it could be controlled from the plugin
+     */
+    epg?: Epg<any, T, any, any>
+};
+
+/**
+ * EPG stores references to all plugins and on certain events it calls these
+ * methods if they are implemented by the plugin
+ */
+export interface Plugin<
+    T extends Program = Program,
+> extends Component<any> {
+    /**
+     * Called each time a focus changes. Due to implementation this can result
+     * in focus to different element with same data as before as same element
+     * but different data. And also same element and same data
+     */
+    onFocusChange?: FocusChangeCallback<T>,
+    /**
+     * Called each time EPG scrolls left/right in time
+     * @param timestamp current time of EPG in ms
+     */
+    onScrolledToTimestamp?: (timestamp: number) => void,
+    /**
+     * Called each time the Item is pressed. This is called before the outside
+     * callback from props. However, it cannot stop the event. Intended more for
+     * logging purposes than actual overrides.
+     */
+    onItemPress?: ItemPressCallback<T>,
+    /**
+     * Called each time EPG switches to fast scrolling in either direction.
+     * Called after onFast[Vertical/Horizontal]ScrollingStart.
+     * If both are implemented, then both (directional and general) methods are called.
+     */
+    onFastScrollingStart?: () => void,
+    /**
+     * Called each time EPG switches to fast scrolling in vertical (channels) direction.
+     */
+    onFastVerticalScrollingStart?: () => void,
+    /**
+     * Called each time EPG switches to fast scrolling in horizontal (time) direction.
+     */
+    onFastHorizontalScrollingStart?: () => void,
+    /**
+     * Called each time EPG switches back to normal scrolling in either direction.
+     * Called after onFast[Vertical/Horizontal]ScrollingEnd.
+     * If both are implemented, then both (directional and general) methods are called.
+     */
+    onFastScrollingEnd?: () => void,
+    /**
+     * Called each time EPG switches back to normal scrolling in vertical (channels) direction.
+     */
+    onFastVerticalScrollingEnd?: () => void,
+    /**
+     * Called each time EPG switches back to normal scrolling in horizontal (time) direction.
+     */
+    onFastHorizontalScrollingEnd?: () => void,
+}
+
+export interface PluginComponent<
+    T extends Program,
+> {
+    new (props: any): Plugin<T>,
+}
+
+export interface PluginFC {
+    (props: any): JSX.Element,
+}