@fluentui/react-combobox 9.0.0-beta.18 → 9.0.0-beta.20

package/lib/utils/useTriggerListboxSlots.js

@@ -6,7 +6,6 @@ import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownK
  * 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,16 @@ 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 listbox = listboxSlot && {
     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,8 +41,8 @@ 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
-
+  };
+  // listbox is nullable, only add event handlers if it exists
   if (listbox) {
     /*
      * Handle focus when clicking the listbox popup:
@@ -52,7 +51,6 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
      */
     listbox.onClick = mergeCallbacks(event => {
       var _a;
-
       (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, listbox.onClick);
     listbox.onMouseOver = mergeCallbacks(event => {
@@ -61,14 +59,12 @@ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSl
     listbox.onMouseDown = mergeCallbacks(event => {
       ignoreNextBlur.current = true;
     }, listbox.onMouseDown);
-  } // the trigger should open/close the popup on click or blur
-
-
+  }
+  // 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 +73,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 +83,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':
         !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":["packages/react-components/react-combobox/src/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          !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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","mergeCallbacks","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listbox","tabIndex","undefined","trigger","id","role","onClick","event","current","focus","onMouseOver","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, 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          !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-commonjs/Combobox.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Combobox/index"), exports);
 //# sourceMappingURL=Combobox.js.map

package/lib-commonjs/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/Combobox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Combobox/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Combobox.ts"],"sourcesContent":["export * from './components/Combobox/index';\n"]}

package/lib-commonjs/ComboboxField.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/ComboboxField/index"), exports);
 //# sourceMappingURL=ComboboxField.js.map

package/lib-commonjs/ComboboxField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/ComboboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ComboboxField/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/ComboboxField.ts"],"sourcesContent":["export * from './components/ComboboxField/index';\n"]}

package/lib-commonjs/Dropdown.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Dropdown/index"), exports);
 //# sourceMappingURL=Dropdown.js.map

package/lib-commonjs/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/Dropdown.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dropdown/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Dropdown.ts"],"sourcesContent":["export * from './components/Dropdown/index';\n"]}

package/lib-commonjs/Listbox.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Listbox/index"), exports);
 //# sourceMappingURL=Listbox.js.map

package/lib-commonjs/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/Listbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Listbox/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Listbox.ts"],"sourcesContent":["export * from './components/Listbox/index';\n"]}

package/lib-commonjs/Option.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Option/index"), exports);
 //# sourceMappingURL=Option.js.map

package/lib-commonjs/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/Option.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Option/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/Option.ts"],"sourcesContent":["export * from './components/Option/index';\n"]}

package/lib-commonjs/OptionGroup.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/OptionGroup/index"), exports);
 //# sourceMappingURL=OptionGroup.js.map

package/lib-commonjs/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/OptionGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/OptionGroup/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/OptionGroup.ts"],"sourcesContent":["export * from './components/OptionGroup/index';\n"]}

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

@@ -4,21 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Combobox = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCombobox_1 = /*#__PURE__*/require("./useCombobox");
-
 const renderCombobox_1 = /*#__PURE__*/require("./renderCombobox");
-
 const useComboboxStyles_1 = /*#__PURE__*/require("./useComboboxStyles");
-
 const useComboboxContextValues_1 = /*#__PURE__*/require("../../contexts/useComboboxContextValues");
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
  */
-
-
 exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCombobox_1.useCombobox_unstable(props, ref);
   const contextValues = useComboboxContextValues_1.useComboboxContextValues(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAEA,MAAA,0BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EACA,MAAM,aAAa,GAAG,0BAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAtB;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,aAA/B,CAAP;AACD,CAN2D,CAA/C;AAQb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AAGA;;;AAGaA,gBAAQ,gBAAuCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGC,kCAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAMG,aAAa,GAAGC,mDAAwB,CAACH,KAAK,CAAC;EAErDI,8CAA0B,CAACJ,KAAK,CAAC;EACjC,OAAOK,wCAAuB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFP,gBAAQ,CAACW,WAAW,GAAG,UAAU","names":["exports","React","forwardRef","props","ref","state","useCombobox_1","contextValues","useComboboxContextValues_1","useComboboxStyles_1","renderCombobox_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"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-commonjs/components/Combobox/Combobox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Combobox"), exports);
-
 tslib_1.__exportStar(require("./Combobox.types"), exports);
-
 tslib_1.__exportStar(require("./renderCombobox"), exports);
-
 tslib_1.__exportStar(require("./useCombobox"), exports);
-
 tslib_1.__exportStar(require("./useComboboxStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/index.ts"],"sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"]}

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

@@ -4,33 +4,31 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderCombobox_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext");
 /**
  * Render the final JSX of Combobox
  */
-
-
 const renderCombobox_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
+  return React.createElement(slots.root, {
+    ...slotProps.root
   }, React.createElement(ComboboxContext_1.ComboboxContext.Provider, {
     value: contextValues.combobox
-  }, React.createElement(slots.input, { ...slotProps.input
-  }), slots.expandIcon && React.createElement(slots.expandIcon, { ...slotProps.expandIcon
-  }), slots.listbox && (state.inlinePopup ? React.createElement(slots.listbox, { ...slotProps.listbox
-  }) : React.createElement(react_portal_1.Portal, null, React.createElement(slots.listbox, { ...slotProps.listbox
+  }, React.createElement(slots.input, {
+    ...slotProps.input
+  }), slots.expandIcon && React.createElement(slots.expandIcon, {
+    ...slotProps.expandIcon
+  }), slots.listbox && (state.inlinePopup ? React.createElement(slots.listbox, {
+    ...slotProps.listbox
+  }) : React.createElement(react_portal_1.Portal, null, React.createElement(slots.listbox, {
+    ...slotProps.listbox
   })))));
 };
-
 exports.renderCombobox_unstable = renderCombobox_unstable;
 //# sourceMappingURL=renderCombobox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,IAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,OAAN,KACE,KAAK,CAAC,WAAN,GACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADD,GAGC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CAJH,CAHH,CADF,CADF;AAgBD,CAnBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;;;AAGO,MAAMA,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAgBJ,KAAK,CAAC;EAE3D,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACE,iCAAe,CAACC,QAAQ;IAACC,KAAK,EAAER,aAAa,CAACS;EAAQ,GACrDL,oBAACH,KAAK,CAACS,KAAK;IAAA,GAAKR,SAAS,CAACQ;EAAK,EAAI,EACnCT,KAAK,CAACU,UAAU,IAAIP,oBAACH,KAAK,CAACU,UAAU;IAAA,GAAKT,SAAS,CAACS;EAAU,EAAI,EAClEV,KAAK,CAACW,OAAO,KACXb,KAAK,CAACc,WAAW,GAChBT,oBAACH,KAAK,CAACW,OAAO;IAAA,GAAKV,SAAS,CAACU;EAAO,EAAI,GAExCR,oBAACU,qBAAM,QACLV,oBAACH,KAAK,CAACW,OAAO;IAAA,GAAKV,SAAS,CAACU;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC;AAnBYG,+BAAuB","names":["renderCombobox_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","root","ComboboxContext_1","Provider","value","combobox","input","expandIcon","listbox","inlinePopup","react_portal_1","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"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"]}

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

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCombobox_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const dropdownKeyActions_1 = /*#__PURE__*/require("../../utils/dropdownKeyActions");
-
 const useComboboxBaseState_1 = /*#__PURE__*/require("../../utils/useComboboxBaseState");
-
 const useComboboxPopup_1 = /*#__PURE__*/require("../../utils/useComboboxPopup");
-
 const useTriggerListboxSlots_1 = /*#__PURE__*/require("../../utils/useTriggerListboxSlots");
-
 const Listbox_1 = /*#__PURE__*/require("../Listbox/Listbox");
 /**
  * Create the state required to render Combobox.
@@ -29,12 +21,10 @@ const Listbox_1 = /*#__PURE__*/require("../Listbox/Listbox");
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */
-
-
 const useCombobox_unstable = (props, ref) => {
   var _a;
-
-  const baseState = useComboboxBaseState_1.useComboboxBaseState({ ...props,
+  const baseState = useComboboxBaseState_1.useComboboxBaseState({
+    ...props,
     editable: true
   });
   const {
@@ -65,90 +55,75 @@ const useCombobox_unstable = (props, ref) => {
     excludedPropNames: ['children', 'size']
   });
   const rootRef = React.useRef(null);
-  const triggerRef = React.useRef(null); // calculate listbox width style based on trigger width
-
+  const triggerRef = React.useRef(null);
+  // calculate listbox width style based on trigger width
   const [popupWidth, setPopupWidth] = React.useState();
   React.useEffect(() => {
     var _a;
-
     const width = open ? `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px` : undefined;
     setPopupWidth(width);
-  }, [open]); // set active option and selection based on typing
-
+  }, [open]);
+  // set active option and selection based on typing
   const getOptionFromInput = inputValue => {
     var _a;
-
     const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
-
     if (!searchString || searchString.length === 0) {
       return;
     }
-
     const matcher = optionText => optionText.toLowerCase().indexOf(searchString) === 0;
-
-    const matches = getOptionsMatchingText(matcher); // return first matching option after the current active option, looping back to the top
-
+    const matches = getOptionsMatchingText(matcher);
+    // return first matching option after the current active option, looping back to the top
     if (matches.length > 1 && activeOption) {
       const startIndex = getIndexOfId(activeOption.id);
       const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
       return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
     }
-
     return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
   };
   /* Handle typed input */
   // reset any typed value when an option is selected
-
-
   baseState.selectOption = (ev, option) => {
     setValue(undefined);
     selectOption(ev, option);
   };
-
   const onTriggerBlur = ev => {
     // handle selection and updating value if freeform is false
     if (!baseState.open && !freeform) {
       // select matching option, if the value fully matches
       if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value.toLowerCase())) {
         baseState.selectOption(ev, activeOption);
-      } // reset typed value when the input loses focus while collapsed, unless freeform is true
-
-
+      }
+      // reset typed value when the input loses focus while collapsed, unless freeform is true
       setValue(undefined);
     }
   };
-
   baseState.setOpen = (ev, newState) => {
     if (!newState && !freeform) {
       setValue(undefined);
     }
-
     setOpen(ev, newState);
-  }; // update value and active option based on input
-
-
+  };
+  // update value and active option based on input
   const onTriggerChange = ev => {
-    const inputValue = ev.target.value; // update uncontrolled value
-
-    baseState.setValue(inputValue); // handle updating active option based on input
-
+    const inputValue = ev.target.value;
+    // update uncontrolled value
+    baseState.setValue(inputValue);
+    // handle updating active option based on input
     const matchingOption = getOptionFromInput(inputValue);
     setActiveOption(matchingOption);
-    setFocusVisible(true); // clear selection for single-select if the input value no longer matches the selection
-
+    setFocusVisible(true);
+    // clear selection for single-select if the input value no longer matches the selection
     if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)) {
       clearSelection(ev);
     }
