@fluentui/react-combobox 9.13.9 → 9.13.11

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 (114) hide show
  1. package/CHANGELOG.md +41 -2
  2. package/lib/Combobox.js.map +1 -1
  3. package/lib/Dropdown.js.map +1 -1
  4. package/lib/Listbox.js.map +1 -1
  5. package/lib/Option.js.map +1 -1
  6. package/lib/OptionGroup.js.map +1 -1
  7. package/lib/Selection.js.map +1 -1
  8. package/lib/components/Combobox/Combobox.js.map +1 -1
  9. package/lib/components/Combobox/Combobox.types.js.map +1 -1
  10. package/lib/components/Combobox/index.js.map +1 -1
  11. package/lib/components/Combobox/renderCombobox.js.map +1 -1
  12. package/lib/components/Combobox/useCombobox.js.map +1 -1
  13. package/lib/components/Combobox/useComboboxStyles.styles.js +1 -2
  14. package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
  15. package/lib/components/Dropdown/Dropdown.js.map +1 -1
  16. package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
  17. package/lib/components/Dropdown/index.js.map +1 -1
  18. package/lib/components/Dropdown/renderDropdown.js.map +1 -1
  19. package/lib/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
  20. package/lib/components/Dropdown/useDropdown.js.map +1 -1
  21. package/lib/components/Dropdown/useDropdownStyles.styles.js +1 -2
  22. package/lib/components/Listbox/Listbox.js.map +1 -1
  23. package/lib/components/Listbox/Listbox.types.js.map +1 -1
  24. package/lib/components/Listbox/index.js.map +1 -1
  25. package/lib/components/Listbox/renderListbox.js.map +1 -1
  26. package/lib/components/Listbox/useListbox.js.map +1 -1
  27. package/lib/components/Listbox/useListboxStyles.styles.js +1 -2
  28. package/lib/components/Option/Option.js.map +1 -1
  29. package/lib/components/Option/Option.types.js.map +1 -1
  30. package/lib/components/Option/index.js.map +1 -1
  31. package/lib/components/Option/renderOption.js.map +1 -1
  32. package/lib/components/Option/useOption.js.map +1 -1
  33. package/lib/components/Option/useOptionStyles.styles.js +1 -2
  34. package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
  35. package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
  36. package/lib/components/OptionGroup/index.js.map +1 -1
  37. package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
  38. package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
  39. package/lib/components/OptionGroup/useOptionGroupStyles.styles.js +1 -2
  40. package/lib/contexts/ComboboxContext.js.map +1 -1
  41. package/lib/contexts/ListboxContext.js.map +1 -1
  42. package/lib/contexts/useComboboxContextValues.js.map +1 -1
  43. package/lib/contexts/useListboxContextValues.js.map +1 -1
  44. package/lib/hooks/useComboboxFilter.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 +0 -1
  52. package/lib/utils/useComboboxBaseState.js.map +1 -1
  53. package/lib/utils/useComboboxPositioning.js.map +1 -1
  54. package/lib/utils/useListboxSlot.js.map +1 -1
  55. package/lib/utils/useOptionCollection.js.map +1 -1
  56. package/lib/utils/useSelection.js.map +1 -1
  57. package/lib/utils/useTriggerSlot.js.map +1 -1
  58. package/lib-commonjs/Combobox.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/Selection.js.map +1 -1
  64. package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
  65. package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
  66. package/lib-commonjs/components/Combobox/index.js.map +1 -1
  67. package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
  68. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  69. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +1 -1
  70. package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -1
  71. package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
  72. package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
  73. package/lib-commonjs/components/Dropdown/index.js.map +1 -1
  74. package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
  75. package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
  76. package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
  77. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +1 -1
  78. package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
  79. package/lib-commonjs/components/Listbox/Listbox.types.js.map +1 -1
  80. package/lib-commonjs/components/Listbox/index.js.map +1 -1
  81. package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
  82. package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
  83. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +1 -1
  84. package/lib-commonjs/components/Option/Option.js.map +1 -1
  85. package/lib-commonjs/components/Option/Option.types.js.map +1 -1
  86. package/lib-commonjs/components/Option/index.js.map +1 -1
  87. package/lib-commonjs/components/Option/renderOption.js.map +1 -1
  88. package/lib-commonjs/components/Option/useOption.js.map +1 -1
  89. package/lib-commonjs/components/Option/useOptionStyles.styles.js +1 -1
  90. package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
  91. package/lib-commonjs/components/OptionGroup/OptionGroup.types.js.map +1 -1
  92. package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
  93. package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
  94. package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
  95. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +1 -1
  96. package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
  97. package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
  98. package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
  99. package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
  100. package/lib-commonjs/hooks/useComboboxFilter.js.map +1 -1
  101. package/lib-commonjs/index.js.map +1 -1
  102. package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
  103. package/lib-commonjs/utils/OptionCollection.types.js.map +1 -1
  104. package/lib-commonjs/utils/Selection.types.js.map +1 -1
  105. package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
  106. package/lib-commonjs/utils/internalTokens.js.map +1 -1
  107. package/lib-commonjs/utils/useComboboxBaseState.js +0 -1
  108. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  109. package/lib-commonjs/utils/useComboboxPositioning.js.map +1 -1
  110. package/lib-commonjs/utils/useListboxSlot.js.map +1 -1
  111. package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
  112. package/lib-commonjs/utils/useSelection.js.map +1 -1
  113. package/lib-commonjs/utils/useTriggerSlot.js.map +1 -1
  114. package/package.json +12 -28
@@ -1 +1 @@
1
- {"version":3,"sources":["useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n ComboboxBaseState,\n 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n const {\n state: { open, setOpen, setHasFocus },\n defaultProps,\n elementType,\n activeDescendantController,\n } = options;\n\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n role: 'combobox',\n ...(typeof defaultProps === 'object' && defaultProps),\n },\n elementType,\n });\n\n // handle trigger focus/blur\n const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\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 setOpen(event, false);\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (event.target === event.currentTarget) {\n setHasFocus(true);\n }\n },\n trigger.onFocus,\n );\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n useTriggerKeydown({ activeDescendantController, ...options.state }),\n trigger.onKeyDown,\n );\n\n return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const next = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect });\n const activeOption = getActiveOption();\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'Open':\n case 'Close':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n previous(activeOption);\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'Open':\n setOpen(e, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n e.stopPropagation();\n setOpen(e, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(e, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","slot","always","type","role","triggerRef","React","useRef","useMergedRefs","onBlur","mergeCallbacks","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","useSetKeyboardNavigation","useEventCallback","e","action","getDropdownActionFromKey","preventDefault","stopPropagation","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/utils/useTriggerSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n ComboboxBaseState,\n 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>> | NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement> | React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' | 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> | SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n const {\n state: { open, setOpen, setHasFocus },\n defaultProps,\n elementType,\n activeDescendantController,\n } = options;\n\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n role: 'combobox',\n ...(typeof defaultProps === 'object' && defaultProps),\n },\n elementType,\n });\n\n // handle trigger focus/blur\n const triggerRef = React.useRef<HTMLButtonElement | HTMLInputElement>(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\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 setOpen(event, false);\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (event.target === event.currentTarget) {\n setHasFocus(true);\n }\n },\n trigger.onFocus,\n );\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n useTriggerKeydown({ activeDescendantController, ...options.state }),\n trigger.onKeyDown,\n );\n\n return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n } & Pick<UseTriggerSlotState, 'setOpen' | 'selectOption' | 'getOptionById' | 'multiselect' | 'open'>,\n) {\n const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const next = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue | undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect });\n const activeOption = getActiveOption();\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'Open':\n case 'Close':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n previous(activeOption);\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'Open':\n setOpen(e, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n e.stopPropagation();\n setOpen(e, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(e, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","slot","always","type","role","triggerRef","React","useRef","useMergedRefs","onBlur","mergeCallbacks","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","useSetKeyboardNavigation","useEventCallback","e","action","getDropdownActionFromKey","preventDefault","stopPropagation","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-combobox",
3
- "version": "9.13.9",
3
+ "version": "9.13.11",
4
4
  "description": "Fluent UI React Combobox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -11,42 +11,26 @@
11
11
  "url": "https://github.com/microsoft/fluentui"
12
12
  },
13
13
  "license": "MIT",
14
- "scripts": {
15
- "build": "just-scripts build",
16
- "bundle-size": "monosize measure",
17
- "clean": "just-scripts clean",
18
- "code-style": "just-scripts code-style",
19
- "just": "just-scripts",
20
- "lint": "just-scripts lint",
21
- "start": "yarn storybook",
22
- "test": "jest --passWithNoTests",
23
- "storybook": "yarn --cwd ../stories storybook",
24
- "type-check": "just-scripts type-check",
25
- "generate-api": "just-scripts generate-api",
26
- "e2e": "cypress run --component",
27
- "e2e:local": "cypress open --component"
28
- },
29
14
  "devDependencies": {
30
15
  "@fluentui/eslint-plugin": "*",
31
16
  "@fluentui/react-conformance": "*",
32
17
  "@fluentui/react-conformance-griffel": "*",
33
18
  "@fluentui/scripts-api-extractor": "*",
34
- "@fluentui/scripts-tasks": "*",
35
19
  "@fluentui/scripts-cypress": "*"
36
20
  },
37
21
  "dependencies": {
38
- "@fluentui/react-aria": "^9.13.7",
39
- "@fluentui/keyboard-keys": "^9.0.7",
40
- "@fluentui/react-context-selector": "^9.1.67",
41
- "@fluentui/react-field": "^9.1.77",
22
+ "@fluentui/react-aria": "^9.13.9",
23
+ "@fluentui/keyboard-keys": "^9.0.8",
24
+ "@fluentui/react-context-selector": "^9.1.69",
25
+ "@fluentui/react-field": "^9.1.79",
42
26
  "@fluentui/react-icons": "^2.0.245",
43
- "@fluentui/react-jsx-runtime": "^9.0.44",
44
- "@fluentui/react-portal": "^9.4.36",
45
- "@fluentui/react-positioning": "^9.15.9",
46
- "@fluentui/react-shared-contexts": "^9.20.1",
47
- "@fluentui/react-tabster": "^9.22.8",
48
- "@fluentui/react-theme": "^9.1.20",
49
- "@fluentui/react-utilities": "^9.18.15",
27
+ "@fluentui/react-jsx-runtime": "^9.0.46",
28
+ "@fluentui/react-portal": "^9.4.38",
29
+ "@fluentui/react-positioning": "^9.15.11",
30
+ "@fluentui/react-shared-contexts": "^9.21.0",
31
+ "@fluentui/react-tabster": "^9.23.0",
32
+ "@fluentui/react-theme": "^9.1.22",
33
+ "@fluentui/react-utilities": "^9.18.17",
50
34
  "@griffel/react": "^1.5.22",
51
35
  "@swc/helpers": "^0.5.1"
52
36
  },