@24i/bigscreen-sdk 1.0.4 → 1.0.5-4.alpha-2832

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

@@ -1,6 +1,7 @@
 import { filter, find, findIndex, map } from '@24i/bigscreen-sdk/perf-utils/array';
 import { Asset } from '@24i/smartapps-datalayer/models';
 import { i18n } from '@24i/bigscreen-sdk/i18n';
+import { MINUTE_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { isStartVisible, isEndVisible, isOverFullWidth } from './utils';
 import {
     DataRange,
@@ -14,6 +15,7 @@ const START = 0;
 const END = 1;
 
 const TIMELINE_WIDTHS_TO_FETCH = 3;
+const MINIMUM_BREAK_LENGTH = MINUTE_IN_MS;
 
 export class DataManager implements IDataManager {
     private readonly data: Asset[] = [];
@@ -84,50 +86,115 @@ export class DataManager implements IDataManager {
         return [data[0].program!.startTime, data[data.length - 1].program!.endTime] as DataRange;
     }
 
-    // TODO: Wait for fixes from @thepretiso before looking at this.
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    private getRangesMissingFromDataInRange([start, end]: DataRange) {
-        const rangesLength = this.dataRanges.length;
-        if (this.dataRanges.length === 0) return [[start, end]] as DataRange[];
-        const firstRangeFrom = this.dataRanges[0][START];
-        if (end <= firstRangeFrom) return [[start, end]] as DataRange[];
-        if (start < firstRangeFrom && end <= this.dataRanges[0][END]) {
-            return [
-                [firstRangeFrom - TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs, firstRangeFrom],
-            ] as DataRange[];
+    private isInterceptingDataRanges = (firstDataRange: DataRange, secondDataRange: DataRange) => (
+        (firstDataRange[START] < secondDataRange[END]
+            && firstDataRange[START] > secondDataRange[START])
+        || (secondDataRange[START] < firstDataRange[END]
+            && secondDataRange[START] > firstDataRange[START])
+    );
+
+    private findRangeBeforeAndAfter = (currentRange: DataRange) => {
+        const rangeAfterIndex = findIndex(
+            this.dataRanges,
+            (dataRange) => dataRange[END] >= currentRange[END],
+        );
+        if (rangeAfterIndex === -1) {
+            return {
+                rangeAfter: undefined,
+                rangeBefore: this.dataRanges[this.dataRanges.length - 1],
+            };
         }
-        const lastRangeTo = this.dataRanges[rangesLength - 1][END];
-        if (end > lastRangeTo && start <= lastRangeTo) {
-            return [
-                [lastRangeTo, lastRangeTo + TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs],
-            ] as DataRange[];
+        const rangeAfter = this.dataRanges[rangeAfterIndex];
+        const rangeBefore = this.dataRanges[rangeAfterIndex - 1];
+        return { rangeAfter, rangeBefore };
+    };
+
+    private generateDataRangesForward = (start: number, end: number, cellSize: number) => {
+        const dataRanges: DataRange[] = [[start, start + cellSize]];
+        let currentStart = start + cellSize;
+        let currentEnd = currentStart + cellSize;
+        while (currentStart < end) {
+            if (currentEnd >= end) {
+                dataRanges.push([currentStart, end]);
+                break;
+            }
+            dataRanges.push([currentStart, currentEnd]);
+            currentStart += cellSize;
+            currentEnd += cellSize;
         }
-        const ranges: DataRange[] = [];
-        let newRange: DataRange = [start, end];
-        for (let i = 0; i < rangesLength; i++) {
-            const [rangeFrom, rangeTo] = this.dataRanges[i];
-            // eslint-disable-next-line no-continue
-            if (start >= rangeTo) continue;
-            if (start < rangeFrom) {
-                if (end <= rangeFrom) {
-                    if (newRange[START] !== newRange[END]) ranges.push(newRange);
-                    return ranges;
+        return dataRanges;
+    };
+
+    private generateDataRangesBackward = (start: number, end: number, cellSize: number) => {
+        const dataRanges: DataRange[] = [[start - cellSize, start]];
+        let currentEnd = start - cellSize;
+        let currentStart = currentEnd - cellSize;
+        while (currentEnd > start) {
+            if (currentStart <= start) {
+                dataRanges.push([start, currentEnd]);
+                break;
+            }
+            dataRanges.push([currentStart, currentEnd]);
+            currentStart -= cellSize;
+            currentEnd -= cellSize;
+        }
+        return dataRanges;
+    };
+
+    /* eslint-disable complexity */
+    // eslint-disable-next-line sonarjs/cognitive-complexity
+    private getRangesMissingFromDataInRange([start, end]: DataRange) {
+        const currentRange = [start, end] as DataRange;
+        const cellSize = TIMELINE_WIDTHS_TO_FETCH * this.timelineWidthMs;
+        if (this.dataRanges.length === 0) return [currentRange] as DataRange[];
+        const { rangeBefore, rangeAfter } = this.findRangeBeforeAndAfter(currentRange);
+        if (rangeAfter == null) {
+            const lastDataRange = this.dataRanges[this.dataRanges.length - 1];
+            if (this.isInterceptingDataRanges(lastDataRange, currentRange)) {
+                if (end > lastDataRange[END]) {
+                    return this.generateDataRangesForward(lastDataRange[END], end, cellSize);
+                }
+                if (start < lastDataRange[START]) {
+                    return this.generateDataRangesBackward(start, lastDataRange[START], cellSize);
                 }
-                newRange[END] = rangeFrom;
-                if (newRange[START] !== newRange[END]) ranges.push(newRange);
-                if (end <= rangeTo) {
-                    return ranges;
+            }
+            return [currentRange] as DataRange[];
+        }
+        if (rangeBefore == null) {
+            const firstDataRange = this.dataRanges[0];
+            if (this.isInterceptingDataRanges(firstDataRange, currentRange)) {
+                if (end > firstDataRange[END]) {
+                    return this.generateDataRangesForward(firstDataRange[END], end, cellSize);
                 }
-                newRange = [rangeTo, end];
-            } else if (start < rangeTo) {
-                if (end <= rangeTo) {
-                    return ranges;
+                if (start < firstDataRange[START]) {
+                    return this.generateDataRangesBackward(firstDataRange[START], start, cellSize);
                 }
-                newRange = [rangeTo, end];
             }
+            return [currentRange] as DataRange[];
+        }
+        const rangeAfterFrom = rangeAfter[START];
+        const rangeBeforeTo = rangeBefore[END];
+        // Ranges are collapsed
+        if (rangeBeforeTo === rangeAfterFrom) return [];
+        // Both are not null and don't intercept
+        if (
+            !this.isInterceptingDataRanges(rangeAfter, currentRange)
+            && !this.isInterceptingDataRanges(rangeBefore, currentRange)
+        ) {
+            return [currentRange];
+        }
+        // Left intercepts
+        if (this.isInterceptingDataRanges(rangeBefore, currentRange)) {
+            return [rangeBefore, ...this.generateDataRangesForward(rangeBeforeTo, end, cellSize)];
+        }
+        // Right intercepts
+        if (this.isInterceptingDataRanges(rangeAfter, currentRange)) {
+            return [
+                ...this.generateDataRangesBackward(rangeAfterFrom, start, cellSize),
+                rangeAfter,
+            ];
         }
-        if (newRange[START] !== newRange[END]) ranges.push(newRange);
-        return ranges;
+        return [currentRange] as DataRange[];
     }
 
     private getMissingRanges(range: DataRange) {
@@ -211,7 +278,7 @@ export class DataManager implements IDataManager {
         try {
             fetchedData = await this.fetchPrograms(this.channel, start, end);
         } catch (e) {
-            return null;
+            fetchedData = [];
         }
         this.fillInSpaces([start, end], fetchedData);
         if (fetchedData.length === 0) return null;
@@ -290,11 +357,15 @@ export class DataManager implements IDataManager {
         for (let i = data.length - 1; i > 0; i--) {
             const current = data[i];
             const previous = data[i - 1];
-            if (previous.program!.endTime < current.program!.startTime) {
-                data.splice(i, 0,
+            const breakLength = current.program!.startTime - previous.program!.endTime;
+            if (breakLength > 0 && breakLength >= MINIMUM_BREAK_LENGTH) {
+                data.splice(
+                    i,
+                    0,
                     this.generateNoDataProgram(
                         previous.program!.endTime, current.program!.startTime,
-                    ));
+                    ),
+                );
             }
         }
     }

package/packages/epg/src/v2/DatePicker.tsx

@@ -1,4 +1,5 @@
 import { Component, createRef, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
 import { Picker } from '@24i/bigscreen-sdk/picker';
 import { DatePicker as NativeDatePicker } from '@24i/bigscreen-sdk/picker/DatePicker';
 import { DAY_IN_MS, HOUR_IN_MS, MINUTE_IN_MS, SECOND_IN_MS } from '@24i/bigscreen-sdk/utils';
@@ -44,9 +45,14 @@ const prepareDateData = ({
     return { selectedValue, from, to, overrides };
 };
 
-const defaultFormat = (date: Date) => l10n.date(date).toLocaleDateString(
-    { weekday: 'short', day: 'numeric', month: 'short' },
-);
+const defaultFormat = (date: Date) => {
+    const locale = i18n.getLanguage();
+    return l10n
+        .date(date.getTime() + time.getTimezoneOffsetMs(), locale)
+        .toLocaleDateString({
+            weekday: 'short', day: 'numeric', month: 'short', formatType: 'dateFormatShort',
+        });
+};
 
 export class DatePicker extends Component<Props> implements IDatePicker {
     datePicker = createRef<Picker<number>>();

package/packages/epg/src/v2/DateToast/DateToast.tsx

@@ -6,28 +6,31 @@ import { time } from '@24i/bigscreen-sdk/time';
 import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import { InternalEpg, Plugin } from '../interface';
 
-const formatTime = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
-    { hour: 'numeric', minute: '2-digit' },
+const formatTime = (localTimestamp: number) => l10n.date(localTimestamp).toLocaleTimeString(
+    { hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' },
 );
 
-const formatDate = (timestamp: number) => {
-    if (time.isToday(timestamp)) {
+const formatDate = (localTimestamp: number) => {
+    if (time.isToday(localTimestamp)) {
         return i18n.t('date.today');
     }
-    if (time.isYesterday(timestamp)) {
+    if (time.isYesterday(localTimestamp)) {
         return i18n.t('date.yesterday');
     }
-    if (time.isTomorrow(timestamp)) {
+    if (time.isTomorrow(localTimestamp)) {
         return i18n.t('date.tomorrow');
     }
-    return l10n.date(timestamp).toLocaleString({
+    return l10n.date(localTimestamp).toLocaleString({
         weekday: 'short',
         day: 'numeric',
         month: 'short',
+        formatType: 'dateFormatShort',
     });
 };
 
-const formatDatetime = (timestamp: number) => `${formatDate(timestamp)} • ${formatTime(timestamp)}`;
+const formatDatetime = (localTimestamp: number) => (
+    `${formatDate(localTimestamp)} • ${formatTime(localTimestamp)}`
+);
 
 type Props = {
     epg: InternalEpg<any, any, any, any>,
@@ -44,7 +47,7 @@ export class DateToast extends Component<Props> implements Plugin {
 
     onScrolledToTimestamp(timestamp: number) {
         const { epg } = this.props;
-        const day = formatDatetime(timestamp);
+        const day = formatDatetime(timestamp + time.getTimezoneOffsetMs());
         if (this.lastDay === null) { // we do not want to display it after render and first move
             this.lastDay = day;
             return;

package/packages/epg/src/v2/Day.tsx

@@ -1,4 +1,5 @@
 import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
 import { l10n } from '@24i/bigscreen-sdk/l10n';
 import { DayProps as Props, Day as IDay } from './interface';
 
@@ -15,9 +16,11 @@ export class Day extends Component<Props> implements IDay {
     }
 
     private formatCurrentTimestamp() {
-        return l10n.date(this.timestamp).toLocaleDateString(
-            { weekday: 'long', day: 'numeric', month: 'short' },
-        );
+        return l10n
+            .date(this.timestamp + time.getTimezoneOffsetMs())
+            .toLocaleDateString({
+                weekday: 'long', day: 'numeric', month: 'short', formatType: 'dateFormatShort',
+            });
     }
 
     render() {

package/packages/epg/src/v2/Epg.tsx

@@ -83,6 +83,7 @@ export class Epg<
         timeProvider: Date.now,
         scrollStepMs: HALF_HOUR_IN_MS,
         timelineSectionWidthMs: HALF_HOUR_IN_MS,
+        smallestAllowedCellPx: 0,
         limitFromMs: -Infinity,
         limitToMs: Infinity,
         initialChannelIndex: 0,
@@ -297,6 +298,8 @@ export class Epg<
         return ref;
     }
 
+    isFocusInRows = () => this.focused === 'epg';
+
     focus(options?: FocusOptions) {
         if (this.focused === 'datepicker') {
             this.datePickerComponent.current!.focus(options);
@@ -376,15 +379,11 @@ export class Epg<
         return this.inputEvents.isVerticallyFastScrolling();
     }
 
-    isFocusInRows = () => {
-        return this.focused === 'epg';
-    };
-
     render() {
         const {
             datePickerProps, timelineWidthPx, channelHeaderWidthPx, scrollStepMs, rowHeightPx,
             timelineSectionWidthMs, timelineWidthMs, initialChannelIndex, plugins,
-            navigatableRows, additionalRows, programTextModeResolver,
+            navigatableRows, additionalRows, programTextModeResolver, smallestAllowedCellPx,
             renderDay, renderTime, renderProgram, renderChannelHeader, renderNowLineHeader,
         } = this.props;
         return (
@@ -444,6 +443,7 @@ export class Epg<
                     renderChannelHeader={renderChannelHeader}
                     renderProgram={renderProgram}
                     isFocusInRows={this.isFocusInRows}
+                    smallestAllowedCellPx={smallestAllowedCellPx}
                 />
                 <EpgMouseNavigation
                     // @ts-ignore - needed to convert fallback (false) to interface

package/packages/epg/src/v2/MockGenerator/generator.ts

@@ -1,6 +1,6 @@
 import { HOUR_IN_MS } from '@24i/bigscreen-sdk/utils/timeConstants';
 import {
-    Asset, ID, UIElement, UIElementType,
+    Asset, AssetType, ID, UIElement, UIElementType,
 } from '@24i/smartapps-datalayer/models';
 import {
     randomFromRange, getRandomItemFromArray, shuffleArray, getProgramImageUrl,
@@ -56,9 +56,10 @@ const generateChannels = (count: number): Asset[] => {
             uiElements: [
                 {
                     type: UIElementType.IMAGE,
-                    url: getChannelImageUrl(),
+                    url: getChannelImageUrl() ?? '',
                 } as UIElement,
             ],
+            type: AssetType.CHANNEL,
         });
     }
 

package/packages/epg/src/v2/ProgramInfo/utils.ts

@@ -1,4 +1,5 @@
 import { l10n } from '@24i/bigscreen-sdk/l10n';
+import { time } from '@24i/bigscreen-sdk/time';
 import { Asset } from '@24i/smartapps-datalayer/models';
 
 export const cutString = (string: string, length: number) => {
@@ -16,9 +17,9 @@ export const getSubtitle = (asset: Asset) => (
         : ''
 );
 
-const toLocaleTimeString = (timestamp: number) => l10n.date(timestamp).toLocaleTimeString(
-    { hour: 'numeric', minute: '2-digit' },
-);
+const toLocaleTimeString = (timestamp: number) => l10n
+    .date(timestamp + time.getTimezoneOffsetMs())
+    .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
 
 export const getBroadcastTime = (asset: Asset) => {
     const start = toLocaleTimeString(asset.program!.startTime);

package/packages/epg/src/v2/Row.tsx

@@ -109,7 +109,8 @@ export class Row<
 
     render() {
         const {
-            timelineWidthMs, timelineWidthPx, timestamp, time, pixelInMs,
+            timelineWidthMs, timestamp, time,
+            pixelInMs, timelineWidthPx, smallestAllowedCellPx,
             programTextModeResolver, onMouseEnter, renderProgram,
         } = this.props;
         return (
@@ -126,6 +127,7 @@ export class Row<
                 onItemPress={this.onItemPress}
                 onMouseEnter={onMouseEnter}
                 renderProgram={renderProgram}
+                smallestAllowedCellPx={smallestAllowedCellPx}
             />
         );
     }

package/packages/epg/src/v2/TimelineSection.tsx

@@ -1,4 +1,5 @@
 import { Component, createRef, setText } from '@24i/bigscreen-sdk/jsx';
+import { time } from '@24i/bigscreen-sdk/time';
 import { l10n } from '@24i/bigscreen-sdk/l10n';
 import { offsetPosition } from '@24i/bigscreen-sdk/utils';
 import { TimelineSectionProps as Props, TimelineSection as ITimelineSection } from './interface';
@@ -23,7 +24,9 @@ export class TimelineSection extends Component<Props> implements ITimelineSectio
     }
 
     private formatCurrentTimestamp() {
-        return l10n.date(this.timestamp).toLocaleTimeString({ hour: 'numeric', minute: '2-digit' });
+        return l10n
+            .date(this.timestamp + time.getTimezoneOffsetMs())
+            .toLocaleTimeString({ hour: 'numeric', minute: '2-digit', formatType: 'timeFormat' });
     }
 
     render() {

package/packages/epg/src/v2/basic/CellsManager.tsx

@@ -180,7 +180,8 @@ export class CellsManager<
 
     private addCell(item: Asset) {
         const {
-            time, programTextModeResolver, onMouseEnter, onItemPress, onFocusChange, renderProgram,
+            time, smallestAllowedCellPx,
+            programTextModeResolver, onMouseEnter, onItemPress, onFocusChange, renderProgram,
         } = this.props;
         const cell = createRef<ICell<T>>();
         this.mountBefore((
@@ -195,6 +196,7 @@ export class CellsManager<
                 onFocusChange={onFocusChange}
                 onMouseEnter={onMouseEnter}
                 renderProgram={renderProgram}
+                smallestAllowedCellPx={smallestAllowedCellPx}
             />
         ), this.endLoadingCell.current!.div);
         this.cells.push(cell);
@@ -241,7 +243,7 @@ export class CellsManager<
 
     render() {
         const {
-            timelineWidthPx, time, dataGetter, programTextModeResolver,
+            timelineWidthPx, smallestAllowedCellPx, time, dataGetter, programTextModeResolver,
             onMouseEnter, onItemPress, onFocusChange, renderProgram,
         } = this.props;
         const visibleData = dataGetter(this.getRange());
@@ -257,6 +259,7 @@ export class CellsManager<
                     onFocusChange={onFocusChange}
                     onMouseEnter={onMouseEnter}
                     renderProgram={renderProgram}
+                    smallestAllowedCellPx={smallestAllowedCellPx}
                     isLoading
                 />
                 {map(visibleData, (item) => {
@@ -274,6 +277,7 @@ export class CellsManager<
                             onFocusChange={onFocusChange}
                             onMouseEnter={onMouseEnter}
                             renderProgram={renderProgram}
+                            smallestAllowedCellPx={smallestAllowedCellPx}
                         />
                     );
                 })}
@@ -288,6 +292,7 @@ export class CellsManager<
                     onMouseEnter={onMouseEnter}
                     renderProgram={renderProgram}
                     isLoading
+                    smallestAllowedCellPx={smallestAllowedCellPx}
                 />
             </div>
         );

package/packages/epg/src/v2/basic/RowsManager.tsx

@@ -465,7 +465,8 @@ export class RowsManager<
 
     render() {
         const {
-            timelineWidthMs, timelineWidthPx, timestamp, time, scrollStepMs, pixelInMs,
+            timelineWidthMs, timestamp, time, scrollStepMs,
+            pixelInMs, timelineWidthPx, smallestAllowedCellPx,
             programTextModeResolver, onItemPress, onMouseEnter, renderProgram, renderChannelHeader,
         } = this.props;
         const visibleData = this.getVisibleChannels();
@@ -492,6 +493,7 @@ export class RowsManager<
                             onFocusChange={this.onFocusChange}
                             onMouseEnter={onMouseEnter}
                             renderProgram={renderProgram}
+                            smallestAllowedCellPx={smallestAllowedCellPx}
                         />
                     ))}
                 </Scroller>

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

@@ -241,6 +241,14 @@ type ScrollStepMsProp = {
     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
@@ -823,6 +831,7 @@ export type RowsManagerProps<
     & RenderChannelHeaderProp<T>
     & RenderProgramProp<U>
     & IsFocusInRowsProp
+    & SmallestAllowedCellPxProp
 );
 
 /**
@@ -933,6 +942,7 @@ export type RowProps<
     & TimestampProp
     & TimeProp
     & ScrollStepMsProp
+    & SmallestAllowedCellPxProp
     & ProgramTextModeResolverProp
     & OnItemPressProp<T>
     & OnMouseEnterProp
@@ -1046,6 +1056,7 @@ export type CellsManagerProps<
     & ProgramTextModeResolverProp
     & OnMouseEnterProp
     & RenderProgramProp<T>
+    & SmallestAllowedCellPxProp
 );
 
 /**
@@ -1133,6 +1144,7 @@ export type CellProps<
     & ProgramTextModeResolverProp
     & OnMouseEnterProp
     & RenderProgramProp<T>
+    & SmallestAllowedCellPxProp
 );
 
 /**
@@ -1275,6 +1287,7 @@ export type Props<
     & Partial<InitialTimestampProp>
     & Partial<InitialChannelIndexProp>
     & Partial<ProgramTextModeResolverProp>
+    & Partial<SmallestAllowedCellPxProp>
     & OnItemPressProp<U>
     & Partial<OnFocusChangeProp<U>>
     & Partial<OnScrolledToTimestampProp>

package/packages/events-manager/src/EventsManager.ts

@@ -1,56 +1 @@
-import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
-
-type PayloadOf<T> = T extends (payload: infer Payload) => any ? Payload : never;
-
-export type EventMapType = { [key: string]: (payload: any) => void };
-
-export interface IEvents<EventMap extends EventMapType> {
-    addEventListener: <K extends keyof EventMap>(
-        eventName: K,
-        listener: EventMap[K],
-    ) => void,
-    removeEventListener: <K extends keyof EventMap>(
-        eventName: K,
-        listener: EventMap[K],
-    ) => void,
-    triggerEvent: <K extends keyof EventMap>(
-        eventName: K,
-        payload: PayloadOf<EventMap[K]>,
-    ) => void,
-}
-
-export class EventsManager<EventMap extends EventMapType> implements IEvents<EventMap> {
-    eventListeners: Partial<{
-        [key in keyof EventMap]: EventMap[key][]
-    }> = {};
-
-    addEventListener = <K extends keyof EventMap>(
-        eventName: K,
-        listener: EventMap[K],
-    ): void => {
-        if (!this.eventListeners[eventName]) this.eventListeners[eventName] = [];
-        const listeners = this.eventListeners[eventName] as EventMap[K][];
-        listeners.push(listener);
-    };
-
-    removeEventListener = <K extends keyof EventMap>(
-        eventName: K,
-        listener: EventMap[K],
-    ): void => {
-        const listeners = this.eventListeners[eventName] as EventMap[K][] | undefined;
-        if (!listeners) return;
-        const index = listeners.indexOf(listener);
-        if (index !== -1) listeners.splice(index, 1);
-    };
-
-    triggerEvent = <K extends keyof EventMap>(
-        eventName: K,
-        payload?: PayloadOf<EventMap[K]>,
-    ): void => {
-        const eventListeners = this.eventListeners[eventName] as EventMap[K][] | undefined;
-        if (!eventListeners) return;
-        // In case listener removes itself during listening we need loop on a copy
-        const listeners = map(eventListeners, (l) => l);
-        forEach(listeners, (listener) => listener(payload));
-    };
-}
+export * from '@24i/appstage-shared-events-manager/dist/EventsManager';

package/packages/focus/README.md

@@ -14,11 +14,13 @@ IFocusable is an interface that should be implemented by anything that can be fo
 interface IFocusable {
     focus(options?: FocusOptions): void,
     hasDom?(element: HTMLElement): boolean,
+    hasFocus?(): boolean,
 }
 ```
 - focus is the main function that is called when focusing component/element.
 - hasDom is optional optimization for components to help Layout components locate the currently
 focused child.
+- hasFocus is optional check if the component has focus inside or is itself focused.
 
 ## Layout components
 - Vertical: Use it to create focus between elements vertically (up/down)
@@ -40,6 +42,7 @@ to the focused element and its index. Ideal place to change other elements
 - onBeforeFocusChange: Optional callback just before focus change. It receives a reference
 to the focused element and its index. Ideal place for preparing for the change
 (e.g. moving the container to fit new element in the screen)
+- circular: makes focus circular, e.g. when pressing left at leftmost element focus will go to rightmost element
 - dir: Optional forceful setting of the component direction. Defaults to `'auto'` which follows
 the direction of the app.
 `'ltr'` always forces left-to-right layout,
@@ -128,6 +131,16 @@ const matrix = [
 ];
 ```
 
+## Prevent blur on long press
+When the user holds a navigation key, he usually scrolls to the boundary of the layout
+and then releases the key. This operation is very quick and most of the time he releases
+the key too late, so the keydown event from the layout will propagate to another component
+or another layout. In some cases, we don't want this behavior and for those situations and
+to have better control above the layout navigation, there is a prop `preventBlurOnLongPress`.
+When the user scrolls to the boundary of the layout while holding a navigation key,
+he needs to release the key and press it again to propagate the event higher and focus
+another component or layout.
+
 ## Limitations
 For the div to properly receive keydown events it needs to have set `tabIndex`. If you do not set `tabIndex` then it won't receive keydown events and those will not propagate to the Vertical/Horizontal component.
 
@@ -302,6 +315,11 @@ Method to focus between multiple focusable components. The first existing (non-n
 const focusFirstExisting = (...toFocus: Reference<IFocusable>[]) => () => void;
 ```
 
+If you need to enable `preventScroll` in element focus options, wrap your reference with `preventScrollOnFocus` function like this:
+```ts
+focusFirstExisting(this.navigation, preventScrollOnFocus(this.div))
+```
+
 ## refocusAfterHashChange
 When the hash is changed, the browser automatically blurs the currently focused element and focuses body.
 This can be problematic when the overlay component is active (development tools, modals). Focus is lost and
@@ -313,3 +331,18 @@ outside of the component and not focused.
 ```ts
 const refocusAfterHashChange = (focusWrapperOrReference: HTMLElement | Reference<HTMLElement>) => void;
 ```
+
+## hasFocus
+Test if the element (or element in the reference) has the `activeElement` inside or optionally,
+if the element itself is the `activeElement`.
+
+```ts
+const hasFocus = (elementOrReference: HTMLElement | Reference<HTMLElement>, includeElementItself = false) => boolean;
+```
+
+## isFocused
+Test if the element (or element in the reference) is the `activeElement`.
+
+```ts
+const isFocused = (elementOrReference: HTMLElement | Reference<HTMLElement>) => boolean;
+```