@fluentui-copilot/react-prompt-listbox 0.4.1 → 0.5.1
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 +36 -0
- package/CHANGELOG.md +20 -1
- package/dist/index.d.ts +146 -17
- package/lib/components/PromptListbox/PromptListbox.js +1 -1
- package/lib/components/PromptListbox/PromptListbox.js.map +1 -1
- package/lib/components/PromptOption/PromptOption.js +1 -1
- package/lib/components/PromptOption/PromptOption.js.map +1 -1
- package/lib/components/utils/useListboxPositioning.js +3 -3
- package/lib/components/utils/useListboxPositioning.js.map +1 -1
- package/lib/components/utils/usePromptListboxFunctionality.js +3 -0
- package/lib/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib/components/utils/usePromptListboxFunctionalityV2.js +139 -0
- package/lib/components/utils/usePromptListboxFunctionalityV2.js.map +1 -0
- package/lib/index.js +3 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/PromptListbox/PromptListbox.js.map +1 -1
- package/lib-commonjs/components/PromptOption/PromptOption.js.map +1 -1
- package/lib-commonjs/components/utils/useListboxPositioning.js +3 -3
- package/lib-commonjs/components/utils/useListboxPositioning.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionalityV2.js +135 -0
- package/lib-commonjs/components/utils/usePromptListboxFunctionalityV2.js.map +1 -0
- package/lib-commonjs/index.js +20 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -5
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
|
+
{
|
|
5
|
+
"date": "Fri, 07 Feb 2025 02:01:25 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.5.1",
|
|
7
|
+
"version": "0.5.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "owcampbe@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
13
|
+
"commit": "70796f91c6f172c0a1de2dd0989cec7eb8e1f803",
|
|
14
|
+
"comment": "chore: Use InputListbox's isInSelectionMode state."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "estebanmu@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
19
|
+
"commit": "4d2e21f84ca14afa287a9b81387169da3e26664a",
|
|
20
|
+
"comment": "feat: Add onActiveOptionChange to InputListbox."
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Wed, 29 Jan 2025 01:37:03 GMT",
|
|
27
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.5.0",
|
|
28
|
+
"version": "0.5.0",
|
|
29
|
+
"comments": {
|
|
30
|
+
"minor": [
|
|
31
|
+
{
|
|
32
|
+
"author": "estebanmu@microsoft.com",
|
|
33
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
34
|
+
"commit": "d1fe11212018f106bfdcb4ad94c57c5fd7e93326",
|
|
35
|
+
"comment": "feat: Deprecate old promptlistbox resources and PromptOption, rename old promptlistbox hooks and export new inputlistbox based hooks."
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
4
40
|
{
|
|
5
41
|
"date": "Thu, 09 Jan 2025 01:15:37 GMT",
|
|
6
42
|
"tag": "@fluentui-copilot/react-prompt-listbox_v0.4.0",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-prompt-listbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 07 Feb 2025 02:01:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.5.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.1)
|
|
8
|
+
|
|
9
|
+
Fri, 07 Feb 2025 02:01:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.5.0..@fluentui-copilot/react-prompt-listbox_v0.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Use InputListbox's isInSelectionMode state. ([PR #2625](https://github.com/microsoft/fluentai/pull/2625) by owcampbe@microsoft.com)
|
|
15
|
+
- feat: Add onActiveOptionChange to InputListbox. ([PR #2639](https://github.com/microsoft/fluentai/pull/2639) by estebanmu@microsoft.com)
|
|
16
|
+
|
|
17
|
+
## [0.5.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.0)
|
|
18
|
+
|
|
19
|
+
Wed, 29 Jan 2025 01:37:03 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.4.0..@fluentui-copilot/react-prompt-listbox_v0.5.0)
|
|
21
|
+
|
|
22
|
+
### Minor changes
|
|
23
|
+
|
|
24
|
+
- feat: Deprecate old promptlistbox resources and PromptOption, rename old promptlistbox hooks and export new inputlistbox based hooks. ([PR #2490](https://github.com/microsoft/fluentai/pull/2490) by estebanmu@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [0.4.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.4.0)
|
|
8
27
|
|
|
9
28
|
Thu, 09 Jan 2025 01:15:37 GMT
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
3
|
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
|
|
4
|
+
import { ActiveOptionChangeData } from '@fluentui-copilot/react-input-listbox';
|
|
4
5
|
import type { ComboboxBaseState } from '@fluentui/react-combobox';
|
|
5
6
|
import type { ComboboxProps } from '@fluentui/react-components';
|
|
6
7
|
import type { ComboboxState } from '@fluentui/react-combobox';
|
|
@@ -10,36 +11,72 @@ import type { EditorInputProps } from '@fluentui-copilot/react-editor-input';
|
|
|
10
11
|
import type { EventData } from '@fluentui/react-utilities';
|
|
11
12
|
import type { EventHandler } from '@fluentui/react-utilities';
|
|
12
13
|
import type { ForwardRefComponent } from '@fluentui/react-components';
|
|
14
|
+
import type { InputListboxProps } from '@fluentui-copilot/react-input-listbox';
|
|
13
15
|
import type { Listbox } from '@fluentui/react-components';
|
|
14
16
|
import type { ListboxContextValue } from '@fluentui/react-combobox';
|
|
15
17
|
import type { ListboxContextValue as ListboxContextValue_2 } from '@fluentui/react-components';
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
+
import { Option as Option_2 } from '@fluentui-copilot/react-input-listbox';
|
|
19
|
+
import { optionClassNames } from '@fluentui-copilot/react-input-listbox';
|
|
20
|
+
import { OptionOnSelectData } from '@fluentui-copilot/react-input-listbox';
|
|
21
|
+
import { OptionProps } from '@fluentui-copilot/react-input-listbox';
|
|
22
|
+
import type { OptionProps as OptionProps_2 } from '@fluentui/react-components';
|
|
23
|
+
import { OptionSlots } from '@fluentui-copilot/react-input-listbox';
|
|
24
|
+
import { OptionState } from '@fluentui-copilot/react-input-listbox';
|
|
25
|
+
import type { OptionState as OptionState_2 } from '@fluentui/react-components';
|
|
26
|
+
import { OptionValue } from '@fluentui-copilot/react-input-listbox';
|
|
27
|
+
import { OverrideActionHandler } from '@fluentui-copilot/react-input-listbox';
|
|
28
|
+
import { OverrideActionHandlerOptions } from '@fluentui-copilot/react-input-listbox';
|
|
29
|
+
import { OverrideActionHandlerResult } from '@fluentui-copilot/react-input-listbox';
|
|
18
30
|
import type { PortalProps } from '@fluentui/react-components';
|
|
19
|
-
import type { PositioningShorthand } from '@fluentui/react-
|
|
31
|
+
import type { PositioningShorthand } from '@fluentui/react-positioning';
|
|
32
|
+
import type { PositioningShorthand as PositioningShorthand_2 } from '@fluentui/react-components';
|
|
20
33
|
import * as React_2 from 'react';
|
|
21
34
|
import type { default as React_3 } from 'react';
|
|
35
|
+
import { renderOption_unstable } from '@fluentui-copilot/react-input-listbox';
|
|
22
36
|
import type { Slot } from '@fluentui/react-components';
|
|
23
37
|
import type { SlotClassNames } from '@fluentui/react-components';
|
|
38
|
+
import type { UseInputListboxFunctionalityParams } from '@fluentui-copilot/react-input-listbox';
|
|
39
|
+
import { useOption_unstable } from '@fluentui-copilot/react-input-listbox';
|
|
40
|
+
import { useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
|
|
24
41
|
|
|
25
|
-
export
|
|
42
|
+
export { ActiveOptionChangeData }
|
|
43
|
+
|
|
44
|
+
export declare type OnOpenChangeData = (EventData<'click', React_2.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_2.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_2.KeyboardEvent<HTMLSpanElement>>) & {
|
|
26
45
|
open: boolean;
|
|
27
46
|
};
|
|
28
47
|
|
|
48
|
+
export declare type OnOpenChangeDataDeprecated = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
|
|
49
|
+
open: boolean;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export { Option_2 as Option }
|
|
53
|
+
|
|
54
|
+
export { optionClassNames }
|
|
55
|
+
|
|
29
56
|
declare type OptionCollectionState = {
|
|
30
57
|
/** The total number of options in the collection. */
|
|
31
58
|
getCount: () => number;
|
|
32
59
|
/** Returns the option data by key. */
|
|
33
|
-
getOptionById(id: string):
|
|
60
|
+
getOptionById(id: string): OptionValue_2 | undefined;
|
|
34
61
|
/** Returns an array of options filtered by a value matching function against the option's value string. */
|
|
35
|
-
getOptionsMatchingValue(matcher: (value: string) => boolean):
|
|
62
|
+
getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue_2[];
|
|
36
63
|
/** The unordered option data. */
|
|
37
|
-
options:
|
|
64
|
+
options: OptionValue_2[];
|
|
38
65
|
/** A function that child options call to register their values. Returns a function to unregister the option. */
|
|
39
|
-
registerOption: (option:
|
|
66
|
+
registerOption: (option: OptionValue_2, element: HTMLElement) => () => void;
|
|
40
67
|
};
|
|
41
68
|
|
|
42
|
-
|
|
69
|
+
export { OptionOnSelectData }
|
|
70
|
+
|
|
71
|
+
export { OptionProps }
|
|
72
|
+
|
|
73
|
+
export { OptionSlots }
|
|
74
|
+
|
|
75
|
+
export { OptionState }
|
|
76
|
+
|
|
77
|
+
export { OptionValue }
|
|
78
|
+
|
|
79
|
+
declare type OptionValue_2 = {
|
|
43
80
|
/** The disabled state of the option. */
|
|
44
81
|
disabled?: boolean;
|
|
45
82
|
/** The `id` attribute of the option. */
|
|
@@ -50,10 +87,17 @@ declare type OptionValue = {
|
|
|
50
87
|
value: string;
|
|
51
88
|
};
|
|
52
89
|
|
|
53
|
-
export
|
|
90
|
+
export { OverrideActionHandler }
|
|
91
|
+
|
|
92
|
+
export { OverrideActionHandlerOptions }
|
|
93
|
+
|
|
94
|
+
export { OverrideActionHandlerResult }
|
|
95
|
+
|
|
96
|
+
export declare type ProcessedPromptListboxPropsDeprecated = Partial<Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>> & {
|
|
54
97
|
ref?: React_3.MutableRefObject<any>;
|
|
55
98
|
};
|
|
56
99
|
|
|
100
|
+
/**@deprecated - use InputListbox instead */
|
|
57
101
|
export declare const PromptListbox: ForwardRefComponent<PromptListboxProps>;
|
|
58
102
|
|
|
59
103
|
export declare const promptListboxClassNames: SlotClassNames<PromptListboxSlots>;
|
|
@@ -92,6 +136,7 @@ export declare type PromptListboxSlots = {
|
|
|
92
136
|
*/
|
|
93
137
|
export declare type PromptListboxState = ComponentState<PromptListboxSlots> & PromptListboxContextState & Required<Pick<PromptListboxProps, 'open' | 'inlinePopup'>> & Pick<PromptListboxProps, 'mountNode'>;
|
|
94
138
|
|
|
139
|
+
/**@deprecated - use Option instead */
|
|
95
140
|
export declare const PromptOption: ForwardRefComponent<PromptOptionProps>;
|
|
96
141
|
|
|
97
142
|
export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
|
|
@@ -99,7 +144,7 @@ export declare const promptOptionClassNames: SlotClassNames<PromptOptionSlots>;
|
|
|
99
144
|
/**
|
|
100
145
|
* PromptOption Props
|
|
101
146
|
*/
|
|
102
|
-
export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<
|
|
147
|
+
export declare type PromptOptionProps = ComponentProps<PromptOptionSlots> & Pick<OptionProps_2, 'disabled' | 'value'> & ({
|
|
103
148
|
/**
|
|
104
149
|
* An optional override the string value of the PromptOption's display text,
|
|
105
150
|
* defaulting to the PromptOption's child content.
|
|
@@ -125,7 +170,9 @@ export declare type PromptOptionSlots = {
|
|
|
125
170
|
/**
|
|
126
171
|
* State used in rendering PromptOption
|
|
127
172
|
*/
|
|
128
|
-
export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<
|
|
173
|
+
export declare type PromptOptionState = ComponentState<PromptOptionSlots> & Pick<OptionState_2, 'disabled' | 'selected'>;
|
|
174
|
+
|
|
175
|
+
export { renderOption_unstable }
|
|
129
176
|
|
|
130
177
|
/**
|
|
131
178
|
* Render the final JSX of PromptListbox
|
|
@@ -144,9 +191,13 @@ declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.Keyboa
|
|
|
144
191
|
declare type SelectionState = {
|
|
145
192
|
clearSelection: (event: SelectionEvents) => void;
|
|
146
193
|
selectedOptions: string[];
|
|
147
|
-
selectOption: (event: SelectionEvents, option:
|
|
194
|
+
selectOption: (event: SelectionEvents, option: OptionValue_2) => void;
|
|
148
195
|
};
|
|
149
196
|
|
|
197
|
+
export { useOption_unstable }
|
|
198
|
+
|
|
199
|
+
export { useOptionStyles_unstable }
|
|
200
|
+
|
|
150
201
|
/**
|
|
151
202
|
* Create the state required to render PromptListbox.
|
|
152
203
|
*
|
|
@@ -158,7 +209,41 @@ declare type SelectionState = {
|
|
|
158
209
|
*/
|
|
159
210
|
export declare const usePromptListbox_unstable: (props: PromptListboxProps, ref: React_2.Ref<HTMLDivElement>) => PromptListboxState;
|
|
160
211
|
|
|
161
|
-
export declare type UsePromptListboxFunctionality = {
|
|
212
|
+
export declare type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {
|
|
213
|
+
/**
|
|
214
|
+
* Component to be rendered in the Input component. This should be passed to the listbox prop.
|
|
215
|
+
*/
|
|
216
|
+
promptListbox: JSX.Element;
|
|
217
|
+
/**
|
|
218
|
+
* Props to be spread in the PromptInput, these props are needed for the keyboard behavior to
|
|
219
|
+
* work correctly.
|
|
220
|
+
*/
|
|
221
|
+
triggerProps: {
|
|
222
|
+
ref: React_2.RefObject<HTMLSpanElement>;
|
|
223
|
+
/**
|
|
224
|
+
* Whether the listbox is being used to go through options or the user is currently typing.
|
|
225
|
+
*/
|
|
226
|
+
isInSelectionMode: boolean;
|
|
227
|
+
} & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;
|
|
228
|
+
/**
|
|
229
|
+
* Ref used to point which element the listbox should be anchored to. Most use cases
|
|
230
|
+
* will provide this prop to the PromptInput's EditorInput (since this is the root slot,
|
|
231
|
+
* this is provided directly to the component and not the slot).
|
|
232
|
+
*
|
|
233
|
+
* Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs
|
|
234
|
+
* to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`
|
|
235
|
+
*/
|
|
236
|
+
containerRef: React_2.RefObject<ContainerElementType>;
|
|
237
|
+
/**
|
|
238
|
+
* Plugin used to tell where the cursor is in the EditorInput, this is important for the
|
|
239
|
+
* keyboard behavior. This should be passed as children in the PromptInput.
|
|
240
|
+
*/
|
|
241
|
+
cursorPositionPlugin: JSX.Element;
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
export declare function usePromptListboxFunctionality<TriggerElementType extends HTMLElement = HTMLSpanElement, ContainerElementType extends HTMLElement = HTMLDivElement>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType>;
|
|
245
|
+
|
|
246
|
+
export declare type UsePromptListboxFunctionalityDeprecated = {
|
|
162
247
|
/**
|
|
163
248
|
* Component to be rendered in the Input component. This should be passed to the listbox prop.
|
|
164
249
|
*/
|
|
@@ -190,13 +275,57 @@ export declare type UsePromptListboxFunctionality = {
|
|
|
190
275
|
cursorPositionPlugin: JSX.Element;
|
|
191
276
|
};
|
|
192
277
|
|
|
193
|
-
|
|
278
|
+
/**
|
|
279
|
+
* @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
|
|
280
|
+
*/
|
|
281
|
+
export declare function usePromptListboxFunctionalityDeprecated(params: UsePromptListboxFunctionalityParamsDeprecated): UsePromptListboxFunctionalityDeprecated;
|
|
194
282
|
|
|
195
|
-
export declare type UsePromptListboxFunctionalityParams = {
|
|
283
|
+
export declare type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {
|
|
196
284
|
open?: boolean;
|
|
197
285
|
defaultOpen?: boolean;
|
|
198
286
|
onOpenChange?: EventHandler<OnOpenChangeData>;
|
|
199
287
|
positioning?: PositioningShorthand;
|
|
288
|
+
/**
|
|
289
|
+
* Whether the listbox's width should take all the available space or only
|
|
290
|
+
* the required space.
|
|
291
|
+
*
|
|
292
|
+
* @default false
|
|
293
|
+
*/
|
|
294
|
+
fluid?: boolean;
|
|
295
|
+
/**
|
|
296
|
+
* Props to be passed to the InputListbox component
|
|
297
|
+
*/
|
|
298
|
+
listboxProps?: Partial<InputListboxProps> & {
|
|
299
|
+
ref?: React_2.RefObject<HTMLDivElement>;
|
|
300
|
+
};
|
|
301
|
+
/**
|
|
302
|
+
* Whether to allow reaching the listbox options by arrowing up at the start of the input.
|
|
303
|
+
* Note, this prop is meant to be used with the following positioning props:
|
|
304
|
+
* ```ts
|
|
305
|
+
* usePromptListboxFunctionality({
|
|
306
|
+
* positioning: {
|
|
307
|
+
* position: 'above',
|
|
308
|
+
* fallbackPositions: ['above']
|
|
309
|
+
* }
|
|
310
|
+
* });
|
|
311
|
+
* ```
|
|
312
|
+
* This is useful when using PromptListbox with other components such as ChatInput since
|
|
313
|
+
* the input will always stay at the bottom therefore the listbox would always get cut.
|
|
314
|
+
*
|
|
315
|
+
* @default false
|
|
316
|
+
*/
|
|
317
|
+
allowArrowUpNavigation?: boolean;
|
|
318
|
+
/**
|
|
319
|
+
* Whether to render the listbox inline or use a portal.
|
|
320
|
+
*/
|
|
321
|
+
inline?: boolean;
|
|
322
|
+
} & Pick<PortalProps, 'mountNode'>;
|
|
323
|
+
|
|
324
|
+
export declare type UsePromptListboxFunctionalityParamsDeprecated = {
|
|
325
|
+
open?: boolean;
|
|
326
|
+
defaultOpen?: boolean;
|
|
327
|
+
onOpenChange?: EventHandler<OnOpenChangeDataDeprecated>;
|
|
328
|
+
positioning?: PositioningShorthand_2;
|
|
200
329
|
/**
|
|
201
330
|
* Callback to call when the selection mode (selecting an action vs typing) changes.
|
|
202
331
|
*/
|
|
@@ -204,7 +333,7 @@ export declare type UsePromptListboxFunctionalityParams = {
|
|
|
204
333
|
/**
|
|
205
334
|
* Props to be passed to the ListboxComponent
|
|
206
335
|
*/
|
|
207
|
-
listboxProps?:
|
|
336
|
+
listboxProps?: ProcessedPromptListboxPropsDeprecated;
|
|
208
337
|
/**
|
|
209
338
|
* Whether the listbox's width should take all the available space or only
|
|
210
339
|
* the required space.
|
|
@@ -3,7 +3,7 @@ import { usePromptListbox_unstable } from './usePromptListbox';
|
|
|
3
3
|
import { renderPromptListbox_unstable } from './renderPromptListbox';
|
|
4
4
|
import { usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';
|
|
5
5
|
import { usePromptListboxContextValues } from './usePromptListboxContextValues';
|
|
6
|
-
|
|
6
|
+
/**@deprecated - use InputListbox instead */
|
|
7
7
|
export const PromptListbox = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
8
8
|
const state = usePromptListbox_unstable(props, ref);
|
|
9
9
|
const contextValues = usePromptListboxContextValues(state);
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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":["React","usePromptListbox_unstable","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListboxContextValues","PromptListbox","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,6BAA6B,QAAQ,kCAAkC;AAIhF,0CAA0C,GAC1C,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAC/C,MAAME,gBAAgBN,8BAA8BK;IAEpDN,gCAAgCM;IAChC,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { usePromptOption_unstable } from './usePromptOption';
|
|
3
3
|
import { renderPromptOption_unstable } from './renderPromptOption';
|
|
4
4
|
import { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';
|
|
5
|
-
|
|
5
|
+
/**@deprecated - use Option instead */
|
|
6
6
|
export const PromptOption = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
7
7
|
const state = usePromptOption_unstable(props, ref);
|
|
8
8
|
usePromptOptionStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n
|
|
1
|
+
{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/**@deprecated - use Option instead */\nexport const PromptOption: ForwardRefComponent<PromptOptionProps> = React.forwardRef((props, ref) => {\n const state = usePromptOption_unstable(props, ref);\n\n usePromptOptionStyles_unstable(state);\n return renderPromptOption_unstable(state);\n});\n\nPromptOption.displayName = 'PromptOption';\n"],"names":["React","usePromptOption_unstable","renderPromptOption_unstable","usePromptOptionStyles_unstable","PromptOption","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,oCAAoC,GACpC,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
|
|
@@ -20,9 +20,9 @@ export function useListboxPositioning(props) {
|
|
|
20
20
|
...resolvePositioningShorthand(positioning)
|
|
21
21
|
};
|
|
22
22
|
const {
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
containerRef: listboxRef,
|
|
24
|
+
targetRef: anchorRef
|
|
25
25
|
} = usePositioning(popperOptions);
|
|
26
|
-
return [
|
|
26
|
+
return [listboxRef, anchorRef];
|
|
27
27
|
}
|
|
28
28
|
//# sourceMappingURL=useListboxPositioning.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type {
|
|
1
|
+
{"version":3,"sources":["useListboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useListboxPositioning<AnchorElementType extends HTMLElement = HTMLSpanElement>(\n props: Pick<UsePromptListboxFunctionalityParams, 'fluid' | 'positioning'>,\n): [listboxRef: React.RefObject<HTMLSpanElement>, anchorRef: React.RefObject<AnchorElementType>] {\n const { positioning, fluid } = props;\n\n const fallbackPositions: PositioningShorthandValue[] = ['below'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions: fallbackPositions,\n matchTargetSize: fluid ? ('width' as const) : undefined,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { containerRef: listboxRef, targetRef: anchorRef } = usePositioning(popperOptions);\n\n return [listboxRef, anchorRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","useListboxPositioning","props","positioning","fluid","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","undefined","autoSize","containerRef","listboxRef","targetRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAK1F,OAAO,SAASC,sBACdC,KAAyE;IAEzE,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAE,GAAGF;IAE/B,MAAMG,oBAAiD;QAAC;KAAQ;IAEhE,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN,mBAAmBA;QACnBO,iBAAiBR,QAAS,UAAoBS;QAC9CC,UAAU;QACV,GAAGf,4BAA4BI,YAAY;IAC7C;IAEA,MAAM,EAAEY,cAAcC,UAAU,EAAEC,WAAWC,SAAS,EAAE,GAAGlB,eAAeM;IAE1E,OAAO;QAACU;QAAYE;KAAU;AAChC"}
|
|
@@ -9,6 +9,9 @@ import { useTriggerKeydown } from './useTriggerKeyDown';
|
|
|
9
9
|
import { PromptListbox } from '../PromptListbox';
|
|
10
10
|
import { promptOptionClassNames } from '../PromptOption';
|
|
11
11
|
import { PromptListboxMotion } from '../motion/PromptListboxMotion';
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
|
|
14
|
+
*/
|
|
12
15
|
export function usePromptListboxFunctionality(params) {
|
|
13
16
|
const {
|
|
14
17
|
positioning,
|
|
@@ -1 +1 @@
|
|
|
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\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":"
|
|
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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"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';
|
|
3
|
+
import { PromptListboxMotion } from '../motion/PromptListboxMotion';
|
|
4
|
+
import { mergeCallbacks, useControllableState, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
|
|
5
|
+
import { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';
|
|
6
|
+
import { useListboxPositioning } from './useListboxPositioning';
|
|
7
|
+
import { Portal } from '@fluentui/react-components';
|
|
8
|
+
export function usePromptListboxFunctionality(params) {
|
|
9
|
+
var _params_listboxProps, _params_listboxProps1;
|
|
10
|
+
const {
|
|
11
|
+
fluid = false,
|
|
12
|
+
allowArrowUpNavigation = false,
|
|
13
|
+
onSelectionModeChange
|
|
14
|
+
} = params;
|
|
15
|
+
const [open, setOpen] = useControllableState({
|
|
16
|
+
state: params.open,
|
|
17
|
+
defaultState: params.defaultOpen,
|
|
18
|
+
initialState: false
|
|
19
|
+
});
|
|
20
|
+
const [cursorPosition, setCursorPosition] = React.useState('end');
|
|
21
|
+
const overrideActionHandler = (e, {
|
|
22
|
+
activeOption,
|
|
23
|
+
action,
|
|
24
|
+
activeDescendantController,
|
|
25
|
+
isInSelectionMode
|
|
26
|
+
}) => {
|
|
27
|
+
var _params_overrideActionHandler;
|
|
28
|
+
const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
|
|
29
|
+
const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
|
|
30
|
+
let newAction = undefined;
|
|
31
|
+
let newIsInSelection = undefined;
|
|
32
|
+
const firstOption = activeDescendantController.first({
|
|
33
|
+
passive: true
|
|
34
|
+
});
|
|
35
|
+
switch (action) {
|
|
36
|
+
case 'Next':
|
|
37
|
+
if (!isInSelectionMode && !atEnd) {
|
|
38
|
+
newAction = 'Type';
|
|
39
|
+
newIsInSelection = false;
|
|
40
|
+
}
|
|
41
|
+
break;
|
|
42
|
+
case 'Previous':
|
|
43
|
+
if (!isInSelectionMode && !atStart) {
|
|
44
|
+
newAction = 'Type';
|
|
45
|
+
newIsInSelection = false;
|
|
46
|
+
} else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
|
|
47
|
+
newAction = 'Type';
|
|
48
|
+
newIsInSelection = false;
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
}
|
|
51
|
+
break;
|
|
52
|
+
case 'First':
|
|
53
|
+
case 'Last':
|
|
54
|
+
case 'PageDown':
|
|
55
|
+
case 'PageUp':
|
|
56
|
+
if (!isInSelectionMode) {
|
|
57
|
+
newAction = 'Type';
|
|
58
|
+
newIsInSelection = false;
|
|
59
|
+
}
|
|
60
|
+
break;
|
|
61
|
+
}
|
|
62
|
+
const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
|
|
63
|
+
activeOption,
|
|
64
|
+
action,
|
|
65
|
+
activeDescendantController,
|
|
66
|
+
isInSelectionMode
|
|
67
|
+
});
|
|
68
|
+
return {
|
|
69
|
+
action: newAction,
|
|
70
|
+
isInSelectionMode: newIsInSelection,
|
|
71
|
+
...userOverrides
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
const baseListboxFunctionality = useInputListboxFunctionality({
|
|
75
|
+
...params,
|
|
76
|
+
onSelectionModeChange,
|
|
77
|
+
overrideActionHandler
|
|
78
|
+
});
|
|
79
|
+
const {
|
|
80
|
+
onBlur: baseOnBlur,
|
|
81
|
+
onKeyDown: baseOnKeyDown,
|
|
82
|
+
ref: triggerRef,
|
|
83
|
+
isInSelectionMode
|
|
84
|
+
} = baseListboxFunctionality.triggerProps;
|
|
85
|
+
const onFocus = event => {
|
|
86
|
+
if (event.target === event.currentTarget) {
|
|
87
|
+
var _params_onOpenChange;
|
|
88
|
+
setOpen(true);
|
|
89
|
+
(_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
|
|
90
|
+
event,
|
|
91
|
+
type: 'focus',
|
|
92
|
+
open: true
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
const onBlur = useEventCallback(mergeCallbacks(baseOnBlur, e => {
|
|
97
|
+
var _params_onOpenChange;
|
|
98
|
+
setOpen(false);
|
|
99
|
+
(_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
|
|
100
|
+
event: e,
|
|
101
|
+
type: 'focus',
|
|
102
|
+
open: false
|
|
103
|
+
});
|
|
104
|
+
}));
|
|
105
|
+
const [listboxRef, anchorRef] = useListboxPositioning({
|
|
106
|
+
fluid,
|
|
107
|
+
positioning: params.positioning
|
|
108
|
+
});
|
|
109
|
+
const listboxId = useId('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
|
|
110
|
+
const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
|
|
111
|
+
setCursorPosition: setCursorPosition
|
|
112
|
+
});
|
|
113
|
+
const innerListbox = /*#__PURE__*/React.createElement(InputListbox, {
|
|
114
|
+
...params.listboxProps,
|
|
115
|
+
...baseListboxFunctionality.inputListboxProps,
|
|
116
|
+
id: listboxId,
|
|
117
|
+
ref: useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
|
|
118
|
+
});
|
|
119
|
+
const listbox = /*#__PURE__*/React.createElement(PromptListboxMotion, {
|
|
120
|
+
visible: open
|
|
121
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
122
|
+
"aria-owns": open ? listboxId : undefined
|
|
123
|
+
}, open && (params.inline ? innerListbox : /*#__PURE__*/React.createElement(Portal, {
|
|
124
|
+
mountNode: params.mountNode
|
|
125
|
+
}, innerListbox))));
|
|
126
|
+
return {
|
|
127
|
+
promptListbox: listbox,
|
|
128
|
+
cursorPositionPlugin,
|
|
129
|
+
triggerProps: {
|
|
130
|
+
ref: triggerRef,
|
|
131
|
+
isInSelectionMode,
|
|
132
|
+
onFocus,
|
|
133
|
+
onKeyDown: baseOnKeyDown,
|
|
134
|
+
onBlur
|
|
135
|
+
},
|
|
136
|
+
containerRef: anchorRef
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
//# sourceMappingURL=usePromptListboxFunctionalityV2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n InputListboxAction,\n InputListboxProps,\n UseInputListboxFunctionalityParams,\n OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\n\nexport type OnOpenChangeData = (\n | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n open: boolean;\n};\n\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Whether the listbox's width should take all the available space or only\n * the required space.\n *\n * @default false\n */\n fluid?: boolean;\n\n /**\n * Props to be passed to the InputListbox component\n */\n listboxProps?: Partial<InputListboxProps> & {\n ref?: React.RefObject<HTMLDivElement>;\n };\n\n /**\n * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n * Note, this prop is meant to be used with the following positioning props:\n * ```ts\n * usePromptListboxFunctionality({\n * positioning: {\n * position: 'above',\n * fallbackPositions: ['above']\n * }\n * });\n * ```\n * This is useful when using PromptListbox with other components such as ChatInput since\n * the input will always stay at the bottom therefore the listbox would always get cut.\n *\n * @default false\n */\n allowArrowUpNavigation?: boolean;\n\n /**\n * Whether to render the listbox inline or use a portal.\n */\n inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\n /**\n * Component to be rendered in the Input component. This should be passed to the listbox prop.\n */\n promptListbox: JSX.Element;\n /**\n * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n * work correctly.\n */\n triggerProps: {\n ref: React.RefObject<HTMLSpanElement>;\n /**\n * Whether the listbox is being used to go through options or the user is currently typing.\n */\n isInSelectionMode: boolean;\n } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n\n /**\n * Ref used to point which element the listbox should be anchored to. Most use cases\n * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n * this is provided directly to the component and not the slot).\n *\n * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n */\n containerRef: React.RefObject<ContainerElementType>;\n /**\n * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n * keyboard behavior. This should be passed as children in the PromptInput.\n */\n cursorPositionPlugin: JSX.Element;\n};\n\nexport function usePromptListboxFunctionality<\n TriggerElementType extends HTMLElement = HTMLSpanElement,\n ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n\n const overrideActionHandler: OverrideActionHandler = (\n e,\n { activeOption, action, activeDescendantController, isInSelectionMode },\n ) => {\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n let newAction: InputListboxAction | undefined = undefined;\n let newIsInSelection: boolean | undefined = undefined;\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Next':\n if (!isInSelectionMode && !atEnd) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n case 'Previous':\n if (!isInSelectionMode && !atStart) {\n newAction = 'Type';\n newIsInSelection = false;\n } else if (\n isInSelectionMode &&\n !allowArrowUpNavigation &&\n atEnd &&\n activeOption !== undefined &&\n activeOption.id === firstOption\n ) {\n newAction = 'Type';\n newIsInSelection = false;\n e.preventDefault();\n }\n break;\n case 'First':\n case 'Last':\n case 'PageDown':\n case 'PageUp':\n if (!isInSelectionMode) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n }\n\n const userOverrides = params.overrideActionHandler?.(e, {\n activeOption,\n action,\n activeDescendantController,\n isInSelectionMode,\n });\n\n return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n };\n\n const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const {\n onBlur: baseOnBlur,\n onKeyDown: baseOnKeyDown,\n ref: triggerRef,\n isInSelectionMode,\n } = baseListboxFunctionality.triggerProps;\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n params.onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const onBlur = useEventCallback(\n mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n setOpen(false);\n params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n }),\n );\n\n const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n fluid,\n positioning: params.positioning,\n });\n\n const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n const innerListbox = (\n <InputListbox\n {...params.listboxProps}\n {...baseListboxFunctionality.inputListboxProps}\n id={listboxId}\n ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n />\n );\n const listbox = (\n <PromptListboxMotion visible={open}>\n <span aria-owns={open ? listboxId : undefined}>\n {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n </span>\n </PromptListboxMotion>\n );\n\n return {\n promptListbox: listbox,\n cursorPositionPlugin,\n triggerProps: {\n ref: triggerRef,\n isInSelectionMode,\n onFocus,\n onKeyDown: baseOnKeyDown,\n onBlur,\n },\n containerRef: anchorRef,\n };\n}\n"],"names":["React","InputListbox","useInputListboxFunctionality","PromptListboxMotion","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","CursorPositionPlugin","useListboxPositioning","Portal","usePromptListboxFunctionality","params","fluid","allowArrowUpNavigation","onSelectionModeChange","open","setOpen","state","defaultState","defaultOpen","initialState","cursorPosition","setCursorPosition","useState","overrideActionHandler","e","activeOption","action","activeDescendantController","isInSelectionMode","atStart","atEnd","newAction","undefined","newIsInSelection","firstOption","first","passive","id","preventDefault","userOverrides","baseListboxFunctionality","onBlur","baseOnBlur","onKeyDown","baseOnKeyDown","ref","triggerRef","triggerProps","onFocus","event","target","currentTarget","onOpenChange","type","listboxRef","anchorRef","positioning","listboxId","listboxProps","cursorPositionPlugin","innerListbox","inputListboxProps","listbox","visible","span","aria-owns","inline","mountNode","promptListbox","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { PromptListbox, promptListboxClassNames, renderPromptListbox_unstable, usePromptListboxStyles_unstable, usePromptListbox_unstable } from './PromptListbox';
|
|
2
|
-
export { usePromptListboxFunctionality } from './components/utils/
|
|
2
|
+
export { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';
|
|
3
|
+
export { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';
|
|
3
4
|
export { PromptOption, promptOptionClassNames, renderPromptOption_unstable, usePromptOptionStyles_unstable, usePromptOption_unstable } from './PromptOption';
|
|
5
|
+
export { Option, optionClassNames, renderOption_unstable, useOption_unstable, useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
|
|
4
6
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData,\n ProcessedPromptListboxProps,\n UsePromptListboxFunctionality,\n UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';\nexport type {\n OnOpenChangeData,\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData as OnOpenChangeDataDeprecated,\n ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n\nexport type {\n ActiveOptionChangeData,\n OptionProps,\n OptionSlots,\n OptionState,\n OptionValue,\n OptionOnSelectData,\n OverrideActionHandler,\n OverrideActionHandlerOptions,\n OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOption_unstable,\n useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable","Option","optionClassNames","renderOption_unstable","useOption_unstable","useOptionStyles_unstable"],"rangeMappings":";;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,qDAAqD;AAOnG,SAASA,iCAAiCC,uCAAuC,QAAQ,mDAAmD;AAS5I,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAaxB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,kBAAkB,EAClBC,wBAAwB,QACnB,wCAAwC"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n
|
|
1
|
+
{"version":3,"sources":["PromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePromptOption_unstable } from './usePromptOption';\nimport { renderPromptOption_unstable } from './renderPromptOption';\nimport { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';\nimport type { PromptOptionProps } from './PromptOption.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/**@deprecated - use Option instead */\nexport const PromptOption: ForwardRefComponent<PromptOptionProps> = React.forwardRef((props, ref) => {\n const state = usePromptOption_unstable(props, ref);\n\n usePromptOptionStyles_unstable(state);\n return renderPromptOption_unstable(state);\n});\n\nPromptOption.displayName = 'PromptOption';\n"],"names":["state","usePromptOption_unstable","props","ref","usePromptOptionStyles_unstable","renderPromptOption_unstable","PromptOption"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASQA;;;eAAAA;;;;iEATe;iCACkB;oCACG;6CACG;AAM7C,MAAMA,eAAQC,WAAAA,GAAAA,OAAyBC,UAAOC,CAAAA,CAAAA,OAAAA;UAE9CC,QAAAA,IAAAA,yCAA+BJ,EAAAA,OAAAA;mEACxBK,EAAAA;IACT,OAAGA,IAAAA,+CAAA,EAAAL;AAEHM"}
|
|
@@ -28,9 +28,9 @@ function useListboxPositioning(props) {
|
|
|
28
28
|
autoSize: true,
|
|
29
29
|
...(0, _reactpositioning.resolvePositioningShorthand)(positioning)
|
|
30
30
|
};
|
|
31
|
-
const {
|
|
31
|
+
const { containerRef: listboxRef, targetRef: anchorRef } = (0, _reactpositioning.usePositioning)(popperOptions);
|
|
32
32
|
return [
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
listboxRef,
|
|
34
|
+
anchorRef
|
|
35
35
|
];
|
|
36
36
|
} //# sourceMappingURL=useListboxPositioning.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type {
|
|
1
|
+
{"version":3,"sources":["useListboxPositioning.ts"],"sourcesContent":["// Brought from Fluent UI\n\nimport { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type * as React from 'react';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useListboxPositioning<AnchorElementType extends HTMLElement = HTMLSpanElement>(\n props: Pick<UsePromptListboxFunctionalityParams, 'fluid' | 'positioning'>,\n): [listboxRef: React.RefObject<HTMLSpanElement>, anchorRef: React.RefObject<AnchorElementType>] {\n const { positioning, fluid } = props;\n\n const fallbackPositions: PositioningShorthandValue[] = ['below'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions: fallbackPositions,\n matchTargetSize: fluid ? ('width' as const) : undefined,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { containerRef: listboxRef, targetRef: anchorRef } = usePositioning(popperOptions);\n\n return [listboxRef, anchorRef];\n}\n"],"names":["useListboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","fluid","undefined","resolvePositioningShorthand","listboxRef","anchorRef","usePositioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;;;;;+BAOTA;;;eAAAA;;;kCAL4C;AAKrD,SAASA,sBACdC,KAAyE;UAEzE,EAEAC,WAAMC,OAAkD,KAAQF;UAEhEE,oBAAiB;QAAA;KAAA;qBACXC;UACJC,gBAAU;kBACVC;eACAC;gBAAUC;uBAAcC;sBAAY;;2BAEpCC;yBACUC,QAAA,UAAAC;kBACPC;QACL,GAAAA,IAAAA,6CAAA,EAAAX,YAAA;;UAIA,gBAAQY,UAAAA,aAAYC,SAAAA,KAAUC,IAAAA,gCAAA,EAAAZ;IAChC,OAAA;QAAAU;QAAAC;KAAA"}
|
|
@@ -1 +1 @@
|
|
|
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\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":["
|
|
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":["positioning","onSelectionModeChange","matchOption","onOpenChange","listboxProps","triggerRef","fluid","selectionState","allowArrowUpNavigation","params","listboxRef","cursorPosition","setCursorPosition","activeParentRef","isInSelectionMode","controller","open","useControllableState","defaultState","defaultOpen","promptOptionClassNames","root","setSelectionMode","React","useCallback","selectionMode","setHideActiveDescendant","setIsInSelectionMode","useState","activeDescendantController","onBlur","event","blur","onFocus","onListboxBlur","currentTarget","selectOption","getOptionById","hideActiveDescendant","useEffect","_triggerRef_current","comboboxTargetRef","useListboxPositioning","removeAttribute","activeDescendantListboxRef","PromptListboxMotion","PromptListbox","comboboxPopupRef","ref","listboxMergedRef","createElement","optionCollection","promptListbox","triggerProps","cursorPositionPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "usePromptListboxFunctionality", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return usePromptListboxFunctionality;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
+
const _reactinputlistbox = require("@fluentui-copilot/react-input-listbox");
|
|
14
|
+
const _PromptListboxMotion = require("../motion/PromptListboxMotion");
|
|
15
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
|
+
const _CursorPositionPlugin = require("../../plugins/CursorPositionPlugin");
|
|
17
|
+
const _useListboxPositioning = require("./useListboxPositioning");
|
|
18
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
19
|
+
function usePromptListboxFunctionality(params) {
|
|
20
|
+
var _params_listboxProps, _params_listboxProps1;
|
|
21
|
+
const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;
|
|
22
|
+
const [open, setOpen] = (0, _reactutilities.useControllableState)({
|
|
23
|
+
state: params.open,
|
|
24
|
+
defaultState: params.defaultOpen,
|
|
25
|
+
initialState: false
|
|
26
|
+
});
|
|
27
|
+
const [cursorPosition, setCursorPosition] = _react.useState('end');
|
|
28
|
+
const overrideActionHandler = (e, { activeOption, action, activeDescendantController, isInSelectionMode })=>{
|
|
29
|
+
var _params_overrideActionHandler;
|
|
30
|
+
const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
|
|
31
|
+
const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
|
|
32
|
+
let newAction = undefined;
|
|
33
|
+
let newIsInSelection = undefined;
|
|
34
|
+
const firstOption = activeDescendantController.first({
|
|
35
|
+
passive: true
|
|
36
|
+
});
|
|
37
|
+
switch(action){
|
|
38
|
+
case 'Next':
|
|
39
|
+
if (!isInSelectionMode && !atEnd) {
|
|
40
|
+
newAction = 'Type';
|
|
41
|
+
newIsInSelection = false;
|
|
42
|
+
}
|
|
43
|
+
break;
|
|
44
|
+
case 'Previous':
|
|
45
|
+
if (!isInSelectionMode && !atStart) {
|
|
46
|
+
newAction = 'Type';
|
|
47
|
+
newIsInSelection = false;
|
|
48
|
+
} else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
|
|
49
|
+
newAction = 'Type';
|
|
50
|
+
newIsInSelection = false;
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
}
|
|
53
|
+
break;
|
|
54
|
+
case 'First':
|
|
55
|
+
case 'Last':
|
|
56
|
+
case 'PageDown':
|
|
57
|
+
case 'PageUp':
|
|
58
|
+
if (!isInSelectionMode) {
|
|
59
|
+
newAction = 'Type';
|
|
60
|
+
newIsInSelection = false;
|
|
61
|
+
}
|
|
62
|
+
break;
|
|
63
|
+
}
|
|
64
|
+
const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
|
|
65
|
+
activeOption,
|
|
66
|
+
action,
|
|
67
|
+
activeDescendantController,
|
|
68
|
+
isInSelectionMode
|
|
69
|
+
});
|
|
70
|
+
return {
|
|
71
|
+
action: newAction,
|
|
72
|
+
isInSelectionMode: newIsInSelection,
|
|
73
|
+
...userOverrides
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
const baseListboxFunctionality = (0, _reactinputlistbox.useInputListboxFunctionality)({
|
|
77
|
+
...params,
|
|
78
|
+
onSelectionModeChange,
|
|
79
|
+
overrideActionHandler
|
|
80
|
+
});
|
|
81
|
+
const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef, isInSelectionMode } = baseListboxFunctionality.triggerProps;
|
|
82
|
+
const onFocus = (event)=>{
|
|
83
|
+
if (event.target === event.currentTarget) {
|
|
84
|
+
var _params_onOpenChange;
|
|
85
|
+
setOpen(true);
|
|
86
|
+
(_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
|
|
87
|
+
event,
|
|
88
|
+
type: 'focus',
|
|
89
|
+
open: true
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(baseOnBlur, (e)=>{
|
|
94
|
+
var _params_onOpenChange;
|
|
95
|
+
setOpen(false);
|
|
96
|
+
(_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
|
|
97
|
+
event: e,
|
|
98
|
+
type: 'focus',
|
|
99
|
+
open: false
|
|
100
|
+
});
|
|
101
|
+
}));
|
|
102
|
+
const [listboxRef, anchorRef] = (0, _useListboxPositioning.useListboxPositioning)({
|
|
103
|
+
fluid,
|
|
104
|
+
positioning: params.positioning
|
|
105
|
+
});
|
|
106
|
+
const listboxId = (0, _reactutilities.useId)('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
|
|
107
|
+
const cursorPositionPlugin = /*#__PURE__*/ _react.createElement(_CursorPositionPlugin.CursorPositionPlugin, {
|
|
108
|
+
setCursorPosition: setCursorPosition
|
|
109
|
+
});
|
|
110
|
+
const innerListbox = /*#__PURE__*/ _react.createElement(_reactinputlistbox.InputListbox, {
|
|
111
|
+
...params.listboxProps,
|
|
112
|
+
...baseListboxFunctionality.inputListboxProps,
|
|
113
|
+
id: listboxId,
|
|
114
|
+
ref: (0, _reactutilities.useMergedRefs)(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
|
|
115
|
+
});
|
|
116
|
+
const listbox = /*#__PURE__*/ _react.createElement(_PromptListboxMotion.PromptListboxMotion, {
|
|
117
|
+
visible: open
|
|
118
|
+
}, /*#__PURE__*/ _react.createElement("span", {
|
|
119
|
+
"aria-owns": open ? listboxId : undefined
|
|
120
|
+
}, open && (params.inline ? innerListbox : /*#__PURE__*/ _react.createElement(_reactcomponents.Portal, {
|
|
121
|
+
mountNode: params.mountNode
|
|
122
|
+
}, innerListbox))));
|
|
123
|
+
return {
|
|
124
|
+
promptListbox: listbox,
|
|
125
|
+
cursorPositionPlugin,
|
|
126
|
+
triggerProps: {
|
|
127
|
+
ref: triggerRef,
|
|
128
|
+
isInSelectionMode,
|
|
129
|
+
onFocus,
|
|
130
|
+
onKeyDown: baseOnKeyDown,
|
|
131
|
+
onBlur
|
|
132
|
+
},
|
|
133
|
+
containerRef: anchorRef
|
|
134
|
+
};
|
|
135
|
+
} //# sourceMappingURL=usePromptListboxFunctionalityV2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n InputListboxAction,\n InputListboxProps,\n UseInputListboxFunctionalityParams,\n OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\n\nexport type OnOpenChangeData = (\n | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n open: boolean;\n};\n\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Whether the listbox's width should take all the available space or only\n * the required space.\n *\n * @default false\n */\n fluid?: boolean;\n\n /**\n * Props to be passed to the InputListbox component\n */\n listboxProps?: Partial<InputListboxProps> & {\n ref?: React.RefObject<HTMLDivElement>;\n };\n\n /**\n * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n * Note, this prop is meant to be used with the following positioning props:\n * ```ts\n * usePromptListboxFunctionality({\n * positioning: {\n * position: 'above',\n * fallbackPositions: ['above']\n * }\n * });\n * ```\n * This is useful when using PromptListbox with other components such as ChatInput since\n * the input will always stay at the bottom therefore the listbox would always get cut.\n *\n * @default false\n */\n allowArrowUpNavigation?: boolean;\n\n /**\n * Whether to render the listbox inline or use a portal.\n */\n inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\n /**\n * Component to be rendered in the Input component. This should be passed to the listbox prop.\n */\n promptListbox: JSX.Element;\n /**\n * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n * work correctly.\n */\n triggerProps: {\n ref: React.RefObject<HTMLSpanElement>;\n /**\n * Whether the listbox is being used to go through options or the user is currently typing.\n */\n isInSelectionMode: boolean;\n } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n\n /**\n * Ref used to point which element the listbox should be anchored to. Most use cases\n * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n * this is provided directly to the component and not the slot).\n *\n * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n */\n containerRef: React.RefObject<ContainerElementType>;\n /**\n * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n * keyboard behavior. This should be passed as children in the PromptInput.\n */\n cursorPositionPlugin: JSX.Element;\n};\n\nexport function usePromptListboxFunctionality<\n TriggerElementType extends HTMLElement = HTMLSpanElement,\n ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n\n const overrideActionHandler: OverrideActionHandler = (\n e,\n { activeOption, action, activeDescendantController, isInSelectionMode },\n ) => {\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n let newAction: InputListboxAction | undefined = undefined;\n let newIsInSelection: boolean | undefined = undefined;\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Next':\n if (!isInSelectionMode && !atEnd) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n case 'Previous':\n if (!isInSelectionMode && !atStart) {\n newAction = 'Type';\n newIsInSelection = false;\n } else if (\n isInSelectionMode &&\n !allowArrowUpNavigation &&\n atEnd &&\n activeOption !== undefined &&\n activeOption.id === firstOption\n ) {\n newAction = 'Type';\n newIsInSelection = false;\n e.preventDefault();\n }\n break;\n case 'First':\n case 'Last':\n case 'PageDown':\n case 'PageUp':\n if (!isInSelectionMode) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n }\n\n const userOverrides = params.overrideActionHandler?.(e, {\n activeOption,\n action,\n activeDescendantController,\n isInSelectionMode,\n });\n\n return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n };\n\n const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const {\n onBlur: baseOnBlur,\n onKeyDown: baseOnKeyDown,\n ref: triggerRef,\n isInSelectionMode,\n } = baseListboxFunctionality.triggerProps;\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n params.onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const onBlur = useEventCallback(\n mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n setOpen(false);\n params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n }),\n );\n\n const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n fluid,\n positioning: params.positioning,\n });\n\n const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n const innerListbox = (\n <InputListbox\n {...params.listboxProps}\n {...baseListboxFunctionality.inputListboxProps}\n id={listboxId}\n ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n />\n );\n const listbox = (\n <PromptListboxMotion visible={open}>\n <span aria-owns={open ? listboxId : undefined}>\n {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n </span>\n </PromptListboxMotion>\n );\n\n return {\n promptListbox: listbox,\n cursorPositionPlugin,\n triggerProps: {\n ref: triggerRef,\n isInSelectionMode,\n onFocus,\n onKeyDown: baseOnKeyDown,\n onBlur,\n },\n containerRef: anchorRef,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","fluid","open","setOpen","useControllableState","state","cursorPosition","defaultState","overrideActionHandler","e","React","undefined","newIsInSelection","allowArrowUpNavigation","atEnd","activeDescendantController","first","isInSelectionMode","newAction","atStart","activeOption","id","firstOption","userOverrides","_params_overrideActionHandler","call","action","baseOnBlur","event","useInputListboxFunctionality","onKeyDown","baseOnKeyDown","ref","triggerRef","useEventCallback","triggerProps","onOpenChange","_params_onOpenChange","type","listboxRef","onBlur","cursorPositionPlugin","setCursorPosition","innerListbox","InputListbox","baseListboxFunctionality","listboxId","listbox","useListboxPositioning","PromptListboxMotion","positioning","inline","listboxProps","Portal","mountNode","createElement","CursorPositionPlugin","promptListbox","inputListboxProps","containerRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -9,25 +9,43 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
+
Option: function() {
|
|
13
|
+
return _reactinputlistbox.Option;
|
|
14
|
+
},
|
|
12
15
|
PromptListbox: function() {
|
|
13
16
|
return _PromptListbox.PromptListbox;
|
|
14
17
|
},
|
|
15
18
|
PromptOption: function() {
|
|
16
19
|
return _PromptOption.PromptOption;
|
|
17
20
|
},
|
|
21
|
+
optionClassNames: function() {
|
|
22
|
+
return _reactinputlistbox.optionClassNames;
|
|
23
|
+
},
|
|
18
24
|
promptListboxClassNames: function() {
|
|
19
25
|
return _PromptListbox.promptListboxClassNames;
|
|
20
26
|
},
|
|
21
27
|
promptOptionClassNames: function() {
|
|
22
28
|
return _PromptOption.promptOptionClassNames;
|
|
23
29
|
},
|
|
30
|
+
renderOption_unstable: function() {
|
|
31
|
+
return _reactinputlistbox.renderOption_unstable;
|
|
32
|
+
},
|
|
24
33
|
renderPromptListbox_unstable: function() {
|
|
25
34
|
return _PromptListbox.renderPromptListbox_unstable;
|
|
26
35
|
},
|
|
27
36
|
renderPromptOption_unstable: function() {
|
|
28
37
|
return _PromptOption.renderPromptOption_unstable;
|
|
29
38
|
},
|
|
39
|
+
useOptionStyles_unstable: function() {
|
|
40
|
+
return _reactinputlistbox.useOptionStyles_unstable;
|
|
41
|
+
},
|
|
42
|
+
useOption_unstable: function() {
|
|
43
|
+
return _reactinputlistbox.useOption_unstable;
|
|
44
|
+
},
|
|
30
45
|
usePromptListboxFunctionality: function() {
|
|
46
|
+
return _usePromptListboxFunctionalityV2.usePromptListboxFunctionality;
|
|
47
|
+
},
|
|
48
|
+
usePromptListboxFunctionalityDeprecated: function() {
|
|
31
49
|
return _usePromptListboxFunctionality.usePromptListboxFunctionality;
|
|
32
50
|
},
|
|
33
51
|
usePromptListboxStyles_unstable: function() {
|
|
@@ -44,6 +62,8 @@ _export(exports, {
|
|
|
44
62
|
}
|
|
45
63
|
});
|
|
46
64
|
const _PromptListbox = require("./PromptListbox");
|
|
65
|
+
const _usePromptListboxFunctionalityV2 = require("./components/utils/usePromptListboxFunctionalityV2");
|
|
47
66
|
const _usePromptListboxFunctionality = require("./components/utils/usePromptListboxFunctionality");
|
|
48
67
|
const _PromptOption = require("./PromptOption");
|
|
68
|
+
const _reactinputlistbox = require("@fluentui-copilot/react-input-listbox");
|
|
49
69
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData,\n ProcessedPromptListboxProps,\n UsePromptListboxFunctionality,\n UsePromptListboxFunctionalityParams,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n"],"names":["PromptListbox","PromptOption","promptListboxClassNames","promptOptionClassNames","renderPromptListbox_unstable","renderPromptOption_unstable","usePromptListboxFunctionality","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';\nexport type {\n OnOpenChangeData,\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData as OnOpenChangeDataDeprecated,\n ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n\nexport type {\n ActiveOptionChangeData,\n OptionProps,\n OptionSlots,\n OptionState,\n OptionValue,\n OptionOnSelectData,\n OverrideActionHandler,\n OverrideActionHandlerOptions,\n OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOption_unstable,\n useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["Option","PromptListbox","PromptOption","optionClassNames","promptListboxClassNames","promptOptionClassNames","renderOption_unstable","renderPromptListbox_unstable","renderPromptOption_unstable","useOptionStyles_unstable","useOption_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6CEA,MAAM;eAANA,yBAAM;;IA3CNC,aAAa;eAAbA,4BAAa;;IAwBbC,YAAY;eAAZA,0BAAY;;IAoBZC,gBAAgB;eAAhBA,mCAAgB;;IA3ChBC,uBAAuB;eAAvBA,sCAAuB;;IAwBvBC,sBAAsB;eAAtBA,oCAAsB;;IAoBtBC,qBAAqB;eAArBA,wCAAqB;;IA3CrBC,4BAA4B;eAA5BA,2CAA4B;;IAwB5BC,2BAA2B;eAA3BA,yCAA2B;;IAqB3BC,wBAAwB;eAAxBA,2CAAwB;;IADxBC,kBAAkB;eAAlBA,qCAAkB;;IAvCXC,6BAA6B;eAA7BA,8DAA6B;;IAOIC,uCAAuC;eAAxED,4DAAAA;;IAXPE,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAuBzBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;;+BAvBnB;iDAEuC;+CAO2C;8BAelF;mCAmBA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "PromptListbox for input components using EditorInput.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,10 +12,11 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/chat-input-plugins": "^0.4.
|
|
16
|
-
"@fluentui-copilot/react-chat-input-plugins": "^0.4.
|
|
17
|
-
"@fluentui-copilot/react-editor-input": "^0.4.
|
|
18
|
-
"@fluentui-copilot/react-
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "^0.4.2",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "^0.4.2",
|
|
17
|
+
"@fluentui-copilot/react-editor-input": "^0.4.3",
|
|
18
|
+
"@fluentui-copilot/react-input-listbox": "^0.1.2",
|
|
19
|
+
"@fluentui-copilot/react-prompt-input": "^0.5.3",
|
|
19
20
|
"@fluentui-copilot/react-provider": "^0.9.3",
|
|
20
21
|
"@fluentui-copilot/react-text-editor": "^0.4.1",
|
|
21
22
|
"@fluentui-copilot/text-editor": "^0.3.1",
|