@fluentui/react-combobox 9.7.5 → 9.9.0

package/lib/utils/dropdownKeyActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n\n/**\n * Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n  switch (action) {\n    case 'Next':\n      return Math.min(maxIndex, currentIndex + 1);\n      break;\n    case 'Previous':\n      return Math.max(0, currentIndex - 1);\n    case 'First':\n      return 0;\n    case 'Last':\n      return maxIndex;\n    case 'PageDown':\n      return Math.min(maxIndex, currentIndex + 10);\n    case 'PageUp':\n      return Math.max(0, currentIndex - 10);\n    default:\n      return currentIndex;\n  }\n}\n"],"names":["keys","React","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab","getIndexFromAction","action","currentIndex","maxIndex","Math","min","max"],"mappings":"AAAA,YAAYA,UAAU,0BAA0B;AAChD,YAAYC,WAAW,QAAQ;AA0B/B;;CAEC,GACD,OAAO,SAASC,yBACdC,CAAsC,EACtCC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,OAAO,IAAI,EAAEC,cAAc,KAAK,EAAE,GAAGF;IAC7C,MAAMG,OAAOJ,EAAEK,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGR;IAE1C,8CAA8C;IAC9C,IAAIK,IAAII,MAAM,KAAK,KAAKL,SAASP,KAAKa,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,CAACN,MAAM;QACT,IAAIE,SAASP,KAAKc,SAAS,IAAIP,SAASP,KAAKe,OAAO,IAAIR,SAASP,KAAKgB,KAAK,IAAIT,SAASP,KAAKa,KAAK,EAAE;YAClG,OAAO;QACT;QAEA,8EAA8E;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAI,AAACN,SAASP,KAAKe,OAAO,IAAIN,UAAWF,SAASP,KAAKgB,KAAK,IAAK,CAACV,eAAeC,SAASP,KAAKa,KAAK,EAAG;QACrG,OAAO;IACT;IACA,IAAIP,eAAeC,SAASP,KAAKa,KAAK,EAAE;QACtC,OAAO;IACT;IACA,IAAIN,SAASP,KAAKiB,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIV,SAASP,KAAKc,SAAS,EAAE;QAC3B,OAAO;IACT;IACA,IAAIP,SAASP,KAAKe,OAAO,EAAE;QACzB,OAAO;IACT;IACA,IAAIR,SAASP,KAAKkB,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIX,SAASP,KAAKmB,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIZ,SAASP,KAAKoB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAIb,SAASP,KAAKqB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAId,SAASP,KAAKsB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,mBAAmBC,MAAuB,EAAEC,YAAoB,EAAEC,QAAgB;IAChG,OAAQF;QACN,KAAK;YACH,OAAOG,KAAKC,GAAG,CAACF,UAAUD,eAAe;YACzC;QACF,KAAK;YACH,OAAOE,KAAKE,GAAG,CAAC,GAAGJ,eAAe;QACpC,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAOC;QACT,KAAK;YACH,OAAOC,KAAKC,GAAG,CAACF,UAAUD,eAAe;QAC3C,KAAK;YACH,OAAOE,KAAKE,GAAG,CAAC,GAAGJ,eAAe;QACpC;YACE,OAAOA;IACX;AACF"}
+{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n"],"names":["keys","React","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab"],"mappings":"AAAA,YAAYA,UAAU,0BAA0B;AAChD,YAAYC,WAAW,QAAQ;AA0B/B;;CAEC,GACD,OAAO,SAASC,yBACdC,CAAsC,EACtCC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,OAAO,IAAI,EAAEC,cAAc,KAAK,EAAE,GAAGF;IAC7C,MAAMG,OAAOJ,EAAEK,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGR;IAE1C,8CAA8C;IAC9C,IAAIK,IAAII,MAAM,KAAK,KAAKL,SAASP,KAAKa,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,CAACN,MAAM;QACT,IAAIE,SAASP,KAAKc,SAAS,IAAIP,SAASP,KAAKe,OAAO,IAAIR,SAASP,KAAKgB,KAAK,IAAIT,SAASP,KAAKa,KAAK,EAAE;YAClG,OAAO;QACT;QAEA,8EAA8E;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAI,AAACN,SAASP,KAAKe,OAAO,IAAIN,UAAWF,SAASP,KAAKgB,KAAK,IAAK,CAACV,eAAeC,SAASP,KAAKa,KAAK,EAAG;QACrG,OAAO;IACT;IACA,IAAIP,eAAeC,SAASP,KAAKa,KAAK,EAAE;QACtC,OAAO;IACT;IACA,IAAIN,SAASP,KAAKiB,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIV,SAASP,KAAKc,SAAS,EAAE;QAC3B,OAAO;IACT;IACA,IAAIP,SAASP,KAAKe,OAAO,EAAE;QACzB,OAAO;IACT;IACA,IAAIR,SAASP,KAAKkB,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIX,SAASP,KAAKmB,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIZ,SAASP,KAAKoB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAIb,SAASP,KAAKqB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAId,SAASP,KAAKsB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}

package/lib/utils/useComboboxBaseState.js

@@ -1,14 +1,40 @@
 import * as React from 'react';
-import { useControllableState, useFirstMount } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';
 import { useOptionCollection } from '../utils/useOptionCollection';
 import { useSelection } from '../utils/useSelection';
 /**
  * State shared between Combobox and Dropdown components
  */ export const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium' } = props;
+    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController } = props;
     const optionCollection = useOptionCollection();
-    const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;
-    const [activeOption, setActiveOption] = React.useState();
+    const { getOptionsMatchingValue } = optionCollection;
+    const { getOptionById } = optionCollection;
+    const getActiveOption = React.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : undefined;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
+    // Keeping some kind of backwards compatible functionality here
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const UNSAFE_activeOption = getActiveOption();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const UNSAFE_setActiveOption = React.useCallback((option)=>{
+        let nextOption = undefined;
+        if (typeof option === 'function') {
+            const activeOption = getActiveOption();
+            nextOption = option(activeOption);
+        }
+        if (nextOption) {
+            activeDescendantController.focus(nextOption.id);
+        } else {
+            activeDescendantController.blur();
+        }
+    }, [
+        activeDescendantController,
+        getActiveOption
+    ]);
     // track whether keyboard focus outline should be shown
     // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
     const [focusVisible, setFocusVisible] = React.useState(false);
@@ -68,45 +94,62 @@ import { useSelection } from '../utils/useSelection';
         onOpenChange,
         setOpenState
     ]);
-    // update active option based on change in open state or children
+    // update active option based on change in open state
     React.useEffect(()=>{
-        if (open && !activeOption) {
+        if (open) {
             // if it is single-select and there is a selected option, start at the selected option
             if (!multiselect && selectedOptions.length > 0) {
                 const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();
-                selectedOption && setActiveOption(selectedOption);
-            } else {
-                setActiveOption(getOptionAtIndex(0));
+                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
+                    activeDescendantController.focus(selectedOption.id);
+                }
             }
-        } else if (!open) {
-            // reset the active option when closing
-            setActiveOption(undefined);
+        } else {
+            activeDescendantController.blur();
         }
     // this should only be run in response to changes in the open state or children
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         open,
-        children
+        activeDescendantController
+    ]);
+    // Fallback focus when children are updated in an open popover results in no item being focused
+    React.useEffect(()=>{
+        if (open) {
+            if (!activeDescendantController.active()) {
+                activeDescendantController.first();
+            }
+        }
+    // this should only be run in response to changes in the open state or children
+    }, [
+        open,
+        children,
+        activeDescendantController
     ]);
     return {
         ...optionCollection,
         ...selectionState,
-        activeOption,
+        activeOption: UNSAFE_activeOption,
         appearance,
         clearable,
         focusVisible,
-        hasFocus,
         ignoreNextBlur,
         inlinePopup,
         mountNode,
         open,
-        setActiveOption,
+        hasFocus,
+        setActiveOption: UNSAFE_setActiveOption,
         setFocusVisible,
         setHasFocus,
         setOpen,
         setValue,
         size,
         value,
-        multiselect
+        multiselect,
+        onOptionClick: useEventCallback((e)=>{
+            if (!multiselect) {
+                setOpen(e, false);
+            }
+        })
     };
 };

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n  };\n};\n"],"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"mappings":"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"}
+{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open) {\n      if (!activeDescendantController.active()) {\n        activeDescendantController.first();\n      }\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, activeDescendantController]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n  };\n};\n"],"names":["React","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","setActiveOption","onOptionClick","e"],"mappings":"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"}

