@fluentui/react-combobox 9.16.17 → 9.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +21 -2
  2. package/dist/index.d.ts +52 -4
  3. package/lib/Combobox.js +1 -1
  4. package/lib/Combobox.js.map +1 -1
  5. package/lib/Dropdown.js +1 -1
  6. package/lib/Dropdown.js.map +1 -1
  7. package/lib/Option.js +1 -1
  8. package/lib/Option.js.map +1 -1
  9. package/lib/components/Combobox/Combobox.types.js.map +1 -1
  10. package/lib/components/Combobox/index.js +1 -1
  11. package/lib/components/Combobox/index.js.map +1 -1
  12. package/lib/components/Combobox/renderCombobox.js.map +1 -1
  13. package/lib/components/Combobox/useCombobox.js +39 -17
  14. package/lib/components/Combobox/useCombobox.js.map +1 -1
  15. package/lib/components/Combobox/useInputTriggerSlot.js +2 -1
  16. package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
  17. package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
  18. package/lib/components/Dropdown/index.js +1 -1
  19. package/lib/components/Dropdown/index.js.map +1 -1
  20. package/lib/components/Dropdown/useButtonTriggerSlot.js +2 -1
  21. package/lib/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
  22. package/lib/components/Dropdown/useDropdown.js +37 -16
  23. package/lib/components/Dropdown/useDropdown.js.map +1 -1
  24. package/lib/components/Option/index.js +1 -1
  25. package/lib/components/Option/index.js.map +1 -1
  26. package/lib/components/Option/useOption.js +21 -7
  27. package/lib/components/Option/useOption.js.map +1 -1
  28. package/lib/index.js +3 -3
  29. package/lib/index.js.map +1 -1
  30. package/lib/utils/useComboboxBaseState.js +2 -1
  31. package/lib/utils/useComboboxBaseState.js.map +1 -1
  32. package/lib-commonjs/Combobox.js +3 -0
  33. package/lib-commonjs/Combobox.js.map +1 -1
  34. package/lib-commonjs/Dropdown.js +3 -0
  35. package/lib-commonjs/Dropdown.js.map +1 -1
  36. package/lib-commonjs/Option.js +3 -0
  37. package/lib-commonjs/Option.js.map +1 -1
  38. package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
  39. package/lib-commonjs/components/Combobox/index.js +3 -0
  40. package/lib-commonjs/components/Combobox/index.js.map +1 -1
  41. package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
  42. package/lib-commonjs/components/Combobox/useCombobox.js +39 -14
  43. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  44. package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -1
  45. package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
  46. package/lib-commonjs/components/Dropdown/index.js +3 -0
  47. package/lib-commonjs/components/Dropdown/index.js.map +1 -1
  48. package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
  49. package/lib-commonjs/components/Dropdown/useDropdown.js +37 -13
  50. package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
  51. package/lib-commonjs/components/Option/index.js +3 -0
  52. package/lib-commonjs/components/Option/index.js.map +1 -1
  53. package/lib-commonjs/components/Option/useOption.js +27 -10
  54. package/lib-commonjs/components/Option/useOption.js.map +1 -1
  55. package/lib-commonjs/index.js +9 -0
  56. package/lib-commonjs/index.js.map +1 -1
  57. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  58. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const selected = useListboxContext_unstable(ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n });\n const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n activeDescendantController.focus(id);\n\n // handle selection change\n selectOption(event, optionData);\n\n onOptionClick(event);\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n 'aria-disabled': disabled ? ('true' as const) : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n elementType: 'span',\n }),\n disabled,\n multiselect,\n selected,\n // no longer used\n focusVisible: false,\n active: false,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n 'use no memo';\n\n const state = useOptionBase_unstable(props, ref);\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (state.multiselect) {\n CheckIcon = state.selected ? <Checkmark12Filled /> : '';\n }\n\n if (state.checkIcon) {\n state.checkIcon.children ??= CheckIcon;\n }\n\n return state;\n};\n\n/**\n * Create the base state required to render Option.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOptionBase_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const selected = useListboxContext_unstable(ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n });\n const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n activeDescendantController.focus(id);\n\n // handle selection change\n selectOption(event, optionData);\n\n onOptionClick(event);\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n 'aria-disabled': disabled ? ('true' as const) : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n },\n elementType: 'span',\n }),\n disabled,\n multiselect,\n selected,\n // no longer used\n focusVisible: false,\n active: false,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","state","useOptionBase_unstable","CheckIcon","multiselect","selected","checkIcon","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","ctx","registerOption","selectedOptions","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
