Updated to use the new FAST element 2.0 APIs for creating behaviors a…

…nd creating element styles (#5648)

# Pull Request

## 📖 Description

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->
This work updates components in `@microsoft/fast-foundation` to use updated APIs from FAST Element 2.0.

### 🎫 Issues

<!---
* List and link relevant issues here.
-->
Relates to #5641

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have included a change request file using `$ yarn change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated to use the new FAST element 2.0 APIs for creating behaviors and creating element styles",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts

@@ -176,11 +176,14 @@ export class DataGridRow extends FoundationElement {
 
             this.updateItemTemplate();
 
-            this.cellsRepeatBehavior = new RepeatDirective(
+            const cellsRepeatDirective = new RepeatDirective(
                 x => x.columnDefinitions,
                 x => x.activeCellItemTemplate,
                 { positioning: true }
-            ).createBehavior(this.cellsPlaceholder);
+            );
+            this.cellsRepeatBehavior = cellsRepeatDirective.createBehavior({
+                [cellsRepeatDirective.targetId]: this.cellsPlaceholder,
+            });
             /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
             this.$fastController.addBehaviors([this.cellsRepeatBehavior!]);
         }

packages/web-components/fast-foundation/src/data-grid/data-grid.ts

@@ -340,11 +340,14 @@ export class DataGrid extends FoundationElement {
 
         this.toggleGeneratedHeader();
 
-        this.rowsRepeatBehavior = new RepeatDirective(
+        const rowsRepeatDirective = new RepeatDirective(
             x => x.rowsData,
             x => x.rowItemTemplate,
             { positioning: true }
-        ).createBehavior(this.rowsPlaceholder);
+        );
+        this.rowsRepeatBehavior = rowsRepeatDirective.createBehavior({
+            [rowsRepeatDirective.targetId]: this.rowsPlaceholder,
+        });
 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         this.$fastController.addBehaviors([this.rowsRepeatBehavior!]);

packages/web-components/fast-foundation/src/design-system/component-presentation.ts

@@ -109,10 +109,10 @@ export class DefaultComponentPresentation implements ComponentPresentation {
             styles === void 0
                 ? null
                 : Array.isArray(styles)
-                ? ElementStyles.create(styles)
+                ? new ElementStyles(styles)
                 : styles instanceof ElementStyles
                 ? styles
-                : ElementStyles.create([styles]);
+                : new ElementStyles([styles]);
     }
 
     /**

packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts

@@ -39,7 +39,7 @@ class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
 
         const sheet = new CSSStyleSheet();
         this.target = (sheet.cssRules[sheet.insertRule(":host{}")] as CSSStyleRule).style;
-        source.$fastController.addStyles(ElementStyles.create([sheet]));
+        source.$fastController.addStyles(new ElementStyles([sheet]));
     }
 }
 

packages/web-components/fast-foundation/src/picker/picker.ts

@@ -539,11 +539,14 @@ export class Picker extends FormAssociatedPicker {
         this.updateListItemTemplate();
         this.updateOptionTemplate();
 
-        this.itemsRepeatBehavior = new RepeatDirective(
+        const itemsRepeatDirective = new RepeatDirective(
             x => x.selectedItems,
             x => x.activeListItemTemplate,
             { positioning: true }
-        ).createBehavior(this.itemsPlaceholderElement);
+        );
+        this.itemsRepeatBehavior = itemsRepeatDirective.createBehavior({
+            [itemsRepeatDirective.targetId]: this.itemsPlaceholderElement,
+        });
 
         this.inputElement.addEventListener("input", this.handleTextInput);
         this.inputElement.addEventListener("click", this.handleInputClick);
@@ -556,11 +559,14 @@ export class Picker extends FormAssociatedPicker {
             this.handleMenuOptionsUpdated
         );
 
-        this.optionsRepeatBehavior = new RepeatDirective(
+        const optionsRepeatDirective = new RepeatDirective(
             x => x.filteredOptionsList,
             x => x.activeMenuOptionTemplate,
             { positioning: true }
-        ).createBehavior(this.optionsPlaceholder);
+        );
+        this.optionsRepeatBehavior = optionsRepeatDirective.createBehavior({
+            [optionsRepeatDirective.targetId]: this.optionsPlaceholder,
+        });
 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         this.$fastController.addBehaviors([this.optionsRepeatBehavior!]);