feat(react-tag-picker): adds text property to TagPickerOption

change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds text property to TagPickerOption",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -197,9 +197,14 @@ export type TagPickerOptionGroupState = OptionGroupState;
 
 // @public
 export type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
-    children: React_2.ReactNode;
     value: string;
-};
+} & ({
+    text?: string;
+    children: string;
+} | {
+    text: string;
+    children?: React_2.ReactNode;
+});
 
 // @public (undocumented)
 export type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {

packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
 import { TagPickerOption } from './TagPickerOption';
+import { TagPickerOptionProps } from './TagPickerOption.types';
 
 describe('TagPickerOption', () => {
-  isConformant({
+  isConformant<TagPickerOptionProps>({
     Component: TagPickerOption,
     displayName: 'TagPickerOption',
     requiredProps: { value: 'value', media: <></>, secondaryContent: <></> },

packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts

@@ -11,9 +11,28 @@ export type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {
  * TagPickerOption Props
  */
 export type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
-  children: React.ReactNode;
   value: string;
-};
+} & (
+    | {
+        /**
+         * An optional override the string value of the Option's display text,
+         * defaulting to the Option's child content.
+         * This is used as the Dropdown button's or Combobox input's value when the option is selected,
+         * and as the comparison for type-to-find keyboard functionality.
+         */
+        text?: string;
+        children: string;
+      }
+    | {
+        /**
+         * The string value of the Option's display text when the Option's children are not a string.
+         * This is used as the Dropdown button's or Combobox input's value when the option is selected,
+         * and as the comparison for type-to-find keyboard functionality.
+         */
+        text: string;
+        children?: React.ReactNode;
+      }
+  );
 
 /**
  * State used in rendering TagPickerOption

packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
-import { OptionProps, useOption_unstable } from '@fluentui/react-combobox';
+import { useOption_unstable } from '@fluentui/react-combobox';
 import type { TagPickerOptionProps, TagPickerOptionState } from './TagPickerOption.types';
 
 /**
@@ -16,7 +16,7 @@ export const useTagPickerOption_unstable = (
   props: TagPickerOptionProps,
   ref: React.Ref<HTMLDivElement>,
 ): TagPickerOptionState => {
-  const optionState = useOption_unstable(props as OptionProps, ref);
+  const optionState = useOption_unstable(props, ref);
   const state: TagPickerOptionState = {
     components: {
       ...optionState.components,

packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx

@@ -90,6 +90,7 @@ export const TruncatedText = () => {
                   value={option.value}
                   key={option.value}
                   title={option.value}
+                  text={option.value}
                 >
                   <div className={styles.optionContent}>{option.value}</div>
                 </TagPickerOption>