chore(react-tag-picker-preview): onOptionSelect should adopt new even…

…t handling pattern (microsoft#30828)
Shubhabrata08 · Mar 20, 2024 · bf62996 · bf62996
1 parent da7dd96
commit bf62996
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/...s/react-components/react-tag-picker-preview/etc/react-tag-picker-preview.api.md b/...s/react-components/react-tag-picker-preview/etc/react-tag-picker-preview.api.md
@@ -14,6 +14,8 @@ import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import { DropdownProps } from '@fluentui/react-combobox';
 import { DropdownSlots } from '@fluentui/react-combobox';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { Listbox } from '@fluentui/react-combobox';
 import type { ListboxContextValue } from '@fluentui/react-combobox';
@@ -183,7 +185,8 @@ export type TagPickerOptionSlots = Omit<OptionSlots, 'checkIcon'> & {
 export type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Omit<OptionState, 'checkIcon'>;
 
 // @public
-export type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'onOptionSelect' | 'positioning' | 'disabled'> & Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
+export type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'positioning' | 'disabled'> & Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
+    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;
     children: [JSX.Element, JSX.Element] | JSX.Element;
 };
 

diff --git a/...ges/react-components/react-tag-picker-preview/src/components/TagPicker/TagPicker.types.ts b/...ges/react-components/react-tag-picker-preview/src/components/TagPicker/TagPicker.types.ts
@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, EventData, EventHandler } from '@fluentui/react-utilities';
 import type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import type { TagPickerContextValue } from '../../contexts/TagPickerContext';
@@ -9,12 +9,27 @@ export type TagPickerSlots = {};
 
 export type TagPickerSize = 'medium' | 'large' | 'extra-large';
 
+/*
+ * Data for the onOptionSelect callback.
+ * `optionValue` and `optionText` will be undefined if multiple options are modified at once.
+ */
+export type TagPickerOnOptionSelectData = {
+  optionValue: string | undefined;
+  optionText: string | undefined;
+  selectedOptions: string[];
+} & (
+  | EventData<'click', React.MouseEvent<HTMLDivElement>>
+  | EventData<'change', React.ChangeEvent<HTMLDivElement>>
+  | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>
+);
+
 /**
  * Picker Props
  */
 export type TagPickerProps = ComponentProps<TagPickerSlots> &
-  Pick<ComboboxProps, 'onOptionSelect' | 'positioning' | 'disabled'> &
+  Pick<ComboboxProps, 'positioning' | 'disabled'> &
   Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
+    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;
     /**
      * Can contain two children including a trigger and a popover
      */

diff --git a/packages/react-components/react-tag-picker-preview/src/components/TagPicker/useTagPicker.ts b/packages/react-components/react-tag-picker-preview/src/components/TagPicker/useTagPicker.ts
@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
-import type { TagPickerProps, TagPickerState } from './TagPicker.types';
+import type { TagPickerOnOptionSelectData, TagPickerProps, TagPickerState } from './TagPicker.types';
 import { optionClassNames } from '@fluentui/react-combobox';
 import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import { useActiveDescendant } from '@fluentui/react-aria';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
+import { SelectionProps } from '../../utils/Selection.types';
 
 /**
  * Create the state required to render Picker.
@@ -39,8 +40,17 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState =>
     matchOption: el => el.classList.contains(optionClassNames.root),
   });
 
+  const handleOptionSelect: SelectionProps['onOptionSelect'] = useEventCallback((event, data) =>
+    props.onOptionSelect?.(event, {
+      ...data,
+      type: event.type,
+      event,
+    } as TagPickerOnOptionSelectData),
+  );
+
   const state = useComboboxBaseState({
     ...props,
+    onOptionSelect: handleOptionSelect,
     activeDescendantController,
     editable: true,
     multiselect: true,