fix(web-components): update fast dependencies and fix un-allowed attr…

…ibutes on fluent-divider (#28837)

* fix(web-components): update fast depenencies and fix unallowed attributes on fluent-divider

* lock alpha/beta package versions

* lock versions of fast pckgs

* reference applyMixin locally to avoid package drilling

change/@fluentui-web-components-cba21cee-a030-4c94-adc9-b4d623533f00.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(web-components): update latest versions of fast packages and fix unallowed attributes issue for fluent-divider",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -15,6 +15,7 @@ import { FASTAccordion } from '@microsoft/fast-foundation';
 import { FASTAccordionItem } from '@microsoft/fast-foundation';
 import { FASTAnchor } from '@microsoft/fast-foundation';
 import { FASTButton } from '@microsoft/fast-foundation';
+import { FASTCheckbox } from '@microsoft/fast-foundation';
 import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
@@ -29,12 +30,15 @@ import { FASTSwitch } from '@microsoft/fast-foundation';
 import { FASTTab } from '@microsoft/fast-foundation';
 import { FASTTabPanel } from '@microsoft/fast-foundation';
 import { FASTTabs } from '@microsoft/fast-foundation';
+import { FASTTextField } from '@microsoft/fast-foundation';
+import { MenuItemRole } from '@microsoft/fast-foundation';
 import { RadioGroupOrientation } from '@microsoft/fast-foundation';
 import { SliderOrientation } from '@microsoft/fast-foundation';
 import { StartEnd } from '@microsoft/fast-foundation';
 import { StartEndOptions } from '@microsoft/fast-foundation';
 import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
 import { TabsOrientation } from '@microsoft/fast-foundation';
+import { TextFieldType as TextInputType } from '@microsoft/fast-foundation';
 import type { Theme } from '@fluentui/tokens';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
@@ -461,6 +465,49 @@ export type ButtonSize = ValuesOf<typeof ButtonSize>;
 // @public
 export const ButtonTemplate: ElementViewTemplate<Button>;
 
+// @public
+export class Checkbox extends FASTCheckbox {
+    labelPosition?: CheckboxLabelPosition;
+    shape?: CheckboxShape;
+    size?: CheckboxSize;
+}
+
+// @public
+export const CheckboxDefinition: FASTElementDefinition<typeof Checkbox>;
+
+// @public
+export const CheckboxLabelPosition: {
+    readonly before: "before";
+    readonly after: "after";
+};
+
+// @public (undocumented)
+export type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
+
+// @public
+export const CheckboxShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+
+// @public (undocumented)
+export type CheckboxShape = ValuesOf<typeof CheckboxShape>;
+
+// @public
+export const CheckboxSize: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public (undocumented)
+export type CheckboxSize = ValuesOf<typeof CheckboxSize>;
+
+// @public
+export const CheckboxStyles: ElementStyles;
+
+// @public
+export const CheckboxTemplate: ElementViewTemplate<Checkbox>;
+
 // @public (undocumented)
 export const colorBackgroundOverlay: CSSDesignToken<string>;
 
@@ -1770,6 +1817,8 @@ export type MenuItemColumnCount = 0 | 1 | 2;
 // @public
 export const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
 
+export { MenuItemRole }
+
 // @public
 export const MenuItemStyles: ElementStyles;
 
@@ -1868,6 +1917,9 @@ export const RadioTemplate: ElementViewTemplate<Radio>;
 // @public
 export const setTheme: (theme: Theme) => void;
 
+// @public (undocumented)
+export const setThemeFor: (element: FASTElement, theme: Theme) => void;
+
 // @public (undocumented)
 export const shadow16: CSSDesignToken<string>;
 
@@ -2188,6 +2240,46 @@ export const TextFont: {
 // @public
 export type TextFont = ValuesOf<typeof TextFont>;
 
+// @public
+export class TextInput extends FASTTextField {
+    appearance?: TextInputAppearance;
+    controlSize?: TextInputControlSize;
+}
+
+// @public
+export const TextInputAppearance: {
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+
+// @public
+export type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
+
+// @public
+export const TextInputControlSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
+
+// @public
+export const TextInputDefinition: FASTElementDefinition<typeof TextInput>;
+
+// @public
+export const TextInputStyles: ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "TextInputTemplate" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const TextInputTemplate: ElementViewTemplate<TextInput>;
+
+export { TextInputType }
+
 // @public
 export const TextSize: {
     readonly _100: "100";

packages/web-components/package.json

@@ -187,8 +187,8 @@
     "typescript": "4.7.4"
   },
   "dependencies": {
-    "@microsoft/fast-element": "^2.0.0-beta.23",
-    "@microsoft/fast-foundation": "^3.0.0-alpha.27",
+    "@microsoft/fast-element": "2.0.0-beta.25",
+    "@microsoft/fast-foundation": "3.0.0-alpha.29",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
     "tslib": "^2.1.0"

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

@@ -1,5 +1,7 @@
 import { attr, FASTElement } from '@microsoft/fast-element';
-import { applyMixins, StartEnd } from '@microsoft/fast-foundation';
+import { StartEnd } from '@microsoft/fast-foundation';
+// TODO: Remove with https://github.com/microsoft/fast/pull/6797
+import { applyMixins } from '../utils/apply-mixins.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 
 /**

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

@@ -1,5 +1,7 @@
 import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
-import { applyMixins, StartEnd } from '@microsoft/fast-foundation';
+import { StartEnd } from '@microsoft/fast-foundation';
+// TODO: Remove with https://github.com/microsoft/fast/pull/6797
+import { applyMixins } from '../utils/apply-mixins.js';
 import {
   CounterBadgeAppearance,
   CounterBadgeColor,

packages/web-components/src/utils/apply-mixins.ts

@@ -0,0 +1,31 @@
+import { AttributeConfiguration } from '@microsoft/fast-element';
+
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ *
+ * TODO: Remove with https://github.com/microsoft/fast/pull/6797
+ * This was used for Badge where start/end was not yet implemented.
+ * The method itself was deprecated as it was largely intended to be "internals" for Fast Foundation.
+ * Adding here to avoid breaking of the existing API.
+ * @internal
+ */
+export function applyMixins(derivedCtor: any, ...baseCtors: any[]) {
+  const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
+
+  baseCtors.forEach(baseCtor => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+      if (name !== 'constructor') {
+        Object.defineProperty(
+          derivedCtor.prototype,
+          name,
+          /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+          Object.getOwnPropertyDescriptor(baseCtor.prototype, name)!,
+        );
+      }
+    });
+
+    const baseAttributes = AttributeConfiguration.locate(baseCtor);
+    baseAttributes.forEach(x => derivedAttributes.push(x));
+  });
+}

yarn.lock

@@ -2654,23 +2654,23 @@
     eslint-plugin-react "7.24.0"
     eslint-plugin-security "1.4.0"
 
-"@microsoft/[email protected].23", "@microsoft/fast-element@^2.0.0-beta.23":
-  version "2.0.0-beta.23"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-2.0.0-beta.23.tgz#08cc4b40f9d2b418a27727d2604635c46c2b123c"
-  integrity sha512-ZNrWz+qY6kYSiiy6TdMV9p94QbxNILWuFgDndf24/is+aB+IemYwqLVPUKzTb8tX/zUMQz8aOtJ06/qvYbIdAQ==
+"@microsoft/[email protected].25":
+  version "2.0.0-beta.25"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-2.0.0-beta.25.tgz#14af14920ea5d4c24f1ba3f3ee417307aadbaa18"
+  integrity sha512-n8elNmwUXwMgB4ixNdAJqTY5yeSAN9siROojscPgWpYK+aORU4w3Kqr6nqJk6yFgFbPFCwt1jJSt5Fkbd7t1eQ==
 
 "@microsoft/fast-element@^1.11.1":
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.13.0.tgz#d390ff13697064a48dc6ad6bb332a5f5489f73f8"
   integrity sha512-iFhzKbbD0cFRo9cEzLS3Tdo9BYuatdxmCEKCpZs1Cro/93zNMpZ/Y9/Z7SknmW6fhDZbpBvtO8lLh9TFEcNVAQ==
 
-"@microsoft/fast-foundation@^3.0.0-alpha.27":
-  version "3.0.0-alpha.27"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-3.0.0-alpha.27.tgz#cb91af92fb231710f7c346b11db7afe241ff8bb4"
-  integrity sha512-tYDrHWMDNpi3+3RaRZ79T+6VQubYSxxutxELD88WXPEYiafjgext4AH9MvR+2pUpdfrNPcJLyuEQKVvcx6oWuQ==
+"@microsoft/[email protected].29":
+  version "3.0.0-alpha.29"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-3.0.0-alpha.29.tgz#40bc7250982c50d04a8c7b5707986cb0ebb1e07d"
+  integrity sha512-ZWVMhSL5KNskutCTtK2rX2BaL4A9fCHLw8pSUyxaIW9YLxWFEFHBvJ13Ax1JxTQYlXGqM5yMP/74qokEUpZWzw==
   dependencies:
     "@floating-ui/dom" "^1.0.3"
-    "@microsoft/fast-element" "2.0.0-beta.23"
+    "@microsoft/fast-element" "2.0.0-beta.25"
     "@microsoft/fast-web-utilities" "^6.0.0"
     tabbable "^5.2.0"
     tslib "^2.4.0"