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

package/CHANGELOG.json

@@ -2,7 +2,123 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Wed, 21 Dec 2022 10:17:11 GMT",
+      "date": "Mon, 09 Jan 2023 14:31:42 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.21",
+      "version": "9.0.0-beta.21",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "d7a98c92818f5ad8c80548dc288cc2cc55731c93",
+            "comment": "fix: perf improvements with useEventCallback"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "54b6220d442231ffa0c3df88359f53373690da6f",
+            "comment": "fix: Combobox always starts at the first option if multiselect, and correctly sets focus visible\""
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.5",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.1.0",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.3.7",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.4.0",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Jan 2023 01:40:56 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.20",
+      "version": "9.0.0-beta.20",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.4",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.13",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.15",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.3.6",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:28 GMT",
       "tag": "@fluentui/react-combobox_v9.0.0-beta.19",
       "version": "9.0.0-beta.19",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 21 Dec 2022 10:17:11 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Jan 2023 14:31:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.21)
+
+Mon, 09 Jan 2023 14:31:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.20..@fluentui/react-combobox_v9.0.0-beta.21)
+
+### Changes
+
+- fix: perf improvements with useEventCallback ([PR #26191](https://github.com/microsoft/fluentui/pull/26191) by sarah.higley@microsoft.com)
+- fix: Combobox always starts at the first option if multiselect, and correctly sets focus visible" ([PR #26173](https://github.com/microsoft/fluentui/pull/26173) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-portal to v9.1.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-positioning to v9.3.7 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+
+## [9.0.0-beta.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.20)
+
+Wed, 04 Jan 2023 01:40:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.19..@fluentui/react-combobox_v9.0.0-beta.20)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.4 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-portal to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-positioning to v9.3.6 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
 ## [9.0.0-beta.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.19)
 
-Wed, 21 Dec 2022 10:17:11 GMT 
+Wed, 21 Dec 2022 10:20:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.18..@fluentui/react-combobox_v9.0.0-beta.19)
 
 ### Changes

package/lib/components/Combobox/Combobox.js

@@ -6,7 +6,6 @@ import { useComboboxContextValues } from '../../contexts/useComboboxContextValue
 /**
  * Combobox component: a selection control that allows users to choose from a set of possible options
  */
-
 export const Combobox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCombobox_unstable(props, ref);
   const contextValues = useComboboxContextValues(state);

package/lib/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAEA,SAAS,wBAAT,QAAyC,yCAAzC;AAGA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EACA,MAAM,aAAa,GAAG,wBAAwB,CAAC,KAAD,CAA9C;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,EAAQ,aAAR,CAA9B;AACD,CAN2D,CAArD;AAQP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE,SAASC,wBAAwB,QAAQ,yCAAyC;AAGlF;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGR,oBAAoB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGN,wBAAwB,CAACK,KAAK,CAAC;EAErDN,0BAA0B,CAACM,KAAK,CAAC;EACjC,OAAOP,uBAAuB,CAACO,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACM,WAAW,GAAG,UAAU","names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n  const state = useCombobox_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useComboboxStyles_unstable(state);\n  return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"]}

package/lib/components/Combobox/renderCombobox.js

@@ -5,19 +5,23 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Render the final JSX of Combobox
  */
-
 export const renderCombobox_unstable = (state, contextValues) => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
   }, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
     value: contextValues.combobox
-  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
-  }), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, { ...slotProps.expandIcon
-  }), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, { ...slotProps.listbox
-  }) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, { ...slotProps.listbox
+  }, /*#__PURE__*/React.createElement(slots.input, {
+    ...slotProps.input
+  }), slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
+    ...slotProps.expandIcon
+  }), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, {
+    ...slotProps.listbox
+  }) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, {
+    ...slotProps.listbox
   })))));
 };
 //# sourceMappingURL=renderCombobox.js.map

package/lib/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,eAAT,QAAgC,gCAAhC;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,iBAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,OAAN,KACE,KAAK,CAAC,WAAN,gBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADD,gBAGC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CAJH,CAHH,CADF,CADF;AAgBD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.input {...slotProps.input} />\n        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,oBAACO,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BT,oBAACG,eAAe,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAQ,gBACrDZ,oBAACO,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnCN,KAAK,CAACO,UAAU,iBAAId,oBAACO,KAAK,CAACO,UAAU;IAAA,GAAKN,SAAS,CAACM;EAAU,EAAI,EAClEP,KAAK,CAACQ,OAAO,KACXV,KAAK,CAACW,WAAW,gBAChBhB,oBAACO,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,EAAI,gBAExCf,oBAACC,MAAM,qBACLD,oBAACO,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC","names":["React","Portal","getSlots","ComboboxContext","renderCombobox_unstable","state","contextValues","slots","slotProps","root","Provider","value","combobox","input","expandIcon","listbox","inlinePopup"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n  const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.input {...slotProps.input} />\n        {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Combobox/useCombobox.js

