fix(NavigationManager): allow itemPosX and itemPosY to animate

packages/@lightningjs/ui-components/src/components/Column/Column.stories.js

@@ -20,6 +20,7 @@ import lng from '@lightningjs/core';
 import { context } from '../../globals';
 import { flatten, getWidthByUpCount } from '../../utils';
 import Row from '../Row';
+import TitleRow from '../TitleRow';
 import Tile from '../Tile';
 import Button from '../Button';
 import { default as ColumnComponent } from '.';
@@ -36,6 +37,19 @@ const columnHeight =
   context.theme.layout.screenH -
   2 * (context.theme.layout.marginY + context.theme.layout.gutterY);
 
+const createRows = (rowType, length, style, items) => {
+  return Array.from({ length }).map((_, i) => {
+    return {
+      type: rowType,
+      title: `Row ${i}`,
+      autoResizeHeight: true,
+      w: getWidthByUpCount(context.theme, 1),
+      items,
+      style
+    };
+  });
+};
+
 // creates an array of buttons to be used in Stories
 const createItems = (buttonType, length, isVariedHeight, isDynamicWidth) => {
   return Array.from({ length }).map((_, i) => {
@@ -770,3 +784,23 @@ RemovingItems.parameters = {
   storyDetails:
     'The third button in this column is configured to invoke removeItemAt to remove that button. Focus on that button and press Enter to invoke that method and remove the button from the column.'
 };
+
+export const ShiftingItemPos = () =>
+  class ShiftingItemPos extends lng.Component {
+    static _template() {
+      return {
+        Column: {
+          type: ColumnComponent,
+          h:
+            context.theme.layout.screenH -
+            2 * (context.theme.layout.marginY + context.theme.layout.gutterY),
+          items: createRows(
+            TitleRow,
+            10,
+            { mode: { focused: { titleMarginBottom: 100 } } },
+            createItems(Button, 10)
+          )
+        }
+      };
+    }
+  };

packages/@lightningjs/ui-components/src/components/ControlRow/__snapshots__/ControlRow.test.js.snap

@@ -609,7 +609,7 @@ exports[`ControlRow renders 1`] = `
       "visible": true,
       "w": 880,
       "x": -40,
-      "y": 68,
+      "y": 20,
       "zIndex": 0,
     },
     "Title": {

packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js

@@ -39,7 +39,7 @@ export default class FocusManager extends Base {
   }
 
   static get properties() {
-    return ['direction', 'wrapSelected'];
+    return ['direction', 'wrapSelected', 'itemPosX', 'itemPosY'];
   }
 
   _construct() {
@@ -89,22 +89,6 @@ export default class FocusManager extends Base {
     this._checkSkipFocus();
   }
 
-  set itemPosX(x) {
-    this.Items.x = this._itemPosX = x;
-  }
-
-  get itemPosX() {
-    return this._itemPosX;
-  }
-
-  set itemPosY(y) {
-    this.Items.y = this._itemPosY = y;
-  }
-
-  get itemPosY() {
-    return this._itemPosY;
-  }
-
   _resetItems() {
     this.Items.childList.clear();
     this.Items.patch({

packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.js

@@ -104,9 +104,16 @@ export default class NavigationManager extends FocusManager {
   }
 
   _update() {
+    super._update();
+    this._updateDefaultItemPos();
     this._updateLayout();
   }
 
+  _updateDefaultItemPos() {
+    const itemPos = this._isRow ? { y: this.itemPosY } : { x: this.itemPosX };
+    this.applySmooth(this.Items, itemPos);
+  }
+
   _updateLayout() {
     const { lengthDimension, crossDimension, crossAxis, innerCrossDimension } =
       this._directionPropNames;

packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.js

@@ -52,14 +52,14 @@ export default class TitleRow extends Row {
   }
 
   _update() {
-    super._update();
     this._updateTitle();
     this._updateRow();
+    super._update();
   }
 
   _autoResize() {
     this.w = this.w || this.style.w;
-    this.h = this.autoResizeHeight ? this.Items.y + this.Items.h : this.h;
+    this.h = this.autoResizeHeight ? this.itemPosY + this.Items.h : this.h;
   }
 
   _updateTitle() {
@@ -94,9 +94,10 @@ export default class TitleRow extends Row {
   }
 
   _updateRow() {
-    this.applySmooth(this.Items, {
-      y: this.title ? this._Title.finalH + this.style.titleMarginBottom : 0
-    });
+    this.itemPosY =
+      this.title && this._Title
+        ? this._Title.finalH + this.style.titleMarginBottom
+        : 0;
   }
 
   set announce(announce) {

packages/@lightningjs/ui-components/src/components/TitleRow/TitleRow.test.js

@@ -96,12 +96,12 @@ describe('TitleRow', () => {
           items
         },
         {
-          spyOnMethods: ['_titleLoaded']
+          spyOnMethods: ['_update']
         }
       );
       expect(titleRow._Items.y).toBe(titleRow.style.titleMarginBottom);
 
-      await titleRow.__titleLoadedSpyPromise;
+      await titleRow.__updateSpyPromise;
 
       expect(titleRow._Items.y).toBe(
         titleRow._Title.finalH + titleRow.style.titleMarginBottom

packages/@lightningjs/ui-components/src/components/TitleRow/__snapshots__/TitleRow.test.js.snap

@@ -282,7 +282,7 @@ exports[`TitleRow renders 1`] = `
       "visible": true,
       "w": 2220,
       "x": 0,
-      "y": 68,
+      "y": 20,
       "zIndex": 0,
     },
     "Title": {