@fluentui/react-combobox 9.5.34 → 9.5.35

package/CHANGELOG.md

@@ -1,23 +1,33 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Mon, 18 Dec 2023 14:36:12 GMT and should not be manually modified.
+This log was last generated on Mon, 18 Dec 2023 17:47:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.35)
+
+Mon, 18 Dec 2023 17:47:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.34..@fluentui/react-combobox_v9.5.35)
+
+### Patches
+
+- refactor: Encapsulates listbox and trigger slot construction ([PR #30010](https://github.com/microsoft/fluentui/pull/30010) by lingfan.gao@microsoft.com)
+- Bump @fluentui/react-positioning to v9.10.5 ([PR #30010](https://github.com/microsoft/fluentui/pull/30010) by beachball)
+
 ## [9.5.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.34)
 
-Mon, 18 Dec 2023 14:36:12 GMT 
+Mon, 18 Dec 2023 14:40:46 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.5.33..@fluentui/react-combobox_v9.5.34)
 
 ### Patches
 
-- Bump @fluentui/react-context-selector to v9.1.44 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
-- Bump @fluentui/react-field to v9.1.45 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.0.22 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
-- Bump @fluentui/react-portal to v9.4.5 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
-- Bump @fluentui/react-positioning to v9.10.4 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
-- Bump @fluentui/react-utilities to v9.15.4 ([PR #30099](https://github.com/microsoft/fluentui/pull/30099) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.44 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-field to v9.1.45 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.22 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-portal to v9.4.5 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-positioning to v9.10.4 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
+- Bump @fluentui/react-utilities to v9.15.4 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
 
 ## [9.5.33](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.5.33)
 

package/dist/index.d.ts

@@ -90,10 +90,21 @@ declare type ComboboxBaseProps = SelectionProps & Pick<PortalProps, 'mountNode'>
 declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
     activeOption?: OptionValue;
     focusVisible: boolean;
+    /**
+     * @deprecated - no longer used internally
+     * whether the combobox/dropdown currently has focus
+     */
     hasFocus: boolean;
+    /**
+     * @deprecated - no longer used internally
+     * Whether the next blur event should be ignored, and the combobox/dropdown will not close.
+     */
     ignoreNextBlur: React_2.MutableRefObject<boolean>;
     setActiveOption: React_2.Dispatch<React_2.SetStateAction<OptionValue | undefined>>;
     setFocusVisible(focusVisible: boolean): void;
+    /**
+     * @deprecated - no longer used internally
+     */
     setHasFocus(hasFocus: boolean): void;
     setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
     setValue(newValue: string | undefined): void;

package/lib/components/Combobox/useCombobox.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
-import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
-import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { Listbox } from '../Listbox/Listbox';
+import { useListboxSlot } from '../../utils/useListboxSlot';
+import { useInputTriggerSlot } from './useInputTriggerSlot';
 /**
  * Create the state required to render Combobox.
  *
@@ -17,7 +16,6 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */ export const useCombobox_unstable = (props, ref)=>{
-    var _props_input;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
@@ -28,9 +26,9 @@ import { Listbox } from '../Listbox/Listbox';
         ...props,
         editable: true
     });
-    const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;
+    const { open, selectOption, setOpen, setValue, value } = baseState;
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
-    const { disabled, freeform, inlinePopup, multiselect } = props;
+    const { disabled, freeform, inlinePopup } = props;
     const comboId = useId('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
@@ -40,48 +38,11 @@ import { Listbox } from '../Listbox/Listbox';
             'size'
         ]
     });
-    const rootRef = React.useRef(null);
-    const triggerRef = React.useRef(null);
-    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
-    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
-    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
-    const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
-    // save the typing vs. navigating options state, as the space key should behave differently in each case
-    // we do not want to update the combobox when this changes, just save the value between renders
-    const isTyping = React.useRef(false);
-    // set active option and selection based on typing
-    const getOptionFromInput = (inputValue)=>{
-        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
-        if (!searchString || searchString.length === 0) {
-            return;
-        }
-        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
-        const matches = getOptionsMatchingText(matcher);
-        // return first matching option after the current active option, looping back to the top
-        if (matches.length > 1 && activeOption) {
-            const startIndex = getIndexOfId(activeOption.id);
-            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
-            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
-        }
-        var _matches_;
-        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
-    };
-    /* Handle typed input */ // reset any typed value when an option is selected
+    // reset any typed value when an option is selected
     baseState.selectOption = (ev, option)=>{
         setValue(undefined);
         selectOption(ev, option);
     };
-    const onTriggerBlur = (ev)=>{
-        // handle selection and updating value if freeform is false
-        if (!baseState.open && !freeform) {
-            // select matching option, if the value fully matches
-            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
-                baseState.selectOption(ev, activeOption);
-            }
-            // reset typed value when the input loses focus while collapsed, unless freeform is true
-            setValue(undefined);
-        }
-    };
     baseState.setOpen = (ev, newState)=>{
         if (disabled) {
             return;
@@ -91,53 +52,27 @@ import { Listbox } from '../Listbox/Listbox';
         }
         setOpen(ev, newState);
     };
-    // update value and active option based on input
-    const onTriggerChange = (ev)=>{
-        const inputValue = ev.target.value;
-        // update uncontrolled value
-        baseState.setValue(inputValue);
-        // handle updating active option based on input
-        const matchingOption = getOptionFromInput(inputValue);
-        setActiveOption(matchingOption);
-        setFocusVisible(true);
-        // clear selection for single-select if the input value no longer matches the selection
-        if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
-            clearSelection(ev);
+    const triggerRef = React.useRef(null);
+    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {
+        state: baseState,
+        triggerRef,
+        defaultProps: {
+            children: props.children
         }
-    };
-    // resolve input and listbox slot props
-    let triggerSlot;
-    let listboxSlot;
-    triggerSlot = slot.always(props.input, {
+    });
+    var _props_input;
+    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, ref), {
+        state: baseState,
+        freeform,
         defaultProps: {
-            ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
             type: 'text',
             value: value !== null && value !== void 0 ? value : '',
             ...triggerNativeProps
-        },
-        elementType: 'input'
+        }
     });
-    const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
-    triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
-    triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed
-    listboxSlot = open || hasFocus ? slot.optional(props.listbox, {
-        renderByDefault: true,
-        defaultProps: {
-            children: props.children
-        },
-        elementType: Listbox
-    }) : undefined;
-    [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
-    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);
-    if (hideActiveDescendant) {
-        triggerSlot['aria-activedescendant'] = undefined;
-    }
-    if (listboxSlot) {
-        listboxSlot.ref = listboxRef;
-    }
     const rootSlot = slot.always(props.root, {
         defaultProps: {
-            'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
+            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
             ...rootNativeProps
         },
         elementType: 'div'
@@ -152,7 +87,7 @@ import { Listbox } from '../Listbox/Listbox';
         },
         root: rootSlot,
         input: triggerSlot,
-        listbox: listboxSlot,
+        listbox: open ? listbox : undefined,
         expandIcon: slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
@@ -164,54 +99,15 @@ import { Listbox } from '../Listbox/Listbox';
         }),
         ...baseState
     };
-    state.root.ref = useMergedRefs(state.root.ref, rootRef);
-    /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;
-    state.input.onKeyDown = useEventCallback((ev)=>{
-        if (!open && getDropdownActionFromKey(ev) === 'Type') {
-            baseState.setOpen(ev, true);
-        }
-        // clear activedescendant when moving the text insertion cursor
-        if (ev.key === ArrowLeft || ev.key === ArrowRight) {
-            setHideActiveDescendant(true);
-        } else {
-            setHideActiveDescendant(false);
-        }
-        // update typing state to true if the user is typing
-        const action = getDropdownActionFromKey(ev, {
-            open,
-            multiselect
-        });
-        if (action === 'Type') {
-            isTyping.current = true;
-        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
-            isTyping.current = false;
-        }
-        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
-        if (freeform && (isTyping.current || !open) && ev.key === ' ') {
-            resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
-            return;
-        }
-        // if we're not allowing space to type, continue with default behavior
-        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
-    });
-    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
-    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, ()=>{
-        // do not dismiss on blur when closing via clicking the icon
-        if (open) {
-            baseState.ignoreNextBlur.current = true;
-        }
-    }));
-    const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, (event)=>{
+    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
+    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{
         var _triggerRef_current;
-        // open and set focus
+        event.preventDefault();
         state.setOpen(event, !state.open);
         (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
-        // set focus visible=false, since this can only be done with the mouse/pointer
-        setFocusVisible(false);
     }));
     if (state.expandIcon) {
         state.expandIcon.onMouseDown = onExpandIconMouseDown;
-        state.expandIcon.onClick = onExpandIconClick;
         // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
         // using the following steps:
         // 1. If there is an aria-label, it is "Open [aria-label]"

package/lib/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup, multiselect } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = slot.always(props.input, {\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n    elementType: 'input',\n  });\n  const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? slot.optional(props.listbox, {\n          renderByDefault: true,\n          defaultProps: { children: props.children },\n          elementType: Listbox,\n        })\n      : undefined;\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n  const listboxRef = useMergedRefs(listboxSlot?.ref, comboboxPopupRef);\n\n  if (hideActiveDescendant) {\n    triggerSlot['aria-activedescendant'] = undefined;\n  }\n\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n  }\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n  const defaultOnTriggerKeyDown = state.input.onKeyDown;\n  state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      baseState.setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      resolvedPropsOnKeyDown?.(ev);\n      return;\n    }\n\n    // if we're not allowing space to type, continue with default behavior\n    defaultOnTriggerKeyDown?.(ev);\n  });\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","getDropdownActionFromKey","useComboboxBaseState","useComboboxPositioning","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","always","input","defaultProps","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","optional","listbox","renderByDefault","children","listboxRef","rootSlot","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","current","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const { open, selectOption, setOpen, setValue, value } = baseState;\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n  const { disabled, freeform, inlinePopup } = props;\n  const comboId = useId('combobox-');\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, ref), {\n    state: baseState,\n    freeform,\n    defaultProps: {\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const state: ComboboxState = {\n    components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    input: triggerSlot,\n    listbox: open ? listbox : undefined,\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-expanded': open,\n        children: <ChevronDownIcon />,\n        role: 'button',\n      },\n      elementType: 'span',\n    }),\n    ...baseState,\n  };\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n      event.preventDefault();\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n    // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n    // using the following steps:\n    // 1. If there is an aria-label, it is \"Open [aria-label]\"\n    // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n    // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n    // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n    const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n    const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n    if (!hasExpandLabel) {\n      if (props['aria-labelledby']) {\n        const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n        const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n        state.expandIcon['aria-label'] = defaultOpenString;\n        state.expandIcon.id = chevronId;\n        state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n      } else if (props['aria-label']) {\n        state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n      } else {\n        state.expandIcon['aria-label'] = defaultOpenString;\n      }\n    }\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","open","selectOption","setOpen","setValue","value","comboboxPopupRef","comboboxTargetRef","disabled","freeform","inlinePopup","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","useRef","listbox","state","defaultProps","children","triggerSlot","input","type","rootSlot","always","id","elementType","components","expandIcon","optional","renderByDefault","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","event","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}

package/lib/components/Combobox/useInputTriggerSlot.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';
+import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
+import { useTriggerSlot } from '../../utils/useTriggerSlot';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+/*
+ * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
+ * with the semantics and event handlers needed for the Combobox and Dropdown components.
+ * The element type of the ref should always match the element type used in the trigger shorthand.
+ */ export function useInputTriggerSlot(triggerFromProps, ref, options) {
+    const { state: { open, value, activeOption, selectOption, setValue, setActiveOption, setFocusVisible, multiselect, selectedOptions, clearSelection, getOptionsMatchingText, getIndexOfId, setOpen }, freeform, defaultProps } = options;
+    const onBlur = (ev)=>{
+        // handle selection and updating value if freeform is false
+        if (!open && !freeform) {
+            // select matching option, if the value fully matches
+            if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
+                selectOption(ev, activeOption);
+            }
+            // reset typed value when the input loses focus while collapsed, unless freeform is true
+            setValue(undefined);
+        }
+    };
+    const getOptionFromInput = (inputValue)=>{
+        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
+        if (!searchString || searchString.length === 0) {
+            return;
+        }
+        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
+        const matches = getOptionsMatchingText(matcher);
+        // return first matching option after the current active option, looping back to the top
+        if (matches.length > 1 && activeOption) {
+            const startIndex = getIndexOfId(activeOption.id);
+            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
+            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+        }
+        var _matches_;
+        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+    };
+    // update value and active option based on input
+    const onChange = (ev)=>{
+        const inputValue = ev.target.value;
+        // update uncontrolled value
+        setValue(inputValue);
+        // handle updating active option based on input
+        const matchingOption = getOptionFromInput(inputValue);
+        setActiveOption(matchingOption);
+        setFocusVisible(true);
+        // clear selection for single-select if the input value no longer matches the selection
+        if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
+            clearSelection(ev);
+        }
+    };
+    const trigger = useTriggerSlot(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'input'
+    });
+    trigger.onChange = mergeCallbacks(trigger.onChange, onChange);
+    trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);
+    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
+    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
+    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
+    const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
+    // save the typing vs. navigating options state, as the space key should behave differently in each case
+    // we do not want to update the combobox when this changes, just save the value between renders
+    const isTyping = React.useRef(false);
+    /**
+   * Freeform combobox should not select
+   */ const defaultOnKeyDown = trigger.onKeyDown;
+    const onKeyDown = useEventCallback((ev)=>{
+        if (!open && getDropdownActionFromKey(ev) === 'Type') {
+            setOpen(ev, true);
+        }
+        // clear activedescendant when moving the text insertion cursor
+        if (ev.key === ArrowLeft || ev.key === ArrowRight) {
+            setHideActiveDescendant(true);
+        } else {
+            setHideActiveDescendant(false);
+        }
+        // update typing state to true if the user is typing
+        const action = getDropdownActionFromKey(ev, {
+            open,
+            multiselect
+        });
+        if (action === 'Type') {
+            isTyping.current = true;
+        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
+            isTyping.current = false;
+        }
+        // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
+        if (freeform && (isTyping.current || !open) && ev.key === ' ') {
+            var _triggerFromProps_onKeyDown;
+            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);
+            return;
+        }
+        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(ev);
+    });
+    trigger.onKeyDown = onKeyDown;
+    if (hideActiveDescendant) {
+        trigger['aria-activedescendant'] = undefined;
+    }
+    return trigger;
+}

package/lib/components/Combobox/useInputTriggerSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInputTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { ComboboxProps, ComboboxState } from './Combobox.types';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionsMatchingText'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps: Partial<ComboboxProps>;\n};\n\n/*\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      activeOption,\n      selectOption,\n      setValue,\n      setActiveOption,\n      setFocusVisible,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionsMatchingText,\n      getIndexOfId,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n  } = options;\n\n  const onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  // update value and active option based on input\n  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(ev);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n  });\n\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(ev, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && ev.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n      triggerFromProps?.onKeyDown?.(ev);\n      return;\n    }\n\n    defaultOnKeyDown?.(ev);\n  });\n\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","activeOption","selectOption","setValue","setActiveOption","setFocusVisible","multiselect","selectedOptions","clearSelection","getOptionsMatchingText","getIndexOfId","setOpen","freeform","defaultProps","onBlur","ev","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}

package/lib/components/Dropdown/useButtonTriggerSlot.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';
+import { useTriggerSlot } from '../../utils/useTriggerSlot';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+/*
+ * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
+ * with the semantics and event handlers needed for the Combobox and Dropdown components.
+ * The element type of the ref should always match the element type used in the trigger shorthand.
+ */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {
+    const { state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible }, defaultProps } = options;
+    // jump to matching option based on typing
+    const searchString = React.useRef('');
+    const [setKeyTimeout, clearKeyTimeout] = useTimeout();
+    const getNextMatchingOption = ()=>{
+        // first check for matches for the full searchString
+        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;
+        let matches = getOptionsMatchingText(matcher);
+        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;
+        // if the dropdown is already open and the searchstring is a single character,
+        // then look after the current activeOption for letters
+        // this is so slowly typing the same letter will cycle through matches
+        if (open && searchString.current.length === 1) {
+            startIndex++;
+        }
+        // if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
+        if (!matches.length) {
+            const letters = searchString.current.split('');
+            const allSameLetter = letters.length && letters.every((letter)=>letter === letters[0]);
+            // if the search is all the same letter, cycle through options starting with that letter
+            if (allSameLetter) {
+                startIndex++;
+                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;
+                matches = getOptionsMatchingText(matcher);
+            }
+        }
+        // if there is an active option and multiple matches,
+        // return first matching option after the current active option, looping back to the top
+        if (matches.length > 1 && activeOption) {
+            const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
+            return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
+        }
+        var _matches_;
+        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
+    };
+    const onTriggerKeyDown = (ev)=>{
+        // clear timeout, if it exists
+        clearKeyTimeout();
+        // if the key was a char key, update search string
+        if (getDropdownActionFromKey(ev) === 'Type') {
+            // update search string
+            searchString.current += ev.key.toLowerCase();
+            setKeyTimeout(()=>{
+                searchString.current = '';
+            }, 500);
+            // update state
+            !open && setOpen(ev, true);
+            const nextOption = getNextMatchingOption();
+            setActiveOption(nextOption);
+            setFocusVisible(true);
+        }
+    };
+    const trigger = useTriggerSlot(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'button'
+    });
+    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);
+    return trigger;
+}

