feat(react-tag-picker-preview): adds disabled state

Author: bsunderhus

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

@@ -141,7 +141,7 @@ export type TagPickerInputSlots = {
 } & Pick<ComboboxSlots, 'expandIcon'>;
 
 // @public
-export type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerContextValue, 'size'>;
+export type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerContextValue, 'size' | 'disabled'>;
 
 // @public
 export const TagPickerList: ForwardRefComponent<TagPickerListProps>;
@@ -183,15 +183,15 @@ export type TagPickerOptionSlots = Omit<OptionSlots, 'checkIcon'> & {
 export type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Omit<OptionState, 'checkIcon'>;
 
 // @public
-export type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'onOptionSelect' | 'positioning'> & Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
+export type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'onOptionSelect' | 'positioning' | 'disabled'> & Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
     children: [JSX.Element, JSX.Element] | JSX.Element;
 };
 
 // @public (undocumented)
 export type TagPickerSlots = {};
 
 // @public
-export type TagPickerState = ComponentState<TagPickerSlots> & Omit<ComboboxState, 'listbox' | 'root' | 'input' | 'expandIcon' | 'clearIcon' | 'components' | 'size'> & Pick<TagPickerContextValue, 'triggerRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'size'> & {
+export type TagPickerState = ComponentState<TagPickerSlots> & Omit<ComboboxState, 'listbox' | 'root' | 'input' | 'expandIcon' | 'clearIcon' | 'components' | 'size'> & Pick<TagPickerContextValue, 'triggerRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'size' | 'disabled'> & {
     positioning?: PositioningShorthand;
     trigger: React_2.ReactNode;
     popover?: React_2.ReactNode;

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

@@ -13,7 +13,7 @@ export type TagPickerSize = 'medium' | 'large' | 'extra-large';
  * Picker Props
  */
 export type TagPickerProps = ComponentProps<TagPickerSlots> &
-  Pick<ComboboxProps, 'onOptionSelect' | 'positioning'> &
+  Pick<ComboboxProps, 'onOptionSelect' | 'positioning' | 'disabled'> &
   Pick<Partial<TagPickerContextValue>, 'size' | 'selectedOptions' | 'appearance'> & {
     /**
      * Can contain two children including a trigger and a popover
@@ -27,7 +27,7 @@ export type TagPickerProps = ComponentProps<TagPickerSlots> &
  */
 export type TagPickerState = ComponentState<TagPickerSlots> &
   Omit<ComboboxState, 'listbox' | 'root' | 'input' | 'expandIcon' | 'clearIcon' | 'components' | 'size'> &
-  Pick<TagPickerContextValue, 'triggerRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'size'> & {
+  Pick<TagPickerContextValue, 'triggerRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'size' | 'disabled'> & {
     /**
      * Configures the positioned menu
      */

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

@@ -17,7 +17,7 @@ import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {
   const popoverId = useId('picker-listbox');
   const triggerInnerRef = React.useRef<HTMLInputElement>(null);
-  const { positioning, size = 'medium' } = props;
+  const { positioning, size = 'medium', disabled = false } = props;
 
   // Set a default set of fallback positions to try if the dropdown does not fit on screen
   const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];
@@ -47,9 +47,16 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState =>
     size: 'medium',
   });
   const onOptionClickBase = state.onOptionClick;
-  state.onOptionClick = useEventCallback(e => {
-    onOptionClickBase(e);
-    state.setOpen(e, false);
+  state.onOptionClick = useEventCallback(event => {
+    onOptionClickBase(event);
+    state.setOpen(event, false);
+  });
+  const setOpenBase = state.setOpen;
+  state.setOpen = useEventCallback((event, newValue) => {
+    if (disabled) {
+      return;
+    }
+    setOpenBase(event, newValue);
   });
 
   const children = React.Children.toArray(props.children) as React.ReactElement[];
@@ -81,6 +88,7 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState =>
     trigger,
     popover: state.open || state.hasFocus ? popover : undefined,
     popoverId,
+    disabled,
     triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),
     popoverRef: useMergedRefs(listboxRef, containerRef),
     targetRef,

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

@@ -27,6 +27,7 @@ export function useTagPickerContextValues(state: TagPickerState): TagPickerConte
     getOptionById,
     open,
     popoverId,
+    disabled,
   } = state;
   return {
     activeDescendant: React.useMemo(
@@ -60,6 +61,7 @@ export function useTagPickerContextValues(state: TagPickerState): TagPickerConte
       getOptionById,
       open,
       popoverId,
+      disabled,
     },
   };
 }

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

@@ -22,4 +22,5 @@ export type TagPickerInputProps = Omit<
 /**
  * State used in rendering TagPickerInput
  */
-export type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerContextValue, 'size'>;
+export type TagPickerInputState = ComponentState<TagPickerInputSlots> &
+  Pick<TagPickerContextValue, 'size' | 'disabled'>;

packages/react-components/react-tag-picker-preview/src/components/TagPickerInput/useTagPickerInput.tsx

@@ -4,13 +4,7 @@ import type { TagPickerInputProps, TagPickerInputState } from './TagPickerInput.
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';
-import {
-  slot,
-  useMergedRefs,
-  getIntrinsicElementProps,
-  useEventCallback,
-  mergeCallbacks,
-} from '@fluentui/react-utilities';
+import { slot, useMergedRefs, getIntrinsicElementProps, useEventCallback } from '@fluentui/react-utilities';
 import { useInputTriggerSlot } from '../../utils/useInputTriggerSlot';
 import { Backspace, Enter } from '@fluentui/keyboard-keys';
 