@@ -67,6 +67,9 @@ _export(exports, {
67
67
  useComboboxBaseState: function() {
68
68
  return _useComboboxBaseState.useComboboxBaseState;
69
69
  },
70
+ useComboboxBase_unstable: function() {
71
+ return _Combobox.useComboboxBase_unstable;
72
+ },
70
73
  useComboboxContextValues: function() {
71
74
  return _useComboboxContextValues.useComboboxContextValues;
72
75
  },
@@ -79,6 +82,9 @@ _export(exports, {
79
82
  useCombobox_unstable: function() {
80
83
  return _Combobox.useCombobox_unstable;
81
84
  },
85
+ useDropdownBase_unstable: function() {
86
+ return _Dropdown.useDropdownBase_unstable;
87
+ },
82
88
  useDropdownStyles_unstable: function() {
83
89
  return _Dropdown.useDropdownStyles_unstable;
84
90
  },
@@ -103,6 +109,9 @@ _export(exports, {
103
109
  useListbox_unstable: function() {
104
110
  return _Listbox.useListbox_unstable;
105
111
  },
112
+ useOptionBase_unstable: function() {
113
+ return _Option.useOptionBase_unstable;
114
+ },
106
115
  useOptionGroupStyles_unstable: function() {
107
116
  return _OptionGroup.useOptionGroupStyles_unstable;
108
117
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } 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';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","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","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eAwB1De,kBAAQ;;;eAvBDf,iCAAgB;;YAsCf;eAARoB;;;eA/BAf,gBAAO;;;eALAJ,+BAAe;;;eAatBS,cAAM;;;eAsCNe,wBAAW;;IA7BXT,kBAAkB;;;sBAeA;eAAlBK;;;eA/BAf,0BAAiB;;IAQjBK;uCAAgB;;;eAsChBe,kCAAqB;;;eA7BrBT,iCAAuB;;;eAevBK,iCAAuB;;;eA/BvBf,+BAAsB;;8BA8CI;eAA1BoB;;;eAtCAf,6BAAqB;;;eAiDdoB,0CAAoB;;wBADA;eAApBD;;;eA7DA5B,kDAAwB;;;eA0DxB2B,oCAAiB;;;eApCxBZ,oCAA0B;;;eAC1BC,8BAAoB;;;eAcpBI,oCAA0B;;;eAC1BC,8BAAoB;;uBAyBM;eAAnBS;;IA9DA7B;+DAAuB;;;eAHNF,0CAA0B;;;eAkE3CgC,8BAAc;;;eA1DrB1B,kCAAyB;;;eACzBC,4BAAmB;;;eA6CnBmB,0CAA6B;;;eAC7BC,oCAAuB;;IAvCvBhB;+CAAwB;;;eACxBC,0BAAkB;;;iCAnBa,6BAA6B;gCAEF,4BAA4B;0CAE/C,sCAAsC;yCACvC,qCAAqC;yBAOtE,YAAY;wBAQZ,WAAW;0BAQX,aAAa;0BAeb,aAAa;6BAeb,gBAAgB;mCAIW,4BAA4B;sCAGzB,+BAA+B;sCAC/B,6CAA6C;qCAC9C,4CAA4C;gCACjD,yBAAyB"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } 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 useOptionBase_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n BaseComboboxProps,\n BaseComboboxState,\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 useDropdownBase_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownBaseHookProps,\n DropdownBaseHookState,\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';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eAyB1DgB,kBAAQ;;IAxBDhB;gDAAgB;;;eA0CvBsB,kBAAQ;;;eAnCRjB,gBAAO;;;eALAJ,+BAAe;;;eAatBS,cAAM;;;eA6CNkB,wBAAW;;sBAnCO;eAAlBX;;sBAkBkB;eAAlBM;;IAnCAjB,iBAAiB;;;oBAQD;eAAhBK;;;eA6CAkB,kCAAqB;;;eAnCrBX,iCAAuB;;;eAkBvBM,iCAAuB;;0BAnCD;eAAtBjB;;IAqDAuB;sDAA0B;;;eA7C1BlB,6BAAqB;;IAwDduB;yDAAoB;;;eADpBD,0CAAoB;;4BA5CH;eAAxBd;;;eAxBOjB,kDAAwB;;qBAiEP;eAAjB8B;;;eA1CPd,oCAA0B;;;eAE1BE,8BAAoB;;;eAiBpBK,kCAAwB;;;eADxBD,oCAA0B;;IAE1BE;6CAAoB;;uBA2BM;eAAnBS;;;eArEAhC,gDAAuB;;;eAHNF,0CAA0B;;;eAyE3CmC,8BAAc;;;eAjErB7B,kCAAyB;;;eACzBC,4BAAmB;;;eASnBM,8BAAsB;;;eA2CtBgB,0CAA6B;;2BACN;eAAvBC;;;eA9CAnB,gCAAwB;;;eACxBC,0BAAkB;;;iCAnBa,6BAA6B;gCAEF,4BAA4B;0CAE/C,sCAAsC;yCACvC,qCAAqC;yBAOtE,YAAY;wBASZ,WAAW;0BASX,aAAa;0BAkBb,aAAa;6BAiBb,gBAAgB;mCAIW,4BAA4B;sCAGzB,+BAA+B;sCAC/B,6CAA6C;qCAC9C,4CAA4C;gCACjD,yBAAyB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\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 // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\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 { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\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 const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, 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 if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\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 // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\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 { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\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 const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, 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 if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-combobox",
3
- "version": "9.16.17",
3
+ "version": "9.17.0",
4
4
  "description": "Fluent UI React Combobox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -15,7 +15,7 @@
15
15
  "@fluentui/react-aria": "^9.17.10",
16
16
  "@fluentui/keyboard-keys": "^9.0.8",
17
17
  "@fluentui/react-context-selector": "^9.2.15",
18
- "@fluentui/react-field": "^9.4.15",
18
+ "@fluentui/react-field": "^9.5.0",
19
19
  "@fluentui/react-icons": "^2.0.245",
20
20
  "@fluentui/react-jsx-runtime": "^9.4.1",
21
21
  "@fluentui/react-portal": "^9.8.11",