Merge remote-tracking branch 'origin/10.x.x' into ag-grid-31.3

.github/workflows/cherry-pick.yml

@@ -72,6 +72,8 @@ jobs:
             echo "CHERRY_PICK_RESULT=failed" >> $GITHUB_ENV
             exit 0
           fi
+
+          echo "COMMIT_MESSAGE=$(git log -1 --pretty=%B)" >> $GITHUB_ENV
         env:
           GH_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
 
@@ -91,7 +93,7 @@ jobs:
               repo: context.repo.repo,
               head: process.env.CHERRY_PICK_BRANCH,
               base: process.env.TARGET_BRANCH,
-              title: `${pr.title} (#${pr.number})`,
+              title: process.env.COMMIT_MESSAGE,
               body
             }).then(result => {
               console.log(`Created PR #${result.data.number}: ${result.data.html_url}`);

apps/code-examples/.eslintrc.json

@@ -31,7 +31,14 @@
     },
     {
       "files": ["./src/app/code-examples/**/*.ts"],
+      "extends": ["../../libs/sdk/eslint-config/recommended"],
+      "parserOptions": {
+        "project": ["apps/code-examples/tsconfig.editor.json"],
+        "tsconfigRootDir": "."
+      },
       "rules": {
+        "no-alert": "warn",
+        "no-console": "warn",
         "no-restricted-imports": [
           "error",
           {

apps/code-examples/src/app/code-examples/layout/back-to-top/infinite-scroll/demo.component.ts

@@ -129,21 +129,18 @@ export class DemoComponent implements OnInit {
   ];
 
   public ngOnInit(): void {
-    this.addData(0, 5);
+    void this.#addData(0, 5);
   }
 
   public onScrollEnd(): void {
-    this.addData(this.personList.length, 5);
+    void this.#addData(this.personList.length, 5);
   }
 
-  private addData(start: number, rowSize: number): void {
+  async #addData(start: number, rowSize: number): Promise<void> {
     if (this.hasMore) {
-      this.mockRemote(start, rowSize).then(
-        (result: { data: Person[]; hasMore: boolean }) => {
-          this.personList = this.personList.concat(result.data);
-          this.hasMore = result.hasMore;
-        },
-      );
+      const result = await this.mockRemote(start, rowSize);
+      this.personList = this.personList.concat(result.data);
+      this.hasMore = result.hasMore;
     }
   }
 

apps/code-examples/src/app/code-examples/layout/box/basic/demo.component.spec.ts

@@ -4,7 +4,7 @@ import { SkyBoxHarness } from '@skyux/layout/testing';
 
 import { DemoComponent } from './demo.component';
 
-describe('Basic box', async () => {
+describe('Basic box', () => {
   async function setupTest(): Promise<{
     boxHarness: SkyBoxHarness;
     fixture: ComponentFixture<DemoComponent>;

apps/code-examples/src/app/code-examples/lists/filter/modal/demo.component.ts

@@ -82,7 +82,7 @@ export class DemoComponent {
 
     modalInstance.closed.subscribe((result: SkyModalCloseArgs) => {
       if (result.reason === 'save') {
-        this.appliedFilters = result.data.slice();
+        this.appliedFilters = (result.data as Filter[]).slice();
         this.filteredItems = this.#filterItems(this.items, this.appliedFilters);
         this.#changeDetectorRef.markForCheck();
       }

apps/code-examples/src/app/code-examples/lists/infinite-scroll/repeater/demo.component.ts

@@ -17,22 +17,19 @@ export class DemoComponent implements OnInit {
   protected itemsHaveMore = true;
 
   public ngOnInit(): void {
-    this.#addData();
+    void this.#addData();
   }
 
   protected onScrollEnd(): void {
     if (this.itemsHaveMore) {
-      this.#addData();
+      void this.#addData();
     }
   }
 
-  #addData(): void {
-    this.#mockRemote().then(
-      (result: { data: InfiniteScrollDemoItem[]; hasMore: boolean }) => {
-        this.items = this.items.concat(result.data);
-        this.itemsHaveMore = result.hasMore;
-      },
-    );
+  async #addData(): Promise<void> {
+    const result = await this.#mockRemote();
+    this.items = this.items.concat(result.data);
+    this.itemsHaveMore = result.hasMore;
   }
 
   #mockRemote(): Promise<{

apps/code-examples/src/app/code-examples/lists/paging/with-content/demo.component.ts

@@ -32,9 +32,11 @@ export class DemoComponent {
 
   protected pagedData = this.contentChange.pipe(
     switchMap((args) =>
-      this.#demoDataSvc
-        .getPagedData(args.currentPage, this.pageSize)
-        .pipe(tap(() => args.loadingComplete())),
+      this.#demoDataSvc.getPagedData(args.currentPage, this.pageSize).pipe(
+        tap(() => {
+          args.loadingComplete();
+        }),
+      ),
     ),
     shareReplay(1),
   );

apps/code-examples/src/app/code-examples/lists/repeater/add-remove/demo.component.spec.ts

@@ -1,18 +1,15 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  SkyRepeaterHarness,
-  SkyRepeaterItemHarness,
-} from '@skyux/lists/testing';
+import { SkyRepeaterHarness } from '@skyux/lists/testing';
 
 import { DemoComponent } from './demo.component';
 
 describe('Repeater add remove demo', () => {
   async function setupTest(): Promise<{
-    repeaterHarness: SkyRepeaterHarness | null;
-    repeaterItems: SkyRepeaterItemHarness[] | null;
+    el: HTMLElement;
     fixture: ComponentFixture<DemoComponent>;
+    repeaterHarness: SkyRepeaterHarness;
   }> {
     const fixture = TestBed.createComponent(DemoComponent);
     const loader = TestbedHarnessEnvironment.loader(fixture);
@@ -21,9 +18,9 @@ describe('Repeater add remove demo', () => {
       SkyRepeaterHarness.with({ dataSkyId: 'repeater-demo' }),
     );
 
-    const repeaterItems = await repeaterHarness.getRepeaterItems();
+    const el = fixture.nativeElement as HTMLElement;
 
-    return { repeaterHarness, repeaterItems, fixture };
+    return { el, fixture, repeaterHarness };
   }
 
   beforeEach(() => {
@@ -33,11 +30,13 @@ describe('Repeater add remove demo', () => {
   });
 
   it('should allow items to be expanded and collapsed', async () => {
-    const { repeaterItems } = await setupTest();
+    const { repeaterHarness } = await setupTest();
+
+    const repeaterItems = await repeaterHarness.getRepeaterItems();
 
     let first = true;
 
-    for (const item of repeaterItems!) {
+    for (const item of repeaterItems) {
       await expectAsync(item.isCollapsible()).toBeResolvedTo(true);
 
       // in single expand mode, the first item is expanded by default
@@ -75,72 +74,68 @@ describe('Repeater add remove demo', () => {
       },
     ];
 
-    let repeaterItems = await repeaterHarness?.getRepeaterItems();
+    let repeaterItems = await repeaterHarness.getRepeaterItems();
 
     expect(repeaterItems).toBeDefined();
-    expect(repeaterItems?.length).toBe(expectedContent.length);
+    expect(repeaterItems.length).toBe(expectedContent.length);
 
-    if (repeaterItems) {
-      for (const item of repeaterItems) {
-        await expectAsync(item.isReorderable()).toBeResolvedTo(true);
-      }
+    for (const item of repeaterItems) {
+      await expectAsync(item.isReorderable()).toBeResolvedTo(true);
+    }
 
-      await expectAsync(repeaterItems?.[1].getTitleText()).toBeResolvedTo(
-        expectedContent[1].title,
-      );
+    await expectAsync(repeaterItems[1].getTitleText()).toBeResolvedTo(
+      expectedContent[1].title,
+    );
 
-      await repeaterItems?.[1].sendToTop();
-      repeaterItems = await repeaterHarness?.getRepeaterItems();
+    await repeaterItems[1].sendToTop();
+    repeaterItems = await repeaterHarness.getRepeaterItems();
 
-      await expectAsync(repeaterItems?.[1].getTitleText()).toBeResolvedTo(
-        expectedContent[0].title,
-      );
-    }
+    await expectAsync(repeaterItems[1].getTitleText()).toBeResolvedTo(
+      expectedContent[0].title,
+    );
   });
 
   it('should allow items to be added and removed', async () => {
-    const { repeaterHarness, fixture } = await setupTest();
+    const { repeaterHarness, el, fixture } = await setupTest();
 
-    let repeaterItems = await repeaterHarness?.getRepeaterItems();
+    let repeaterItems = await repeaterHarness.getRepeaterItems();
 
     expect(repeaterItems).toBeDefined();
-    expect(repeaterItems?.length).toBe(4);
+    expect(repeaterItems.length).toBe(4);
 
-    if (repeaterItems) {
-      for (const item of repeaterItems) {
-        await expectAsync(item.isSelectable()).toBeResolvedTo(true);
-      }
+    for (const item of repeaterItems) {
+      await expectAsync(item.isSelectable()).toBeResolvedTo(true);
+    }
 
-      const addButton = fixture.nativeElement.querySelector(
-        '[data-sky-id="add-button"]',
-      );
+    const addButton = el.querySelector<HTMLButtonElement>(
+      '[data-sky-id="add-button"]',
+    );
 
-      const removeButton = fixture.nativeElement.querySelector(
-        '[data-sky-id="remove-button"]',
-      );
+    const removeButton = el.querySelector<HTMLButtonElement>(
+      '[data-sky-id="remove-button"]',
+    );
 
-      addButton.click();
-      fixture.detectChanges();
+    addButton?.click();
+    fixture.detectChanges();
 
-      repeaterItems = await repeaterHarness?.getRepeaterItems();
-      expect(repeaterItems).toBeDefined();
-      expect(repeaterItems?.length).toBe(5);
+    repeaterItems = await repeaterHarness.getRepeaterItems();
+    expect(repeaterItems).toBeDefined();
+    expect(repeaterItems.length).toBe(5);
 
-      await expectAsync(repeaterItems?.[0].isSelected()).toBeResolvedTo(false);
-      await repeaterItems?.[0].select();
+    await expectAsync(repeaterItems[0].isSelected()).toBeResolvedTo(false);
+    await repeaterItems[0].select();
 
-      await expectAsync(repeaterItems?.[0].isSelected()).toBeResolvedTo(true);
-      await expectAsync(repeaterItems?.[1].isSelected()).toBeResolvedTo(false);
+    await expectAsync(repeaterItems[0].isSelected()).toBeResolvedTo(true);
+    await expectAsync(repeaterItems[1].isSelected()).toBeResolvedTo(false);
 
-      await repeaterItems?.[1].select();
-      await expectAsync(repeaterItems?.[1].isSelected()).toBeResolvedTo(true);
+    await repeaterItems[1].select();
+    await expectAsync(repeaterItems[1].isSelected()).toBeResolvedTo(true);
 
-      removeButton.click();
-      fixture.detectChanges();
+    removeButton?.click();
+    fixture.detectChanges();
 
-      repeaterItems = await repeaterHarness?.getRepeaterItems();
-      expect(repeaterItems).toBeDefined();
-      expect(repeaterItems?.length).toBe(3);
-    }
+    repeaterItems = await repeaterHarness.getRepeaterItems();
+    expect(repeaterItems).toBeDefined();
+    expect(repeaterItems.length).toBe(3);
   });
 });

apps/code-examples/src/app/code-examples/lists/repeater/inline-form/demo.component.ts

@@ -16,6 +16,12 @@ import {
 } from '@skyux/inline-form';
 import { SkyRepeaterModule } from '@skyux/lists';
 
+interface DemoForm {
+  id: FormControl<string>;
+  note: FormControl<string>;
+  title: FormControl<string>;
+}
+
 interface Item {
   id: string;
   title: string | undefined;
@@ -37,6 +43,7 @@ interface Item {
 })
 export class DemoComponent {
   protected activeInlineFormId: string | undefined;
+  protected formGroup: FormGroup<DemoForm>;
 
   protected inlineFormConfig: SkyInlineFormConfig = {
     buttonLayout: SkyInlineFormButtonLayout.SaveCancel,
@@ -65,13 +72,11 @@ export class DemoComponent {
     },
   ];
 
-  protected formGroup: FormGroup;
-
   constructor() {
     this.formGroup = inject(FormBuilder).group({
-      id: new FormControl(),
-      title: new FormControl(),
-      note: new FormControl(),
+      id: new FormControl('', { nonNullable: true }),
+      title: new FormControl('', { nonNullable: true }),
+      note: new FormControl('', { nonNullable: true }),
     });
   }
 
@@ -89,8 +94,8 @@ export class DemoComponent {
         (item) => item.id === this.activeInlineFormId,
       );
       if (found) {
-        found.note = this.formGroup.get('note')?.value;
-        found.title = this.formGroup.get('title')?.value;
+        found.note = this.formGroup.value.note;
+        found.title = this.formGroup.value.title;
       }
     }
 

apps/code-examples/src/app/code-examples/lists/sort/basic/demo.component.ts

@@ -102,7 +102,7 @@ export class DemoComponent implements OnInit {
   }
 
   protected sortItems(option: SortOption): void {
-    this.sortedItems = this.sortedItems.sort(function (a: Item, b: Item) {
+    this.sortedItems = this.sortedItems.sort((a, b) => {
       const descending = option.descending ? -1 : 1;
       const sortProperty: keyof typeof a = option.name;
 

apps/code-examples/src/app/code-examples/lookup/autocomplete/advanced/demo.component.ts

@@ -68,6 +68,6 @@ export class DemoComponent {
   }
 
   protected onPlanetSelection(args: SkyAutocompleteSelectionChange): void {
-    alert(`You selected ${args.selectedItem.name}`);
+    alert(`You selected ${(args.selectedItem as Planet).name}`);
   }
 }

apps/code-examples/src/app/code-examples/lookup/autocomplete/custom-search/demo.component.ts

@@ -61,7 +61,7 @@ export class DemoComponent {
         const results = oceans.filter((ocean: Ocean) => {
           const val = ocean.title;
           const isMatch =
-            val && val.toString().toLowerCase().indexOf(searchTextLower) > -1;
+            val && val.toString().toLowerCase().includes(searchTextLower);
           return isMatch;
         });
 

apps/code-examples/src/app/code-examples/lookup/country-field/basic/demo.component.html

@@ -4,7 +4,7 @@
     labelText="Country"
     [helpPopoverContent]="helpPopoverContent"
   >
-    <sky-country-field formControlName="countryControl" />
+    <sky-country-field formControlName="country" />
     <sky-form-error
       *ngIf="countryControl.errors?.['invalidCountry']"
       errorName="invalidCountry"