fix(react-headless-components-preview): use a custom renderTagPicker function so Portal isn't pulled in

change/@fluentui-react-headless-components-preview-c8cb7148-c943-4b57-a108-30f93ac28556.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use custom renderTagPicker function for TagPicker component to avoid pulling Portal",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/bundle-isolation.config.json

@@ -3,8 +3,5 @@
   "fixturesRoot": "./bundle-size",
   "externals": ["react", "react-dom", "react/jsx-runtime", "react/compiler-runtime"],
   "forbiddenPackages": ["tabster", "@griffel/*", "@fluentui/react-icons"],
-  "allowedViolations": {
-    "AllComponents.fixture.js": ["@griffel/core", "@griffel/react"],
-    "TagPicker.fixture.js": ["@griffel/core", "@griffel/react"]
-  }
+  "allowedViolations": {}
 }

packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md

@@ -16,7 +16,6 @@ import type { OptionSlots as OptionSlots_2 } from '@fluentui/react-combobox';
 import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
-import { renderTagPicker_unstable as renderTagPicker } from '@fluentui/react-tag-picker';
 import { renderTagPickerButton_unstable as renderTagPickerButton } from '@fluentui/react-tag-picker';
 import { renderTagPickerControl_unstable as renderTagPickerControl } from '@fluentui/react-tag-picker';
 import { renderTagPickerGroup_unstable as renderTagPickerGroup } from '@fluentui/react-tag-picker';
@@ -50,7 +49,8 @@ import { TagPickerState } from '@fluentui/react-tag-picker';
 import { useTagPickerContext_unstable } from '@fluentui/react-tag-picker';
 import { useTagPickerContextValues } from '@fluentui/react-tag-picker';
 
-export { renderTagPicker }
+// @public
+export const renderTagPicker: (state: TagPickerState, contexts: TagPickerContextValues) => JSXElement;
 
 export { renderTagPickerButton }
 

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/renderTagPicker.tsx

@@ -1 +1,25 @@
-export { renderTagPicker_unstable as renderTagPicker } from '@fluentui/react-tag-picker';
+import * as React from 'react';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
+import { ListboxProvider } from '@fluentui/react-combobox';
+import { TagPickerContextProvider } from '@fluentui/react-tag-picker';
+import { assertSlots } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+
+import type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';
+
+/**
+ * Render the final JSX of TagPicker
+ */
+export const renderTagPicker = (state: TagPickerState, contexts: TagPickerContextValues): JSXElement => {
+  assertSlots<TagPickerSlots>(state);
+  return (
+    <TagPickerContextProvider value={contexts.picker}>
+      <ActiveDescendantContextProvider value={contexts.activeDescendant}>
+        <ListboxProvider value={contexts.listbox}>
+          {state.trigger}
+          {state.popover}
+        </ListboxProvider>
+      </ActiveDescendantContextProvider>
+    </TagPickerContextProvider>
+  );
+};