Merge remote-tracking branch 'origin/main' into ag-grid-focus-change

* origin/main: fix: update `@typescript-eslint/eslint-plugin` to use deprecated rule (#2756) fix(sdk/eslint-config): alternatively look for `angular-eslint` dependency (#2755) fix(components/ag-grid): sort direction button is not visible when sorting is not active on a column (#2743) chore: release 11.2.0 (#2752) chore: changelog for 10.44.1 (#2749) 🍒 (#2750) fix(sdk/eslint-config): remove utilization of the eslint deprecation plugin as it is not compatible with ESLint 9 (#2746)
blackbaud · Sep 18, 2024 · e717a43 · e717a43
2 parents 985c120 + a4ab15a
commit e717a43
Show file tree

Hide file tree

Showing 116 changed files with 4,080 additions and 3,376 deletions.
diff --git a/.eslintrc-overrides.json b/.eslintrc-overrides.json
@@ -3,7 +3,6 @@
     {
       "files": ["*.ts"],
       "rules": {
-        "@typescript-eslint/ban-types": "warn",
         "@typescript-eslint/no-empty-function": "warn",
         "@typescript-eslint/no-explicit-any": "warn",
         "@typescript-eslint/no-non-null-assertion": "warn",

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -30,18 +30,12 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript", "prettier"],
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript", "prettier"],
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      "rules": {}
     },
     {
       "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## [11.2.0](https://github.com/blackbaud/skyux/compare/11.1.0...11.2.0) (2024-09-17)
+
+
+### Features
+
+* **components/phone-field:** update revalidation to occur on input ([#2744](https://github.com/blackbaud/skyux/issues/2744)) ([09af237](https://github.com/blackbaud/skyux/commit/09af237146b18b91fb2305f8de4c4b2457904c59))
+
+
+### Bug Fixes
+
+* **sdk/eslint-config:** remove utilization of the eslint deprecation plugin as it is not compatible with ESLint 9 ([#2746](https://github.com/blackbaud/skyux/issues/2746)) ([11d04f9](https://github.com/blackbaud/skyux/commit/11d04f91f40742e2230ae4b9535958327d62604b))
+
+## [10.44.1](https://github.com/blackbaud/skyux/compare/10.44.0...10.44.1) (2024-09-17)
+
+
+### Bug Fixes
+
+* update JSDocs to communicate that inline help features require a value for `labelText` ([#2745](https://github.com/blackbaud/skyux/issues/2745)) ([c862bcd](https://github.com/blackbaud/skyux/commit/c862bcde12ef41fb92c63ba071e5d191c6c31502))
+
 ## [11.1.0](https://github.com/blackbaud/skyux/compare/11.0.0...11.1.0) (2024-09-13)
 
 

diff --git a/apps/code-examples/project.json b/apps/code-examples/project.json
@@ -119,5 +119,6 @@
       }
     }
   },
+  "implicitDependencies": ["eslint-config"],
   "tags": []
 }
diff --git a/...mples/src/app/code-examples/angular-tree-component/angular-tree/basic/demo.component.html b/...mples/src/app/code-examples/angular-tree-component/angular-tree/basic/demo.component.html
@@ -1,10 +1,10 @@
 <sky-angular-tree-wrapper>
   <tree-root #tree [nodes]="nodes">
     <ng-template
+      #treeNodeFullTemplate
       let-index="index"
       let-node
       let-templates="templates"
-      #treeNodeFullTemplate
     >
       <sky-angular-tree-node
         [helpPopoverContent]="node.data.helpPopoverContent"

diff --git a/apps/code-examples/src/app/code-examples/lookup/autocomplete/advanced/demo.component.html b/apps/code-examples/src/app/code-examples/lookup/autocomplete/advanced/demo.component.html
@@ -35,7 +35,7 @@
   <pre>{{ formGroup.value | json }}</pre>
 </form>
 
-<ng-template let-item="item" #planetSearchResultTemplate>
+<ng-template #planetSearchResultTemplate let-item="item">
   <strong>
     {{ item.name }}
   </strong>

diff --git a/...code-examples/src/app/code-examples/lookup/autocomplete/custom-search/demo.component.html b/...code-examples/src/app/code-examples/lookup/autocomplete/custom-search/demo.component.html
@@ -26,7 +26,7 @@
   <pre>{{ formGroup.value | json }}</pre>
 </form>
 
-<ng-template let-item="item" #oceanSearchResultTemplate>
+<ng-template #oceanSearchResultTemplate let-item="item">
   <sky-icon icon="long-arrow-right" />
   {{ item.title }} &bull; ID {{ item.id }}
 </ng-template>
diff --git a/apps/e2e/help-inline-storybook/.storybook/tsconfig.json b/apps/e2e/help-inline-storybook/.storybook/tsconfig.json
@@ -9,9 +9,6 @@
   "include": [
     "../src/**/*.stories.ts",
     "../src/**/*.stories.js",
-    "../src/**/*.stories.jsx",
-    "../src/**/*.stories.tsx",
-    "../src/**/*.stories.mdx",
     "*.js",
     "*.ts",
     "./*"

diff --git a/apps/e2e/lists-storybook/src/test-setup.ts b/apps/e2e/lists-storybook/src/test-setup.ts
@@ -1,4 +1,4 @@
 import 'jest-preset-angular/setup-jest';
+import 'resize-observer-polyfill';
 
 // jsdom (used by Jest) doesn't natively support ResizeObserver, so use a polyfill.
-global.ResizeObserver = require('resize-observer-polyfill');
diff --git a/apps/integration/src/app/integrations/field-heights/field-heights.component.ts b/apps/integration/src/app/integrations/field-heights/field-heights.component.ts
@@ -130,7 +130,9 @@ export class FieldHeightsComponent implements AfterViewInit, OnDestroy {
               console.log(`Doesn't match .height-measure`, heightElement);
             }
           });
-          this.ready.getValue() || this.ready.next(true);
+          if (!this.ready.getValue()) {
+            this.ready.next(true);
+          }
         }),
     );
   }

diff --git a/apps/integration/src/app/integrations/lookup-in-modal/lookup-in-modal.component.ts b/apps/integration/src/app/integrations/lookup-in-modal/lookup-in-modal.component.ts
@@ -1,7 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { SkyModalService } from '@skyux/modals';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { delay } from 'rxjs';
 

diff --git a/...on/src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars.component.spec.ts b/...on/src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars.component.spec.ts
@@ -48,7 +48,6 @@ describe('Modals with viewkept toolbars', () => {
 
   function openModal(): void {
     getModalTrigger()?.click();
-    fixture.detectChanges;
   }
 
   async function scrollContentDown(): Promise<void> {

diff --git a/...gration/src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars.component.ts b/...gration/src/app/integrations/modal-viewkept-toolbars/modal-viewkept-toolbars.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { SkyModalService } from '@skyux/modals';
-import { FontLoadingService } from '@skyux/storybook';
+import { FontLoadingService } from '@skyux/storybook/font-loading';
 
 import { delay } from 'rxjs';
 

diff --git a/apps/integration/src/app/integrations/modal-wait/modal-wait.component.spec.ts b/apps/integration/src/app/integrations/modal-wait/modal-wait.component.spec.ts
@@ -57,7 +57,6 @@ describe('Modals with wait', () => {
 
   function openModal(): void {
     getModalTrigger()?.click();
-    fixture.detectChanges;
   }
 
   let fixture: ComponentFixture<ModalWaitComponent>;

diff --git a/libs/components/a11y/package.json b/libs/components/a11y/package.json
@@ -16,8 +16,8 @@
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
-    "@angular/common": "^18.2.3",
-    "@angular/core": "^18.2.3",
+    "@angular/common": "^18.2.5",
+    "@angular/core": "^18.2.5",
     "@skyux/core": "0.0.0-PLACEHOLDER",
     "@skyux/i18n": "0.0.0-PLACEHOLDER"
   },

diff --git a/libs/components/action-bars/package.json b/libs/components/action-bars/package.json
@@ -16,10 +16,10 @@
   },
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
-    "@angular/animations": "^18.2.3",
-    "@angular/common": "^18.2.3",
-    "@angular/core": "^18.2.3",
-    "@angular/platform-browser": "^18.2.3",
+    "@angular/animations": "^18.2.5",
+    "@angular/common": "^18.2.5",
+    "@angular/core": "^18.2.5",
+    "@angular/platform-browser": "^18.2.5",
     "@skyux-sdk/testing": "0.0.0-PLACEHOLDER",
     "@skyux/animations": "0.0.0-PLACEHOLDER",
     "@skyux/core": "0.0.0-PLACEHOLDER",

diff --git a/libs/components/ag-grid/package.json b/libs/components/ag-grid/package.json
@@ -21,9 +21,9 @@
     }
   },
   "peerDependencies": {
-    "@angular/common": "^18.2.3",
-    "@angular/core": "^18.2.3",
-    "@angular/forms": "^18.2.3",
+    "@angular/common": "^18.2.5",
+    "@angular/core": "^18.2.5",
+    "@angular/forms": "^18.2.5",
     "@skyux/autonumeric": "0.0.0-PLACEHOLDER",
     "@skyux/core": "0.0.0-PLACEHOLDER",
     "@skyux/data-manager": "0.0.0-PLACEHOLDER",

diff --git a/...components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.spec.ts b/...components/ag-grid/src/lib/modules/ag-grid/ag-grid-data-manager-adapter.directive.spec.ts
@@ -367,11 +367,11 @@ describe('SkyAgGridDataManagerAdapterDirective', () => {
     } as ColumnResizedEvent;
 
     const viewState = dataState.views[0];
-    (viewState.columnWidths = {
+    viewState.columnWidths = {
       xs: { name: 180, target: 220 },
       sm: { name: 100, target: 400 },
-    }),
-      agGridComponent.columnResized.emit(columnResized);
+    };
+    agGridComponent.columnResized.emit(columnResized);
     agGridDataManagerFixture.detectChanges();
     await agGridDataManagerFixture.whenStable();
 
@@ -403,11 +403,11 @@ describe('SkyAgGridDataManagerAdapterDirective', () => {
     } as ColumnResizedEvent;
 
     const viewState = dataState.views[0];
-    (viewState.columnWidths = {
+    viewState.columnWidths = {
       xs: { name: 100, target: 220 },
       sm: { name: 300, target: 400 },
-    }),
-      agGridComponent.columnResized.emit(columnResized);
+    };
+    agGridComponent.columnResized.emit(columnResized);
     agGridDataManagerFixture.detectChanges();
     await agGridDataManagerFixture.whenStable();
 

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-row-delete.component.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-row-delete.component.ts
@@ -18,12 +18,12 @@ import { SkyInlineDeleteModule } from '@skyux/layout';
   selector: 'sky-ag-grid-row-delete',
   template: `
     <ng-template
+      #inlineDeleteTemplateRef
       let-row
       let-tableWidth="tableWidth()"
       let-getRowDeleteItem="getRowDeleteItem"
       let-cancelRowDelete="cancelRowDelete"
       let-confirmRowDelete="confirmRowDelete"
-      #inlineDeleteTemplateRef
     >
       <div
         #inlineDeleteRef

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.spec.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.spec.ts
@@ -413,7 +413,6 @@ describe('SkyAgGridWrapperComponent', () => {
     }
 
     it('should not move focus when tab is pressed but cells are being edited', () => {
-      agGrid.api.stopEditing as jasmine.Spy;
       fireKeyupEscape();
       expect(agGrid.api.stopEditing).toHaveBeenCalled();
     });

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-wrapper.component.ts
@@ -295,6 +295,7 @@ export class SkyAgGridWrapperComponent
     }
   }
 
+  // eslint-disable-next-line complexity
   public onAnchorFocus(event: FocusEvent): void {
     const relatedTarget = event.relatedTarget as HTMLElement | undefined;
     const previousWasGrid =

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.spec.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid.service.spec.ts
@@ -225,7 +225,7 @@ describe('SkyAgGridService', () => {
         'function',
       );
       expect(
-        (modernThemeGridOptions.icons?.['sortDescending'] as Function)(),
+        (modernThemeGridOptions.icons?.['sortDescending'] as () => string)(),
       ).toBe(`<i aria-hidden="true" class="sky-i-chevron-down"></i>`);
     });
 
@@ -636,7 +636,7 @@ describe('SkyAgGridService', () => {
   });
 
   describe('getDefaultGridOptions getEditableFn', () => {
-    let cellClassRuleEditableFunction: Function;
+    let cellClassRuleEditableFunction: (params?: any) => boolean;
     let cellClassParams: CellClassParams;
 
     beforeEach(() => {

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html
@@ -35,12 +35,12 @@
         /></span>
       }
       @if (params?.enableSorting) {
-        <button
-          class="ag-sort-indicator-container sky-btn sky-btn-icon-borderless"
-          type="button"
-          (click)="onSortRequested($event)"
-        >
-          @if (sortOrder$ | async; as sortDirection) {
+        @if (sortOrder$ | async; as sortDirection) {
+          <button
+            class="ag-sort-indicator-container sky-btn sky-btn-icon-borderless"
+            type="button"
+            (click)="onSortRequested($event)"
+          >
             @if (sortDirection === 'desc') {
               <span class="ag-header-icon ag-header-label-icon">
                 <sky-icon *skyThemeIf="'default'" icon="caret-down" />
@@ -61,20 +61,21 @@
                 }}</span></span
               >
             }
-          } @else {
-            <span class="sky-screen-reader-only">{{
-              'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'
-                | skyLibResources: displayName ?? accessibleHeaderText
-            }}</span>
-          }
-          @if (sortIndexDisplay$ | async; as sortIndexDisplay) {
-            <span
-              aria-hidden="true"
-              class="ag-sort-indicator-icon ag-sort-order"
-              >{{ sortIndexDisplay }}</span
-            >
-          }
-        </button>
+
+            @if (sortIndexDisplay$ | async; as sortIndexDisplay) {
+              <span
+                aria-hidden="true"
+                class="ag-sort-indicator-icon ag-sort-order"
+                >{{ sortIndexDisplay }}</span
+              >
+            }
+          </button>
+        } @else {
+          <span class="sky-screen-reader-only">{{
+            'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'
+              | skyLibResources: displayName ?? accessibleHeaderText
+          }}</span>
+        }
       }
     </span>
     <span #inlineHelpContainer class="sky-control-help-container"></span>

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.scss b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.scss
@@ -69,10 +69,6 @@ button.ag-header-cell-label {
       &:hover {
         border: none;
       }
-
-      &:empty {
-        display: none;
-      }
     }
   }
 }

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.spec.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.spec.ts
@@ -148,6 +148,7 @@ describe('HeaderComponent', () => {
     };
     component.agInit(params);
     fixture.detectChanges();
+    await fixture.whenStable();
     expect(apiEvents['sortChanged'].length).toBeGreaterThanOrEqual(1);
     expect(columnEvents['sortChanged'].length).toBeGreaterThanOrEqual(1);
     expect(columnEvents['filterChanged'].length).toBeGreaterThanOrEqual(1);
@@ -158,6 +159,22 @@ describe('HeaderComponent', () => {
         By.css('.ag-sort-indicator-container sky-icon'),
       ).attributes['icon'],
     ).toBe('caret-up');
+    expect(
+      document.querySelector('.ag-sort-indicator-container'),
+    ).not.toBeNull();
+    useSort = 'desc';
+    apiEvents['sortChanged'].forEach((listener) => listener());
+    columnEvents['sortChanged'].forEach((listener) => listener());
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(
+      fixture.debugElement.query(
+        By.css('.ag-sort-indicator-container sky-icon'),
+      ).attributes['icon'],
+    ).toBe('caret-down');
+    expect(
+      document.querySelector('.ag-sort-indicator-container'),
+    ).not.toBeNull();
     useSort = undefined;
     apiEvents['sortChanged'].forEach((listener) => listener());
     columnEvents['sortChanged'].forEach((listener) => listener());
@@ -166,6 +183,7 @@ describe('HeaderComponent', () => {
     expect(
       fixture.debugElement.query(By.css('.ag-header-label-icon')),
     ).toBeFalsy();
+    expect(document.querySelector('.ag-sort-indicator-container')).toBeNull();
 
     columnEvents['filterChanged'].forEach((listener) => listener());
     expect(component.filterEnabled$.getValue()).toBe(true);
@@ -174,6 +192,16 @@ describe('HeaderComponent', () => {
     expect(fixture.debugElement.query(By.css('.ag-filter-icon'))).toBeTruthy();
   });
 
+  it('should not show sort button when sort is disabled', async () => {
+    params = {
+      ...params,
+      enableSorting: false,
+    };
+    component.agInit(params);
+    fixture.detectChanges();
+    expect(document.querySelector('.ag-sort-indicator-container')).toBeNull();
+  });
+
   it('should not sort when sort is disabled', async () => {
     params = {
       ...params,

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/types/autocomplete-properties.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/types/autocomplete-properties.ts
@@ -20,6 +20,6 @@ export interface SkyAgGridAutocompleteProperties {
 /**
  * @deprecated Use SkyAgGridAutocompleteProperties instead.
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line
 export interface SkyAutocompleteProperties
   extends SkyAgGridAutocompleteProperties {}
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,5 +119,6 @@ @@
           }
         }
       },
+      "implicitDependencies": ["eslint-config"],
       "tags": []
     }