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

package/lib-commonjs/utils/useTriggerListboxSlots.js

@@ -4,19 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTriggerListboxSlots = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const dropdownKeyActions_1 = /*#__PURE__*/require("../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.
  */
-
-
 function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
   const {
     multiselect
@@ -33,16 +28,18 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
     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 = react_utilities_1.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,
@@ -52,33 +49,33 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
     // since the `children` prop has mutually incompatible types between input/button
     // functionally both ref and triggerRef will always be the same element type
     ref: react_utilities_1.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 = react_utilities_1.useEventCallback(react_utilities_1.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 = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(event => {
+    setFocusVisible(false);
+  }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
+  const listboxOnMouseDown = react_utilities_1.useEventCallback(react_utilities_1.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 = react_utilities_1.mergeCallbacks(event => {
-      var _a;
-
-      (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, listbox.onClick);
-    listbox.onMouseOver = react_utilities_1.mergeCallbacks(event => {
-      setFocusVisible(false);
-    }, listbox.onMouseOver);
-    listbox.onMouseDown = react_utilities_1.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 = react_utilities_1.mergeCallbacks(event => {
     if (!ignoreNextBlur.current) {
       setOpen(event, false);
     }
-
     ignoreNextBlur.current = false;
     setHasFocus(false);
   }, trigger.onBlur);
@@ -87,8 +84,8 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
   }, trigger.onClick);
   trigger.onFocus = react_utilities_1.mergeCallbacks(event => {
     setHasFocus(true);
-  }, trigger.onFocus); // handle combobox keyboard interaction
-
+  }, trigger.onFocus);
+  // handle combobox keyboard interaction
   trigger.onKeyDown = react_utilities_1.mergeCallbacks(event => {
     const action = dropdownKeyActions_1.getDropdownActionFromKey(event, {
       open,
@@ -97,38 +94,31 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
     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 = dropdownKeyActions_1.getIndexFromAction(action, activeIndex, maxIndex);
     }
-
     if (newIndex !== activeIndex) {
       // prevent default page scroll/keyboard action if the index changed
       event.preventDefault();
@@ -141,6 +131,5 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
   }, trigger.onMouseOver);
   return [trigger, listbox];
 }
-
 exports.useTriggerListboxSlots = useTriggerListboxSlots;
 //# sourceMappingURL=useTriggerListboxSlots.js.map

package/lib-commonjs/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":";;;;;;AAAA;AACA;AAEA;AAmBA;;;;;AAKA,SAAgBA,sBAAsB,CACpCC,KAAwB,EACxBC,KAAwB,EACxBC,GAAoD,EACpDC,WAAgF,EAChFC,WAAoD;EAKpD,MAAM;IAAEC;EAAW,CAAE,GAAGL,KAAK;EAC7B,MAAM;IACJM,YAAY;IACZC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,cAAc;IACdC,IAAI;IACJC,YAAY;IACZC,eAAe;IACfC,eAAe;IACfC,WAAW;IACXC;EAAO,CACR,GAAGf,KAAK;EAET;EACA,MAAMgB,UAAU,GAAeC,KAAK,CAACC,MAAM,CAAC,IAAI,CAAC;EAEjD;EACA,MAAMC,SAAS,GAAGC,uBAAK,CAAC,gBAAgB,EAAEjB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEkB,EAAE,CAAC;EAC1D,MAAMC,OAAO,GAAuBnB,WAAW,IAAI;IACjDkB,EAAE,EAAEF,SAAS;IACbf,WAAW;IACXmB,QAAQ,EAAEC,SAAS;IACnB,GAAGrB;GACJ;EAED;EACA,MAAMsB,OAAO,GAAuB;IAClC,eAAe,EAAEf,IAAI;IACrB,uBAAuB,EAAEA,IAAI,GAAGL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEgB,EAAE,GAAGG,SAAS;IAC5DE,IAAI,EAAE,UAAU;IAChB,GAAGxB,WAAW;IACd;IACA;IACA;IACAD,GAAG,EAAEmB,+BAAa,CAACnB,GAAG,EAAEC,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAED,GAAG,EAAEe,UAAU;GACrD;EAED;;;;;EAKA,MAAMW,cAAc,GAAGP,kCAAgB,CACrCA,gCAAc,CAAEQ,KAAuC,IAAI;;IACzD,gBAAU,CAACC,OAAO,0CAAEC,KAAK,EAAE;EAC7B,CAAC,EAAER,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,OAAO,CAAC,CACrB;EAED,MAAMC,kBAAkB,GAAGZ,kCAAgB,CACzCA,gCAAc,CAAEQ,KAAuC,IAAI;IACzDf,eAAe,CAAC,KAAK,CAAC;EACxB,CAAC,EAAES,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEW,WAAW,CAAC,CACzB;EAED,MAAMC,kBAAkB,GAAGd,kCAAgB,CACzCA,gCAAc,CAAEQ,KAAuC,IAAI;IACzDnB,cAAc,CAACoB,OAAO,GAAG,IAAI;EAC/B,CAAC,EAAEP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEa,WAAW,CAAC,CACzB;EAED;EACA,IAAIb,OAAO,EAAE;IACXA,OAAO,CAACS,OAAO,GAAGJ,cAAc;IAChCL,OAAO,CAACW,WAAW,GAAGD,kBAAkB;IACxCV,OAAO,CAACa,WAAW,GAAGD,kBAAkB;;EAG1C;EACAT,OAAO,CAACW,MAAM,GAAGhB,gCAAc,CAAEQ,KAA+E,IAAI;IAClH,IAAI,CAACnB,cAAc,CAACoB,OAAO,EAAE;MAC3Bd,OAAO,CAACa,KAAK,EAAE,KAAK,CAAC;;IAGvBnB,cAAc,CAACoB,OAAO,GAAG,KAAK;IAE9Bf,WAAW,CAAC,KAAK,CAAC;EACpB,CAAC,EAAEW,OAAO,CAACW,MAAM,CAAC;EAElBX,OAAO,CAACM,OAAO,GAAGX,gCAAc,CAC7BQ,KAA+E,IAAI;IAClFb,OAAO,CAACa,KAAK,EAAE,CAAClB,IAAI,CAAC;EACvB,CAAC,EACDe,OAAO,CAACM,OAAO,CAChB;EAEDN,OAAO,CAACY,OAAO,GAAGjB,gCAAc,CAC7BQ,KAA+E,IAAI;IAClFd,WAAW,CAAC,IAAI,CAAC;EACnB,CAAC,EACDW,OAAO,CAACY,OAAO,CAChB;EAED;EACAZ,OAAO,CAACa,SAAS,GAAGlB,gCAAc,CAC/BQ,KAAqF,IAAI;IACxF,MAAMW,MAAM,GAAGC,6CAAwB,CAACZ,KAAK,EAAE;MAAElB,IAAI;MAAEN;IAAW,CAAE,CAAC;IACrE,MAAMqC,QAAQ,GAAGnC,QAAQ,EAAE,GAAG,CAAC;IAC/B,MAAMoC,WAAW,GAAGrC,YAAY,GAAGE,YAAY,CAACF,YAAY,CAACgB,EAAE,CAAC,GAAG,CAAC,CAAC;IACrE,IAAIsB,QAAQ,GAAGD,WAAW;IAE1B,QAAQH,MAAM;MACZ,KAAK,MAAM;QACTX,KAAK,CAACgB,cAAc,EAAE;QACtB/B,eAAe,CAAC,IAAI,CAAC;QACrBE,OAAO,CAACa,KAAK,EAAE,IAAI,CAAC;QACpB;MACF,KAAK,OAAO;QACV;QACAA,KAAK,CAACiB,eAAe,EAAE;QACvBjB,KAAK,CAACgB,cAAc,EAAE;QACtB7B,OAAO,CAACa,KAAK,EAAE,KAAK,CAAC;QACrB;MACF,KAAK,aAAa;QAChB,CAACxB,WAAW,IAAI,EAACC,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEyC,QAAQ,KAAI/B,OAAO,CAACa,KAAK,EAAE,KAAK,CAAC;MAClE;MACA,KAAK,QAAQ;QACXvB,YAAY,IAAIM,YAAY,CAACiB,KAAK,EAAEvB,YAAY,CAAC;QACjDuB,KAAK,CAACgB,cAAc,EAAE;QACtB;MACF,KAAK,KAAK;QACR,CAACxC,WAAW,IAAIC,YAAY,IAAIM,YAAY,CAACiB,KAAK,EAAEvB,YAAY,CAAC;QACjE;MACF;QACEsC,QAAQ,GAAGH,uCAAkB,CAACD,MAAM,EAAEG,WAAW,EAAED,QAAQ,CAAC;IAAC;IAEjE,IAAIE,QAAQ,KAAKD,WAAW,EAAE;MAC5B;MACAd,KAAK,CAACgB,cAAc,EAAE;MACtBhC,eAAe,CAACJ,gBAAgB,CAACmC,QAAQ,CAAC,CAAC;MAC3C9B,eAAe,CAAC,IAAI,CAAC;;EAEzB,CAAC,EACDY,OAAO,CAACa,SAAS,CAClB;EAEDb,OAAO,CAACQ,WAAW,GAAGb,gCAAc,CACjCQ,KAA+E,IAAI;IAClFf,eAAe,CAAC,KAAK,CAAC;EACxB,CAAC,EACDY,OAAO,CAACQ,WAAW,CACpB;EAED,OAAO,CAACR,OAAO,EAAEH,OAAO,CAAC;AAC3B;AA3JAyB","names":["useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","React","useRef","listboxId","react_utilities_1","id","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","listboxOnMouseDown","onMouseDown","onBlur","onFocus","onKeyDown","action","dropdownKeyActions_1","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","exports"],"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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -20,48 +20,49 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-combobox/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.13",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "^9.0.0",
-    "@fluentui/react-context-selector": "^9.0.3",
+    "@fluentui/keyboard-keys": "^9.0.1",
+    "@fluentui/react-context-selector": "^9.1.7",
+    "@fluentui/react-field": "9.0.0-alpha.18",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-portal": "^9.0.5",
-    "@fluentui/react-positioning": "^9.2.0",
-    "@fluentui/react-theme": "^9.1.0",
-    "@fluentui/react-utilities": "^9.1.0",
-    "@griffel/react": "^1.3.0",
+    "@fluentui/react-portal": "^9.1.5",
+    "@fluentui/react-positioning": "^9.3.10",
+    "@fluentui/react-theme": "^9.1.5",
+    "@fluentui/react-utilities": "^9.5.1",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <18.0.0",
-    "@types/react-dom": ">=16.8.0 <18.0.0",
-    "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0",
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0",
     "scheduler": "^0.19.0 || ^0.20.0"
   },
   "beachball": {
     "tag": "beta",
     "disallowedChangeTypes": [
       "major",
-      "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }

package/Spec-migration.md

@@ -1,13 +0,0 @@
-# @fluentui/react-combobox Migration Spec
-
-## STATUS: WIP
-
-This Migration guide is a work in progress and is not yet ready for use. It will be fleshed out once the Combobox spec is finalized.
-
-## From v0 Dropdown
-
-## From v8 Dropdown
-
-## From v8 Combobox
-
-## From v8 Pickers