feat(react-tag-picker): adds appearance and size props

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

@@ -26,7 +26,6 @@ import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { TagGroupContextValues } from '@fluentui/react-tags';
-import type { TagGroupProps } from '@fluentui/react-tags';
 import type { TagGroupSlots } from '@fluentui/react-tags';
 import type { TagGroupState } from '@fluentui/react-tags';
 
@@ -51,7 +50,7 @@ export const renderTagPicker_unstable: (state: TagPickerState, contexts: PickerC
 export const renderTagPickerButton_unstable: (state: TagPickerButtonState) => JSX.Element;
 
 // @public
-export const renderTagPickerControl_unstable: (state: TagPickerControlState, contexts: TagPickerControlContextValues) => JSX.Element;
+export const renderTagPickerControl_unstable: (state: TagPickerControlState) => JSX.Element;
 
 // @public (undocumented)
 export function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues): JSX.Element | null;
@@ -82,11 +81,10 @@ export type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> & Pick<D
 // @public (undocumented)
 export type TagPickerButtonSlots = {
     root: Slot<'button'>;
-} & Pick<DropdownSlots, 'expandIcon' | 'clearButton'>;
+} & Pick<DropdownSlots, 'expandIcon'>;
 
 // @public
-export type TagPickerButtonState = ComponentState<TagPickerButtonSlots> & Pick<TagPickerControlContextValue, 'size' | 'clearable' | 'disabled'> & {
-    showClearIcon: boolean;
+export type TagPickerButtonState = ComponentState<TagPickerButtonSlots> & Pick<TagPickerContextValue, 'size'> & {
     hasSelectedOption: boolean;
 };
 
@@ -96,21 +94,16 @@ export const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;
 // @public (undocumented)
 export const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots>;
 
-// @public (undocumented)
-export type TagPickerControlContextValues = {
-    pickerControl: TagPickerControlContextValue;
-};
-
 // @public
-export type TagPickerControlProps = ComponentProps<TagPickerControlSlots> & Pick<ComboboxProps, 'appearance' | 'size' | 'disabled' | 'clearable'> & {};
+export type TagPickerControlProps = ComponentProps<TagPickerControlSlots>;
 
 // @public (undocumented)
 export type TagPickerControlSlots = {
     root: Slot<'div'>;
 };
 
 // @public
-export type TagPickerControlState = ComponentState<TagPickerControlSlots> & Required<Pick<TagPickerControlProps, 'appearance' | 'size' | 'disabled' | 'clearable'>>;
+export type TagPickerControlState = ComponentState<TagPickerControlSlots> & Pick<TagPickerContextValue, 'size' | 'appearance'>;
 
 // @public
 export const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
@@ -119,7 +112,7 @@ export const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
 export const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots>;
 
 // @public
-export type TagPickerGroupProps = Omit<TagGroupProps, 'onDismiss' | 'size'>;
+export type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;
 
 // @public (undocumented)
 export type TagPickerGroupSlots = TagGroupSlots;
@@ -136,7 +129,7 @@ export const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;
 export const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots>;
 
 // @public
-export type TagPickerInputProps = Omit<ComponentProps<Partial<TagPickerInputSlots>>, 'children' | 'size' | 'defaultValue'> & Pick<ComboboxProps, 'clearable' | 'size' | 'appearance'> & {
+export type TagPickerInputProps = Omit<ComponentProps<Partial<TagPickerInputSlots>>, 'children' | 'size' | 'defaultValue'> & Pick<ComboboxProps, 'clearable' | 'appearance'> & {
     freeform?: boolean;
     disabled?: boolean;
     value?: string;
@@ -145,12 +138,10 @@ export type TagPickerInputProps = Omit<ComponentProps<Partial<TagPickerInputSlot
 // @public (undocumented)
 export type TagPickerInputSlots = {
     root: Slot<'input'>;
-} & Pick<ComboboxSlots, 'clearIcon' | 'expandIcon'>;
+} & Pick<ComboboxSlots, 'expandIcon'>;
 
 // @public
-export type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerControlContextValue, 'size' | 'clearable' | 'disabled'> & {
-    showClearIcon: boolean;
-};
+export type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerContextValue, 'size'>;
 
 // @public
 export const TagPickerList: ForwardRefComponent<TagPickerListProps>;
@@ -159,7 +150,7 @@ export const TagPickerList: ForwardRefComponent<TagPickerListProps>;
 export const tagPickerListClassNames: SlotClassNames<TagPickerListSlots>;
 
 // @public
-export type TagPickerListProps = ComponentProps<TagPickerListSlots> & {};
+export type TagPickerListProps = ComponentProps<TagPickerListSlots>;
 
 // @public (undocumented)
 export type TagPickerListSlots = {
@@ -192,7 +183,7 @@ export type TagPickerOptionSlots = Omit<OptionSlots, 'checkIcon'> & {
 export type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Omit<OptionState, 'checkIcon'>;
 
 // @public
-export type TagPickerProps = ComponentProps<TagPickerSlots> & Omit<ComboboxProps, 'size' | 'value'> & Pick<Partial<TagPickerContextValue>, 'size'> & {
+export type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'onOptionSelect' | 'positioning'> & Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
     children: [JSX.Element, JSX.Element] | JSX.Element;
 };
 
@@ -203,7 +194,7 @@ export type TagPickerSlots = {};
 export type TagPickerState = ComponentState<TagPickerSlots> & Omit<ComboboxState, 'listbox' | 'root' | 'input' | 'expandIcon' | 'clearIcon' | 'components' | 'size'> & Pick<TagPickerContextValue, 'triggerRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'size'> & {
     positioning?: PositioningShorthand;
     trigger: React_2.ReactNode;
-    popover: React_2.ReactNode;
+    popover?: React_2.ReactNode;
 };
 
 // @public
@@ -228,7 +219,7 @@ export const useTagPickerGroup_unstable: (props: TagPickerGroupProps, ref: React
 export const useTagPickerGroupStyles_unstable: (state: TagPickerGroupState) => TagPickerGroupState;
 
 // @public
-export const useTagPickerInput_unstable: (props: TagPickerInputProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerInputState;
+export const useTagPickerInput_unstable: (props: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
 
 // @public
 export const useTagPickerInputStyles_unstable: (state: TagPickerInputState) => TagPickerInputState;

packages/react-components/react-tag-picker-preview/src/components/TagPicker/TagPicker.types.ts

@@ -7,13 +7,14 @@ import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
 
 export type TagPickerSlots = {};
 
+export type TagPickerSize = 'medium' | 'large' | 'extra-large';
+
 /**
  * Picker Props
- * TODO: pick only necessary props form combobox
  */
 export type TagPickerProps = ComponentProps<TagPickerSlots> &
-  Omit<ComboboxProps, 'size' | 'value'> &
-  Pick<Partial<TagPickerContextValue>, 'size'> & {
+  Pick<ComboboxProps, 'onOptionSelect' | 'positioning'> &
+  Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
     /**
      * Can contain two children including a trigger and a popover
      */
@@ -34,7 +35,7 @@ export type TagPickerState = ComponentState<TagPickerSlots> &
 
     trigger: React.ReactNode;
 
-    popover: React.ReactNode;
+    popover?: React.ReactNode;
   };
 
 export type TagPickerContextValues = {

packages/react-components/react-tag-picker-preview/src/components/TagPicker/__snapshots__/TagPicker.test.tsx.snap

@@ -3,8 +3,5 @@
 exports[`TagPicker renders a default state 1`] = `
 <div>
   Default Picker
-  <span
-    hidden=""
-  />
 </div>
 `;

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

@@ -14,7 +14,7 @@ export const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPic
       <ActiveDescendantContextProvider value={contexts.activeDescendant}>
         <ListboxProvider value={contexts.listbox}>
           {state.trigger}
-          <Portal mountNode={state.mountNode}>{state.popover}</Portal>
+          {state.popover && <Portal mountNode={state.mountNode}>{state.popover}</Portal>}
         </ListboxProvider>
       </ActiveDescendantContextProvider>
     </TagPickerContextProvider>

packages/react-components/react-tag-picker-preview/src/components/TagPicker/useTagPicker.ts

@@ -79,7 +79,7 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState =>
     activeDescendantController,
     components: {},
     trigger,
-    popover,
+    popover: state.open || state.hasFocus ? popover : undefined,
     popoverId,
     triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),
     popoverRef: useMergedRefs(listboxRef, containerRef),

packages/react-components/react-tag-picker-preview/src/components/TagPicker/useTagPickerContextValues.ts

@@ -2,12 +2,64 @@ import * as React from 'react';
 import { TagPickerContextValues, TagPickerState } from './TagPicker.types';
 
 export function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {
+  const {
+    onOptionClick,
+    registerOption,
+    selectedOptions,
+    selectOption,
+    multiselect,
+    // eslint-disable-next-line deprecation/deprecation
+    focusVisible,
+    // eslint-disable-next-line deprecation/deprecation
+    setActiveOption,
+    // eslint-disable-next-line deprecation/deprecation
+    activeOption,
+    value,
+    triggerRef,
+    targetRef,
+    size,
+    setValue,
+    setOpen,
+    setHasFocus,
+    popoverRef,
+    appearance,
+    clearSelection,
+    getOptionById,
+    open,
+    popoverId,
+  } = state;
   return {
     activeDescendant: React.useMemo(
       () => ({ controller: state.activeDescendantController }),
       [state.activeDescendantController],
     ),
-    listbox: { ...state },
-    picker: { ...state },
+    listbox: {
+      onOptionClick,
+      registerOption,
+      selectedOptions,
+      selectOption,
+      multiselect,
+      focusVisible,
+      setActiveOption,
+      activeOption,
+    },
+    picker: {
+      value,
+      multiselect,
+      triggerRef,
+      targetRef,
+      size,
+      setValue,
+      setOpen,
+      setHasFocus,
+      selectOption,
+      popoverRef,
+      selectedOptions,
+      appearance,
+      clearSelection,
+      getOptionById,
+      open,
+      popoverId,
+    },
   };
 }

packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/TagPickerButton.types.ts

@@ -1,10 +1,10 @@
 import { DropdownProps, DropdownSlots } from '@fluentui/react-combobox';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { TagPickerControlContextValue } from '../../contexts/TagPickerControlContext';
+import { TagPickerContextValue } from '../../contexts/TagPickerContext';
 
 export type TagPickerButtonSlots = {
   root: Slot<'button'>;
-} & Pick<DropdownSlots, 'expandIcon' | 'clearButton'>;
+} & Pick<DropdownSlots, 'expandIcon'>;
 
 /**
  * PickerButton Props
@@ -18,7 +18,6 @@ export type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> &
  * State used in rendering PickerButton
  */
 export type TagPickerButtonState = ComponentState<TagPickerButtonSlots> &
-  Pick<TagPickerControlContextValue, 'size' | 'clearable' | 'disabled'> & {
-    showClearIcon: boolean;
+  Pick<TagPickerContextValue, 'size'> & {
     hasSelectedOption: boolean;
   };

packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/__snapshots__/TagPickerButton.test.tsx.snap

@@ -11,27 +11,6 @@ exports[`TagPickerButton renders a default state 1`] = `
   >
     Default PickerButton
   </button>
-  <button
-    aria-label="Clear selection"
-    class="fui-TagPickerButton__clearButton"
-    tabindex="0"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class=""
-      fill="currentColor"
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-        fill="currentColor"
-      />
-    </svg>
-  </button>
   <span
     class="fui-TagPickerButton__expandIcon"
   >

packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/renderTagPickerButton.tsx

@@ -13,7 +13,6 @@ export const renderTagPickerButton_unstable = (state: TagPickerButtonState) => {
   return (
     <>
       <state.root />
-      {state.clearButton && <state.clearButton />}
       {state.expandIcon && <state.expandIcon />}
     </>
   );

packages/react-components/react-tag-picker-preview/src/components/TagPickerButton/useTagPickerButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { slot } from '@fluentui/react-utilities';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
+import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
 import type { TagPickerButtonProps, TagPickerButtonState } from './TagPickerButton.types';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
@@ -19,7 +19,6 @@ export const useTagPickerButton_unstable = (
   props: TagPickerButtonProps,
   ref: React.Ref<HTMLButtonElement>,
 ): TagPickerButtonState => {
-  const { clearable = false, size = 'medium', disabled = false } = props;
   const { controller: activeDescendantController } = useActiveDescendantContext();
   const {
     triggerRef,
@@ -52,44 +51,25 @@ export const useTagPickerButton_unstable = (
     },
   });
 
+  const size = useTagPickerContext_unstable(ctx => ctx.size);
+
   const state: TagPickerButtonState = {
     components: {
       root: 'button',
-      clearButton: 'button',
       expandIcon: 'span',
     },
     root,
-    clearButton: slot.optional(props.clearButton, {
-      defaultProps: {
-        'aria-label': 'Clear selection',
-        children: <DismissIcon />,
-        // Safari doesn't allow to focus an element with this
-        tabIndex: 0,
-        type: 'button',
-      },
-      elementType: 'button',
-      renderByDefault: true,
-    }),
     expandIcon: slot.optional(props.expandIcon, {
       renderByDefault: true,
       defaultProps: {
         children: <ChevronDownIcon />,
       },
       elementType: 'span',
     }),
-
-    clearable,
     size,
-    disabled,
-    showClearIcon: false,
     hasSelectedOption,
   };
 
-  // Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
-  if (multiselect) {
-    state.clearButton = undefined;
-  }
-
   return state;
 };