npm - @fluentui/react-combobox - Versions diffs - 9.11.7 → 9.12.0 - Mend

@fluentui/react-combobox 9.11.7 → 9.12.0

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 (65) hide show

package/lib-commonjs/contexts/ListboxContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ListboxContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst listboxContextDefaultValue = {\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption () {\n return ()=>undefined;\n },\n selectedOptions: [],\n onOptionClick () {\n // noop\n },\n onActiveDescendantChange () {\n // noop\n },\n selectOption () {\n // noop\n },\n setActiveOption () {\n // noop\n }\n};\nexport const ListboxContext = createContext(undefined);\nexport const useListboxContext_unstable = (selector)=>useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","useListboxContext_unstable","ListboxProvider","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"mappings":";;;;;;;;;;;~~IAuBaA~~,cAAc;eAAdA;;IACAC,0BAA0B;eAA1BA;;IACAC,eAAe;eAAfA;;;;~~iEAzBU~~;sCAC2B;AAClD,MAAMC,6BAA6B;IAC/BC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACI,OAAO,~~IAAIH~~;IACf;~~IACAI~~,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;AACJ;AACO,~~MAAMb~~,~~iBAAiBc~~,IAAAA,mCAAa,~~EAACT~~;AACrC,MAAMJ,6BAA6B,~~CAACc~~,WAAWC,IAAAA,wCAAkB,~~EAAChB~~,gBAAgB,~~CAACiB~~,~~MAAMd~~,0BAA0B,~~GAAGY~~,SAASE;AAC/H,~~MAAMf~~,kBAAkBF,~~eAAekB~~,QAAQ"}
1	+ {"version":3,"sources":["ListboxContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst listboxContextDefaultValue = {\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n getOptionById () {\n return undefined;\n },\n getOptionsMatchingValue () {\n return [];\n },\n registerOption () {\n return ()=>undefined;\n },\n selectedOptions: [],\n onOptionClick () {\n // noop\n },\n onActiveDescendantChange () {\n // noop\n },\n selectOption () {\n // noop\n },\n setActiveOption () {\n // noop\n }\n};\nexport const ListboxContext = createContext(undefined);\nexport const useListboxContext_unstable = (selector)=>useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","useListboxContext_unstable","ListboxProvider","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"mappings":";;;;;;;;;;;IA6BaA,cAAc;eAAdA;;IACAC,0BAA0B;eAA1BA;;IACAC,eAAe;eAAfA;;;;iEA/BU;sCAC2B;AAClD,MAAMC,6BAA6B;IAC/BC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACI,OAAOH;IACX;IACAI;QACI,OAAO,EAAE;IACb;IACAC;QACI,OAAO,IAAIL;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;AACJ;AACO,MAAMf,iBAAiBgB,IAAAA,mCAAa,EAACX;AACrC,MAAMJ,6BAA6B,CAACgB,WAAWC,IAAAA,wCAAkB,EAAClB,gBAAgB,CAACmB,MAAMhB,0BAA0B,GAAGc,SAASE;AAC/H,MAAMjB,kBAAkBF,eAAeoB,QAAQ"}

package/lib-commonjs/contexts/useComboboxContextValues.js CHANGED Viewed

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useComboboxContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
+    const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
     const combobox = {
         activeOption: undefined,
         appearance,
@@ -27,6 +27,8 @@ function useComboboxContextValues(state) {
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
+        getOptionById,
+        getOptionsMatchingValue,
         registerOption,
         selectedOptions,
         selectOption,

package/lib-commonjs/contexts/useComboboxContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;\n const combobox = {\n activeOption: undefined,\n appearance,\n focusVisible: false,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: ()=>null,\n setOpen,\n size\n };\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: ()=>null,\n onOptionClick,\n onActiveDescendantChange\n };\n const activeDescendant = React.useMemo(()=>({\n controller: activeDescendantController\n }), [\n activeDescendantController\n ]);\n return {\n combobox,\n activeDescendant,\n listbox\n };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAAEC,aAAa,EAAEC,wBAAwB,EAAE,~~GAAGV~~;~~IAChK~~,~~MAAMW~~,WAAW;QACbC,cAAcC;~~QACdZ~~;~~QACAa~~,cAAc;~~QACdZ~~;~~QACAC~~;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBT;QACAC;IACJ;IACA,MAAMS,UAAU;QACZJ,cAAcC;QACdC,cAAc;~~QACdX~~;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBN;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYZ;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHG;QACAM;QACAD;IACJ;AACJ"}
1	+ {"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;\n const combobox = {\n activeOption: undefined,\n appearance,\n focusVisible: false,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: ()=>null,\n setOpen,\n size\n };\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: ()=>null,\n onOptionClick,\n onActiveDescendantChange\n };\n const activeDescendant = React.useMemo(()=>({\n controller: activeDescendantController\n }), [\n activeDescendantController\n ]);\n return {\n combobox,\n activeDescendant,\n listbox\n };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAEC,uBAAuB,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAAEC,aAAa,EAAEC,wBAAwB,EAAE,GAAGZ;IACxM,MAAMa,WAAW;QACbC,cAAcC;QACdd;QACAe,cAAc;QACdd;QACAG;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBT;QACAC;IACJ;IACA,MAAMS,UAAU;QACZJ,cAAcC;QACdC,cAAc;QACdb;QACAC;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBN;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYZ;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHG;QACAM;QACAD;IACJ;AACJ"}

package/lib-commonjs/contexts/useListboxContextValues.js CHANGED Viewed

@@ -14,7 +14,7 @@ const _reactcontextselector = require("@fluentui/react-context-selector");
 const _ListboxContext = require("./ListboxContext");
 function useListboxContextValues(state) {
     const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
-    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
+    const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
     // get register/unregister functions from parent combobox context
     const parentRegisterOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
     const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
@@ -23,6 +23,8 @@ function useListboxContextValues(state) {
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
+        getOptionById,
+        getOptionsMatchingValue,
         multiselect,
         registerOption: registerOptionValue,
         selectedOptions,

package/lib-commonjs/contexts/useListboxContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\nexport function useListboxContextValues(state) {\n const hasListboxContext = useHasParentContext(ListboxContext);\n const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n // get register/unregister functions from parent combobox context\n const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);\n const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption: ()=>undefined,\n onOptionClick,\n onActiveDescendantChange\n };\n const activeDescendant = React.useMemo(()=>({\n controller: activeDescendantController\n }), [\n activeDescendantController\n ]);\n return {\n listbox,\n activeDescendant\n };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACa;gCACuB;AACpD,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,~~GAAGR~~;~~IACnG~~,iEAAiE;IACjE,~~MAAMS~~,uBAAuBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIE,wBAAwB;IAC/F,MAAMC,~~sBAAsBb~~,~~oBAAoBQ~~,uBAAuBJ;IACvE,MAAMU,UAAU;QACZC,cAAcC;QACdC,cAAc;~~QACdd~~;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAIF;QACrBL;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYf;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHO;QACAK;IACJ;AACJ"}
1	+ {"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\nexport function useListboxContextValues(state) {\n const hasListboxContext = useHasParentContext(ListboxContext);\n const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\n // get register/unregister functions from parent combobox context\n const parentRegisterOption = useListboxContext_unstable((ctx)=>ctx.registerOption);\n const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);\n const onActiveDescendantChange = useListboxContext_unstable((ctx)=>ctx.onActiveDescendantChange);\n const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption: ()=>undefined,\n onOptionClick,\n onActiveDescendantChange\n };\n const activeDescendant = React.useMemo(()=>({\n controller: activeDescendantController\n }), [\n activeDescendantController\n ]);\n return {\n listbox,\n activeDescendant\n };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACa;gCACuB;AACpD,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAM,EAAEC,aAAa,EAAEC,uBAAuB,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGV;IAC3I,iEAAiE;IACjE,MAAMW,uBAAuBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIE,wBAAwB;IAC/F,MAAMC,sBAAsBf,oBAAoBU,uBAAuBJ;IACvE,MAAMU,UAAU;QACZC,cAAcC;QACdC,cAAc;QACdhB;QACAC;QACAC;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAIF;QACrBL;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYf;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHO;QACAK;IACJ;AACJ"}

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

@@ -15,7 +15,8 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useOptionCollection = require("../utils/useOptionCollection");
 const _useSelection = require("../utils/useSelection");
 const useComboboxBaseState = (props)=>{
-    const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;
+    'use no memo';
+    const { appearance = 'outline', disableAutoFocus, children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;
     const optionCollection = (0, _useOptionCollection.useOptionCollection)();
     const { getOptionsMatchingValue } = optionCollection;
     const { getOptionById } = optionCollection;
@@ -124,36 +125,16 @@ const useComboboxBaseState = (props)=>{
         freeform,
         disabled
     ]);
-    // update active option based on change in open state
-    _react.useEffect(()=>{
-        if (open) {
-            // if it is single-select and there is a selected option, start at the selected option
-            if (!multiselect && selectedOptions.length > 0) {
-                const selectedOption = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();
-                if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
-                    activeDescendantController.focus(selectedOption.id);
-                }
-            }
-        } else {
-            activeDescendantController.blur();
-        }
-    // this should only be run in response to changes in the open state or children
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        open,
-        activeDescendantController
-    ]);
     // Fallback focus when children are updated in an open popover results in no item being focused
     _react.useEffect(()=>{
-        if (open) {
-            if (!activeDescendantController.active()) {
-                activeDescendantController.first();
-            }
+        if (open && !disableAutoFocus && !activeDescendantController.active()) {
+            activeDescendantController.first();
         }
     // this should only be run in response to changes in the open state or children
     }, [
         open,
         children,
+        disableAutoFocus,
         activeDescendantController,
         getOptionById
     ]);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/*\n @internal\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n const { appearance = 'outline', children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(()=>{\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [\n activeDescendantController,\n getOptionById\n ]);\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback((option)=>{\n let nextOption = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n }, [\n activeDescendantController,\n getActiveOption\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 // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n const ignoreNextBlur = React.useRef(false);\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 const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n // reset any typed value when an option is selected\n const selectOption = React.useCallback((ev, option)=>{\n ReactDOM.unstable_batchedUpdates(()=>{\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n }, [\n setValue,\n baseSelectOption\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 // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n return selectedOptions.includes(optionValue);\n }).map((option)=>option.text);\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n return selectedOptionsText[0];\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n controllableValue,\n editable,\n getOptionsMatchingValue,\n multiselect,\n props.defaultValue,\n 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 const setOpen = React.useCallback((event, newState)=>{\n if (disabled) {\n return;\n }\n onOpenChange === null \|\| onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n open: newState\n });\n ReactDOM.unstable_batchedUpdates(()=>{\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n }, [\n onOpenChange,\n setOpenState,\n setValue,\n freeform,\n disabled\n ]);\n // update active option based on change in open state\n React.useEffect(()=>{\n if (open) {\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 = getOptionsMatchingValue((v)=>v === selectedOptions[0]).pop();\n if (selectedOption === null \|\| selectedOption === void 0 ? void 0 : selectedOption.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\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 }, [\n open,\n activeDescendantController\n ]);\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(()=>{\n if (open) {\n if (!activeDescendantController.active()) {\n activeDescendantController.first();\n }\n }\n // this should only be run in response to changes in the open state or children\n }, [\n open,\n children,\n activeDescendantController,\n getOptionById\n ]);\n const onActiveDescendantChange = useEventCallback((event)=>{\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange === null \|\| onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(event, {\n event,\n type: 'change',\n previousOption,\n nextOption\n });\n });\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e)=>{\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
1	+ {"version":3,"sources":["useComboboxBaseState.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { useSelection } from '../utils/useSelection';\n/*\n @internal\n * State shared between Combobox and Dropdown components\n */ export const useComboboxBaseState = (props)=>{\n 'use no memo';\n const { appearance = 'outline', disableAutoFocus, children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(()=>{\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [\n activeDescendantController,\n getOptionById\n ]);\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback((option)=>{\n let nextOption = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n }, [\n activeDescendantController,\n getActiveOption\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 // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n const ignoreNextBlur = React.useRef(false);\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 const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n // reset any typed value when an option is selected\n const selectOption = React.useCallback((ev, option)=>{\n ReactDOM.unstable_batchedUpdates(()=>{\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n }, [\n setValue,\n baseSelectOption\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 // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n const selectedOptionsText = getOptionsMatchingValue((optionValue)=>{\n return selectedOptions.includes(optionValue);\n }).map((option)=>option.text);\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n return selectedOptionsText[0];\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n controllableValue,\n editable,\n getOptionsMatchingValue,\n multiselect,\n props.defaultValue,\n 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 const setOpen = React.useCallback((event, newState)=>{\n if (disabled) {\n return;\n }\n onOpenChange === null \|\| onOpenChange === void 0 ? void 0 : onOpenChange(event, {\n open: newState\n });\n ReactDOM.unstable_batchedUpdates(()=>{\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n }, [\n onOpenChange,\n setOpenState,\n setValue,\n freeform,\n disabled\n ]);\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(()=>{\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [\n open,\n children,\n disableAutoFocus,\n activeDescendantController,\n getOptionById\n ]);\n const onActiveDescendantChange = useEventCallback((event)=>{\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange === null \|\| onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(event, {\n event,\n type: 'change',\n previousOption,\n nextOption\n });\n });\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e)=>{\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;oEACG;gCAC4C;qCAClC;8BACP;AAIlB,MAAMA,uBAAuB,CAACC;IACrC;IACA,MAAM,EAAEC,aAAa,SAAS,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,YAAY,KAAK,EAAEC,WAAW,KAAK,EAAEC,cAAc,KAAK,EAAEC,YAAYC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,OAAO,QAAQ,EAAEC,0BAA0B,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,uBAAuB,IAAI,EAAE,GAAGf;IACzR,MAAMgB,mBAAmBC,IAAAA,wCAAmB;IAC5C,MAAM,EAAEC,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,aAAa,EAAE,GAAGH;IAC1B,MAAMI,kBAAkBC,OAAMC,WAAW,CAAC;QACtC,MAAMC,iBAAiBX,2BAA2BY,MAAM;QACxD,OAAOD,iBAAiBJ,cAAcI,kBAAkBf;IAC5D,GAAG;QACCI;QACAO;KACH;IACD,+DAA+D;IAC/D,gEAAgE;IAChE,MAAMM,sBAAsBL;IAC5B,gEAAgE;IAChE,MAAMM,yBAAyBL,OAAMC,WAAW,CAAC,CAACK;QAC9C,IAAIC,aAAapB;QACjB,IAAI,OAAOmB,WAAW,YAAY;YAC9B,MAAME,eAAeT;YACrBQ,aAAaD,OAAOE;QACxB;QACA,IAAID,YAAY;YACZhB,2BAA2BkB,KAAK,CAACF,WAAWG,EAAE;QAClD,OAAO;YACHnB,2BAA2BoB,IAAI;QACnC;IACJ,GAAG;QACCpB;QACAQ;KACH;IACD,uDAAuD;IACvD,yFAAyF;IACzF,MAAM,CAACa,cAAcC,gBAAgB,GAAGb,OAAMc,QAAQ,CAAC;IACvD,gEAAgE;IAChE,8FAA8F;IAC9F,MAAM,CAACC,UAAUC,YAAY,GAAGhB,OAAMc,QAAQ,CAAC;IAC/C,MAAMG,iBAAiBjB,OAAMkB,MAAM,CAAC;IACpC,+EAA+E;IAC/E,MAAMC,eAAeC,IAAAA,6BAAa;IAClC,MAAM,CAACC,mBAAmBC,SAAS,GAAGC,IAAAA,oCAAoB,EAAC;QACvDC,OAAO7C,MAAM8C,KAAK;QAClBC,cAAcvC;IAClB;IACA,MAAM,EAAEwC,eAAe,EAAEC,cAAcC,gBAAgB,EAAEC,cAAc,EAAE,GAAGC,IAAAA,0BAAY,EAACpD;IACzF,mDAAmD;IACnD,MAAMiD,eAAe5B,OAAMC,WAAW,CAAC,CAAC+B,IAAI1B;QACxC2B,UAASC,uBAAuB,CAAC;YAC7BZ,SAASnC;YACT0C,iBAAiBG,IAAI1B;QACzB;IACJ,GAAG;QACCgB;QACAO;KACH;IACD,MAAMJ,QAAQzB,OAAMmC,OAAO,CAAC;QACxB,sEAAsE;QACtE,IAAId,sBAAsBlC,WAAW;YACjC,OAAOkC;QACX;QACA,6DAA6D;QAC7D,IAAIF,gBAAgBxC,MAAMyD,YAAY,KAAKjD,WAAW;YAClD,OAAOR,MAAMyD,YAAY;QAC7B;QACA,MAAMC,sBAAsBxC,wBAAwB,CAACyC;YACjD,OAAOX,gBAAgBY,QAAQ,CAACD;QACpC,GAAGE,GAAG,CAAC,CAAClC,SAASA,OAAOmC,IAAI;QAC5B,IAAIrD,aAAa;YACb,oFAAoF;YACpF,OAAOJ,WAAW,KAAKqD,oBAAoBK,IAAI,CAAC;QACpD;QACA,OAAOL,mBAAmB,CAAC,EAAE;IACjC,kDAAkD;IAClD,0EAA0E;IAC1E,4CAA4C;IAC5C,uDAAuD;IACvD,GAAG;QACChB;QACArC;QACAa;QACAT;QACAT,MAAMyD,YAAY;QAClBT;KACH;IACD,6DAA6D;IAC7D,MAAM,CAACgB,MAAMC,aAAa,GAAGrB,IAAAA,oCAAoB,EAAC;QAC9CC,OAAO7C,MAAMgE,IAAI;QACjBE,cAAclE,MAAMmE,WAAW;QAC/BpB,cAAc;IAClB;IACA,MAAMqB,UAAU/C,OAAMC,WAAW,CAAC,CAAC+C,OAAOC;QACtC,IAAIxD,UAAU;YACV;QACJ;QACAJ,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAa2D,OAAO;YAC5EL,MAAMM;QACV;QACAhB,UAASC,uBAAuB,CAAC;YAC7B,IAAI,CAACe,YAAY,CAACzD,UAAU;gBACxB8B,SAASnC;YACb;YACAyD,aAAaK;QACjB;IACJ,GAAG;QACC5D;QACAuD;QACAtB;QACA9B;QACAC;KACH;IACD,+FAA+F;IAC/FO,OAAMkD,SAAS,CAAC;QACZ,IAAIP,QAAQ,CAAC9D,oBAAoB,CAACU,2BAA2BY,MAAM,IAAI;YACnEZ,2BAA2B4D,KAAK;QACpC;IACJ,+EAA+E;IAC/E,GAAG;QACCR;QACA7D;QACAD;QACAU;QACAO;KACH;IACD,MAAMsD,2BAA2BC,IAAAA,gCAAgB,EAAC,CAACL;QAC/C,MAAMM,iBAAiBN,MAAMO,MAAM,CAACC,UAAU,GAAG7D,iBAAiBG,aAAa,CAACkD,MAAMO,MAAM,CAACC,UAAU,IAAI;QAC3G,MAAMjD,aAAaZ,iBAAiBG,aAAa,CAACkD,MAAMO,MAAM,CAAC7C,EAAE;QACjEhB,yBAAyB,QAAQA,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBsD,OAAO;YACpGA;YACAS,MAAM;YACNH;YACA/C;QACJ;IACJ;IACA,OAAO;QACH,GAAGZ,gBAAgB;QACnBH;QACAC;QACAmC;QACAE;QACAH;QACAnB,cAAcJ;QACdxB;QACAG;QACA6B;QACAK;QACAhC;QACAC;QACAyD;QACA5B;QACA2C,iBAAiBrD;QACjBQ;QACAG;QACA+B;QACAzB;QACAhC;QACAmC;QACArC;QACAuE,eAAeN,IAAAA,gCAAgB,EAAC,CAACO;YAC7B,IAAI,CAACxE,aAAa;gBACd2D,QAAQa,GAAG;YACf;QACJ;QACAR;IACJ;AACJ"}

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

@@ -31,6 +31,7 @@ function useComboboxPositioning(props) {
         },
         fallbackPositions,
         matchTargetSize: 'width',
+        autoSize: true,
         ...(0, _reactpositioning.resolvePositioningShorthand)(positioning)
     };
     const { targetRef, containerRef } = (0, _reactpositioning.usePositioning)(popperOptions);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useComboboxPositioning.js"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport * as React from 'react';\nexport function useComboboxPositioning(props) {\n const { positioning } = props;\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions = [\n 'above',\n 'after',\n 'after-top',\n 'before',\n 'before-top'\n ];\n // popper options\n const popperOptions = {\n position: 'below',\n align: 'start',\n offset: {\n crossAxis: 0,\n mainAxis: 2\n },\n fallbackPositions,\n matchTargetSize: 'width',\n ...resolvePositioningShorthand(positioning)\n };\n const { targetRef, containerRef } = usePositioning(popperOptions);\n return [\n containerRef,\n targetRef\n ];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","resolvePositioningShorthand","targetRef","containerRef","usePositioning"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;kCAF4C;iEACrC;AAChB,SAASA,uBAAuBC,KAAK;IACxC,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,wFAAwF;IACxF,MAAME,oBAAoB;QACtB;QACA;QACA;QACA;QACA;KACH;IACD,iBAAiB;IACjB,MAAMC,gBAAgB;QAClBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YACJC,WAAW;YACXC,UAAU;QACd;QACAN;QACAO,iBAAiB;~~QACjB~~,GAAGC,IAAAA,6CAA2B,~~EAACT~~,YAAY;IAC/C;IACA,MAAM,~~EAAEU~~,SAAS,EAAEC,YAAY,EAAE,GAAGC,IAAAA,gCAAc,~~EAACV~~;IACnD,OAAO;~~QACHS~~;QACAD;KACH;AACL"}
1	+ {"version":3,"sources":["useComboboxPositioning.js"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport * as React from 'react';\nexport function useComboboxPositioning(props) {\n const { positioning } = props;\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions = [\n 'above',\n 'after',\n 'after-top',\n 'before',\n 'before-top'\n ];\n // popper options\n const popperOptions = {\n position: 'below',\n align: 'start',\n offset: {\n crossAxis: 0,\n mainAxis: 2\n },\n fallbackPositions,\n matchTargetSize: 'width',\n autoSize: true,\n ...resolvePositioningShorthand(positioning)\n };\n const { targetRef, containerRef } = usePositioning(popperOptions);\n return [\n containerRef,\n targetRef\n ];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","resolvePositioningShorthand","targetRef","containerRef","usePositioning"],"mappings":";;;;+BAEgBA;;;eAAAA;;;;kCAF4C;iEACrC;AAChB,SAASA,uBAAuBC,KAAK;IACxC,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,wFAAwF;IACxF,MAAME,oBAAoB;QACtB;QACA;QACA;QACA;QACA;KACH;IACD,iBAAiB;IACjB,MAAMC,gBAAgB;QAClBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YACJC,WAAW;YACXC,UAAU;QACd;QACAN;QACAO,iBAAiB;QACjBC,UAAU;QACV,GAAGC,IAAAA,6CAA2B,EAACV,YAAY;IAC/C;IACA,MAAM,EAAEW,SAAS,EAAEC,YAAY,EAAE,GAAGC,IAAAA,gCAAc,EAACX;IACnD,OAAO;QACHU;QACAD;KACH;AACL"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-combobox",
-  "version": "9.11.7",
+  "version": "9.12.0",
   "description": "Fluent UI React Combobox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,31 +20,33 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json",
+    "storybook": "yarn --cwd ../stories storybook",
+    "type-check": "just-scripts type-check",
     "generate-api": "just-scripts generate-api",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
     "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.12.0",
+    "@fluentui/react-aria": "^9.13.0",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-context-selector": "^9.1.61",
-    "@fluentui/react-field": "^9.1.67",
-    "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-jsx-runtime": "^9.0.39",
-    "@fluentui/react-portal": "^9.4.27",
-    "@fluentui/react-positioning": "^9.15.3",
+    "@fluentui/react-context-selector": "^9.1.63",
+    "@fluentui/react-field": "^9.1.69",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-jsx-runtime": "^9.0.40",
+    "@fluentui/react-portal": "^9.4.29",
+    "@fluentui/react-positioning": "^9.15.4",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.5",
+    "@fluentui/react-tabster": "^9.22.1",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.10",
+    "@fluentui/react-utilities": "^9.18.11",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },