@fluentui/react-combobox 9.0.0-beta.9 → 9.0.0

package/lib/utils/useSelection.js

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useControllableState } from '@fluentui/react-utilities';
 export const useSelection = props => {
   const {
@@ -10,19 +11,16 @@ export const useSelection = props => {
     defaultState: defaultSelectedOptions,
     initialState: []
   });
-
-  const selectOption = (event, option) => {
+  const selectOption = useCallback((event, option) => {
     // if the option is disabled, do nothing
     if (option.disabled) {
       return;
-    } // for single-select, always return the selected option
-
-
-    let newSelection = [option.value]; // toggle selected state of the option for multiselect
-
+    }
+    // for single-select, always return the selected option
+    let newSelection = [option.value];
+    // toggle selected state of the option for multiselect
     if (multiselect) {
       const selectedIndex = selectedOptions.findIndex(o => o === option.value);
-
       if (selectedIndex > -1) {
         // deselect option
         newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
@@ -31,22 +29,21 @@ export const useSelection = props => {
         newSelection = [...selectedOptions, option.value];
       }
     }
-
     setSelectedOptions(newSelection);
     onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
       optionValue: option.value,
+      optionText: option.text,
       selectedOptions: newSelection
     });
-  };
-
+  }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
   const clearSelection = event => {
     setSelectedOptions([]);
     onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
       optionValue: undefined,
+      optionText: undefined,
       selectedOptions: []
     });
   };
-
   return {
     clearSelection,
     selectOption,

package/lib/utils/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useSelection.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AAIA,OAAO,MAAM,YAAY,GAAI,KAAD,IAA0C;EACpE,MAAM;IAAE,sBAAF;IAA0B,WAA1B;IAAuC;EAAvC,IAA0D,KAAhE;EAEA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,oBAAoB,CAAC;IACjE,KAAK,EAAE,KAAK,CAAC,eADoD;IAEjE,YAAY,EAAE,sBAFmD;IAGjE,YAAY,EAAE;EAHmD,CAAD,CAAlE;;EAMA,MAAM,YAAY,GAAG,CAAC,KAAD,EAAyB,MAAzB,KAAgD;IACnE;IACA,IAAI,MAAM,CAAC,QAAX,EAAqB;MACnB;IACD,CAJkE,CAMnE;;;IACA,IAAI,YAAY,GAAG,CAAC,MAAM,CAAC,KAAR,CAAnB,CAPmE,CASnE;;IACA,IAAI,WAAJ,EAAiB;MACf,MAAM,aAAa,GAAG,eAAe,CAAC,SAAhB,CAA0B,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,KAA5C,CAAtB;;MACA,IAAI,aAAa,GAAG,CAAC,CAArB,EAAwB;QACtB;QACA,YAAY,GAAG,CAAC,GAAG,eAAe,CAAC,KAAhB,CAAsB,CAAtB,EAAyB,aAAzB,CAAJ,EAA6C,GAAG,eAAe,CAAC,KAAhB,CAAsB,aAAa,GAAG,CAAtC,CAAhD,CAAf;MACD,CAHD,MAGO;QACL;QACA,YAAY,GAAG,CAAC,GAAG,eAAJ,EAAqB,MAAM,CAAC,KAA5B,CAAf;MACD;IACF;;IAED,kBAAkB,CAAC,YAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,MAAM,CAAC,KAAtB;MAA6B,eAAe,EAAE;IAA9C,CAAV,CAAd;EACD,CAvBD;;EAyBA,MAAM,cAAc,GAAI,KAAD,IAA2B;IAChD,kBAAkB,CAAC,EAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,SAAf;MAA0B,eAAe,EAAE;IAA3C,CAAV,CAAd;EACD,CAHD;;EAKA,OAAO;IAAE,cAAF;IAAkB,YAAlB;IAAgC;EAAhC,CAAP;AACD,CAxCM","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionValue } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionValue => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = (event: SelectionEvents, option: OptionValue) => {\n    // if the option is disabled, do nothing\n    if (option.disabled) {\n      return;\n    }\n\n    // for single-select, always return the selected option\n    let newSelection = [option.value];\n\n    // toggle selected state of the option for multiselect\n    if (multiselect) {\n      const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n      if (selectedIndex > -1) {\n        // deselect option\n        newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n      } else {\n        // select option\n        newSelection = [...selectedOptions, option.value];\n      }\n    }\n\n    setSelectedOptions(newSelection);\n    onOptionSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n  };\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,OAAO,MAAMC,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,oBAAoB,CAAC;IACjEQ,KAAK,EAAEN,KAAK,CAACI,eAAe;IAC5BG,YAAY,EAAEN,sBAAsB;IACpCO,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGZ,WAAW,CAC9B,CAACa,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAW,EAAE;MACf,MAAMa,aAAa,GAAGX,eAAe,CAACY,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,CAACc,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGX,eAAe,CAACc,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,EAAEO,MAAM,CAACG,KAAK,CAAC;;;IAIrDT,kBAAkB,CAACQ,YAAY,CAAC;IAChCV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEjB,eAAe,EAAES;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACV,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMiB,cAAc,GAAIZ,KAAsB,IAAI;IAChDL,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEnB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEkB,cAAc;IAAEb,YAAY;IAAEL;EAAe,CAAE;AAC1D,CAAC","names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n  const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n  const [selectedOptions, setSelectedOptions] = useControllableState({\n    state: props.selectedOptions,\n    defaultState: defaultSelectedOptions,\n    initialState: [],\n  });\n\n  const selectOption = useCallback(\n    (event: SelectionEvents, option: OptionValue) => {\n      // if the option is disabled, do nothing\n      if (option.disabled) {\n        return;\n      }\n\n      // for single-select, always return the selected option\n      let newSelection = [option.value];\n\n      // toggle selected state of the option for multiselect\n      if (multiselect) {\n        const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n        if (selectedIndex > -1) {\n          // deselect option\n          newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n        } else {\n          // select option\n          newSelection = [...selectedOptions, option.value];\n        }\n      }\n\n      setSelectedOptions(newSelection);\n      onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n    },\n    [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n  );\n\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"]}

package/lib/utils/useTriggerListboxSlots.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { mergeCallbacks, useMergedRefs } from '@fluentui/react-utilities';
+import { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
 /*
  * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.
  * The element type of the ref should always match the element type used in the trigger shorthand.
  */
-
 export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
   const {
     multiselect
@@ -23,16 +22,18 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
     setFocusVisible,
     setHasFocus,
     setOpen
-  } = state; // handle trigger focus/blur
-
-  const triggerRef = React.useRef(null); // resolve listbox shorthand props
-
+  } = state;
+  // handle trigger focus/blur
+  const triggerRef = React.useRef(null);
+  // resolve listbox shorthand props
+  const listboxId = useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
   const listbox = listboxSlot && {
+    id: listboxId,
     multiselect,
     tabIndex: undefined,
     ...listboxSlot
-  }; // resolve trigger shorthand props
-
+  };
+  // resolve trigger shorthand props
   const trigger = {
     'aria-expanded': open,
     'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
@@ -42,33 +43,33 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
     // since the `children` prop has mutually incompatible types between input/button
     // functionally both ref and triggerRef will always be the same element type
     ref: useMergedRefs(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)
-  }; // listbox is nullable, only add event handlers if it exists
-
+  };
+  /*
+   * Handle focus when clicking the listbox popup:
+   * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
+   * 2. Do not close the listbox on button/input blur when clicking into the listbox
+   */
+  const listboxOnClick = useEventCallback(mergeCallbacks(event => {
+    var _a;
+    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
+  const listboxOnMouseOver = useEventCallback(mergeCallbacks(event => {
+    setFocusVisible(false);
+  }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
+  const listboxOnMouseDown = useEventCallback(mergeCallbacks(event => {
+    ignoreNextBlur.current = true;
+  }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
+  // listbox is nullable, only add event handlers if it exists
   if (listbox) {
-    /*
-     * Handle focus when clicking the listbox popup:
-     * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
-     * 2. Do not close the listbox on button/input blur when clicking into the listbox
-     */
-    listbox.onClick = mergeCallbacks(event => {
-      var _a;
-
-      (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, listbox.onClick);
-    listbox.onMouseOver = mergeCallbacks(event => {
-      setFocusVisible(false);
-    }, listbox.onMouseOver);
-    listbox.onMouseDown = mergeCallbacks(event => {
-      ignoreNextBlur.current = true;
-    }, listbox.onMouseDown);
-  } // the trigger should open/close the popup on click or blur
-
-
+    listbox.onClick = listboxOnClick;
+    listbox.onMouseOver = listboxOnMouseOver;
+    listbox.onMouseDown = listboxOnMouseDown;
+  }
+  // the trigger should open/close the popup on click or blur
   trigger.onBlur = mergeCallbacks(event => {
     if (!ignoreNextBlur.current) {
       setOpen(event, false);
     }
-
     ignoreNextBlur.current = false;
     setHasFocus(false);
   }, trigger.onBlur);
@@ -77,8 +78,8 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
   }, trigger.onClick);
   trigger.onFocus = mergeCallbacks(event => {
     setHasFocus(true);
-  }, trigger.onFocus); // handle combobox keyboard interaction
-
+  }, trigger.onFocus);
+  // handle combobox keyboard interaction
   trigger.onKeyDown = mergeCallbacks(event => {
     const action = getDropdownActionFromKey(event, {
       open,
@@ -87,38 +88,31 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
     const maxIndex = getCount() - 1;
     const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
     let newIndex = activeIndex;
-
     switch (action) {
       case 'Open':
         event.preventDefault();
         setFocusVisible(true);
         setOpen(event, true);
         break;
-
       case 'Close':
         // stop propagation for escape key to avoid dismissing any parent popups
         event.stopPropagation();
         event.preventDefault();
         setOpen(event, false);
         break;
-
       case 'CloseSelect':
         !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
       // fallthrough
-
       case 'Select':
         activeOption && selectOption(event, activeOption);
         event.preventDefault();
         break;
-
       case 'Tab':
-        activeOption && selectOption(event, activeOption);
+        !multiselect && activeOption && selectOption(event, activeOption);
         break;
-
       default:
         newIndex = getIndexFromAction(action, activeIndex, maxIndex);
     }
-
     if (newIndex !== activeIndex) {
       // prevent default page scroll/keyboard action if the index changed
       event.preventDefault();

package/lib/utils/useTriggerListboxSlots.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { multiselect } = props;\n  const {\n    activeOption,\n    getCount,\n    getIndexOfId,\n    getOptionAtIndex,\n    ignoreNextBlur,\n    open,\n    selectOption,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n  } = state;\n\n  // handle trigger focus/blur\n  const triggerRef: typeof ref = React.useRef(null);\n\n  // resolve listbox shorthand props\n  const listbox: typeof listboxSlot = listboxSlot && {\n    multiselect,\n    tabIndex: undefined,\n    ...listboxSlot,\n  };\n\n  // resolve trigger shorthand props\n  const trigger: typeof triggerSlot = {\n    'aria-expanded': open,\n    'aria-activedescendant': open ? activeOption?.id : undefined,\n    role: 'combobox',\n    ...triggerSlot,\n    // explicitly type the ref as an intersection here to prevent type errors\n    // since the `children` prop has mutually incompatible types between input/button\n    // functionally both ref and triggerRef will always be the same element type\n    ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n  };\n\n  // listbox is nullable, only add event handlers if it exists\n  if (listbox) {\n    /*\n     * Handle focus when clicking the listbox popup:\n     * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n     * 2. Do not close the listbox on button/input blur when clicking into the listbox\n     */\n    listbox.onClick = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      triggerRef.current?.focus();\n    }, listbox.onClick);\n\n    listbox.onMouseOver = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      setFocusVisible(false);\n    }, listbox.onMouseOver);\n\n    listbox.onMouseDown = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      ignoreNextBlur.current = true;\n    }, listbox.onMouseDown);\n  }\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    if (!ignoreNextBlur.current) {\n      setOpen(event, false);\n    }\n\n    ignoreNextBlur.current = false;\n\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      setHasFocus(true);\n    },\n    trigger.onFocus,\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          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  return [trigger, listbox];\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxId","id","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n  props: ComboboxBaseProps,\n  state: ComboboxBaseState,\n  ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n  triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { multiselect } = props;\n  const {\n    activeOption,\n    getCount,\n    getIndexOfId,\n    getOptionAtIndex,\n    ignoreNextBlur,\n    open,\n    selectOption,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n  } = state;\n\n  // handle trigger focus/blur\n  const triggerRef: typeof ref = React.useRef(null);\n\n  // resolve listbox shorthand props\n  const listboxId = useId('fluent-listbox', listboxSlot?.id);\n  const listbox: typeof listboxSlot = listboxSlot && {\n    id: listboxId,\n    multiselect,\n    tabIndex: undefined,\n    ...listboxSlot,\n  };\n\n  // resolve trigger shorthand props\n  const trigger: typeof triggerSlot = {\n    'aria-expanded': open,\n    'aria-activedescendant': open ? activeOption?.id : undefined,\n    role: 'combobox',\n    ...triggerSlot,\n    // explicitly type the ref as an intersection here to prevent type errors\n    // since the `children` prop has mutually incompatible types between input/button\n    // functionally both ref and triggerRef will always be the same element type\n    ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n  };\n\n  /*\n   * Handle focus when clicking the listbox popup:\n   * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n   * 2. Do not close the listbox on button/input blur when clicking into the listbox\n   */\n  const listboxOnClick = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      triggerRef.current?.focus();\n    }, listbox?.onClick),\n  );\n\n  const listboxOnMouseOver = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      setFocusVisible(false);\n    }, listbox?.onMouseOver),\n  );\n\n  const listboxOnMouseDown = useEventCallback(\n    mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n      ignoreNextBlur.current = true;\n    }, listbox?.onMouseDown),\n  );\n\n  // listbox is nullable, only add event handlers if it exists\n  if (listbox) {\n    listbox.onClick = listboxOnClick;\n    listbox.onMouseOver = listboxOnMouseOver;\n    listbox.onMouseDown = listboxOnMouseDown;\n  }\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    if (!ignoreNextBlur.current) {\n      setOpen(event, false);\n    }\n\n    ignoreNextBlur.current = false;\n\n    setHasFocus(false);\n  }, trigger.onBlur);\n\n  trigger.onClick = mergeCallbacks(\n    (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n      setOpen(event, !open);\n    },\n    trigger.onClick,\n  );\n\n  trigger.onFocus = mergeCallbacks(\n    (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n      setHasFocus(true);\n    },\n    trigger.onFocus,\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  return [trigger, listbox];\n}\n"]}

package/lib-amd/Combobox.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Combobox/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Combobox.js.map

package/lib-amd/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/Combobox.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/Combobox/index';\n"]}

package/lib-amd/ComboboxField.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/ComboboxField/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ComboboxField.js.map

package/lib-amd/ComboboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/ComboboxField.ts"],"names":[],"mappings":";;;IAAA,uCAAiD","sourcesContent":["export * from './components/ComboboxField/index';\n"]}

package/lib-amd/Dropdown.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Dropdown/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Dropdown.js.map

package/lib-amd/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/Dropdown.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/Dropdown/index';\n"]}

package/lib-amd/Listbox.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Listbox/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Listbox.js.map

package/lib-amd/Listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/Listbox.ts"],"names":[],"mappings":";;;IAAA,uCAA2C","sourcesContent":["export * from './components/Listbox/index';\n"]}

package/lib-amd/Option.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Option/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Option.js.map

package/lib-amd/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/Option.ts"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Option/index';\n"]}

package/lib-amd/OptionGroup.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/OptionGroup/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=OptionGroup.js.map

package/lib-amd/OptionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/OptionGroup.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/OptionGroup/index';\n"]}

package/lib-amd/components/Combobox/Combobox.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useCombobox", "./renderCombobox", "./useComboboxStyles", "../../contexts/useComboboxContextValues"], function (require, exports, React, useCombobox_1, renderCombobox_1, useComboboxStyles_1, useComboboxContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Combobox = void 0;
+    /**
+     * Combobox component: a selection control that allows users to choose from a set of possible options
+     */
+    exports.Combobox = React.forwardRef(function (props, ref) {
+        var state = useCombobox_1.useCombobox_unstable(props, ref);
+        var contextValues = useComboboxContextValues_1.useComboboxContextValues(state);
+        useComboboxStyles_1.useComboboxStyles_unstable(state);
+        return renderCombobox_1.renderCombobox_unstable(state, contextValues);
+    });
+    exports.Combobox.displayName = 'Combobox';
+});
+//# sourceMappingURL=Combobox.js.map

package/lib-amd/components/Combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC/C,IAAM,aAAa,GAAG,mDAAwB,CAAC,KAAK,CAAC,CAAC;QAEtD,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,OAAO,wCAAuB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"]}

package/lib-amd/components/Combobox/Combobox.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Combobox.types.js.map

package/lib-amd/components/Combobox/Combobox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"]}

package/lib-amd/components/Combobox/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Combobox", "./Combobox.types", "./renderCombobox", "./useCombobox", "./useComboboxStyles"], function (require, exports, tslib_1, Combobox_1, Combobox_types_1, renderCombobox_1, useCombobox_1, useComboboxStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Combobox_1, exports);
+    tslib_1.__exportStar(Combobox_types_1, exports);
+    tslib_1.__exportStar(renderCombobox_1, exports);
+    tslib_1.__exportStar(useCombobox_1, exports);
+    tslib_1.__exportStar(useComboboxStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/Combobox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Combobox/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"]}

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

@@ -0,0 +1,20 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-portal", "@fluentui/react-utilities", "../../contexts/ComboboxContext"], function (require, exports, tslib_1, React, react_portal_1, react_utilities_1, ComboboxContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderCombobox_unstable = void 0;
+    /**
+     * Render the final JSX of Combobox
+     */
+    var renderCombobox_unstable = function (state, contextValues) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(ComboboxContext_1.ComboboxContext.Provider, { value: contextValues.combobox },
+                React.createElement(slots.input, tslib_1.__assign({}, slotProps.input)),
+                slots.expandIcon && React.createElement(slots.expandIcon, tslib_1.__assign({}, slotProps.expandIcon)),
+                slots.listbox &&
+                    (state.inlinePopup ? (React.createElement(slots.listbox, tslib_1.__assign({}, slotProps.listbox))) : (React.createElement(react_portal_1.Portal, null,
+                        React.createElement(slots.listbox, tslib_1.__assign({}, slotProps.listbox))))))));
+    };
+    exports.renderCombobox_unstable = renderCombobox_unstable;
+});
+//# sourceMappingURL=renderCombobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderCombobox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAoB,EAAE,aAAoC;QAC1F,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,iCAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;gBACrD,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;gBACnC,KAAK,CAAC,UAAU,IAAI,oBAAC,KAAK,CAAC,UAAU,uBAAK,SAAS,CAAC,UAAU,EAAI;gBAClE,KAAK,CAAC,OAAO;oBACZ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI,CACzC,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAM;wBACL,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI,CACjC,CACV,CAAC,CACqB,CAChB,CACd,CAAC;IACJ,CAAC,CAAC;IAnBW,QAAA,uBAAuB,2BAmBlC","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.input {...slotProps.input} />\n        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"]}