package/lib/utils/useListboxSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  mergeCallbacks,\n  useId,\n  useEventCallback,\n  slot,\n  isResolvedShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseTriggerSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n  state: ComboboxBaseState;\n  triggerRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n  defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @returns  listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n  listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n  ref: React.Ref<HTMLDivElement>,\n  options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n  const {\n    state: { multiselect },\n    triggerRef,\n    defaultProps,\n  } = options;\n\n  const listboxId = useId(\n    'fluent-listbox',\n    isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n  );\n\n  const listboxSlot = slot.optional(listboxSlotFromProp, {\n    renderByDefault: true,\n    elementType: Listbox,\n    defaultProps: {\n      id: listboxId,\n      multiselect,\n      tabIndex: undefined,\n      ...defaultProps,\n    },\n  });\n\n  /**\n   * Clicking on the listbox should never blur the trigger\n   * in a combobox\n   */\n  const onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, listboxSlot?.onMouseDown),\n  );\n\n  const onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      triggerRef.current?.focus();\n    }, listboxSlot?.onClick),\n  );\n\n  const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n    listboxSlot.onMouseDown = onMouseDown;\n    listboxSlot.onClick = onClick;\n  }\n\n  return listboxSlot;\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAWrC;;CAEC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMS,cAAcrB,iBAClBF,eAAe,CAACwB;QACdA,MAAMC,cAAc;IACtB,GAAGP,wBAAAA,kCAAAA,YAAaK,WAAW;IAG7B,MAAMG,UAAUxB,iBACdF,eAAe,CAACwB;YAEdX;QADAW,MAAMC,cAAc;SACpBZ,sBAAAA,WAAWc,OAAO,cAAlBd,0CAAAA,oBAAoBe,KAAK;IAC3B,GAAGV,wBAAAA,kCAAAA,YAAaQ,OAAO;IAGzB,MAAMG,aAAaxB,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGoB;QAClBX,YAAYK,WAAW,GAAGA;QAC1BL,YAAYQ,OAAO,GAAGA;IACxB;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  mergeCallbacks,\n  useId,\n  useEventCallback,\n  slot,\n  isResolvedShorthand,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n  state: UseListboxSlotState;\n  triggerRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n  defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @returns  listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n  listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n  ref: React.Ref<HTMLDivElement>,\n  options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n  const {\n    state: { multiselect },\n    triggerRef,\n    defaultProps,\n  } = options;\n\n  const listboxId = useId(\n    'fluent-listbox',\n    isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n  );\n\n  const listboxSlot = slot.optional(listboxSlotFromProp, {\n    renderByDefault: true,\n    elementType: Listbox,\n    defaultProps: {\n      id: listboxId,\n      multiselect,\n      tabIndex: undefined,\n      ...defaultProps,\n    },\n  });\n\n  /**\n   * Clicking on the listbox should never blur the trigger\n   * in a combobox\n   */\n  const onMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n    }, listboxSlot?.onMouseDown),\n  );\n\n  const onClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      triggerRef.current?.focus();\n    }, listboxSlot?.onClick),\n  );\n\n  const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n  if (listboxSlot) {\n    listboxSlot.ref = listboxRef;\n    listboxSlot.onMouseDown = onMouseDown;\n    listboxSlot.onClick = onClick;\n  }\n\n  return listboxSlot;\n}\n"],"names":["React","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAWrC;;CAEC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMS,cAAcrB,iBAClBF,eAAe,CAACwB;QACdA,MAAMC,cAAc;IACtB,GAAGP,wBAAAA,kCAAAA,YAAaK,WAAW;IAG7B,MAAMG,UAAUxB,iBACdF,eAAe,CAACwB;YAEdX;QADAW,MAAMC,cAAc;SACpBZ,sBAAAA,WAAWc,OAAO,cAAlBd,0CAAAA,oBAAoBe,KAAK;IAC3B,GAAGV,wBAAAA,kCAAAA,YAAaQ,OAAO;IAGzB,MAAMG,aAAaxB,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGoB;QAClBX,YAAYK,WAAW,GAAGA;QAC1BL,YAAYQ,OAAO,GAAGA;IACxB;IAEA,OAAOR;AACT"}

package/lib/utils/useOptionCollection.js