-  }; // open Combobox when typing
-
-
+  };
+  // open Combobox when typing
   const onTriggerKeyDown = ev => {
     if (!open && dropdownKeyActions_1.getDropdownActionFromKey(ev) === 'Type') {
       setOpen(ev, true);
     }
-  }; // resolve input and listbox slot props
-
-
+  };
+  // resolve input and listbox slot props
   let triggerSlot;
   let listboxSlot;
   triggerSlot = react_utilities_1.resolveShorthand(props.input, {
@@ -162,8 +137,8 @@ const useCombobox_unstable = (props, ref) => {
   });
   triggerSlot.onChange = react_utilities_1.mergeCallbacks(triggerSlot.onChange, onTriggerChange);
   triggerSlot.onBlur = react_utilities_1.mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
-  triggerSlot.onKeyDown = react_utilities_1.mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown); // only resolve listbox slot if needed
-
+  triggerSlot.onKeyDown = react_utilities_1.mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);
+  // only resolve listbox slot if needed
   listboxSlot = open || hasFocus ? react_utilities_1.resolveShorthand(props.listbox, {
     required: true,
     defaultProps: {
@@ -184,7 +159,8 @@ const useCombobox_unstable = (props, ref) => {
     },
     root: react_utilities_1.resolveShorthand(props.root, {
       required: true,
-      defaultProps: { ...rootNativeProps
+      defaultProps: {
+        ...rootNativeProps
       }
     }),
     input: triggerSlot,
@@ -200,7 +176,6 @@ const useCombobox_unstable = (props, ref) => {
   };
   state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, rootRef);
   /* handle open/close + focus change when clicking expandIcon */
-
   const {
     onMouseDown: onIconMouseDown,
     onClick: onIconClick
@@ -212,20 +187,16 @@ const useCombobox_unstable = (props, ref) => {
     }
   }));
   const onExpandIconClick = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(onIconClick, event => {
-    var _a; // open and set focus
-
-
+    var _a;
+    // open and set focus
     state.setOpen(event, !state.open);
     (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   }));
-
   if (state.expandIcon) {
     state.expandIcon.onMouseDown = onExpandIconMouseDown;
     state.expandIcon.onClick = onExpandIconClick;
   }
-
   return state;
 };
-
 exports.useCombobox_unstable = useCombobox_unstable;
 //# sourceMappingURL=useCombobox.js.map