diff --git a/change/@fluentui-react-headless-components-preview-c8cb7148-c943-4b57-a108-30f93ac28556.json b/change/@fluentui-react-headless-components-preview-c8cb7148-c943-4b57-a108-30f93ac28556.json new file mode 100644 index 0000000000000..90ef6a8b3432c --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-headless-components-preview/library/bundle-isolation.config.json b/packages/react-components/react-headless-components-preview/library/bundle-isolation.config.json index d41f176334152..66d5e19222b52 100644 --- a/packages/react-components/react-headless-components-preview/library/bundle-isolation.config.json +++ b/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": {} } diff --git a/packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md b/packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md index 82c0d2516706c..7a4a44360b804 100644 --- a/packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md +++ b/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 } diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TagPicker/renderTagPicker.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TagPicker/renderTagPicker.tsx index 93bdfe09d6e74..ccd339fc98ac1 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TagPicker/renderTagPicker.tsx +++ b/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(state); + return ( + + + + {state.trigger} + {state.popover} + + + + ); +};