feat(react-tag-picker): add portal-free base render

change/@fluentui-react-headless-components-preview-3e7d5c91-42b6-4f8a-9d0e-8c5a1b2f6e73.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: render TagPicker without a portal so react-portal is not bundled",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tag-picker-9c1f2a70-5b84-4d2e-8a3c-6d1e9f4b7c25.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add renderTagPickerBase_unstable, a portal-free render for headless consumers",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -16,7 +16,7 @@ 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 { renderTagPickerBase_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';

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

@@ -1 +1 @@
-export { renderTagPicker_unstable as renderTagPicker } from '@fluentui/react-tag-picker';
+export { renderTagPickerBase_unstable as renderTagPicker } from '@fluentui/react-tag-picker';

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

@@ -37,6 +37,9 @@ import type { TagGroupState } from '@fluentui/react-tags';
 // @public
 export const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) => JSXElement;
 
+// @public
+export const renderTagPickerBase_unstable: (state: TagPickerBaseState, contexts: TagPickerContextValues) => JSXElement;
+
 // @public
 export const renderTagPickerButton_unstable: (state: TagPickerButtonBaseState) => JSXElement;
 

packages/react-components/react-tag-picker/library/src/TagPicker.ts

@@ -12,6 +12,7 @@ export type {
 export {
   TagPicker,
   renderTagPicker_unstable,
+  renderTagPickerBase_unstable,
   useTagPicker_unstable,
   useTagPickerBase_unstable,
   useTagPickerContextValues,

packages/react-components/react-tag-picker/library/src/components/TagPicker/index.ts

@@ -11,5 +11,6 @@ export type {
   TagPickerState,
 } from './TagPicker.types';
 export { renderTagPicker_unstable } from './renderTagPicker';
+export { renderTagPickerBase_unstable } from './renderTagPickerBase';
 export { useTagPicker_unstable, useTagPickerBase_unstable } from './useTagPicker';
 export { useTagPickerContextValues } from './useTagPickerContextValues';

packages/react-components/react-tag-picker/library/src/components/TagPicker/renderTagPicker.tsx

@@ -1,27 +1,16 @@
 import * as React from 'react';
-import type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';
-import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
-import { ListboxProvider } from '@fluentui/react-combobox';
+import type { TagPickerState, TagPickerContextValues } from './TagPicker.types';
 import { Portal } from '@fluentui/react-portal';
-import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { TagPickerContextProvider } from '../../contexts/TagPickerContext';
+import { renderTagPickerContent } from './renderTagPickerBase';
 
 /**
  * Render the final JSX of Picker
  */
 
-export const renderTagPicker_unstable = (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 &&
-            (state.inline ? state.popover : <Portal mountNode={state.mountNode}>{state.popover}</Portal>)}
-        </ListboxProvider>
-      </ActiveDescendantContextProvider>
-    </TagPickerContextProvider>
+export const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPickerContextValues): JSXElement =>
+  renderTagPickerContent(
+    state,
+    contexts,
+    state.popover && (state.inline ? state.popover : <Portal mountNode={state.mountNode}>{state.popover}</Portal>),
   );
-};

packages/react-components/react-tag-picker/library/src/components/TagPicker/renderTagPickerBase.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
+import { ListboxProvider } from '@fluentui/react-combobox';
+import { assertSlots } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+
+import type { TagPickerBaseState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';
+import { TagPickerContextProvider } from '../../contexts/TagPickerContext';
+
+/**
+ * Render the base JSX of Picker, keeping the popover in DOM order.
+ *
+ * Portaling is layered on by the styled `renderTagPicker_unstable`. Keeping it in a separate module
+ * is what lets consumers render a TagPicker without pulling `@fluentui/react-portal` - and with it
+ * Griffel - into their bundle.
+ */
+export const renderTagPickerBase_unstable = (state: TagPickerBaseState, contexts: TagPickerContextValues): JSXElement =>
+  renderTagPickerContent(state, contexts, state.popover);
+
+/**
+ * Shared by the base and styled renders so that portaling stays out of the base module.
+ *
+ * @internal
+ */
+export const renderTagPickerContent = (
+  state: TagPickerBaseState,
+  contexts: TagPickerContextValues,
+  popover: React.ReactNode,
+): JSXElement => {
+  assertSlots<TagPickerSlots>(state);
+  return (
+    <TagPickerContextProvider value={contexts.picker}>
+      <ActiveDescendantContextProvider value={contexts.activeDescendant}>
+        <ListboxProvider value={contexts.listbox}>
+          {state.trigger}
+          {popover}
+        </ListboxProvider>
+      </ActiveDescendantContextProvider>
+    </TagPickerContextProvider>
+  );
+};

packages/react-components/react-tag-picker/library/src/index.ts

@@ -1,6 +1,7 @@
 export {
   TagPicker,
   renderTagPicker_unstable,
+  renderTagPickerBase_unstable,
   useTagPicker_unstable,
   useTagPickerBase_unstable,
   useTagPickerContextValues,