package/lib/components/Dropdown/useButtonTriggerSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useButtonTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport { useTriggerSlot, UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { DropdownState } from './Dropdown.types';\n\ntype UsedDropdownState = UseTriggerSlotState & Pick<DropdownState, 'getOptionsMatchingText'>;\ntype UseButtonTriggerSlotOptions = {\n  state: UsedDropdownState;\n  defaultProps: unknown;\n};\n\n/*\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  const {\n    state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible },\n    defaultProps,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, { state: options.state, defaultProps, elementType: 'button' });\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","activeOption","setOpen","getOptionsMatchingText","getIndexOfId","setActiveOption","setFocusVisible","defaultProps","searchString","useRef","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","current","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","undefined","onTriggerKeyDown","ev","key","nextOption","trigger","elementType","onKeyDown"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAEvE,SAASC,cAAc,QAA6B,6BAA6B;AAEjF,SAASC,wBAAwB,QAAQ,iCAAiC;AAS1E;;;;CAIC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,YAAY,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAE,EAC9GC,YAAY,EACb,GAAGT;IAEJ,0CAA0C;IAC1C,MAAMU,eAAelB,MAAMmB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGpB;IAEzC,MAAMqB,wBAAwB;QAC5B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACR,aAAaS,OAAO,MAAM;QACjG,IAAIC,UAAUf,uBAAuBU;QACrC,IAAIM,aAAalB,eAAeG,aAAaH,aAAamB,EAAE,IAAI;QAEhE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAIpB,QAAQQ,aAAaS,OAAO,CAACI,MAAM,KAAK,GAAG;YAC7CF;QACF;QAEA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACnB,MAAMC,UAAUd,aAAaS,OAAO,CAACM,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAACC,CAAAA,SAAUA,WAAWJ,OAAO,CAAC,EAAE;YAErF,wFAAwF;YACxF,IAAIE,eAAe;gBACjBL;gBACAN,UAAU,CAACC,aAAuBA,WAAWC,WAAW,GAAGC,OAAO,CAACM,OAAO,CAAC,EAAE,MAAM;gBACnFJ,UAAUf,uBAAuBU;YACnC;QACF;QAEA,qDAAqD;QACrD,wFAAwF;QACxF,IAAIK,QAAQG,MAAM,GAAG,KAAKpB,cAAc;YACtC,MAAM0B,YAAYT,QAAQU,IAAI,CAACC,CAAAA,SAAUzB,aAAayB,OAAOT,EAAE,KAAKD;YACpE,OAAOQ,sBAAAA,uBAAAA,YAAaT,OAAO,CAAC,EAAE;QAChC;YAEOA;QAAP,OAAOA,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,YAAcY;IACvB;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BrB;QAEA,kDAAkD;QAClD,IAAIjB,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvBxB,aAAaS,OAAO,IAAIe,GAAGC,GAAG,CAAClB,WAAW;YAC1CL,cAAc;gBACZF,aAAaS,OAAO,GAAG;YACzB,GAAG;YAEH,eAAe;YACf,CAACjB,QAAQE,QAAQ8B,IAAI;YAErB,MAAME,aAAatB;YACnBP,gBAAgB6B;YAChB5B,gBAAgB;QAClB;IACF;IAEA,MAAM6B,UAAU1C,eAAeG,kBAAkBC,KAAK;QAAEE,OAAOD,QAAQC,KAAK;QAAEQ;QAAc6B,aAAa;IAAS;IAClHD,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT"}