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

package/lib/index.js

@@ -1,6 +1,12 @@
+export { ComboboxProvider } from './contexts/ComboboxContext';
+export { ListboxProvider } from './contexts/ListboxContext';
+export { useComboboxContextValues } from './contexts/useComboboxContextValues';
+export { useListboxContextValues } from './contexts/useListboxContextValues';
 export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';
 export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';
 export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';
 export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';
 export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';
+// eslint-disable-next-line deprecation/deprecation
+export { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP;AAQA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP;AAeA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP;AAeA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,wBAAwB,QAAQ,qCAAqC;AAC9E,SAASC,uBAAuB,QAAQ,oCAAoC;AAC5E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW;AAElB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}

package/lib/utils/ComboboxBase.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxBase.types.js","sourceRoot":"../src/","sources":["utils/ComboboxBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n  /**\n   * Controls the colors and borders of the combobox trigger.\n   * @default 'outline'\n   */\n  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n  /**\n   * The default open state when open is uncontrolled\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * The default value when the combobox's value is uncontrolled\n   */\n  defaultValue?: string;\n\n  /**\n   * Render the combobox's popup inline in the DOM.\n   * This has accessibility benefits, particularly for touch screen readers.\n   */\n  inlinePopup?: boolean;\n\n  /**\n   * Callback when the open/closed state of the dropdown changes\n   */\n  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n  /**\n   * Sets the open/closed state of the dropdown.\n   * Use together with onOpenChange to fully control the dropdown's visibility\n   */\n  open?: boolean;\n\n  /**\n   * If set, the placeholder will show when no value is selected\n   */\n  placeholder?: string;\n\n  /**\n   * Configure the positioning of the combobox dropdown\n   *\n   * @defaultvalue below\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Controls the size of the combobox faceplate\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value displayed by the Combobox.\n   * Use this with `onOptionSelect` to directly control the displayed value string\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'placeholder' | 'value'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    // whether the combobox/dropdown currently has focus\n    hasFocus: boolean;\n\n    /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"]}
+{"version":3,"file":"ComboboxBase.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n  /**\n   * Controls the colors and borders of the combobox trigger.\n   * @default 'outline'\n   */\n  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n  /**\n   * The default open state when open is uncontrolled\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n   */\n  defaultValue?: string;\n\n  /**\n   * Render the combobox's popup inline in the DOM.\n   * This has accessibility benefits, particularly for touch screen readers.\n   */\n  inlinePopup?: boolean;\n\n  /**\n   * Callback when the open/closed state of the dropdown changes\n   */\n  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n  /**\n   * Sets the open/closed state of the dropdown.\n   * Use together with onOpenChange to fully control the dropdown's visibility\n   */\n  open?: boolean;\n\n  /**\n   * If set, the placeholder will show when no value is selected\n   */\n  placeholder?: string;\n\n  /**\n   * Configure the positioning of the combobox dropdown\n   *\n   * @defaultvalue below\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Controls the size of the combobox faceplate\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value displayed by the Combobox.\n   * Use this with `onOptionSelect` to directly control the displayed value string\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    // whether the combobox/dropdown currently has focus\n    hasFocus: boolean;\n\n    /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    setActiveOption(option?: OptionValue): void;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"]}

package/lib/utils/OptionCollection.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionCollection.types.js","sourceRoot":"../src/","sources":["utils/OptionCollection.types.ts"],"names":[],"mappings":"","sourcesContent":["export type OptionValue = {\n  /** The disabled state of the option. */\n  disabled?: boolean;\n\n  /** The `id` attribute of the option. */\n  id: string;\n\n  /** The value string of the option. */\n  value: string;\n};\n\nexport type OptionCollectionState = {\n  /** The total number of options in the collection. */\n  getCount: () => number;\n\n  /** Returns the index of an option by key. */\n  getIndexOfId(id: string): number;\n\n  /** Returns the option data for the nth option. */\n  getOptionAtIndex(index: number): OptionValue | undefined;\n\n  /** Returns the option data by key. */\n  getOptionById(id: string): OptionValue | undefined;\n\n  /** Returns an array of options filtered by a value matching function. */\n  getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];\n\n  /** The unordered option data. */\n  options: OptionValue[];\n\n  /* A function that child options call to register their values. Returns a function to unregister the option. */\n  registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"]}
+{"version":3,"file":"OptionCollection.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/OptionCollection.types.ts"],"names":[],"mappings":"","sourcesContent":["export type OptionValue = {\n  /** The disabled state of the option. */\n  disabled?: boolean;\n\n  /** The `id` attribute of the option. */\n  id: string;\n\n  /** The `text` string for the option. */\n  text: string;\n\n  /** The value string of the option. */\n  value: string;\n};\n\nexport type OptionCollectionState = {\n  /** The total number of options in the collection. */\n  getCount: () => number;\n\n  /** Returns the index of an option by key. */\n  getIndexOfId(id: string): number;\n\n  /** Returns the option data for the nth option. */\n  getOptionAtIndex(index: number): OptionValue | undefined;\n\n  /** Returns the option data by key. */\n  getOptionById(id: string): OptionValue | undefined;\n\n  /** Returns an array of options filtered by a value matching function against the option's text string. */\n  getOptionsMatchingText(matcher: (value: string) => boolean): OptionValue[];\n\n  /** The unordered option data. */\n  options: OptionValue[];\n\n  /* A function that child options call to register their values. Returns a function to unregister the option. */\n  registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"]}

