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

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/BasicList/BasicList.tsx

@@ -127,34 +127,34 @@ export class BasicList<T extends Item<U>, U>
         this.controller.focusCurrentItem(options);
     }
 
-    scrollTo(index: number, animate?: boolean) {
+    scrollTo(index: number) {
         const list = this.base.current!;
         const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
         if (list.index === safeIndex) return;
         if (list.index < safeIndex) {
-            this.scrollToForward(safeIndex, animate);
+            this.scrollToForward(safeIndex);
         } else {
-            this.scrollToBackward(safeIndex, animate);
+            this.scrollToBackward(safeIndex);
         }
     }
 
-    private scrollToForward(index: number, animate?: boolean) {
+    private scrollToForward(index: number) {
         const { visibleItems } = this.props;
         const list = this.base.current!;
         list.index = index;
         const scrollTarget = list.index - visibleItems + VISIBLE_ITEMS_OFFSET;
         if (scrollTarget > this.controller.scrollIndex) {
-            this.controller.scroll(scrollTarget, animate);
+            this.controller.scroll(scrollTarget);
         }
     }
 
-    private scrollToBackward(index: number, animate?: boolean) {
+    private scrollToBackward(index: number) {
         const { firstScrollStep, scrollStep } = this.props;
         const list = this.base.current!;
         list.index = index;
         const offset = firstScrollStep < scrollStep ? 1 : 0;
         if (list.index - offset < this.controller.scrollIndex) {
-            this.controller.scroll(list.index, animate);
+            this.controller.scroll(list.index);
         }
     }
 

package/packages/list/src/CenteredList/CenteredList.tsx

@@ -90,12 +90,12 @@ export class CenteredList<T extends Item<U>, U>
         this.controller.focusCurrentItem(options);
     }
 
-    scrollTo(index: number, animate?: boolean) {
+    scrollTo(index: number) {
         const list = this.base.current!;
         const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
         if (list.index === safeIndex) return;
         list.index = safeIndex;
-        this.controller.scroll(list.index, animate);
+        this.controller.scroll(list.index);
     }
 
     render() {

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();
     };
 
@@ -120,18 +120,18 @@ export class EdgeOffsetList<T extends Item<U>, U>
         this.controller.focusCurrentItem(options);
     }
 
-    scrollTo(index: number, animate?: boolean) {
+    scrollTo(index: number) {
         const list = this.base.current!;
         const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
         if (list.index === safeIndex) return;
         if (list.index < safeIndex) {
-            this.scrollToForward(safeIndex, animate);
+            this.scrollToForward(safeIndex);
         } else {
-            this.scrollToBackward(safeIndex, animate);
+            this.scrollToBackward(safeIndex);
         }
     }
 
-    private scrollToForward(index: number, animate?: boolean) {
+    private scrollToForward(index: number) {
         const { visibleItems, edgeOffset } = this.props;
         const list = this.base.current!;
         list.index = index;
@@ -140,16 +140,16 @@ export class EdgeOffsetList<T extends Item<U>, U>
             : edgeOffset + list.index - list.data.length - 1;
         const scrollTarget = list.index - visibleItems + offset + VISIBLE_ITEMS_OFFSET;
         if (scrollTarget > this.controller.scrollIndex) {
-            this.controller.scroll(scrollTarget, animate);
+            this.controller.scroll(scrollTarget);
         }
     }
 
-    private scrollToBackward(index: number, animate?: boolean) {
+    private scrollToBackward(index: number) {
         const { edgeOffset } = this.props;
         const list = this.base.current!;
         list.index = index;
-        if (list.index <= this.controller.scrollIndex) {
-            this.controller.scroll(list.index < edgeOffset ? 0 : list.index - edgeOffset, animate);
+        if (list.index < this.controller.scrollIndex) {
+            this.controller.scroll(list.index < edgeOffset ? 0 : list.index - edgeOffset);
         }
     }
 

package/packages/list/src/FirstOnlyList/FirstOnlyList.tsx

@@ -96,12 +96,12 @@ export class FirstOnlyList<T extends Item<U>, U>
         this.controller.focusCurrentItem(options);
     }
 
-    scrollTo(index: number, animate?: boolean) {
+    scrollTo(index: number) {
         const list = this.base.current!;
         const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
         if (list.index === safeIndex) return;
         list.index = safeIndex;
-        this.controller.scroll(list.index, animate);
+        this.controller.scroll(list.index);
     }
 
     render() {

package/packages/list/src/FirstOnlyVariedList/FirstOnlyVariedList.tsx

@@ -106,12 +106,12 @@ export class FirstOnlyVariedList<T extends Item<U>, U> extends Component<Props<T
         this.controller.focusCurrentItem(options);
     }
 
-    scrollTo(index: number, animate?: boolean) {
+    scrollTo(index: number) {
         const list = this.base.current!;
         const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
         if (list.index === safeIndex) return;
         list.index = safeIndex;
-        this.controller.scroll(0, animate);
+        this.controller.scroll(0);
     }
 
     render() {

package/packages/list/src/FixedToEndList/FixedToEndList.tsx

@@ -99,12 +99,12 @@ export class FixedToEndList<T extends Item<U>, U>
         this.controller.focusCurrentItem(options);
     }
 
-    scrollTo(index: number, animate?: boolean) {
+    scrollTo(index: number) {
         const list = this.base.current!;
         const safeIndex = Math.max(0, Math.min(index, list.data.length - 1));
         if (list.index === safeIndex) return;
         list.index = safeIndex;
-        this.controller.scroll(list.index, animate);
+        this.controller.scroll(list.index);
     }
 
     render() {

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/list/src/interface.ts

@@ -12,7 +12,7 @@ export interface List<
     controller: UnifiedListController<U>,
     appendData(data: U[]): void,
     prependData(data: U[]): void,
-    scrollTo(index: number, animate?: boolean): void,
+    scrollTo(index: number): void,
 }
 
 export interface VariedList<
@@ -22,7 +22,7 @@ export interface VariedList<
     controller: UnifiedVariedListController<U>,
     appendData(data: U[]): void,
     prependData(data: U[]): void,
-    scrollTo(index: number, animate?: boolean): void,
+    scrollTo(index: number): void,
 }
 
 export interface ListComponent<

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

@@ -43,13 +43,7 @@ export class ConsoleLogger extends LoggerBase {
         let errorMessage = category ? `[${category.toUpperCase()}] ${message}` : message;
         if (additionalData) {
             if (additionalData.message) errorMessage += ` - ${additionalData.message}`;
-            let stringifiedAdditionalData;
-            try {
-                stringifiedAdditionalData = JSON.stringify(
-                    additionalData, null, LOG_MESSAGE_SPACE_SIZE,
-                );
-            } catch {}
-            logFunction(errorMessage, stringifiedAdditionalData);
+            logFunction(errorMessage, JSON.stringify(additionalData, null, LOG_MESSAGE_SPACE_SIZE));
         } else {
             logFunction(errorMessage);
         }

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;
@@ -170,9 +170,7 @@ export class SentryLogger extends LoggerBase {
             }
             if (additionalData) {
                 if (additionalData.message) logMessage += ` - ${additionalData.message}`;
-                try {
-                    scope.setExtra(contextKeys.ADDITIONAL_DATA, JSON.stringify(additionalData));
-                } catch {}
+                scope.setExtra(contextKeys.ADDITIONAL_DATA, JSON.stringify(additionalData));
             }
             Sentry.captureMessage(logMessage, level);
         });

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() {