npm - @fluentui/react-combobox - Versions diffs - 9.0.0-beta.16 → 9.0.0-beta.18 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/lib-commonjs/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/useListbox.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AAEA,MAAA,qBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,0BAAA,gBAAA,OAAA,CAAA,sCAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE;EAAF,IAAkB,KAAxB;EACA,MAAM,gBAAgB,GAAG,qBAAA,CAAA,mBAAA,EAAzB;EACA,MAAM;IAAE,QAAF;IAAY,gBAAZ;IAA8B;EAA9B,IAA+C,gBAArD;EAEA,MAAM;IAAE,~~eAAF~~;~~IAAmB~~;~~EAAnB~~,~~IAAoC~~,cAAA,CAAA,YAAA,CAAa,KAAb,~~CAA1C~~;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC,CAPoG,CASpG;EACA;;EACA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAxC;;EAEA,MAAM,SAAS,GAAI,KAAD,IAA4C;IAC5D,MAAM,MAAM,GAAG,oBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC;MAAE,IAAI,EAAE;IAAR,CAAhC,CAAf;IACA,MAAM,QAAQ,GAAG,QAAQ,KAAK,CAA9B;IACA,MAAM,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,EAAd,CAAf,GAAmC,CAAC,CAApE;IACA,IAAI,QAAQ,GAAG,WAAf;;IAEA,QAAQ,MAAR;MACE,KAAK,QAAL;MACA,KAAK,aAAL;QACE,YAAY,IAAI,YAAY,CAAC,KAAD,EAAQ,YAAR,CAA5B;QACA;;MACF;QACE,QAAQ,GAAG,oBAAA,CAAA,kBAAA,CAAmB,MAAnB,EAA2B,WAA3B,EAAwC,QAAxC,CAAX;IANJ;;IASA,IAAI,QAAQ,KAAK,WAAjB,EAA8B;MAC5B;MACA,KAAK,CAAC,cAAN;MACA,eAAe,CAAC,gBAAgB,CAAC,QAAD,CAAjB,CAAf;MACA,eAAe,CAAC,IAAD,CAAf;IACD;EACF,CArBD;;EAuBA,MAAM,WAAW,GAAI,KAAD,IAAyC;IAC3D,eAAe,CAAC,KAAD,CAAf;EACD,CAFD,CApCoG,CAwCpG;;;EACA,MAAM,kBAAkB,GAAG,wBAAA,CAAA,mBAAA,CAAoB,iBAAA,CAAA,eAApB,CAA3B;EACA,MAAM,oBAAoB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,YAA/C,CAA7B;EACA,MAAM,oBAAoB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,YAA/C,CAA7B;EACA,MAAM,uBAAuB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,eAA/C,CAAhC;EACA,MAAM,oBAAoB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,YAA/C,CAA7B;EACA,MAAM,uBAAuB,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,eAA/C,CAAhC,CA9CoG,CAgDpG;;EACA,MAAM,mBAAmB,GAAG,kBAAkB,GAC1C;IACE,YAAY,EAAE,oBADhB;IAEE,YAAY,EAAE,oBAFhB;IAGE,eAAe,EAAE,uBAHnB;IAIE,YAAY,EAAE,oBAJhB;IAKE,eAAe,EAAE;EALnB,CAD0C,GAQ1C;IACE,YADF;IAEE,YAFF;IAGE,eAHF;IAIE,YAJF;IAKE;EALF,CARJ;EAgBA,MAAM,KAAK,GAAiB;IAC1B,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADc;IAI1B,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,IAAI,EAAE,~~SAF2B~~;MAGjC,yBAAyB,kBAAkB,GAAG,SAAH,GAAe,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAE,EAHvC;MAIjC,wBAAwB,WAJS;MAKjC,QAAQ,EAAE,CALuB;MAMjC,GAAG;IAN8B,CAA7B,CAJoB;IAY1B,WAZ0B;IAa1B,GAAG,~~gBAbuB~~;~~IAc1B~~,GAAG;~~EAduB~~,CAA5B;~~EAiBA~~,MAAM,kBAAkB,GAAG,0BAAA,CAAA,wBAAA,CAAyB,KAAzB,CAA3B;EACA,KAAK,CAAC,IAAN,CAAW,GAAX,GAAiB,iBAAA,CAAA,aAAA,CAAc,KAAK,CAAC,IAAN,CAAW,GAAzB,EAA8B,kBAA9B,CAAjB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,iBAAA,CAAA,cAAA,CAAe,KAAK,CAAC,IAAN,CAAW,SAA1B,EAAqC,SAArC,CAAjB,CAAvB;EACA,KAAK,CAAC,IAAN,CAAW,WAAX,GAAyB,iBAAA,CAAA,gBAAA,CAAiB,iBAAA,CAAA,cAAA,CAAe,KAAK,CAAC,IAAN,CAAW,WAA1B,EAAuC,WAAvC,CAAjB,CAAzB;EAEA,OAAO,KAAP;AACD,~~CAzFM~~;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { selectedOptions, selectOption } = useSelection(props);\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 const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\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\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n ...props,\n }),\n multiselect,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/useListbox.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\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 const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\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\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n ...props,\n }),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Option/useOption.js CHANGED Viewed

@@ -17,18 +17,27 @@ const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext")
 const ListboxContext_1 = /*#__PURE__*/require("../../contexts/ListboxContext");
-function getValueString(value, children) {
-  if (value) {
-    return value;
+function getTextString(text, children) {
+  if (text !== undefined) {
+    return text;
   }
-  let valueString = '';
+  let textString = '';
+  let hasNonStringChild = false;
   React.Children.forEach(children, child => {
     if (typeof child === 'string') {
-      valueString += child;
+      textString += child;
+    } else {
+      hasNonStringChild = true;
     }
-  });
-  return valueString;
+  }); // warn if an Option has non-string children and no text prop
+  if (hasNonStringChild) {
+    // eslint-disable-next-line no-console
+    console.warn('Provide a `text` prop to Option components when they contain non-string children.');
+  }
+  return textString;
 }
 /**
  * Create the state required to render Option.
@@ -43,19 +52,23 @@ function getValueString(value, children) {
 const useOption_unstable = (props, ref) => {
   const {
+    children,
     disabled,
+    text,
     value
   } = props;
   const optionRef = React.useRef(null);
-  const optionValue = getValueString(value, props.children); // use the id if provided, otherwise use a generated id
+  const optionText = getTextString(text, children);
+  const optionValue = value !== null && value !== void 0 ? value : optionText; // use the id if provided, otherwise use a generated id
   const id = react_utilities_1.useId('fluent-option', props.id); // data used for context registration & events
   const optionData = React.useMemo(() => ({
     id,
     disabled,
+    text: optionText,
     value: optionValue
-  }), [id, disabled, optionValue]); // context values
+  }), [id, disabled, optionText, optionValue]); // context values
   const focusVisible = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.focusVisible);
   const multiselect = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.multiselect);
@@ -106,6 +119,13 @@ const useOption_unstable = (props, ref) => {
       return registerOption(optionData, optionRef.current);
     }
   }, [id, optionData, registerOption]);
+  const semanticProps = multiselect ? {
+    role: 'menuitemcheckbox',
+    'aria-checked': selected
+  } : {
+    role: 'option',
+    'aria-selected': selected
+  };
   return {
     components: {
       root: 'div',
@@ -113,10 +133,9 @@ const useOption_unstable = (props, ref) => {
     },
     root: react_utilities_1.getNativeElementProps('div', {
       ref: react_utilities_1.useMergedRefs(ref, optionRef),
-      role: 'option',
       'aria-disabled': disabled ? 'true' : undefined,
-      'aria-selected': `${selected}`,
       id,
+      ...semanticProps,
       ...props,
       onClick
     }),

package/lib-commonjs/components/Option/useOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAIA,SAAS,~~cAAT~~,~~CAAwB~~,~~KAAxB~~,~~EAAmD~~,~~QAAnD~~,~~EAA4E~~;~~EAC1E~~,IAAI,~~KAAJ~~,~~EAAW~~;~~IACT~~,OAAO,~~KAAP~~;EACD;;EAED,IAAI,~~WAAW~~,GAAG,~~EAAlB~~;EACA,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,EAAiC,KAAK,IAAG;IACvC,IAAI,OAAO,KAAP,KAAiB,QAArB,EAA+B;MAC7B,~~WAAW~~,IAAI,~~KAAf~~;IACD;EACF,~~CAJD~~;~~EAKA~~,OAAO,~~WAAP~~;AACD;AAED;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;EACjG,MAAM;IAAE,QAAF;IAAY;~~EAAZ,~~IAAsB,~~KAA5B~~;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAlB;EACA,MAAM,~~WAAW~~,GAAG,~~cAAc~~,CAAC,~~KAAD~~,~~EAAQ~~,KAAK,~~CAAC~~,~~QAAd~~,~~CAAlC~~,~~CAHiG~~,~~CAKjG~~;;EACA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,KAAK,CAAC,EAA7B,CAAX,~~CANiG~~,~~CAQjG~~;;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,OAAN,CAA2B,OAAO;IAAE,EAAF;IAAM,QAAN;IAAgB,KAAK,EAAE;~~EAAvB~~,CAAP,CAA3B,~~EAAyE~~,~~CAC1F~~,~~EAD0F~~,~~EAE1F~~,~~QAF0F~~,~~EAG1F~~,~~WAH0F~~,~~CAAzE~~,CAAnB,~~CATiG~~,~~CAejG~~;;EACA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;EACA,MAAM,WAAW,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,WAA9C,CAApB;EACA,MAAM,cAAc,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,cAA9C,CAAvB;EACA,MAAM,QAAQ,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAG;IACxD,MAAM,eAAe,GAAG,GAAG,CAAC,eAA5B;IAEA,OAAO,CAAC,CAAC,WAAF,IAAiB,CAAC,CAAC,eAAe,CAAC,IAAhB,CAAqB,CAAC,IAAI,CAAC,KAAK,WAAhC,CAA1B;EACD,CAJgB,CAAjB;EAKA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;EACA,MAAM,eAAe,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,eAA9C,CAAxB;EACA,MAAM,OAAO,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,OAA/C,CAAhB,~~CA1BiG~~,~~CA4BjG~~;;EACA,MAAM,MAAM,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAG;;;IACtD,OAAO,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,YAAJ,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,EAAlB,MAAyB,SAAzB,IAAsC,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,YAAJ,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,EAAlB,MAAyB,EAAtE;EACD,CAFc,CAAf,~~CA7BiG~~,~~CAiCjG~~;;EACA,IAAI,SAAS,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB,CAAhB;;EACA,IAAI,WAAJ,EAAiB;IACf,SAAS,GAAG,QAAQ,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAH,GAA+B,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,uBAAD,EAAwB,IAAxB,CAAnD;EACD;;EAED,MAAM,OAAO,GAAI,KAAD,IAA4C;;;IAC1D,IAAI,QAAJ,EAAc;MACZ,KAAK,CAAC,cAAN;MACA;IACD,CAJyD,CAM1D;;;IACA,eAAe,CAAC,UAAD,CAAf,CAP0D,CAS1D;;IACA,IAAI,CAAC,WAAL,EAAkB;MAChB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,KAAH,EAAU,KAAV,CAAP;IACD,CAZyD,CAc1D;;;IACA,YAAY,CAAC,KAAD,EAAQ,UAAR,CAAZ;IAEA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,KAAH,CAAb;EACD,CAlBD,~~CAvCiG~~,~~CA2DjG~~;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,EAAE,IAAI,SAAS,CAAC,OAApB,EAA6B;MAC3B,OAAO,cAAc,CAAC,UAAD,EAAa,SAAS,CAAC,OAAvB,CAArB;IACD;EACF,CAJD,EAIG,CAAC,EAAD,EAAK,UAAL,EAAiB,cAAjB,CAJH;EAMA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE;IAFD,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,SAAnB,CAD4B;MAEjC,~~IAAI,EAAE,QAF2B;MAGjC,~~iBAAiB,QAAQ,GAAG,MAAH,GAAY,~~SAHJ~~;MAIjC,~~iBAAiB,~~GAAG,~~QAAQ,EAJK~~;MAKjC,~~EALiC;MAMjC,~~GAAG,~~KAN8B~~;~~MAOjC~~;~~IAPiC~~,CAA7B,CALD;~~IAcL~~,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,eAAe,MADH;QAEZ,QAAQ,EAAE;MAFE;IAF6B,CAAlC,~~CAdN~~;IAqBL,~~MArBK~~;IAsBL,~~QAtBK~~;IAuBL,~~YAvBK~~;IAwBL~~,WAxBK~~;~~IAyBL;EAzBK~~,CAAP;~~AA2BD~~,~~CA7FM~~;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction ~~getValueString~~(~~value~~: string \| undefined, children: React.ReactNode) {\n if (~~value~~) {\n return ~~value~~;\n }\n\n let ~~valueString~~ = '';\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n ~~valueString~~ += child;\n }\n });\n return ~~valueString~~;\n}\n\n/*\n Create the state required to render Option.\n \n The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n \n @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { disabled, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const ~~optionValue~~ = ~~getValueString~~(~~value~~, ~~props.~~children);\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, value: optionValue }), [\n id,\n disabled,\n optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n ~~role:~~ '~~option',\n '~~aria-disabled': disabled ? 'true' : undefined,\n ~~'aria-selected': `${selected}`,\~~n id,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAIA,SAAS,aAAT,CAAuB,IAAvB,EAAiD,QAAjD,EAA0E;EACxE,IAAI,IAAI,KAAK,SAAb,EAAwB;IACtB,OAAO,IAAP;EACD;;EAED,IAAI,UAAU,GAAG,EAAjB;EACA,IAAI,iBAAiB,GAAG,KAAxB;EACA,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,EAAiC,KAAK,IAAG;IACvC,IAAI,OAAO,KAAP,KAAiB,QAArB,EAA+B;MAC7B,UAAU,IAAI,KAAd;IACD,CAFD,MAEO;MACL,iBAAiB,GAAG,IAApB;IACD;EACF,CAND,EAPwE,CAexE;;EACA,IAAI,iBAAJ,EAAuB;IACrB;IACA,OAAO,CAAC,IAAR,CAAa,mFAAb;EACD;;EAED,OAAO,UAAP;AACD;AAED;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;EACjG,MAAM;IAAE,QAAF;IAAY,QAAZ;IAAsB,IAAtB;IAA4B;EAA5B,IAAsC,KAA5C;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAlB;EACA,MAAM,UAAU,GAAG,aAAa,CAAC,IAAD,EAAO,QAAP,CAAhC;EACA,MAAM,WAAW,GAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,UAA7B,CAJiG,CAMjG;;EACA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,KAAK,CAAC,EAA7B,CAAX,CAPiG,CASjG;;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,OAAN,CAA2B,OAAO;IAAE,EAAF;IAAM,QAAN;IAAgB,IAAI,EAAE,UAAtB;IAAkC,KAAK,EAAE;EAAzC,CAAP,CAA3B,EAA2F,CAC5G,EAD4G,EAE5G,QAF4G,EAG5G,UAH4G,EAI5G,WAJ4G,CAA3F,CAAnB,CAViG,CAiBjG;;EACA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;EACA,MAAM,WAAW,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,WAA9C,CAApB;EACA,MAAM,cAAc,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,cAA9C,CAAvB;EACA,MAAM,QAAQ,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAG;IACxD,MAAM,eAAe,GAAG,GAAG,CAAC,eAA5B;IAEA,OAAO,CAAC,CAAC,WAAF,IAAiB,CAAC,CAAC,eAAe,CAAC,IAAhB,CAAqB,CAAC,IAAI,CAAC,KAAK,WAAhC,CAA1B;EACD,CAJgB,CAAjB;EAKA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;EACA,MAAM,eAAe,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,eAA9C,CAAxB;EACA,MAAM,OAAO,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,OAA/C,CAAhB,CA5BiG,CA8BjG;;EACA,MAAM,MAAM,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAG;;;IACtD,OAAO,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,YAAJ,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,EAAlB,MAAyB,SAAzB,IAAsC,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,YAAJ,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,EAAlB,MAAyB,EAAtE;EACD,CAFc,CAAf,CA/BiG,CAmCjG;;EACA,IAAI,SAAS,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB,CAAhB;;EACA,IAAI,WAAJ,EAAiB;IACf,SAAS,GAAG,QAAQ,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAH,GAA+B,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,uBAAD,EAAwB,IAAxB,CAAnD;EACD;;EAED,MAAM,OAAO,GAAI,KAAD,IAA4C;;;IAC1D,IAAI,QAAJ,EAAc;MACZ,KAAK,CAAC,cAAN;MACA;IACD,CAJyD,CAM1D;;;IACA,eAAe,CAAC,UAAD,CAAf,CAP0D,CAS1D;;IACA,IAAI,CAAC,WAAL,EAAkB;MAChB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,KAAH,EAAU,KAAV,CAAP;IACD,CAZyD,CAc1D;;;IACA,YAAY,CAAC,KAAD,EAAQ,UAAR,CAAZ;IAEA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,KAAH,CAAb;EACD,CAlBD,CAzCiG,CA6DjG;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,EAAE,IAAI,SAAS,CAAC,OAApB,EAA6B;MAC3B,OAAO,cAAc,CAAC,UAAD,EAAa,SAAS,CAAC,OAAvB,CAArB;IACD;EACF,CAJD,EAIG,CAAC,EAAD,EAAK,UAAL,EAAiB,cAAjB,CAJH;EAMA,MAAM,aAAa,GAAG,WAAW,GAC7B;IAAE,IAAI,EAAE,kBAAR;IAA4B,gBAAgB;EAA5C,CAD6B,GAE7B;IAAE,IAAI,EAAE,QAAR;IAAkB,iBAAiB;EAAnC,CAFJ;EAIA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE;IAFD,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,SAAnB,CAD4B;MAEjC,iBAAiB,QAAQ,GAAG,MAAH,GAAY,SAFJ;MAGjC,EAHiC;MAIjC,GAAG,aAJ8B;MAKjC,GAAG,KAL8B;MAMjC;IANiC,CAA7B,CALD;IAaL,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,eAAe,MADH;QAEZ,QAAQ,EAAE;MAFE;IAF6B,CAAlC,CAbN;IAoBL,MApBK;IAqBL,QArBK;IAsBL,YAtBK;IAuBL,WAvBK;IAwBL;EAxBK,CAAP;AA0BD,CAlGM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string \| undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/*\n Create the state required to render Option.\n \n The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n \n @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n id,\n disabled,\n optionText,\n optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/useComboboxBaseState.js CHANGED Viewed

@@ -20,6 +20,7 @@ const useSelection_1 = /*#__PURE__*/require("../utils/useSelection");
 const useComboboxBaseState = props => {
   const {
     appearance = 'outline',
+    editable = false,
     inlinePopup = false,
     multiselect,
     onOpenChange,
@@ -28,7 +29,7 @@ const useComboboxBaseState = props => {
   const optionCollection = useOptionCollection_1.useOptionCollection();
   const {
     getOptionAtIndex,
-    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
@@ -59,11 +60,12 @@ const useComboboxBaseState = props => {
     }
     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];
-  }, [controllableValue, isFirstMount, multiselect, props.defaultValue, 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,
@@ -83,7 +85,7 @@ const useComboboxBaseState = props => {
     if (open && !activeOption) {
       // 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();
+        const lastSelectedOption = getOptionsMatchingText(v => v === selectedOptions[selectedOptions.length - 1]).pop();
         lastSelectedOption && setActiveOption(lastSelectedOption);
       } // default to starting at the first option
       else {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,8BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,~~IAA6B~~;~~EAC/D~~,MAAM;~~IAAE~~,UAAU,GAAG,~~SAAf~~;~~IAA0B~~,WAAW,GAAG,~~KAAxC~~;~~IAA+C~~,~~WAA/C~~;~~IAA4D~~,~~YAA5D~~;~~IAA0E~~,IAAI,GAAG;~~EAAjF~~,~~IAA8F~~,~~KAApG~~;~~EAEA~~,MAAM,gBAAgB,GAAG,qBAAA,CAAA,mBAAA,EAAzB;EACA,MAAM;IAAE,gBAAF;IAAoB;EAApB,~~IAAgD~~,~~gBAAtD~~;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,EAAxC,~~CAN+D~~,~~CAQ/D~~;EACA;;EACA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAxC,~~CAV+D~~,~~CAY/D~~;;EACA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,KAAK,CAAC,QAAN,CAAe,KAAf,CAAhC;EAEA,MAAM,cAAc,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAvB;EAEA,MAAM,cAAc,GAAG,cAAA,CAAA,YAAA,CAAa,KAAb,CAAvB;EACA,MAAM;IAAE;EAAF,IAAsB,cAA5B,~~CAlB+D~~,~~CAoB/D~~;;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,aAAA,EAArB;EACA,MAAM,CAAC,iBAAD,EAAoB,QAApB,IAAgC,iBAAA,CAAA,oBAAA,CAAqB;IACzD,KAAK,EAAE,KAAK,CAAC,KAD4C;IAEzD,YAAY,EAAE;EAF2C,CAArB,CAAtC;EAKA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC/B;IACA,IAAI,iBAAiB,KAAK,SAA1B,EAAqC;MACnC,OAAO,iBAAP;IACD,CAJ8B,CAM/B;;;IACA,IAAI,YAAY,IAAI,KAAK,CAAC,YAAN,KAAuB,SAA3C,EAAsD;MACpD,OAAO,KAAK,CAAC,YAAb;IACD;;IAED,IAAI,WAAJ,EAAiB;MACf,OAAO,eAAe,CAAC,IAAhB,CAAqB,IAArB,~~CAAP~~;IACD;;IAED,OAAO,eAAe,CAAC,CAAD,CAAtB;EACD,~~CAhBa~~,~~EAgBX~~,CAAC,iBAAD,EAAoB,~~YAApB~~,~~EAAkC~~,~~WAAlC~~,~~EAA+C~~,KAAK,CAAC,~~YAArD~~,~~EAAmE~~,~~eAAnE~~,~~CAhBW~~,CAAd,~~CA3B+D~~,~~CA6C/D~~;;EACA,MAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,iBAAA,CAAA,oBAAA,CAAqB;IAChD,KAAK,EAAE,KAAK,CAAC,IADmC;IAEhD,YAAY,EAAE,KAAK,CAAC,WAF4B;IAGhD,YAAY,EAAE;EAHkC,CAArB,CAA7B;;EAMA,MAAM,OAAO,GAAG,CAAC,KAAD,EAAgC,QAAhC,KAAqD;IACnE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,KAAH,EAAU;MAAE,IAAI,EAAE;IAAR,CAAV,CAAZ;IACA,YAAY,CAAC,QAAD,CAAZ;EACD,CAHD,~~CApD+D~~,~~CAyD/D~~;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,IAAI,IAAI,CAAC,YAAb,EAA2B;MACzB;MACA,IAAI,eAAe,CAAC,MAAhB,GAAyB,CAA7B,EAAgC;QAC9B,MAAM,kBAAkB,GAAG,~~uBAAuB~~,~~CAChD~~,CAAC,IAAI,CAAC,KAAK,eAAe,CAAC,eAAe,CAAC,MAAhB,GAAyB,CAA1B,~~CADsB~~,~~CAAvB~~,~~CAEzB~~,~~GAFyB~~,EAA3B;~~QAGA~~,kBAAkB,IAAI,eAAe,CAAC,kBAAD,CAArC;MACD,~~CALD~~,~~CAMA~~;~~MANA~~,~~KAOK~~;QACH,eAAe,CAAC,gBAAgB,CAAC,CAAD,CAAjB,CAAf;MACD;IACF,~~CAZD~~,~~MAYO~~,IAAI,CAAC,IAAL,EAAW;MAChB;MACA,eAAe,CAAC,SAAD,CAAf;IACD,~~CAhBkB~~,~~CAiBnB~~;IACA;;EACD,~~CAnBD~~,~~EAmBG~~,CAAC,IAAD,~~CAnBH~~;~~EAqBA~~,OAAO,EACL,GAAG,gBADE;IAEL,GAAG,cAFE;IAGL,YAHK;IAIL,UAJK;IAKL,YALK;IAML,QANK;IAOL,cAPK;IAQL,WARK;IASL,IATK;IAUL,eAVK;IAWL,eAXK;IAYL,WAZK;IAaL,OAbK;IAcL,QAdK;IAeL,IAfK;IAgBL;EAhBK,CAAP;AAkBD,~~CAjGM~~;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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, ~~getOptionsMatchingValue~~ } = 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 return selectedOptions.join(', ');\n }\n\n return selectedOptions[0];\n }, [controllableValue, 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 = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n };\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open && !activeOption) {\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 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\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\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"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["packages/react-components/react-combobox/src/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, ComboboxBaseState } from './ComboboxBase.types';\n\n/*\n State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps & { editable?: boolean }): ComboboxBaseState => {\n const {\n appearance = 'outline',\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 = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n };\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open && !activeOption) {\n // if there is a selection, start at the most recently selected item\n if (selectedOptions.length > 0) {\n const lastSelectedOption = getOptionsMatchingText(v => v === selectedOptions[selectedOptions.length - 1]).pop();\n lastSelectedOption && setActiveOption(lastSelectedOption);\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\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\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"],"sourceRoot":"../src/"}

package/lib-commonjs/utils/useOptionCollection.js CHANGED Viewed

@@ -29,8 +29,8 @@ const useOptionCollection = () => {
       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 {
@@ -38,7 +38,7 @@ const useOptionCollection = () => {
       getOptionAtIndex,
       getIndexOfId,
       getOptionById,
-      getOptionsMatchingValue
+      getOptionsMatchingText
     };
   }, []);
   const registerOption = React.useCallback((option, element) => {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAG,MAA4B;EAC7D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAN,CAA8D,EAA9D,CAAd;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACvC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAN,CAAc,MAArC;;IACA,MAAM,gBAAgB,GAAI,KAAD,IAAkB;MAAA,IAAA,EAAA;;MAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,CAAc,KAAd,CAAA,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAE,MAAtB;IAA4B,CAAxE;;IACA,MAAM,YAAY,GAAI,EAAD,IAAgB,KAAK,CAAC,OAAN,CAAc,SAAd,CAAwB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,EAAnD,CAArC;;IACA,MAAM,aAAa,GAAI,EAAD,IAAe;MACnC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAN,CAAc,IAAd,CAAmB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,EAA9C,CAAb;MACA,OAAO,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,MAAb;IACD,CAHD;;IAIA,MAAM,~~uBAAuB~~,GAAI,OAAD,IAAwC;~~MACtE~~,OAAO,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,MAAL,CAAY,~~KAAb~~,CAApC,~~EAAyD~~,~~GAAzD~~,~~CAA6D~~,IAAI,IAAI,IAAI,CAAC,~~MAA1E~~,CAAP;IACD,CAFD;;IAIA,OAAO;MACL,QADK;MAEL,gBAFK;MAGL,YAHK;MAIL,aAJK;MAKL;IALK,CAAP;EAOD,CAnBqB,EAmBnB,EAnBmB,CAAtB;EAqBA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,CAAC,MAAD,EAAsB,OAAtB,KAA8C;;;IACrF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAN,CAAc,SAAd,CAAwB,IAAI,IAAG;MAC3C,IAAI,CAAC,IAAI,CAAC,OAAN,IAAiB,CAAC,OAAtB,EAA+B;QAC7B,OAAO,KAAP;MACD;;MAED,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,MAAM,CAAC,EAA9B,EAAkC;QAChC,OAAO,IAAP;MACD,CAP0C,CAS3C;MACA;;;MACA,OAAO,IAAI,CAAC,OAAL,CAAa,uBAAb,CAAqC,OAArC,IAAgD,IAAI,CAAC,2BAA5D;IACD,CAZa,CAAd,CADqF,CAerF;;IACA,IAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,CAAc,KAAd,CAAA,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAE,MAAF,CAAS,EAA7B,MAAoC,MAAM,CAAC,EAA/C,EAAmD;MACjD,MAAM,OAAO,GAAG;QACd,OADc;QAEd;MAFc,CAAhB,CADiD,CAMjD;;MACA,IAAI,KAAK,KAAK,CAAC,CAAf,EAAkB;QAChB,KAAK,CAAC,OAAN,GAAgB,CAAC,GAAG,KAAK,CAAC,OAAV,EAAmB,OAAnB,CAAhB;MACD,CAFD,MAEO;QACL,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,KAArB,EAA4B,CAA5B,EAA+B,OAA/B;MACD;IACF,CA5BoF,CA8BrF;;;IACA,OAAO,MAAK;MACV,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,MAAM,CAAC,EAAvD,CAAhB;IACD,CAFD;EAGD,CAlCsB,EAkCpB,EAlCoB,CAAvB;EAoCA,OAAO,EACL,GAAG,aADE;IAEL,OAAO,EAAE,KAAK,CAAC,OAAN,CAAc,GAAd,CAAkB,IAAI,IAAI,IAAI,CAAC,MAA/B,CAFJ;IAGL;EAHK,CAAP;AAKD,CAjEM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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/"}
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/"}

package/lib-commonjs/utils/useSelection.js CHANGED Viewed

@@ -43,6 +43,7 @@ const useSelection = props => {
     setSelectedOptions(newSelection);
     onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
       optionValue: option.value,
+      optionText: option.text,
       selectedOptions: newSelection
     });
   };
@@ -51,6 +52,7 @@ const useSelection = props => {
     setSelectedOptions([]);
     onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
       optionValue: undefined,
+      optionText: undefined,
       selectedOptions: []
     });
   };

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

	@@ -1 +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,eAAe,EAAE;~~IAA9C~~,CAAV,CAAd;EACD,CAvBD;;EAyBA,MAAM,cAAc,GAAI,KAAD,IAA2B;IAChD,kBAAkB,CAAC,EAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,SAAf;MAA0B,eAAe,EAAE;~~IAA3C~~,CAAV,CAAd;EACD,CAHD;;EAKA,OAAO;IAAE,cAAF;IAAkB,YAAlB;IAAgC;EAAhC,CAAP;AACD,CAxCM;;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, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n };\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"sourceRoot":"../src/"}
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/"}

package/lib-commonjs/utils/useTriggerListboxSlots.js CHANGED Viewed

@@ -122,7 +122,7 @@ function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
         break;
       case 'Tab':
-        activeOption && selectOption(event, activeOption);
+        !multiselect && activeOption && selectOption(event, activeOption);
         break;
       default:

package/lib-commonjs/utils/useTriggerListboxSlots.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,oBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAmBA;;;;AAIG;;;AACH,SAAgB,sBAAhB,CACE,KADF,EAEE,KAFF,EAGE,GAHF,EAIE,WAJF,EAKE,WALF,EAKsD;EAKpD,MAAM;IAAE;EAAF,IAAkB,KAAxB;EACA,MAAM;IACJ,YADI;IAEJ,QAFI;IAGJ,YAHI;IAIJ,gBAJI;IAKJ,cALI;IAMJ,IANI;IAOJ,YAPI;IAQJ,eARI;IASJ,eATI;IAUJ,WAVI;IAWJ;EAXI,IAYF,KAZJ,CANoD,CAoBpD;;EACA,MAAM,UAAU,GAAe,KAAK,CAAC,MAAN,CAAa,IAAb,CAA/B,CArBoD,CAuBpD;;EACA,MAAM,OAAO,GAAuB,WAAW,IAAI;IACjD,WADiD;IAEjD,QAAQ,EAAE,SAFuC;IAGjD,GAAG;EAH8C,CAAnD,CAxBoD,CA8BpD;;EACA,MAAM,OAAO,GAAuB;IAClC,iBAAiB,IADiB;IAElC,yBAAyB,IAAI,GAAG,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAE,EAAjB,GAAsB,SAFjB;IAGlC,IAAI,EAAE,UAH4B;IAIlC,GAAG,WAJ+B;IAKlC;IACA;IACA;IACA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAE,GAAhC,EAAqC,UAArC;EAR6B,CAApC,CA/BoD,CA0CpD;;EACA,IAAI,OAAJ,EAAa;IACX;;;;AAIG;IACH,OAAO,CAAC,OAAR,GAAkB,iBAAA,CAAA,cAAA,CAAgB,KAAD,IAA4C;;;MAC3E,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAAF,EAAlB;IACD,CAFiB,EAEf,OAAO,CAAC,OAFO,CAAlB;IAIA,OAAO,CAAC,WAAR,GAAsB,iBAAA,CAAA,cAAA,CAAgB,KAAD,IAA4C;MAC/E,eAAe,CAAC,KAAD,CAAf;IACD,CAFqB,EAEnB,OAAO,CAAC,WAFW,CAAtB;IAIA,OAAO,CAAC,WAAR,GAAsB,iBAAA,CAAA,cAAA,CAAgB,KAAD,IAA4C;MAC/E,cAAc,CAAC,OAAf,GAAyB,IAAzB;IACD,CAFqB,EAEnB,OAAO,CAAC,WAFW,CAAtB;EAGD,CA5DmD,CA8DpD;;;EACA,OAAO,CAAC,MAAR,GAAiB,iBAAA,CAAA,cAAA,CAAgB,KAAD,IAAoF;IAClH,IAAI,CAAC,cAAc,CAAC,OAApB,EAA6B;MAC3B,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAP;IACD;;IAED,cAAc,CAAC,OAAf,GAAyB,KAAzB;IAEA,WAAW,CAAC,KAAD,CAAX;EACD,CARgB,EAQd,OAAO,CAAC,MARM,CAAjB;EAUA,OAAO,CAAC,OAAR,GAAkB,iBAAA,CAAA,cAAA,CACf,KAAD,IAAoF;IAClF,OAAO,CAAC,KAAD,EAAQ,CAAC,IAAT,CAAP;EACD,CAHe,EAIhB,OAAO,CAAC,OAJQ,CAAlB;EAOA,OAAO,CAAC,OAAR,GAAkB,iBAAA,CAAA,cAAA,CACf,KAAD,IAAoF;IAClF,WAAW,CAAC,IAAD,CAAX;EACD,CAHe,EAIhB,OAAO,CAAC,OAJQ,CAAlB,CAhFoD,CAuFpD;;EACA,OAAO,CAAC,SAAR,GAAoB,iBAAA,CAAA,cAAA,CACjB,KAAD,IAA0F;IACxF,MAAM,MAAM,GAAG,oBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC;MAAE,IAAF;MAAQ;IAAR,CAAhC,CAAf;IACA,MAAM,QAAQ,GAAG,QAAQ,KAAK,CAA9B;IACA,MAAM,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,EAAd,CAAf,GAAmC,CAAC,CAApE;IACA,IAAI,QAAQ,GAAG,WAAf;;IAEA,QAAQ,MAAR;MACE,KAAK,MAAL;QACE,KAAK,CAAC,cAAN;QACA,eAAe,CAAC,IAAD,CAAf;QACA,OAAO,CAAC,KAAD,EAAQ,IAAR,CAAP;QACA;;MACF,KAAK,OAAL;QACE;QACA,KAAK,CAAC,eAAN;QACA,KAAK,CAAC,cAAN;QACA,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAP;QACA;;MACF,KAAK,aAAL;QACE,CAAC,WAAD,IAAgB,EAAC,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAE,QAAf,CAAhB,IAA2C,OAAO,CAAC,KAAD,EAAQ,KAAR,CAAlD;MACF;;MACA,KAAK,QAAL;QACE,YAAY,IAAI,YAAY,CAAC,KAAD,EAAQ,YAAR,CAA5B;QACA,KAAK,CAAC,cAAN;QACA;;MACF,KAAK,KAAL;QACE,~~YAAY~~,~~IAAI~~,YAAY,CAAC,KAAD,EAAQ,YAAR,~~CAA5B~~;QACA;;MACF;QACE,QAAQ,GAAG,oBAAA,CAAA,kBAAA,CAAmB,MAAnB,EAA2B,WAA3B,EAAwC,QAAxC,CAAX;IAvBJ;;IAyBA,IAAI,QAAQ,KAAK,WAAjB,EAA8B;MAC5B;MACA,KAAK,CAAC,cAAN;MACA,eAAe,CAAC,gBAAgB,CAAC,QAAD,CAAjB,CAAf;MACA,eAAe,CAAC,IAAD,CAAf;IACD;EACF,CAtCiB,EAuClB,OAAO,CAAC,SAvCU,CAApB;EA0CA,OAAO,CAAC,WAAR,GAAsB,iBAAA,CAAA,cAAA,CACnB,KAAD,IAAoF;IAClF,eAAe,CAAC,KAAD,CAAf;EACD,CAHmB,EAIpB,OAAO,CAAC,WAJY,CAAtB;EAOA,OAAO,CAAC,OAAD,EAAU,OAAV,CAAP;AACD;;AA/ID,OAAA,CAAA,sBAAA,GAAA,sBAAA","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/\n useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n /\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement \| HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listbox: typeof listboxSlot = listboxSlot && {\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n /\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n listbox.onClick = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox.onClick);\n\n listbox.onMouseOver = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox.onMouseOver);\n\n listbox.onMouseDown = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox.onMouseDown);\n }\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"],"sourceRoot":"../src/"}
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/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.0.0-beta.16",
+  "version": "9.0.0-beta.18",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,13 +32,13 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-context-selector": "^9.1.2",
-    "@fluentui/react-field": "9.0.0-alpha.9",
+    "@fluentui/react-context-selector": "^9.1.3",
+    "@fluentui/react-field": "9.0.0-alpha.11",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-portal": "^9.0.11",
-    "@fluentui/react-positioning": "^9.3.2",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.2",
+    "@fluentui/react-portal": "^9.0.13",
+    "@fluentui/react-positioning": "^9.3.4",
+    "@fluentui/react-theme": "^9.1.4",
+    "@fluentui/react-utilities": "^9.3.0",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },