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

package/lib-commonjs/utils/useComboboxBaseState.js

@@ -4,22 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComboboxBaseState = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const useOptionCollection_1 = /*#__PURE__*/require("../utils/useOptionCollection");
-
 const useSelection_1 = /*#__PURE__*/require("../utils/useSelection");
 /**
  * State shared between Combobox and Dropdown components
  */
-
-
 const useComboboxBaseState = props => {
   const {
     appearance = 'outline',
+    children,
+    editable = false,
     inlinePopup = false,
     multiselect,
     onOpenChange,
@@ -28,87 +24,89 @@ const useComboboxBaseState = props => {
   const optionCollection = useOptionCollection_1.useOptionCollection();
   const {
     getOptionAtIndex,
-    getOptionById,
-    getOptionsMatchingValue
+    getOptionsMatchingText
   } = optionCollection;
   const [activeOption, setActiveOption] = React.useState();
+  // track whether keyboard focus outline should be shown
+  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  // track focused state to conditionally render collapsed listbox
+  const [hasFocus, setHasFocus] = React.useState(false);
+  const ignoreNextBlur = React.useRef(false);
+  const selectionState = useSelection_1.useSelection(props);
   const {
-    selectedOptions,
-    selectOption
-  } = useSelection_1.useSelection(props); // update value based on selectedOptions
-
+    selectedOptions
+  } = selectionState;
+  // calculate value based on props, internal value changes, and selected options
   const isFirstMount = react_utilities_1.useFirstMount();
+  const [controllableValue, setValue] = react_utilities_1.useControllableState({
+    state: props.value,
+    initialState: undefined
+  });
   const value = React.useMemo(() => {
-    // don't compute value if it is defined through props,
-    if (props.value !== undefined) {
-      return props.value;
+    // don't compute the value if it is defined through props or setValue,
+    if (controllableValue !== undefined) {
+      return controllableValue;
     }
-
+    // handle defaultValue here, so it is overridden by selection
     if (isFirstMount && props.defaultValue !== undefined) {
       return props.defaultValue;
     }
-
     if (multiselect) {
-      return selectedOptions.join(', ');
+      // editable inputs should not display multiple selected options in the input as text
+      return editable ? '' : selectedOptions.join(', ');
     }
-
     return selectedOptions[0];
-  }, [isFirstMount, multiselect, props.defaultValue, props.value, selectedOptions]); // Handle open state, which is shared with options in context
-
+  }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);
+  // Handle open state, which is shared with options in context
   const [open, setOpenState] = react_utilities_1.useControllableState({
     state: props.open,
     defaultState: props.defaultOpen,
     initialState: false
   });
-
-  const setOpen = (event, newState) => {
+  const setOpen = React.useCallback((event, newState) => {
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
       open: newState
     });
     setOpenState(newState);
-  };
-
-  const onOptionClick = (event, option) => {
-    // clicked option should always become active option
-    setActiveOption(getOptionById(option.id)); // close on option click for single-select
-
-    !multiselect && setOpen(event, false); // handle selection change
-
-    selectOption(event, option);
-  }; // update active option based on change in open state
-
-
+  }, [onOpenChange, setOpenState]);
+  // update active option based on change in open state or children
   React.useEffect(() => {
-    if (open) {
-      // if there is a selection, start at the most recently selected item
-      if (selectedOptions.length > 0) {
-        const lastSelectedOption = getOptionsMatchingValue(v => v === selectedOptions[selectedOptions.length - 1]).pop();
-        lastSelectedOption && setActiveOption(lastSelectedOption);
-      } // default to starting at the first option
+    if (open && !activeOption) {
+      // if it is single-select and there is a selected option, start at the selected option
+      if (!multiselect && selectedOptions.length > 0) {
+        const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();
+        selectedOption && setActiveOption(selectedOption);
+      }
+      // default to starting at the first option
       else {
         setActiveOption(getOptionAtIndex(0));
       }
-    } else {
+    } else if (!open) {
       // reset the active option when closing
       setActiveOption(undefined);
-    } // this should only be run in response to changes in the open state
+    }
+    // this should only be run in response to changes in the open state or children
     // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [open]);
-  return { ...optionCollection,
+  }, [open, children]);
+  return {
+    ...optionCollection,
+    ...selectionState,
     activeOption,
     appearance,
+    focusVisible,
+    hasFocus,
+    ignoreNextBlur,
     inlinePopup,
-    onOptionClick,
     open,
-    selectedOptions,
-    selectOption,
     setActiveOption,
+    setFocusVisible,
+    setHasFocus,
     setOpen,
+    setValue,
     size,
     value
   };
 };
-
 exports.useComboboxBaseState = useComboboxBaseState;
 //# sourceMappingURL=useComboboxBaseState.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["utils/useComboboxBaseState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps) => {\n  const { appearance = 'outline', inlinePopup = false, multiselect, onOpenChange, size = 'medium' } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionById, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n  const { selectedOptions, selectOption } = useSelection(props);\n\n  // update value based on selectedOptions\n  const isFirstMount = useFirstMount();\n  const value = React.useMemo(() => {\n    // don't compute value if it is defined through props,\n    if (props.value !== undefined) {\n      return props.value;\n    }\n\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    if (multiselect) {\n      return selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [isFirstMount, multiselect, props.defaultValue, props.value, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n    onOpenChange?.(event, { open: newState });\n    setOpenState(newState);\n  };\n\n  const onOptionClick = (event: React.MouseEvent<HTMLElement>, option: OptionValue) => {\n    // clicked option should always become active option\n    setActiveOption(getOptionById(option.id));\n\n    // close on option click for single-select\n    !multiselect && setOpen(event, false);\n\n    // handle selection change\n    selectOption(event, option);\n  };\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if there is a selection, start at the most recently selected item\n      if (selectedOptions.length > 0) {\n        const lastSelectedOption = getOptionsMatchingValue(\n          v => v === selectedOptions[selectedOptions.length - 1],\n        ).pop();\n        lastSelectedOption && setActiveOption(lastSelectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  return {\n    ...optionCollection,\n    activeOption,\n    appearance,\n    inlinePopup,\n    onOptionClick,\n    open,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n    value,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","useOptionCollection_1","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","React","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","useSelection_1","selectedOptions","isFirstMount","react_utilities_1","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"]}

package/lib-commonjs/utils/useComboboxPopup.js

@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useComboboxPopup = void 0;
-
 const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
   const {
     positioning
-  } = props; // popper options
-
+  } = props;
+  // popper options
   const popperOptions = {
     position: 'below',
     align: 'start',
@@ -27,12 +24,15 @@ function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
     targetRef,
     containerRef
   } = react_positioning_1.usePositioning(popperOptions);
-  return [{ ...triggerShorthand,
+  const listboxRef = react_utilities_1.useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
+  const listbox = listboxShorthand && {
+    ...listboxShorthand,
+    ref: listboxRef
+  };
+  return [{
+    ...triggerShorthand,
     ref: react_utilities_1.useMergedRefs(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef)
-  }, { ...listboxShorthand,
-    ref: react_utilities_1.useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef)
-  }];
+  }, listbox];
 }
-
 exports.useComboboxPopup = useComboboxPopup;
 //# sourceMappingURL=useComboboxPopup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["utils/useComboboxPopup.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAeA,SAAgB,gBAAhB,CACE,KADF,EAEE,gBAFF,EAGE,gBAHF,EAG2D;EAEzD,MAAM;IAAE;EAAF,IAAkB,KAAxB,CAFyD,CAIzD;;EACA,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,OADU;IAEpB,KAAK,EAAE,OAFa;IAGpB,MAAM,EAAE;MAAE,SAAS,EAAE,CAAb;MAAgB,QAAQ,EAAE;IAA1B,CAHY;IAIpB,GAAG,mBAAA,CAAA,2BAAA,CAA4B,WAA5B;EAJiB,CAAtB;EAOA,MAAM;IAAE,SAAF;IAAa;EAAb,IAA8B,mBAAA,CAAA,cAAA,CAAe,aAAf,CAApC;EAEA,OAAO,CACL,EAAE,GAAG,gBAAL;IAAuB,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,gBAAgB,KAAA,IAAhB,IAAA,gBAAgB,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAA,gBAAgB,CAAE,GAAhC,EAAqC,SAArC;EAA5B,CADK,EAEL,EAAE,GAAG,gBAAL;IAAuB,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,gBAAgB,KAAA,IAAhB,IAAA,gBAAgB,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAA,gBAAgB,CAAE,GAAhC,EAAqC,YAArC;EAA5B,CAFK,CAAP;AAID;;AArBD,OAAA,CAAA,gBAAA,GAAA,gBAAA","sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'button'>>, ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'input'>>, ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>, ExtractSlotProps<Slot<typeof Listbox>>] {\n  const { positioning } = props;\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  return [\n    { ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) },\n    { ...listboxShorthand, ref: useMergedRefs(listboxShorthand?.ref, containerRef) },\n  ];\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAeA,SAAgBA,gBAAgB,CAC9BC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD;EAKzD,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAK;EAE7B;EACA,MAAMI,aAAa,GAAG;IACpBC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,OAAgB;IACvBC,MAAM,EAAE;MAAEC,SAAS,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAC,CAAE;IACrC,GAAGC,+CAA2B,CAACP,WAAW;GAC3C;EAED,MAAM;IAAEQ,SAAS;IAAEC;EAAY,CAAE,GAAGF,kCAAc,CAACN,aAAa,CAAC;EAEjE,MAAMS,UAAU,GAAGC,+BAAa,CAACZ,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEa,GAAG,EAAEH,YAAY,CAAC;EACrE,MAAMI,OAAO,GAAGd,gBAAgB,IAAI;IAAE,GAAGA,gBAAgB;IAAEa,GAAG,EAAEF;EAAU,CAAE;EAE5E,OAAO,CAAC;IAAE,GAAGZ,gBAAgB;IAAEc,GAAG,EAAED,+BAAa,CAACb,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEc,GAAG,EAAEJ,SAAS;EAAC,CAAE,EAAEK,OAAO,CAAC;AACjG;AAxBAC","names":["useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","react_positioning_1","targetRef","containerRef","listboxRef","react_utilities_1","ref","listbox","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxPopup.ts"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"]}

package/lib-commonjs/utils/useOptionCollection.js

@@ -4,83 +4,70 @@ 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 getOptionsMatchingValue = matcher => {
-      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);
+    const getOptionsMatchingText = matcher => {
+      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);
     };
-
     return {
       getCount,
       getOptionAtIndex,
       getIndexOfId,
       getOptionById,
-      getOptionsMatchingValue
+      getOptionsMatchingText
     };
   }, []);
   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":["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 getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"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

@@ -0,0 +1,43 @@
+"use strict";
+
+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
+  } = state;
+  const scrollContainerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (scrollContainerRef.current && activeOption && react_utilities_1.canUseDOM()) {
+      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
+      if (!activeOptionElement) {
+        return;
+      }
+      const {
+        offsetHeight,
+        offsetTop
+      } = activeOptionElement;
+      const {
+        offsetHeight: parentOffsetHeight,
+        scrollTop
+      } = scrollContainerRef.current;
+      const isAbove = offsetTop < scrollTop;
+      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) {
+        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+      }
+    }
+  }, [activeOption]);
+  return scrollContainerRef;
+}
+exports.useScrollOptionsIntoView = useScrollOptionsIntoView;
+//# sourceMappingURL=useScrollOptionsIntoView.js.map

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

@@ -0,0 +1 @@
+{"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,33 +4,29 @@ 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,
     multiselect,
-    onSelect
+    onOptionSelect
   } = props;
   const [selectedOptions, setSelectedOptions] = react_utilities_1.useControllableState({
     state: props.selectedOptions,
     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,19 +35,26 @@ const useSelection = props => {
         newSelection = [...selectedOptions, option.value];
       }
     }
-
     setSelectedOptions(newSelection);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, {
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
       optionValue: option.value,
+      optionText: option.text,
       selectedOptions: newSelection
     });
+  }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
+  const clearSelection = event => {
+    setSelectedOptions([]);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
+      optionValue: undefined,
+      optionText: undefined,
+      selectedOptions: []
+    });
   };
-
   return {
-    selectedOptions,
-    selectOption
+    clearSelection,
+    selectOption,
+    selectedOptions
   };
 };
-
 exports.useSelection = useSelection;
 //# sourceMappingURL=useSelection.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["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,IAAoD,KAA1D;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,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,MAAM,CAAC,KAAtB;MAA6B,eAAe,EAAE;IAA9C,CAAV,CAAR;EACD,CAvBD;;EAyBA,OAAO;IAAE,eAAF;IAAmB;EAAnB,CAAP;AACD,CAnCM;;AAAM,OAAA,CAAA,YAAA,GAAY,YAAZ","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionValue } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionValue => {\n  const { defaultSelectedOptions, multiselect, onSelect } = 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    onSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n  };\n\n  return { selectedOptions, selectOption };\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"]}