@@ -2,23 +2,26 @@ import * as React from 'react';
 /**
  * A hook for managing a collection of child Options
  */ export const useOptionCollection = ()=>{
-    const nodes = React.useRef([]);
+    const optionsById = React.useRef(new Map());
     const collectionAPI = React.useMemo(()=>{
-        const getCount = ()=>nodes.current.length;
-        const getOptionAtIndex = (index)=>{
-            var _nodes_current_index;
-            return (_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option;
-        };
-        const getIndexOfId = (id)=>nodes.current.findIndex((node)=>node.option.id === id);
+        const getCount = ()=>optionsById.current.size;
+        // index searches are no longer used
+        const getOptionAtIndex = ()=>undefined;
+        const getIndexOfId = ()=>-1;
         const getOptionById = (id)=>{
-            const item = nodes.current.find((node)=>node.option.id === id);
-            return item === null || item === void 0 ? void 0 : item.option;
+            return optionsById.current.get(id);
         };
         const getOptionsMatchingText = (matcher)=>{
-            return nodes.current.filter((node)=>matcher(node.option.text)).map((node)=>node.option);
+            return Array.from(optionsById.current.values()).filter(({ text })=>matcher(text));
         };
         const getOptionsMatchingValue = (matcher)=>{
-            return nodes.current.filter((node)=>matcher(node.option.value)).map((node)=>node.option);
+            const matches = [];
+            for (const option of optionsById.current.values()){
+                if (matcher(option.value)) {
+                    matches.push(option);
+                }
+            }
+            return matches;
         };
         return {
             getCount,
@@ -29,43 +32,13 @@ import * as React from 'react';
             getOptionsMatchingValue
         };
     }, []);
-    const registerOption = React.useCallback((option, element)=>{
-        var _nodes_current_index;
-        const index = nodes.current.findIndex((node)=>{
-            if (!node.element || !element) {
-                return false;
-            }
-            if (node.option.id === option.id) {
-                return true;
-            }
-            // use the DOM method compareDocumentPosition to order the current node against registered nodes
-            // eslint-disable-next-line no-bitwise
-            return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
-        });
-        // do not register the option if it already exists
-        if (((_nodes_current_index = nodes.current[index]) === null || _nodes_current_index === void 0 ? void 0 : _nodes_current_index.option.id) !== option.id) {
-            const newItem = {
-                element,
-                option
-            };
-            // If an index is not found we will push the element to the end.
-            if (index === -1) {
-                nodes.current = [
-                    ...nodes.current,
-                    newItem
-                ];
-            } else {
-                nodes.current.splice(index, 0, newItem);
-            }
-        }
-        // return the unregister function
-        return ()=>{
-            nodes.current = nodes.current.filter((node)=>node.option.id !== option.id);
-        };
+    const registerOption = React.useCallback((option)=>{
+        optionsById.current.set(option.id, option);
+        return ()=>optionsById.current.delete(option.id);
     }, []);
     return {
         ...collectionAPI,
-        options: nodes.current.map((node)=>node.option),
+        options: Array.from(optionsById.current.values()),
         registerOption
     };
 };

package/lib/utils/useOptionCollection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB;IACjC,MAAMC,QAAQF,MAAMG,MAAM,CAAkD,EAAE;IAE9E,MAAMC,gBAAgBJ,MAAMK,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAMJ,MAAMK,OAAO,CAACC,MAAM;QAC3C,MAAMC,mBAAmB,CAACC;gBAAkBR;oBAAAA,uBAAAA,MAAMK,OAAO,CAACG,MAAM,cAApBR,2CAAAA,qBAAsBS,MAAM;;QACxE,MAAMC,eAAe,CAACC,KAAeX,MAAMK,OAAO,CAACO,SAAS,CAACC,CAAAA,OAAQA,KAAKJ,MAAM,CAACE,EAAE,KAAKA;QACxF,MAAMG,gBAAgB,CAACH;YACrB,MAAMI,OAAOf,MAAMK,OAAO,CAACW,IAAI,CAACH,CAAAA,OAAQA,KAAKJ,MAAM,CAACE,EAAE,KAAKA;YAC3D,OAAOI,iBAAAA,2BAAAA,KAAMN,MAAM;QACrB;QACA,MAAMQ,yBAAyB,CAACC;YAC9B,OAAOlB,MAAMK,OAAO,CAACc,MAAM,CAACN,CAAAA,OAAQK,QAAQL,KAAKJ,MAAM,CAACW,IAAI,GAAGC,GAAG,CAACR,CAAAA,OAAQA,KAAKJ,MAAM;QACxF;QACA,MAAMa,0BAA0B,CAACJ;YAC/B,OAAOlB,MAAMK,OAAO,CAACc,MAAM,CAACN,CAAAA,OAAQK,QAAQL,KAAKJ,MAAM,CAACc,KAAK,GAAGF,GAAG,CAACR,CAAAA,OAAQA,KAAKJ,MAAM;QACzF;QAEA,OAAO;YACLL;YACAG;YACAG;YACAI;YACAG;YACAK;QACF;IACF,GAAG,EAAE;IAEL,MAAME,iBAAiB1B,MAAM2B,WAAW,CAAC,CAAChB,QAAqBiB;YAgBzD1B;QAfJ,MAAMQ,QAAQR,MAAMK,OAAO,CAACO,SAAS,CAACC,CAAAA;YACpC,IAAI,CAACA,KAAKa,OAAO,IAAI,CAACA,SAAS;gBAC7B,OAAO;YACT;YAEA,IAAIb,KAAKJ,MAAM,CAACE,EAAE,KAAKF,OAAOE,EAAE,EAAE;gBAChC,OAAO;YACT;YAEA,gGAAgG;YAChG,sCAAsC;YACtC,OAAOE,KAAKa,OAAO,CAACC,uBAAuB,CAACD,WAAWE,KAAKC,2BAA2B;QACzF;QAEA,kDAAkD;QAClD,IAAI7B,EAAAA,uBAAAA,MAAMK,OAAO,CAACG,MAAM,cAApBR,2CAAAA,qBAAsBS,MAAM,CAACE,EAAE,MAAKF,OAAOE,EAAE,EAAE;YACjD,MAAMmB,UAAU;gBACdJ;gBACAjB;YACF;YAEA,gEAAgE;YAChE,IAAID,UAAU,CAAC,GAAG;gBAChBR,MAAMK,OAAO,GAAG;uBAAIL,MAAMK,OAAO;oBAAEyB;iBAAQ;YAC7C,OAAO;gBACL9B,MAAMK,OAAO,CAAC0B,MAAM,CAACvB,OAAO,GAAGsB;YACjC;QACF;QAEA,iCAAiC;QACjC,OAAO;YACL9B,MAAMK,OAAO,GAAGL,MAAMK,OAAO,CAACc,MAAM,CAACN,CAAAA,OAAQA,KAAKJ,MAAM,CAACE,EAAE,KAAKF,OAAOE,EAAE;QAC3E;IACF,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB8B,SAAShC,MAAMK,OAAO,CAACgB,GAAG,CAACR,CAAAA,OAAQA,KAAKJ,MAAM;QAC9Ce;IACF;AACF,EAAE"}
+{"version":3,"sources":["useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const optionsById = React.useRef(new Map<string, OptionValue>());\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => optionsById.current.size;\n\n    // index searches are no longer used\n    const getOptionAtIndex = () => undefined;\n    const getIndexOfId = () => -1;\n\n    const getOptionById = (id: string) => {\n      return optionsById.current.get(id);\n    };\n    const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n      return Array.from(optionsById.current.values()).filter(({ text }) => matcher(text));\n    };\n\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      const matches: OptionValue[] = [];\n      for (const option of optionsById.current.values()) {\n        if (matcher(option.value)) {\n          matches.push(option);\n        }\n      }\n\n      return matches;\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue) => {\n    optionsById.current.set(option.id, option);\n\n    return () => optionsById.current.delete(option.id);\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: Array.from(optionsById.current.values()),\n    registerOption,\n  };\n};\n"],"names":["React","useOptionCollection","optionsById","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionAtIndex","undefined","getIndexOfId","getOptionById","id","get","getOptionsMatchingText","matcher","Array","from","values","filter","text","getOptionsMatchingValue","matches","option","value","push","registerOption","useCallback","set","delete","options"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB;IACjC,MAAMC,cAAcF,MAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,MAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOZ,YAAYM,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKL,QAAQK;QAC/E;QAEA,MAAMC,0BAA0B,CAACN;YAC/B,MAAMO,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUvB,YAAYM,OAAO,CAACY,MAAM,GAAI;gBACjD,IAAIH,QAAQQ,OAAOC,KAAK,GAAG;oBACzBF,QAAQG,IAAI,CAACF;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLjB;YACAG;YACAE;YACAC;YACAG;YACAO;QACF;IACF,GAAG,EAAE;IAEL,MAAMK,iBAAiB5B,MAAM6B,WAAW,CAAC,CAACJ;QACxCvB,YAAYM,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMvB,YAAYM,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB2B,SAASd,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM;QAC9CQ;IACF;AACF,EAAE"}

package/lib/utils/useTriggerSlot.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';
-import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
+import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
+import { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { getDropdownActionFromKey } from '../utils/dropdownKeyActions';
 /**
  * Shared trigger behaviour for combobox and dropdown
  * @returns trigger slot with desired behaviour and props
  */ export function useTriggerSlot(triggerSlotFromProp, ref, options) {
-    const { state: { activeOption, getCount, getIndexOfId, getOptionAtIndex, open, selectOption, setActiveOption, setFocusVisible, setOpen, multiselect, setHasFocus }, defaultProps, elementType } = options;
+    const { state: { open, setOpen, setHasFocus }, defaultProps, elementType, activeDescendantController } = options;
     const trigger = slot.always(triggerSlotFromProp, {
         defaultProps: {
             type: 'text',
             'aria-expanded': open,
-            'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
             role: 'combobox',
             ...typeof defaultProps === 'object' && defaultProps
         },
@@ -33,49 +33,102 @@ import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownK
         setOpen(event, !open);
     }, trigger.onClick);
     // handle combobox keyboard interaction
-    trigger.onKeyDown = mergeCallbacks((event)=>{
-        const action = getDropdownActionFromKey(event, {
+    trigger.onKeyDown = mergeCallbacks(useTriggerKeydown({
+        activeDescendantController,
+        ...options.state
+    }), trigger.onKeyDown);
+    return trigger;
+}
+function useTriggerKeydown(options) {
+    const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;
+    const getActiveOption = React.useCallback(()=>{
+        const activeOptionId = activeDescendantController.active();
+        return activeOptionId ? getOptionById(activeOptionId) : undefined;
+    }, [
+        activeDescendantController,
+        getOptionById
+    ]);
+    const first = ()=>{
+        activeDescendantController.first();
+    };
+    const next = (activeOption)=>{
+        if (activeOption) {
+            activeDescendantController.next();
+        } else {
+            activeDescendantController.first();
+        }
+    };
+    const previous = (activeOption)=>{
+        if (activeOption) {
+            activeDescendantController.prev();
+        } else {
+            activeDescendantController.first();
+        }
+    };
+    const pageUp = ()=>{
+        for(let i = 0; i < 10; i++){
+            activeDescendantController.prev();
+        }
+    };
+    const pageDown = ()=>{
+        for(let i = 0; i < 10; i++){
+            activeDescendantController.next();
+        }
+    };
+    const setKeyboardNavigation = useSetKeyboardNavigation();
+    return useEventCallback((e)=>{
+        const action = getDropdownActionFromKey(e, {
             open,
             multiselect
         });
-        const maxIndex = getCount() - 1;
-        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
-        let newIndex = activeIndex;
+        const activeOption = getActiveOption();
         switch(action){
+            case 'First':
+            case 'Next':
+            case 'Previous':
+            case 'PageDown':
+            case 'PageUp':
             case 'Open':
-                event.preventDefault();
-                setFocusVisible(true);
-                setOpen(event, true);
+            case 'Close':
+            case 'CloseSelect':
+            case 'Select':
+                e.preventDefault();
+                break;
+        }
+        setKeyboardNavigation(true);
+        switch(action){
+            case 'First':
+                first();
+                break;
+            case 'Next':
+                next(activeOption);
+                break;
+            case 'Previous':
+                previous(activeOption);
+                break;
+            case 'PageDown':
+                pageDown();
+                break;
+            case 'PageUp':
+                pageUp();
+                break;
+            case 'Open':
+                setOpen(e, true);
                 break;
             case 'Close':
                 // stop propagation for escape key to avoid dismissing any parent popups
-                event.stopPropagation();
-                event.preventDefault();
-                setOpen(event, false);
+                e.stopPropagation();
+                setOpen(e, false);
                 break;
             case 'CloseSelect':
-                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
+                !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(e, false);
             // fallthrough
             case 'Select':
-                activeOption && selectOption(event, activeOption);
-                event.preventDefault();
+                activeOption && selectOption(e, activeOption);
                 break;
             case 'Tab':
-                !multiselect && activeOption && selectOption(event, activeOption);
+                !multiselect && activeOption && selectOption(e, activeOption);
                 break;
-            default:
-                newIndex = getIndexFromAction(action, activeIndex, maxIndex);
-        }
-        if (newIndex !== activeIndex) {
-            // prevent default page scroll/keyboard action if the index changed
-            event.preventDefault();
-            setActiveOption(getOptionAtIndex(newIndex));
-            setFocusVisible(true);
         }
-    }, trigger.onKeyDown);
-    trigger.onMouseOver = mergeCallbacks((event)=>{
-        setFocusVisible(false);
-    }, trigger.onMouseOver);
-    // TODO fix cast
-    return trigger;
+    });
 }

package/lib/utils/useTriggerSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\n\nexport type UseTriggerSlotState = Pick<\n  ComboboxBaseState,\n  | 'activeOption'\n  | 'getCount'\n  | 'getIndexOfId'\n  | 'getOptionAtIndex'\n  | 'open'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setFocusVisible'\n  | 'setOpen'\n  | 'multiselect'\n  | 'value'\n  | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n};\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      activeOption,\n      getCount,\n      getIndexOfId,\n      getOptionAtIndex,\n      open,\n      selectOption,\n      setActiveOption,\n      setFocusVisible,\n      setOpen,\n      multiselect,\n      setHasFocus,\n    },\n    defaultProps,\n    elementType,\n  } = options;\n\n  const trigger = slot.always(triggerSlotFromProp, {\n    defaultProps: {\n      type: 'text',\n      'aria-expanded': open,\n      'aria-activedescendant': open ? activeOption?.id : undefined,\n      role: 'combobox',\n      ...(typeof defaultProps === 'object' && defaultProps),\n    },\n    elementType,\n  });\n\n  // handle trigger focus/blur\n  const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n  trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    setOpen(event, false);\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      if (event.target === event.currentTarget) {\n        setHasFocus(true);\n      }\n    },\n    trigger.onFocus,\n  );\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n      const action = getDropdownActionFromKey(event, { open, multiselect });\n      const maxIndex = getCount() - 1;\n      const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n      let newIndex = activeIndex;\n\n      switch (action) {\n        case 'Open':\n          event.preventDefault();\n          setFocusVisible(true);\n          setOpen(event, true);\n          break;\n        case 'Close':\n          // stop propagation for escape key to avoid dismissing any parent popups\n          event.stopPropagation();\n          event.preventDefault();\n          setOpen(event, false);\n          break;\n        case 'CloseSelect':\n          !multiselect && !activeOption?.disabled && setOpen(event, false);\n        // fallthrough\n        case 'Select':\n          activeOption && selectOption(event, activeOption);\n          event.preventDefault();\n          break;\n        case 'Tab':\n          !multiselect && activeOption && selectOption(event, activeOption);\n          break;\n        default:\n          newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n      }\n      if (newIndex !== activeIndex) {\n        // prevent default page scroll/keyboard action if the index changed\n        event.preventDefault();\n        setActiveOption(getOptionAtIndex(newIndex));\n        setFocusVisible(true);\n      }\n    },\n    trigger.onKeyDown,\n  );\n\n  trigger.onMouseOver = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setFocusVisible(false);\n    },\n    trigger.onMouseOver,\n  );\n\n  // TODO fix cast\n  return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n"],"names":["React","mergeCallbacks","slot","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerSlot","triggerSlotFromProp","ref","options","state","activeOption","getCount","getIndexOfId","getOptionAtIndex","open","selectOption","setActiveOption","setFocusVisible","setOpen","multiselect","setHasFocus","defaultProps","elementType","trigger","always","type","id","undefined","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","onMouseOver"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAEhF,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,8BAA8B;AAoC3F;;;CAGC,GACD,OAAO,SAASC,eACdC,mBAA6E,EAC7EC,GAA+D,EAC/DC,OAAoE;IAEpE,MAAM,EACJC,OAAO,EACLC,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,gBAAgB,EAChBC,IAAI,EACJC,YAAY,EACZC,eAAe,EACfC,eAAe,EACfC,OAAO,EACPC,WAAW,EACXC,WAAW,EACZ,EACDC,YAAY,EACZC,WAAW,EACZ,GAAGd;IAEJ,MAAMe,UAAUtB,KAAKuB,MAAM,CAAClB,qBAAqB;QAC/Ce,cAAc;YACZI,MAAM;YACN,iBAAiBX;YACjB,yBAAyBA,OAAOJ,yBAAAA,mCAAAA,aAAcgB,EAAE,GAAGC;YACnDC,MAAM;YACN,GAAI,OAAOP,iBAAiB,YAAYA,YAAY;QACtD;QACAC;IACF;IAEA,4BAA4B;IAC5B,MAAMO,aAAa9B,MAAM+B,MAAM,CAAuC;IACtEP,QAAQhB,GAAG,GAAGL,cAAc2B,YAAYN,QAAQhB,GAAG,EAAEA;IAErD,2DAA2D;IAC3DgB,QAAQQ,MAAM,GAAG/B,eAAe,CAACgC;QAC/Bd,QAAQc,OAAO;QACfZ,YAAY;IACd,GAAGG,QAAQQ,MAAM;IAEjBR,QAAQU,OAAO,GAAGjC,eAChB,CAACgC;QACC,IAAIA,MAAME,MAAM,KAAKF,MAAMG,aAAa,EAAE;YACxCf,YAAY;QACd;IACF,GACAG,QAAQU,OAAO;IAEjBV,QAAQa,OAAO,GAAGpC,eAChB,CAACgC;QACCd,QAAQc,OAAO,CAAClB;IAClB,GACAS,QAAQa,OAAO;IAGjB,uCAAuC;IACvCb,QAAQc,SAAS,GAAGrC,eAClB,CAACgC;QACC,MAAMM,SAASnC,yBAAyB6B,OAAO;YAAElB;YAAMK;QAAY;QACnE,MAAMoB,WAAW5B,aAAa;QAC9B,MAAM6B,cAAc9B,eAAeE,aAAaF,aAAagB,EAAE,IAAI,CAAC;QACpE,IAAIe,WAAWD;QAEf,OAAQF;YACN,KAAK;gBACHN,MAAMU,cAAc;gBACpBzB,gBAAgB;gBAChBC,QAAQc,OAAO;gBACf;YACF,KAAK;gBACH,wEAAwE;gBACxEA,MAAMW,eAAe;gBACrBX,MAAMU,cAAc;gBACpBxB,QAAQc,OAAO;gBACf;YACF,KAAK;gBACH,CAACb,eAAe,EAACT,yBAAAA,mCAAAA,aAAckC,QAAQ,KAAI1B,QAAQc,OAAO;YAC5D,cAAc;YACd,KAAK;gBACHtB,gBAAgBK,aAAaiB,OAAOtB;gBACpCsB,MAAMU,cAAc;gBACpB;YACF,KAAK;gBACH,CAACvB,eAAeT,gBAAgBK,aAAaiB,OAAOtB;gBACpD;YACF;gBACE+B,WAAWrC,mBAAmBkC,QAAQE,aAAaD;QACvD;QACA,IAAIE,aAAaD,aAAa;YAC5B,mEAAmE;YACnER,MAAMU,cAAc;YACpB1B,gBAAgBH,iBAAiB4B;YACjCxB,gBAAgB;QAClB;IACF,GACAM,QAAQc,SAAS;IAGnBd,QAAQsB,WAAW,GAAG7C,eACpB,CAACgC;QACCf,gBAAgB;IAClB,GACAM,QAAQsB,WAAW;IAGrB,gBAAgB;IAChB,OAAOtB;AACT"}
+{"version":3,"sources":["useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n  ComboboxBaseState,\n  'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n  triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n  options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: { open, setOpen, setHasFocus },\n    defaultProps,\n    elementType,\n    activeDescendantController,\n  } = options;\n\n  const trigger = slot.always(triggerSlotFromProp, {\n    defaultProps: {\n      type: 'text',\n      'aria-expanded': open,\n      role: 'combobox',\n      ...(typeof defaultProps === 'object' && defaultProps),\n    },\n    elementType,\n  });\n\n  // handle trigger focus/blur\n  const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n  trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n  // the trigger should open/close the popup on click or blur\n  trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n    setOpen(event, false);\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      if (event.target === event.currentTarget) {\n        setHasFocus(true);\n      }\n    },\n    trigger.onFocus,\n  );\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  // handle combobox keyboard interaction\n  trigger.onKeyDown = mergeCallbacks(\n    useTriggerKeydown({ activeDescendantController, ...options.state }),\n    trigger.onKeyDown,\n  );\n\n  return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n  options: {\n    activeDescendantController: ActiveDescendantImperativeRef;\n  } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n  const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  const first = () => {\n    activeDescendantController.first();\n  };\n\n  const next = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.next();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const previous = (activeOption: OptionValue | undefined) => {\n    if (activeOption) {\n      activeDescendantController.prev();\n    } else {\n      activeDescendantController.first();\n    }\n  };\n\n  const pageUp = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.prev();\n    }\n  };\n\n  const pageDown = () => {\n    for (let i = 0; i < 10; i++) {\n      activeDescendantController.next();\n    }\n  };\n\n  const setKeyboardNavigation = useSetKeyboardNavigation();\n  return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n    const action = getDropdownActionFromKey(e, { open, multiselect });\n    const activeOption = getActiveOption();\n\n    switch (action) {\n      case 'First':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Open':\n      case 'Close':\n      case 'CloseSelect':\n      case 'Select':\n        e.preventDefault();\n        break;\n    }\n\n    setKeyboardNavigation(true);\n\n    switch (action) {\n      case 'First':\n        first();\n        break;\n      case 'Next':\n        next(activeOption);\n        break;\n      case 'Previous':\n        previous(activeOption);\n        break;\n      case 'PageDown':\n        pageDown();\n        break;\n      case 'PageUp':\n        pageUp();\n        break;\n      case 'Open':\n        setOpen(e, true);\n        break;\n      case 'Close':\n        // stop propagation for escape key to avoid dismissing any parent popups\n        e.stopPropagation();\n        setOpen(e, false);\n        break;\n      case 'CloseSelect':\n        !multiselect && !activeOption?.disabled && setOpen(e, false);\n      // fallthrough\n      case 'Select':\n        activeOption && selectOption(e, activeOption);\n        break;\n      case 'Tab':\n        !multiselect && activeOption && selectOption(e, activeOption);\n        break;\n    }\n  });\n}\n"],"names":["React","useSetKeyboardNavigation","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"mappings":"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"}

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

@@ -10,22 +10,30 @@ Object.defineProperty(exports, "renderCombobox_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactportal = require("@fluentui/react-portal");
+const _reactaria = require("@fluentui/react-aria");
 const _reactutilities = require("@fluentui/react-utilities");
 const _ComboboxContext = require("../../contexts/ComboboxContext");
+const _ListboxContext = require("../../contexts/ListboxContext");
 const renderCombobox_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
-            value: contextValues.combobox,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
-                state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
-                state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
-                    mountNode: state.mountNode,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
-                }))
-            ]
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
+            value: contextValues.activeDescendant,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxProvider, {
+                value: contextValues.listbox,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
+                    value: contextValues.combobox,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
+                        state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
+                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+                            mountNode: state.mountNode,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
+                        }))
+                    ]
+                })
+            })
         })
     });
 };

package/lib-commonjs/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n            value: contextValues.combobox,\n            children: [\n                /*#__PURE__*/ _jsx(state.input, {}),\n                state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),\n                /*#__PURE__*/ _jsx(state.expandIcon, {}),\n                state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                    mountNode: state.mountNode,\n                    children: /*#__PURE__*/ _jsx(state.listbox, {})\n                }))\n            ]\n        })\n    });\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","children","_jsxs","ComboboxContext","Provider","value","combobox","input","clearIcon","expandIcon","listbox","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;6BACtB;gCACK;iCACI;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;YACpDC,OAAOR,cAAcS,QAAQ;YAC7BL,UAAU;gBACN,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMW,KAAK,EAAE,CAAC;gBACjCX,MAAMY,SAAS,IAAI,WAAW,GAAGT,IAAAA,eAAI,EAACH,MAAMY,SAAS,EAAE,CAAC;gBACxD,WAAW,GAAGT,IAAAA,eAAI,EAACH,MAAMa,UAAU,EAAE,CAAC;gBACtCb,MAAMc,OAAO,IAAKd,CAAAA,MAAMe,WAAW,GAAG,WAAW,GAAGZ,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGX,IAAAA,eAAI,EAACa,mBAAM,EAAE;oBACrGC,WAAWjB,MAAMiB,SAAS;oBAC1BZ,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMc,OAAO,EAAE,CAAC;gBACjD,EAAC;aACJ;QACL;IACJ;AACJ"}
+{"version":3,"sources":["renderCombobox.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n/**\n * Render the final JSX of Combobox\n */ export const renderCombobox_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {\n        children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {\n            value: contextValues.activeDescendant,\n            children: /*#__PURE__*/ _jsx(ListboxProvider, {\n                value: contextValues.listbox,\n                children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {\n                    value: contextValues.combobox,\n                    children: [\n                        /*#__PURE__*/ _jsx(state.input, {}),\n                        state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),\n                        /*#__PURE__*/ _jsx(state.expandIcon, {}),\n                        state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {\n                            mountNode: state.mountNode,\n                            children: /*#__PURE__*/ _jsx(state.listbox, {})\n                        }))\n                    ]\n                })\n            })\n        })\n    });\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","children","ActiveDescendantContextProvider","value","activeDescendant","ListboxProvider","listbox","_jsxs","ComboboxContext","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","Portal","mountNode"],"mappings":";;;;+BAQiBA;;;eAAAA;;;4BAR4B;6BACtB;2BACyB;gCACpB;iCACI;gCACA;AAGrB,MAAMA,0BAA0B,CAACC,OAAOC;IAC/CC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACH,MAAMI,IAAI,EAAE;QAClCC,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACG,0CAA+B,EAAE;YAC1DC,OAAON,cAAcO,gBAAgB;YACrCH,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACM,+BAAe,EAAE;gBAC1CF,OAAON,cAAcS,OAAO;gBAC5BL,UAAU,WAAW,GAAGM,IAAAA,gBAAK,EAACC,gCAAe,CAACC,QAAQ,EAAE;oBACpDN,OAAON,cAAca,QAAQ;oBAC7BT,UAAU;wBACN,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMe,KAAK,EAAE,CAAC;wBACjCf,MAAMgB,SAAS,IAAI,WAAW,GAAGb,IAAAA,eAAI,EAACH,MAAMgB,SAAS,EAAE,CAAC;wBACxD,WAAW,GAAGb,IAAAA,eAAI,EAACH,MAAMiB,UAAU,EAAE,CAAC;wBACtCjB,MAAMU,OAAO,IAAKV,CAAAA,MAAMkB,WAAW,GAAG,WAAW,GAAGf,IAAAA,eAAI,EAACH,MAAMU,OAAO,EAAE,CAAC,KAAK,WAAW,GAAGP,IAAAA,eAAI,EAACgB,mBAAM,EAAE;4BACrGC,WAAWpB,MAAMoB,SAAS;4BAC1Bf,UAAU,WAAW,GAAGF,IAAAA,eAAI,EAACH,MAAMU,OAAO,EAAE,CAAC;wBACjD,EAAC;qBACJ;gBACL;YACJ;QACJ;IACJ;AACJ"}