@24i/bigscreen-sdk 1.1.0 → 2.1.1-alpha.2133

package/packages/l10n/src/date/iso.ts

@@ -1,13 +1,8 @@
-import { dateFormatter, processYear, toTwoDigitLocaleTimeString } from './common';
-import { EN_MONTHS, EN_WEEKDAYS } from './en-common';
+import { collonSeparatedHour24MinuteSecond, dateFormatter, processYear } from './common';
+import { MONTHS, WEEKDAYS } from './en-common';
 import type { DateTimeFormatOptions, Day, Month, Weekday, Year } from './types';
 
-const processMonth = (
-    dateParts: string[],
-    month: Month | undefined,
-    date: Date,
-
-) => {
+const processMonth = (dateParts: string[], month: Month | undefined, date: Date) => {
     if (typeof month === 'undefined') return;
     if (month === '2-digit' || month === 'numeric') {
         const strMonth = (date.getMonth() + 1).toString();
@@ -16,7 +11,7 @@ const processMonth = (
             strMonth.length === 1 ? `0${strMonth}` : strMonth,
         );
     } else {
-        dateParts.push(EN_MONTHS[month][date.getMonth()]);
+        dateParts.push(MONTHS[month][date.getMonth()]);
     }
 };
 
@@ -34,7 +29,7 @@ const processWeekday = (
         && typeof month === 'undefined'
         && typeof day === 'undefined'
     );
-    dateStringParts.push(`${EN_WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
+    dateStringParts.push(`${WEEKDAYS[weekday][date.getDay()]}${isOnlyWeekday ? '' : ','}`);
 };
 
 const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
@@ -44,7 +39,7 @@ const processDay = (dateParts: string[], day: Day | undefined, date: Date) => {
     dateParts.push(strDate.length === 1 ? `0${strDate}` : strDate);
 };
 
-const toLocaleDateString = (date: Date) => (
+export const toLocaleDateString = (date: Date) => (
     { weekday, year, month, day }: DateTimeFormatOptions = {
         year: 'numeric', month: '2-digit', day: '2-digit',
     },
@@ -60,4 +55,10 @@ const toLocaleDateString = (date: Date) => (
     return dateStringParts.join(' ');
 };
 
-export const isoDateFormatter = dateFormatter(toTwoDigitLocaleTimeString, toLocaleDateString);
+const toLocaleTimeString = (date: Date) => (
+    options: DateTimeFormatOptions = {
+        hour: '2-digit', minute: '2-digit', second: '2-digit',
+    },
+) => collonSeparatedHour24MinuteSecond(date, options);
+
+export const isoDateFormatter = dateFormatter(toLocaleTimeString, toLocaleDateString);

package/packages/l10n/src/date/types.ts

@@ -20,8 +20,6 @@ type TimeKeys = 'hour' | 'minute' | 'second';
 
 type DateKeys = 'weekday' | 'year' | 'month' | 'day';
 
-type FormatType = 'dateFormatLong' | 'dateFormatNumeric' | 'dateFormatShort' | 'timeFormat';
-
 export type DateTimeFormatOptions = {
     weekday?: Weekday,
     year?: Year,
@@ -30,7 +28,6 @@ export type DateTimeFormatOptions = {
     hour?: Hour,
     minute?: Minute,
     second?: Second,
-    formatType?: FormatType,
 };
 
 export type DateFormatOptions = Pick<DateTimeFormatOptions, DateKeys>;
@@ -48,9 +45,3 @@ export type Props = {
     locale?: string,
     options?: DateTimeFormatOptions,
 };
-
-export type LocaleData = {
-    narrow: string[];
-    short: string[];
-    long: string[];
-};

package/packages/l10n/src/l10n.ts

@@ -1,26 +1,11 @@
-import { format } from 'date-fns';
-import * as fnsLocales from 'date-fns/locale';
 import { EventsManager, IEvents } from '@24i/bigscreen-sdk/events-manager';
-import { csDateFormatter } from './date/cs';
-import { deDateFormatter } from './date/de';
-import { esDateFormatter } from './date/es';
-import { frDateFormatter } from './date/fr';
-import { heDateFormatter } from './date/he';
 import { isoDateFormatter } from './date/iso';
 import { Formatters } from './types';
-import { DateTimeFormatOptions } from './date/types';
 
 type Events = {
     'localechange': () => void,
 };
-
-type DateFnsConfig = Partial<
-Record<NonNullable<DateTimeFormatOptions['formatType']>, string | null>
->;
-
 class L10n implements IEvents<Events> {
-    private dateFnsConfig: DateFnsConfig = {};
-
     private readonly events = new EventsManager<Events>();
 
     addEventListener = this.events.addEventListener;
@@ -34,11 +19,6 @@ class L10n implements IEvents<Events> {
     private readonly formatters: Formatters = {
         date: {
             iso: isoDateFormatter,
-            cs: csDateFormatter,
-            fr: frDateFormatter,
-            es: esDateFormatter,
-            de: deDateFormatter,
-            he: heDateFormatter,
         },
     };
 
@@ -53,53 +33,15 @@ class L10n implements IEvents<Events> {
         return this.formatters[formatter].iso;
     }
 
-    init(config: DateFnsConfig) {
-        this.dateFnsConfig = config;
-    }
-
     setLocale(locale: string) {
         if (locale === this.locale) return;
         this.locale = locale;
         this.triggerEvent('localechange');
     }
 
-    getDateFnsFormatter = (
-        timestamp: number | Date,
-        locale: string,
-        fallbackCb: (options?: DateTimeFormatOptions) => string,
-        fallbackFormatType?: DateTimeFormatOptions['formatType'],
-    ) => (
-        (options?: DateTimeFormatOptions): string => {
-            const { formatType, ...baseOptions } = options || {};
-            const dateFnsBsFormat = this.dateFnsConfig?.[formatType || fallbackFormatType!];
-            if (!dateFnsBsFormat) {
-                if (!options || Object.keys(baseOptions).length === 0) {
-                    return fallbackCb();
-                }
-                return fallbackCb(baseOptions);
-            }
-            return format(
-                timestamp,
-                dateFnsBsFormat,
-                { locale: fnsLocales[locale as keyof typeof fnsLocales] },
-            );
-        }
-    );
-
-    date(timestamp: number | Date, locale: string = this.locale) {
-        const formatter = this.getFormatterByLocale('date', locale)(timestamp);
-
-        return {
-            toLocaleString: this.getDateFnsFormatter(
-                timestamp, locale, formatter.toLocaleString,
-            ),
-            toLocaleTimeString: this.getDateFnsFormatter(
-                timestamp, locale, formatter.toLocaleTimeString, 'timeFormat',
-            ),
-            toLocaleDateString: this.getDateFnsFormatter(
-                timestamp, locale, formatter.toLocaleDateString, 'dateFormatShort',
-            ),
-        };
+    date(timestamp: number | Date, locale?: string) {
+        const formatter = this.getFormatterByLocale('date', locale);
+        return formatter(timestamp);
     }
 
     addFormatter<T extends keyof Formatters, U extends keyof Formatters[T]>(

package/packages/list/src/Base/Base.tsx

@@ -100,13 +100,11 @@ export class ListBase<T extends Item<U>, U>
     componentDidMount() {
         this.scrollerDom.current!.addEventListener('wheel', this.onWheel);
         this.scroller.current!.wrapRef.current!.addEventListener('keyup', this.onKeyUp);
-        window.document.addEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     componentWillUnmount() {
         this.scrollerDom.current!.removeEventListener('wheel', this.onWheel);
         this.scroller.current!.wrapRef.current!.removeEventListener('keyup', this.onKeyUp);
-        window.document.removeEventListener('keyup', this.onGlobalKeyUp, true);
     }
 
     onKeyDown = (event: KeyboardEvent) => {
@@ -132,9 +130,6 @@ export class ListBase<T extends Item<U>, U>
     onKeyUp = () => {
         this.stopFastScrolling();
         this.fastFocusingOptimizer.stop();
-    };
-
-    onGlobalKeyUp = () => {
         this.preventBlurCounter = 0;
     };
 
@@ -157,6 +152,14 @@ export class ListBase<T extends Item<U>, U>
         }
     };
 
+    shouldPreventBlur(event: KeyboardEvent) {
+        const { horizontal, preventBlurOnLongPress } = this.props;
+        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
+            (preventBlurOnLongPress.forward && isForward(event, horizontal))
+            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
+        ));
+    }
+
     getRefAtIndex(i: number): Reference<T> {
         const ref = this.itemRefs[i];
         if (!ref) {
@@ -198,14 +201,6 @@ export class ListBase<T extends Item<U>, U>
         this.fastScrollingCounter.reset();
     }
 
-    shouldPreventBlur(event: KeyboardEvent) {
-        const { horizontal, preventBlurOnLongPress } = this.props;
-        return (this.preventBlurCounter >= PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS && (
-            (preventBlurOnLongPress.forward && isForward(event, horizontal))
-            || (preventBlurOnLongPress.backward && isBackward(event, horizontal))
-        ));
-    }
-
     animatedScrollStarted() {
         this.isAnimatedScrollRunning = true;
     }
@@ -365,10 +360,7 @@ export class ListBase<T extends Item<U>, U>
     }
 
     render() {
-        const {
-            horizontal, className,
-            mrcuMountingPoint, mrcuForward, mrcuBackward, forward, backward,
-        } = this.props;
+        const { horizontal, className, mrcuMountingPoint } = this.props;
         return (
             <Scroller
                 className={className}
@@ -383,8 +375,6 @@ export class ListBase<T extends Item<U>, U>
                     ref={this.mrcuRef}
                     getMountingPoint={() => mrcuMountingPoint || this.scroller.current!.wrapRef}
                     {...this.props}
-                    forward={mrcuForward || forward}
-                    backward={mrcuBackward || backward}
                 />
             </Scroller>
         );

package/packages/list/src/Base/interface.ts

@@ -4,11 +4,11 @@ export type MouseNavigationProps = {
     /**
       * Function to call on the press of the right arrow.
       */
-    forward(): void,
+    forward(): boolean,
     /**
       * Function to call on the press of the left arrow.
       */
-    backward(): void,
+    backward(): boolean,
     /**
       * Function which determines whether to show the forward arrow.
       */

package/packages/list/src/CenteredList/controller.ts

@@ -30,6 +30,7 @@ export class CenteredListController<T> extends UnifiedListController<T, Props<an
         this.scrollListScroller(-this.topOffset);
         if (initialFocusIndex !== 0) {
             base.index = initialFocusIndex!;
+            this.focusCurrentItem();
             this.scroll(base.index, false);
         }
     }

package/packages/list/src/EdgeOffsetList/EdgeOffsetList.tsx

@@ -81,14 +81,14 @@ export class EdgeOffsetList<T extends Item<U>, U>
         const list = this.base.current!;
         list.index = Math.max(
             0,
-            Math.min(scrollIndex + visibleItems - VISIBLE_ITEMS_OFFSET - 1, list.data.length - 1),
+            Math.min(scrollIndex + visibleItems - VISIBLE_ITEMS_OFFSET, list.data.length - 1),
         );
         this.forward();
     };
 
     mrcuBackward = () => {
         const list = this.base.current!;
-        list.index = this.controller.scrollIndex + 1;
+        list.index = this.controller.scrollIndex;
         this.backward();
     };
 
@@ -148,7 +148,7 @@ export class EdgeOffsetList<T extends Item<U>, U>
         const { edgeOffset } = this.props;
         const list = this.base.current!;
         list.index = index;
-        if (list.index <= this.controller.scrollIndex) {
+        if (list.index < this.controller.scrollIndex) {
             this.controller.scroll(list.index < edgeOffset ? 0 : list.index - edgeOffset);
         }
     }

package/packages/list/src/UnifiedListController/UnifiedListController.ts

@@ -144,16 +144,12 @@ extends SharedProps<any, any> = SharedProps<any, any>>
         if (backward) {
             nextScrollIndex = this.scrollPixelsToIndex(scrollValuePx, backward);
             if (this.lastScrollIndex !== nextScrollIndex) {
-                for (let i = this.lastScrollIndex - 1; i >= nextScrollIndex; i--) {
-                    this.adjustItemsOffsetsBackward(i);
-                }
+                this.adjustItemsOffsetsBackward(nextScrollIndex);
             }
         } else {
             nextScrollIndex = this.scrollPixelsToIndex(scrollValuePx, backward);
             if (this.lastScrollIndex !== nextScrollIndex) {
-                for (let i = this.lastScrollIndex + 1; i <= nextScrollIndex; i++) {
-                    this.adjustItemsOffsetsForward(i);
-                }
+                this.adjustItemsOffsetsForward(nextScrollIndex);
             }
         }
         this.lastScrollIndex = nextScrollIndex;

package/packages/logger/src/loggers/SentryLogger/Sentry.ts

@@ -1,2 +1 @@
 export * as Sentry from '@sentry/browser';
-export { ErrorEvent } from '@sentry/types';

package/packages/logger/src/loggers/SentryLogger/SentryLogger.ts

@@ -3,7 +3,7 @@ import { IStorage, Storage as DefaultStorage } from '@24i/bigscreen-sdk/storage'
 import { LogOptions, LogLevel, SentryLoggerEnvironment, XhrBreadcrumbData } from '../../types';
 import { getFormattedMemoryHeapInfo, getFormattedUsedLocalStorageSize } from '../../utils';
 import { LoggerBase, Config as LoggerBaseConfig } from '../LoggerBase';
-import { Sentry, ErrorEvent } from './Sentry';
+import { Sentry } from './Sentry';
 
 type Config = {
     sentryOptions: Sentry.BrowserOptions;
@@ -46,7 +46,7 @@ export class SentryLogger extends LoggerBase {
         const { beforeSend, ...restOptions } = options;
         Sentry.init({
             ...restOptions,
-            beforeSend: async (event: ErrorEvent, hint: Sentry.EventHint) => {
+            beforeSend: async (event: Sentry.Event, hint: Sentry.EventHint) => {
                 if (this.mute) return null;
                 await this.sendMemoryInfo(event);
                 return beforeSend ? beforeSend(event, hint) : event;

package/packages/menu/src/MenuAndContentContainer/MenuAndContentContainer.tsx

@@ -100,7 +100,7 @@ export class MenuAndContentContainer<T extends string = string>
      * Handles opening with mouse.
      * @param event mouse event
      */
-    onMouseDown = (event: MouseEvent) => {
+    onMouseMove = (event: MouseEvent) => {
         const menu = this.menu.current!;
         if (this.isMenuAvailable() && !menu.isOpen()) {
             menu.open();
@@ -108,30 +108,6 @@ export class MenuAndContentContainer<T extends string = string>
         }
     };
 
-    /**
-     * Handles hover with mouse.
-     * @param event mouse event
-     */
-    onMouseEnter = (event: MouseEvent) => {
-        const menu = this.menu.current!;
-        if (this.isMenuAvailable() && !menu.isOpen() && menu.mrcuEnter) {
-            menu.mrcuEnter();
-            stopEvent(event);
-        }
-    };
-
-    /**
-     * Handles hover end with mouse.
-     * @param event mouse event
-     */
-    onMouseLeave = (event: MouseEvent) => {
-        const menu = this.menu.current!;
-        if (this.isMenuAvailable() && !menu.isOpen() && menu.mrcuLeave) {
-            menu.mrcuLeave();
-            stopEvent(event);
-        }
-    };
-
     /**
      * Handles adding/removing mouse listeners based on whether the mouse is used or not.
      * @param event mouse active event
@@ -161,9 +137,7 @@ export class MenuAndContentContainer<T extends string = string>
         if (!this.listensToMouse) {
             this.listensToMouse = true;
             if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.show();
-            this.mouseTriggerElement.current!.addEventListener('mousedown', this.onMouseDown);
-            this.mouseTriggerElement.current!.addEventListener('mouseenter', this.onMouseEnter);
-            this.mouseTriggerElement.current!.addEventListener('mouseleave', this.onMouseLeave);
+            this.mouseTriggerElement.current!.addEventListener('mousemove', this.onMouseMove);
         }
     }
 
@@ -174,9 +148,7 @@ export class MenuAndContentContainer<T extends string = string>
         if (this.listensToMouse) {
             this.listensToMouse = false;
             if (!this.menu.current!.isOpen()) this.mouseTriggerElementDisplayToggler.hide();
-            this.mouseTriggerElement.current!.removeEventListener('mousedown', this.onMouseDown);
-            this.mouseTriggerElement.current!.removeEventListener('mouseenter', this.onMouseEnter);
-            this.mouseTriggerElement.current!.removeEventListener('mouseleave', this.onMouseLeave);
+            this.mouseTriggerElement.current!.removeEventListener('mousemove', this.onMouseMove);
         }
     }
 

package/packages/menu/src/MenuAndContentContainer/interface.ts

@@ -112,14 +112,6 @@ export interface Menu<
      * Function to close the menu.
      */
     close(): void,
-    /**
-     * Function for "hover" effect on the menu.
-     */
-    mrcuEnter?(): void,
-    /**
-     * Function for ending "hover" effect on the menu.
-     */
-    mrcuLeave?(): void,
     /**
      * Renders new menu items.
      * @param items new items to render

package/packages/modal-service/README.md

@@ -9,10 +9,7 @@ sidebar_label: Modal Service
 A component which helps managing modal windows. Handles rendering and focus management.
 
 ## Props
-- ```ref``` - the reference to the modal service instance
-- ```className``` - custom class name for modal service div
-- ```isFocusable``` - whether is modal focusable or not
-- ```onCloseLastModal``` - function called when the last modal is closed
+- ref - the reference to the modal service instance
 
 ## Provided functionality
 - exports interface which needs to be implemented by the modal component

package/packages/modal-service/src/ModalService.tsx

@@ -1,36 +1,27 @@
-import { Component, createRef, Reference, clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Component, createRef, Reference, clearNode } from '@24i/bigscreen-sdk/jsx';
 import {
     setActiveElementAsFocusCandidate, focusCandidate, refocusAfterHashChange,
 } from '@24i/bigscreen-sdk/focus';
-import { noop } from '@24i/bigscreen-sdk/utils';
 import { IModal } from './IModal';
 import './ModalService.styles';
 
 type Props = {
     className?: string;
     isFocusable?: boolean;
-    onCloseLastModal?: Function,
 };
 
-type RenderFunction = (ref:Reference) => JSX.Element;
-
 export class ModalService extends Component<Props> {
     private openState = false;
 
     private readonly rootRef = createRef<HTMLDivElement>();
 
-    private readonly modalQueue: RenderFunction[] = [];
-
     modalRef = createRef<any>();
 
     static defaultProps = {
         className: '',
         isFocusable: true,
-        onCloseLastModal: noop,
     };
 
-    declare props: DeclareProps<Props, typeof ModalService.defaultProps>;
-
     componentDidMount() {
         window.addEventListener('hashchange', this.onHashChange);
     }
@@ -46,22 +37,10 @@ export class ModalService extends Component<Props> {
     };
 
     getMountedComponent() {
-        return this.modalRef as Reference<IModal>;
-    }
-
-    private enqueueModal(modal: RenderFunction) {
-        this.modalQueue.push(modal);
+        return this.modalRef;
     }
 
-    private dequeueModal() {
-        return this.modalQueue.shift();
-    }
-
-    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element, queueModal = false) {
-        if (queueModal && this.openState) {
-            this.enqueueModal(render);
-            return;
-        }
+    open<T extends IModal>(render: (ref: Reference<T>) => JSX.Element) {
         const { isFocusable } = this.props;
         this.openState = true;
         this.clearMount(
@@ -74,16 +53,13 @@ export class ModalService extends Component<Props> {
         }
     }
 
-    close(ignoreQueue = false) {
-        const { isFocusable, onCloseLastModal } = this.props;
+    close() {
+        const { isFocusable } = this.props;
         this.openState = false;
         clearNode(this.rootRef);
         if (isFocusable) {
             focusCandidate();
         }
-        const modalFromQueue = this.dequeueModal();
-        if (modalFromQueue && !ignoreQueue) this.open(modalFromQueue);
-        if (!this.modalQueue.length) onCloseLastModal();
     }
 
     isOpen() {

package/packages/perf-utils/README.md

@@ -5,4 +5,123 @@ hide_title: true
 sidebar_label: Performance Utils
 ---
 
-https://github.com/24i/appstage-shared-packages/blob/main/packages/perf-utils/README.md
+# Performance Utils
+Set of utilities that should increase a performance if they are used instead of a native way, mainly on older devices (e.g. Entone/Kamai set-top-boxes).
+
+> **Please check the limitations of each performance utility You want to use in a code.**
+
+## Available perf utils
+- **[Array](#array-perf-utils)**
+    - [filter](#filter)
+    - [forEach](#foreach)
+    - [includes](#includes)
+    - [includesNaN](#includesnan)
+    - [map](#map)
+  
+## Array perf utils
+
+> In general, each Array utility which requires a callback will iterate over all array items, even if array index hasn't been initialized yet (to understand the issue, see [An adventure in sparse arrays](https://remysharp.com/2018/06/26/an-adventure-in-sparse-arrays)).
+
+### filter()
+> The filter() method creates a new array with all elements that pass the test implemented by the provided function.  
+
+For more info, please see [native **filter** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
+
+#### Limitations against native implementation
+- **`callback` is invoked for all indexes of the array** (not only for indexes with assigned values like [native filter implementation](http://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#Description)).
+- **Doesn't coerce returned value from a callback to `true` or `false`**, the callback has to return a boolean value directly.
+- Doesn't accept the `scope` as last argument.
+
+#### Usage
+```javascript
+import { filter } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];
+//const result = array.filter(word => word.length > 6); // slower native solution
+const result = filter(array, word => word.length > 6);  // faster
+
+console.log(result);
+// expected output: Array ["exuberant", "destruction"]
+```
+
+### forEach()
+> The forEach() method executes a provided function once for each array element.
+
+For more info, please see [native **forEach** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach).
+
+#### Limitations against native implementation
+- **`callback` is invoked for all indexes of the array** (not only for indexes with assigned values like [native forEach implementation](http://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Description)).
+- Doesn't accept the `scope` as last argument.
+
+#### Usage
+```javascript
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = ['a', 'b', 'c'];
+// array.forEach(item => console.log(item)); // slower native solution
+forEach(array, item => console.log(item));   // faster
+
+// expected output: "a"
+// expected output: "b"
+// expected output: "c"
+```
+
+### includes()
+> The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
+
+For more info, please see [native **includes** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).
+
+#### Limitations against native implementation
+- **Doesn't work for searching NaN value!** For that purpose, please use [includesNaN()](#includesnan).
+- Doesn't support negative indexes for `fromIndex` param - the entire array will be processed.
+
+#### Usage
+```javascript
+import { includes } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = ['item0', 'item1', 'item2'];
+
+//console.log(array.includes('item1')); // slower native solution
+console.log(includes(array, 'item1'));  // faster
+// expected output: true
+
+//console.log(array.includes('item1')); // slower native solution
+console.log(includes(array, 'item1', 2));  // faster
+// expected output: false
+```
+
+### includesNaN()
+> The includesNaN() method determines whether an array includes NaN value among its entries, returning true or false as appropriate.
+
+#### Usage
+```javascript
+import { includesNaN } from '@24i/bigscreen-sdk/perf-utils/array';
+
+console.log(includesNaN([0, NaN, 1]));
+// expected output: true
+
+console.log(includesNaN([0, NaN, 1], 2));
+// expected output: false
+```
+
+### map()
+> The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
+
+For more info, please see [native **map** method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
+
+#### Limitations against native implementation
+- **`callback` is invoked for all indexes of the array** (not only for indexes with assigned values like [native map implementation](http://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Description)).
+- Doesn't accept the `scope` as last argument.
+
+#### Usage
+```javascript
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+const array = [1, 4, 9, 16];
+
+// const mappedArray = array.map(x => x * 2); // slower native solution
+const mappedArray = map(array, x => x * 2);   // faster
+
+console.log(mappedArray);
+// expected output: Array [2, 8, 18, 32]
+```