@24i/bigscreen-sdk 1.0.11-alpha.2229 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@24i/bigscreen-sdk",
-    "version": "1.0.11-alpha.2229",
+    "version": "1.0.11",
     "description": "SmartApps BIGscreen SDK monorepo",
     "main": "index.js",
     "scripts": {
@@ -260,6 +260,7 @@
         "./utils/debounce": "./packages/utils/src/debounce.ts",
         "./utils/displayToggler": "./packages/utils/src/displayToggler.ts",
         "./utils/elementUtils": "./packages/utils/src/elementUtils.ts",
+        "./utils/forceReflow": "./packages/utils/src/forceReflow.ts",
         "./utils/generateUuid": "./packages/utils/src/generateUuid.ts",
         "./utils/memoryInfo": "./packages/utils/src/memoryInfo.ts",
         "./utils/nTimes": "./packages/utils/src/nTimes.ts",

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
      */
-    onMouseMove = (event: MouseEvent) => {
+    onMouseDown = (event: MouseEvent) => {
         const menu = this.menu.current!;
         if (this.isMenuAvailable() && !menu.isOpen()) {
             menu.open();
@@ -108,6 +108,30 @@ 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
@@ -137,7 +161,9 @@ 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('mousemove', this.onMouseMove);
+            this.mouseTriggerElement.current!.addEventListener('mousedown', this.onMouseDown);
+            this.mouseTriggerElement.current!.addEventListener('mouseenter', this.onMouseEnter);
+            this.mouseTriggerElement.current!.addEventListener('mouseleave', this.onMouseLeave);
         }
     }
 
@@ -148,7 +174,9 @@ 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('mousemove', this.onMouseMove);
+            this.mouseTriggerElement.current!.removeEventListener('mousedown', this.onMouseDown);
+            this.mouseTriggerElement.current!.removeEventListener('mouseenter', this.onMouseEnter);
+            this.mouseTriggerElement.current!.removeEventListener('mouseleave', this.onMouseLeave);
         }
     }
 

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

@@ -112,6 +112,14 @@ 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/utils/README.md

@@ -21,6 +21,7 @@ import { generateUuid } from '@24i/bigscreen-sdk/utils/generateUuid';
 - **[addClass](#addClass)** - safely adds class to reference.
 - **[debounce](#debounce)** - debounced function is only executed again after a period of not being called, supports leading, trailing (default) and both executions.
 - **[displayToggler](#displayToggler)** - exports `getDisplayToggler` that allows you to easily show/hide an element with guard preventing unnecessary DOM calls.
+- **[forceReflow](#forceReflow)** - To force a DOM reflow on given DOM element.
 - **[generateUuid](#generateUuid)** - function to get UUIDv4 according to RFC 4122.
 - **[isMouseUsed](#isMouseUsed)** - **DEPRECATED** moved to `device` package.
 - **[memoryInfo](#memoryInfo)** - two functions that returns currently active segment size and total allocated size of JS heap, in bytes.
@@ -92,6 +93,18 @@ And returns `IDisplayToggler` interface with 4 functions:
 - `isVisible: () => boolean;` - returns true if the element is visible, false otherwise
 - `isHidden: () => boolean;` - returns true if the element is hidden, false otherwise
 
+### forceReflow
+To force a DOM reflow on given DOM element. It can be needed for transitions
+or other purposes.
+
+It takes 1 param:
+- `elementOrReference: HTMLElement | Reference<HTMLElement>` - DOM element or
+reference to element on which reflow is called.
+
+```ts
+forceReflow(elementRef);
+```
+
 ### generateUuid
 Returns an UUIDv4 according to RFC 4122, like ex. "123e4567-e89b-12d3-a456-426614174000".
 

package/packages/utils/src/forceReflow.ts

@@ -0,0 +1,14 @@
+import { Reference, unwrapReference } from '@24i/bigscreen-sdk/jsx';
+
+/**
+ * To force a DOM reflow on given DOM element. It can be needed for transitions
+ * or other purposes.
+ * @param elementOrReference DOM element or reference to element on which reflow is called.
+ */
+export const forceReflow = (
+    elementOrReference: HTMLElement | Reference<HTMLElement>,
+) => {
+    const element = unwrapReference(elementOrReference);
+    if (!element) return;
+    void element.offsetHeight; // eslint-disable-line no-void
+};

package/packages/utils/src/index.ts

@@ -6,6 +6,7 @@ export { addClass } from './addClass';
 export { removeClass } from './removeClass';
 export { debounce } from './debounce';
 export { wait } from './wait';
+export { forceReflow } from './forceReflow';
 export { scaledImage } from './scaledImage';
 export { nTimes } from './nTimes';
 export { getDisplayToggler, DISPLAY_NONE } from './displayToggler';