@fluentui/react-combobox 9.0.0-beta.19 → 9.0.0-beta.21

package/lib-commonjs/utils/useOptionCollection.js

@@ -4,35 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOptionCollection = void 0;
-
 const React = /*#__PURE__*/require("react");
 /**
  * A hook for managing a collection of child Options
  */
-
-
 const useOptionCollection = () => {
   const nodes = React.useRef([]);
   const collectionAPI = React.useMemo(() => {
     const getCount = () => nodes.current.length;
-
     const getOptionAtIndex = index => {
       var _a;
-
       return (_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option;
     };
-
     const getIndexOfId = id => nodes.current.findIndex(node => node.option.id === id);
-
     const getOptionById = id => {
       const item = nodes.current.find(node => node.option.id === id);
       return item === null || item === void 0 ? void 0 : item.option;
     };
-
     const getOptionsMatchingText = matcher => {
       return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);
     };
-
     return {
       getCount,
       getOptionAtIndex,
@@ -43,44 +34,40 @@ const useOptionCollection = () => {
   }, []);
   const registerOption = React.useCallback((option, element) => {
     var _a;
-
     const index = nodes.current.findIndex(node => {
       if (!node.element || !element) {
         return false;
       }
-
       if (node.option.id === option.id) {
         return true;
-      } // use the DOM method compareDocumentPosition to order the current node against registered nodes
+      }
+      // use the DOM method compareDocumentPosition to order the current node against registered nodes
       // eslint-disable-next-line no-bitwise
-
-
       return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
-    }); // do not register the option if it already exists
-
+    });
+    // do not register the option if it already exists
     if (((_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option.id) !== option.id) {
       const newItem = {
         element,
         option
-      }; // If an index is not found we will push the element to the end.
-
+      };
+      // If an index is not found we will push the element to the end.
       if (index === -1) {
         nodes.current = [...nodes.current, newItem];
       } else {
         nodes.current.splice(index, 0, newItem);
       }
-    } // return the unregister function
-
-
+    }
+    // return the unregister function
     return () => {
       nodes.current = nodes.current.filter(node => node.option.id !== option.id);
     };
   }, []);
-  return { ...collectionAPI,
+  return {
+    ...collectionAPI,
     options: nodes.current.map(node => node.option),
     registerOption
   };
 };
-
 exports.useOptionCollection = useOptionCollection;
 //# sourceMappingURL=useOptionCollection.js.map

