@fluentui/react-combobox 9.5.33 → 9.5.35

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 (36) hide show
  1. package/CHANGELOG.md +34 -9
  2. package/dist/index.d.ts +11 -0
  3. package/lib/components/Combobox/useCombobox.js +22 -126
  4. package/lib/components/Combobox/useCombobox.js.map +1 -1
  5. package/lib/components/Combobox/useInputTriggerSlot.js +103 -0
  6. package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -0
  7. package/lib/components/Dropdown/useButtonTriggerSlot.js +69 -0
  8. package/lib/components/Dropdown/useButtonTriggerSlot.js.map +1 -0
  9. package/lib/components/Dropdown/useDropdown.js +18 -76
  10. package/lib/components/Dropdown/useDropdown.js.map +1 -1
  11. package/lib/utils/ComboboxBase.types.js.map +1 -1
  12. package/lib/utils/useComboboxBaseState.js +2 -1
  13. package/lib/utils/useComboboxBaseState.js.map +1 -1
  14. package/lib/utils/useListboxSlot.js +37 -0
  15. package/lib/utils/useListboxSlot.js.map +1 -0
  16. package/lib/utils/useTriggerSlot.js +75 -0
  17. package/lib/utils/useTriggerSlot.js.map +1 -0
  18. package/lib-commonjs/components/Combobox/useCombobox.js +22 -126
  19. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  20. package/lib-commonjs/components/Combobox/useInputTriggerSlot.js +110 -0
  21. package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -0
  22. package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js +76 -0
  23. package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js.map +1 -0
  24. package/lib-commonjs/components/Dropdown/useDropdown.js +17 -75
  25. package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
  26. package/lib-commonjs/utils/useComboboxBaseState.js +2 -1
  27. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  28. package/lib-commonjs/utils/useListboxSlot.js +46 -0
  29. package/lib-commonjs/utils/useListboxSlot.js.map +1 -0
  30. package/lib-commonjs/utils/useTriggerSlot.js +83 -0
  31. package/lib-commonjs/utils/useTriggerSlot.js.map +1 -0
  32. package/package.json +8 -8
  33. package/lib/utils/useTriggerListboxSlots.js +0 -133
  34. package/lib/utils/useTriggerListboxSlots.js.map +0 -1
  35. package/lib-commonjs/utils/useTriggerListboxSlots.js +0 -140
  36. package/lib-commonjs/utils/useTriggerListboxSlots.js.map +0 -1
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useTriggerSlot", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return useTriggerSlot;
9
+ }
10
+ });
11
+ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
+ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
+ const _reactutilities = require("@fluentui/react-utilities");
14
+ const _dropdownKeyActions = require("../utils/dropdownKeyActions");
15
+ function useTriggerSlot(triggerSlotFromProp, ref, options) {
16
+ const { state: { activeOption, getCount, getIndexOfId, getOptionAtIndex, open, selectOption, setActiveOption, setFocusVisible, setOpen, multiselect }, defaultProps, elementType } = options;
17
+ const trigger = _reactutilities.slot.always(triggerSlotFromProp, {
18
+ defaultProps: {
19
+ type: 'text',
20
+ 'aria-expanded': open,
21
+ 'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
22
+ role: 'combobox',
23
+ ...typeof defaultProps === 'object' && defaultProps
24
+ },
25
+ elementType
26
+ });
27
+ // handle trigger focus/blur
28
+ const triggerRef = _react.useRef(null);
29
+ trigger.ref = (0, _reactutilities.useMergedRefs)(triggerRef, trigger.ref, ref);
30
+ // the trigger should open/close the popup on click or blur
31
+ trigger.onBlur = (0, _reactutilities.mergeCallbacks)((event)=>{
32
+ setOpen(event, false);
33
+ }, trigger.onBlur);
34
+ trigger.onClick = (0, _reactutilities.mergeCallbacks)((event)=>{
35
+ setOpen(event, !open);
36
+ }, trigger.onClick);
37
+ // handle combobox keyboard interaction
38
+ trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)((event)=>{
39
+ const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
40
+ open,
41
+ multiselect
42
+ });
43
+ const maxIndex = getCount() - 1;
44
+ const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
45
+ let newIndex = activeIndex;
46
+ switch(action){
47
+ case 'Open':
48
+ event.preventDefault();
49
+ setFocusVisible(true);
50
+ setOpen(event, true);
51
+ break;
52
+ case 'Close':
53
+ // stop propagation for escape key to avoid dismissing any parent popups
54
+ event.stopPropagation();
55
+ event.preventDefault();
56
+ setOpen(event, false);
57
+ break;
58
+ case 'CloseSelect':
59
+ !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
60
+ // fallthrough
61
+ case 'Select':
62
+ activeOption && selectOption(event, activeOption);
63
+ event.preventDefault();
64
+ break;
65
+ case 'Tab':
66
+ !multiselect && activeOption && selectOption(event, activeOption);
67
+ break;
68
+ default:
69
+ newIndex = (0, _dropdownKeyActions.getIndexFromAction)(action, activeIndex, maxIndex);
70
+ }
71
+ if (newIndex !== activeIndex) {
72
+ // prevent default page scroll/keyboard action if the index changed
73
+ event.preventDefault();
74
+ setActiveOption(getOptionAtIndex(newIndex));
75
+ setFocusVisible(true);
76
+ }
77
+ }, trigger.onKeyDown);
78
+ trigger.onMouseOver = (0, _reactutilities.mergeCallbacks)((event)=>{
79
+ setFocusVisible(false);
80
+ }, trigger.onMouseOver);
81
+ // TODO fix cast
82
+ return trigger;
83
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useTriggerSlot.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\n/**\n * Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */ export function useTriggerSlot(triggerSlotFromProp, ref, options) {\n const { state: { activeOption, getCount, getIndexOfId, getOptionAtIndex, open, selectOption, setActiveOption, setFocusVisible, setOpen, multiselect }, defaultProps, elementType } = options;\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,\n role: 'combobox',\n ...typeof defaultProps === 'object' && defaultProps\n },\n elementType\n });\n // handle trigger focus/blur\n const triggerRef = React.useRef(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref);\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event)=>{\n setOpen(event, false);\n }, trigger.onBlur);\n trigger.onClick = mergeCallbacks((event)=>{\n setOpen(event, !open);\n }, trigger.onClick);\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks((event)=>{\n const action = getDropdownActionFromKey(event, {\n open,\n multiselect\n });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\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 === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n !multiselect && 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 }, trigger.onKeyDown);\n trigger.onMouseOver = mergeCallbacks((event)=>{\n setFocusVisible(false);\n }, trigger.onMouseOver);\n // TODO fix cast\n return trigger;\n}\n"],"names":["useTriggerSlot","triggerSlotFromProp","ref","options","state","activeOption","getCount","getIndexOfId","getOptionAtIndex","open","selectOption","setActiveOption","setFocusVisible","setOpen","multiselect","defaultProps","elementType","trigger","slot","always","type","id","undefined","role","triggerRef","React","useRef","useMergedRefs","onBlur","mergeCallbacks","event","onClick","onKeyDown","action","getDropdownActionFromKey","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","getIndexFromAction","onMouseOver"],"mappings":";;;;+BAMoBA;;;eAAAA;;;;iEANG;gCAC6B;oCACS;AAIlD,SAASA,eAAeC,mBAAmB,EAAEC,GAAG,EAAEC,OAAO;IAChE,MAAM,EAAEC,OAAO,EAAEC,YAAY,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,YAAY,EAAEC,eAAe,EAAEC,eAAe,EAAEC,OAAO,EAAEC,WAAW,EAAE,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGb;IACrL,MAAMc,UAAUC,oBAAI,CAACC,MAAM,CAAClB,qBAAqB;QAC7Cc,cAAc;YACVK,MAAM;YACN,iBAAiBX;YACjB,yBAAyBA,OAAOJ,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAagB,EAAE,GAAGC;YAC9GC,MAAM;YACN,GAAG,OAAOR,iBAAiB,YAAYA,YAAY;QACvD;QACAC;IACJ;IACA,4BAA4B;IAC5B,MAAMQ,aAAaC,OAAMC,MAAM,CAAC;IAChCT,QAAQf,GAAG,GAAGyB,IAAAA,6BAAa,EAACH,YAAYP,QAAQf,GAAG,EAAEA;IACrD,2DAA2D;IAC3De,QAAQW,MAAM,GAAGC,IAAAA,8BAAc,EAAC,CAACC;QAC7BjB,QAAQiB,OAAO;IACnB,GAAGb,QAAQW,MAAM;IACjBX,QAAQc,OAAO,GAAGF,IAAAA,8BAAc,EAAC,CAACC;QAC9BjB,QAAQiB,OAAO,CAACrB;IACpB,GAAGQ,QAAQc,OAAO;IAClB,uCAAuC;IACvCd,QAAQe,SAAS,GAAGH,IAAAA,8BAAc,EAAC,CAACC;QAChC,MAAMG,SAASC,IAAAA,4CAAwB,EAACJ,OAAO;YAC3CrB;YACAK;QACJ;QACA,MAAMqB,WAAW7B,aAAa;QAC9B,MAAM8B,cAAc/B,eAAeE,aAAaF,aAAagB,EAAE,IAAI,CAAC;QACpE,IAAIgB,WAAWD;QACf,OAAOH;YACH,KAAK;gBACDH,MAAMQ,cAAc;gBACpB1B,gBAAgB;gBAChBC,QAAQiB,OAAO;gBACf;YACJ,KAAK;gBACD,wEAAwE;gBACxEA,MAAMS,eAAe;gBACrBT,MAAMQ,cAAc;gBACpBzB,QAAQiB,OAAO;gBACf;YACJ,KAAK;gBACD,CAAChB,eAAe,CAAET,CAAAA,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAamC,QAAQ,AAAD,KAAM3B,QAAQiB,OAAO;YAC3H,cAAc;YACd,KAAK;gBACDzB,gBAAgBK,aAAaoB,OAAOzB;gBACpCyB,MAAMQ,cAAc;gBACpB;YACJ,KAAK;gBACD,CAACxB,eAAeT,gBAAgBK,aAAaoB,OAAOzB;gBACpD;YACJ;gBACIgC,WAAWI,IAAAA,sCAAkB,EAACR,QAAQG,aAAaD;QAC3D;QACA,IAAIE,aAAaD,aAAa;YAC1B,mEAAmE;YACnEN,MAAMQ,cAAc;YACpB3B,gBAAgBH,iBAAiB6B;YACjCzB,gBAAgB;QACpB;IACJ,GAAGK,QAAQe,SAAS;IACpBf,QAAQyB,WAAW,GAAGb,IAAAA,8BAAc,EAAC,CAACC;QAClClB,gBAAgB;IACpB,GAAGK,QAAQyB,WAAW;IACtB,gBAAgB;IAChB,OAAOzB;AACX"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-combobox",
3
- "version": "9.5.33",
3
+ "version": "9.5.35",
4
4
  "description": "Fluent UI React Combobox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -34,15 +34,15 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@fluentui/keyboard-keys": "^9.0.7",
