@fluentui-copilot/react-prompt-listbox 0.9.0 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +15 -0
- package/CHANGELOG.md +10 -1
- package/dist/index.d.ts +0 -252
- package/lib/components/utils/useListboxPositioning.js.map +1 -1
- package/lib/index.js +0 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/utils/useListboxPositioning.js.map +1 -1
- package/lib-commonjs/index.js +0 -36
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -6
- package/lib/PromptListbox.js +0 -2
- package/lib/PromptListbox.js.map +0 -1
- package/lib/PromptOption.js +0 -2
- package/lib/PromptOption.js.map +0 -1
- package/lib/components/PromptListbox/PromptListbox.js +0 -14
- package/lib/components/PromptListbox/PromptListbox.js.map +0 -1
- package/lib/components/PromptListbox/PromptListbox.types.js +0 -2
- package/lib/components/PromptListbox/PromptListbox.types.js.map +0 -1
- package/lib/components/PromptListbox/index.js +0 -5
- package/lib/components/PromptListbox/index.js.map +0 -1
- package/lib/components/PromptListbox/renderPromptListbox.js +0 -26
- package/lib/components/PromptListbox/renderPromptListbox.js.map +0 -1
- package/lib/components/PromptListbox/usePromptListbox.js +0 -82
- package/lib/components/PromptListbox/usePromptListbox.js.map +0 -1
- package/lib/components/PromptListbox/usePromptListboxContextValues.js +0 -33
- package/lib/components/PromptListbox/usePromptListboxContextValues.js.map +0 -1
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.js +0 -41
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.js.map +0 -1
- package/lib/components/PromptOption/PromptOption.js +0 -12
- package/lib/components/PromptOption/PromptOption.js.map +0 -1
- package/lib/components/PromptOption/PromptOption.types.js +0 -4
- package/lib/components/PromptOption/PromptOption.types.js.map +0 -1
- package/lib/components/PromptOption/index.js +0 -5
- package/lib/components/PromptOption/index.js.map +0 -1
- package/lib/components/PromptOption/renderPromptOption.js +0 -10
- package/lib/components/PromptOption/renderPromptOption.js.map +0 -1
- package/lib/components/PromptOption/usePromptOption.js +0 -101
- package/lib/components/PromptOption/usePromptOption.js.map +0 -1
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js +0 -98
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js.map +0 -1
- package/lib/components/utils/OptionCollection.types.js +0 -3
- package/lib/components/utils/OptionCollection.types.js.map +0 -1
- package/lib/components/utils/PromptListboxFunctionality.types.js +0 -2
- package/lib/components/utils/PromptListboxFunctionality.types.js.map +0 -1
- package/lib/components/utils/Selection.types.js +0 -3
- package/lib/components/utils/Selection.types.js.map +0 -1
- package/lib/components/utils/dropdownKeyActions.js +0 -68
- package/lib/components/utils/dropdownKeyActions.js.map +0 -1
- package/lib/components/utils/useOptionCollection.js +0 -39
- package/lib/components/utils/useOptionCollection.js.map +0 -1
- package/lib/components/utils/usePromptListboxFunctionality.js +0 -143
- package/lib/components/utils/usePromptListboxFunctionality.js.map +0 -1
- package/lib/components/utils/useSelection.js +0 -54
- package/lib/components/utils/useSelection.js.map +0 -1
- package/lib/components/utils/useTriggerKeyDown.js +0 -149
- package/lib/components/utils/useTriggerKeyDown.js.map +0 -1
- package/lib-commonjs/PromptListbox.js +0 -29
- package/lib-commonjs/PromptListbox.js.map +0 -1
- package/lib-commonjs/PromptOption.js +0 -29
- package/lib-commonjs/PromptOption.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/PromptListbox.js +0 -23
- package/lib-commonjs/components/PromptListbox/PromptListbox.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/PromptListbox.types.js +0 -5
- package/lib-commonjs/components/PromptListbox/PromptListbox.types.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/index.js +0 -32
- package/lib-commonjs/components/PromptListbox/index.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/renderPromptListbox.js +0 -30
- package/lib-commonjs/components/PromptListbox/renderPromptListbox.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/usePromptListbox.js +0 -69
- package/lib-commonjs/components/PromptListbox/usePromptListbox.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/usePromptListboxContextValues.js +0 -36
- package/lib-commonjs/components/PromptListbox/usePromptListboxContextValues.js.map +0 -1
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js +0 -62
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js.map +0 -1
- package/lib-commonjs/components/PromptOption/PromptOption.js +0 -21
- package/lib-commonjs/components/PromptOption/PromptOption.js.map +0 -1
- package/lib-commonjs/components/PromptOption/PromptOption.types.js +0 -7
- package/lib-commonjs/components/PromptOption/PromptOption.types.js.map +0 -1
- package/lib-commonjs/components/PromptOption/index.js +0 -32
- package/lib-commonjs/components/PromptOption/index.js.map +0 -1
- package/lib-commonjs/components/PromptOption/renderPromptOption.js +0 -16
- package/lib-commonjs/components/PromptOption/renderPromptOption.js.map +0 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js +0 -103
- package/lib-commonjs/components/PromptOption/usePromptOption.js.map +0 -1
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js +0 -188
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js.map +0 -1
- package/lib-commonjs/components/utils/OptionCollection.types.js +0 -6
- package/lib-commonjs/components/utils/OptionCollection.types.js.map +0 -1
- package/lib-commonjs/components/utils/PromptListboxFunctionality.types.js +0 -5
- package/lib-commonjs/components/utils/PromptListboxFunctionality.types.js.map +0 -1
- package/lib-commonjs/components/utils/Selection.types.js +0 -6
- package/lib-commonjs/components/utils/Selection.types.js.map +0 -1
- package/lib-commonjs/components/utils/dropdownKeyActions.js +0 -66
- package/lib-commonjs/components/utils/dropdownKeyActions.js.map +0 -1
- package/lib-commonjs/components/utils/useOptionCollection.js +0 -46
- package/lib-commonjs/components/utils/useOptionCollection.js.map +0 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js +0 -150
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +0 -1
- package/lib-commonjs/components/utils/useSelection.js +0 -72
- package/lib-commonjs/components/utils/useSelection.js.map +0 -1
- package/lib-commonjs/components/utils/useTriggerKeyDown.js +0 -151
- package/lib-commonjs/components/utils/useTriggerKeyDown.js.map +0 -1
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
// Brought from Fluent UI
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
/**
|
|
4
|
-
* A hook for managing a collection of child Options
|
|
5
|
-
*/
|
|
6
|
-
export const useOptionCollection = () => {
|
|
7
|
-
const optionsById = React.useRef(new Map());
|
|
8
|
-
const collectionAPI = React.useMemo(() => {
|
|
9
|
-
const getCount = () => optionsById.current.size;
|
|
10
|
-
// index searches are no longer used
|
|
11
|
-
const getOptionById = id => {
|
|
12
|
-
return optionsById.current.get(id);
|
|
13
|
-
};
|
|
14
|
-
const getOptionsMatchingValue = matcher => {
|
|
15
|
-
const matches = [];
|
|
16
|
-
for (const option of optionsById.current.values()) {
|
|
17
|
-
if (matcher(option.value)) {
|
|
18
|
-
matches.push(option);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return matches;
|
|
22
|
-
};
|
|
23
|
-
return {
|
|
24
|
-
getCount,
|
|
25
|
-
getOptionById,
|
|
26
|
-
getOptionsMatchingValue
|
|
27
|
-
};
|
|
28
|
-
}, []);
|
|
29
|
-
const registerOption = React.useCallback(option => {
|
|
30
|
-
optionsById.current.set(option.id, option);
|
|
31
|
-
return () => optionsById.current.delete(option.id);
|
|
32
|
-
}, []);
|
|
33
|
-
return {
|
|
34
|
-
...collectionAPI,
|
|
35
|
-
options: Array.from(optionsById.current.values()),
|
|
36
|
-
registerOption
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
//# sourceMappingURL=useOptionCollection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionCollection.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport * 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 optionsById = React.useRef(new Map<string, OptionValue>());\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => optionsById.current.size;\n\n // index searches are no longer used\n\n const getOptionById = (id: string) => {\n return optionsById.current.get(id);\n };\n\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n const matches: OptionValue[] = [];\n for (const option of optionsById.current.values()) {\n if (matcher(option.value)) {\n matches.push(option);\n }\n }\n\n return matches;\n };\n\n return {\n getCount,\n getOptionById,\n getOptionsMatchingValue,\n };\n }, []);\n\n const registerOption = React.useCallback((option: OptionValue) => {\n optionsById.current.set(option.id, option);\n\n return () => optionsById.current.delete(option.id);\n }, []);\n\n return {\n ...collectionAPI,\n options: Array.from(optionsById.current.values()),\n registerOption,\n };\n};\n"],"names":["React","useOptionCollection","optionsById","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionById","id","get","getOptionsMatchingValue","matcher","matches","option","values","value","push","registerOption","useCallback","set","delete","options","Array","from"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB;IACjC,MAAMC,cAAcF,MAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,MAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QAEpC,MAAMC,gBAAgB,CAACC;YACrB,OAAOT,YAAYM,OAAO,CAACI,GAAG,CAACD;QACjC;QAEA,MAAME,0BAA0B,CAACC;YAC/B,MAAMC,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUd,YAAYM,OAAO,CAACS,MAAM,GAAI;gBACjD,IAAIH,QAAQE,OAAOE,KAAK,GAAG;oBACzBH,QAAQI,IAAI,CAACH;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLR;YACAG;YACAG;QACF;IACF,GAAG,EAAE;IAEL,MAAMO,iBAAiBpB,MAAMqB,WAAW,CAAC,CAACL;QACxCd,YAAYM,OAAO,CAACc,GAAG,CAACN,OAAOL,EAAE,EAAEK;QAEnC,OAAO,IAAMd,YAAYM,OAAO,CAACe,MAAM,CAACP,OAAOL,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGN,aAAa;QAChBmB,SAASC,MAAMC,IAAI,CAACxB,YAAYM,OAAO,CAACS,MAAM;QAC9CG;IACF;AACF,EAAE"}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { useActiveDescendant } from '@fluentui/react-aria';
|
|
3
|
-
import { useControllableState, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
|
-
import { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';
|
|
5
|
-
import { useOptionCollection } from './useOptionCollection';
|
|
6
|
-
import { useSelection } from './useSelection';
|
|
7
|
-
import { useListboxPositioning } from './useListboxPositioning';
|
|
8
|
-
import { useTriggerKeydown } from './useTriggerKeyDown';
|
|
9
|
-
import { PromptListbox } from '../PromptListbox';
|
|
10
|
-
import { promptOptionClassNames } from '../PromptOption';
|
|
11
|
-
import { PromptListboxMotion } from '../motion/PromptListboxMotion';
|
|
12
|
-
/**
|
|
13
|
-
* @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
|
|
14
|
-
*/
|
|
15
|
-
export function usePromptListboxFunctionality(params) {
|
|
16
|
-
const {
|
|
17
|
-
positioning,
|
|
18
|
-
onOpenChange,
|
|
19
|
-
onSelectionModeChange,
|
|
20
|
-
listboxProps,
|
|
21
|
-
fluid = false,
|
|
22
|
-
allowArrowUpNavigation = false
|
|
23
|
-
} = params;
|
|
24
|
-
const {
|
|
25
|
-
listboxRef: activeDescendantListboxRef,
|
|
26
|
-
activeParentRef,
|
|
27
|
-
controller: activeDescendantController
|
|
28
|
-
} = useActiveDescendant({
|
|
29
|
-
matchOption: el => el.classList.contains(promptOptionClassNames.root)
|
|
30
|
-
});
|
|
31
|
-
// useMergedRefs to normalize the ref into a React.RefObject type
|
|
32
|
-
const triggerRef = useMergedRefs(activeParentRef);
|
|
33
|
-
const selectionState = useSelection(listboxProps !== null && listboxProps !== void 0 ? listboxProps : {});
|
|
34
|
-
const {
|
|
35
|
-
selectOption
|
|
36
|
-
} = selectionState;
|
|
37
|
-
const optionCollection = useOptionCollection();
|
|
38
|
-
const {
|
|
39
|
-
getOptionById
|
|
40
|
-
} = optionCollection;
|
|
41
|
-
const [cursorPosition, setCursorPosition] = React.useState('end');
|
|
42
|
-
const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
|
|
43
|
-
const [open, setOpen] = useControllableState({
|
|
44
|
-
state: params.open,
|
|
45
|
-
defaultState: params.defaultOpen,
|
|
46
|
-
initialState: false
|
|
47
|
-
});
|
|
48
|
-
const setSelectionMode = React.useCallback(selectionMode => {
|
|
49
|
-
if (selectionMode === false) {
|
|
50
|
-
activeDescendantController.blur();
|
|
51
|
-
setHideActiveDescendant(true);
|
|
52
|
-
} else {
|
|
53
|
-
setHideActiveDescendant(false);
|
|
54
|
-
}
|
|
55
|
-
setIsInSelectionMode(selectionMode);
|
|
56
|
-
onSelectionModeChange === null || onSelectionModeChange === void 0 ? void 0 : onSelectionModeChange(selectionMode);
|
|
57
|
-
}, [activeDescendantController, onSelectionModeChange]);
|
|
58
|
-
const onBlur = event => {
|
|
59
|
-
setOpen(false);
|
|
60
|
-
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
|
|
61
|
-
event,
|
|
62
|
-
type: 'focus',
|
|
63
|
-
open: false
|
|
64
|
-
});
|
|
65
|
-
setSelectionMode(false);
|
|
66
|
-
};
|
|
67
|
-
const onFocus = event => {
|
|
68
|
-
if (event.target === event.currentTarget) {
|
|
69
|
-
setOpen(true);
|
|
70
|
-
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
|
|
71
|
-
event,
|
|
72
|
-
type: 'focus',
|
|
73
|
-
open: true
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
|
|
78
|
-
setCursorPosition: setCursorPosition
|
|
79
|
-
});
|
|
80
|
-
const onListboxBlur = React.useCallback(() => {
|
|
81
|
-
setSelectionMode(false);
|
|
82
|
-
onSelectionModeChange === null || onSelectionModeChange === void 0 ? void 0 : onSelectionModeChange(false);
|
|
83
|
-
}, [onSelectionModeChange, setSelectionMode]);
|
|
84
|
-
// handle combobox keyboard interaction
|
|
85
|
-
const onKeyDown = useTriggerKeydown({
|
|
86
|
-
...optionCollection,
|
|
87
|
-
allowArrowUpNavigation,
|
|
88
|
-
activeDescendantController,
|
|
89
|
-
getOptionById,
|
|
90
|
-
onBlur: onListboxBlur,
|
|
91
|
-
selectOption,
|
|
92
|
-
cursorPosition,
|
|
93
|
-
open,
|
|
94
|
-
multiselect: false,
|
|
95
|
-
isInSelectionMode,
|
|
96
|
-
setSelectionMode
|
|
97
|
-
});
|
|
98
|
-
// NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
|
|
99
|
-
// To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
|
|
100
|
-
// ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
|
|
101
|
-
const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
|
|
102
|
-
React.useEffect(() => {
|
|
103
|
-
if (hideActiveDescendant) {
|
|
104
|
-
var _triggerRef_current;
|
|
105
|
-
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.removeAttribute('aria-activedescendant');
|
|
106
|
-
}
|
|
107
|
-
// We only want to run this when the hideActiveDescendant changes, if the triggerRef
|
|
108
|
-
// is undefined, there's no need to remove theAttribute and we shouldn't be adding
|
|
109
|
-
// refs as dependencies since it can blow up the number of runs.
|
|
110
|
-
// eslint-disable-next-line react-compiler/react-compiler
|
|
111
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
112
|
-
}, [hideActiveDescendant]);
|
|
113
|
-
const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({
|
|
114
|
-
positioning,
|
|
115
|
-
fluid
|
|
116
|
-
});
|
|
117
|
-
const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.ref);
|
|
118
|
-
const listbox = React.useMemo(() => {
|
|
119
|
-
return /*#__PURE__*/React.createElement(PromptListboxMotion, {
|
|
120
|
-
visible: open
|
|
121
|
-
}, /*#__PURE__*/React.createElement(PromptListbox, {
|
|
122
|
-
open: open,
|
|
123
|
-
...listboxProps,
|
|
124
|
-
...optionCollection,
|
|
125
|
-
...selectionState,
|
|
126
|
-
ref: listboxMergedRef,
|
|
127
|
-
activeDescendantController: activeDescendantController
|
|
128
|
-
}));
|
|
129
|
-
}, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);
|
|
130
|
-
return {
|
|
131
|
-
promptListbox: listbox,
|
|
132
|
-
triggerProps: {
|
|
133
|
-
ref: triggerRef,
|
|
134
|
-
onBlur,
|
|
135
|
-
onFocus,
|
|
136
|
-
onKeyDown,
|
|
137
|
-
isInSelectionMode
|
|
138
|
-
},
|
|
139
|
-
containerRef: comboboxTargetRef,
|
|
140
|
-
cursorPositionPlugin
|
|
141
|
-
};
|
|
142
|
-
}
|
|
143
|
-
//# sourceMappingURL=usePromptListboxFunctionality.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\n/**\n * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead\n */\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const {\n positioning,\n onOpenChange,\n onSelectionModeChange,\n listboxProps,\n fluid = false,\n allowArrowUpNavigation = false,\n } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const setSelectionMode = React.useCallback(\n (selectionMode: boolean) => {\n if (selectionMode === false) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n setIsInSelectionMode(selectionMode);\n onSelectionModeChange?.(selectionMode);\n },\n [activeDescendantController, onSelectionModeChange],\n );\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n setSelectionMode(false);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange, setSelectionMode]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n allowArrowUpNavigation,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n cursorPosition,\n open,\n multiselect: false,\n isInSelectionMode,\n setSelectionMode,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListboxMotion visible={open}>\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n </PromptListboxMotion>\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown,\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["React","useActiveDescendant","useControllableState","useMergedRefs","CursorPositionPlugin","useOptionCollection","useSelection","useListboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","PromptListboxMotion","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","allowArrowUpNavigation","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","cursorPosition","setCursorPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","setSelectionMode","useCallback","selectionMode","blur","setHideActiveDescendant","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","onKeyDown","multiselect","hideActiveDescendant","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","visible","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
// Brought from Fluent UI
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
|
-
import { useControllableState } from '@fluentui/react-utilities';
|
|
4
|
-
export const useSelection = props => {
|
|
5
|
-
const {
|
|
6
|
-
defaultSelectedOptions,
|
|
7
|
-
multiselect,
|
|
8
|
-
onOptionSelect
|
|
9
|
-
} = props;
|
|
10
|
-
const [selectedOptions, setSelectedOptions] = useControllableState({
|
|
11
|
-
state: props.selectedOptions,
|
|
12
|
-
defaultState: defaultSelectedOptions,
|
|
13
|
-
initialState: []
|
|
14
|
-
});
|
|
15
|
-
const selectOption = useCallback((event, option) => {
|
|
16
|
-
// if the option is disabled, do nothing
|
|
17
|
-
if (option.disabled) {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
|
-
// for single-select, always return the selected option
|
|
21
|
-
let newSelection = [option.value];
|
|
22
|
-
// toggle selected state of the option for multiselect
|
|
23
|
-
if (multiselect) {
|
|
24
|
-
const selectedIndex = selectedOptions.findIndex(o => o === option.value);
|
|
25
|
-
if (selectedIndex > -1) {
|
|
26
|
-
// deselect option
|
|
27
|
-
newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
|
|
28
|
-
} else {
|
|
29
|
-
// select option
|
|
30
|
-
newSelection = [...selectedOptions, option.value];
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
setSelectedOptions(newSelection);
|
|
34
|
-
onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
|
|
35
|
-
optionValue: option.value,
|
|
36
|
-
optionText: option.text,
|
|
37
|
-
selectedOptions: newSelection
|
|
38
|
-
});
|
|
39
|
-
}, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
|
|
40
|
-
const clearSelection = event => {
|
|
41
|
-
setSelectedOptions([]);
|
|
42
|
-
onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
|
|
43
|
-
optionValue: undefined,
|
|
44
|
-
optionText: undefined,
|
|
45
|
-
selectedOptions: []
|
|
46
|
-
});
|
|
47
|
-
};
|
|
48
|
-
return {
|
|
49
|
-
clearSelection,
|
|
50
|
-
selectOption,
|
|
51
|
-
selectedOptions
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
//# sourceMappingURL=useSelection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useSelection.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { OptionValue } from './OptionCollection.types';\nimport type { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\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 = useCallback(\n (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, optionText: option.text, selectedOptions: newSelection });\n },\n [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n );\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,WAAW,QAAQ,QAAQ;AACpC,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,YACnB,CAACa,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIZ,aAAa;YACf,MAAMa,gBAAgBX,gBAAgBY,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIT,gBAAgBc,KAAK,CAAC,GAAGH;uBAAmBX,gBAAgBc,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIT;oBAAiBO,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAT,mBAAmBQ;QACnBV,2BAAAA,qCAAAA,eAAiBO,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEjB,iBAAiBS;QAAa;IAC9G,GACA;QAACV;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMiB,iBAAiB,CAACZ;QACtBL,mBAAmB,EAAE;QACrBF,2BAAAA,qCAAAA,eAAiBO,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWnB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEkB;QAAgBb;QAAcL;IAAgB;AACzD,EAAE"}
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Note, this is mainly brought from Fluent UI, only removed the closing and
|
|
3
|
-
* opening logic since that's not needed for this use case and added the bluring
|
|
4
|
-
* functionality.
|
|
5
|
-
*/import * as React from 'react';
|
|
6
|
-
import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
|
|
7
|
-
import { useEventCallback } from '@fluentui/react-utilities';
|
|
8
|
-
import { getDropdownActionFromKey } from './dropdownKeyActions';
|
|
9
|
-
import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
|
|
10
|
-
export function useTriggerKeydown(options) {
|
|
11
|
-
const {
|
|
12
|
-
activeDescendantController,
|
|
13
|
-
getOptionById,
|
|
14
|
-
selectOption,
|
|
15
|
-
multiselect,
|
|
16
|
-
open,
|
|
17
|
-
cursorPosition,
|
|
18
|
-
onBlur,
|
|
19
|
-
allowArrowUpNavigation,
|
|
20
|
-
isInSelectionMode,
|
|
21
|
-
setSelectionMode
|
|
22
|
-
} = options;
|
|
23
|
-
const getActiveOption = React.useCallback(() => {
|
|
24
|
-
const activeOptionId = activeDescendantController.active();
|
|
25
|
-
return activeOptionId ? getOptionById(activeOptionId) : undefined;
|
|
26
|
-
}, [activeDescendantController, getOptionById]);
|
|
27
|
-
const first = () => {
|
|
28
|
-
activeDescendantController.first();
|
|
29
|
-
};
|
|
30
|
-
const last = () => {
|
|
31
|
-
activeDescendantController.last();
|
|
32
|
-
};
|
|
33
|
-
const blur = () => {
|
|
34
|
-
activeDescendantController.blur();
|
|
35
|
-
onBlur();
|
|
36
|
-
};
|
|
37
|
-
const next = activeOption => {
|
|
38
|
-
if (activeOption) {
|
|
39
|
-
activeDescendantController.next();
|
|
40
|
-
} else {
|
|
41
|
-
activeDescendantController.first();
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
const previous = activeOption => {
|
|
45
|
-
if (activeOption) {
|
|
46
|
-
activeDescendantController.prev();
|
|
47
|
-
} else {
|
|
48
|
-
activeDescendantController.first();
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
const pageUp = () => {
|
|
52
|
-
for (let i = 0; i < 10; i++) {
|
|
53
|
-
activeDescendantController.prev();
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const pageDown = () => {
|
|
57
|
-
for (let i = 0; i < 10; i++) {
|
|
58
|
-
activeDescendantController.next();
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const setKeyboardNavigation = useSetKeyboardNavigation();
|
|
62
|
-
return useEventCallback(e => {
|
|
63
|
-
const action = getDropdownActionFromKey(e, {
|
|
64
|
-
open,
|
|
65
|
-
multiselect,
|
|
66
|
-
cursorPosition,
|
|
67
|
-
allowArrowUpNavigation,
|
|
68
|
-
isInSelectionMode
|
|
69
|
-
});
|
|
70
|
-
const activeOption = getActiveOption();
|
|
71
|
-
const firstOption = activeDescendantController.first({
|
|
72
|
-
passive: true
|
|
73
|
-
});
|
|
74
|
-
if (e.key === ArrowLeft || e.key === ArrowRight || action === 'Type') {
|
|
75
|
-
setSelectionMode(false);
|
|
76
|
-
} else if (action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
|
|
77
|
-
setSelectionMode(true);
|
|
78
|
-
}
|
|
79
|
-
switch (action) {
|
|
80
|
-
case 'Last':
|
|
81
|
-
case 'First':
|
|
82
|
-
case 'PageDown':
|
|
83
|
-
case 'PageUp':
|
|
84
|
-
case 'CloseSelect':
|
|
85
|
-
case 'Select':
|
|
86
|
-
e.preventDefault();
|
|
87
|
-
break;
|
|
88
|
-
case 'Previous':
|
|
89
|
-
e.preventDefault();
|
|
90
|
-
break;
|
|
91
|
-
case 'Next':
|
|
92
|
-
e.preventDefault();
|
|
93
|
-
break;
|
|
94
|
-
}
|
|
95
|
-
setKeyboardNavigation(true);
|
|
96
|
-
switch (action) {
|
|
97
|
-
case 'First':
|
|
98
|
-
first();
|
|
99
|
-
if (!isInSelectionMode) {
|
|
100
|
-
setSelectionMode(true);
|
|
101
|
-
}
|
|
102
|
-
break;
|
|
103
|
-
case 'Last':
|
|
104
|
-
last();
|
|
105
|
-
if (!isInSelectionMode) {
|
|
106
|
-
setSelectionMode(true);
|
|
107
|
-
}
|
|
108
|
-
break;
|
|
109
|
-
case 'Next':
|
|
110
|
-
next(activeOption);
|
|
111
|
-
if (!isInSelectionMode) {
|
|
112
|
-
setSelectionMode(true);
|
|
113
|
-
}
|
|
114
|
-
break;
|
|
115
|
-
case 'Previous':
|
|
116
|
-
// when active option is the first option and the action was "Previous",
|
|
117
|
-
// this means we were in the first option and we are "leaving" the listbox
|
|
118
|
-
if (activeOption && activeOption.id !== firstOption) {
|
|
119
|
-
previous(activeOption);
|
|
120
|
-
if (!isInSelectionMode) {
|
|
121
|
-
setSelectionMode(true);
|
|
122
|
-
}
|
|
123
|
-
} else {
|
|
124
|
-
blur();
|
|
125
|
-
setSelectionMode(false);
|
|
126
|
-
}
|
|
127
|
-
break;
|
|
128
|
-
case 'PageDown':
|
|
129
|
-
pageDown();
|
|
130
|
-
break;
|
|
131
|
-
case 'PageUp':
|
|
132
|
-
pageUp();
|
|
133
|
-
break;
|
|
134
|
-
case 'CloseSelect':
|
|
135
|
-
if (!multiselect && !(activeOption === null || activeOption === void 0 ? void 0 : activeOption.disabled)) {
|
|
136
|
-
blur();
|
|
137
|
-
setSelectionMode(false);
|
|
138
|
-
}
|
|
139
|
-
// fallthrough
|
|
140
|
-
case 'Select':
|
|
141
|
-
activeOption && selectOption(e, activeOption);
|
|
142
|
-
break;
|
|
143
|
-
case 'Tab':
|
|
144
|
-
!multiselect && activeOption && selectOption(e, activeOption);
|
|
145
|
-
break;
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
//# sourceMappingURL=useTriggerKeyDown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useTriggerKeyDown.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case and added the bluring\n * functionality.\n */\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\nimport type { SelectionProps, SelectionState } from './Selection.types';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\n\nexport function useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n cursorPosition: CursorPosition;\n open: boolean;\n onBlur: () => void;\n allowArrowUpNavigation: boolean;\n isInSelectionMode: boolean;\n setSelectionMode: (selectionMode: boolean) => void;\n } & OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n Pick<SelectionState, 'selectOption'>,\n) {\n const {\n activeDescendantController,\n getOptionById,\n selectOption,\n multiselect,\n open,\n cursorPosition,\n onBlur,\n allowArrowUpNavigation,\n isInSelectionMode,\n setSelectionMode,\n } = 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 blur = () => {\n activeDescendantController.blur();\n onBlur();\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<HTMLSpanElement>) => {\n const action = getDropdownActionFromKey(e, {\n open,\n multiselect,\n cursorPosition,\n allowArrowUpNavigation,\n isInSelectionMode,\n });\n const activeOption = getActiveOption();\n const firstOption = activeDescendantController.first({ passive: true });\n\n if (e.key === ArrowLeft || e.key === ArrowRight || action === 'Type') {\n setSelectionMode(false);\n } else if (\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n setSelectionMode(true);\n }\n\n switch (action) {\n case 'Last':\n case 'First':\n case 'PageDown':\n case 'PageUp':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n case 'Previous':\n e.preventDefault();\n break;\n case 'Next':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n if (!isInSelectionMode) {\n setSelectionMode(true);\n }\n break;\n case 'Last':\n last();\n if (!isInSelectionMode) {\n setSelectionMode(true);\n }\n break;\n case 'Next':\n next(activeOption);\n if (!isInSelectionMode) {\n setSelectionMode(true);\n }\n break;\n case 'Previous':\n // when active option is the first option and the action was \"Previous\",\n // this means we were in the first option and we are \"leaving\" the listbox\n if (activeOption && activeOption.id !== firstOption) {\n previous(activeOption);\n if (!isInSelectionMode) {\n setSelectionMode(true);\n }\n } else {\n blur();\n setSelectionMode(false);\n }\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'CloseSelect':\n if (!multiselect && !activeOption?.disabled) {\n blur();\n setSelectionMode(false);\n }\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":["React","useSetKeyboardNavigation","useEventCallback","getDropdownActionFromKey","ArrowLeft","ArrowRight","useTriggerKeydown","options","activeDescendantController","getOptionById","selectOption","multiselect","open","cursorPosition","onBlur","allowArrowUpNavigation","isInSelectionMode","setSelectionMode","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","blur","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","firstOption","passive","key","preventDefault","id","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
PromptListbox: function() {
|
|
13
|
-
return _index.PromptListbox;
|
|
14
|
-
},
|
|
15
|
-
promptListboxClassNames: function() {
|
|
16
|
-
return _index.promptListboxClassNames;
|
|
17
|
-
},
|
|
18
|
-
renderPromptListbox_unstable: function() {
|
|
19
|
-
return _index.renderPromptListbox_unstable;
|
|
20
|
-
},
|
|
21
|
-
usePromptListboxStyles_unstable: function() {
|
|
22
|
-
return _index.usePromptListboxStyles_unstable;
|
|
23
|
-
},
|
|
24
|
-
usePromptListbox_unstable: function() {
|
|
25
|
-
return _index.usePromptListbox_unstable;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const _index = require("./components/PromptListbox/index");
|
|
29
|
-
//# sourceMappingURL=PromptListbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptListbox.ts"],"sourcesContent":["export type { PromptListboxContextValues, PromptListboxProps, PromptListboxSlots, PromptListboxState } from './components/PromptListbox/index';\nexport { PromptListbox, promptListboxClassNames, renderPromptListbox_unstable, usePromptListboxStyles_unstable, usePromptListbox_unstable } from './components/PromptListbox/index';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,aAAa;eAAbA,oBAAa;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,4BAA4B;eAA5BA,mCAA4B;;IAAEC,+BAA+B;eAA/BA,sCAA+B;;IAAEC,yBAAyB;eAAzBA,gCAAyB;;;uBAAQ"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
PromptOption: function() {
|
|
13
|
-
return _index.PromptOption;
|
|
14
|
-
},
|
|
15
|
-
promptOptionClassNames: function() {
|
|
16
|
-
return _index.promptOptionClassNames;
|
|
17
|
-
},
|
|
18
|
-
renderPromptOption_unstable: function() {
|
|
19
|
-
return _index.renderPromptOption_unstable;
|
|
20
|
-
},
|
|
21
|
-
usePromptOptionStyles_unstable: function() {
|
|
22
|
-
return _index.usePromptOptionStyles_unstable;
|
|
23
|
-
},
|
|
24
|
-
usePromptOption_unstable: function() {
|
|
25
|
-
return _index.usePromptOption_unstable;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const _index = require("./components/PromptOption/index");
|
|
29
|
-
//# sourceMappingURL=PromptOption.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptOption.ts"],"sourcesContent":["export type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './components/PromptOption/index';\nexport { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './components/PromptOption/index';\n"],"names":["PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,YAAY;eAAZA,mBAAY;;IAAEC,sBAAsB;eAAtBA,6BAAsB;;IAAEC,2BAA2B;eAA3BA,kCAA2B;;IAAEC,8BAA8B;eAA9BA,qCAA8B;;IAAEC,wBAAwB;eAAxBA,+BAAwB;;;uBAAQ"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "PromptListbox", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return PromptListbox;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
-
const _usePromptListbox = require("./usePromptListbox");
|
|
14
|
-
const _renderPromptListbox = require("./renderPromptListbox");
|
|
15
|
-
const _usePromptListboxStylesstyles = require("./usePromptListboxStyles.styles");
|
|
16
|
-
const _usePromptListboxContextValues = require("./usePromptListboxContextValues");
|
|
17
|
-
const PromptListbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
18
|
-
const state = (0, _usePromptListbox.usePromptListbox_unstable)(props, ref);
|
|
19
|
-
const contextValues = (0, _usePromptListboxContextValues.usePromptListboxContextValues)(state);
|
|
20
|
-
(0, _usePromptListboxStylesstyles.usePromptListboxStyles_unstable)(state);
|
|
21
|
-
return (0, _renderPromptListbox.renderPromptListbox_unstable)(state, contextValues);
|
|
22
|
-
});
|
|
23
|
-
PromptListbox.displayName = 'PromptListbox'; //# sourceMappingURL=PromptListbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptListbox_unstable } from './usePromptListbox';\nimport { renderPromptListbox_unstable } from './renderPromptListbox';\nimport { usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';\nimport { usePromptListboxContextValues } from './usePromptListboxContextValues';\nimport type { PromptListboxProps } from './PromptListbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/**@deprecated - use InputListbox instead */\nexport const PromptListbox: ForwardRefComponent<PromptListboxProps> = React.forwardRef((props, ref) => {\n const state = usePromptListbox_unstable(props, ref);\n const contextValues = usePromptListboxContextValues(state);\n\n usePromptListboxStyles_unstable(state);\n return renderPromptListbox_unstable(state, contextValues);\n});\n\nPromptListbox.displayName = 'PromptListbox';\n"],"names":["state","usePromptListbox_unstable","props","ref","contextValues","usePromptListboxContextValues","usePromptListboxStyles_unstable","renderPromptListbox_unstable","PromptListbox"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUQA;;;eAAAA;;;;iEAVe;kCACmB;qCACG;8CACG;+CACF;AAM5C,MAAMA,gBAAQC,WAAAA,GAAAA,OAA0BC,UAAOC,CAAAA,CAAAA,OAAAA;UAC/CH,QAAMI,IAAAA,2CAAgBC,EAAAA,OAAAA;UAEtBC,gBAAAA,IAAAA,4DAAgCN,EAAAA;qEACzBO,EAAAA;IACT,OAAGA,IAAAA,iDAAA,EAAAP,OAAAI;AAEHI"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptListbox.types.ts"],"sourcesContent":["import type { ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type {\n ComboboxProps,\n ComponentProps,\n ComponentState,\n Listbox,\n ListboxContextValue,\n PortalProps,\n Slot,\n} from '@fluentui/react-components';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { OptionCollectionState } from '../utils/OptionCollection.types';\nimport type { SelectionState } from '../utils/Selection.types';\n\nexport type PromptListboxSlots = {\n root: Slot<typeof Listbox>;\n};\n\n/**\n * PromptListbox Props\n */\nexport type PromptListboxProps = Omit<ComponentProps<PromptListboxSlots>, 'multiselect'> &\n Pick<PortalProps, 'mountNode'> &\n OptionCollectionState &\n SelectionState &\n Pick<PromptListboxContextState, 'activeDescendantController'> &\n Pick<ComboboxProps, 'onActiveOptionChange'> & {\n /**\n * Whether to listbox should be rendered.\n *\n * @default false\n */\n open?: boolean;\n /**\n * Whether to render the listbox inline or in a portal.\n *\n * @default false\n */\n inlinePopup?: boolean;\n };\n\n/**\n * State used in rendering PromptListbox\n */\nexport type PromptListboxState = ComponentState<PromptListboxSlots> &\n PromptListboxContextState &\n Required<Pick<PromptListboxProps, 'open' | 'inlinePopup'>> &\n Pick<PromptListboxProps, 'mountNode'>;\n\nexport type PromptListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
PromptListbox: function() {
|
|
13
|
-
return _PromptListbox.PromptListbox;
|
|
14
|
-
},
|
|
15
|
-
promptListboxClassNames: function() {
|
|
16
|
-
return _usePromptListboxStylesstyles.promptListboxClassNames;
|
|
17
|
-
},
|
|
18
|
-
renderPromptListbox_unstable: function() {
|
|
19
|
-
return _renderPromptListbox.renderPromptListbox_unstable;
|
|
20
|
-
},
|
|
21
|
-
usePromptListboxStyles_unstable: function() {
|
|
22
|
-
return _usePromptListboxStylesstyles.usePromptListboxStyles_unstable;
|
|
23
|
-
},
|
|
24
|
-
usePromptListbox_unstable: function() {
|
|
25
|
-
return _usePromptListbox.usePromptListbox_unstable;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const _PromptListbox = require("./PromptListbox");
|
|
29
|
-
const _renderPromptListbox = require("./renderPromptListbox");
|
|
30
|
-
const _usePromptListbox = require("./usePromptListbox");
|
|
31
|
-
const _usePromptListboxStylesstyles = require("./usePromptListboxStyles.styles");
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { PromptListbox } from './PromptListbox';\nexport type { PromptListboxContextValues, PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox.types';\nexport { renderPromptListbox_unstable } from './renderPromptListbox';\nexport { usePromptListbox_unstable } from './usePromptListbox';\nexport { promptListboxClassNames, usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAIbC,uBAAuB;eAAvBA,qDAAuB;;IAFvBC,4BAA4B;eAA5BA,iDAA4B;;IAEHC,+BAA+B;eAA/BA,6DAA+B;;IADxDC,yBAAyB;eAAzBA,2CAAyB;;;+BAHJ;qCAEe;kCACH;8CAC+B"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "renderPromptListbox_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return renderPromptListbox_unstable;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
13
|
-
const _reactaria = require("@fluentui/react-aria");
|
|
14
|
-
const renderPromptListbox_unstable = (state, contextValues)=>{
|
|
15
|
-
(0, _reactcomponents.assertSlots)(state);
|
|
16
|
-
const { open } = state;
|
|
17
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.ListboxProvider, {
|
|
18
|
-
value: contextValues.listbox,
|
|
19
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
|
|
20
|
-
value: contextValues.activeDescendant,
|
|
21
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
|
|
22
|
-
"aria-owns": open ? state.root.id : undefined,
|
|
23
|
-
children: open && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Portal, {
|
|
24
|
-
mountNode: state.mountNode,
|
|
25
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
26
|
-
}))
|
|
27
|
-
})
|
|
28
|
-
})
|
|
29
|
-
});
|
|
30
|
-
}; //# sourceMappingURL=renderPromptListbox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPromptListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { PromptListboxState, PromptListboxSlots, PromptListboxContextValues } from './PromptListbox.types';\n\n/**\n * Render the final JSX of PromptListbox\n */\nexport const renderPromptListbox_unstable = (state: PromptListboxState, contextValues: PromptListboxContextValues) => {\n assertSlots<PromptListboxSlots>(state);\n const { open } = state;\n\n return (\n <ListboxProvider value={contextValues.listbox}>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <span aria-owns={open ? state.root.id : undefined}>\n {open &&\n (state.inlinePopup ? (\n <state.root />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.root />\n </Portal>\n ))}\n </span>\n </ActiveDescendantContextProvider>\n </ListboxProvider>\n );\n};\n"],"names":["assertSlots","state","open","value","contextValues","activeDescendant","listbox","aria-owns","undefined","inlinePopup","mountNode","root","id","_jsx","Portal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWEA;;;eAAAA;;;4BAXwB;iCAG2B;2BACL;AAO9CA,MAAAA,+BAAgCC,CAAAA,OAAAA;oCACxBC,EAAAA;UAER,MACmBC;sBACyBC,GAAAA,IAAAA,eAAAA,EAAAA,gCAAcC,EAAAA;6BACpDC,OAAA;6BAAMC,GAAAA,IAAAA,eAAWL,EAAAA,0CAAuBM,EAAAA;iCACrCN,gBACQO;iCAGGC,GAAAA,IAAAA,eAAWT,EAAAA,QAAMS;0CACvBC,IAAA,CAAAC,EAAA,GAAAJ;0BAEJN,QAAAD,CAAAA,MAAAQ,WAAA,GAAA,WAAA,GAAAI,IAAAA,eAAA,EAAAZ,MAAAU,IAAA,EAAA,CAAA,KAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAC,uBAAA,EAAA;;;;YAKV"}
|