@@ -29,6 +23,7 @@ export const useTagPickerInput_unstable = (
 ): TagPickerInputState => {
   const { controller: activeDescendantController } = useActiveDescendantContext();
   const size = useTagPickerContext_unstable(ctx => ctx.size);
+  const contextDisabled = useTagPickerContext_unstable(ctx => ctx.disabled);
   const {
     triggerRef,
     clearSelection,
@@ -44,7 +39,7 @@ export const useTagPickerInput_unstable = (
     value: contextValue,
   } = usePickerContext();
 
-  const { value = contextValue, disabled } = props;
+  const { value = contextValue, disabled = contextDisabled } = props;
 
   const root = useInputTriggerSlot(
     {
@@ -108,22 +103,10 @@ export const useTagPickerInput_unstable = (
       },
       elementType: 'span',
     }),
+    disabled,
     size,
   };
 
-  /* handle open/close + focus change when clicking expandIcon */
-  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
-
-  const onExpandIconMouseDown = useEventCallback(
-    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-    }),
-  );
-
-  if (state.expandIcon) {
-    state.expandIcon.onMouseDown = onExpandIconMouseDown;
-  }
-
   return state;
 };
 

packages/react-components/react-tag-picker-preview/src/components/TagPickerInput/useTagPickerInputStyles.styles.ts

@@ -121,7 +121,7 @@ export const useTagPickerInputStyles_unstable = (state: TagPickerInputState): Ta
     tagPickerInputClassNames.root,
     styles.root,
     styles[state.size],
-    // state.disabled && styles.disabled,
+    state.disabled && styles.disabled,
     state.root.className,
   );
 
@@ -130,7 +130,7 @@ export const useTagPickerInputStyles_unstable = (state: TagPickerInputState): Ta
       tagPickerInputClassNames.expandIcon,
       iconStyles.icon,
       iconStyles[state.size],
-      // state.disabled && iconStyles.disabled,
+      state.disabled && iconStyles.disabled,
       // state.showClearIcon && iconStyles.visuallyHidden,
       state.expandIcon.className,
     );

packages/react-components/react-tag-picker-preview/src/contexts/TagPickerContext.ts

@@ -24,6 +24,7 @@ export interface TagPickerContextValue
   popoverId: string;
   targetRef: React.RefObject<HTMLElement>;
   size: TagPickerSize;
+  disabled: boolean;
 }
 
 /**
@@ -46,6 +47,7 @@ export const tagPickerContextDefaultValue: TagPickerContextValue = {
   popoverId: '',
   size: 'medium',
   appearance: 'outline',
+  disabled: false,
 };
 
 const TagPickerContext = createContext<TagPickerContextValue | undefined>(undefined);

packages/react-components/react-tag-picker-preview/stories/TagPicker/TagPickerDisabled.stories.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  TagPicker,
+  TagPickerList,
+  TagPickerInput,
+  TagPickerControl,
+  TagPickerProps,
+  TagPickerOption,
+  TagPickerGroup,
+} from '@fluentui/react-tag-picker-preview';
+import { Tag, Avatar } from '@fluentui/react-components';
+
+const options = [
+  'John Doe',
+  'Jane Doe',
+  'Max Mustermann',
+  'Erika Mustermann',
+  'Pierre Dupont',
+  'Amelie Dupont',
+  'Mario Rossi',
+  'Maria Rossi',
+];
+
+export const Disabled = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([
+    options[0],
+    options[1],
+    options[2],
+    options[3],
+  ]);
+  const onOptionSelect: TagPickerProps['onOptionSelect'] = (e, data) => {
+    setSelectedOptions(data.selectedOptions);
+  };
+
+  return (
+    <div style={{ maxWidth: 400 }}>
+      <TagPicker disabled onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
+        <TagPickerControl>
+          <TagPickerGroup>
+            {selectedOptions.map(option => (
+              <Tag key={option} shape="rounded" media={<Avatar name={option} color="colorful" />} value={option}>
+                {option}
+              </Tag>
+            ))}
+          </TagPickerGroup>
+          <TagPickerInput />
+        </TagPickerControl>
+        <TagPickerList>
+          {options
+            .filter(option => !selectedOptions.includes(option))
+            .map(option => (
+              <TagPickerOption
+                secondaryContent="Microsoft FTE"
+                media={<Avatar name={option} color="colorful" />}
+                value={option}
+                key={option}
+              >
+                {option}
+              </TagPickerOption>
+            ))}
+        </TagPickerList>
+      </TagPicker>
+    </div>
+  );
+};

packages/react-components/react-tag-picker-preview/stories/TagPicker/index.stories.tsx

@@ -8,6 +8,7 @@ export { Button } from './TagPickerButton.stories';
 export { Filtering } from './TagPickerFiltering.stories';
 export { Size } from './TagPickerSize.stories';
 export { Appearance } from './TagPickerAppearance.stories';
+export { Disabled } from './TagPickerDisabled.stories';
 
 export default {
   title: 'Preview Components/Tag Picker',