chore(web-components): remove web types (#32308)

apps/vr-tests-web-components/package.json

@@ -12,9 +12,6 @@
     "type-check": "tsc -p . --baseUrl . --noEmit",
     "test-vr": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
   },
-  "devDependencies": {
-    "@types/web": "^0.0.142"
-  },
   "dependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/vr-tests-web-components/tsconfig.json

@@ -8,7 +8,7 @@
     "resolveJsonModule": true,
     "allowJs": true,
     "jsx": "react",
-    "types": ["jest", "node", "web"]
+    "types": ["jest", "node"]
   },
   "include": ["./src", "./.storybook/*"],
   "files": ["./typings/html-react-parser/index.d.ts"]

change/@fluentui-web-components-4594b9fa-9988-4133-a618-7ef4862061f2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "remove web types package and configuration",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/web-components/.storybook/tsconfig.json

@@ -4,7 +4,7 @@
     "allowJs": true,
     "checkJs": true,
     "noEmit": true,
-    "types": ["node", "web"]
+    "types": ["node"]
   },
   "include": ["*", "../public", "../src/**/*.stories.*"]
 }

packages/web-components/docs/api-report.md

@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="web" />
-
 import { CaptureType } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -118,7 +116,6 @@ export const accordionStyles: ElementStyles;
 export const accordionTemplate: ElementViewTemplate<Accordion>;
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
-// Warning: (ae-forgotten-export) The symbol "BaseAnchor" needs to be exported by the entry point index.d.ts
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal
 //
 // @public
@@ -451,6 +448,30 @@ export class BaseAccordionItem extends FASTElement {
     id: string;
 }
 
+// @public
+export class BaseAnchor extends FASTElement {
+    constructor();
+    // @internal
+    clickHandler(e: PointerEvent): boolean;
+    // (undocumented)
+    connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    download?: string;
+    // @internal
+    elementInternals: ElementInternals;
+    // @internal
+    handleChange(source: any, propertyName: string): void;
+    href?: string;
+    hreflang?: string;
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    ping?: string;
+    referrerpolicy?: string;
+    rel: string;
+    target?: AnchorTarget;
+    type?: string;
+}
+
 // @public
 export class BaseAvatar extends FASTElement {
     constructor();
@@ -2646,7 +2667,7 @@ export class Menu extends FASTElement {
     setComponent(): void;
     slottedMenuList: MenuList[];
     slottedTriggers: HTMLElement[];
-    toggleHandler: (e: Event | ToggleEvent) => void;
+    toggleHandler: (e: Event) => void;
     toggleMenu: () => void;
     triggerKeydownHandler: (e: KeyboardEvent) => boolean | void;
 }
@@ -2728,7 +2749,7 @@ export class MenuItem extends FASTElement {
     // @internal (undocumented)
     submenu: HTMLElement | undefined;
     // @internal
-    toggleHandler: (e: ToggleEvent | Event) => void;
+    toggleHandler: (e: Event) => void;
 }
 
 // @internal
@@ -2815,15 +2836,16 @@ export const MenuStyles: ElementStyles;
 export const MenuTemplate: ElementViewTemplate<Menu>;
 
 // @public
-export class ProgressBar extends BaseProgressBar {
+class ProgressBar_2 extends BaseProgressBar {
     shape?: ProgressBarShape;
     shapeChanged(prev: ProgressBarShape | undefined, next: ProgressBarShape | undefined): void;
     thickness?: ProgressBarThickness;
     thicknessChanged(prev: ProgressBarThickness | undefined, next: ProgressBarThickness | undefined): void;
 }
+export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
 
 // @public
 export const ProgressBarShape: {
@@ -2840,7 +2862,7 @@ export const ProgressBarStyles: ElementStyles;
 // Warning: (ae-missing-release-tag) "template" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
 
 // @public
 export const ProgressBarThickness: {

packages/web-components/package.json

@@ -252,7 +252,6 @@
   "devDependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
     "@tensile-perf/web-components": "~0.2.0",
-    "@types/web": "^0.0.142",
     "@storybook/html": "7.6.20",
     "@storybook/html-webpack5": "7.6.20",
     "chromedriver": "^125.0.0"

packages/web-components/src/accordion-item/accordion-item.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 import type { AccordionItem } from './accordion-item.js';
 
 test.describe('Accordion item', () => {

packages/web-components/src/accordion/accordion.spec.ts

@@ -1,6 +1,6 @@
 import type { Locator } from '@playwright/test';
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 
 test.describe('Accordion', () => {
   test.beforeEach(async ({ page }) => {

packages/web-components/src/anchor-button/anchor-button.spec.ts

@@ -1,6 +1,6 @@
 import { spinalCase } from '@microsoft/fast-web-utilities';
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 
 const proxyAttributes = {
   href: 'href',

packages/web-components/src/avatar/avatar.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 import type { Avatar } from './avatar.js';
 import { AvatarAppearance, AvatarColor, AvatarSize } from './avatar.options.js';
 
@@ -139,7 +139,7 @@ test.describe('Avatar Component', () => {
   test('default color should be neutral', async ({ page }) => {
     const element = page.locator('fluent-avatar');
 
-    expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('neutral'))).toBe(true);
+    await expect(element).toHaveCustomState('neutral');
   });
 
   test('should add a custom state of `brand` when `brand is provided as the color', async ({ page }) => {
@@ -149,7 +149,7 @@ test.describe('Avatar Component', () => {
       <fluent-avatar color-id="pumpkin" name="John Doe" color="brand"></fluent-avatar>
     `);
 
-    expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('brand'))).toBe(true);
+    await expect(element).toHaveCustomState('brand');
   });
 
   test('should prioritize color derivation from colorId over name when set to "colorful"', async ({ page }) => {
@@ -159,7 +159,7 @@ test.describe('Avatar Component', () => {
       <fluent-avatar color-id="pumpkin" name="Steve Smith" color="colorful"></fluent-avatar>
     `);
 
-    expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('pumpkin'))).toBe(true);
+    await expect(element).toHaveCustomState('pumpkin');
   });
 
   test(`should set the color attribute on the internal control`, async ({ page }) => {

packages/web-components/src/badge/badge.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 import type { Badge } from './badge.js';
 
 test.describe('Badge component', () => {

packages/web-components/src/button/button.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 
 test.describe('Button', () => {
   test.beforeEach(async ({ page }) => {

packages/web-components/src/checkbox/checkbox.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 import type { Checkbox } from './checkbox.js';
 
 test.describe('Checkbox', () => {
@@ -50,21 +50,21 @@ test.describe('Checkbox', () => {
       node.shape = 'circular';
     });
 
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(true);
+    await expect(element).toHaveCustomState('circular');
 
     await element.evaluate((node: Checkbox) => {
       node.shape = 'square';
     });
 
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(false);
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('square'))).toBe(true);
+    await expect(element).not.toHaveCustomState('circular');
+    await expect(element).toHaveCustomState('square');
 
     await element.evaluate((node: Checkbox) => {
       node.shape = undefined;
     });
 
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('circular'))).toBe(false);
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('square'))).toBe(false);
+    await expect(element).not.toHaveCustomState('circular');
+    await expect(element).not.toHaveCustomState('square');
   });
 
   test('should set and retrieve the `size` property correctly', async ({ page }) => {
@@ -110,21 +110,21 @@ test.describe('Checkbox', () => {
       node.size = 'medium';
     });
 
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(true);
+    await expect(element).toHaveCustomState('medium');
 
     await element.evaluate((node: Checkbox) => {
       node.size = 'large';
     });
 
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(false);
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('large'))).toBe(true);
+    await expect(element).not.toHaveCustomState('medium');
+    await expect(element).toHaveCustomState('large');
 
     await element.evaluate((node: Checkbox) => {
       node.size = undefined;
     });
 
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('medium'))).toBe(false);
-    expect(await element.evaluate((node: Checkbox) => node.elementInternals.states.has('large'))).toBe(false);
+    await expect(element).not.toHaveCustomState('medium');
+    await expect(element).not.toHaveCustomState('large');
   });
 
   test('should have a role of `checkbox`', async ({ page }) => {

packages/web-components/src/counter-badge/counter-badge.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 import type { CounterBadge } from './counter-badge.js';
 import {
   CounterBadgeAppearance,
@@ -188,7 +188,7 @@ test.describe('CounterBadge component', () => {
 
       await expect(element).toHaveJSProperty('shape', shape);
 
-      expect(await element.evaluate((node, shape) => node.matches(`:state(${shape})`), shape)).toEqual(true);
+      await expect(element).toHaveCustomState(shape);
     });
   }
 
@@ -206,7 +206,7 @@ test.describe('CounterBadge component', () => {
 
       await expect(element).toHaveJSProperty('color', color);
 
-      expect(await element.evaluate((node, color) => node.matches(`:state(${color})`), color)).toEqual(true);
+      await expect(element).toHaveCustomState(color);
     });
   }
 
@@ -222,7 +222,7 @@ test.describe('CounterBadge component', () => {
 
       await expect(element).toHaveJSProperty('size', size);
 
-      expect(await element.evaluate((node, size) => node.matches(`:state(${size})`), size)).toEqual(true);
+      await expect(element).toHaveCustomState(size);
     });
   }
 
@@ -244,9 +244,7 @@ test.describe('CounterBadge component', () => {
 
       await expect(element).toHaveJSProperty('appearance', appearance);
 
-      expect(await element.evaluate((node, appearance) => node.matches(`:state(${appearance})`), appearance)).toEqual(
-        true,
-      );
+      await expect(element).toHaveCustomState(appearance);
     });
   }
 });

packages/web-components/src/dialog-body/dialog-body.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
-import { fixtureURL } from '../helpers.tests.js';
+import { test } from '@playwright/test';
+import { expect, fixtureURL } from '../helpers.tests.js';
 import type { Dialog } from '../dialog/dialog.js';
 import type { DialogBody } from './dialog-body.js';