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

package/CHANGELOG.json

@@ -2,7 +2,72 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Thu, 17 Nov 2022 23:02:33 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:18 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.17",
+      "version": "9.0.0-beta.17",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "84a26d8111dc4bb9d3cd1edbb99691e68899d261",
+            "comment": " feat: update Option value to be a non-display value, and add an Option text prop that is required if the child is not a string"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "d1c530bef46d1ddd962ee29ff8fd510475ec5c96",
+            "comment": "fix: open Combobox popup when typing"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "6679b1430f61182d34c0b90de33806d9624d811a",
+            "comment": "chore: Replace use of fontSize tokens with typographyStyles"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "e19f11c2cc4e52c06d93bcd2eed8ae84572b18d1",
+            "comment": "fix: Combobox should close on blur after clicking expand icon"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.12",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.3.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ],
+        "none": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "3c7120c60f749da6b0c1427bbdc69320daa4e1e7",
+            "comment": "feat: add Dropdown stories"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:35 GMT",
       "tag": "@fluentui/react-combobox_v9.0.0-beta.16",
       "version": "9.0.0-beta.16",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Thu, 17 Nov 2022 23:02:33 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.17)
+
+Mon, 05 Dec 2022 18:25:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.16..@fluentui/react-combobox_v9.0.0-beta.17)
+
+### Changes
+
+-  feat: update Option value to be a non-display value, and add an Option text prop that is required if the child is not a string ([PR #25379](https://github.com/microsoft/fluentui/pull/25379) by sarah.higley@microsoft.com)
+- fix: open Combobox popup when typing ([PR #25769](https://github.com/microsoft/fluentui/pull/25769) by sarah.higley@microsoft.com)
+- chore: Replace use of fontSize tokens with typographyStyles ([PR #25727](https://github.com/microsoft/fluentui/pull/25727) by behowell@microsoft.com)
+- fix: Combobox should close on blur after clicking expand icon ([PR #25771](https://github.com/microsoft/fluentui/pull/25771) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-portal to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-positioning to v9.3.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
 ## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.16)
 
-Thu, 17 Nov 2022 23:02:33 GMT 
+Thu, 17 Nov 2022 23:05:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.15..@fluentui/react-combobox_v9.0.0-beta.16)
 
 ### Changes

package/dist/index.d.ts

@@ -47,7 +47,7 @@ declare type ComboboxBaseProps = SelectionProps & {
      */
     defaultOpen?: boolean;
     /**
-     * The default value when the combobox's value is uncontrolled
+     * The default value displayed in the trigger input or button when the combobox's value is uncontrolled
      */
     defaultValue?: string;
     /**
@@ -229,8 +229,8 @@ declare type OptionCollectionState = {
     getOptionAtIndex(index: number): OptionValue | undefined;
     /** Returns the option data by key. */
     getOptionById(id: string): OptionValue | undefined;
-    /** Returns an array of options filtered by a value matching function. */
-    getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
+    /** Returns an array of options filtered by a value matching function against the option's text string. */
+    getOptionsMatchingText(matcher: (value: string) => boolean): OptionValue[];
     /** The unordered option data. */
     options: OptionValue[];
     registerOption: (option: OptionValue, element: HTMLElement) => () => void;
@@ -260,6 +260,7 @@ export declare type OptionGroupState = ComponentState<OptionGroupSlots>;
 
 declare type OptionOnSelectData = {
     optionValue: string | undefined;
+    optionText: string | undefined;
     selectedOptions: string[];
 };
 
@@ -273,7 +274,24 @@ export declare type OptionProps = ComponentProps<Partial<OptionSlots>> & {
      */
     disabled?: boolean;
     value?: string;
-};
+} & ({
+    /**
+     * An optional override the string value of the Option's display text,
+     * defaulting to the Option's child content.
+     * This is used as the Dropdown button's or Combobox input's value when the option is selected,
+     * and as the comparison for type-to-find keyboard functionality.
+     */
+    text?: string;
+    children: string;
+} | {
+    /**
+     * The string value of the Option's display text when the Option's children are not a string.
+     * This is used as the Dropdown button's or Combobox input's value when the option is selected,
+     * and as the comparison for type-to-find keyboard functionality.
+     */
+    text: string;
+    children?: React_2.ReactNode;
+});
 
 export declare type OptionSlots = {
     root: NonNullable<Slot<'div'>>;
@@ -295,6 +313,8 @@ declare type OptionValue = {
     disabled?: boolean;
     /** The `id` attribute of the option. */
     id: string;
+    /** The `text` string for the option. */
+    text: string;
     /** The value string of the option. */
     value: string;
 };

package/lib/components/Combobox/useCombobox.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
 import { getPartitionedNativeProps, resolveShorthand, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
 import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
@@ -23,7 +24,7 @@ export const useCombobox_unstable = (props, ref) => {
     activeOption,
     clearSelection,
     getIndexOfId,
-    getOptionsMatchingValue,
+    getOptionsMatchingText,
     hasFocus,
     open,
     selectOption,
@@ -73,9 +74,9 @@ export const useCombobox_unstable = (props, ref) => {
       return;
     }
 
-    const matcher = optionValue => optionValue.toLowerCase().indexOf(searchString) === 0;
+    const matcher = optionText => optionText.toLowerCase().indexOf(searchString) === 0;
 
-    const matches = getOptionsMatchingValue(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);
@@ -128,6 +129,13 @@ export const useCombobox_unstable = (props, ref) => {
     if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || selectedOptions[0].indexOf(inputValue) !== 0)) {
       clearSelection(ev);
     }
+  }; // open Combobox when typing
+
+
+  const onTriggerKeyDown = ev => {
+    if (!open && getDropdownActionFromKey(ev) === 'Type') {
+      setOpen(ev, true);
+    }
   }; // resolve input and listbox slot props
 
 
@@ -143,7 +151,8 @@ export const useCombobox_unstable = (props, ref) => {
     }
   });
   triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
-  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed
+  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
+  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown); // only resolve listbox slot if needed
 
   listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {
     required: true,
@@ -187,8 +196,10 @@ export const useCombobox_unstable = (props, ref) => {
     onClick: onIconClick
   } = state.expandIcon || {};
   const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, () => {
-    // do not dismiss on blur when clicking the icon
-    baseState.ignoreNextBlur.current = true;
+    // do not dismiss on blur when closing via clicking the icon
+    if (open) {
+      baseState.ignoreNextBlur.current = true;
+    }
   }));
   const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {
     var _a; // open and set focus

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,eAA/B,QAAsD,uBAAtD;AACA,SACE,yBADF,EAEE,gBAFF,EAGE,cAHF,EAIE,gBAJF,EAKE,aALF,QAMO,2BANP;AAOA,SAAS,oBAAT,QAAqC,kCAArC;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,sBAAT,QAAuC,oCAAvC;AACA,SAAS,OAAT,QAAwB,oBAAxB;AAMA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA0E;;;EAC5G,MAAM,SAAS,GAAG,oBAAoB,CAAC,KAAD,CAAtC;EACA,MAAM;IACJ,YADI;IAEJ,cAFI;IAGJ,YAHI;IAIJ,uBAJI;IAKJ,QALI;IAMJ,IANI;IAOJ,YAPI;IAQJ,eARI;IASJ,eATI;IAUJ,eAVI;IAWJ,OAXI;IAYJ,QAZI;IAaJ;EAbI,IAcF,SAdJ;EAeA,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA4B,KAAlC;EAEA,MAAM;IAAE,OAAO,EAAE,kBAAX;IAA+B,IAAI,EAAE;EAArC,IAAyD,yBAAyB,CAAC;IACvF,KADuF;IAEvF,kBAAkB,EAAE,OAFmE;IAGvF,iBAAiB,EAAE,CAAC,UAAD,EAAa,MAAb;EAHoE,CAAD,CAAxF;EAMA,MAAM,OAAO,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAhB;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,CAA+B,IAA/B,CAAnB,CA1B4G,CA4B5G;;EACA,MAAM,CAAC,UAAD,EAAa,aAAb,IAA8B,KAAK,CAAC,QAAN,EAApC;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;IACnB,MAAM,KAAK,GAAG,IAAI,GAAG,GAAG,CAAA,EAAA,GAAA,OAAO,CAAC,OAAR,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAE,WAAW,IAAlC,GAAyC,SAA3D;IACA,aAAa,CAAC,KAAD,CAAb;EACD,CAHD,EAGG,CAAC,IAAD,CAHH,EA9B4G,CAmC5G;;EACA,MAAM,eAAe,GAAI,UAAD,IAA+B;IACrD;IACA,MAAM,YAAY,GAAG,UAAU,CAAC,KAAX,CAAiB,GAAjB,EAAsB,GAAtB,EAArB;IAEA,OAAO,CAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAE,IAAd,GAAqB,WAArB,EAAA,KAAsC,EAA7C;EACD,CALD,CApC4G,CA2C5G;;;EACA,MAAM,kBAAkB,GAAI,UAAD,IAAgD;;;IACzE,MAAM,YAAY,GAAG,eAAe,CAAC,UAAD,CAApC;;IAEA,IAAI,YAAY,CAAC,MAAb,KAAwB,CAA5B,EAA+B;MAC7B;IACD;;IAED,MAAM,OAAO,GAAI,WAAD,IAAyB,WAAW,CAAC,WAAZ,GAA0B,OAA1B,CAAkC,YAAlC,MAAoD,CAA7F;;IACA,MAAM,OAAO,GAAG,uBAAuB,CAAC,OAAD,CAAvC,CARyE,CAUzE;;IACA,IAAI,OAAO,CAAC,MAAR,GAAiB,CAAjB,IAAsB,YAA1B,EAAwC;MACtC,MAAM,UAAU,GAAG,YAAY,CAAC,YAAY,CAAC,EAAd,CAA/B;MACA,MAAM,SAAS,GAAG,OAAO,CAAC,IAAR,CAAa,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,EAAR,CAAZ,IAA2B,UAAlD,CAAlB;MACA,OAAO,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,OAAO,CAAC,CAAD,CAA3B;IACD;;IAED,OAAO,CAAA,EAAA,GAAA,OAAO,CAAC,CAAD,CAAP,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,EAAV,GAAc,SAArB;EACD,CAlBD;EAoBA;EAEA;;;EACA,SAAS,CAAC,YAAV,GAAyB,CAAC,EAAD,EAAsB,MAAtB,KAA6C;IACpE,QAAQ,CAAC,SAAD,CAAR;IACA,YAAY,CAAC,EAAD,EAAK,MAAL,CAAZ;EACD,CAHD;;EAKA,MAAM,aAAa,GAAI,EAAD,IAA2C;IAC/D;IACA,IAAI,CAAC,SAAS,CAAC,IAAX,IAAmB,CAAC,QAAxB,EAAkC;MAChC;MACA,IAAI,KAAK,IAAI,YAAT,IAAyB,eAAe,CAAC,KAAD,CAAf,MAA2B,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAE,KAAd,CAAoB,WAApB,EAA3B,CAA7B,EAA2F;QACzF,SAAS,CAAC,YAAV,CAAuB,EAAvB,EAA2B,YAA3B;MACD,CAJ+B,CAMhC;;;MACA,QAAQ,CAAC,SAAD,CAAR;IACD;EACF,CAXD;;EAaA,SAAS,CAAC,OAAV,GAAoB,CAAC,EAAD,EAAK,QAAL,KAA0B;IAC5C,IAAI,CAAC,QAAD,IAAa,CAAC,QAAlB,EAA4B;MAC1B,QAAQ,CAAC,SAAD,CAAR;IACD;;IAED,OAAO,CAAC,EAAD,EAAK,QAAL,CAAP;EACD,CAND,CArF4G,CA6F5G;;;EACA,MAAM,eAAe,GAAI,EAAD,IAA4C;IAClE,MAAM,UAAU,GAAG,EAAE,CAAC,MAAH,CAAU,KAA7B,CADkE,CAElE;;IACA,SAAS,CAAC,QAAV,CAAmB,UAAnB,EAHkE,CAKlE;;IACA,MAAM,cAAc,GAAG,kBAAkB,CAAC,UAAD,CAAzC;IACA,eAAe,CAAC,cAAD,CAAf;IAEA,eAAe,CAAC,IAAD,CAAf,CATkE,CAWlE;;IACA,IACE,CAAC,WAAD,IACA,eAAe,CAAC,MAAhB,KAA2B,CAD3B,KAEC,UAAU,CAAC,MAAX,GAAoB,CAApB,IAAyB,eAAe,CAAC,CAAD,CAAf,CAAmB,OAAnB,CAA2B,UAA3B,MAA2C,CAFrE,CADF,EAIE;MACA,cAAc,CAAC,EAAD,CAAd;IACD;EACF,CAnBD,CA9F4G,CAmH5G;;;EACA,IAAI,WAAJ;EACA,IAAI,WAAJ;EAEA,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IAC1C,QAAQ,EAAE,IADgC;IAE1C,YAAY,EAAE;MACZ,GAAG,EAAE,aAAa,CAAC,CAAA,EAAA,GAAA,KAAK,CAAC,KAAN,MAAW,IAAX,IAAW,EAAA,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAW,EAAA,CAAE,GAAd,EAAmB,UAAnB,CADN;MAEZ,IAAI,EAAE,MAFM;MAGZ,KAAK,EAAE,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,EAHJ;MAIZ,GAAG;IAJS;EAF4B,CAAd,CAA9B;EAUA,WAAW,CAAC,QAAZ,GAAuB,cAAc,CAAC,WAAW,CAAC,QAAb,EAAuB,eAAvB,CAArC;EACA,WAAW,CAAC,MAAZ,GAAqB,cAAc,CAAC,WAAW,CAAC,MAAb,EAAqB,aAArB,CAAnC,CAlI4G,CAoI5G;;EACA,WAAW,GACT,IAAI,IAAI,QAAR,GACI,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;IAC9B,QAAQ,EAAE,IADoB;IAE9B,YAAY,EAAE;MACZ,QAAQ,EAAE,KAAK,CAAC,QADJ;MAEZ,KAAK,EAAE;QAAE,KAAK,EAAE;MAAT;IAFK;EAFgB,CAAhB,CADpB,GAQI,SATN;EAWA,CAAC,WAAD,EAAc,WAAd,IAA6B,gBAAgB,CAAC,KAAD,EAAQ,WAAR,EAAqB,WAArB,CAA7C;EACA,CAAC,WAAD,EAAc,WAAd,IAA6B,sBAAsB,CAAC,KAAD,EAAQ,SAAR,EAAmB,GAAnB,EAAwB,WAAxB,EAAqC,WAArC,CAAnD;EAEA,MAAM,KAAK,GAAkB;IAC3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE,OAFG;MAGV,UAAU,EAAE,MAHF;MAIV,OAAO,EAAE;IAJC,CADe;IAO3B,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP,EAAa;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,EACZ,GAAG;MADS;IAFmB,CAAb,CAPK;IAa3B,KAAK,EAAE,WAboB;IAc3B,OAAO,EAAE,WAdkB;IAe3B,UAAU,EAAE,gBAAgB,CAAC,KAAK,CAAC,UAAP,EAAmB;MAC7C,QAAQ,EAAE,IADmC;MAE7C,YAAY,EAAE;QACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,eAAD,EAAgB,IAAhB;MADE;IAF+B,CAAnB,CAfD;IAqB3B,GAAG,SArBwB;IAsB3B;EAtB2B,CAA7B;EAyBA,KAAK,CAAC,IAAN,CAAW,GAAX,GAAiB,aAAa,CAAC,KAAK,CAAC,IAAN,CAAW,GAAZ,EAAiB,OAAjB,CAA9B;EAEA;;EACA,MAAM;IAAE,WAAW,EAAE,eAAf;IAAgC,OAAO,EAAE;EAAzC,IAAyD,KAAK,CAAC,UAAN,IAAoB,EAAnF;EACA,MAAM,qBAAqB,GAAG,gBAAgB,CAC5C,cAAc,CAAC,eAAD,EAAkB,MAAK;IACnC;IACA,SAAS,CAAC,cAAV,CAAyB,OAAzB,GAAmC,IAAnC;EACD,CAHa,CAD8B,CAA9C;EAOA,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,cAAc,CAAC,WAAD,EAAe,KAAD,IAA6C;WAAA,CACvE;;;IACA,KAAK,CAAC,OAAN,CAAc,KAAd,EAAqB,CAAC,KAAK,CAAC,IAA5B;IACA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAAF,EAAlB;EACD,CAJa,CAD0B,CAA1C;;EAQA,IAAI,KAAK,CAAC,UAAV,EAAsB;IACpB,KAAK,CAAC,UAAN,CAAiB,WAAjB,GAA+B,qBAA/B;IACA,KAAK,CAAC,UAAN,CAAiB,OAAjB,GAA2B,iBAA3B;EACD;;EAED,OAAO,KAAP;AACD,CArMM","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 { 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);\n  const {\n    activeOption,\n    clearSelection,\n    getIndexOfId,\n    getOptionsMatchingValue,\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  // handle input type-to-select\n  const getSearchString = (inputValue: string): string => {\n    // if there are commas in the value string, take the text after the last comma\n    const searchString = inputValue.split(',').pop();\n\n    return searchString?.trim().toLowerCase() || '';\n  };\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = getSearchString(inputValue);\n\n    if (searchString.length === 0) {\n      return;\n    }\n\n    const matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString) === 0;\n    const matches = getOptionsMatchingValue(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 && getSearchString(value) === 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  // 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\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 clicking the icon\n      baseState.ignoreNextBlur.current = true;\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,"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);\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  // handle input type-to-select\n  const getSearchString = (inputValue: string): string => {\n    // if there are commas in the value string, take the text after the last comma\n    const searchString = inputValue.split(',').pop();\n\n    return searchString?.trim().toLowerCase() || '';\n  };\n\n  // set active option and selection based on typing\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = getSearchString(inputValue);\n\n    if (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 && getSearchString(value) === 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/"}

package/lib/components/Combobox/useComboboxStyles.js

@@ -1,4 +1,4 @@
-import { tokens } from '@fluentui/react-theme';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { iconSizes } from '../../utils/internalTokens';
 export const comboboxClassNames = {
@@ -200,8 +200,10 @@ const useInputStyles = /*#__PURE__*/__styles({
     "B3o7kgh": "f13ta7ih"
   },
   "small": {
-    "Be2twd7": "fy9rknc",
     "Bqenvij": "f50nw0v",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["fhxju0i", "f1cnd47f"],
@@ -209,8 +211,10 @@ const useInputStyles = /*#__PURE__*/__styles({
     "uwmqm3": ["f1xile11", "fqznh8f"]
   },
   "medium": {
-    "Be2twd7": "fkhj508",
     "Bqenvij": "f1tvdnth",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["fhxju0i", "f1cnd47f"],
@@ -218,8 +222,10 @@ const useInputStyles = /*#__PURE__*/__styles({
     "uwmqm3": ["f1e60jzv", "f135dnwl"]
   },
   "large": {
-    "Be2twd7": "fod5ikn",
     "Bqenvij": "f1ihhdec",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "faaz57k",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["fhxju0i", "f1cnd47f"],
@@ -233,7 +239,7 @@ const useInputStyles = /*#__PURE__*/__styles({
     "yvdlaj": "fahhnxm"
   }
 }, {
-  "d": [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f50nw0v{height:22px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1tvdnth{height:30px;}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1ihhdec{height:38px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
+  "d": [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f50nw0v{height:22px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1tvdnth{height:30px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1ihhdec{height:38px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"],
   "f": [".ftqa4ok:focus{outline-style:none;}"]
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {},\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    fontSize: tokens.fontSizeBase200,\n    height: fieldHeights.small,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    height: fieldHeights.medium,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    height: fieldHeights.large,\n    lineHeight: tokens.lineHeightBase400,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { ComboboxSlots, ComboboxState } from './Combobox.types';\n\nexport const comboboxClassNames: SlotClassNames<ComboboxSlots> = {\n  root: 'fui-Combobox',\n  input: 'fui-Combobox__input',\n  expandIcon: 'fui-Combobox__expandIcon',\n  listbox: 'fui-Combobox__listbox',\n};\n\n// Matches internal heights for Select and Input, but there are no theme variables for these\n// field heights are 2px less than other controls, since the border is on the parent element.\nconst fieldHeights = {\n  small: '22px',\n  medium: '30px',\n  large: '38px',\n};\n\n/**\n * Styles for Combobox\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    columnGap: tokens.spacingHorizontalXXS,\n    display: 'inline-grid',\n    gridTemplateColumns: '1fr auto',\n    justifyContent: 'space-between',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {},\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // size variants\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalMNudge,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  input: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    color: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n\n    '&::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1,\n    },\n  },\n\n  // size variants\n  small: {\n    height: fieldHeights.small,\n    ...typographyStyles.caption1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  medium: {\n    height: fieldHeights.medium,\n    ...typographyStyles.body1,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`),\n  },\n  large: {\n    height: fieldHeights.large,\n    ...typographyStyles.body2,\n    ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Combobox slots based on the state\n */\nexport const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {\n  const { appearance, open, size } = state;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const disabled = state.input.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    comboboxClassNames.root,\n    styles.root,\n    styles[appearance],\n    styles[size],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    comboboxClassNames.input,\n    inputStyles.input,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      comboboxClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      comboboxClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Dropdown/useDropdown.js

@@ -22,7 +22,7 @@ export const useDropdown_unstable = (props, ref) => {
   const {
     activeOption,
     getIndexOfId,
-    getOptionsMatchingValue,
+    getOptionsMatchingText,
     open,
     setActiveOption,
     setFocusVisible,
@@ -55,7 +55,7 @@ export const useDropdown_unstable = (props, ref) => {
 
     let matcher = optionValue => optionValue.toLowerCase().indexOf(searchString.current) === 0;
 
-    let matches = getOptionsMatchingValue(matcher);
+    let matches = getOptionsMatchingText(matcher);
     let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0; // if the dropdown is already open and the searchstring is a single character,
     // then look after the current activeOption for letters
     // this is so slowly typing the same letter will cycle through matches
@@ -74,7 +74,7 @@ export const useDropdown_unstable = (props, ref) => {
 
         matcher = optionValue => optionValue.toLowerCase().indexOf(letters[0]) === 0;
 
-        matches = getOptionsMatchingValue(matcher);
+        matches = getOptionsMatchingText(matcher);
       }
     } // if there is an active option and multiple matches,
     // return first matching option after the current active option, looping back to the top

package/lib/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } 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 { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingValue,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n  } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\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  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingValue(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingValue(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\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  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.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: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } 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 { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const {\n    activeOption,\n    getIndexOfId,\n    getOptionsMatchingText,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setOpen,\n  } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\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  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionValue: string) => optionValue.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\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  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.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: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Dropdown/useDropdownStyles.js

@@ -1,4 +1,4 @@
-import { tokens } from '@fluentui/react-theme';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { iconSizes } from '../../utils/internalTokens';
 export const dropdownClassNames = {
@@ -78,7 +78,9 @@ const useStyles = /*#__PURE__*/__styles({
     "sj55zd": "fxc4j92"
   },
   "small": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "fwrc4pm",
     "z8tnut": "f1khb0e9",
     "z189sj": ["fdw0yi8", "fk8j09s"],
@@ -86,7 +88,9 @@ const useStyles = /*#__PURE__*/__styles({
     "uwmqm3": ["f1xile11", "fqznh8f"]
   },
   "medium": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi",
     "z8tnut": "f1sbtcvk",
     "z189sj": ["f11gcy0p", "f1ng84yb"],
@@ -95,7 +99,9 @@ const useStyles = /*#__PURE__*/__styles({
   },
   "large": {
     "i8kkvl": "f1rjii52",
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "faaz57k",
     "z8tnut": "f1a1bwwz",
     "z189sj": ["fw5db7e", "f1uw59to"],
@@ -189,7 +195,7 @@ const useStyles = /*#__PURE__*/__styles({
     "n51gp8": ["f14g86mu", "f1rvyvqg"]
   }
 }, {
-  "d": [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  "d": [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".f1exfvgq{min-width:250px;}", ".f10pi13n{position:relative;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f14pi962::after{border-bottom-width:var(--strokeWidthThick);}", ".f1lh990p::after{border-bottom-style:solid;}", ".f1jc6hxc::after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f13evtba::after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1yk9hq::after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", ".fjseox{display:none;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f14mj54c{-webkit-column-gap:var(--spacingHorizontalXXS);column-gap:var(--spacingHorizontalXXS);}", ".f1k6fduh{cursor:pointer;}", ".f13qh94s{display:grid;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}", ".f1869bpl{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fly5x3f{width:100%;}", ".fxc4j92{color:var(--colorNeutralForeground4);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1khb0e9{padding-top:3px;}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1jnq6q7{padding-bottom:3px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1sbtcvk{padding-top:5px;}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".fdghr9{padding-bottom:5px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1a1bwwz{padding-top:7px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fy7v416{padding-bottom:7px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
   "w": [".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", ".fjw5xc1:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"],
   "m": [["@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"