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

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 (103) hide show
  1. package/CHANGELOG.json +54 -1
  2. package/CHANGELOG.md +15 -2
  3. package/lib/Combobox.js.map +1 -1
  4. package/lib/ComboboxField.js.map +1 -1
  5. package/lib/Dropdown.js.map +1 -1
  6. package/lib/Listbox.js.map +1 -1
  7. package/lib/Option.js.map +1 -1
  8. package/lib/OptionGroup.js.map +1 -1
  9. package/lib/components/Combobox/Combobox.js.map +1 -1
  10. package/lib/components/Combobox/Combobox.types.js.map +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.map +1 -1
  14. package/lib/components/Combobox/useComboboxStyles.js.map +1 -1
  15. package/lib/components/ComboboxField/ComboboxField.js.map +1 -1
  16. package/lib/components/ComboboxField/index.js.map +1 -1
  17. package/lib/components/Dropdown/Dropdown.js.map +1 -1
  18. package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
  19. package/lib/components/Dropdown/index.js.map +1 -1
  20. package/lib/components/Dropdown/renderDropdown.js.map +1 -1
  21. package/lib/components/Dropdown/useDropdown.js.map +1 -1
  22. package/lib/components/Dropdown/useDropdownStyles.js.map +1 -1
  23. package/lib/components/Listbox/Listbox.js.map +1 -1
  24. package/lib/components/Listbox/Listbox.types.js.map +1 -1
  25. package/lib/components/Listbox/index.js.map +1 -1
  26. package/lib/components/Listbox/renderListbox.js.map +1 -1
  27. package/lib/components/Listbox/useListbox.js.map +1 -1
  28. package/lib/components/Listbox/useListboxStyles.js.map +1 -1
  29. package/lib/components/Option/Option.js.map +1 -1
  30. package/lib/components/Option/Option.types.js.map +1 -1
  31. package/lib/components/Option/index.js.map +1 -1
  32. package/lib/components/Option/renderOption.js.map +1 -1
  33. package/lib/components/Option/useOption.js.map +1 -1
  34. package/lib/components/Option/useOptionStyles.js.map +1 -1
  35. package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
  36. package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
  37. package/lib/components/OptionGroup/index.js.map +1 -1
  38. package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
  39. package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
  40. package/lib/components/OptionGroup/useOptionGroupStyles.js.map +1 -1
  41. package/lib/contexts/ComboboxContext.js.map +1 -1
  42. package/lib/contexts/ListboxContext.js.map +1 -1
  43. package/lib/contexts/useComboboxContextValues.js.map +1 -1
  44. package/lib/contexts/useListboxContextValues.js.map +1 -1
  45. package/lib/index.js.map +1 -1
  46. package/lib/utils/ComboboxBase.types.js.map +1 -1
  47. package/lib/utils/OptionCollection.types.js.map +1 -1
  48. package/lib/utils/Selection.types.js.map +1 -1
  49. package/lib/utils/dropdownKeyActions.js.map +1 -1
  50. package/lib/utils/internalTokens.js.map +1 -1
  51. package/lib/utils/useComboboxBaseState.js.map +1 -1
  52. package/lib/utils/useComboboxPopup.js.map +1 -1
  53. package/lib/utils/useOptionCollection.js.map +1 -1
  54. package/lib/utils/useScrollOptionsIntoView.js.map +1 -1
  55. package/lib/utils/useSelection.js.map +1 -1
  56. package/lib/utils/useTriggerListboxSlots.js.map +1 -1
  57. package/lib-commonjs/Combobox.js.map +1 -1
  58. package/lib-commonjs/ComboboxField.js.map +1 -1
  59. package/lib-commonjs/Dropdown.js.map +1 -1
  60. package/lib-commonjs/Listbox.js.map +1 -1
  61. package/lib-commonjs/Option.js.map +1 -1
  62. package/lib-commonjs/OptionGroup.js.map +1 -1
  63. package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
  64. package/lib-commonjs/components/Combobox/index.js.map +1 -1
  65. package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
  66. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  67. package/lib-commonjs/components/Combobox/useComboboxStyles.js.map +1 -1
  68. package/lib-commonjs/components/ComboboxField/ComboboxField.js.map +1 -1
  69. package/lib-commonjs/components/ComboboxField/index.js.map +1 -1
  70. package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
  71. package/lib-commonjs/components/Dropdown/index.js.map +1 -1
  72. package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
  73. package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
  74. package/lib-commonjs/components/Dropdown/useDropdownStyles.js.map +1 -1
  75. package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
  76. package/lib-commonjs/components/Listbox/index.js.map +1 -1
  77. package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
  78. package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
  79. package/lib-commonjs/components/Listbox/useListboxStyles.js.map +1 -1
  80. package/lib-commonjs/components/Option/Option.js.map +1 -1
  81. package/lib-commonjs/components/Option/index.js.map +1 -1
  82. package/lib-commonjs/components/Option/renderOption.js.map +1 -1
  83. package/lib-commonjs/components/Option/useOption.js.map +1 -1
  84. package/lib-commonjs/components/Option/useOptionStyles.js.map +1 -1
  85. package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
  86. package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
  87. package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
  88. package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
  89. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.js.map +1 -1
  90. package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
  91. package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
  92. package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
  93. package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
  94. package/lib-commonjs/index.js.map +1 -1
  95. package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
  96. package/lib-commonjs/utils/internalTokens.js.map +1 -1
  97. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  98. package/lib-commonjs/utils/useComboboxPopup.js.map +1 -1
  99. package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
  100. package/lib-commonjs/utils/useScrollOptionsIntoView.js.map +1 -1
  101. package/lib-commonjs/utils/useSelection.js.map +1 -1
  102. package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
  103. package/package.json +8 -9
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Option/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Option/renderOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADF,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.checkIcon {...slotProps.checkIcon} />\n {slotProps.root.children}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADF,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.checkIcon {...slotProps.checkIcon} />\n {slotProps.root.children}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Option/useOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getValueString(value: string | undefined, children: React.ReactNode) {\n if (value) {\n return value;\n }\n\n let valueString = '';\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n valueString += child;\n }\n });\n return valueString;\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 { disabled, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionValue = getValueString(value, props.children);\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>(() => ({ id, disabled, value: optionValue }), [\n id,\n disabled,\n optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\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 return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n role: 'option',\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-selected': `${selected}`,\n id,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getValueString(value: string | undefined, children: React.ReactNode) {\n if (value) {\n return value;\n }\n\n let valueString = '';\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n valueString += child;\n }\n });\n return valueString;\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 { disabled, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionValue = getValueString(value, props.children);\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>(() => ({ id, disabled, value: optionValue }), [\n id,\n disabled,\n optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\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 return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n role: 'option',\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-selected': `${selected}`,\n id,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Option/useOptionStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE;AAFgD,CAAtD;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAkGA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,MAAF;IAAU,QAAV;IAAoB,YAApB;IAAkC,WAAlC;IAA+C;EAA/C,IAA4D,KAAlE;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,IAAI,YAAV,IAA0B,MAAM,CAAC,MAHA,EAIjC,QAAQ,IAAI,MAAM,CAAC,QAJc,EAKjC,QAAQ,IAAI,MAAM,CAAC,QALc,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,gBAAgB,CAAC,SADqB,EAEtC,MAAM,CAAC,SAF+B,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,EAItC,WAAW,IAAI,MAAM,CAAC,gBAJgB,EAKtC,QAAQ,IAAI,MAAM,CAAC,aALmB,EAMtC,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,wBANI,EAOtC,QAAQ,IAAI,MAAM,CAAC,aAPmB,CAAxC;EASD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n multiselectCheck: {\n color: tokens.colorNeutralForeground3,\n fontSize: tokens.fontSizeBase500,\n visibility: 'visible',\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n color: tokens.colorBrandBackground,\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n active && focusVisible && styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n state.checkIcon.className,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE;AAFgD,CAAtD;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAkGA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,MAAF;IAAU,QAAV;IAAoB,YAApB;IAAkC,WAAlC;IAA+C;EAA/C,IAA4D,KAAlE;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,IAAI,YAAV,IAA0B,MAAM,CAAC,MAHA,EAIjC,QAAQ,IAAI,MAAM,CAAC,QAJc,EAKjC,QAAQ,IAAI,MAAM,CAAC,QALc,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;EASA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,gBAAgB,CAAC,SADqB,EAEtC,MAAM,CAAC,SAF+B,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,EAItC,WAAW,IAAI,MAAM,CAAC,gBAJgB,EAKtC,QAAQ,IAAI,MAAM,CAAC,aALmB,EAMtC,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,wBANI,EAOtC,QAAQ,IAAI,MAAM,CAAC,aAPmB,CAAxC;EASD;;EAED,OAAO,KAAP;AACD,CAzBM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n multiselectCheck: {\n color: tokens.colorNeutralForeground3,\n fontSize: tokens.fontSizeBase500,\n visibility: 'visible',\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n color: tokens.colorBrandBackground,\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n active && focusVisible && styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n state.checkIcon.className,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"OptionGroup.types.js","sourceRoot":"../src/","sources":["components/OptionGroup/OptionGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n /* The root group wrapper */\n root: NonNullable<Slot<'div'>>;\n\n /*\n * The option group label, displayed as static text before the child options.\n * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n */\n label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"]}
1
+ {"version":3,"file":"OptionGroup.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n /* The root group wrapper */\n root: NonNullable<Slot<'div'>>;\n\n /*\n * The option group label, displayed as static text before the child options.\n * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n */\n label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/OptionGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/OptionGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OptionGroup/renderOptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,EAAmC,SAAS,CAAC,KAAV,CAAgB,QAAnD,CADlB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n const { slots, slotProps } = getSlots<OptionGroupSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n {slotProps.root.children}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,EAAmC,SAAS,CAAC,KAAV,CAAgB,QAAnD,CADlB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n const { slots, slotProps } = getSlots<OptionGroupSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n {slotProps.root.children}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OptionGroup/useOptionGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,OAAO,GAAG,KAAK,CAAC,aAAD,CAArB;EACA,MAAM;IAAE;EAAF,IAAY,KAAlB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE;IAFG,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,OAF2B;MAGjC,mBAAmB,KAAK,GAAG,OAAH,GAAa,SAHJ;MAIjC,GAAG;IAJ8B,CAAR,CALtB;IAWL,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,YAAY,EAAE;QACZ,EAAE,EAAE,OADQ;QAEZ,IAAI,EAAE;MAFM;IADe,CAAR;EAXlB,CAAP;AAkBD,CAtBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n label: resolveShorthand(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,OAAO,GAAG,KAAK,CAAC,aAAD,CAArB;EACA,MAAM;IAAE;EAAF,IAAY,KAAlB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE;IAFG,CADP;IAKL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,IAAI,EAAE,OAF2B;MAGjC,mBAAmB,KAAK,GAAG,OAAH,GAAa,SAHJ;MAIjC,GAAG;IAJ8B,CAAR,CALtB;IAWL,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;MAC7B,YAAY,EAAE;QACZ,EAAE,EAAE,OADQ;QAEZ,IAAI,EAAE;MAFM;IADe,CAAR;EAXlB,CAAP;AAkBD,CAtBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n label: resolveShorthand(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OptionGroup/useOptionGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,KAAK,EAAE;AAF8D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,qBAAqB,CAAC,KAAvB,EAA8B,MAAM,CAAC,KAArC,EAA4C,KAAK,CAAC,KAAN,CAAY,SAAxD,CAApC;EACD;;EAED,OAAO,KAAP;AACD,CATM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS),\n },\n },\n\n label: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge),\n },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,KAAK,EAAE;AAF8D,CAAhE;AAKP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,qBAAqB,CAAC,KAAvB,EAA8B,MAAM,CAAC,KAArC,EAA4C,KAAK,CAAC,KAAN,CAAY,SAAxD,CAApC;EACD;;EAED,OAAO,KAAP;AACD,CATM","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS),\n },\n },\n\n label: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge),\n },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAoBA;;AACA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,YAAY,EAAE,SADmD;EAEjE,UAAU,EAAE,SAFqD;EAGjE,YAAY,EAAE,KAHmD;EAIjE,IAAI,EAAE,KAJ2D;;EAKjE,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAPgE;;EAQjE,eAAe,EAAE,EARgD;;EASjE,YAAY,GAAA,CACV;EACD,CAXgE;;EAYjE,eAAe,GAAA,CACb;EACD,CAdgE;;EAejE,OAAO,GAAA,CACL;EACD,CAjBgE;;EAkBjE,IAAI,EAAE;AAlB2D,CAAvB,CAArC;AAqBP,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n | 'activeOption'\n | 'appearance'\n | 'focusVisible'\n | 'open'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n | 'setOpen'\n | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/contexts/ComboboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAoBA;;AACA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,YAAY,EAAE,SADmD;EAEjE,UAAU,EAAE,SAFqD;EAGjE,YAAY,EAAE,KAHmD;EAIjE,IAAI,EAAE,KAJ2D;;EAKjE,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAPgE;;EAQjE,eAAe,EAAE,EARgD;;EASjE,YAAY,GAAA,CACV;EACD,CAXgE;;EAYjE,eAAe,GAAA,CACb;EACD,CAdgE;;EAejE,OAAO,GAAA,CACL;EACD,CAjBgE;;EAkBjE,IAAI,EAAE;AAlB2D,CAAvB,CAArC;AAqBP,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n | 'activeOption'\n | 'appearance'\n | 'focusVisible'\n | 'open'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n | 'setOpen'\n | 'size'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/ListboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAiBA;;AACA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAsB;EAC/D,YAAY,EAAE,SADiD;EAE/D,YAAY,EAAE,KAFiD;EAG/D,WAAW,EAAE,KAHkD;;EAI/D,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAN8D;;EAO/D,eAAe,EAAE,EAP8C;;EAQ/D,YAAY,GAAA,CACV;EACD,CAV8D;;EAW/D,eAAe,GAAA,CACb;EACD;;AAb8D,CAAtB,CAApC;AAgBP,OAAO,MAAM,eAAe,GAAG,cAAc,CAAC,QAAvC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n | 'activeOption'\n | 'focusVisible'\n | 'multiselect'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/contexts/ListboxContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B,C,CAiBA;;AACA,OAAO,MAAM,cAAc,gBAAG,aAAa,CAAsB;EAC/D,YAAY,EAAE,SADiD;EAE/D,YAAY,EAAE,KAFiD;EAG/D,WAAW,EAAE,KAHkD;;EAI/D,cAAc,GAAA;IACZ,OAAO,MAAM,SAAb;EACD,CAN8D;;EAO/D,eAAe,EAAE,EAP8C;;EAQ/D,YAAY,GAAA,CACV;EACD,CAV8D;;EAW/D,eAAe,GAAA,CACb;EACD;;AAb8D,CAAtB,CAApC;AAgBP,OAAO,MAAM,eAAe,GAAG,cAAc,CAAC,QAAvC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n | 'activeOption'\n | 'focusVisible'\n | 'multiselect'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/useComboboxContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,wBAAV,CAAmC,KAAnC,EAA2D;EAC/D,MAAM;IACJ,YADI;IAEJ,UAFI;IAGJ,YAHI;IAIJ,IAJI;IAKJ,cALI;IAMJ,eANI;IAOJ,YAPI;IAQJ,eARI;IASJ,OATI;IAUJ;EAVI,IAWF,KAXJ;EAaA,MAAM,QAAQ,GAAG;IACf,YADe;IAEf,UAFe;IAGf,YAHe;IAIf,IAJe;IAKf,cALe;IAMf,eANe;IAOf,YAPe;IAQf,eARe;IASf,OATe;IAUf;EAVe,CAAjB;EAaA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n const {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n } = state;\n\n const combobox = {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n };\n\n return { combobox };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/contexts/useComboboxContextValues.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,wBAAV,CAAmC,KAAnC,EAA2D;EAC/D,MAAM;IACJ,YADI;IAEJ,UAFI;IAGJ,YAHI;IAIJ,IAJI;IAKJ,cALI;IAMJ,eANI;IAOJ,YAPI;IAQJ,eARI;IASJ,OATI;IAUJ;EAVI,IAWF,KAXJ;EAaA,MAAM,QAAQ,GAAG;IACf,YADe;IAEf,UAFe;IAGf,YAHe;IAIf,IAJe;IAKf,cALe;IAMf,eANe;IAOf,YAPe;IAQf,eARe;IASf,OATe;IAUf;EAVe,CAAjB;EAaA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n const {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n } = state;\n\n const combobox = {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n };\n\n return { combobox };\n}\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["contexts/useListboxContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAEA,OAAM,SAAU,uBAAV,CAAkC,KAAlC,EAAqD;EACzD,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;EACA,MAAM;IACJ,YADI;IAEJ,YAFI;IAGJ,WAHI;IAIJ,cAJI;IAKJ,eALI;IAMJ,YANI;IAOJ;EAPI,IAQF,KARJ,CAFyD,CAYzD;;EACA,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,eAAD,EAAkB,GAAG,IAAI,GAAG,CAAC,cAA7B,CAAjD;EAEA,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,sBAAH,GAA4B,cAA1E;EAEA,MAAM,OAAO,GAAG;IACd,YADc;IAEd,YAFc;IAGd,WAHc;IAId,cAAc,EAAE,mBAJF;IAKd,eALc;IAMd,YANc;IAOd;EAPc,CAAhB;EAUA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const {\n activeOption,\n focusVisible,\n multiselect,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n } = state;\n\n // get register/unregister functions from parent combobox context\n const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n const listbox = {\n activeOption,\n focusVisible,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n return { listbox };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,kCAAxD;AAEA,SAAS,eAAT,QAAgC,mBAAhC;AAEA,OAAM,SAAU,uBAAV,CAAkC,KAAlC,EAAqD;EACzD,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;EACA,MAAM;IACJ,YADI;IAEJ,YAFI;IAGJ,WAHI;IAIJ,cAJI;IAKJ,eALI;IAMJ,YANI;IAOJ;EAPI,IAQF,KARJ,CAFyD,CAYzD;;EACA,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,eAAD,EAAkB,GAAG,IAAI,GAAG,CAAC,cAA7B,CAAjD;EAEA,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,sBAAH,GAA4B,cAA1E;EAEA,MAAM,OAAO,GAAG;IACd,YADc;IAEd,YAFc;IAGd,WAHc;IAId,cAAc,EAAE,mBAJF;IAKd,eALc;IAMd,YANc;IAOd;EAPc,CAAhB;EAUA,OAAO;IAAE;EAAF,CAAP;AACD","sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const {\n activeOption,\n focusVisible,\n multiselect,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n } = state;\n\n // get register/unregister functions from parent combobox context\n const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n const listbox = {\n activeOption,\n focusVisible,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n return { listbox };\n}\n"],"sourceRoot":"../src/"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAT,QAAiC,4BAAjC;AAEA,SAAS,eAAT,QAAgC,2BAAhC;AAEA,SAAS,wBAAT,QAAyC,qCAAzC;AACA,SAAS,uBAAT,QAAwC,oCAAxC;AACA,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;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","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\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,gBAAT,QAAiC,4BAAjC;AAEA,SAAS,eAAT,QAAgC,2BAAhC;AAEA,SAAS,wBAAT,QAAyC,qCAAzC;AACA,SAAS,uBAAT,QAAwC,oCAAxC;AACA,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;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","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\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"],"sourceRoot":"../src/"}
@@ -1 +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"]}
1
+ {"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 { 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"]}
@@ -1 +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"]}
1
+ {"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 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"]}
@@ -1 +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"]}
1
+ {"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\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"]}
@@ -1 +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/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/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/"}
@@ -1 +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/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/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/"}
@@ -1 +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/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/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/"}
@@ -1 +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/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/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/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["utils/useOptionCollection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,MAA4B;EAC7D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAN,CAA8D,EAA9D,CAAd;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACvC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAN,CAAc,MAArC;;IACA,MAAM,gBAAgB,GAAI,KAAD,IAAkB;MAAA,IAAA,EAAA;;MAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,CAAc,KAAd,CAAA,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAE,MAAtB;IAA4B,CAAxE;;IACA,MAAM,YAAY,GAAI,EAAD,IAAgB,KAAK,CAAC,OAAN,CAAc,SAAd,CAAwB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,EAAnD,CAArC;;IACA,MAAM,aAAa,GAAI,EAAD,IAAe;MACnC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAN,CAAc,IAAd,CAAmB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,EAA9C,CAAb;MACA,OAAO,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,MAAb;IACD,CAHD;;IAIA,MAAM,uBAAuB,GAAI,OAAD,IAAwC;MACtE,OAAO,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,MAAL,CAAY,KAAb,CAApC,EAAyD,GAAzD,CAA6D,IAAI,IAAI,IAAI,CAAC,MAA1E,CAAP;IACD,CAFD;;IAIA,OAAO;MACL,QADK;MAEL,gBAFK;MAGL,YAHK;MAIL,aAJK;MAKL;IALK,CAAP;EAOD,CAnBqB,EAmBnB,EAnBmB,CAAtB;EAqBA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,CAAC,MAAD,EAAsB,OAAtB,KAA8C;;;IACrF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAN,CAAc,SAAd,CAAwB,IAAI,IAAG;MAC3C,IAAI,CAAC,IAAI,CAAC,OAAN,IAAiB,CAAC,OAAtB,EAA+B;QAC7B,OAAO,KAAP;MACD;;MAED,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,MAAM,CAAC,EAA9B,EAAkC;QAChC,OAAO,IAAP;MACD,CAP0C,CAS3C;MACA;;;MACA,OAAO,IAAI,CAAC,OAAL,CAAa,uBAAb,CAAqC,OAArC,IAAgD,IAAI,CAAC,2BAA5D;IACD,CAZa,CAAd,CADqF,CAerF;;IACA,IAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,CAAc,KAAd,CAAA,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAE,MAAF,CAAS,EAA7B,MAAoC,MAAM,CAAC,EAA/C,EAAmD;MACjD,MAAM,OAAO,GAAG;QACd,OADc;QAEd;MAFc,CAAhB,CADiD,CAMjD;;MACA,IAAI,KAAK,KAAK,CAAC,CAAf,EAAkB;QAChB,KAAK,CAAC,OAAN,GAAgB,CAAC,GAAG,KAAK,CAAC,OAAV,EAAmB,OAAnB,CAAhB;MACD,CAFD,MAEO;QACL,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,KAArB,EAA4B,CAA5B,EAA+B,OAA/B;MACD;IACF,CA5BoF,CA8BrF;;;IACA,OAAO,MAAK;MACV,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,MAAM,CAAC,EAAvD,CAAhB;IACD,CAFD;EAGD,CAlCsB,EAkCpB,EAlCoB,CAAvB;EAoCA,OAAO,EACL,GAAG,aADE;IAEL,OAAO,EAAE,KAAK,CAAC,OAAN,CAAc,GAAd,CAAkB,IAAI,IAAI,IAAI,CAAC,MAA/B,CAFJ;IAGL;EAHK,CAAP;AAKD,CAjEM","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/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useOptionCollection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAG,MAA4B;EAC7D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAN,CAA8D,EAA9D,CAAd;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACvC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAN,CAAc,MAArC;;IACA,MAAM,gBAAgB,GAAI,KAAD,IAAkB;MAAA,IAAA,EAAA;;MAAC,OAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,CAAc,KAAd,CAAA,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAE,MAAtB;IAA4B,CAAxE;;IACA,MAAM,YAAY,GAAI,EAAD,IAAgB,KAAK,CAAC,OAAN,CAAc,SAAd,CAAwB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,EAAnD,CAArC;;IACA,MAAM,aAAa,GAAI,EAAD,IAAe;MACnC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAN,CAAc,IAAd,CAAmB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,EAA9C,CAAb;MACA,OAAO,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,MAAb;IACD,CAHD;;IAIA,MAAM,uBAAuB,GAAI,OAAD,IAAwC;MACtE,OAAO,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,MAAL,CAAY,KAAb,CAApC,EAAyD,GAAzD,CAA6D,IAAI,IAAI,IAAI,CAAC,MAA1E,CAAP;IACD,CAFD;;IAIA,OAAO;MACL,QADK;MAEL,gBAFK;MAGL,YAHK;MAIL,aAJK;MAKL;IALK,CAAP;EAOD,CAnBqB,EAmBnB,EAnBmB,CAAtB;EAqBA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,CAAC,MAAD,EAAsB,OAAtB,KAA8C;;;IACrF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAN,CAAc,SAAd,CAAwB,IAAI,IAAG;MAC3C,IAAI,CAAC,IAAI,CAAC,OAAN,IAAiB,CAAC,OAAtB,EAA+B;QAC7B,OAAO,KAAP;MACD;;MAED,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,MAAM,CAAC,EAA9B,EAAkC;QAChC,OAAO,IAAP;MACD,CAP0C,CAS3C;MACA;;;MACA,OAAO,IAAI,CAAC,OAAL,CAAa,uBAAb,CAAqC,OAArC,IAAgD,IAAI,CAAC,2BAA5D;IACD,CAZa,CAAd,CADqF,CAerF;;IACA,IAAI,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,CAAc,KAAd,CAAA,MAAoB,IAApB,IAAoB,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoB,EAAA,CAAE,MAAF,CAAS,EAA7B,MAAoC,MAAM,CAAC,EAA/C,EAAmD;MACjD,MAAM,OAAO,GAAG;QACd,OADc;QAEd;MAFc,CAAhB,CADiD,CAMjD;;MACA,IAAI,KAAK,KAAK,CAAC,CAAf,EAAkB;QAChB,KAAK,CAAC,OAAN,GAAgB,CAAC,GAAG,KAAK,CAAC,OAAV,EAAmB,OAAnB,CAAhB;MACD,CAFD,MAEO;QACL,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,KAArB,EAA4B,CAA5B,EAA+B,OAA/B;MACD;IACF,CA5BoF,CA8BrF;;;IACA,OAAO,MAAK;MACV,KAAK,CAAC,OAAN,GAAgB,KAAK,CAAC,OAAN,CAAc,MAAd,CAAqB,IAAI,IAAI,IAAI,CAAC,MAAL,CAAY,EAAZ,KAAmB,MAAM,CAAC,EAAvD,CAAhB;IACD,CAFD;EAGD,CAlCsB,EAkCpB,EAlCoB,CAAvB;EAoCA,OAAO,EACL,GAAG,aADE;IAEL,OAAO,EAAE,KAAK,CAAC,OAAN,CAAc,GAAd,CAAkB,IAAI,IAAI,IAAI,CAAC,MAA/B,CAFJ;IAGL;EAHK,CAAP;AAKD,CAjEM","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/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["utils/useScrollOptionsIntoView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,2BAA1B;AAGA,OAAM,SAAU,wBAAV,CAAmC,KAAnC,EAAsD;EAC1D,MAAM;IAAE;EAAF,IAAmB,KAAzB;EACA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAA3B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,kBAAkB,CAAC,OAAnB,IAA8B,YAA9B,IAA8C,SAAS,EAA3D,EAA+D;MAC7D,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,OAAnB,CAA2B,aAA3B,CAAyC,IAAI,YAAY,CAAC,EAAE,EAA5D,CAA5B;;MAEA,IAAI,CAAC,mBAAL,EAA0B;QACxB;MACD;;MAED,MAAM;QAAE,YAAF;QAAgB;MAAhB,IAA8B,mBAApC;MACA,MAAM;QAAE,YAAY,EAAE,kBAAhB;QAAoC;MAApC,IAAkD,kBAAkB,CAAC,OAA3E;MAEA,MAAM,OAAO,GAAG,SAAS,GAAG,SAA5B;MACA,MAAM,OAAO,GAAG,SAAS,GAAG,YAAZ,GAA2B,SAAS,GAAG,kBAAvD,CAX6D,CAa7D;MACA;;MACA,MAAM,MAAM,GAAG,CAAf;;MAEA,IAAI,OAAJ,EAAa;QACX,kBAAkB,CAAC,OAAnB,CAA2B,QAA3B,CAAoC,CAApC,EAAuC,SAAS,GAAG,MAAnD;MACD,CAFD,MAEO,IAAI,OAAJ,EAAa;QAClB,kBAAkB,CAAC,OAAnB,CAA2B,QAA3B,CAAoC,CAApC,EAAuC,SAAS,GAAG,kBAAZ,GAAiC,YAAjC,GAAgD,MAAvF;MACD;IACF;EACF,CAxBD,EAwBG,CAAC,YAAD,CAxBH;EA0BA,OAAO,kBAAP;AACD","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"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,SAAT,QAA0B,2BAA1B;AAGA,OAAM,SAAU,wBAAV,CAAmC,KAAnC,EAAsD;EAC1D,MAAM;IAAE;EAAF,IAAmB,KAAzB;EACA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAA3B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,kBAAkB,CAAC,OAAnB,IAA8B,YAA9B,IAA8C,SAAS,EAA3D,EAA+D;MAC7D,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,OAAnB,CAA2B,aAA3B,CAAyC,IAAI,YAAY,CAAC,EAAE,EAA5D,CAA5B;;MAEA,IAAI,CAAC,mBAAL,EAA0B;QACxB;MACD;;MAED,MAAM;QAAE,YAAF;QAAgB;MAAhB,IAA8B,mBAApC;MACA,MAAM;QAAE,YAAY,EAAE,kBAAhB;QAAoC;MAApC,IAAkD,kBAAkB,CAAC,OAA3E;MAEA,MAAM,OAAO,GAAG,SAAS,GAAG,SAA5B;MACA,MAAM,OAAO,GAAG,SAAS,GAAG,YAAZ,GAA2B,SAAS,GAAG,kBAAvD,CAX6D,CAa7D;MACA;;MACA,MAAM,MAAM,GAAG,CAAf;;MAEA,IAAI,OAAJ,EAAa;QACX,kBAAkB,CAAC,OAAnB,CAA2B,QAA3B,CAAoC,CAApC,EAAuC,SAAS,GAAG,MAAnD;MACD,CAFD,MAEO,IAAI,OAAJ,EAAa;QAClB,kBAAkB,CAAC,OAAnB,CAA2B,QAA3B,CAAoC,CAApC,EAAuC,SAAS,GAAG,kBAAZ,GAAiC,YAAjC,GAAgD,MAAvF;MACD;IACF;EACF,CAxBD,EAwBG,CAAC,YAAD,CAxBH;EA0BA,OAAO,kBAAP;AACD","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"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["utils/useSelection.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AAIA,OAAO,MAAM,YAAY,GAAI,KAAD,IAA0C;EACpE,MAAM;IAAE,sBAAF;IAA0B,WAA1B;IAAuC;EAAvC,IAA0D,KAAhE;EAEA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,oBAAoB,CAAC;IACjE,KAAK,EAAE,KAAK,CAAC,eADoD;IAEjE,YAAY,EAAE,sBAFmD;IAGjE,YAAY,EAAE;EAHmD,CAAD,CAAlE;;EAMA,MAAM,YAAY,GAAG,CAAC,KAAD,EAAyB,MAAzB,KAAgD;IACnE;IACA,IAAI,MAAM,CAAC,QAAX,EAAqB;MACnB;IACD,CAJkE,CAMnE;;;IACA,IAAI,YAAY,GAAG,CAAC,MAAM,CAAC,KAAR,CAAnB,CAPmE,CASnE;;IACA,IAAI,WAAJ,EAAiB;MACf,MAAM,aAAa,GAAG,eAAe,CAAC,SAAhB,CAA0B,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,KAA5C,CAAtB;;MACA,IAAI,aAAa,GAAG,CAAC,CAArB,EAAwB;QACtB;QACA,YAAY,GAAG,CAAC,GAAG,eAAe,CAAC,KAAhB,CAAsB,CAAtB,EAAyB,aAAzB,CAAJ,EAA6C,GAAG,eAAe,CAAC,KAAhB,CAAsB,aAAa,GAAG,CAAtC,CAAhD,CAAf;MACD,CAHD,MAGO;QACL;QACA,YAAY,GAAG,CAAC,GAAG,eAAJ,EAAqB,MAAM,CAAC,KAA5B,CAAf;MACD;IACF;;IAED,kBAAkB,CAAC,YAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,MAAM,CAAC,KAAtB;MAA6B,eAAe,EAAE;IAA9C,CAAV,CAAd;EACD,CAvBD;;EAyBA,MAAM,cAAc,GAAI,KAAD,IAA2B;IAChD,kBAAkB,CAAC,EAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,SAAf;MAA0B,eAAe,EAAE;IAA3C,CAAV,CAAd;EACD,CAHD;;EAKA,OAAO;IAAE,cAAF;IAAkB,YAAlB;IAAgC;EAAhC,CAAP;AACD,CAxCM","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionValue } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionValue => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n };\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useSelection.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AAIA,OAAO,MAAM,YAAY,GAAI,KAAD,IAA0C;EACpE,MAAM;IAAE,sBAAF;IAA0B,WAA1B;IAAuC;EAAvC,IAA0D,KAAhE;EAEA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,oBAAoB,CAAC;IACjE,KAAK,EAAE,KAAK,CAAC,eADoD;IAEjE,YAAY,EAAE,sBAFmD;IAGjE,YAAY,EAAE;EAHmD,CAAD,CAAlE;;EAMA,MAAM,YAAY,GAAG,CAAC,KAAD,EAAyB,MAAzB,KAAgD;IACnE;IACA,IAAI,MAAM,CAAC,QAAX,EAAqB;MACnB;IACD,CAJkE,CAMnE;;;IACA,IAAI,YAAY,GAAG,CAAC,MAAM,CAAC,KAAR,CAAnB,CAPmE,CASnE;;IACA,IAAI,WAAJ,EAAiB;MACf,MAAM,aAAa,GAAG,eAAe,CAAC,SAAhB,CAA0B,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,KAA5C,CAAtB;;MACA,IAAI,aAAa,GAAG,CAAC,CAArB,EAAwB;QACtB;QACA,YAAY,GAAG,CAAC,GAAG,eAAe,CAAC,KAAhB,CAAsB,CAAtB,EAAyB,aAAzB,CAAJ,EAA6C,GAAG,eAAe,CAAC,KAAhB,CAAsB,aAAa,GAAG,CAAtC,CAAhD,CAAf;MACD,CAHD,MAGO;QACL;QACA,YAAY,GAAG,CAAC,GAAG,eAAJ,EAAqB,MAAM,CAAC,KAA5B,CAAf;MACD;IACF;;IAED,kBAAkB,CAAC,YAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,MAAM,CAAC,KAAtB;MAA6B,eAAe,EAAE;IAA9C,CAAV,CAAd;EACD,CAvBD;;EAyBA,MAAM,cAAc,GAAI,KAAD,IAA2B;IAChD,kBAAkB,CAAC,EAAD,CAAlB;IACA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,KAAH,EAAU;MAAE,WAAW,EAAE,SAAf;MAA0B,eAAe,EAAE;IAA3C,CAAV,CAAd;EACD,CAHD;;EAKA,OAAO;IAAE,cAAF;IAAkB,YAAlB;IAAgC;EAAhC,CAAP;AACD,CAxCM","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionValue } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionValue => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, selectedOptions: newSelection });\n };\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listbox: typeof listboxSlot = listboxSlot && {\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n /*\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n listbox.onClick = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox.onClick);\n\n listbox.onMouseOver = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox.onMouseOver);\n\n listbox.onMouseDown = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox.onMouseDown);\n }\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\nimport { Listbox } from '../components/Listbox/Listbox';\nimport type { ComboboxBaseProps, ComboboxBaseState } from './ComboboxBase.types';\n\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement>,\n triggerSlot?: ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\n/*\n * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n */\nexport function useTriggerListboxSlots(\n props: ComboboxBaseProps,\n state: ComboboxBaseState,\n ref: React.Ref<HTMLButtonElement | HTMLInputElement>,\n triggerSlot?: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listboxSlot?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> | ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { multiselect } = props;\n const {\n activeOption,\n getCount,\n getIndexOfId,\n getOptionAtIndex,\n ignoreNextBlur,\n open,\n selectOption,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n } = state;\n\n // handle trigger focus/blur\n const triggerRef: typeof ref = React.useRef(null);\n\n // resolve listbox shorthand props\n const listbox: typeof listboxSlot = listboxSlot && {\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n };\n\n // resolve trigger shorthand props\n const trigger: typeof triggerSlot = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption?.id : undefined,\n role: 'combobox',\n ...triggerSlot,\n // explicitly type the ref as an intersection here to prevent type errors\n // since the `children` prop has mutually incompatible types between input/button\n // functionally both ref and triggerRef will always be the same element type\n ref: useMergedRefs(ref, triggerSlot?.ref, triggerRef) as React.Ref<HTMLButtonElement & HTMLInputElement>,\n };\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n /*\n * Handle focus when clicking the listbox popup:\n * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)\n * 2. Do not close the listbox on button/input blur when clicking into the listbox\n */\n listbox.onClick = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox.onClick);\n\n listbox.onMouseOver = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox.onMouseOver);\n\n listbox.onMouseDown = mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n }, listbox.onMouseDown);\n }\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n\n ignoreNextBlur.current = false;\n\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setHasFocus(true);\n },\n trigger.onFocus,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n (event: React.KeyboardEvent<HTMLButtonElement> & React.KeyboardEvent<HTMLInputElement>) => {\n const action = getDropdownActionFromKey(event, { open, multiselect });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Open':\n event.preventDefault();\n setFocusVisible(true);\n setOpen(event, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n event.stopPropagation();\n event.preventDefault();\n setOpen(event, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n },\n trigger.onKeyDown,\n );\n\n trigger.onMouseOver = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n },\n trigger.onMouseOver,\n );\n\n return [trigger, listbox];\n}\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Combobox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Combobox/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/Combobox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Combobox/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["ComboboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ComboboxField/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/ComboboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ComboboxField/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Dropdown.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dropdown/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/Dropdown.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dropdown/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Listbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Listbox/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/Listbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Listbox/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Option.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Option/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/Option.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Option/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["OptionGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/OptionGroup/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/OptionGroup.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/OptionGroup/index';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Combobox/Combobox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAEA,MAAA,0BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EACA,MAAM,aAAa,GAAG,0BAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAtB;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,aAA/B,CAAP;AACD,CAN2D,CAA/C;AAQb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/Combobox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AAEA,MAAA,0BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EACA,MAAM,aAAa,GAAG,0BAAA,CAAA,wBAAA,CAAyB,KAAzB,CAAtB;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,aAA/B,CAAP;AACD,CAN2D,CAA/C;AAQb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Combobox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Combobox';\nexport * from './Combobox.types';\nexport * from './renderCombobox';\nexport * from './useCombobox';\nexport * from './useComboboxStyles';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Combobox/renderCombobox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,IAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,OAAN,KACE,KAAK,CAAC,WAAN,GACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADD,GAGC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CAJH,CAHH,CADF,CADF;AAgBD,CAnBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <ComboboxContext.Provider value={contextValues.combobox}>\n <slots.input {...slotProps.input} />\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.listbox &&\n (state.inlinePopup ? (\n <slots.listbox {...slotProps.listbox} />\n ) : (\n <Portal>\n <slots.listbox {...slotProps.listbox} />\n </Portal>\n ))}\n </ComboboxContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAzB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,UAAN,IAAoB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAjB,CAFvB,EAGG,KAAK,CAAC,OAAN,KACE,KAAK,CAAC,WAAN,GACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADD,GAGC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CAJH,CAHH,CADF,CADF;AAgBD,CAnBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n const { slots, slotProps } = getSlots<ComboboxSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <ComboboxContext.Provider value={contextValues.combobox}>\n <slots.input {...slotProps.input} />\n {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n {slots.listbox &&\n (state.inlinePopup ? (\n <slots.listbox {...slotProps.listbox} />\n ) : (\n <Portal>\n <slots.listbox {...slotProps.listbox} />\n </Portal>\n ))}\n </ComboboxContext.Provider>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}