37
- "@fluentui/react-context-selector": "^9.1.43",
38
- "@fluentui/react-field": "^9.1.44",
37
+ "@fluentui/react-context-selector": "^9.1.44",
38
+ "@fluentui/react-field": "^9.1.45",
39
39
  "@fluentui/react-icons": "^2.0.217",
40
- "@fluentui/react-jsx-runtime": "^9.0.21",
41
- "@fluentui/react-portal": "^9.4.4",
42
- "@fluentui/react-positioning": "^9.10.3",
43
- "@fluentui/react-shared-contexts": "^9.13.1",
40
+ "@fluentui/react-jsx-runtime": "^9.0.22",
41
+ "@fluentui/react-portal": "^9.4.5",
42
+ "@fluentui/react-positioning": "^9.10.5",
43
+ "@fluentui/react-shared-contexts": "^9.13.2",
44
44
  "@fluentui/react-theme": "^9.1.16",
45
- "@fluentui/react-utilities": "^9.15.3",
45
+ "@fluentui/react-utilities": "^9.15.4",
46
46
  "@griffel/react": "^1.5.14",
47
47
  "@swc/helpers": "^0.5.1"
48
48
  },
@@ -1,133 +0,0 @@
1
- import * as React from 'react';
2
- import { useFluent_unstable } from '@fluentui/react-shared-contexts';
3
- import { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
4
- import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
5
- /*
6
- * useTriggerListboxSlots returns a tuple of trigger/listbox shorthand,
7
- * with the semantics and event handlers needed for the Combobox and Dropdown components.
8
- * The element type of the ref should always match the element type used in the trigger shorthand.
9
- */ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
10
- const { multiselect } = props;
11
- const { activeOption, getCount, getIndexOfId, getOptionAtIndex, ignoreNextBlur, open, selectOption, setActiveOption, setFocusVisible, setHasFocus, setOpen } = state;
12
- // handle trigger focus/blur
13
- const triggerRef = React.useRef(null);
14
- const listboxRef = React.useRef(null);
15
- // resolve listbox shorthand props
16
- const listboxId = useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
17
- const mergedListboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, listboxRef);
18
- const listbox = listboxSlot && {
19
- id: listboxId,
20
- multiselect,
21
- tabIndex: undefined,
22
- ...listboxSlot,
23
- ref: mergedListboxRef
24
- };
25
- // resolve trigger shorthand props
26
- const trigger = {
27
- 'aria-expanded': open,
28
- 'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
29
- role: 'combobox',
30
- ...triggerSlot,
31
- // explicitly type the ref as an intersection here to prevent type errors
32
- // since the `children` prop has mutually incompatible types between input/button
33
- // functionally both ref and triggerRef will always be the same element type
34
- ref: useMergedRefs(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)
35
- };
36
- /*
37
- * Handle focus when clicking the listbox popup:
38
- * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
39
- * 2. Do not close the listbox on button/input blur when clicking into the listbox
40
- */ const listboxOnClick = useEventCallback(mergeCallbacks((event)=>{
41
- var _triggerRef_current;
42
- (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
43
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
44
- const listboxOnMouseOver = useEventCallback(mergeCallbacks((event)=>{
45
- setFocusVisible(false);
46
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
47
- const { targetDocument } = useFluent_unstable();
48
- const documentOnMouseUp = useEventCallback((ev)=>{
49
- var _listboxRef_current;
50
- if (!((_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.contains(ev.target))) {
51
- setOpen(ev, false);
52
- }
53
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', documentOnMouseUp);
54
- });
55
- const listboxOnMouseDown = useEventCallback(mergeCallbacks((event)=>{
56
- ignoreNextBlur.current = true;
57
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', documentOnMouseUp);
58
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
59
- const listboxOnMouseUp = useEventCallback(mergeCallbacks((event)=>{
60
- // some listbox clicks don't blur the input (e.g. clicking a scrollbar)
61
- // this ensures future blurs that occur after the click aren't ignored
62
- ignoreNextBlur.current = false;
63
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseUp));
64
- // listbox is nullable, only add event handlers if it exists
65
- if (listbox) {
66
- listbox.onClick = listboxOnClick;
67
- listbox.onMouseOver = listboxOnMouseOver;
68
- listbox.onMouseDown = listboxOnMouseDown;
69
- listbox.onMouseUp = listboxOnMouseUp;
70
- }
71
- // the trigger should open/close the popup on click or blur
72
- trigger.onBlur = mergeCallbacks((event)=>{
73
- if (!ignoreNextBlur.current) {
74
- setOpen(event, false);
75
- }
76
- ignoreNextBlur.current = false;
77
- setHasFocus(false);
78
- }, trigger.onBlur);
79
- trigger.onClick = mergeCallbacks((event)=>{
80
- setOpen(event, !open);
81
- }, trigger.onClick);
82
- trigger.onFocus = mergeCallbacks((event)=>{
83
- setHasFocus(true);
84
- }, trigger.onFocus);
85
- // handle combobox keyboard interaction
86
- trigger.onKeyDown = mergeCallbacks((event)=>{
87
- const action = getDropdownActionFromKey(event, {
88
- open,
89
- multiselect
90
- });
91
- const maxIndex = getCount() - 1;
92
- const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
93
- let newIndex = activeIndex;
94
- switch(action){
95
- case 'Open':
96
- event.preventDefault();
97
- setFocusVisible(true);
98
- setOpen(event, true);
99
- break;
100
- case 'Close':
101
- // stop propagation for escape key to avoid dismissing any parent popups
102
- event.stopPropagation();
103
- event.preventDefault();
104
- setOpen(event, false);
105
- break;
106
- case 'CloseSelect':
107
- !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
108
- // fallthrough
109
- case 'Select':
110
- activeOption && selectOption(event, activeOption);
111
- event.preventDefault();
112
- break;
113
- case 'Tab':
114
- !multiselect && activeOption && selectOption(event, activeOption);
115
- break;
116
- default:
117
- newIndex = getIndexFromAction(action, activeIndex, maxIndex);
118
- }
119
- if (newIndex !== activeIndex) {
120
- // prevent default page scroll/keyboard action if the index changed
121
- event.preventDefault();
122
- setActiveOption(getOptionAtIndex(newIndex));
123
- setFocusVisible(true);
124
- }
125
- }, trigger.onKeyDown);
126
- trigger.onMouseOver = mergeCallbacks((event)=>{
127
- setFocusVisible(false);
128
- }, trigger.onMouseOver);
129
- return [
130
- trigger,
131
- listbox
132
- ];
133
- }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["useTriggerListboxSlots.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { mergeCallbacks, useId, useEventCallback, 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 const listboxRef: NonNullable<typeof listboxSlot>['ref'] = React.useRef(null);\n\n // resolve listbox shorthand props\n const listboxId = useId('fluent-listbox', listboxSlot?.id);\n const mergedListboxRef = useMergedRefs(listboxSlot?.ref, listboxRef);\n const listbox: typeof listboxSlot = listboxSlot && {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n ref: mergedListboxRef,\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 /*\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 const listboxOnClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n triggerRef.current?.focus();\n }, listbox?.onClick),\n );\n\n const listboxOnMouseOver = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n setFocusVisible(false);\n }, listbox?.onMouseOver),\n );\n\n const { targetDocument } = useFluent_unstable();\n const documentOnMouseUp = useEventCallback((ev: MouseEvent) => {\n if (!listboxRef.current?.contains(ev.target as HTMLElement)) {\n setOpen(ev as unknown as React.MouseEvent<HTMLElement>, false);\n }\n targetDocument?.removeEventListener('mouseup', documentOnMouseUp);\n });\n\n const listboxOnMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n ignoreNextBlur.current = true;\n targetDocument?.addEventListener('mouseup', documentOnMouseUp);\n }, listbox?.onMouseDown),\n );\n\n const listboxOnMouseUp = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n // some listbox clicks don't blur the input (e.g. clicking a scrollbar)\n // this ensures future blurs that occur after the click aren't ignored\n ignoreNextBlur.current = false;\n }, listbox?.onMouseUp),\n );\n\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n listbox.onClick = listboxOnClick;\n listbox.onMouseOver = listboxOnMouseOver;\n listbox.onMouseDown = listboxOnMouseDown;\n listbox.onMouseUp = listboxOnMouseUp;\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 !multiselect && 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"],"names":["React","useFluent_unstable","mergeCallbacks","useId","useEventCallback","useMergedRefs","getDropdownActionFromKey","getIndexFromAction","useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","useRef","listboxRef","listboxId","id","mergedListboxRef","listbox","tabIndex","undefined","trigger","role","listboxOnClick","event","current","focus","onClick","listboxOnMouseOver","onMouseOver","targetDocument","documentOnMouseUp","ev","contains","target","removeEventListener","listboxOnMouseDown","addEventListener","onMouseDown","listboxOnMouseUp","onMouseUp","onBlur","onFocus","onKeyDown","action","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,cAAc,EAAEC,KAAK,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEnG,SAASC,wBAAwB,EAAEC,kBAAkB,QAAQ,8BAA8B;AAmB3F;;;;CAIC,GACD,OAAO,SAASC,uBACdC,KAAwB,EACxBC,KAAwB,EACxBC,GAAoD,EACpDC,WAAgF,EAChFC,WAAoD;IAKpD,MAAM,EAAEC,WAAW,EAAE,GAAGL;IACxB,MAAM,EACJM,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,gBAAgB,EAChBC,cAAc,EACdC,IAAI,EACJC,YAAY,EACZC,eAAe,EACfC,eAAe,EACfC,WAAW,EACXC,OAAO,EACR,GAAGf;IAEJ,4BAA4B;IAC5B,MAAMgB,aAAyB1B,MAAM2B,MAAM,CAAC;IAC5C,MAAMC,aAAqD5B,MAAM2B,MAAM,CAAC;IAExE,kCAAkC;IAClC,MAAME,YAAY1B,MAAM,kBAAkBU,wBAAAA,kCAAAA,YAAaiB,EAAE;IACzD,MAAMC,mBAAmB1B,cAAcQ,wBAAAA,kCAAAA,YAAaF,GAAG,EAAEiB;IACzD,MAAMI,UAA8BnB,eAAe;QACjDiB,IAAID;QACJf;QACAmB,UAAUC;QACV,GAAGrB,WAAW;QACdF,KAAKoB;IACP;IAEA,kCAAkC;IAClC,MAAMI,UAA8B;QAClC,iBAAiBf;QACjB,yBAAyBA,OAAOL,yBAAAA,mCAAAA,aAAce,EAAE,GAAGI;QACnDE,MAAM;QACN,GAAGxB,WAAW;QACd,yEAAyE;QACzE,iFAAiF;QACjF,4EAA4E;QAC5ED,KAAKN,cAAcM,KAAKC,wBAAAA,kCAAAA,YAAaD,GAAG,EAAEe;IAC5C;IAEA;;;;GAIC,GACD,MAAMW,iBAAiBjC,iBACrBF,eAAe,CAACoC;YACdZ;SAAAA,sBAAAA,WAAWa,OAAO,cAAlBb,0CAAAA,oBAAoBc,KAAK;IAC3B,GAAGR,oBAAAA,8BAAAA,QAASS,OAAO;IAGrB,MAAMC,qBAAqBtC,iBACzBF,eAAe,CAACoC;QACdf,gBAAgB;IAClB,GAAGS,oBAAAA,8BAAAA,QAASW,WAAW;IAGzB,MAAM,EAAEC,cAAc,EAAE,GAAG3C;IAC3B,MAAM4C,oBAAoBzC,iBAAiB,CAAC0C;YACrClB;QAAL,IAAI,GAACA,sBAAAA,WAAWW,OAAO,cAAlBX,0CAAAA,oBAAoBmB,QAAQ,CAACD,GAAGE,MAAM,IAAkB;YAC3DvB,QAAQqB,IAAgD;QAC1D;QACAF,2BAAAA,qCAAAA,eAAgBK,mBAAmB,CAAC,WAAWJ;IACjD;IAEA,MAAMK,qBAAqB9C,iBACzBF,eAAe,CAACoC;QACdnB,eAAeoB,OAAO,GAAG;QACzBK,2BAAAA,qCAAAA,eAAgBO,gBAAgB,CAAC,WAAWN;IAC9C,GAAGb,oBAAAA,8BAAAA,QAASoB,WAAW;IAGzB,MAAMC,mBAAmBjD,iBACvBF,eAAe,CAACoC;QACd,uEAAuE;QACvE,sEAAsE;QACtEnB,eAAeoB,OAAO,GAAG;IAC3B,GAAGP,oBAAAA,8BAAAA,QAASsB,SAAS;IAGvB,4DAA4D;IAC5D,IAAItB,SAAS;QACXA,QAAQS,OAAO,GAAGJ;QAClBL,QAAQW,WAAW,GAAGD;QACtBV,QAAQoB,WAAW,GAAGF;QACtBlB,QAAQsB,SAAS,GAAGD;IACtB;IAEA,2DAA2D;IAC3DlB,QAAQoB,MAAM,GAAGrD,eAAe,CAACoC;QAC/B,IAAI,CAACnB,eAAeoB,OAAO,EAAE;YAC3Bd,QAAQa,OAAO;QACjB;QAEAnB,eAAeoB,OAAO,GAAG;QAEzBf,YAAY;IACd,GAAGW,QAAQoB,MAAM;IAEjBpB,QAAQM,OAAO,GAAGvC,eAChB,CAACoC;QACCb,QAAQa,OAAO,CAAClB;IAClB,GACAe,QAAQM,OAAO;IAGjBN,QAAQqB,OAAO,GAAGtD,eAChB,CAACoC;QACCd,YAAY;IACd,GACAW,QAAQqB,OAAO;IAGjB,uCAAuC;IACvCrB,QAAQsB,SAAS,GAAGvD,eAClB,CAACoC;QACC,MAAMoB,SAASpD,yBAAyBgC,OAAO;YAAElB;YAAMN;QAAY;QACnE,MAAM6C,WAAW3C,aAAa;QAC9B,MAAM4C,cAAc7C,eAAeE,aAAaF,aAAae,EAAE,IAAI,CAAC;QACpE,IAAI+B,WAAWD;QAEf,OAAQF;YACN,KAAK;gBACHpB,MAAMwB,cAAc;gBACpBvC,gBAAgB;gBAChBE,QAAQa,OAAO;gBACf;YACF,KAAK;gBACH,wEAAwE;gBACxEA,MAAMyB,eAAe;gBACrBzB,MAAMwB,cAAc;gBACpBrC,QAAQa,OAAO;gBACf;YACF,KAAK;gBACH,CAACxB,eAAe,EAACC,yBAAAA,mCAAAA,aAAciD,QAAQ,KAAIvC,QAAQa,OAAO;YAC5D,cAAc;YACd,KAAK;gBACHvB,gBAAgBM,aAAaiB,OAAOvB;gBACpCuB,MAAMwB,cAAc;gBACpB;YACF,KAAK;gBACH,CAAChD,eAAeC,gBAAgBM,aAAaiB,OAAOvB;gBACpD;YACF;gBACE8C,WAAWtD,mBAAmBmD,QAAQE,aAAaD;QACvD;QACA,IAAIE,aAAaD,aAAa;YAC5B,mEAAmE;YACnEtB,MAAMwB,cAAc;YACpBxC,gBAAgBJ,iBAAiB2C;YACjCtC,gBAAgB;QAClB;IACF,GACAY,QAAQsB,SAAS;IAGnBtB,QAAQQ,WAAW,GAAGzC,eACpB,CAACoC;QACCf,gBAAgB;IAClB,GACAY,QAAQQ,WAAW;IAGrB,OAAO;QAACR;QAASH;KAAQ;AAC3B"}
@@ -1,140 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "useTriggerListboxSlots", {
6
- enumerable: true,
7
- get: function() {
8
- return useTriggerListboxSlots;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
14
- const _reactutilities = require("@fluentui/react-utilities");
15
- const _dropdownKeyActions = require("../utils/dropdownKeyActions");
16
- function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {
17
- const { multiselect } = props;
18
- const { activeOption, getCount, getIndexOfId, getOptionAtIndex, ignoreNextBlur, open, selectOption, setActiveOption, setFocusVisible, setHasFocus, setOpen } = state;
19
- // handle trigger focus/blur
20
- const triggerRef = _react.useRef(null);
21
- const listboxRef = _react.useRef(null);
22
- // resolve listbox shorthand props
23
- const listboxId = (0, _reactutilities.useId)('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);
24
- const mergedListboxRef = (0, _reactutilities.useMergedRefs)(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, listboxRef);
25
- const listbox = listboxSlot && {
26
- id: listboxId,
27
- multiselect,
28
- tabIndex: undefined,
29
- ...listboxSlot,
30
- ref: mergedListboxRef
31
- };
32
- // resolve trigger shorthand props
33
- const trigger = {
34
- 'aria-expanded': open,
35
- 'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : activeOption.id : undefined,
36
- role: 'combobox',
37
- ...triggerSlot,
38
- // explicitly type the ref as an intersection here to prevent type errors
39
- // since the `children` prop has mutually incompatible types between input/button
40
- // functionally both ref and triggerRef will always be the same element type
41
- ref: (0, _reactutilities.useMergedRefs)(ref, triggerSlot === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)
42
- };
43
- /*
44
- * Handle focus when clicking the listbox popup:
45
- * 1. Move focus back to the button/input when the listbox is clicked (otherwise it goes to body)
46
- * 2. Do not close the listbox on button/input blur when clicking into the listbox
47
- */ const listboxOnClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((event)=>{
48
- var _triggerRef_current;
49
- (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
50
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));
51
- const listboxOnMouseOver = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((event)=>{
52
- setFocusVisible(false);
53
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));
54
- const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
55
- const documentOnMouseUp = (0, _reactutilities.useEventCallback)((ev)=>{
56
- var _listboxRef_current;
57
- if (!((_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.contains(ev.target))) {
58
- setOpen(ev, false);
59
- }
60
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', documentOnMouseUp);
61
- });
62
- const listboxOnMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((event)=>{
63
- ignoreNextBlur.current = true;
64
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', documentOnMouseUp);
65
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));
66
- const listboxOnMouseUp = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((event)=>{
67
- // some listbox clicks don't blur the input (e.g. clicking a scrollbar)
68
- // this ensures future blurs that occur after the click aren't ignored
69
- ignoreNextBlur.current = false;
70
- }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseUp));
71
- // listbox is nullable, only add event handlers if it exists
72
- if (listbox) {
73
- listbox.onClick = listboxOnClick;
74
- listbox.onMouseOver = listboxOnMouseOver;
75
- listbox.onMouseDown = listboxOnMouseDown;
76
- listbox.onMouseUp = listboxOnMouseUp;
77
- }
78
- // the trigger should open/close the popup on click or blur
79
- trigger.onBlur = (0, _reactutilities.mergeCallbacks)((event)=>{
80
- if (!ignoreNextBlur.current) {
81
- setOpen(event, false);
82
- }
83
- ignoreNextBlur.current = false;
84
- setHasFocus(false);
85
- }, trigger.onBlur);
86
- trigger.onClick = (0, _reactutilities.mergeCallbacks)((event)=>{
87
- setOpen(event, !open);
88
- }, trigger.onClick);
89
- trigger.onFocus = (0, _reactutilities.mergeCallbacks)((event)=>{
90
- setHasFocus(true);
91
- }, trigger.onFocus);
92
- // handle combobox keyboard interaction
93
- trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)((event)=>{
94
- const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
95
- open,
96
- multiselect
97
- });
98
- const maxIndex = getCount() - 1;
99
- const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
100
- let newIndex = activeIndex;
101
- switch(action){
102
- case 'Open':
103
- event.preventDefault();
104
- setFocusVisible(true);
105
- setOpen(event, true);
106
- break;
107
- case 'Close':
108
- // stop propagation for escape key to avoid dismissing any parent popups
109
- event.stopPropagation();
110
- event.preventDefault();
111
- setOpen(event, false);
112
- break;
113
- case 'CloseSelect':
114
- !multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);
115
- // fallthrough
116
- case 'Select':
117
- activeOption && selectOption(event, activeOption);
118
- event.preventDefault();
119
- break;
120
- case 'Tab':
121
- !multiselect && activeOption && selectOption(event, activeOption);
122
- break;
123
- default:
124
- newIndex = (0, _dropdownKeyActions.getIndexFromAction)(action, activeIndex, maxIndex);
125
- }
126
- if (newIndex !== activeIndex) {
127
- // prevent default page scroll/keyboard action if the index changed
128
- event.preventDefault();
129
- setActiveOption(getOptionAtIndex(newIndex));
130
- setFocusVisible(true);
131
- }
132
- }, trigger.onKeyDown);
133
- trigger.onMouseOver = (0, _reactutilities.mergeCallbacks)((event)=>{
134
- setFocusVisible(false);
135
- }, trigger.onMouseOver);
136
- return [
137
- trigger,
138
- listbox
139
- ];
140
- }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["useTriggerListboxSlots.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';\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 */ export function useTriggerListboxSlots(props, state, ref, triggerSlot, listboxSlot) {\n const { multiselect } = props;\n const { activeOption, getCount, getIndexOfId, getOptionAtIndex, ignoreNextBlur, open, selectOption, setActiveOption, setFocusVisible, setHasFocus, setOpen } = state;\n // handle trigger focus/blur\n const triggerRef = React.useRef(null);\n const listboxRef = React.useRef(null);\n // resolve listbox shorthand props\n const listboxId = useId('fluent-listbox', listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id);\n const mergedListboxRef = useMergedRefs(listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.ref, listboxRef);\n const listbox = listboxSlot && {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...listboxSlot,\n ref: mergedListboxRef\n };\n // resolve trigger shorthand props\n const trigger = {\n 'aria-expanded': open,\n 'aria-activedescendant': open ? activeOption === null || activeOption === void 0 ? void 0 : 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 === null || triggerSlot === void 0 ? void 0 : triggerSlot.ref, triggerRef)\n };\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 */ const listboxOnClick = useEventCallback(mergeCallbacks((event)=>{\n var _triggerRef_current;\n (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n }, listbox === null || listbox === void 0 ? void 0 : listbox.onClick));\n const listboxOnMouseOver = useEventCallback(mergeCallbacks((event)=>{\n setFocusVisible(false);\n }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseOver));\n const { targetDocument } = useFluent_unstable();\n const documentOnMouseUp = useEventCallback((ev)=>{\n var _listboxRef_current;\n if (!((_listboxRef_current = listboxRef.current) === null || _listboxRef_current === void 0 ? void 0 : _listboxRef_current.contains(ev.target))) {\n setOpen(ev, false);\n }\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', documentOnMouseUp);\n });\n const listboxOnMouseDown = useEventCallback(mergeCallbacks((event)=>{\n ignoreNextBlur.current = true;\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', documentOnMouseUp);\n }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseDown));\n const listboxOnMouseUp = useEventCallback(mergeCallbacks((event)=>{\n // some listbox clicks don't blur the input (e.g. clicking a scrollbar)\n // this ensures future blurs that occur after the click aren't ignored\n ignoreNextBlur.current = false;\n }, listbox === null || listbox === void 0 ? void 0 : listbox.onMouseUp));\n // listbox is nullable, only add event handlers if it exists\n if (listbox) {\n listbox.onClick = listboxOnClick;\n listbox.onMouseOver = listboxOnMouseOver;\n listbox.onMouseDown = listboxOnMouseDown;\n listbox.onMouseUp = listboxOnMouseUp;\n }\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event)=>{\n if (!ignoreNextBlur.current) {\n setOpen(event, false);\n }\n ignoreNextBlur.current = false;\n setHasFocus(false);\n }, trigger.onBlur);\n trigger.onClick = mergeCallbacks((event)=>{\n setOpen(event, !open);\n }, trigger.onClick);\n trigger.onFocus = mergeCallbacks((event)=>{\n setHasFocus(true);\n }, trigger.onFocus);\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks((event)=>{\n const action = getDropdownActionFromKey(event, {\n open,\n multiselect\n });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\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 === null || activeOption === void 0 ? void 0 : activeOption.disabled) && setOpen(event, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(event, activeOption);\n event.preventDefault();\n break;\n case 'Tab':\n !multiselect && 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 }, trigger.onKeyDown);\n trigger.onMouseOver = mergeCallbacks((event)=>{\n setFocusVisible(false);\n }, trigger.onMouseOver);\n return [\n trigger,\n listbox\n ];\n}\n"],"names":["useTriggerListboxSlots","props","state","ref","triggerSlot","listboxSlot","multiselect","activeOption","getCount","getIndexOfId","getOptionAtIndex","ignoreNextBlur","open","selectOption","setActiveOption","setFocusVisible","setHasFocus","setOpen","triggerRef","React","useRef","listboxRef","listboxId","useId","id","mergedListboxRef","useMergedRefs","listbox","tabIndex","undefined","trigger","role","listboxOnClick","useEventCallback","mergeCallbacks","event","_triggerRef_current","current","focus","onClick","listboxOnMouseOver","onMouseOver","targetDocument","useFluent_unstable","documentOnMouseUp","ev","_listboxRef_current","contains","target","removeEventListener","listboxOnMouseDown","addEventListener","onMouseDown","listboxOnMouseUp","onMouseUp","onBlur","onFocus","onKeyDown","action","getDropdownActionFromKey","maxIndex","activeIndex","newIndex","preventDefault","stopPropagation","disabled","getIndexFromAction"],"mappings":"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"}