Merge branch 'main' into tokenize-fluid-grid

.github/workflows/e2e.yml

@@ -171,7 +171,7 @@ jobs:
       fail-fast: false
       matrix:
         app:
-          - code-examples
+          - code-examples-playground
           - integration
           - playground
         # - dep-graph
@@ -265,7 +265,7 @@ jobs:
         shell: bash
         run: |
           mkdir -p ./dist/apps
-          for app in code-examples dep-graph integration playground
+          for app in code-examples-playground dep-graph integration playground
           do
             if [ -d "./dist/${{ fromJson(needs.install-deps.outputs.parameters).storybooksPath }}${app}" ]
             then

.github/workflows/validate-pr.yml

@@ -38,7 +38,7 @@ jobs:
             migrations
             packaging
             release
-            code-examples
+            apps/code-examples-playground
             apps/integration
             apps/playground
             components/a11y
@@ -49,6 +49,7 @@ jobs:
             components/assets
             components/autonumeric
             components/avatar
+            components/code-examples
             components/colorpicker
             components/config
             components/core

.skyuxdev.json

@@ -3,6 +3,7 @@
   "documentationExcludeProjects": [
     "animations",
     "assets",
+    "code-examples",
     "config",
     "e2e-schematics",
     "eslint-config",

.vscode/tasks.json

@@ -27,7 +27,7 @@
     {
       "label": "Start code examples",
       "type": "shell",
-      "command": "npx nx serve code-examples",
+      "command": "npx nx serve code-examples-playground",
       "isBackground": true,
       "problemMatcher": {
         "owner": "typescript",
@@ -42,7 +42,7 @@
         },
         "background": {
           "activeOnStart": true,
-          "beginsPattern": "> nx run code-examples:serve:development",
+          "beginsPattern": "> nx run code-examples-playground:serve:development",
           "endsPattern": "√ Compiled successfully."
         }
       }

apps/code-examples/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "code-examples",
+  "name": "code-examples-playground",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/code-examples/src",
@@ -10,7 +10,7 @@
       "outputs": ["{options.outputPath}"],
       "options": {
         "allowedCommonJsDependencies": ["dragula", "ng2-dragula"],
-        "outputPath": "dist/apps/code-examples",
+        "outputPath": "dist/apps/code-examples-playground",
         "index": "apps/code-examples/src/index.html",
         "main": "apps/code-examples/src/main.ts",
         "polyfills": ["zone.js", "libs/components/packages/src/polyfills.js"],
@@ -64,18 +64,18 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "code-examples:build:production"
+          "buildTarget": "code-examples-playground:build:production"
         },
         "development": {
-          "buildTarget": "code-examples:build:development"
+          "buildTarget": "code-examples-playground:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "code-examples:build"
+        "buildTarget": "code-examples-playground:build"
       }
     },
     "lint": {

libs/components/ag-grid/src/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.spec.ts

@@ -51,19 +51,21 @@ describe('SkyCellEditorAutocompleteComponent', () => {
   });
 
   describe('agInit', () => {
-    const api = jasmine.createSpyObj<GridApi>('api', [
-      'getDisplayNameForColumn',
-      'getGridOption',
-      'stopEditing',
-    ]);
-    api.getGridOption.and.returnValue(true);
+    let api: jasmine.SpyObj<GridApi>;
     let cellEditorParams: Partial<SkyCellEditorAutocompleteParams>;
     let column: AgColumn;
+    let gridCell: HTMLDivElement;
     const selection = data[0];
     const rowNode = new RowNode({} as BeanCollection);
     rowNode.rowHeight = 37;
 
     beforeEach(() => {
+      api = jasmine.createSpyObj<GridApi>('api', [
+        'getDisplayNameForColumn',
+        'getGridOption',
+        'stopEditing',
+      ]);
+      api.getGridOption.and.returnValue(true);
       column = new AgColumn(
         {
           colId: 'col',
@@ -72,11 +74,13 @@ describe('SkyCellEditorAutocompleteComponent', () => {
         'col',
         true,
       );
+      gridCell = document.createElement('div');
 
       cellEditorParams = {
         api,
         value: selection,
         column,
+        eGridCell: gridCell,
         node: rowNode,
         colDef: {},
         cellStartedEdit: true,
@@ -95,14 +99,30 @@ describe('SkyCellEditorAutocompleteComponent', () => {
       tick();
 
       component.onAutocompleteOpenChange(true);
-      component.onBlur();
+      component.onBlur({} as FocusEvent);
       expect(cellEditorParams.api?.stopEditing).not.toHaveBeenCalled();
 
       component.onAutocompleteOpenChange(false);
-      component.onBlur();
+      component.onBlur({} as FocusEvent);
       expect(cellEditorParams.api?.stopEditing).toHaveBeenCalled();
     }));
 
+    it('should respond to refocus', fakeAsync(() => {
+      fixture.detectChanges();
+
+      const input = nativeElement.querySelector('input') as HTMLInputElement;
+      spyOn(input, 'focus');
+
+      component.agInit(cellEditorParams as SkyCellEditorAutocompleteParams);
+      component.onBlur({
+        relatedTarget: gridCell,
+      } as unknown as FocusEvent);
+      tick();
+      expect(input).toBeVisible();
+      expect(input.focus).toHaveBeenCalled();
+      expect(cellEditorParams.api?.stopEditing).not.toHaveBeenCalled();
+    }));
+
     it('should set the correct aria label', () => {
       api.getDisplayNameForColumn.and.returnValue('Testing');
       component.agInit({

libs/components/ag-grid/src/lib/modules/ag-grid/cell-editors/cell-editor-autocomplete/cell-editor-autocomplete.component.ts

@@ -43,9 +43,18 @@ export class SkyAgGridCellEditorAutocompleteComponent
   @ViewChild('skyCellEditorAutocomplete', { read: ElementRef })
   public input: ElementRef | undefined;
 
-  @HostListener('blur')
-  public onBlur(): void {
-    this.#stopEditingOnBlur();
+  @HostListener('focusout', ['$event'])
+  public onBlur(event: FocusEvent): void {
+    if (
+      event.relatedTarget &&
+      event.relatedTarget === this.#params?.eGridCell
+    ) {
+      // If focus is being set to the grid cell, schedule focus on the input.
+      // This happens when the refreshCells API is called.
+      this.afterGuiAttached();
+    } else {
+      this.#stopEditingOnBlur();
+    }
   }
 
   public agInit(params: SkyCellEditorAutocompleteParams): void {

libs/components/ag-grid/src/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.component.spec.ts

@@ -160,6 +160,7 @@ describe('SkyCellEditorCurrencyComponent', () => {
     describe('afterGuiAttached', () => {
       let cellEditorParams: Partial<SkyCellEditorCurrencyParams>;
       let column: AgColumn;
+      let gridCell: HTMLDivElement;
       const rowNode = new RowNode({} as BeanCollection);
       rowNode.rowHeight = 37;
       const value = 15;
@@ -174,16 +175,19 @@ describe('SkyCellEditorCurrencyComponent', () => {
           true,
         );
 
-        const api = {} as GridApi;
+        const api = jasmine.createSpyObj<GridApi>([
+          'getDisplayNameForColumn',
+          'stopEditing',
+        ]);
 
-        api.getDisplayNameForColumn = (): string => {
-          return '';
-        };
+        api.getDisplayNameForColumn.and.returnValue('');
+        gridCell = document.createElement('div');
 
         cellEditorParams = {
           api,
           value: value,
           column,
+          eGridCell: gridCell,
           node: rowNode,
           colDef: {},
           cellStartedEdit: true,
@@ -514,6 +518,24 @@ describe('SkyCellEditorCurrencyComponent', () => {
         expect(input).toBeVisible();
         expect(input.focus).toHaveBeenCalled();
       }));
+
+      it('should respond to refocus', fakeAsync(() => {
+        currencyEditorComponent.agInit(cellEditorParams as ICellEditorParams);
+        currencyEditorFixture.detectChanges();
+
+        const input = currencyEditorFixture.nativeElement.querySelector(
+          'input',
+        ) as HTMLInputElement;
+        spyOn(input, 'focus');
+
+        currencyEditorComponent.onFocusOut({
+          relatedTarget: gridCell,
+        } as unknown as FocusEvent);
+        tick();
+        expect(input).toBeVisible();
+        expect(input.focus).toHaveBeenCalled();
+        expect(cellEditorParams.api?.stopEditing).not.toHaveBeenCalled();
+      }));
     });
 
     it('returns undefined if the value is not set', () => {

libs/components/ag-grid/src/lib/modules/ag-grid/cell-editors/cell-editor-currency/cell-editor-currency.component.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  HostListener,
   ViewChild,
   inject,
 } from '@angular/core';
@@ -46,6 +47,15 @@ export class SkyAgGridCellEditorCurrencyComponent
   @ViewChild('skyCellEditorCurrency', { read: ElementRef })
   public input: ElementRef | undefined;
 
+  @HostListener('focusout', ['$event'])
+  public onFocusOut(event: FocusEvent): void {
+    if (event.relatedTarget && event.relatedTarget === this.params?.eGridCell) {
+      // If focus is being set to the grid cell, schedule focus on the input.
+      // This happens when the refreshCells API is called.
+      this.afterGuiAttached();
+    }
+  }
+
   #triggerType: SkyAgGridCellEditorInitialAction | undefined;
   readonly #changeDetector = inject(ChangeDetectorRef);
   #initialized = false;

libs/components/ag-grid/src/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.spec.ts

@@ -24,6 +24,7 @@ import { SkyAgGridCellEditorLookupComponent } from './cell-editor-lookup.compone
 import { SkyAgGridCellEditorLookupModule } from './cell-editor-lookup.module';
 
 describe('SkyAgGridCellEditorLookupComponent', () => {
+  let api: jasmine.SpyObj<GridApi>;
   let component: SkyAgGridCellEditorLookupComponent;
   const data = [
     { id: '1', name: 'John Doe', town: 'Daniel Island' },
@@ -32,6 +33,7 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
     { id: '4', name: 'Jane Smith', town: 'Mt Pleasant' },
   ];
   let fixture: ComponentFixture<SkyAgGridCellEditorLookupComponent>;
+  let gridCell: HTMLDivElement;
   let nativeElement: HTMLElement;
   let callback: ((args: Record<string, unknown>) => void) | undefined;
   const selection = [data[0]];
@@ -52,18 +54,21 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
       ],
     });
 
+    api = jasmine.createSpyObj('GridApi', [
+      'addEventListener',
+      'getGridOption',
+      'stopEditing',
+    ]);
+    api.addEventListener.and.callFake(
+      (_event: string, listener: (params: any) => void) => {
+        callback = listener;
+      },
+    );
+    api.getGridOption.and.returnValue(true);
+    gridCell = document.createElement('div');
+
     cellEditorParams = {
-      api: {
-        addEventListener: (
-          event: string,
-          listener: (args: Record<string, unknown>) => void,
-        ) => {
-          callback = listener;
-          [event].pop();
-        },
-        getGridOption: jasmine.createSpy('getGridOption').and.returnValue(true),
-        stopEditing: jasmine.createSpy('stopEditing'),
-      } as unknown as GridApi,
+      api,
       cellStartedEdit: true,
       colDef: {
         headerName: 'header',
@@ -76,6 +81,7 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         gridOptions: {} as Partial<GridOptions>,
       },
       data: undefined,
+      eGridCell: gridCell,
       formatValue: jasmine.createSpy('formatValue'),
       onKeyDown: jasmine.createSpy('onKeyDown'),
       parseValue: jasmine.createSpy('parseValue'),
@@ -304,7 +310,7 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         expect(cellEditorParams.api?.stopEditing).toHaveBeenCalledTimes(1);
 
         (cellEditorParams.api?.stopEditing as jasmine.Spy).calls.reset();
-        component.onBlur();
+        component.onBlur({} as FocusEvent);
         tick();
         expect(cellEditorParams.api?.getGridOption).toHaveBeenCalledTimes(2);
         expect(
@@ -317,6 +323,27 @@ describe('SkyAgGridCellEditorLookupComponent', () => {
         ]);
         expect(cellEditorParams.api?.stopEditing).toHaveBeenCalledTimes(1);
       }));
+
+      it('should respond to refocus', fakeAsync(() => {
+        component.agInit(cellEditorParams as ICellEditorParams);
+        fixture.detectChanges();
+
+        const input = nativeElement.querySelector(
+          'textarea',
+        ) as HTMLTextAreaElement;
+        spyOn(input, 'focus');
+
+        component.afterGuiAttached();
+        tick();
+
+        component.onBlur({
+          relatedTarget: gridCell,
+        } as unknown as FocusEvent);
+        tick();
+        expect(input).toBeVisible();
+        expect(input.focus).toHaveBeenCalled();
+        expect(cellEditorParams.api?.stopEditing).not.toHaveBeenCalled();
+      }));
     });
 
     describe('cellStartedEdit is false', () => {

libs/components/ag-grid/src/lib/modules/ag-grid/cell-editors/cell-editor-lookup/cell-editor-lookup.component.ts

@@ -52,9 +52,18 @@ export class SkyAgGridCellEditorLookupComponent
   #changeDetector = inject(ChangeDetectorRef);
   #elementRef = inject(ElementRef<HTMLElement>);
 
-  @HostListener('blur')
-  public onBlur(): void {
-    this.#stopEditingOnBlur();
+  @HostListener('focusout', ['$event'])
+  public onBlur(event: FocusEvent): void {
+    if (
+      event.relatedTarget &&
+      event.relatedTarget === this.#params?.eGridCell
+    ) {
+      // If focus is being set to the grid cell, schedule focus on the input.
+      // This happens when the refreshCells API is called.
+      this.afterGuiAttached();
+    } else {
+      this.#stopEditingOnBlur();
+    }
   }
 
   public agInit(params: SkyCellEditorLookupParams): void {