package/lib/utils/Selection.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.types.js","sourceRoot":"../src/","sources":["utils/Selection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /* For an uncontrolled component, sets the initial selection */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /* Callback when an option is selected */\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   */\n  selectedOptions?: string[];\n};\n\nexport type SelectionState = Required<Pick<SelectionProps, 'selectedOptions'>> & Pick<SelectionProps, 'multiselect'>;\n\n/* Values returned by the useSelection hook */\nexport type SelectionValue = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/*\n * Data for the onOptionSelect callback.\n * `optionValue` will be undefined if the multiple options are modified at once.\n */\nexport type OptionOnSelectData = { optionValue: string | undefined; selectedOptions: string[] };\n\n/* Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}
+{"version":3,"file":"Selection.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/Selection.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n  /* For an uncontrolled component, sets the initial selection */\n  defaultSelectedOptions?: string[];\n\n  /**\n   * Sets the selection type to multiselect.\n   * Set this to true for multiselect, even if fully controlling selection state.\n   * This enables styles and accessibility properties to be set.\n   * @default false\n   */\n  multiselect?: boolean;\n\n  /* Callback when an option is selected */\n  onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n  /**\n   * An array of selected option keys.\n   * Use this with `onOptionSelect` to directly control the selected option(s)\n   */\n  selectedOptions?: string[];\n};\n\n/* Values returned by the useSelection hook */\nexport type SelectionState = {\n  clearSelection: (event: SelectionEvents) => void;\n  selectedOptions: string[];\n  selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/*\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n  optionValue: string | undefined;\n  optionText: string | undefined;\n  selectedOptions: string[];\n};\n\n/* Possible event types for onOptionSelect */\nexport type SelectionEvents =\n  | React.ChangeEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}

package/lib/utils/dropdownKeyActions.js

@@ -2,7 +2,6 @@ import * as keys from '@fluentui/keyboard-keys';
 /**
  * Converts a keyboard interaction into a defined action
  */
-
 export function getDropdownActionFromKey(e, options = {}) {
   const {
     open = true,
@@ -14,92 +13,72 @@ export function getDropdownActionFromKey(e, options = {}) {
     ctrlKey,
     key,
     metaKey
-  } = e; // typing action occurs whether open or closed
-
+  } = e;
+  // typing action occurs whether open or closed
   if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {
     return 'Type';
-  } // handle opening the dropdown if closed
-
-
+  }
+  // handle opening the dropdown if closed
   if (!open) {
     if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {
       return 'Open';
-    } // if the dropdown is closed and an action did not match the above, do nothing
-
-
+    }
+    // if the dropdown is closed and an action did not match the above, do nothing
     return 'None';
-  } // select or close actions
-
-
+  }
+  // select or close actions
   if (code === keys.ArrowUp && altKey || code === keys.Enter || !multiselect && code === keys.Space) {
     return 'CloseSelect';
   }
-
   if (multiselect && code === keys.Space) {
     return 'Select';
   }
-
   if (code === keys.Escape) {
     return 'Close';
-  } // navigation interactions
-
-
+  }
+  // navigation interactions
   if (code === keys.ArrowDown) {
     return 'Next';
   }
-
   if (code === keys.ArrowUp) {
     return 'Previous';
   }
-
   if (code === keys.Home) {
     return 'First';
   }
-
   if (code === keys.End) {
     return 'Last';
   }
-
   if (code === keys.PageUp) {
     return 'PageUp';
   }
-
   if (code === keys.PageDown) {
     return 'PageDown';
   }
-
   if (code === keys.Tab) {
     return 'Tab';
-  } // if nothing matched, return none
-
-
+  }
+  // if nothing matched, return none
   return 'None';
 }
 /**
  * Returns the requested option index from an action
  */
