From 789076a4f49b68e945664d86de7a33dd02c156f1 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Fri, 24 May 2024 14:10:10 +0200
Subject: [PATCH 1/2] feat(react-tag-picker): adds text property to
 TagPickerOption

---
 ...-014eed16-1877-4eba-9bff-52e4ccf27a00.json |  7 ++++++
 .../etc/react-tag-picker.api.md               |  9 ++++++--
 .../TagPickerOption/TagPickerOption.types.ts  | 23 +++++++++++++++++--
 .../TagPickerOption/useTagPickerOption.ts     |  4 ++--
 4 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json

diff --git a/change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json b/change/@fluentui-react-tag-picker-014eed16-1877-4eba-9bff-52e4ccf27a00.json
new file mode 100644
index 00000000000000..3ab77b6bb62ebc
--- /dev/null
+++ b/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"
+}
diff --git a/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md b/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md
index 12464e7cd7c9a6..0ea0177e771e1b 100644
--- a/packages/react-components/react-tag-picker/etc/react-tag-picker.api.md
+++ b/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'> & {
diff --git a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts b/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts
index dc24b976150045..247b4a1bc713e8 100644
--- a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.types.ts
+++ b/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
diff --git a/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts b/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts
index 5a3bba87c9d2a7..775bbe458bea9f 100644
--- a/packages/react-components/react-tag-picker/src/components/TagPickerOption/useTagPickerOption.ts
+++ b/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,

From 12d14a621a447e0e2e531d5d1db0870c0e4c1dc0 Mon Sep 17 00:00:00 2001
From: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Date: Fri, 24 May 2024 14:41:31 +0200
Subject: [PATCH 2/2] chore: fix stories and tests type issues

---
 .../src/components/TagPickerOption/TagPickerOption.test.tsx    | 3 ++-
 .../stories/TagPicker/TagPickerTruncatedText.stories.tsx       | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx b/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx
index 0a87b95cd8ec95..cab6435c24e9b8 100644
--- a/packages/react-components/react-tag-picker/src/components/TagPickerOption/TagPickerOption.test.tsx
+++ b/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: <></> },
diff --git a/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx b/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx
index 8fb7b1ef60d713..eb23867bf61613 100644
--- a/packages/react-components/react-tag-picker/stories/TagPicker/TagPickerTruncatedText.stories.tsx
+++ b/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>