package/lib-commonjs/utils/useOptionCollection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;;;AAGO,MAAMA,mBAAmB,GAAG,MAA4B;EAC7D,MAAMC,KAAK,GAAGC,KAAK,CAACC,MAAM,CAAkD,EAAE,CAAC;EAE/E,MAAMC,aAAa,GAAGF,KAAK,CAACG,OAAO,CAAC,MAAK;IACvC,MAAMC,QAAQ,GAAG,MAAML,KAAK,CAACM,OAAO,CAACC,MAAM;IAC3C,MAAMC,gBAAgB,GAAIC,KAAa,IAAI;MAAA;MAAC,kBAAK,CAACH,OAAO,CAACG,KAAK,CAAC,0CAAEC,MAAM;IAAA;IACxE,MAAMC,YAAY,GAAIC,EAAU,IAAKZ,KAAK,CAACM,OAAO,CAACO,SAAS,CAACC,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKA,EAAE,CAAC;IAC3F,MAAMG,aAAa,GAAIH,EAAU,IAAI;MACnC,MAAMI,IAAI,GAAGhB,KAAK,CAACM,OAAO,CAACW,IAAI,CAACH,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKA,EAAE,CAAC;MAC9D,OAAOI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEN,MAAM;IACrB,CAAC;IACD,MAAMQ,sBAAsB,GAAIC,OAAmC,IAAI;MACrE,OAAOnB,KAAK,CAACM,OAAO,CAACc,MAAM,CAACN,IAAI,IAAIK,OAAO,CAACL,IAAI,CAACJ,MAAM,CAACW,IAAI,CAAC,CAAC,CAACC,GAAG,CAACR,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAAC;IACzF,CAAC;IAED,OAAO;MACLL,QAAQ;MACRG,gBAAgB;MAChBG,YAAY;MACZI,aAAa;MACbG;KACD;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,cAAc,GAAGtB,KAAK,CAACuB,WAAW,CAAC,CAACd,MAAmB,EAAEe,OAAoB,KAAI;;IACrF,MAAMhB,KAAK,GAAGT,KAAK,CAACM,OAAO,CAACO,SAAS,CAACC,IAAI,IAAG;MAC3C,IAAI,CAACA,IAAI,CAACW,OAAO,IAAI,CAACA,OAAO,EAAE;QAC7B,OAAO,KAAK;;MAGd,IAAIX,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKF,MAAM,CAACE,EAAE,EAAE;QAChC,OAAO,IAAI;;MAGb;MACA;MACA,OAAOE,IAAI,CAACW,OAAO,CAACC,uBAAuB,CAACD,OAAO,CAAC,GAAGE,IAAI,CAACC,2BAA2B;IACzF,CAAC,CAAC;IAEF;IACA,IAAI,YAAK,CAACtB,OAAO,CAACG,KAAK,CAAC,0CAAEC,MAAM,CAACE,EAAE,MAAKF,MAAM,CAACE,EAAE,EAAE;MACjD,MAAMiB,OAAO,GAAG;QACdJ,OAAO;QACPf;OACD;MAED;MACA,IAAID,KAAK,KAAK,CAAC,CAAC,EAAE;QAChBT,KAAK,CAACM,OAAO,GAAG,CAAC,GAAGN,KAAK,CAACM,OAAO,EAAEuB,OAAO,CAAC;OAC5C,MAAM;QACL7B,KAAK,CAACM,OAAO,CAACwB,MAAM,CAACrB,KAAK,EAAE,CAAC,EAAEoB,OAAO,CAAC;;;IAI3C;IACA,OAAO,MAAK;MACV7B,KAAK,CAACM,OAAO,GAAGN,KAAK,CAACM,OAAO,CAACc,MAAM,CAACN,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKF,MAAM,CAACE,EAAE,CAAC;IAC5E,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACL,GAAGT,aAAa;IAChB4B,OAAO,EAAE/B,KAAK,CAACM,OAAO,CAACgB,GAAG,CAACR,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAAC;IAC/Ca;GACD;AACH,CAAC;AAjEYS,2BAAmB","names":["useOptionCollection","nodes","React","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"]}

package/lib-commonjs/utils/useScrollOptionsIntoView.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useScrollOptionsIntoView = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 function useScrollOptionsIntoView(state) {
   const {
     activeOption
@@ -17,11 +14,9 @@ function useScrollOptionsIntoView(state) {
   React.useEffect(() => {
     if (scrollContainerRef.current && activeOption && react_utilities_1.canUseDOM()) {
       const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
-
       if (!activeOptionElement) {
         return;
       }
-
       const {
         offsetHeight,
         offsetTop
@@ -31,11 +26,10 @@ function useScrollOptionsIntoView(state) {
         scrollTop
       } = scrollContainerRef.current;
       const isAbove = offsetTop < scrollTop;
-      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight; // add a small buffer for general visual nicety
+      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+      // add a small buffer for general visual nicety
       // it looks slightly better if the option has some space from the top/bottom while arrowing
-
       const buffer = 2;
-
       if (isAbove) {
         scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
       } else if (isBelow) {
@@ -45,6 +39,5 @@ function useScrollOptionsIntoView(state) {
   }, [activeOption]);
   return scrollContainerRef;
 }
-
 exports.useScrollOptionsIntoView = useScrollOptionsIntoView;
 //# sourceMappingURL=useScrollOptionsIntoView.js.map

package/lib-commonjs/utils/useScrollOptionsIntoView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,SAAgB,wBAAhB,CAAyC,KAAzC,EAA4D;EAC1D,MAAM;IAAE;EAAF,IAAmB,KAAzB;EACA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAA3B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,kBAAkB,CAAC,OAAnB,IAA8B,YAA9B,IAA8C,iBAAA,CAAA,SAAA,EAAlD,EAA+D;MAC7D,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,OAAnB,CAA2B,aAA3B,CAAyC,IAAI,YAAY,CAAC,EAAE,EAA5D,CAA5B;;MAEA,IAAI,CAAC,mBAAL,EAA0B;QACxB;MACD;;MAED,MAAM;QAAE,YAAF;QAAgB;MAAhB,IAA8B,mBAApC;MACA,MAAM;QAAE,YAAY,EAAE,kBAAhB;QAAoC;MAApC,IAAkD,kBAAkB,CAAC,OAA3E;MAEA,MAAM,OAAO,GAAG,SAAS,GAAG,SAA5B;MACA,MAAM,OAAO,GAAG,SAAS,GAAG,YAAZ,GAA2B,SAAS,GAAG,kBAAvD,CAX6D,CAa7D;MACA;;MACA,MAAM,MAAM,GAAG,CAAf;;MAEA,IAAI,OAAJ,EAAa;QACX,kBAAkB,CAAC,OAAnB,CAA2B,QAA3B,CAAoC,CAApC,EAAuC,SAAS,GAAG,MAAnD;MACD,CAFD,MAEO,IAAI,OAAJ,EAAa;QAClB,kBAAkB,CAAC,OAAnB,CAA2B,QAA3B,CAAoC,CAApC,EAAuC,SAAS,GAAG,kBAAZ,GAAiC,YAAjC,GAAgD,MAAvF;MACD;IACF;EACF,CAxBD,EAwBG,CAAC,YAAD,CAxBH;EA0BA,OAAO,kBAAP;AACD;;AA/BD,OAAA,CAAA,wBAAA,GAAA,wBAAA","sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA,SAAgBA,wBAAwB,CAACC,KAAmB;EAC1D,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAK;EAC9B,MAAME,kBAAkB,GAAGC,KAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAE7DD,KAAK,CAACE,SAAS,CAAC,MAAK;IACnB,IAAIH,kBAAkB,CAACI,OAAO,IAAIL,YAAY,IAAIM,2BAAS,EAAE,EAAE;MAC7D,MAAMC,mBAAmB,GAAGN,kBAAkB,CAACI,OAAO,CAACG,aAAa,CAAC,IAAIR,YAAY,CAACS,EAAE,EAAE,CAAgB;MAE1G,IAAI,CAACF,mBAAmB,EAAE;QACxB;;MAGF,MAAM;QAAEG,YAAY;QAAEC;MAAS,CAAE,GAAGJ,mBAAmB;MACvD,MAAM;QAAEG,YAAY,EAAEE,kBAAkB;QAAEC;MAAS,CAAE,GAAGZ,kBAAkB,CAACI,OAAO;MAElF,MAAMS,OAAO,GAAGH,SAAS,GAAGE,SAAS;MACrC,MAAME,OAAO,GAAGJ,SAAS,GAAGD,YAAY,GAAGG,SAAS,GAAGD,kBAAkB;MAEzE;MACA;MACA,MAAMI,MAAM,GAAG,CAAC;MAEhB,IAAIF,OAAO,EAAE;QACXb,kBAAkB,CAACI,OAAO,CAACY,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGK,MAAM,CAAC;OAC3D,MAAM,IAAID,OAAO,EAAE;QAClBd,kBAAkB,CAACI,OAAO,CAACY,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGC,kBAAkB,GAAGF,YAAY,GAAGM,MAAM,CAAC;;;EAGpG,CAAC,EAAE,CAAChB,YAAY,CAAC,CAAC;EAElB,OAAOC,kBAAkB;AAC3B;AA/BAiB","names":["useScrollOptionsIntoView","state","activeOption","scrollContainerRef","React","useRef","useEffect","current","react_utilities_1","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"]}

package/lib-commonjs/utils/useSelection.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSelection = void 0;
-
+const react_1 = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const useSelection = props => {
   const {
     defaultSelectedOptions,
@@ -18,19 +17,16 @@ const useSelection = props => {
     defaultState: defaultSelectedOptions,
     initialState: []
   });
-
-  const selectOption = (event, option) => {
+  const selectOption = react_1.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)];
@@ -39,15 +35,13 @@ 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, {
@@ -56,13 +50,11 @@ const useSelection = props => {
       selectedOptions: []
     });
   };
-
   return {
     clearSelection,
     selectOption,
     selectedOptions
   };
 };
-
 exports.useSelection = useSelection;
 //# sourceMappingURL=useSelection.js.map

package/lib-commonjs/utils/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/utils/useSelection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAIO,MAAM,YAAY,GAAI,KAAD,IAA0C;EACpE,MAAM;IAAE,sBAAF;IAA0B,WAA1B;IAAuC;EAAvC,IAA0D,KAAhE;EAEA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,iBAAA,CAAA,oBAAA,CAAqB;IACjE,KAAK,EAAE,KAAK,CAAC,eADoD;IAEjE,YAAY,EAAE,sBAFmD;IAGjE,YAAY,EAAE;EAHmD,CAArB,CAA9C;;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,UAAU,EAAE,MAAM,CAAC,IAAhD;MAAsD,eAAe,EAAE;IAAvE,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,UAAU,EAAE,SAAtC;MAAiD,eAAe,EAAE;IAAlE,CAAV,CAAd;EACD,CAHD;;EAKA,OAAO;IAAE,cAAF;IAAkB,YAAlB;IAAgC;EAAhC,CAAP;AACD,CAxCM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourcesContent":["import { 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 = (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\n  const clearSelection = (event: SelectionEvents) => {\n    setSelectedOptions([]);\n    onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n  };\n\n  return { clearSelection, selectOption, selectedOptions };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAIO,MAAMA,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,sCAAoB,CAAC;IACjEC,KAAK,EAAEP,KAAK,CAACI,eAAe;IAC5BI,YAAY,EAAEP,sBAAsB;IACpCQ,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGC,mBAAW,CAC9B,CAACC,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAId,WAAW,EAAE;MACf,MAAMe,aAAa,GAAGb,eAAe,CAACc,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGX,eAAe,CAACgB,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGb,eAAe,CAACgB,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGX,eAAe,EAAES,MAAM,CAACG,KAAK,CAAC;;;IAIrDX,kBAAkB,CAACU,YAAY,CAAC;IAChCZ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGS,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEnB,eAAe,EAAEW;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACZ,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMmB,cAAc,GAAIZ,KAAsB,IAAI;IAChDP,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGS,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAErB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEoB,cAAc;IAAEd,YAAY;IAAEN;EAAe,CAAE;AAC1D,CAAC;AA3CYsB,oBAAY","names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","react_utilities_1","state","defaultState","initialState","selectOption","react_1","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined","exports"],"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-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,16 @@ 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 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,
@@ -52,33 +47,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 +82,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 +92,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':
         !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 +129,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":["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":["useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","React","useRef","listbox","tabIndex","undefined","trigger","id","role","react_utilities_1","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, 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 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  /*\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,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.0.0-beta.19",
+  "version": "9.0.0-beta.21",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,19 +27,19 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-context-selector": "^9.1.3",
-    "@fluentui/react-field": "9.0.0-alpha.12",
+    "@fluentui/react-context-selector": "^9.1.5",
+    "@fluentui/react-field": "9.0.0-alpha.14",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-portal": "^9.0.14",
-    "@fluentui/react-positioning": "^9.3.5",
+    "@fluentui/react-portal": "^9.1.0",
+    "@fluentui/react-positioning": "^9.3.7",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
+    "@fluentui/react-utilities": "^9.4.0",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {