fix(web-components): remove references to fast-web-utilities (#36106)

chrisdholt · web-flow · commit 3d24f1499aa6 · 2026-05-06T09:41:30.000-07:00
diff --git a/change/@fluentui-web-components-d6a01ea1-26a1-4a60-9c84-2d82313c59d8.json b/change/@fluentui-web-components-d6a01ea1-26a1-4a60-9c84-2d82313c59d8.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: remove deprecated fast-web-utilities references",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
@@ -6,13 +6,11 @@
 
 import { CaptureType } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
-import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
-import { Orientation } from '@microsoft/fast-web-utilities';
 import { SyntheticViewTemplate } from '@microsoft/fast-element';
 import { ViewTemplate } from '@microsoft/fast-element';
 
@@ -2566,6 +2564,15 @@ export const DialogType: {
 // @public (undocumented)
 export type DialogType = ValuesOf<typeof DialogType>;
 
+// @public
+export const Direction: {
+    readonly ltr: "ltr";
+    readonly rtl: "rtl";
+};
+
+// @public
+export type Direction = (typeof Direction)[keyof typeof Direction];
+
 // Warning: (ae-forgotten-export) The symbol "CSSDisplayPropertyValue" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -3419,6 +3426,15 @@ export const MessageBarStyles: ElementStyles;
 // @public
 export const MessageBarTemplate: ElementViewTemplate<MessageBar>;
 
+// @public
+export const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+
+// @public
+export type Orientation = (typeof Orientation)[keyof typeof Orientation];
+
 // @public
 export class ProgressBar extends BaseProgressBar {
     shape?: ProgressBarShape;
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -88,9 +88,7 @@
     "chromedriver": "^125.0.0"
   },
   "dependencies": {
-    "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.23",
-    "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/web-components/src/anchor-button/anchor-button.base.ts b/packages/web-components/src/anchor-button/anchor-button.base.ts
@@ -1,5 +1,4 @@
 import { attr, FASTElement, Observable } from '@microsoft/fast-element';
-import { keyEnter } from '@microsoft/fast-web-utilities';
 import { AnchorAttributes, type AnchorTarget } from './anchor-button.options.js';
 
 /**
@@ -193,7 +192,7 @@ export class BaseAnchor extends FASTElement {
    */
   public keydownHandler(e: KeyboardEvent): boolean | void {
     if (this.href) {
-      if (e.key === keyEnter) {
+      if (e.key === 'Enter') {
         const newTab = !this.isMac ? e.ctrlKey : e.metaKey || e.ctrlKey;
         this.handleNavigation(newTab);
         return;
diff --git a/packages/web-components/src/button/button.base.ts b/packages/web-components/src/button/button.base.ts
@@ -1,5 +1,4 @@
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import { type ButtonFormTarget, ButtonType } from './button.options.js';
 
 /**
@@ -347,7 +346,7 @@ export class BaseButton extends FASTElement {
       return;
     }
 
-    if (e.key === keyEnter || e.key === keySpace) {
+    if (e.key === 'Enter' || e.key === ' ') {
       this.click();
       return;
     }
diff --git a/packages/web-components/src/divider/divider.options.ts b/packages/web-components/src/divider/divider.options.ts
@@ -1,4 +1,4 @@
-import { Orientation } from '@microsoft/fast-web-utilities';
+import { Orientation } from '../utils/orientation.js';
 import type { ValuesOf } from '../utils/typings.js';
 import { FluentDesignSystem } from '../fluent-design-system.js';
 
diff --git a/packages/web-components/src/field/field.base.ts b/packages/web-components/src/field/field.base.ts
@@ -1,5 +1,5 @@
 import { FASTElement, observable } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { uniqueId } from '../utils/unique-id.js';
 import { toggleState } from '../utils/element-internals.js';
 import { type SlottableInput, ValidationFlags } from './field.options.js';
 
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -331,5 +331,6 @@ export {
 export { BaseTree, Tree, TreeDefinition, TreeTemplate, TreeStyles } from './tree/index.js';
 export { TreeItem, TreeItemDefinition, TreeItemTemplate, TreeItemStyles } from './tree-item/index.js';
 export type { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item/index.js';
-export { getDirection } from './utils/direction.js';
+export { Direction, getDirection } from './utils/direction.js';
+export { Orientation } from './utils/orientation.js';
 export { display } from './utils/display.js';
diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts
@@ -1,5 +1,4 @@
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import type { StartEndOptions } from '../patterns/start-end.js';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
@@ -172,12 +171,12 @@ export class MenuItem extends FASTElement {
     }
 
     switch (e.key) {
-      case keyEnter:
-      case keySpace:
+      case 'Enter':
+      case ' ':
         this.invoke();
         return false;
 
-      case keyArrowRight:
+      case 'ArrowRight':
         //open/focus on submenu
         if (!this.disabled) {
           this.submenu?.togglePopover(true);
@@ -186,7 +185,7 @@ export class MenuItem extends FASTElement {
 
         return false;
 
-      case keyArrowLeft:
+      case 'ArrowLeft':
         //close submenu
         if (this.parentElement?.hasAttribute('popover')) {
           this.parentElement.togglePopover(false);
diff --git a/packages/web-components/src/menu-list/menu-list.base.ts b/packages/web-components/src/menu-list/menu-list.base.ts
@@ -1,5 +1,5 @@
 import { FASTElement, observable, Updates } from '@microsoft/fast-element';
-import { isHTMLElement } from '@microsoft/fast-web-utilities';
+import { isHTMLElement } from '../utils/typings.js';
 import type { MenuItemColumnCount } from '../menu-item/menu-item.js';
 import type { MenuItem } from '../menu-item/menu-item.js';
 import { isMenuItem, MenuItemRole } from '../menu-item/menu-item.options.js';
diff --git a/packages/web-components/src/menu/menu.ts b/packages/web-components/src/menu/menu.ts
@@ -1,5 +1,4 @@
 import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
-import { keyEnter, keyEscape, keySpace, keyTab } from '@microsoft/fast-web-utilities';
 import { MenuItem } from '../menu-item/menu-item.js';
 import { MenuItemRole } from '../menu-item/menu-item.options.js';
 
@@ -402,14 +401,14 @@ export class Menu extends FASTElement {
     const key = e.key;
 
     switch (key) {
-      case keyEscape:
+      case 'Escape':
         e.preventDefault();
         if (this._open) {
           this.closeMenu();
           this.focusTrigger();
         }
         break;
-      case keyTab:
+      case 'Tab':
         if (this._open) this.closeMenu();
         if (
           e.shiftKey &&
@@ -438,8 +437,8 @@ export class Menu extends FASTElement {
     }
     const key = e.key;
     switch (key) {
-      case keySpace:
-      case keyEnter:
+      case ' ':
+      case 'Enter':
         e.preventDefault();
         this.toggleMenu();
         break;
diff --git a/packages/web-components/src/radio-group/radio-group.base.ts b/packages/web-components/src/radio-group/radio-group.base.ts
@@ -1,14 +1,4 @@
 import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
-import {
-  findLastIndex,
-  keyArrowDown,
-  keyArrowLeft,
-  keyArrowRight,
-  keyArrowUp,
-  keyEnd,
-  keyHome,
-  keySpace,
-} from '@microsoft/fast-web-utilities';
 import type { Radio } from '../radio/radio.js';
 import { isRadio } from '../radio/radio.options.js';
 import { RadioGroupOrientation } from './radio-group.options.js';
@@ -164,7 +154,7 @@ export class BaseRadioGroup extends FASTElement {
       this.name = next[0].name;
     }
 
-    const checkedIndex = findLastIndex(this.enabledRadios, x => x.initialChecked);
+    const checkedIndex = this.enabledRadios.findLastIndex(x => x.initialChecked);
 
     next.forEach((radio, index) => {
       radio.ariaPosInSet = `${index + 1}`;
@@ -461,15 +451,15 @@ export class BaseRadioGroup extends FASTElement {
    */
   public keydownHandler(e: KeyboardEvent): boolean | void {
     switch (e.key) {
-      case keyArrowUp:
-      case keyArrowDown:
-      case keyArrowLeft:
-      case keyArrowRight:
-      case keyHome:
-      case keyEnd:
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Home':
+      case 'End':
         this.isNavigating = true;
         break;
-      case keySpace:
+      case ' ':
         this.checkRadio();
         break;
     }
diff --git a/packages/web-components/src/radio-group/radio-group.options.ts b/packages/web-components/src/radio-group/radio-group.options.ts
@@ -1,4 +1,4 @@
-import { Orientation } from '@microsoft/fast-web-utilities';
+import { Orientation } from '../utils/orientation.js';
 import type { ValuesOf } from '../utils/typings.js';
 import { FluentDesignSystem } from '../fluent-design-system.js';
 
diff --git a/packages/web-components/src/slider/slider-utilities.ts b/packages/web-components/src/slider/slider-utilities.ts
@@ -1,4 +1,5 @@
-import { Direction, limit } from '@microsoft/fast-web-utilities';
+import { Direction } from '../utils/direction.js';
+import { limit } from '../utils/numbers.js';
 
 /**
  * Converts a pixel coordinate on the track to a percent of the track's range
diff --git a/packages/web-components/src/slider/slider.options.ts b/packages/web-components/src/slider/slider.options.ts
@@ -1,5 +1,5 @@
-import type { Direction } from '@microsoft/fast-web-utilities';
-import { Orientation } from '@microsoft/fast-web-utilities';
+import type { Direction } from '../utils/direction.js';
+import { Orientation } from '../utils/orientation.js';
 import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
 import type { ValuesOf } from '../utils/typings.js';
 import { FluentDesignSystem } from '../fluent-design-system.js';
diff --git a/packages/web-components/src/slider/slider.ts b/packages/web-components/src/slider/slider.ts
@@ -1,16 +1,8 @@
 import type { ElementStyles } from '@microsoft/fast-element';
 import { attr, css, FASTElement, observable, Observable, Updates } from '@microsoft/fast-element';
-import {
-  Direction,
-  keyArrowDown,
-  keyArrowLeft,
-  keyArrowRight,
-  keyArrowUp,
-  keyEnd,
-  keyHome,
-  limit,
-  Orientation,
-} from '@microsoft/fast-web-utilities';
+import { Direction } from '../utils/direction.js';
+import { limit } from '../utils/numbers.js';
+import { Orientation } from '../utils/orientation.js';
 import { numberLikeStringConverter } from '../utils/converters.js';
 import { getDirection } from '../utils/direction.js';
 import { convertPixelToPercent } from './slider-utilities.js';
@@ -612,29 +604,29 @@ export class Slider extends FASTElement implements SliderConfiguration {
     }
 
     switch (event.key) {
-      case keyHome:
+      case 'Home':
         event.preventDefault();
         this.value =
           this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
             ? `${this.minAsNumber}`
             : `${this.maxAsNumber}`;
         break;
-      case keyEnd:
+      case 'End':
         event.preventDefault();
         this.value =
           this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
             ? `${this.maxAsNumber}`
             : `${this.minAsNumber}`;
         break;
-      case keyArrowRight:
-      case keyArrowUp:
+      case 'ArrowRight':
+      case 'ArrowUp':
         if (!event.shiftKey) {
           event.preventDefault();
           this.increment();
         }
         break;
-      case keyArrowLeft:
-      case keyArrowDown:
+      case 'ArrowLeft':
+      case 'ArrowDown':
         if (!event.shiftKey) {
           event.preventDefault();
           this.decrement();
diff --git a/packages/web-components/src/tablist/tablist.base.ts b/packages/web-components/src/tablist/tablist.base.ts
@@ -1,5 +1,5 @@
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { uniqueId } from '../utils/unique-id.js';
 import type { Tab } from '../tab/tab.js';
 import { isTab } from '../tab/tab.options.js';
 import { swapStates, toggleState } from '../utils/element-internals.js';
diff --git a/packages/web-components/src/tablist/tablist.options.ts b/packages/web-components/src/tablist/tablist.options.ts
@@ -1,4 +1,4 @@
-import { Orientation } from '@microsoft/fast-web-utilities';
+import { Orientation } from '../utils/orientation.js';
 import type { ValuesOf } from '../utils/typings.js';
 import { FluentDesignSystem } from '../fluent-design-system.js';
 
diff --git a/packages/web-components/src/theme/set-theme.ts b/packages/web-components/src/theme/set-theme.ts
@@ -1,5 +1,5 @@
 import { Updates } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { uniqueId } from '../utils/unique-id.js';
 
 /**
  * Not using the `Theme` type from `@fluentui/tokens` package to allow custom
diff --git a/packages/web-components/src/tooltip/tooltip.stories.ts b/packages/web-components/src/tooltip/tooltip.stories.ts
@@ -1,5 +1,5 @@
 import { css, html, repeat } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { uniqueId } from '../utils/unique-id.js';
 import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { definition } from './tooltip.definition.js';
 import type { Tooltip as FluentTooltip } from './tooltip.js';
diff --git a/packages/web-components/src/tooltip/tooltip.ts b/packages/web-components/src/tooltip/tooltip.ts
@@ -1,5 +1,5 @@
 import { attr, FASTElement, nullableNumberConverter, Updates } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { uniqueId } from '../utils/unique-id.js';
 import { AnchorPositioningCSSSupported, AnchorPositioningHTMLSupported } from '../utils/support.js';
 import type { TooltipPositioningOption } from './tooltip.options.js';
 
diff --git a/packages/web-components/src/tree/tree.base.ts b/packages/web-components/src/tree/tree.base.ts
@@ -1,5 +1,4 @@
 import { FASTElement, observable } from '@microsoft/fast-element';
-import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import type { BaseTreeItem } from '../tree-item/tree-item.base.js';
 import { isTreeItem } from '../tree-item/tree-item.options.js';
 
@@ -72,29 +71,29 @@ export class BaseTree extends FASTElement {
     }
 
     switch (e.key) {
-      case keyArrowLeft: {
+      case 'ArrowLeft': {
         if (item?.childTreeItems?.length && item.expanded) {
           item.expanded = false;
         } else if (isTreeItem(item.parentElement)) {
           item.parentElement.focus();
         }
         return;
       }
-      case keyArrowRight: {
+      case 'ArrowRight': {
         if (item?.childTreeItems?.length) {
           if (!item.expanded) {
             item.expanded = true;
           }
         }
         return;
       }
-      case keyEnter: {
+      case 'Enter': {
         // In single-select trees where selection does not follow focus (see note below),
         // the default action is typically to select the focused node.
         this.clickHandler(e as Event);
         return;
       }
-      case keySpace: {
+      case ' ': {
         item.selected = true;
         return;
       }
diff --git a/packages/web-components/src/utils/direction.ts b/packages/web-components/src/utils/direction.ts
diff --git a/packages/web-components/src/utils/index.ts b/packages/web-components/src/utils/index.ts
diff --git a/packages/web-components/src/utils/numbers.ts b/packages/web-components/src/utils/numbers.ts
diff --git a/packages/web-components/src/utils/orientation.ts b/packages/web-components/src/utils/orientation.ts
diff --git a/packages/web-components/src/utils/typings.ts b/packages/web-components/src/utils/typings.ts
diff --git a/packages/web-components/tensile.config.js b/packages/web-components/tensile.config.js
diff --git a/packages/web-components/tsconfig.json b/packages/web-components/tsconfig.json
diff --git a/packages/web-components/tsconfig.lib.json b/packages/web-components/tsconfig.lib.json

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { attr, FASTElement, observable } from '@microsoft/fast-element';`
`2`		`-import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';`
`3`	`2`	`import { type ButtonFormTarget, ButtonType } from './button.options.js';`
`4`	`3`
`5`	`4`	`/**`
`@@ -347,7 +346,7 @@ export class BaseButton extends FASTElement {`
`347`	`346`	`return;`
`348`	`347`	`}`
`349`	`348`
`350`		`- if (e.key === keyEnter \|\| e.key === keySpace) {`
	`349`	`+ if (e.key === 'Enter' \|\| e.key === ' ') {`
`351`	`350`	`this.click();`
`352`	`351`	`return;`
`353`	`352`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Orientation } from '@microsoft/fast-web-utilities';`
	`1`	`+import { Orientation } from '../utils/orientation.js';`
`2`	`2`	`import type { ValuesOf } from '../utils/typings.js';`
`3`	`3`	`import { FluentDesignSystem } from '../fluent-design-system.js';`
`4`	`4`