@fluentui/react-combobox 9.5.34 → 9.5.36

package/lib-commonjs/components/Combobox/useCombobox.js

@@ -11,16 +11,14 @@ Object.defineProperty(exports, "useCombobox_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactfield = require("@fluentui/react-field");
-const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reacticons = require("@fluentui/react-icons");
 const _reactutilities = require("@fluentui/react-utilities");
-const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
 const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
 const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
-const _useTriggerListboxSlots = require("../../utils/useTriggerListboxSlots");
 const _Listbox = require("../Listbox/Listbox");
+const _useListboxSlot = require("../../utils/useListboxSlot");
+const _useInputTriggerSlot = require("./useInputTriggerSlot");
 const useCombobox_unstable = (props, ref)=>{
-    var _props_input;
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props, {
         supportsLabelFor: true,
@@ -31,9 +29,9 @@ const useCombobox_unstable = (props, ref)=>{
         ...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] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
-    const { disabled, freeform, inlinePopup, multiselect } = props;
+    const { disabled, freeform, inlinePopup } = props;
     const comboId = (0, _reactutilities.useId)('combobox-');
     const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
         props,
@@ -43,48 +41,11 @@ const useCombobox_unstable = (props, ref)=>{
             '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;
@@ -94,53 +55,27 @@ const useCombobox_unstable = (props, ref)=>{
         }
         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 = (0, _useListboxSlot.useListboxSlot)(props.listbox, comboboxPopupRef, {
+        state: baseState,
+        triggerRef,
+        defaultProps: {
+            children: props.children
         }
-    };
-    // resolve input and listbox slot props
-    let triggerSlot;
-    let listboxSlot;
-    triggerSlot = _reactutilities.slot.always(props.input, {
+    });
+    var _props_input;
+    const triggerSlot = (0, _useInputTriggerSlot.useInputTriggerSlot)((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, (0, _reactutilities.useMergedRefs)(triggerRef, ref), {
+        state: baseState,
+        freeform,
         defaultProps: {
-            ref: (0, _reactutilities.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 = (0, _reactutilities.mergeCallbacks)(triggerSlot.onChange, onTriggerChange);
-    triggerSlot.onBlur = (0, _reactutilities.mergeCallbacks)(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed
-    listboxSlot = open || hasFocus ? _reactutilities.slot.optional(props.listbox, {
-        renderByDefault: true,
-        defaultProps: {
-            children: props.children
-        },
-        elementType: _Listbox.Listbox
-    }) : undefined;
-    [triggerSlot, listboxSlot] = (0, _useTriggerListboxSlots.useTriggerListboxSlots)(props, baseState, ref, triggerSlot, listboxSlot);
-    const listboxRef = (0, _reactutilities.useMergedRefs)(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);
-    if (hideActiveDescendant) {
-        triggerSlot['aria-activedescendant'] = undefined;
-    }
-    if (listboxSlot) {
-        listboxSlot.ref = listboxRef;
-    }
     const rootSlot = _reactutilities.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'
@@ -155,7 +90,7 @@ const useCombobox_unstable = (props, ref)=>{
         },
         root: rootSlot,
         input: triggerSlot,
-        listbox: listboxSlot,
+        listbox: open ? listbox : undefined,
         expandIcon: _reactutilities.slot.optional(props.expandIcon, {
             renderByDefault: true,
             defaultProps: {
@@ -167,54 +102,15 @@ const useCombobox_unstable = (props, ref)=>{
         }),
         ...baseState
     };
-    state.root.ref = (0, _reactutilities.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 = (0, _reactutilities.useEventCallback)((ev)=>{
-        if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
-            baseState.setOpen(ev, true);
-        }
-        // clear activedescendant when moving the text insertion cursor
-        if (ev.key === _keyboardkeys.ArrowLeft || ev.key === _keyboardkeys.ArrowRight) {
-            setHideActiveDescendant(true);
-        } else {
-            setHideActiveDescendant(false);
-        }
-        // update typing state to true if the user is typing
-        const action = (0, _dropdownKeyActions.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 = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, ()=>{
-        // do not dismiss on blur when closing via clicking the icon
-        if (open) {
-            baseState.ignoreNextBlur.current = true;
-        }
-    }));
-    const onExpandIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconClick, (event)=>{
+    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
+    const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.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-commonjs/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCombobox.js"],"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 { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } 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';\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 */ export const useCombobox_unstable = (props, ref)=>{\n    var _props_input;\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\n    const { activeOption, clearSelection, getIndexOfId, getOptionsMatchingText, hasFocus, open, selectOption, selectedOptions, setActiveOption, setFocusVisible, setOpen, setValue, value } = baseState;\n    const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n    const { disabled, freeform, inlinePopup, multiselect } = props;\n    const comboId = useId('combobox-');\n    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    const rootRef = React.useRef(null);\n    const triggerRef = React.useRef(null);\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    // set active option and selection based on typing\n    const getOptionFromInput = (inputValue)=>{\n        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n        if (!searchString || searchString.length === 0) {\n            return;\n        }\n        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n        const matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    /* Handle typed input */ // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    const onTriggerBlur = (ev)=>{\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 === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n                baseState.selectOption(ev, activeOption);\n            }\n            // reset typed value when the input loses focus while collapsed, unless freeform is true\n            setValue(undefined);\n        }\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\n    // update value and active option based on input\n    const onTriggerChange = (ev)=>{\n        const inputValue = ev.target.value;\n        // update uncontrolled value\n        baseState.setValue(inputValue);\n        // handle updating active option based on input\n        const matchingOption = getOptionFromInput(inputValue);\n        setActiveOption(matchingOption);\n        setFocusVisible(true);\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    // resolve input and listbox slot props\n    let triggerSlot;\n    let listboxSlot;\n    triggerSlot = slot.always(props.input, {\n        defaultProps: {\n            ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),\n            type: 'text',\n            value: value !== null && value !== void 0 ? 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 = open || hasFocus ? slot.optional(props.listbox, {\n        renderByDefault: true,\n        defaultProps: {\n            children: props.children\n        },\n        elementType: Listbox\n    }) : undefined;\n    [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n    const listboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, comboboxPopupRef);\n    if (hideActiveDescendant) {\n        triggerSlot['aria-activedescendant'] = undefined;\n    }\n    if (listboxSlot) {\n        listboxSlot.ref = listboxRef;\n    }\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\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: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        ...baseState\n    };\n    state.root.ref = useMergedRefs(state.root.ref, rootRef);\n    /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;\n    state.input.onKeyDown = useEventCallback((ev)=>{\n        if (!open && getDropdownActionFromKey(ev) === 'Type') {\n            baseState.setOpen(ev, true);\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        // update typing state to true if the user is typing\n        const action = getDropdownActionFromKey(ev, {\n            open,\n            multiselect\n        });\n        if (action === 'Type') {\n            isTyping.current = true;\n        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n            isTyping.current = false;\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 === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);\n            return;\n        }\n        // if we're not allowing space to type, continue with default behavior\n        defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);\n    });\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(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    const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, (event)=>{\n        var _triggerRef_current;\n        // open and set focus\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n        // set focus visible=false, since this can only be done with the mouse/pointer\n        setFocusVisible(false);\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\n        state.expandIcon.onClick = onExpandIconClick;\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                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\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    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","_props_input","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","multiselect","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","rootRef","React","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","slot","always","input","defaultProps","useMergedRefs","type","elementType","resolvedPropsOnKeyDown","onKeyDown","onChange","mergeCallbacks","onBlur","optional","listbox","renderByDefault","children","Listbox","useTriggerListboxSlots","listboxRef","rootSlot","state","components","expandIcon","createElement","ChevronDownIcon","role","defaultOnTriggerKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["useCombobox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\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 */ export const useCombobox_unstable = (props, ref)=>{\n    // Merge props from surrounding <Field>, if any\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const baseState = useComboboxBaseState({\n        ...props,\n        editable: true\n    });\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    const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n        props,\n        primarySlotTagName: 'input',\n        excludedPropNames: [\n            'children',\n            'size'\n        ]\n    });\n    // reset any typed value when an option is selected\n    baseState.selectOption = (ev, option)=>{\n        setValue(undefined);\n        selectOption(ev, option);\n    };\n    baseState.setOpen = (ev, newState)=>{\n        if (disabled) {\n            return;\n        }\n        if (!newState && !freeform) {\n            setValue(undefined);\n        }\n        setOpen(ev, newState);\n    };\n    const triggerRef = React.useRef(null);\n    const listbox = useListboxSlot(props.listbox, comboboxPopupRef, {\n        state: baseState,\n        triggerRef,\n        defaultProps: {\n            children: props.children\n        }\n    });\n    var _props_input;\n    const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, ref), {\n        state: baseState,\n        freeform,\n        defaultProps: {\n            type: 'text',\n            value: value !== null && value !== void 0 ? value : '',\n            ...triggerNativeProps\n        }\n    });\n    const rootSlot = slot.always(props.root, {\n        defaultProps: {\n            'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,\n            ...rootNativeProps\n        },\n        elementType: 'div'\n    });\n    rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n    const state = {\n        components: {\n            root: 'div',\n            input: 'input',\n            expandIcon: 'span',\n            listbox: Listbox\n        },\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: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),\n                role: 'button'\n            },\n            elementType: 'span'\n        }),\n        ...baseState\n    };\n    /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};\n    const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, (event)=>{\n        var _triggerRef_current;\n        event.preventDefault();\n        state.setOpen(event, !state.open);\n        (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n    }));\n    if (state.expandIcon) {\n        state.expandIcon.onMouseDown = onExpandIconMouseDown;\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                var _state_expandIcon_id;\n                const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;\n                const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\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    return state;\n};\n"],"names":["useCombobox_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","baseState","useComboboxBaseState","editable","open","selectOption","setOpen","setValue","value","comboboxPopupRef","comboboxTargetRef","useComboboxPositioning","disabled","freeform","inlinePopup","comboId","useId","primary","triggerNativeProps","root","rootNativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","ev","option","undefined","newState","triggerRef","React","useRef","listbox","useListboxSlot","state","defaultProps","children","_props_input","triggerSlot","useInputTriggerSlot","input","useMergedRefs","type","rootSlot","slot","always","id","elementType","components","expandIcon","Listbox","optional","renderByDefault","createElement","ChevronDownIcon","role","onMouseDown","onIconMouseDown","onExpandIconMouseDown","useEventCallback","mergeCallbacks","event","_triggerRef_current","preventDefault","current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"mappings":"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"}

package/lib-commonjs/components/Combobox/useInputTriggerSlot.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useInputTriggerSlot", {
+    enumerable: true,
+    get: function() {
+        return useInputTriggerSlot;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _useTriggerSlot = require("../../utils/useTriggerSlot");
+const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
+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 = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'input'
+    });
+    trigger.onChange = (0, _reactutilities.mergeCallbacks)(trigger.onChange, onChange);
+    trigger.onBlur = (0, _reactutilities.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 = (0, _reactutilities.useEventCallback)((ev)=>{
+        if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
+            setOpen(ev, true);
+        }
+        // clear activedescendant when moving the text insertion cursor
+        if (ev.key === _keyboardkeys.ArrowLeft || ev.key === _keyboardkeys.ArrowRight) {
+            setHideActiveDescendant(true);
+        } else {
+            setHideActiveDescendant(false);
+        }
+        // update typing state to true if the user is typing
+        const action = (0, _dropdownKeyActions.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-commonjs/components/Combobox/useInputTriggerSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useInputTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\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 */ export function useInputTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, value, activeOption, selectOption, setValue, setActiveOption, setFocusVisible, multiselect, selectedOptions, clearSelection, getOptionsMatchingText, getIndexOfId, setOpen }, freeform, defaultProps } = options;\n    const onBlur = (ev)=>{\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 === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {\n                selectOption(ev, activeOption);\n            }\n            // reset typed value when the input loses focus while collapsed, unless freeform is true\n            setValue(undefined);\n        }\n    };\n    const getOptionFromInput = (inputValue)=>{\n        const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();\n        if (!searchString || searchString.length === 0) {\n            return;\n        }\n        const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;\n        const matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    // update value and active option based on input\n    const onChange = (ev)=>{\n        const inputValue = ev.target.value;\n        // update uncontrolled value\n        setValue(inputValue);\n        // handle updating active option based on input\n        const matchingOption = getOptionFromInput(inputValue);\n        setActiveOption(matchingOption);\n        setFocusVisible(true);\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    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'input'\n    });\n    trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n    trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\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   * Freeform combobox should not select\n   */ const defaultOnKeyDown = trigger.onKeyDown;\n    const onKeyDown = useEventCallback((ev)=>{\n        if (!open && getDropdownActionFromKey(ev) === 'Type') {\n            setOpen(ev, true);\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        // update typing state to true if the user is typing\n        const action = getDropdownActionFromKey(ev, {\n            open,\n            multiselect\n        });\n        if (action === 'Type') {\n            isTyping.current = true;\n        } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {\n            isTyping.current = false;\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            var _triggerFromProps_onKeyDown;\n            triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, ev);\n            return;\n        }\n        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(ev);\n    });\n    trigger.onKeyDown = onKeyDown;\n    if (hideActiveDescendant) {\n        trigger['aria-activedescendant'] = undefined;\n    }\n    return trigger;\n}\n"],"names":["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","_matches_","onChange","target","matchingOption","trigger","useTriggerSlot","elementType","mergeCallbacks","hideActiveDescendant","setHideActiveDescendant","React","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","useEventCallback","getDropdownActionFromKey","key","ArrowLeft","ArrowRight","action","current","_triggerFromProps_onKeyDown","call"],"mappings":";;;;+BASoBA;;;eAAAA;;;;iEATG;gCAC0B;8BACX;gCACP;oCACU;AAK9B,SAASA,oBAAoBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IAClE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEC,WAAW,EAAEC,eAAe,EAAEC,cAAc,EAAEC,sBAAsB,EAAEC,YAAY,EAAEC,OAAO,EAAE,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGhB;IAChO,MAAMiB,SAAS,CAACC;QACZ,2DAA2D;QAC3D,IAAI,CAAChB,QAAQ,CAACa,UAAU;YACpB,qDAAqD;YACrD,IAAIZ,SAASC,gBAAgBD,MAAMgB,IAAI,GAAGC,WAAW,OAAQhB,CAAAA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaiB,IAAI,CAACD,WAAW,EAAC,GAAI;gBACvJf,aAAaa,IAAId;YACrB;YACA,wFAAwF;YACxFE,SAASgB;QACb;IACJ;IACA,MAAMC,qBAAqB,CAACC;QACxB,MAAMC,eAAeD,eAAe,QAAQA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWL,IAAI,GAAGC,WAAW;QAC1G,IAAI,CAACK,gBAAgBA,aAAaC,MAAM,KAAK,GAAG;YAC5C;QACJ;QACA,MAAMC,UAAU,CAACC,aAAaA,WAAWR,WAAW,GAAGS,OAAO,CAACJ,kBAAkB;QACjF,MAAMK,UAAUlB,uBAAuBe;QACvC,wFAAwF;QACxF,IAAIG,QAAQJ,MAAM,GAAG,KAAKtB,cAAc;YACpC,MAAM2B,aAAalB,aAAaT,aAAa4B,EAAE;YAC/C,MAAMC,YAAYH,QAAQI,IAAI,CAAC,CAACC,SAAStB,aAAasB,OAAOH,EAAE,KAAKD;YACpE,OAAOE,cAAc,QAAQA,cAAc,KAAK,IAAIA,YAAYH,OAAO,CAAC,EAAE;QAC9E;QACA,IAAIM;QACJ,OAAO,AAACA,CAAAA,YAAYN,OAAO,CAAC,EAAE,AAAD,MAAO,QAAQM,cAAc,KAAK,IAAIA,YAAYd;IACnF;IACA,gDAAgD;IAChD,MAAMe,WAAW,CAACnB;QACd,MAAMM,aAAaN,GAAGoB,MAAM,CAACnC,KAAK;QAClC,4BAA4B;QAC5BG,SAASkB;QACT,+CAA+C;QAC/C,MAAMe,iBAAiBhB,mBAAmBC;QAC1CjB,gBAAgBgC;QAChB/B,gBAAgB;QAChB,uFAAuF;QACvF,IAAI,CAACC,eAAeC,gBAAgBgB,MAAM,KAAK,KAAMF,CAAAA,WAAWE,MAAM,GAAG,KAAK,CAACa,cAAa,GAAI;YAC5F5B,eAAeO;QACnB;IACJ;IACA,MAAMsB,UAAUC,IAAAA,8BAAc,EAAC3C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBe;QACA0B,aAAa;IACjB;IACAF,QAAQH,QAAQ,GAAGM,IAAAA,8BAAc,EAACH,QAAQH,QAAQ,EAAEA;IACpDG,QAAQvB,MAAM,GAAG0B,IAAAA,8BAAc,EAACH,QAAQvB,MAAM,EAAEA;IAChD,uGAAuG;IACvG,0GAA0G;IAC1G,kFAAkF;IAClF,MAAM,CAAC2B,sBAAsBC,wBAAwB,GAAGC,OAAMC,QAAQ,CAAC;IACvE,wGAAwG;IACxG,+FAA+F;IAC/F,MAAMC,WAAWF,OAAMG,MAAM,CAAC;IAC9B;;GAED,GAAG,MAAMC,mBAAmBV,QAAQW,SAAS;IAC5C,MAAMA,YAAYC,IAAAA,gCAAgB,EAAC,CAAClC;QAChC,IAAI,CAAChB,QAAQmD,IAAAA,4CAAwB,EAACnC,QAAQ,QAAQ;YAClDJ,QAAQI,IAAI;QAChB;QACA,+DAA+D;QAC/D,IAAIA,GAAGoC,GAAG,KAAKC,uBAAS,IAAIrC,GAAGoC,GAAG,KAAKE,wBAAU,EAAE;YAC/CX,wBAAwB;QAC5B,OAAO;YACHA,wBAAwB;QAC5B;QACA,oDAAoD;QACpD,MAAMY,SAASJ,IAAAA,4CAAwB,EAACnC,IAAI;YACxChB;YACAO;QACJ;QACA,IAAIgD,WAAW,QAAQ;YACnBT,SAASU,OAAO,GAAG;QACvB,OAAO,IAAID,WAAW,UAAUvC,GAAGoC,GAAG,KAAK,OAAOG,WAAW,UAAUA,WAAW,cAAcA,WAAW,WAAWA,WAAW,UAAUA,WAAW,YAAYA,WAAW,YAAY;YACrLT,SAASU,OAAO,GAAG;QACvB;QACA,wGAAwG;QACxG,IAAI3C,YAAaiC,CAAAA,SAASU,OAAO,IAAI,CAACxD,IAAG,KAAMgB,GAAGoC,GAAG,KAAK,KAAK;YAC3D,IAAIK;YACJ7D,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAI,AAAC6D,CAAAA,8BAA8B7D,iBAAiBqD,SAAS,AAAD,MAAO,QAAQQ,gCAAgC,KAAK,IAAI,KAAK,IAAIA,4BAA4BC,IAAI,CAAC9D,kBAAkBoB;YAChP;QACJ;QACAgC,qBAAqB,QAAQA,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBhC;IACzF;IACAsB,QAAQW,SAAS,GAAGA;IACpB,IAAIP,sBAAsB;QACtBJ,OAAO,CAAC,wBAAwB,GAAGlB;IACvC;IACA,OAAOkB;AACX"}

package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useButtonTriggerSlot", {
+    enumerable: true,
+    get: function() {
+        return useButtonTriggerSlot;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _useTriggerSlot = require("../../utils/useTriggerSlot");
+const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
+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] = (0, _reactutilities.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 ((0, _dropdownKeyActions.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 = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
+        state: options.state,
+        defaultProps,
+        elementType: 'button'
+    });
+    trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)(onTriggerKeyDown, trigger.onKeyDown);
+    return trigger;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useButtonTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\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 */ export function useButtonTriggerSlot(triggerFromProps, ref, options) {\n    const { state: { open, activeOption, setOpen, getOptionsMatchingText, getIndexOfId, setActiveOption, setFocusVisible }, defaultProps } = options;\n    // jump to matching option based on typing\n    const searchString = React.useRef('');\n    const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n    const getNextMatchingOption = ()=>{\n        // first check for matches for the full searchString\n        let matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString.current) === 0;\n        let matches = getOptionsMatchingText(matcher);\n        let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\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        // 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            // if the search is all the same letter, cycle through options starting with that letter\n            if (allSameLetter) {\n                startIndex++;\n                matcher = (optionText)=>optionText.toLowerCase().indexOf(letters[0]) === 0;\n                matches = getOptionsMatchingText(matcher);\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 !== null && nextMatch !== void 0 ? nextMatch : matches[0];\n        }\n        var _matches_;\n        return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;\n    };\n    const onTriggerKeyDown = (ev)=>{\n        // clear timeout, if it exists\n        clearKeyTimeout();\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            // update state\n            !open && setOpen(ev, true);\n            const nextOption = getNextMatchingOption();\n            setActiveOption(nextOption);\n            setFocusVisible(true);\n        }\n    };\n    const trigger = useTriggerSlot(triggerFromProps, ref, {\n        state: options.state,\n        defaultProps,\n        elementType: 'button'\n    });\n    trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n    return trigger;\n}\n"],"names":["useButtonTriggerSlot","triggerFromProps","ref","options","state","open","activeOption","setOpen","getOptionsMatchingText","getIndexOfId","setActiveOption","setFocusVisible","defaultProps","searchString","React","useRef","setKeyTimeout","clearKeyTimeout","useTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","current","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","undefined","onTriggerKeyDown","ev","getDropdownActionFromKey","key","nextOption","trigger","useTriggerSlot","elementType","onKeyDown","mergeCallbacks"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;gCACoB;gCACZ;oCACU;AAK9B,SAASA,qBAAqBC,gBAAgB,EAAEC,GAAG,EAAEC,OAAO;IACnE,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,YAAY,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAE,EAAEC,YAAY,EAAE,GAAGT;IACzI,0CAA0C;IAC1C,MAAMU,eAAeC,OAAMC,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGC,IAAAA,0BAAU;IACnD,MAAMC,wBAAwB;QAC1B,oDAAoD;QACpD,IAAIC,UAAU,CAACC,aAAaA,WAAWC,WAAW,GAAGC,OAAO,CAACV,aAAaW,OAAO,MAAM;QACvF,IAAIC,UAAUjB,uBAAuBY;QACrC,IAAIM,aAAapB,eAAeG,aAAaH,aAAaqB,EAAE,IAAI;QAChE,8EAA8E;QAC9E,uDAAuD;QACvD,sEAAsE;QACtE,IAAItB,QAAQQ,aAAaW,OAAO,CAACI,MAAM,KAAK,GAAG;YAC3CF;QACJ;QACA,yFAAyF;QACzF,IAAI,CAACD,QAAQG,MAAM,EAAE;YACjB,MAAMC,UAAUhB,aAAaW,OAAO,CAACM,KAAK,CAAC;YAC3C,MAAMC,gBAAgBF,QAAQD,MAAM,IAAIC,QAAQG,KAAK,CAAC,CAACC,SAASA,WAAWJ,OAAO,CAAC,EAAE;YACrF,wFAAwF;YACxF,IAAIE,eAAe;gBACfL;gBACAN,UAAU,CAACC,aAAaA,WAAWC,WAAW,GAAGC,OAAO,CAACM,OAAO,CAAC,EAAE,MAAM;gBACzEJ,UAAUjB,uBAAuBY;YACrC;QACJ;QACA,qDAAqD;QACrD,wFAAwF;QACxF,IAAIK,QAAQG,MAAM,GAAG,KAAKtB,cAAc;YACpC,MAAM4B,YAAYT,QAAQU,IAAI,CAAC,CAACC,SAAS3B,aAAa2B,OAAOT,EAAE,KAAKD;YACpE,OAAOQ,cAAc,QAAQA,cAAc,KAAK,IAAIA,YAAYT,OAAO,CAAC,EAAE;QAC9E;QACA,IAAIY;QACJ,OAAO,AAACA,CAAAA,YAAYZ,OAAO,CAAC,EAAE,AAAD,MAAO,QAAQY,cAAc,KAAK,IAAIA,YAAYC;IACnF;IACA,MAAMC,mBAAmB,CAACC;QACtB,8BAA8B;QAC9BvB;QACA,kDAAkD;QAClD,IAAIwB,IAAAA,4CAAwB,EAACD,QAAQ,QAAQ;YACzC,uBAAuB;YACvB3B,aAAaW,OAAO,IAAIgB,GAAGE,GAAG,CAACpB,WAAW;YAC1CN,cAAc;gBACVH,aAAaW,OAAO,GAAG;YAC3B,GAAG;YACH,eAAe;YACf,CAACnB,QAAQE,QAAQiC,IAAI;YACrB,MAAMG,aAAaxB;YACnBT,gBAAgBiC;YAChBhC,gBAAgB;QACpB;IACJ;IACA,MAAMiC,UAAUC,IAAAA,8BAAc,EAAC5C,kBAAkBC,KAAK;QAClDE,OAAOD,QAAQC,KAAK;QACpBQ;QACAkC,aAAa;IACjB;IACAF,QAAQG,SAAS,GAAGC,IAAAA,8BAAc,EAACT,kBAAkBK,QAAQG,SAAS;IACtE,OAAOH;AACX"}