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

package/CHANGELOG.json

@@ -2,7 +2,120 @@
   "name": "@fluentui/react-combobox",
   "entries": [
     {
-      "date": "Wed, 03 Aug 2022 16:00:09 GMT",
+      "date": "Thu, 15 Sep 2022 09:45:21 GMT",
+      "tag": "@fluentui/react-combobox_v9.0.0-beta.9",
+      "version": "9.0.0-beta.9",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "8484a3ec4abb520d716d199ea79a3cde57fa1da2",
+            "comment": "fix: typing moves active option in Dropdown"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "286479fb4e813506a9560c279215675e8b097500",
+            "comment": "fix: Combobox and Dropdown hover/active border colors and padding styles"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "58026c94a40e8589645d3f6a6b0171a21ba3f879",
+            "comment": "fix: Combobox and Dropdown only show option focus outline when navigating by keyboard"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "83b033de0fe819bc30cc437ec7c4a83dd4c6997e",
+            "comment": "fix: set popup Listbox width to trigger width"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "a5b36f689a2eed64ffca5f43e48e213ccba1d925",
+            "comment": "fix: open/close combobox on icon click"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "7d19a95495b04963b9f88b45da993e590df06b6a",
+            "comment": "feat: Allow typing by default, add allowFreeform"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "cde2f43f6bf0522ddf189dbf3b2905ec1f2f7f88",
+            "comment": "feat: make listbox slot nullable"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "4f921f9810a55ae8d2077de4013fad1516001c0c",
+            "comment": "fix: react-combobox change onSelect to onOptionSelect to avoid conflicts with native onSelect"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.3",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-portal to v9.0.5",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-positioning to v9.2.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-combobox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-combobox",
+            "commit": "84017b6464e13c46a7ae8c61875ead2ff4b6965b",
+            "comment": "bugfix: update useMergedEventCallbacks to mergeCallbacks"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:03:42 GMT",
       "tag": "@fluentui/react-combobox_v9.0.0-beta.8",
       "version": "9.0.0-beta.8",
       "comments": {
@@ -29,19 +142,19 @@
             "author": "beachball",
             "package": "@fluentui/react-combobox",
             "comment": "Bump @fluentui/react-portal to v9.0.4",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-combobox",
             "comment": "Bump @fluentui/react-positioning to v9.1.2",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-combobox",
             "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-combobox
 
-This log was last generated on Wed, 03 Aug 2022 16:00:09 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Sep 2022 09:45:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.9)
+
+Thu, 15 Sep 2022 09:45:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.8..@fluentui/react-combobox_v9.0.0-beta.9)
+
+### Changes
+
+- fix: typing moves active option in Dropdown ([PR #24437](https://github.com/microsoft/fluentui/pull/24437) by sarah.higley@microsoft.com)
+- fix: Combobox and Dropdown hover/active border colors and padding styles ([PR #24362](https://github.com/microsoft/fluentui/pull/24362) by sarah.higley@microsoft.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- fix: Combobox and Dropdown only show option focus outline when navigating by keyboard ([PR #24700](https://github.com/microsoft/fluentui/pull/24700) by sarah.higley@microsoft.com)
+- fix: set popup Listbox width to trigger width ([PR #24733](https://github.com/microsoft/fluentui/pull/24733) by sarah.higley@microsoft.com)
+- fix: open/close combobox on icon click ([PR #24147](https://github.com/microsoft/fluentui/pull/24147) by sarah.higley@microsoft.com)
+- feat: Allow typing by default, add allowFreeform ([PR #23819](https://github.com/microsoft/fluentui/pull/23819) by sarah.higley@microsoft.com)
+- feat: make listbox slot nullable ([PR #24392](https://github.com/microsoft/fluentui/pull/24392) by sarah.higley@microsoft.com)
+- fix: react-combobox change onSelect to onOptionSelect to avoid conflicts with native onSelect ([PR #24550](https://github.com/microsoft/fluentui/pull/24550) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.0.3 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-portal to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-positioning to v9.2.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
 ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.8)
 
-Wed, 03 Aug 2022 16:00:09 GMT 
+Wed, 03 Aug 2022 16:03:42 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-combobox_v9.0.0-beta.7..@fluentui/react-combobox_v9.0.0-beta.8)
 
 ### Changes
@@ -14,9 +37,9 @@ Wed, 03 Aug 2022 16:00:09 GMT
 - fix: prevent react-combobox keyboard selection of disabled options ([PR #24073](https://github.com/microsoft/fluentui/pull/24073) by sarah.higley@microsoft.com)
 - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
 - bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
-- Bump @fluentui/react-portal to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-positioning to v9.1.2 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-portal to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-positioning to v9.1.2 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
 
 ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-combobox_v9.0.0-beta.7)
 

package/Spec.md

@@ -143,9 +143,9 @@ Combobox in v9 allows both controlled and uncontrolled selection, as do the corr
 | -------------------- | ------------------- | ------------------- | ------------------ | -------------------- | ------------ |
 | Initial selection    | initialSelectedKeys | defaultSelectedKeys | defaultSelectedKey | defaultSelectedItems | defaultValue |
 | Controlled selection | selectedKeys        | selectedKey         | selectedKey        | selectedItems        | value        |
-| Callback             | onSelect            | onChange            | onChange           | onChange             | onChange     |
+| Callback             | onOptionSelect      | onChange            | onChange           | onChange             | onChange     |
 
-The reason to move to `onSelect` over `onChange` in the v9 Combobox is because the editable Combobox uses an `<input>` element as its primary slot. Using `onSelect` allows the input to retain it's built-in `onChange` event. This could be revisited if we want to override `onChange` to handle both input value changes and selection changes.
+The reason to move to `onOptionSelect` over `onChange` in the v9 Combobox is because the editable Combobox uses an `<input>` element as its primary slot. Using `onOptionSelect` allows the input to retain it's built-in `onChange` event.
 
 ## Sample Code
 
@@ -344,7 +344,7 @@ type SimpleComboboxProps = {
   onOpenChange?(event: OpenEvents, data: OnOpenChangeData): void;
 
   /* Callback when an option is selected */
-  onSelect?(event: SelectionEvents, optionKey: string): void;
+  onOptionSelect?(event: SelectionEvents, optionKey: string): void;
 };
 ```
 
@@ -367,7 +367,7 @@ type SimpleListboxProps = {
   selectedKeys?: string[];
 
   /* Callback when an option is selected */
-  onSelect?(event: SelectionEvents, optionKey: string): void;
+  onOptionSelect?(event: SelectionEvents, optionKey: string): void;
 };
 ```
 

package/dist/index.d.ts

@@ -75,7 +75,7 @@ declare type ComboboxBaseProps = SelectionProps & {
     size?: 'small' | 'medium' | 'large';
     /**
      * The value displayed by the Combobox.
-     * Use this with `onSelect` to directly control the displayed value string
+     * Use this with `onOptionSelect` to directly control the displayed value string
      */
     value?: string;
 };
@@ -85,10 +85,15 @@ declare type ComboboxBaseProps = SelectionProps & {
  */
 declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'placeholder' | 'value'> & OptionCollectionState & SelectionState & {
     activeOption?: OptionValue;
-    onOptionClick(event: React_2.MouseEvent, option: OptionValue): void;
+    focusVisible: boolean;
+    hasFocus: boolean;
+    ignoreNextBlur: React_2.MutableRefObject<boolean>;
     selectOption(event: SelectionEvents, option: OptionValue): void;
     setActiveOption(option?: OptionValue): void;
+    setFocusVisible(focusVisible: boolean): void;
+    setHasFocus(hasFocus: boolean): void;
     setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
+    setValue(newValue: string): void;
 };
 
 export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
@@ -96,7 +101,7 @@ export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
 /**
  * Context shared with Combobox, Listbox, & Options
  */
-declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'onOptionClick' | 'open' | 'registerOption' | 'selectedOptions' | 'size'>;
+declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption' | 'setOpen' | 'size'>;
 
 export declare type ComboboxContextValues = ComboboxBaseContextValues;
 
@@ -108,14 +113,15 @@ export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
  * Combobox Props
  */
 export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
-    children: React_2.ReactNode;
+    freeform?: boolean;
+    children?: React_2.ReactNode;
 };
 
 export declare type ComboboxSlots = {
     root: NonNullable<Slot<'div'>>;
     expandIcon: Slot<'span'>;
     input: NonNullable<Slot<'input'>>;
-    listbox: NonNullable<Slot<typeof Listbox>>;
+    listbox?: Slot<typeof Listbox>;
 };
 
 /**
@@ -145,7 +151,7 @@ export declare type DropdownSlots = {
     root: NonNullable<Slot<'div'>>;
     expandIcon: Slot<'span'>;
     button: NonNullable<Slot<'button'>>;
-    listbox: NonNullable<Slot<typeof Listbox>>;
+    listbox?: Slot<typeof Listbox>;
 };
 
 /**
@@ -165,7 +171,7 @@ export declare const listboxClassNames: SlotClassNames<ListboxSlots>;
 /**
  * Context shared with all Listbox Options
  */
-declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'multiselect' | 'onOptionClick' | 'registerOption' | 'selectedOptions'>;
+declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'>;
 
 export declare type ListboxContextValues = {
     listbox: ListboxContextValue;
@@ -185,12 +191,9 @@ export declare type ListboxSlots = {
  */
 export declare type ListboxState = ComponentState<ListboxSlots> & OptionCollectionState & SelectionState & {
     activeOption?: OptionValue;
-    onOptionClick(event: React_2.MouseEvent, option: OptionValue): void;
-};
-
-declare type OnSelectData = {
-    optionValue: string;
-    selectedOptions: string[];
+    focusVisible: boolean;
+    selectOption(event: SelectionEvents, option: OptionValue): void;
+    setActiveOption(option?: OptionValue): void;
 };
 
 /**
@@ -239,6 +242,11 @@ export declare type OptionGroupSlots = {
  */
 export declare type OptionGroupState = ComponentState<OptionGroupSlots>;
 
+declare type OptionOnSelectData = {
+    optionValue: string | undefined;
+    selectedOptions: string[];
+};
+
 /**
  * Option Props
  */
@@ -261,6 +269,7 @@ export declare type OptionSlots = {
  */
 export declare type OptionState = ComponentState<OptionSlots> & Pick<OptionProps, 'disabled'> & {
     active: boolean;
+    focusVisible: boolean;
     multiselect?: boolean;
     selected: boolean;
 };
@@ -299,7 +308,7 @@ export declare const renderOption_unstable: (state: OptionState) => JSX.Element;
  */
 export declare const renderOptionGroup_unstable: (state: OptionGroupState) => JSX.Element;
 
-declare type SelectionEvents = React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>;
+declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
 declare type SelectionProps = {
     defaultSelectedOptions?: string[];
@@ -310,10 +319,10 @@ declare type SelectionProps = {
      * @default false
      */
     multiselect?: boolean;
-    onSelect?(event: SelectionEvents, data: OnSelectData): void;
+    onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;
     /**
      * An array of selected option keys.
-     * Use this with `onSelect` to directly control the selected option(s)
+     * Use this with `onOptionSelect` to directly control the selected option(s)
      */
     selectedOptions?: string[];
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.types.js","sourceRoot":"../src/","sources":["components/Combobox/Combobox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox: NonNullable<Slot<typeof Listbox>>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"]}
+{"version":3,"file":"Combobox.types.js","sourceRoot":"../src/","sources":["components/Combobox/Combobox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /* The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    /*\n     * Whether the ComboBox allows freeform user input, rather than restricting to the provided options.\n     */\n    freeform?: boolean;\n\n    /*\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\n"]}

package/lib/components/Combobox/renderCombobox.js

@@ -11,14 +11,13 @@ export const renderCombobox_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
-  const listbox = /*#__PURE__*/React.createElement(slots.listbox, { ...slotProps.listbox
-  }, slotProps.root.children);
-  const popup = state.inlinePopup ? listbox : /*#__PURE__*/React.createElement(Portal, null, listbox);
   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
-  }), state.open ? popup : null));
+  }), 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":["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,MAAM,OAAO,gBAAG,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAAhB;EACA,MAAM,KAAK,GAAG,KAAK,CAAC,WAAN,GAAoB,OAApB,gBAA8B,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,EAAS,OAAT,CAA5C;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,IAAN,GAAa,KAAb,GAAqB,IAHxB,CADF,CADF;AASD,CAfM","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  const listbox = <slots.listbox {...slotProps.listbox}>{slotProps.root.children}</slots.listbox>;\n  const popup = state.inlinePopup ? listbox : <Portal>{listbox}</Portal>;\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        {state.open ? popup : null}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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/"}

package/lib/components/Combobox/useCombobox.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';
-import { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, resolveShorthand, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
@@ -16,7 +16,28 @@ import { Listbox } from '../Listbox/Listbox';
  */
 
 export const useCombobox_unstable = (props, ref) => {
+  var _a;
+
   const baseState = useComboboxBaseState(props);
+  const {
+    activeOption,
+    clearSelection,
+    getIndexOfId,
+    getOptionsMatchingValue,
+    hasFocus,
+    open,
+    selectOption,
+    selectedOptions,
+    setActiveOption,
+    setFocusVisible,
+    setOpen,
+    setValue,
+    value
+  } = baseState;
+  const {
+    freeform,
+    multiselect
+  } = props;
   const {
     primary: triggerNativeProps,
     root: rootNativeProps
@@ -25,22 +46,116 @@ export const useCombobox_unstable = (props, ref) => {
     primarySlotTagName: 'input',
     excludedPropNames: ['children', 'size']
   });
-  const triggerShorthand = resolveShorthand(props.input, {
+  const rootRef = React.useRef(null);
+  const triggerRef = React.useRef(null); // calculate listbox width style based on trigger width
+
+  const [popupWidth, setPopupWidth] = 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]); // handle input type-to-select
+
+  const getSearchString = inputValue => {
+    // if there are commas in the value string, take the text after the last comma
+    const searchString = inputValue.split(',').pop();
+    return (searchString === null || searchString === void 0 ? void 0 : searchString.trim().toLowerCase()) || '';
+  }; // set active option and selection based on typing
+
+
+  const getOptionFromInput = inputValue => {
+    var _a;
+
+    const searchString = getSearchString(inputValue);
+
+    if (searchString.length === 0) {
+      return;
+    }
+
+    const matcher = optionValue => optionValue.toLowerCase().indexOf(searchString) === 0;
+
+    const matches = getOptionsMatchingValue(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 && getSearchString(value) === (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
+
+
+      setValue(undefined);
+    }
+  };
+
+  baseState.setOpen = (ev, newState) => {
+    if (!newState && !freeform) {
+      setValue(undefined);
+    }
+
+    setOpen(ev, newState);
+  }; // 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 matchingOption = getOptionFromInput(inputValue);
+    setActiveOption(matchingOption);
+    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);
+    }
+  }; // resolve input and listbox slot props
+
+
+  let triggerSlot;
+  let listboxSlot;
+  triggerSlot = resolveShorthand(props.input, {
     required: true,
     defaultProps: {
-      onChange: () => {
-        /* Combobox does not yet support allowFreeForm */
-      },
+      ref: useMergedRefs((_a = props.input) === null || _a === void 0 ? void 0 : _a.ref, triggerRef),
       type: 'text',
-      value: baseState.value,
+      value: value !== null && value !== void 0 ? value : '',
       ...triggerNativeProps
     }
   });
-  const listboxShorthand = resolveShorthand(props.listbox, {
-    required: true
-  });
-  const [triggerWithPopup, listboxWithPopup] = useComboboxPopup(props, triggerShorthand, listboxShorthand);
-  const [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerWithPopup, listboxWithPopup);
+  triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
+  triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur); // only resolve listbox slot if needed
+
+  listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {
+    required: true,
+    defaultProps: {
+      children: props.children,
+      style: {
+        width: popupWidth
+      }
+    }
+  }) : undefined;
+  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
+  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
   const state = {
     components: {
       root: 'div',
@@ -50,9 +165,7 @@ export const useCombobox_unstable = (props, ref) => {
     },
     root: resolveShorthand(props.root, {
       required: true,
-      defaultProps: {
-        children: props.children,
-        ...rootNativeProps
+      defaultProps: { ...rootNativeProps
       }
     }),
     input: triggerSlot,
@@ -63,8 +176,33 @@ export const useCombobox_unstable = (props, ref) => {
         children: /*#__PURE__*/React.createElement(ChevronDownIcon, null)
       }
     }),
-    ...baseState
+    ...baseState,
+    setOpen
   };
+  state.root.ref = useMergedRefs(state.root.ref, rootRef);
+  /* handle open/close + focus change when clicking expandIcon */
+
+  const {
+    onMouseDown: onIconMouseDown,
+    onClick: onIconClick
+  } = state.expandIcon || {};
+  const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, () => {
+    // do not dismiss on blur when clicking the icon
+    baseState.ignoreNextBlur.current = true;
+  }));
+  const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {
+    var _a; // open and set focus
+
+
+    state.setOpen(event, !state.open);
+    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }));
+
+  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":["components/Combobox/useCombobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAkB,IAAI,eAA/B,QAAsD,uBAAtD;AACA,SAAS,yBAAT,EAAoC,gBAApC,QAA4D,2BAA5D;AACA,SAAS,oBAAT,QAAqC,kCAArC;AACA,SAAS,sBAAT,QAAuC,oCAAvC;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,OAAT,QAAwB,oBAAxB;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA0E;EAC5G,MAAM,SAAS,GAAG,oBAAoB,CAAC,KAAD,CAAtC;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,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IACrD,QAAQ,EAAE,IAD2C;IAErD,YAAY,EAAE;MACZ,QAAQ,EAAE,MAAK;QACb;MACD,CAHW;MAIZ,IAAI,EAAE,MAJM;MAKZ,KAAK,EAAE,SAAS,CAAC,KALL;MAMZ,GAAG;IANS;EAFuC,CAAd,CAAzC;EAYA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;IAAE,QAAQ,EAAE;EAAZ,CAAhB,CAAzC;EAEA,MAAM,CAAC,gBAAD,EAAmB,gBAAnB,IAAuC,gBAAgB,CAAC,KAAD,EAAQ,gBAAR,EAA0B,gBAA1B,CAA7D;EACA,MAAM,CAAC,WAAD,EAAc,WAAd,IAA6B,sBAAsB,CAAC,KAAD,EAAQ,SAAR,EAAmB,GAAnB,EAAwB,gBAAxB,EAA0C,gBAA1C,CAAzD;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;QACZ,QAAQ,EAAE,KAAK,CAAC,QADJ;QAEZ,GAAG;MAFS;IAFmB,CAAb,CAPK;IAc3B,KAAK,EAAE,WAdoB;IAe3B,OAAO,EAAE,WAfkB;IAgB3B,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,CAhBD;IAsB3B,GAAG;EAtBwB,CAA7B;EAyBA,OAAO,KAAP;AACD,CApDM","sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { Listbox } from '../Listbox/Listbox';\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\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['children', 'size'],\n  });\n\n  const triggerShorthand = resolveShorthand(props.input, {\n    required: true,\n    defaultProps: {\n      onChange: () => {\n        /* Combobox does not yet support allowFreeForm */\n      },\n      type: 'text',\n      value: baseState.value,\n      ...triggerNativeProps,\n    },\n  });\n\n  const listboxShorthand = resolveShorthand(props.listbox, { required: true });\n\n  const [triggerWithPopup, listboxWithPopup] = useComboboxPopup(props, triggerShorthand, listboxShorthand);\n  const [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerWithPopup, listboxWithPopup);\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        children: props.children,\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  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["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 { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\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/"}