@24i/bigscreen-sdk 1.0.4-alpha.2120 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.4-alpha.2120",
+    "version": "1.0.4",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -38,11 +38,11 @@
     "homepage": "https://github.com/24i/smartapps-bigscreen-sdk#readme",
     "dependencies": {
         "@24i/player-base": "6.10.0",
-        "@24i/smartapps-datalayer": "2.3.4-beta.2",
-        "@sentry/browser": "^7.8.0",
+        "@24i/smartapps-datalayer": "3.0.2",
+        "@sentry/browser": "^7.12.1",
         "@types/prop-types": "^15.7.5",
-        "@types/scheduler": "^0.16.1",
-        "csstype": "^3.1.0",
+        "@types/scheduler": "^0.16.2",
+        "csstype": "^3.1.1",
         "lottie-web": "5.9.6",
         "prop-types": "^15.8.1"
     },
@@ -50,33 +50,33 @@
         "@24i/bigscreen-sdk": "file:.",
         "@24i/eslint-config-smartapps-bigscreen-linters": "file:./libs/linters",
         "@24i/smartapps-bigscreen-changelog-generator": "0.17.0",
-        "@babel/core": "^7.18.9",
-        "@babel/preset-env": "^7.18.9",
+        "@babel/core": "^7.19.0",
+        "@babel/preset-env": "^7.19.0",
         "@types/fs-extra": "^9.0.13",
-        "@types/inquirer": "^8.2.1",
-        "@types/jest": "^28.1.6",
+        "@types/inquirer": "^9.0.1",
+        "@types/jest": "^29.0.2",
         "@types/minimist": "^1.2.2",
-        "@types/node": "^18.6.3",
-        "@types/react": "^18.0.18",
-        "babel-jest": "^28.1.2",
-        "chalk": "^4.1.2",
-        "coveralls": "^3.1.0",
+        "@types/node": "^18.7.18",
+        "@types/react": "^18.0.20",
+        "babel-jest": "^29.0.3",
+        "chalk": "^5.0.1",
+        "coveralls": "^3.1.1",
         "cross-env": "^7.0.3",
         "fs-extra": "^10.1.0",
-        "full-icu": "^1.4.0",
+        "full-icu": "^1.5.0",
         "identity-obj-proxy": "^3.0.0",
-        "inquirer": "^9.0.2",
-        "jest": "^28.1.2",
+        "inquirer": "^9.1.1",
+        "jest": "^29.0.3",
         "jest-canvas-mock": "^2.4.0",
-        "jest-environment-jsdom": "^28.1.2",
+        "jest-environment-jsdom": "^29.0.3",
         "minimist": "^1.2.6",
-        "patch-package": "^6.2.1",
-        "sass": "^1.54.8",
+        "patch-package": "^6.4.7",
+        "sass": "^1.54.9",
         "sass-true": "^6.1.0",
-        "ts-jest": "^28.0.8",
-        "ts-node": "^10.8.2",
+        "ts-jest": "^29.0.1",
+        "ts-node": "^10.9.1",
         "tsconfig-paths-jest": "0.0.1",
-        "typescript": "^4.8.2"
+        "typescript": "^4.8.3"
     },
     "exports": {
         "./adobe-heartbeat": "./packages/adobe-heartbeat/src/index.ts",

package/packages/developer-tools/src/EnvironmentSelection/EnvironmentListItem.tsx

@@ -53,7 +53,7 @@ export class EnvironmentListItem extends Component<Props> implements Item<ItemDa
     trimRows() {
         const { leadingEllipses } = this.props;
         if (leadingEllipses) {
-            trimWithLeadingEllipsis(this.labelRef.current!, 2);
+            trimWithLeadingEllipsis(this.labelRef.current!, 1);
         }
     }
 

package/packages/grid/README.md

@@ -83,6 +83,25 @@ Because of this behavior, actions frequently used in onFocusChanged representing
 scroll change can't be used. For this purpose there is `onScrollChanged` callback,
 which is called every time grid is performing scroll operation.
 
+## Prevent blur on long press
+When the user holds a navigation key, he usually scrolls to the end (or start) of the grid,
+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 grid will propagate to another component
+in the layout. This causes for example opening of the menu even though the user is still holding
+the key and scrolling the grid. For those situations and to have better control above the layout
+navigation, there is a prop `preventBlurOnLongPress`. When the user scrolls to the end (or start)
+of the grid, he needs to release the key and press it again to propagate the event higher
+and focus another component.
+
+```ts
+preventBlurOnLongPress: {
+    forward?: boolean, // apply when user scroll forward in the current grid group
+    backward?: boolean, // apply when user scroll backward in the current grid group
+    forwardGroup?: boolean, // apply when user scroll forward the whole grid group
+    backwardGroup?: boolean, // apply when user scroll backward the whole grid group
+}
+```
+
 ## Prepared grids
 - [BasicGrid - (slow/animated)](./BasicGrid/README.md)
 - [FixedToEndGrid - (slow/animated)](./FixedToEndGrid/README.md)
@@ -134,10 +153,10 @@ Less the number, slower the scrolling. Undefined or 0 is unlimited scroll speed.
 speed could improve overall animation performance in some cases.
 
 ### fastLinear property
-List animation provides possibility of optimizing the animation during slow speeds and smoothing
+Grid animation provides possibility of optimizing the animation during slow speeds and smoothing
 the scrolling effect without easing in `normal` property interfering the movement.
 This is achieved by changing the ease of the animation to linear when the scroll is longer
-and user is moving the list further.
+and user is moving the grid further.
 `fastLinear` property have these settings:
 - time - duration of the animation, same as in `normal` property
 - startRatio - this number represents the threshold, when should linear animation start.

package/packages/grid/src/Base/Base.tsx

@@ -20,9 +20,9 @@ export type Props<T extends Item<U>, U> = Omit<SharedProps<T, U>, 'scrollStep'>
     shouldShowMrcuForward?: () => boolean,
     shouldShowMrcuBackward?: () => boolean,
     adjustFocusFromTarget?: (itemRefIndex: number, groupRefIndex: number) => void,
+    shouldApplySlowdown?: () => boolean,
     horizontal?: boolean,
     limit?: number,
-    shouldApplySlowdown?: () => boolean,
 };
 
 const isForward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
@@ -49,6 +49,8 @@ const WHEEL_STOP_TIMEOUT = 500;
 
 const FAST_SCROLLING_TRIGGERED_AT = 2;
 
+const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
+
 export class GridBase<T extends Item<U>, U>
     extends Component<Props<T, U>> {
     scroller = createRef<Scroller>();
@@ -75,6 +77,8 @@ export class GridBase<T extends Item<U>, U>
 
     isFastScrolling = false;
 
+    preventBlurCounter = 0;
+
     static defaultProps = {
         className: '',
         horizontal: false,
@@ -82,6 +86,7 @@ export class GridBase<T extends Item<U>, U>
         onFocusChanged: noop,
         fastFocusingOptimization: false,
         shouldApplySlowdown: () => false,
+        preventBlurOnLongPress: {},
     };
 
     declare props: DeclareProps<Props<T, U>, typeof GridBase.defaultProps>;
@@ -118,6 +123,7 @@ export class GridBase<T extends Item<U>, U>
         const {
             horizontal, forward, backward, forwardGroup, backwardGroup, shouldApplySlowdown,
         } = this.props;
+        this.preventBlurCounter += 1;
         if (device.isMouseUsed()) this.adjustIndexFromTarget(event.target!);
         let processed;
         let processedGroup;
@@ -142,12 +148,14 @@ export class GridBase<T extends Item<U>, U>
         } else if (processed === false) {
             this.fastFocusingOptimizer.stop();
             this.stopFastScrolling();
+            if (this.shouldPreventBlur(event)) stopEvent(event);
         }
     };
 
     onKeyUp = () => {
         this.stopFastScrolling();
         this.fastFocusingOptimizer.stop();
+        this.preventBlurCounter = 0;
     };
 
     onWheel = (event: WheelEvent) => {
@@ -170,6 +178,16 @@ export class GridBase<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))
+            || (preventBlurOnLongPress.forwardGroup && isFwGroup(event, horizontal))
+            || (preventBlurOnLongPress.backwardGroup && isBwGroup(event, horizontal))
+        ));
+    }
+
     getRefAtIndex(i: number): Reference<T> {
         const ref = this.itemRefs[i];
         if (!ref) {

package/packages/grid/src/types.ts

@@ -29,6 +29,12 @@ type CommonProps<T extends Item<U>, U> = {
     fastFocusingOptimization?: boolean,
     onScrollChanged?: (item: Reference<T>, scrollIndex: number) => void,
     firstScrollStep?: number,
+    preventBlurOnLongPress?: {
+        forward?: boolean,
+        backward?: boolean,
+        forwardGroup?: boolean,
+        backwardGroup?: boolean,
+    }
 };
 
 type VerticalSharedProps = {

package/packages/list/README.md

@@ -106,6 +106,23 @@ Because of this behavior, actions frequently used in onFocusChanged representing
 scroll change can't be used. For this purpose there is `onScrollChanged` callback,
 which is called every time list is performing scroll operation.
 
+## Prevent blur on long press
+When the user holds a navigation key, he usually scrolls to the end (or start) of the list
+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 list will propagate to another component
+in the layout. This causes for example opening of the menu even though the user is still holding
+the key and scrolling the list. For those situations and to have better control above the layout
+navigation, there is a prop `preventBlurOnLongPress`. When the user scrolls to the end (or start)
+of the list, he needs to release the key and press it again to propagate the event higher
+and focus another component.
+
+```ts
+preventBlurOnLongPress: {
+    forward?: boolean, // apply when user scroll forward
+    backward?: boolean, // apply when user scroll backward
+}
+```
+
 ## Prepared lists
 - Fixed item size lists
     - [BasicList - (slow/animated)](./BasicList/README.md)

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

@@ -24,8 +24,8 @@ export type Props<T extends Item<U>, U> = BasicProps<T, U> & {
     shouldShowMrcuForward?: () => boolean,
     shouldShowMrcuBackward?: () => boolean,
     adjustFocusFromTarget?: (itemRefIndex: number) => void,
-    limit?: number,
     shouldApplySlowdown?: () => boolean,
+    limit?: number,
 };
 
 const isForward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
@@ -39,8 +39,11 @@ const isBackward = (event: KeyboardEvent, horizontal: boolean | undefined) => {
 };
 
 const WHEEL_STOP_TIMEOUT = 500;
+
 const FAST_SCROLLING_TRIGGERED_AT = 2;
 
+const PREVENT_BLUR_ON_LONG_PRESS_KEYDOWNS = 2;
+
 export class ListBase<T extends Item<U>, U>
     extends Component<Props<T, U>> {
     scroller = createRef<Scroller>();
@@ -65,11 +68,14 @@ export class ListBase<T extends Item<U>, U>
 
     isFastScrolling = false;
 
+    preventBlurCounter = 0;
+
     static defaultProps = {
         className: '',
         adjustFocusFromTarget: noop,
         fastFocusingOptimization: false,
         shouldApplySlowdown: () => false,
+        preventBlurOnLongPress: {},
     };
 
     declare props: DeclareProps<Props<T, U>, typeof ListBase.defaultProps>;
@@ -105,9 +111,9 @@ export class ListBase<T extends Item<U>, U>
         const {
             horizontal, forward, backward, shouldApplySlowdown,
         } = this.props;
+        this.preventBlurCounter += 1;
         this.fastFocusingOptimizer.onKeyDown();
         if (device.isMouseUsed()) this.adjustIndexFromTarget(event.target!);
-
         let processed;
         if (isForward(event, horizontal)) processed = shouldApplySlowdown() || forward();
         else if (isBackward(event, horizontal)) processed = shouldApplySlowdown() || backward();
@@ -117,12 +123,14 @@ export class ListBase<T extends Item<U>, U>
         } else if (processed === false) {
             this.fastFocusingOptimizer.stop();
             this.stopFastScrolling();
+            if (this.shouldPreventBlur(event)) stopEvent(event);
         }
     };
 
     onKeyUp = () => {
         this.stopFastScrolling();
         this.fastFocusingOptimizer.stop();
+        this.preventBlurCounter = 0;
     };
 
     onWheel = (event: WheelEvent) => {
@@ -144,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) {

package/packages/list/src/types.ts

@@ -51,32 +51,39 @@ export type BasicProps<T extends Item<U>, U> = {
      * config files
      */
     animate?: boolean,
+    /**
+     * Configuration of the animation.
+     */
     animation?: AnimationConfiguration,
-
     /**
      * Flag that allows speed up scrolling with built in feature in Item
      * (onFastScrolling) by reducing amount of elements during scrolling.
      */
     fastScrolling?: boolean,
-
     /**
      * Flag that enables fast focusing optimization for scrolling. It prevents
      * focusing items during scrolling that reduces possible reflow performance
      * issues.
      */
     fastFocusingOptimization?: boolean,
-
     /**
      * Returns a reference to the custom HTML element for the MRCU arrows.
      */
     mrcuMountingPoint?: Reference<HTMLDivElement>,
-
     /**
      * Function called every time before list performs one full scroll.
      * @param item Reference to item on current scroll
      * @param scrollIndex index of current scroll in list
      */
     onScrollChanged?: (item: Reference<T>, scrollIndex: number) => void,
+    /**
+     * Object with flags to prevent the blur of the component and jumping focus
+     * out when the user is holding a key to the very end (or start) of the list.
+     */
+    preventBlurOnLongPress?: {
+        forward?: boolean,
+        backward?: boolean,
+    }
 };
 
 export type SharedProps<T extends Item<U>, U> = BasicProps<T, U> & {

package/packages/types-bigscreen-jsx/index.d.ts

@@ -59,7 +59,7 @@ declare const UNDEFINED_VOID_ONLY: unique symbol;
 type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };
 type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
 
-// tslint:disable-next-line:export-just-namespace
+// eslint-disable-next-line export-just-namespace
 export = React;
 export as namespace React;