-
 export function getIndexFromAction(action, currentIndex, maxIndex) {
   switch (action) {
     case 'Next':
       return Math.min(maxIndex, currentIndex + 1);
       break;
-
     case 'Previous':
       return Math.max(0, currentIndex - 1);
-
     case 'First':
       return 0;
-
     case 'Last':
       return maxIndex;
-
     case 'PageDown':
       return Math.min(maxIndex, currentIndex + 10);
-
     case 'PageUp':
       return Math.max(0, currentIndex - 10);
-
     default:
       return currentIndex;
   }

package/lib/utils/dropdownKeyActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/dropdownKeyActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAZ,MAAsB,yBAAtB;AA2BA;;AAEG;;AACH,OAAM,SAAU,wBAAV,CACJ,CADI,EAEJ,OAAA,GAAiC,EAF7B,EAE+B;EAEnC,MAAM;IAAE,IAAI,GAAG,IAAT;IAAe,WAAW,GAAG;EAA7B,IAAuC,OAA7C;EACA,MAAM,IAAI,GAAG,CAAC,CAAC,GAAf;EACA,MAAM;IAAE,MAAF;IAAU,OAAV;IAAmB,GAAnB;IAAwB;EAAxB,IAAoC,CAA1C,CAJmC,CAMnC;;EACA,IAAI,GAAG,CAAC,MAAJ,KAAe,CAAf,IAAoB,IAAI,KAAK,IAAI,CAAC,KAAlC,IAA2C,CAAC,MAA5C,IAAsD,CAAC,OAAvD,IAAkE,CAAC,OAAvE,EAAgF;IAC9E,OAAO,MAAP;EACD,CATkC,CAWnC;;;EACA,IAAI,CAAC,IAAL,EAAW;IACT,IAAI,IAAI,KAAK,IAAI,CAAC,SAAd,IAA2B,IAAI,KAAK,IAAI,CAAC,OAAzC,IAAoD,IAAI,KAAK,IAAI,CAAC,KAAlE,IAA2E,IAAI,KAAK,IAAI,CAAC,KAA7F,EAAoG;MAClG,OAAO,MAAP;IACD,CAHQ,CAKT;;;IACA,OAAO,MAAP;EACD,CAnBkC,CAqBnC;;;EACA,IAAK,IAAI,KAAK,IAAI,CAAC,OAAd,IAAyB,MAA1B,IAAqC,IAAI,KAAK,IAAI,CAAC,KAAnD,IAA6D,CAAC,WAAD,IAAgB,IAAI,KAAK,IAAI,CAAC,KAA/F,EAAuG;IACrG,OAAO,aAAP;EACD;;EACD,IAAI,WAAW,IAAI,IAAI,KAAK,IAAI,CAAC,KAAjC,EAAwC;IACtC,OAAO,QAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,MAAlB,EAA0B;IACxB,OAAO,OAAP;EACD,CA9BkC,CAgCnC;;;EACA,IAAI,IAAI,KAAK,IAAI,CAAC,SAAlB,EAA6B;IAC3B,OAAO,MAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,OAAlB,EAA2B;IACzB,OAAO,UAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,IAAlB,EAAwB;IACtB,OAAO,OAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,GAAlB,EAAuB;IACrB,OAAO,MAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,MAAlB,EAA0B;IACxB,OAAO,QAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,QAAlB,EAA4B;IAC1B,OAAO,UAAP;EACD;;EACD,IAAI,IAAI,KAAK,IAAI,CAAC,GAAlB,EAAuB;IACrB,OAAO,KAAP;EACD,CArDkC,CAuDnC;;;EACA,OAAO,MAAP;AACD;AAED;;AAEG;;AACH,OAAM,SAAU,kBAAV,CAA6B,MAA7B,EAAsD,YAAtD,EAA4E,QAA5E,EAA4F;EAChG,QAAQ,MAAR;IACE,KAAK,MAAL;MACE,OAAO,IAAI,CAAC,GAAL,CAAS,QAAT,EAAmB,YAAY,GAAG,CAAlC,CAAP;MACA;;IACF,KAAK,UAAL;MACE,OAAO,IAAI,CAAC,GAAL,CAAS,CAAT,EAAY,YAAY,GAAG,CAA3B,CAAP;;IACF,KAAK,OAAL;MACE,OAAO,CAAP;;IACF,KAAK,MAAL;MACE,OAAO,QAAP;;IACF,KAAK,UAAL;MACE,OAAO,IAAI,CAAC,GAAL,CAAS,QAAT,EAAmB,YAAY,GAAG,EAAlC,CAAP;;IACF,KAAK,QAAL;MACE,OAAO,IAAI,CAAC,GAAL,CAAS,CAAT,EAAY,YAAY,GAAG,EAA3B,CAAP;;IACF;MACE,OAAO,YAAP;EAfJ;AAiBD","sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n\n/**\n * Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n  switch (action) {\n    case 'Next':\n      return Math.min(maxIndex, currentIndex + 1);\n      break;\n    case 'Previous':\n      return Math.max(0, currentIndex - 1);\n    case 'First':\n      return 0;\n    case 'Last':\n      return maxIndex;\n    case 'PageDown':\n      return Math.min(maxIndex, currentIndex + 10);\n    case 'PageUp':\n      return Math.max(0, currentIndex - 10);\n    default:\n      return currentIndex;\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,IAAI,MAAM,yBAAyB;AA2B/C;;;AAGA,OAAM,SAAUC,wBAAwB,CACtCC,CAAsC,EACtCC,UAAiC,EAAE;EAEnC,MAAM;IAAEC,IAAI,GAAG,IAAI;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGF,OAAO;EACpD,MAAMG,IAAI,GAAGJ,CAAC,CAACK,GAAG;EAClB,MAAM;IAAEC,MAAM;IAAEC,OAAO;IAAEF,GAAG;IAAEG;EAAO,CAAE,GAAGR,CAAC;EAE3C;EACA,IAAIK,GAAG,CAACI,MAAM,KAAK,CAAC,IAAIL,IAAI,KAAKN,IAAI,CAACY,KAAK,IAAI,CAACJ,MAAM,IAAI,CAACC,OAAO,IAAI,CAACC,OAAO,EAAE;IAC9E,OAAO,MAAM;;EAGf;EACA,IAAI,CAACN,IAAI,EAAE;IACT,IAAIE,IAAI,KAAKN,IAAI,CAACa,SAAS,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIR,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAIT,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;MAClG,OAAO,MAAM;;IAGf;IACA,OAAO,MAAM;;EAGf;EACA,IAAKN,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIN,MAAM,IAAKF,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAK,CAACV,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAM,EAAE;IACrG,OAAO,aAAa;;EAEtB,IAAIP,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;IACtC,OAAO,QAAQ;;EAEjB,IAAIN,IAAI,KAAKN,IAAI,CAACgB,MAAM,EAAE;IACxB,OAAO,OAAO;;EAGhB;EACA,IAAIV,IAAI,KAAKN,IAAI,CAACa,SAAS,EAAE;IAC3B,OAAO,MAAM;;EAEf,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,EAAE;IACzB,OAAO,UAAU;;EAEnB,IAAIR,IAAI,KAAKN,IAAI,CAACiB,IAAI,EAAE;IACtB,OAAO,OAAO;;EAEhB,IAAIX,IAAI,KAAKN,IAAI,CAACkB,GAAG,EAAE;IACrB,OAAO,MAAM;;EAEf,IAAIZ,IAAI,KAAKN,IAAI,CAACmB,MAAM,EAAE;IACxB,OAAO,QAAQ;;EAEjB,IAAIb,IAAI,KAAKN,IAAI,CAACoB,QAAQ,EAAE;IAC1B,OAAO,UAAU;;EAEnB,IAAId,IAAI,KAAKN,IAAI,CAACqB,GAAG,EAAE;IACrB,OAAO,KAAK;;EAGd;EACA,OAAO,MAAM;AACf;AAEA;;;AAGA,OAAM,SAAUC,kBAAkB,CAACC,MAAuB,EAAEC,YAAoB,EAAEC,QAAgB;EAChG,QAAQF,MAAM;IACZ,KAAK,MAAM;MACT,OAAOG,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,CAAC,CAAC;MAC3C;IACF,KAAK,UAAU;MACb,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,CAAC,CAAC;IACtC,KAAK,OAAO;MACV,OAAO,CAAC;IACV,KAAK,MAAM;MACT,OAAOC,QAAQ;IACjB,KAAK,UAAU;MACb,OAAOC,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,EAAE,CAAC;IAC9C,KAAK,QAAQ;MACX,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,EAAE,CAAC;IACvC;MACE,OAAOA,YAAY;EAAC;AAE1B","names":["keys","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab","getIndexFromAction","action","currentIndex","maxIndex","Math","min","max"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n  | 'Close'\n  | 'CloseSelect'\n  | 'First'\n  | 'Last'\n  | 'Next'\n  | 'None'\n  | 'Open'\n  | 'PageDown'\n  | 'PageUp'\n  | 'Previous'\n  | 'Select'\n  | 'Tab'\n  | 'Type';\n\nexport interface DropdownActionOptions {\n  open?: boolean;\n  multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n  e: KeyboardEvent | React.KeyboardEvent,\n  options: DropdownActionOptions = {},\n): DropdownActions {\n  const { open = true, multiselect = false } = options;\n  const code = e.key;\n  const { altKey, ctrlKey, key, metaKey } = e;\n\n  // typing action occurs whether open or closed\n  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n    return 'Type';\n  }\n\n  // handle opening the dropdown if closed\n  if (!open) {\n    if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n      return 'Open';\n    }\n\n    // if the dropdown is closed and an action did not match the above, do nothing\n    return 'None';\n  }\n\n  // select or close actions\n  if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n    return 'CloseSelect';\n  }\n  if (multiselect && code === keys.Space) {\n    return 'Select';\n  }\n  if (code === keys.Escape) {\n    return 'Close';\n  }\n\n  // navigation interactions\n  if (code === keys.ArrowDown) {\n    return 'Next';\n  }\n  if (code === keys.ArrowUp) {\n    return 'Previous';\n  }\n  if (code === keys.Home) {\n    return 'First';\n  }\n  if (code === keys.End) {\n    return 'Last';\n  }\n  if (code === keys.PageUp) {\n    return 'PageUp';\n  }\n  if (code === keys.PageDown) {\n    return 'PageDown';\n  }\n  if (code === keys.Tab) {\n    return 'Tab';\n  }\n\n  // if nothing matched, return none\n  return 'None';\n}\n\n/**\n * Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n  switch (action) {\n    case 'Next':\n      return Math.min(maxIndex, currentIndex + 1);\n      break;\n    case 'Previous':\n      return Math.max(0, currentIndex - 1);\n    case 'First':\n      return 0;\n    case 'Last':\n      return maxIndex;\n    case 'PageDown':\n      return Math.min(maxIndex, currentIndex + 10);\n    case 'PageUp':\n      return Math.max(0, currentIndex - 10);\n    default:\n      return currentIndex;\n  }\n}\n"]}

package/lib/utils/internalTokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/internalTokens.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,SAAS,GAAG;EACvB,KAAK,EAAE,MADgB;EAEvB,MAAM,EAAE,MAFe;EAGvB,KAAK,EAAE;AAHgB,CAAlB","sourcesContent":["export const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR","names":["iconSizes","small","medium","large"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n"]}

package/lib/utils/useComboboxBaseState.js

@@ -5,10 +5,11 @@ import { useSelection } from '../utils/useSelection';
 /**
  * State shared between Combobox and Dropdown components
  */
-
 export const useComboboxBaseState = props => {
   const {
     appearance = 'outline',
+    children,
+    editable = false,
     inlinePopup = false,
     multiselect,
     onOpenChange,
@@ -17,20 +18,20 @@ export const useComboboxBaseState = props => {
   const optionCollection = useOptionCollection();
   const {
     getOptionAtIndex,
-    getOptionsMatchingValue
+    getOptionsMatchingText
   } = optionCollection;
-  const [activeOption, setActiveOption] = React.useState(); // track whether keyboard focus outline should be shown
+  const [activeOption, setActiveOption] = React.useState();
+  // track whether keyboard focus outline should be shown
   // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
-
-  const [focusVisible, setFocusVisible] = React.useState(false); // track focused state to conditionally render collapsed listbox
-
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  // track focused state to conditionally render collapsed listbox
   const [hasFocus, setHasFocus] = React.useState(false);
   const ignoreNextBlur = React.useRef(false);
   const selectionState = useSelection(props);
   const {
     selectedOptions
-  } = selectionState; // calculate value based on props, internal value changes, and selected options
-
+  } = selectionState;
+  // calculate value based on props, internal value changes, and selected options
   const isFirstMount = useFirstMount();
   const [controllableValue, setValue] = useControllableState({
     state: props.value,
@@ -40,52 +41,50 @@ export const useComboboxBaseState = props => {
     // don't compute the value if it is defined through props or setValue,
     if (controllableValue !== undefined) {
       return controllableValue;
-    } // handle defaultValue here, so it is overridden by selection
-
-
+    }
+    // handle defaultValue here, so it is overridden by selection
     if (isFirstMount && props.defaultValue !== undefined) {
       return props.defaultValue;
     }
-
     if (multiselect) {
-      return selectedOptions.join(', ');
+      // editable inputs should not display multiple selected options in the input as text
+      return editable ? '' : selectedOptions.join(', ');
     }
-
     return selectedOptions[0];
-  }, [controllableValue, isFirstMount, multiselect, props.defaultValue, selectedOptions]); // Handle open state, which is shared with options in context
-
+  }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);
+  // Handle open state, which is shared with options in context
   const [open, setOpenState] = useControllableState({
     state: props.open,
     defaultState: props.defaultOpen,
     initialState: false
   });
-
-  const setOpen = (event, newState) => {
+  const setOpen = React.useCallback((event, newState) => {
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
       open: newState
     });
     setOpenState(newState);
-  }; // update active option based on change in open state
-
-
+  }, [onOpenChange, setOpenState]);
+  // update active option based on change in open state or children
   React.useEffect(() => {
     if (open && !activeOption) {
-      // if there is a selection, start at the most recently selected item
-      if (selectedOptions.length > 0) {
-        const lastSelectedOption = getOptionsMatchingValue(v => v === selectedOptions[selectedOptions.length - 1]).pop();
-        lastSelectedOption && setActiveOption(lastSelectedOption);
-      } // default to starting at the first option
+      // if it is single-select and there is a selected option, start at the selected option
+      if (!multiselect && selectedOptions.length > 0) {
+        const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();
+        selectedOption && setActiveOption(selectedOption);
+      }
+      // default to starting at the first option
       else {
         setActiveOption(getOptionAtIndex(0));
       }
     } else if (!open) {
       // reset the active option when closing
       setActiveOption(undefined);
-    } // this should only be run in response to changes in the open state
+    }
+    // this should only be run in response to changes in the open state or children
     // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [open]);
-  return { ...optionCollection,
+  }, [open, children]);
+  return {
+    ...optionCollection,
     ...selectionState,
     activeOption,
     appearance,

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useComboboxBaseState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (props: ComboboxBaseProps) => {\n  const { appearance = 'outline', inlinePopup = false, multiselect, onOpenChange, size = 'medium' } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    if (multiselect) {\n      return selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [controllableValue, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = (event: ComboboxBaseOpenEvents, newState: boolean) => {\n    onOpenChange?.(event, { open: newState });\n    setOpenState(newState);\n  };\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if there is a selection, start at the most recently selected item\n      if (selectedOptions.length > 0) {\n        const lastSelectedOption = getOptionsMatchingValue(\n          v => v === selectedOptions[selectedOptions.length - 1],\n        ).pop();\n        lastSelectedOption && setActiveOption(lastSelectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingText","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/**\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n  const {\n    appearance = 'outline',\n    children,\n    editable = false,\n    inlinePopup = false,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionAtIndex, getOptionsMatchingText } = optionCollection;\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  const selectionState = useSelection(props);\n  const { selectedOptions } = selectionState;\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptions.join(', ');\n    }\n\n    return selectedOptions[0];\n  }, [controllableValue, editable, isFirstMount, multiselect, props.defaultValue, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      onOpenChange?.(event, { open: newState });\n      setOpenState(newState);\n    },\n    [onOpenChange, setOpenState],\n  );\n\n  // update active option based on change in open state or children\n  React.useEffect(() => {\n    if (open && !activeOption) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingText(v => v === selectedOptions[0]).pop();\n        selectedOption && setActiveOption(selectedOption);\n      }\n      // default to starting at the first option\n      else {\n        setActiveOption(getOptionAtIndex(0));\n      }\n    } else if (!open) {\n      // reset the active option when closing\n      setActiveOption(undefined);\n    }\n    // this should only be run in response to changes in the open state or children\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, children]);\n\n  return {\n    ...optionCollection,\n    ...selectionState,\n    activeOption,\n    appearance,\n    focusVisible,\n    hasFocus,\n    ignoreNextBlur,\n    inlinePopup,\n    open,\n    setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n  };\n};\n"]}

package/lib/utils/useComboboxPopup.js

@@ -3,8 +3,8 @@ import { useMergedRefs } from '@fluentui/react-utilities';
 export function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
   const {
     positioning
-  } = props; // popper options
-
+  } = props;
+  // popper options
   const popperOptions = {
     position: 'below',
     align: 'start',
@@ -19,10 +19,12 @@ export function useComboboxPopup(props, triggerShorthand, listboxShorthand) {
     containerRef
   } = usePositioning(popperOptions);
   const listboxRef = useMergedRefs(listboxShorthand === null || listboxShorthand === void 0 ? void 0 : listboxShorthand.ref, containerRef);
-  const listbox = listboxShorthand && { ...listboxShorthand,
+  const listbox = listboxShorthand && {
+    ...listboxShorthand,
     ref: listboxRef
   };
-  return [{ ...triggerShorthand,
+  return [{
+    ...triggerShorthand,
     ref: useMergedRefs(triggerShorthand === null || triggerShorthand === void 0 ? void 0 : triggerShorthand.ref, targetRef)
   }, listbox];
 }

package/lib/utils/useComboboxPopup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useComboboxPopup.ts"],"names":[],"mappings":"AAAA,SAAS,2BAAT,EAAsC,cAAtC,QAA4D,6BAA5D;AACA,SAAiC,aAAjC,QAAsD,2BAAtD;AAeA,OAAM,SAAU,gBAAV,CACJ,KADI,EAEJ,gBAFI,EAGJ,gBAHI,EAGqD;EAKzD,MAAM;IAAE;EAAF,IAAkB,KAAxB,CALyD,CAOzD;;EACA,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,OADU;IAEpB,KAAK,EAAE,OAFa;IAGpB,MAAM,EAAE;MAAE,SAAS,EAAE,CAAb;MAAgB,QAAQ,EAAE;IAA1B,CAHY;IAIpB,GAAG,2BAA2B,CAAC,WAAD;EAJV,CAAtB;EAOA,MAAM;IAAE,SAAF;IAAa;EAAb,IAA8B,cAAc,CAAC,aAAD,CAAlD;EAEA,MAAM,UAAU,GAAG,aAAa,CAAC,gBAAgB,KAAA,IAAhB,IAAA,gBAAgB,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAA,gBAAgB,CAAE,GAAnB,EAAwB,YAAxB,CAAhC;EACA,MAAM,OAAO,GAAG,gBAAgB,IAAI,EAAE,GAAG,gBAAL;IAAuB,GAAG,EAAE;EAA5B,CAApC;EAEA,OAAO,CAAC,EAAE,GAAG,gBAAL;IAAuB,GAAG,EAAE,aAAa,CAAC,gBAAgB,KAAA,IAAhB,IAAA,gBAAgB,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAA,gBAAgB,CAAE,GAAnB,EAAwB,SAAxB;EAAzC,CAAD,EAAgF,OAAhF,CAAP;AACD","sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,6BAA6B;AACzF,SAAiCC,aAAa,QAAQ,2BAA2B;AAejF,OAAM,SAAUC,gBAAgB,CAC9BC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD;EAKzD,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAK;EAE7B;EACA,MAAMI,aAAa,GAAG;IACpBC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,OAAgB;IACvBC,MAAM,EAAE;MAAEC,SAAS,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAC,CAAE;IACrC,GAAGb,2BAA2B,CAACO,WAAW;GAC3C;EAED,MAAM;IAAEO,SAAS;IAAEC;EAAY,CAAE,GAAGd,cAAc,CAACO,aAAa,CAAC;EAEjE,MAAMQ,UAAU,GAAGd,aAAa,CAACI,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEW,GAAG,EAAEF,YAAY,CAAC;EACrE,MAAMG,OAAO,GAAGZ,gBAAgB,IAAI;IAAE,GAAGA,gBAAgB;IAAEW,GAAG,EAAED;EAAU,CAAE;EAE5E,OAAO,CAAC;IAAE,GAAGX,gBAAgB;IAAEY,GAAG,EAAEf,aAAa,CAACG,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEY,GAAG,EAAEH,SAAS;EAAC,CAAE,EAAEI,OAAO,CAAC;AACjG","names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useComboboxPopup.ts"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n  props: ComboboxBaseProps,\n  triggerShorthand?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n  trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n  listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n  const { positioning } = props;\n\n  // popper options\n  const popperOptions = {\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    ...resolvePositioningShorthand(positioning),\n  };\n\n  const { targetRef, containerRef } = usePositioning(popperOptions);\n\n  const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n  const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n  return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"]}

package/lib/utils/useOptionCollection.js

@@ -2,73 +2,63 @@ import * as React from 'react';
 /**
  * A hook for managing a collection of child Options
  */
-
 export const useOptionCollection = () => {
   const nodes = React.useRef([]);
   const collectionAPI = React.useMemo(() => {
     const getCount = () => nodes.current.length;
-
     const getOptionAtIndex = index => {
       var _a;
-
       return (_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option;
     };
-
     const getIndexOfId = id => nodes.current.findIndex(node => node.option.id === id);
-
     const getOptionById = id => {
       const item = nodes.current.find(node => node.option.id === id);
       return item === null || item === void 0 ? void 0 : item.option;
     };
-
-    const getOptionsMatchingValue = matcher => {
-      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);
+    const getOptionsMatchingText = matcher => {
+      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);
     };
-
     return {
       getCount,
       getOptionAtIndex,
       getIndexOfId,
       getOptionById,
-      getOptionsMatchingValue
+      getOptionsMatchingText
     };
   }, []);
   const registerOption = React.useCallback((option, element) => {
     var _a;
-
     const index = nodes.current.findIndex(node => {
       if (!node.element || !element) {
         return false;
       }
-
       if (node.option.id === option.id) {
         return true;
-      } // use the DOM method compareDocumentPosition to order the current node against registered nodes
+      }
+      // use the DOM method compareDocumentPosition to order the current node against registered nodes
       // eslint-disable-next-line no-bitwise
-
-
       return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
-    }); // do not register the option if it already exists
-
+    });
+    // do not register the option if it already exists
     if (((_a = nodes.current[index]) === null || _a === void 0 ? void 0 : _a.option.id) !== option.id) {
       const newItem = {
         element,
         option
-      }; // If an index is not found we will push the element to the end.
-
+      };
+      // If an index is not found we will push the element to the end.
       if (index === -1) {
         nodes.current = [...nodes.current, newItem];
       } else {
         nodes.current.splice(index, 0, newItem);
       }
-    } // return the unregister function
-
-
+    }
+    // return the unregister function
     return () => {
       nodes.current = nodes.current.filter(node => node.option.id !== option.id);
     };
   }, []);
-  return { ...collectionAPI,
+  return {
+    ...collectionAPI,
     options: nodes.current.map(node => node.option),
     registerOption
   };

package/lib/utils/useOptionCollection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useOptionCollection.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingValue,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B;;;AAGA,OAAO,MAAMC,mBAAmB,GAAG,MAA4B;EAC7D,MAAMC,KAAK,GAAGF,KAAK,CAACG,MAAM,CAAkD,EAAE,CAAC;EAE/E,MAAMC,aAAa,GAAGJ,KAAK,CAACK,OAAO,CAAC,MAAK;IACvC,MAAMC,QAAQ,GAAG,MAAMJ,KAAK,CAACK,OAAO,CAACC,MAAM;IAC3C,MAAMC,gBAAgB,GAAIC,KAAa,IAAI;MAAA;MAAC,kBAAK,CAACH,OAAO,CAACG,KAAK,CAAC,0CAAEC,MAAM;IAAA;IACxE,MAAMC,YAAY,GAAIC,EAAU,IAAKX,KAAK,CAACK,OAAO,CAACO,SAAS,CAACC,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKA,EAAE,CAAC;IAC3F,MAAMG,aAAa,GAAIH,EAAU,IAAI;MACnC,MAAMI,IAAI,GAAGf,KAAK,CAACK,OAAO,CAACW,IAAI,CAACH,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKA,EAAE,CAAC;MAC9D,OAAOI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEN,MAAM;IACrB,CAAC;IACD,MAAMQ,sBAAsB,GAAIC,OAAmC,IAAI;MACrE,OAAOlB,KAAK,CAACK,OAAO,CAACc,MAAM,CAACN,IAAI,IAAIK,OAAO,CAACL,IAAI,CAACJ,MAAM,CAACW,IAAI,CAAC,CAAC,CAACC,GAAG,CAACR,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAAC;IACzF,CAAC;IAED,OAAO;MACLL,QAAQ;MACRG,gBAAgB;MAChBG,YAAY;MACZI,aAAa;MACbG;KACD;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,cAAc,GAAGxB,KAAK,CAACyB,WAAW,CAAC,CAACd,MAAmB,EAAEe,OAAoB,KAAI;;IACrF,MAAMhB,KAAK,GAAGR,KAAK,CAACK,OAAO,CAACO,SAAS,CAACC,IAAI,IAAG;MAC3C,IAAI,CAACA,IAAI,CAACW,OAAO,IAAI,CAACA,OAAO,EAAE;QAC7B,OAAO,KAAK;;MAGd,IAAIX,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKF,MAAM,CAACE,EAAE,EAAE;QAChC,OAAO,IAAI;;MAGb;MACA;MACA,OAAOE,IAAI,CAACW,OAAO,CAACC,uBAAuB,CAACD,OAAO,CAAC,GAAGE,IAAI,CAACC,2BAA2B;IACzF,CAAC,CAAC;IAEF;IACA,IAAI,YAAK,CAACtB,OAAO,CAACG,KAAK,CAAC,0CAAEC,MAAM,CAACE,EAAE,MAAKF,MAAM,CAACE,EAAE,EAAE;MACjD,MAAMiB,OAAO,GAAG;QACdJ,OAAO;QACPf;OACD;MAED;MACA,IAAID,KAAK,KAAK,CAAC,CAAC,EAAE;QAChBR,KAAK,CAACK,OAAO,GAAG,CAAC,GAAGL,KAAK,CAACK,OAAO,EAAEuB,OAAO,CAAC;OAC5C,MAAM;QACL5B,KAAK,CAACK,OAAO,CAACwB,MAAM,CAACrB,KAAK,EAAE,CAAC,EAAEoB,OAAO,CAAC;;;IAI3C;IACA,OAAO,MAAK;MACV5B,KAAK,CAACK,OAAO,GAAGL,KAAK,CAACK,OAAO,CAACc,MAAM,CAACN,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAACE,EAAE,KAAKF,MAAM,CAACE,EAAE,CAAC;IAC5E,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACL,GAAGT,aAAa;IAChB4B,OAAO,EAAE9B,KAAK,CAACK,OAAO,CAACgB,GAAG,CAACR,IAAI,IAAIA,IAAI,CAACJ,MAAM,CAAC;IAC/Ca;GACD;AACH,CAAC","names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n  const nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n  const collectionAPI = React.useMemo(() => {\n    const getCount = () => nodes.current.length;\n    const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n    const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n    const getOptionById = (id: string) => {\n      const item = nodes.current.find(node => node.option.id === id);\n      return item?.option;\n    };\n    const getOptionsMatchingText = (matcher: (value: string) => boolean) => {\n      return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n    };\n\n    return {\n      getCount,\n      getOptionAtIndex,\n      getIndexOfId,\n      getOptionById,\n      getOptionsMatchingText,\n    };\n  }, []);\n\n  const registerOption = React.useCallback((option: OptionValue, element: HTMLElement) => {\n    const index = nodes.current.findIndex(node => {\n      if (!node.element || !element) {\n        return false;\n      }\n\n      if (node.option.id === option.id) {\n        return true;\n      }\n\n      // use the DOM method compareDocumentPosition to order the current node against registered nodes\n      // eslint-disable-next-line no-bitwise\n      return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n    });\n\n    // do not register the option if it already exists\n    if (nodes.current[index]?.option.id !== option.id) {\n      const newItem = {\n        element,\n        option,\n      };\n\n      // If an index is not found we will push the element to the end.\n      if (index === -1) {\n        nodes.current = [...nodes.current, newItem];\n      } else {\n        nodes.current.splice(index, 0, newItem);\n      }\n    }\n\n    // return the unregister function\n    return () => {\n      nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n    };\n  }, []);\n\n  return {\n    ...collectionAPI,\n    options: nodes.current.map(node => node.option),\n    registerOption,\n  };\n};\n"]}

package/lib/utils/useScrollOptionsIntoView.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { canUseDOM } from '@fluentui/react-utilities';
+export function useScrollOptionsIntoView(state) {
+  const {
+    activeOption
+  } = state;
+  const scrollContainerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (scrollContainerRef.current && activeOption && canUseDOM()) {
+      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`);
+      if (!activeOptionElement) {
+        return;
+      }
+      const {
+        offsetHeight,
+        offsetTop
+      } = activeOptionElement;
+      const {
+        offsetHeight: parentOffsetHeight,
+        scrollTop
+      } = scrollContainerRef.current;
+      const isAbove = offsetTop < scrollTop;
+      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+      // add a small buffer for general visual nicety
+      // it looks slightly better if the option has some space from the top/bottom while arrowing
+      const buffer = 2;
+      if (isAbove) {
+        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);
+      } else if (isBelow) {
+        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+      }
+    }
+  }, [activeOption]);
+  return scrollContainerRef;
+}
+//# sourceMappingURL=useScrollOptionsIntoView.js.map

package/lib/utils/useScrollOptionsIntoView.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,2BAA2B;AAGrD,OAAM,SAAUC,wBAAwB,CAACC,KAAmB;EAC1D,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAK;EAC9B,MAAME,kBAAkB,GAAGL,KAAK,CAACM,MAAM,CAAiB,IAAI,CAAC;EAE7DN,KAAK,CAACO,SAAS,CAAC,MAAK;IACnB,IAAIF,kBAAkB,CAACG,OAAO,IAAIJ,YAAY,IAAIH,SAAS,EAAE,EAAE;MAC7D,MAAMQ,mBAAmB,GAAGJ,kBAAkB,CAACG,OAAO,CAACE,aAAa,CAAC,IAAIN,YAAY,CAACO,EAAE,EAAE,CAAgB;MAE1G,IAAI,CAACF,mBAAmB,EAAE;QACxB;;MAGF,MAAM;QAAEG,YAAY;QAAEC;MAAS,CAAE,GAAGJ,mBAAmB;MACvD,MAAM;QAAEG,YAAY,EAAEE,kBAAkB;QAAEC;MAAS,CAAE,GAAGV,kBAAkB,CAACG,OAAO;MAElF,MAAMQ,OAAO,GAAGH,SAAS,GAAGE,SAAS;MACrC,MAAME,OAAO,GAAGJ,SAAS,GAAGD,YAAY,GAAGG,SAAS,GAAGD,kBAAkB;MAEzE;MACA;MACA,MAAMI,MAAM,GAAG,CAAC;MAEhB,IAAIF,OAAO,EAAE;QACXX,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGK,MAAM,CAAC;OAC3D,MAAM,IAAID,OAAO,EAAE;QAClBZ,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGC,kBAAkB,GAAGF,YAAY,GAAGM,MAAM,CAAC;;;EAGpG,CAAC,EAAE,CAACd,YAAY,CAAC,CAAC;EAElB,OAAOC,kBAAkB;AAC3B","names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n  const { activeOption } = state;\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (scrollContainerRef.current && activeOption && canUseDOM()) {\n      const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n      if (!activeOptionElement) {\n        return;\n      }\n\n      const { offsetHeight, offsetTop } = activeOptionElement;\n      const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n      const isAbove = offsetTop < scrollTop;\n      const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n      // add a small buffer for general visual nicety\n      // it looks slightly better if the option has some space from the top/bottom while arrowing\n      const buffer = 2;\n\n      if (isAbove) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n      } else if (isBelow) {\n        scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n      }\n    }\n  }, [activeOption]);\n\n  return scrollContainerRef;\n}\n"]}