@@ -15,11 +15,10 @@ import { Listbox } from '../Listbox/Listbox';
  * @param props - props from this instance of Combobox
  * @param ref - reference to root HTMLElement of Combobox
  */
-
 export const useCombobox_unstable = (props, ref) => {
   var _a;
-
-  const baseState = useComboboxBaseState({ ...props,
+  const baseState = useComboboxBaseState({
+    ...props,
     editable: true
   });
   const {
@@ -50,90 +49,82 @@ export const useCombobox_unstable = (props, ref) => {
     excludedPropNames: ['children', 'size']
   });
   const rootRef = React.useRef(null);
-  const triggerRef = React.useRef(null); // calculate listbox width style based on trigger width
-
-  const [popupWidth, setPopupWidth] = React.useState();
+  const triggerRef = React.useRef(null);
+  // calculate listbox width style based on trigger width
+  const [popupDimensions, setPopupDimensions] = React.useState();
   React.useEffect(() => {
     var _a;
-
-    const width = open ? `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px` : undefined;
-    setPopupWidth(width);
-  }, [open]); // set active option and selection based on typing
-
+    // only recalculate width when opening
+    if (open) {
+      const width = `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px`;
+      if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
+        setPopupDimensions({
+          width
+        });
+      }
+    }
+  }, [open, popupDimensions]);
+  // set active option and selection based on typing
   const getOptionFromInput = inputValue => {
     var _a;
-
     const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
-
     if (!searchString || searchString.length === 0) {
       return;
     }
-
     const matcher = optionText => optionText.toLowerCase().indexOf(searchString) === 0;
-
-    const matches = getOptionsMatchingText(matcher); // return first matching option after the current active option, looping back to the top
-
+    const matches = getOptionsMatchingText(matcher);
+    // return first matching option after the current active option, looping back to the top
     if (matches.length > 1 && activeOption) {
       const startIndex = getIndexOfId(activeOption.id);
       const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
       return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
     }
-
     return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
   };
   /* Handle typed input */
   // reset any typed value when an option is selected
-
-
   baseState.selectOption = (ev, option) => {
     setValue(undefined);
     selectOption(ev, option);
   };
-
   const onTriggerBlur = ev => {
     // handle selection and updating value if freeform is false
     if (!baseState.open && !freeform) {
       // select matching option, if the value fully matches
       if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value.toLowerCase())) {
         baseState.selectOption(ev, activeOption);
-      } // reset typed value when the input loses focus while collapsed, unless freeform is true
-
-
+      }
+      // reset typed value when the input loses focus while collapsed, unless freeform is true
       setValue(undefined);
     }
   };
-
   baseState.setOpen = (ev, newState) => {
     if (!newState && !freeform) {
       setValue(undefined);
     }
-
     setOpen(ev, newState);
-  }; // update value and active option based on input
-
-
+  };
+  // update value and active option based on input
   const onTriggerChange = ev => {
-    const inputValue = ev.target.value; // update uncontrolled value
-
-    baseState.setValue(inputValue); // handle updating active option based on input
-
+    const inputValue = ev.target.value;
+    // update uncontrolled value
+    baseState.setValue(inputValue);
+    // handle updating active option based on input
     const matchingOption = getOptionFromInput(inputValue);
     setActiveOption(matchingOption);
-    setFocusVisible(true); // clear selection for single-select if the input value no longer matches the selection
-
+    setFocusVisible(true);
+    // clear selection for single-select if the input value no longer matches the selection
     if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)) {
       clearSelection(ev);
     }
-  }; // open Combobox when typing
-
-
+  };
+  // open Combobox when typing
   const onTriggerKeyDown = ev => {
     if (!open && getDropdownActionFromKey(ev) === 'Type') {
       setOpen(ev, true);
     }
-  }; // resolve input and listbox slot props
-
-
+  };
+  // resolve input and listbox slot props
   let triggerSlot;
   let listboxSlot;
   triggerSlot = resolveShorthand(props.input, {
@@ -147,15 +138,13 @@ export const useCombobox_unstable = (props, ref) => {
   });
   triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
   triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
-  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown); // only resolve listbox slot if needed
-
+  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);
+  // only resolve listbox slot if needed
   listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {
     required: true,
     defaultProps: {
       children: props.children,
-      style: {
-        width: popupWidth
-      }
+      style: popupDimensions
     }
   }) : undefined;
   [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
@@ -169,7 +158,8 @@ export const useCombobox_unstable = (props, ref) => {
     },
     root: resolveShorthand(props.root, {
       required: true,
-      defaultProps: { ...rootNativeProps
+      defaultProps: {
+        ...rootNativeProps
       }
     }),
     input: triggerSlot,
@@ -185,7 +175,6 @@ export const useCombobox_unstable = (props, ref) => {
   };
   state.root.ref = useMergedRefs(state.root.ref, rootRef);
   /* handle open/close + focus change when clicking expandIcon */
-
   const {
     onMouseDown: onIconMouseDown,
     onClick: onIconClick
@@ -197,18 +186,17 @@ export const useCombobox_unstable = (props, ref) => {
     }
   }));
   const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {
-    var _a; // open and set focus
-
-
+    var _a;
+    // open and set focus
     state.setOpen(event, !state.open);
     (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    // set focus visible=false, since this can only be done with the mouse/pointer
+    setFocusVisible(false);
   }));
-
   if (state.expandIcon) {
     state.expandIcon.onMouseDown = onExpandIconMouseDown;
     state.expandIcon.onClick = onExpandIconClick;
   }
-
   return state;
 };
 //# sourceMappingURL=useCombobox.js.map

package/lib/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { freeform, multiselect } = props;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // calculate listbox width style based on trigger width\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    ...baseState,\n    setOpen,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","freeform","multiselect","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","popupDimensions","setPopupDimensions","useState","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","newState","onTriggerChange","target","matchingOption","onTriggerKeyDown","triggerSlot","listboxSlot","input","required","defaultProps","type","onChange","onBlur","onKeyDown","listbox","children","style","state","components","expandIcon","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n  const baseState = useComboboxBaseState({ ...props, editable: true });\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingText,\n    hasFocus,\n    open,\n    selectOption,\n    selectedOptions,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n    setValue,\n    value,\n  } = baseState;\n  const { freeform, multiselect } = props;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const triggerRef = React.useRef<HTMLInputElement>(null);\n\n  // calculate listbox width style based on trigger width\n  const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n  React.useEffect(() => {\n    // only recalculate width when opening\n    if (open) {\n      const width = `${rootRef.current?.clientWidth}px`;\n      if (width !== popupDimensions?.width) {\n        setPopupDimensions({ width });\n      }\n    }\n  }, [open, popupDimensions]);\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingText(matcher);\n\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const startIndex = getIndexOfId(activeOption.id);\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  /* Handle typed input */\n\n  // reset any typed value when an option is selected\n  baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n    setValue(undefined);\n    selectOption(ev, option);\n  };\n\n  const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!baseState.open && !freeform) {\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.value.toLowerCase()) {\n        baseState.selectOption(ev, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  baseState.setOpen = (ev, newState: boolean) => {\n    if (!newState && !freeform) {\n      setValue(undefined);\n    }\n\n    setOpen(ev, newState);\n  };\n\n  // update value and active option based on input\n  const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = ev.target.value;\n    // update uncontrolled value\n    baseState.setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n    setActiveOption(matchingOption);\n\n    setFocusVisible(true);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (\n      !multiselect &&\n      selectedOptions.length === 1 &&\n      (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)\n    ) {\n      clearSelection(ev);\n    }\n  };\n\n  // open Combobox when typing\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(ev) === 'Type') {\n      setOpen(ev, true);\n    }\n  };\n\n  // resolve input and listbox slot props\n  let triggerSlot: Slot<'input'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      ref: useMergedRefs(props.input?.ref, triggerRef),\n      type: 'text',\n      value: value ?? '',\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);\n\n  // only resolve listbox slot if needed\n  listboxSlot =\n    open || hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: popupDimensions,\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: ComboboxState = {\n    components: {\n      root: 'div',\n      input: 'input',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ...rootNativeProps,\n      },\n    }),\n    input: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    ...baseState,\n    setOpen,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  /* handle open/close + focus change when clicking expandIcon */\n  const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n  const onExpandIconMouseDown = useEventCallback(\n    mergeCallbacks(onIconMouseDown, () => {\n      // do not dismiss on blur when closing via clicking the icon\n      if (open) {\n        baseState.ignoreNextBlur.current = true;\n      }\n    }),\n  );\n\n  const onExpandIconClick = useEventCallback(\n    mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n      // open and set focus\n      state.setOpen(event, !state.open);\n      triggerRef.current?.focus();\n\n      // set focus visible=false, since this can only be done with the mouse/pointer\n      setFocusVisible(false);\n    }),\n  );\n\n  if (state.expandIcon) {\n    state.expandIcon.onMouseDown = onExpandIconMouseDown;\n    state.expandIcon.onClick = onExpandIconClick;\n  }\n\n  return state;\n};\n"]}