@fluentui-copilot/react-prompt-listbox 0.0.4 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +95 -1
- package/CHANGELOG.md +30 -1
- package/dist/index.d.ts +18 -63
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.js +9 -6
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.js.map +1 -1
- package/lib/components/PromptOption/usePromptOption.js +0 -5
- package/lib/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js +22 -13
- package/lib/components/PromptOption/usePromptOptionStyles.styles.js.map +1 -1
- package/lib/components/utils/PromptListboxFunctionality.types.js.map +1 -1
- package/lib/components/utils/dropdownKeyActions.js +21 -5
- package/lib/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib/components/utils/{useComboboxPositioning.js → useListboxPositioning.js} +3 -2
- package/lib/components/utils/useListboxPositioning.js.map +1 -0
- package/lib/components/utils/usePromptListboxFunctionality.js +28 -36
- package/lib/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib/components/utils/useTriggerKeyDown.js +31 -11
- package/lib/components/utils/useTriggerKeyDown.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/plugins/CursorPositionPlugin.js +43 -0
- package/lib/plugins/CursorPositionPlugin.js.map +1 -0
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js +11 -20
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js +0 -3
- package/lib-commonjs/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js +33 -54
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.js.map +1 -1
- package/lib-commonjs/components/utils/PromptListboxFunctionality.types.js.map +1 -1
- package/lib-commonjs/components/utils/dropdownKeyActions.js +19 -5
- package/lib-commonjs/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/components/utils/{useComboboxPositioning.js → useListboxPositioning.js} +5 -4
- package/lib-commonjs/components/utils/useListboxPositioning.js.map +1 -0
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js +30 -34
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib-commonjs/components/utils/useTriggerKeyDown.js +27 -10
- package/lib-commonjs/components/utils/useTriggerKeyDown.js.map +1 -1
- package/lib-commonjs/index.js +0 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/plugins/CursorPositionPlugin.js +54 -0
- package/lib-commonjs/plugins/CursorPositionPlugin.js.map +1 -0
- package/package.json +17 -18
- package/lib/components/utils/useComboboxPositioning.js.map +0 -1
- package/lib/plugins/TextCursorPositionPlugin.js +0 -44
- package/lib/plugins/TextCursorPositionPlugin.js.map +0 -1
- package/lib-commonjs/components/utils/useComboboxPositioning.js.map +0 -1
- package/lib-commonjs/plugins/TextCursorPositionPlugin.js +0 -52
- package/lib-commonjs/plugins/TextCursorPositionPlugin.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,101 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 04 Sep 2024 18:11:23 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.2.0",
|
|
7
|
+
"version": "0.2.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "estebanmu@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
13
|
+
"commit": "46ebd259e0e1cd0bdeef96b5400553b0dcc318b1",
|
|
14
|
+
"comment": "feat: Add arrow up navigation, consolidate usage of getDropdownKeyDown, and update cursor plugin to track both start and end positions."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 21 Aug 2024 00:26:06 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.1.0",
|
|
22
|
+
"version": "0.1.0",
|
|
23
|
+
"comments": {
|
|
24
|
+
"none": [
|
|
25
|
+
{
|
|
26
|
+
"author": "tristan.watanabe@gmail.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
28
|
+
"commit": "85fc7f2580c8bad8ea04e2c73960204b4ca1c116",
|
|
29
|
+
"comment": "chore: update api.md file."
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "owcampbe@microsoft.com",
|
|
33
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
34
|
+
"commit": "27762790e2d38ca7090eb13352b2b9fe2d4788a6",
|
|
35
|
+
"comment": "chore: Applying package updates."
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
"patch": [
|
|
39
|
+
{
|
|
40
|
+
"author": "ololubek@microsoft.com",
|
|
41
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
42
|
+
"commit": "0a6327b6b174fc99abed7fa70ed0542e698bcf40",
|
|
43
|
+
"comment": "chore: bump react-components version to 9.54.10."
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "owcampbe@microsoft.com",
|
|
47
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
48
|
+
"commit": "0ae2e0d2d5118dde219c9ebddc091c000184a2ff",
|
|
49
|
+
"comment": "chore: Fix eslint error."
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"author": "estebanmu@microsoft.com",
|
|
53
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
54
|
+
"commit": "43e316d20417fa2a753adf92ceed00902dc6332b",
|
|
55
|
+
"comment": "fix: Don't hijack home, end, pgup, and pgdown keys and cleanup cursorplugin."
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
59
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
60
|
+
"commit": "6ce23774f5f2055977299510e8df454d86a1a313",
|
|
61
|
+
"comment": "chore: Removing shorthands' usage now that griffel supports them."
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
65
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
66
|
+
"commit": "907c63c4da894b41cad4601b30e0df6d9f269056",
|
|
67
|
+
"comment": "chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components)."
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"author": "estebanmu@microsoft.com",
|
|
71
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
72
|
+
"commit": "838c1e83ffd3b38c12651bfc16235e7d370d9ca3",
|
|
73
|
+
"comment": "feat: Add PromptListbox autosizing."
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"author": "jiangemma@microsoft.com",
|
|
77
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
78
|
+
"commit": "89eb22acc4fbdaa3c2b6cbafd2ffc5ea325ca222",
|
|
79
|
+
"comment": "fix: No longer set aria-activedescendant on click, and clear aria-activedescendant on blur of PromptListbox"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"author": "jiangemma@microsoft.com",
|
|
83
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
84
|
+
"commit": "0c623fdbcd9a2f037d09403c4e298b02668f204b",
|
|
85
|
+
"comment": "chore: Add unit and e2e tests for PromptListbox component and hook"
|
|
86
|
+
}
|
|
87
|
+
],
|
|
88
|
+
"minor": [
|
|
89
|
+
{
|
|
90
|
+
"author": "estebanmu@microsoft.com",
|
|
91
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
92
|
+
"commit": "cc08f744d3ecbb16ea423c49fe4210ecd3880edd",
|
|
93
|
+
"comment": "feat: Move PromptListbox, PromptInput, and PromptOption to stable."
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"date": "Thu, 15 Aug 2024 00:14:10 GMT",
|
|
6
100
|
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.4",
|
|
7
101
|
"version": "0.0.4",
|
|
8
102
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,38 @@
|
|
|
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 Wed, 04 Sep 2024 18:11:23 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.2.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.2.0)
|
|
8
|
+
|
|
9
|
+
Wed, 04 Sep 2024 18:11:23 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.1.0..@fluentui-copilot/react-prompt-listbox_v0.2.0)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- feat: Add arrow up navigation, consolidate usage of getDropdownKeyDown, and update cursor plugin to track both start and end positions. ([PR #2095](https://github.com/microsoft/fluentai/pull/2095) by estebanmu@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [0.1.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.1.0)
|
|
17
|
+
|
|
18
|
+
Wed, 21 Aug 2024 00:26:06 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.0.4..@fluentui-copilot/react-prompt-listbox_v0.1.0)
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- feat: Move PromptListbox, PromptInput, and PromptOption to stable. ([PR #2056](https://github.com/microsoft/fluentai/pull/2056) by estebanmu@microsoft.com)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- chore: bump react-components version to 9.54.10. ([PR #2018](https://github.com/microsoft/fluentai/pull/2018) by ololubek@microsoft.com)
|
|
28
|
+
- chore: Fix eslint error. ([PR #1997](https://github.com/microsoft/fluentai/pull/1997) by owcampbe@microsoft.com)
|
|
29
|
+
- fix: Don't hijack home, end, pgup, and pgdown keys and cleanup cursorplugin. ([PR #2054](https://github.com/microsoft/fluentai/pull/2054) by estebanmu@microsoft.com)
|
|
30
|
+
- chore: Removing shorthands' usage now that griffel supports them. ([PR #1994](https://github.com/microsoft/fluentai/pull/1994) by Humberto.Morimoto@microsoft.com)
|
|
31
|
+
- chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components). ([PR #1993](https://github.com/microsoft/fluentai/pull/1993) by Humberto.Morimoto@microsoft.com)
|
|
32
|
+
- feat: Add PromptListbox autosizing. ([PR #2030](https://github.com/microsoft/fluentai/pull/2030) by estebanmu@microsoft.com)
|
|
33
|
+
- fix: No longer set aria-activedescendant on click, and clear aria-activedescendant on blur of PromptListbox ([PR #2008](https://github.com/microsoft/fluentai/pull/2008) by jiangemma@microsoft.com)
|
|
34
|
+
- chore: Add unit and e2e tests for PromptListbox component and hook ([PR #1982](https://github.com/microsoft/fluentai/pull/1982) by jiangemma@microsoft.com)
|
|
35
|
+
|
|
7
36
|
## [0.0.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.3)
|
|
8
37
|
|
|
9
38
|
Mon, 05 Aug 2024 19:36:41 GMT
|
package/dist/index.d.ts
CHANGED
|
@@ -6,17 +6,15 @@ import type { ComboboxProps } from '@fluentui/react-components';
|
|
|
6
6
|
import type { ComboboxState } from '@fluentui/react-combobox';
|
|
7
7
|
import type { ComponentProps } from '@fluentui/react-components';
|
|
8
8
|
import type { ComponentState } from '@fluentui/react-components';
|
|
9
|
+
import type { EditorInputProps } from '@fluentui-copilot/react-editor-input';
|
|
9
10
|
import type { EventData } from '@fluentui/react-utilities';
|
|
10
11
|
import type { EventHandler } from '@fluentui/react-utilities';
|
|
11
12
|
import type { ForwardRefComponent } from '@fluentui/react-components';
|
|
12
|
-
import { InitialConfigType } from '@lexical/react/LexicalComposer';
|
|
13
|
-
import { LexicalEditor } from 'lexical';
|
|
14
13
|
import type { Listbox } from '@fluentui/react-components';
|
|
15
14
|
import type { ListboxContextValue } from '@fluentui/react-combobox';
|
|
16
15
|
import type { ListboxContextValue as ListboxContextValue_2 } from '@fluentui/react-components';
|
|
17
16
|
import type { OptionProps } from '@fluentui/react-components';
|
|
18
17
|
import type { OptionState } from '@fluentui/react-components';
|
|
19
|
-
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
|
|
20
18
|
import type { PortalProps } from '@fluentui/react-components';
|
|
21
19
|
import type { PositioningShorthand } from '@fluentui/react-components';
|
|
22
20
|
import * as React_2 from 'react';
|
|
@@ -24,60 +22,6 @@ import type { default as React_3 } from 'react';
|
|
|
24
22
|
import type { Slot } from '@fluentui/react-components';
|
|
25
23
|
import type { SlotClassNames } from '@fluentui/react-components';
|
|
26
24
|
|
|
27
|
-
/**
|
|
28
|
-
* EditorInput Props
|
|
29
|
-
*/
|
|
30
|
-
declare type EditorInputProps = Omit<ComponentProps<Partial<EditorInputSlots>, 'input'>, 'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'> & {
|
|
31
|
-
disabled?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* If defaultValue is a string, it will be added to the input on first render.
|
|
34
|
-
* If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.
|
|
35
|
-
*/
|
|
36
|
-
defaultValue?: string | (() => void);
|
|
37
|
-
/**
|
|
38
|
-
* Callback for when the user changes the value.
|
|
39
|
-
* TODO: Add proper event type for callback
|
|
40
|
-
*/
|
|
41
|
-
onChange?: (ev: any, data: EditorInputValueData) => void;
|
|
42
|
-
/**
|
|
43
|
-
* Callback for when content is pasted into the Editor.
|
|
44
|
-
*/
|
|
45
|
-
onPaste?: (ev: ClipboardEvent) => void;
|
|
46
|
-
/**
|
|
47
|
-
* When true, the input will be cleared when only whitespace is remaining.
|
|
48
|
-
* @default false
|
|
49
|
-
*/
|
|
50
|
-
trimWhiteSpace?: boolean;
|
|
51
|
-
/**
|
|
52
|
-
* Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.
|
|
53
|
-
*/
|
|
54
|
-
customNodes?: InitialConfigType['nodes'];
|
|
55
|
-
/**
|
|
56
|
-
* The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots
|
|
57
|
-
* @default LexicalPlainTextPlugin
|
|
58
|
-
*/
|
|
59
|
-
textPlugin?: typeof PlainTextPlugin;
|
|
60
|
-
/**
|
|
61
|
-
* Controls whether history is tracked to provide undo and redo functionality
|
|
62
|
-
* @default true
|
|
63
|
-
*/
|
|
64
|
-
history?: boolean;
|
|
65
|
-
editorRef?: React.RefObject<LexicalEditor>;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
declare type EditorInputSlots = {
|
|
69
|
-
root: NonNullable<Slot<'span'>>;
|
|
70
|
-
input: NonNullable<Slot<'span'>>;
|
|
71
|
-
placeholderValue?: Slot<'span'>;
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Data passed to the `onChange` callback when the chat input's value changes.
|
|
76
|
-
*/
|
|
77
|
-
declare type EditorInputValueData = {
|
|
78
|
-
value: string;
|
|
79
|
-
};
|
|
80
|
-
|
|
81
25
|
export declare type OnOpenChangeData = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
|
|
82
26
|
open: boolean;
|
|
83
27
|
};
|
|
@@ -203,12 +147,6 @@ declare type SelectionState = {
|
|
|
203
147
|
selectOption: (event: SelectionEvents, option: OptionValue) => void;
|
|
204
148
|
};
|
|
205
149
|
|
|
206
|
-
export declare const TextCursorPositionPlugin: React_2.FunctionComponent<TextCursorPositionPluginProps>;
|
|
207
|
-
|
|
208
|
-
export declare type TextCursorPositionPluginProps = {
|
|
209
|
-
setIsInLastPosition: (isInLastPosition: boolean) => void;
|
|
210
|
-
};
|
|
211
|
-
|
|
212
150
|
/**
|
|
213
151
|
* Create the state required to render PromptListbox.
|
|
214
152
|
*
|
|
@@ -274,6 +212,23 @@ export declare type UsePromptListboxFunctionalityParams = {
|
|
|
274
212
|
* @default false
|
|
275
213
|
*/
|
|
276
214
|
fluid?: boolean;
|
|
215
|
+
/**
|
|
216
|
+
* Whether to allow reaching the listbox options by arrowing up at the start of the input.
|
|
217
|
+
* Note, this prop is meant to be used with the following positioning props:
|
|
218
|
+
* ```ts
|
|
219
|
+
* usePromptListboxFunctionality({
|
|
220
|
+
* positioning: {
|
|
221
|
+
* position: 'above',
|
|
222
|
+
* fallbackPositions: ['above']
|
|
223
|
+
* }
|
|
224
|
+
* });
|
|
225
|
+
* ```
|
|
226
|
+
* This is useful when using PromptListbox with other components such as ChatInput since
|
|
227
|
+
* the input will always stay at the bottom therefore the listbox would always get cut.
|
|
228
|
+
*
|
|
229
|
+
* @default false
|
|
230
|
+
*/
|
|
231
|
+
allowArrowUpNavigation?: boolean;
|
|
277
232
|
};
|
|
278
233
|
|
|
279
234
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __styles, mergeClasses,
|
|
1
|
+
import { __styles, mergeClasses, tokens } from '@fluentui/react-components';
|
|
2
2
|
export const promptListboxClassNames = {
|
|
3
3
|
root: 'fai-PromptListbox'
|
|
4
4
|
};
|
|
@@ -8,10 +8,11 @@ export const promptListboxClassNames = {
|
|
|
8
8
|
const useStyles = __styles({
|
|
9
9
|
listbox: {
|
|
10
10
|
E5pizo: "f1hg901r",
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
Beyfa6y: 0,
|
|
12
|
+
Bbmb7ep: 0,
|
|
13
|
+
Btl43ni: 0,
|
|
14
|
+
B7oj6ja: 0,
|
|
15
|
+
Dimara: "ft85np5",
|
|
15
16
|
Bxyxcbc: "fmmk62d",
|
|
16
17
|
B7ck84d: "f1ewtqcl"
|
|
17
18
|
},
|
|
@@ -22,7 +23,9 @@ const useStyles = __styles({
|
|
|
22
23
|
Bj3rh1h: "f19g0ac"
|
|
23
24
|
}
|
|
24
25
|
}, {
|
|
25
|
-
d: [".f1hg901r{box-shadow:var(--shadow16);}", ".
|
|
26
|
+
d: [".f1hg901r{box-shadow:var(--shadow16);}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
27
|
+
p: -1
|
|
28
|
+
}], ".fmmk62d{max-height:80vh;}", ".f1ewtqcl{box-sizing:border-box;}", ".fjseox{display:none;}", ".f19g0ac{z-index:1;}"]
|
|
26
29
|
});
|
|
27
30
|
/**
|
|
28
31
|
* Apply styling to the PromptListbox slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses,
|
|
1
|
+
{"version":3,"sources":["usePromptListboxStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { PromptListboxSlots, PromptListboxState } from './PromptListbox.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptListboxClassNames: SlotClassNames<PromptListboxSlots> = {\n root: 'fai-PromptListbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n listbox: {\n boxShadow: tokens.shadow16,\n borderRadius: tokens.borderRadiusMedium,\n maxHeight: '80vh',\n boxSizing: 'border-box',\n },\n\n listboxCollapsed: {\n display: 'none',\n },\n\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n inlineListbox: {\n zIndex: 1,\n },\n});\n\n/**\n * Apply styling to the PromptListbox slots based on the state\n */\nexport const usePromptListboxStyles_unstable = (state: PromptListboxState): PromptListboxState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n promptListboxClassNames.root,\n styles.listbox,\n state.inlinePopup && styles.inlineListbox,\n !state.open && styles.listboxCollapsed,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","promptListboxClassNames","root","useStyles","listbox","boxShadow","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","listboxCollapsed","display","inlineListbox","zIndex","usePromptListboxStyles_unstable","state","styles","className","inlinePopup","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAI9E,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BM,SAAS;QACPC,WAAWL,OAAOM,QAAQ;QAC1BC,cAAcP,OAAOQ,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,kBAAkB;QAChBC,SAAS;IACX;IAEA,+GAA+G;IAC/G,0GAA0G;IAC1GC,eAAe;QACbC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGnB,aACrBE,wBAAwBC,IAAI,EAC5Be,OAAOb,OAAO,EACdY,MAAMG,WAAW,IAAIF,OAAOJ,aAAa,EACzC,CAACG,MAAMI,IAAI,IAAIH,OAAON,gBAAgB,EACtCK,MAAMd,IAAI,CAACgB,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';
|
|
3
3
|
import { useListboxContext_unstable } from '@fluentui/react-combobox';
|
|
4
|
-
import { useActiveDescendantContext } from '@fluentui/react-aria';
|
|
5
4
|
// If you add JSX to this file, be sure to change the file type to .tsx
|
|
6
5
|
/**
|
|
7
6
|
* Create the state required to render PromptOption.
|
|
@@ -32,9 +31,6 @@ export const usePromptOption_unstable = (props, ref) => {
|
|
|
32
31
|
value: optionValue
|
|
33
32
|
}), [id, disabled, optionText, optionValue]);
|
|
34
33
|
// context values
|
|
35
|
-
const {
|
|
36
|
-
controller: activeDescendantController
|
|
37
|
-
} = useActiveDescendantContext();
|
|
38
34
|
const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);
|
|
39
35
|
const selected = useListboxContext_unstable(ctx => {
|
|
40
36
|
const selectedOptions = ctx.selectedOptions;
|
|
@@ -48,7 +44,6 @@ export const usePromptOption_unstable = (props, ref) => {
|
|
|
48
44
|
event.preventDefault();
|
|
49
45
|
return;
|
|
50
46
|
}
|
|
51
|
-
activeDescendantController.focus(id);
|
|
52
47
|
// handle selection change
|
|
53
48
|
selectOption(event, optionData);
|
|
54
49
|
onOptionClick(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useListboxContext_unstable } from '@fluentui/react-combobox';\nimport
|
|
1
|
+
{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useListboxContext_unstable } from '@fluentui/react-combobox';\nimport type { PromptOptionProps, PromptOptionState } from './PromptOption.types';\nimport type { OptionValue } from '../utils/OptionCollection.types';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render PromptOption.\n *\n * The returned state can be modified with hooks such as usePromptOptionStyles_unstable,\n * before being passed to renderPromptOption_unstable.\n *\n * @param props - props from this instance of PromptOption\n * @param ref - reference to root HTMLElement of PromptOption\n */\nexport const usePromptOption_unstable = (\n props: PromptOptionProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptOptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLDivElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const selected = useListboxContext_unstable(ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n });\n const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n onOptionClick(event);\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? true : undefined,\n id,\n role: 'menuitem',\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n disabled,\n selected,\n };\n};\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n"],"names":["React","getIntrinsicElementProps","slot","useId","useMergedRefs","useListboxContext_unstable","usePromptOption_unstable","props","ref","children","disabled","text","value","optionRef","useRef","optionText","getTextString","optionValue","id","optionData","useMemo","registerOption","ctx","selected","selectedOptions","undefined","find","o","selectOption","onOptionClick","onClick","event","preventDefault","useEffect","current","components","root","always","role","elementType","textString","hasNonStringChild","Children","forEach","child","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,EAAEC,aAAa,QAAQ,6BAA6B;AAClG,SAASC,0BAA0B,QAAQ,2BAA2B;AAItE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAC5C,MAAMM,YAAYb,MAAMc,MAAM,CAAiB;IAC/C,MAAMC,aAAaC,cAAcL,MAAMF;IACvC,MAAMQ,cAAcL,kBAAAA,mBAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAMG,KAAKf,MAAM,iBAAiBI,MAAMW,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAanB,MAAMoB,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIR;YAAUC,MAAMI;YAAYH,OAAOK;QAAY,CAAA,GAC5D;QAACC;QAAIR;QAAUK;QAAYE;KAAY;IAGzC,iBAAiB;IACjB,MAAMI,iBAAiBhB,2BAA2BiB,CAAAA,MAAOA,IAAID,cAAc;IAC3E,MAAME,WAAWlB,2BAA2BiB,CAAAA;QAC1C,MAAME,kBAAkBF,IAAIE,eAAe;QAE3C,OAAOP,gBAAgBQ,aAAaD,gBAAgBE,IAAI,CAACC,CAAAA,IAAKA,MAAMV,iBAAiBQ;IACvF;IACA,MAAMG,eAAevB,2BAA2BiB,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgBxB,2BAA2BiB,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,MAAMC,UAAU,CAACC;YAUfxB;QATA,IAAIG,UAAU;YACZqB,MAAMC,cAAc;YACpB;QACF;QAEA,0BAA0B;QAC1BJ,aAAaG,OAAOZ;QAEpBU,cAAcE;SACdxB,iBAAAA,MAAMuB,OAAO,cAAbvB,qCAAAA,oBAAAA,OAAgBwB;IAClB;IAEA,oCAAoC;IACpC/B,MAAMiC,SAAS,CAAC;QACd,IAAIf,MAAML,UAAUqB,OAAO,EAAE;YAC3B,OAAOb,eAAeF,YAAYN,UAAUqB,OAAO;QACrD;IACF,GAAG;QAAChB;QAAIC;QAAYE;KAAe;IAEnC,OAAO;QACLc,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlC,KAAKmC,MAAM,CACfpC,yBAAyB,OAAO;YAC9BO,KAAKJ,cAAcI,KAAKK;YACxB,iBAAiBH,WAAW,OAAOe;YACnCP;YACAoB,MAAM;YACN,GAAG/B,KAAK;YACRuB;QACF,IACA;YAAES,aAAa;QAAM;QAEvB7B;QACAa;IACF;AACF,EAAE;AAEF,SAASP,cAAcL,IAAwB,EAAEF,QAAyB;IACxE,IAAIE,SAASc,WAAW;QACtB,OAAOd;IACT;IAEA,IAAI6B,aAAa;IACjB,IAAIC,oBAAoB;IACxBzC,MAAM0C,QAAQ,CAACC,OAAO,CAAClC,UAAUmC,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAON;AACT"}
|
|
@@ -9,10 +9,11 @@ export const promptOptionClassNames = {
|
|
|
9
9
|
const useStyles = __styles({
|
|
10
10
|
root: {
|
|
11
11
|
Bt984gj: "f122n59",
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
Beyfa6y: 0,
|
|
13
|
+
Bbmb7ep: 0,
|
|
14
|
+
Btl43ni: 0,
|
|
15
|
+
B7oj6ja: 0,
|
|
16
|
+
Dimara: "ft85np5",
|
|
16
17
|
sj55zd: "f19n0e5",
|
|
17
18
|
i8kkvl: "f1ufnopg",
|
|
18
19
|
Bceei9c: "f1k6fduh",
|
|
@@ -20,10 +21,11 @@ const useStyles = __styles({
|
|
|
20
21
|
Bahqtrf: "fk6fouc",
|
|
21
22
|
Be2twd7: "fkhj508",
|
|
22
23
|
Bg96gwp: "f1i3iumi",
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
Byoj8tv: 0,
|
|
25
|
+
uwmqm3: 0,
|
|
26
|
+
z189sj: 0,
|
|
27
|
+
z8tnut: 0,
|
|
28
|
+
B0ocmuz: "fm5eomj",
|
|
27
29
|
qhf8xq: "f10pi13n",
|
|
28
30
|
Jwef8y: "f1knas48",
|
|
29
31
|
Bi91k9c: "feu1g3u",
|
|
@@ -47,10 +49,11 @@ const useStyles = __styles({
|
|
|
47
49
|
Be3o27t: ["fobu5kn", "f1dbet5w"],
|
|
48
50
|
Bewtojm: "f1ap9jj5",
|
|
49
51
|
B37u8z8: ["f1dbet5w", "fobu5kn"],
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
Fffuxt: 0,
|
|
53
|
+
Bttcd12: 0,
|
|
54
|
+
Beitzug: 0,
|
|
55
|
+
Bqougee: 0,
|
|
56
|
+
B86i8pi: "f1kurthe",
|
|
54
57
|
Bhijsxg: "fwq15dy",
|
|
55
58
|
kktds4: "f1pb3wry",
|
|
56
59
|
Bmau3bo: ["ftjv2f4", "f1flhb1f"],
|
|
@@ -65,7 +68,13 @@ const useStyles = __styles({
|
|
|
65
68
|
B7iucu3: "f1cyfu5x"
|
|
66
69
|
}
|
|
67
70
|
}, {
|
|
68
|
-
d: [".f122n59{align-items:center;}",
|
|
71
|
+
d: [".f122n59{align-items:center;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
72
|
+
p: -1
|
|
73
|
+
}], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}", {
|
|
74
|
+
p: -1
|
|
75
|
+
}], ".f10pi13n{position:relative;}", ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}", ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}", ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}", ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}", ".f1n5bo3l[data-activedescendant-focusvisible]::after{border-top-width:var(--strokeWidthThick);}", ".fp57yr3[data-activedescendant-focusvisible]::after{border-right-width:var(--strokeWidthThick);}", ".f48q4c[data-activedescendant-focusvisible]::after{border-left-width:var(--strokeWidthThick);}", ".fg547j0[data-activedescendant-focusvisible]::after{border-bottom-width:var(--strokeWidthThick);}", ".fuyp35s[data-activedescendant-focusvisible]::after{border-top-style:solid;}", ".f1a9nstl[data-activedescendant-focusvisible]::after{border-right-style:solid;}", ".fhk0hgg[data-activedescendant-focusvisible]::after{border-left-style:solid;}", ".f1rdp6f1[data-activedescendant-focusvisible]::after{border-bottom-style:solid;}", ".ffd7rjx[data-activedescendant-focusvisible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fobu5kn[data-activedescendant-focusvisible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1dbet5w[data-activedescendant-focusvisible]::after{border-left-color:var(--colorStrokeFocus2);}", ".f1ap9jj5[data-activedescendant-focusvisible]::after{border-bottom-color:var(--colorStrokeFocus2);}", [".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}", {
|
|
76
|
+
p: -1
|
|
77
|
+
}], ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"],
|
|
69
78
|
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}"],
|
|
70
79
|
a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}"],
|
|
71
80
|
m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n root: 'fai-PromptOption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n
|
|
1
|
+
{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n root: 'fai-PromptOption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n position: 'relative',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground1Hover,\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n\n active: {\n [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.border(tokens.strokeWidthThick, `solid`, tokens.colorStrokeFocus2),\n borderRadius: tokens.borderRadiusMedium,\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/**\n * Apply styling to the PromptOption slots based on the state\n */\nexport const usePromptOptionStyles_unstable = (state: PromptOptionState): PromptOptionState => {\n 'use no memo';\n\n const { disabled } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n promptOptionClassNames.root,\n styles.root,\n styles.active,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","promptOptionClassNames","root","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","strokeWidthThick","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","usePromptOptionStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAC1F,SAASC,uCAAuC,QAAQ,uBAAuB;AAI/E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,YAAY;QACZC,cAAcN,OAAOO,kBAAkB;QACvCC,OAAOR,OAAOS,uBAAuB;QACrCC,WAAWV,OAAOW,mBAAmB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAYd,OAAOe,cAAc;QACjCC,UAAUhB,OAAOiB,eAAe;QAChCC,YAAYlB,OAAOmB,iBAAiB;QACpCC,SAAS,CAAC,EAAEpB,OAAOqB,qBAAqB,CAAC,CAAC,EAAErB,OAAOsB,kBAAkB,CAAC,CAAC;QACvEC,UAAU;QAEV,UAAU;YACRC,iBAAiBxB,OAAOyB,4BAA4B;YACpDjB,OAAOR,OAAO0B,4BAA4B;QAC5C;QAEA,WAAW;YACTF,iBAAiBxB,OAAO2B,8BAA8B;YACtDnB,OAAOR,OAAO4B,8BAA8B;QAC9C;IACF;IAEAC,QAAQ;QACN,CAAC,CAAC,CAAC,EAAE5B,wCAAwC,QAAQ,CAAC,CAAC,EAAE;YACvD6B,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGjC,WAAWkC,MAAM,CAACjC,OAAOkC,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAElC,OAAOmC,iBAAiB,CAAC;YAChF7B,cAAcN,OAAOO,kBAAkB;YAEvC6B,KAAK;YACLC,QAAQ;YACRC,MAAM;YACNC,OAAO;QACT;IACF;IAEAC,UAAU;QACRhC,OAAOR,OAAOyC,8BAA8B;QAE5C,UAAU;YACRjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,kCAAkC;YAChCjC,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASzC;IACfwC,MAAMzC,IAAI,CAAC2C,SAAS,GAAGhD,aACrBI,uBAAuBC,IAAI,EAC3B0C,OAAO1C,IAAI,EACX0C,OAAOhB,MAAM,EACbW,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMzC,IAAI,CAAC2C,SAAS;IAGtB,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PromptListboxFunctionality.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { PromptListboxProps } from '../../components/PromptListbox';\nimport type { PositioningShorthand } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\n\n// Note: While we are removing multiselect, we are keeping the logic and disabling it\n// in case it's needed in the future.\nexport type ProcessedPromptListboxProps = Partial<\n Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>\n> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref?: React.MutableRefObject<any>;\n};\n\nexport type UsePromptListboxFunctionality = {\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 * 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n containerRef: React.MutableRefObject<any>;\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 type UsePromptListboxFunctionalityParams = {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Callback to call when the selection mode (selecting an action vs typing) changes.\n */\n onSelectionModeChange?: (isInSelectionMode: boolean) => void;\n\n /**\n * Props to be passed to the ListboxComponent\n */\n listboxProps?: ProcessedPromptListboxProps;\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\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"],"names":[],"rangeMappings":"","mappings":"
|
|
1
|
+
{"version":3,"sources":["PromptListboxFunctionality.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { PromptListboxProps } from '../../components/PromptListbox';\nimport type { PositioningShorthand } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\n\n// Note: While we are removing multiselect, we are keeping the logic and disabling it\n// in case it's needed in the future.\nexport type ProcessedPromptListboxProps = Partial<\n Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>\n> & {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref?: React.MutableRefObject<any>;\n};\n\nexport type UsePromptListboxFunctionality = {\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 * 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n containerRef: React.MutableRefObject<any>;\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 type UsePromptListboxFunctionalityParams = {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Callback to call when the selection mode (selecting an action vs typing) changes.\n */\n onSelectionModeChange?: (isInSelectionMode: boolean) => void;\n\n /**\n * Props to be passed to the ListboxComponent\n */\n listboxProps?: ProcessedPromptListboxProps;\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 * 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\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"],"names":[],"rangeMappings":"","mappings":"AA2FA,WAME"}
|
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export function getDropdownActionFromKey(e, options) {
|
|
9
9
|
const {
|
|
10
|
-
|
|
10
|
+
cursorPosition,
|
|
11
|
+
allowArrowUpNavigation,
|
|
12
|
+
isInSelectionMode
|
|
11
13
|
} = options;
|
|
12
14
|
const code = e.key;
|
|
13
15
|
const {
|
|
@@ -25,17 +27,31 @@ export function getDropdownActionFromKey(e, options) {
|
|
|
25
27
|
return 'CloseSelect';
|
|
26
28
|
}
|
|
27
29
|
// navigation interactions
|
|
30
|
+
const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
|
|
31
|
+
const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
|
|
28
32
|
if (code === keys.ArrowDown) {
|
|
29
|
-
|
|
33
|
+
if (atEnd) {
|
|
34
|
+
return 'Next';
|
|
35
|
+
} else if (atStart && isInSelectionMode) {
|
|
36
|
+
return 'Next';
|
|
37
|
+
}
|
|
38
|
+
return 'Type';
|
|
30
39
|
}
|
|
31
40
|
if (code === keys.ArrowUp) {
|
|
32
|
-
|
|
41
|
+
if (atEnd && isInSelectionMode) {
|
|
42
|
+
return 'Previous';
|
|
43
|
+
} else if (atStart && !isInSelectionMode) {
|
|
44
|
+
return 'Next';
|
|
45
|
+
} else if (atStart && isInSelectionMode) {
|
|
46
|
+
return 'Previous';
|
|
47
|
+
}
|
|
48
|
+
return 'Type';
|
|
33
49
|
}
|
|
34
50
|
if (code === keys.Home) {
|
|
35
|
-
return 'First';
|
|
51
|
+
return atEnd || atStart ? 'First' : 'Type';
|
|
36
52
|
}
|
|
37
53
|
if (code === keys.End) {
|
|
38
|
-
return 'Last';
|
|
54
|
+
return atEnd || atStart ? 'Last' : 'Type';
|
|
39
55
|
}
|
|
40
56
|
if (code === keys.PageUp) {
|
|
41
57
|
return 'PageUp';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case.\n */\n\nimport * as keys from '@fluentui/keyboard-keys';\nimport type * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n | 'CloseSelect'\n | 'First'\n | 'Last'\n | 'Next'\n | 'None'\n | 'PageDown'\n | 'PageUp'\n | 'Previous'\n | 'Select'\n | 'Tab'\n | 'Type';\n\nexport interface DropdownActionOptions {\n open?: boolean;\n multiselect?: boolean;\n
|
|
1
|
+
{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["/**\n * Note, this is mainly brought from Fluent UI, only removed the closing and\n * opening logic since that's not needed for this use case.\n */\n\nimport * as keys from '@fluentui/keyboard-keys';\nimport type * as React from 'react';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n | 'CloseSelect'\n | 'First'\n | 'Last'\n | 'Next'\n | 'None'\n | 'PageDown'\n | 'PageUp'\n | 'Previous'\n | 'Select'\n | 'Tab'\n | 'Type';\n\nexport interface DropdownActionOptions {\n open?: boolean;\n multiselect?: boolean;\n cursorPosition: CursorPosition;\n allowArrowUpNavigation: boolean;\n isInSelectionMode: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n e: KeyboardEvent | React.KeyboardEvent,\n options: DropdownActionOptions,\n): DropdownActions {\n const { cursorPosition, allowArrowUpNavigation, isInSelectionMode } = options;\n const code = e.key;\n const { altKey, ctrlKey, key, metaKey } = e;\n\n // typing action occurs whether open or closed\n if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n return 'Type';\n }\n\n // select or close actions\n if ((code === keys.ArrowUp && altKey) || code === keys.Enter) {\n return 'CloseSelect';\n }\n\n // navigation interactions\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n if (code === keys.ArrowDown) {\n if (atEnd) {\n return 'Next';\n } else if (atStart && isInSelectionMode) {\n return 'Next';\n }\n return 'Type';\n }\n if (code === keys.ArrowUp) {\n if (atEnd && isInSelectionMode) {\n return 'Previous';\n } else if (atStart && !isInSelectionMode) {\n return 'Next';\n } else if (atStart && isInSelectionMode) {\n return 'Previous';\n }\n return 'Type';\n }\n if (code === keys.Home) {\n return atEnd || atStart ? 'First' : 'Type';\n }\n if (code === keys.End) {\n return atEnd || atStart ? 'Last' : 'Type';\n }\n if (code === keys.PageUp) {\n return 'PageUp';\n }\n if (code === keys.PageDown) {\n return 'PageDown';\n }\n if (code === keys.Tab) {\n return 'Tab';\n }\n\n // if nothing matched, return none\n return 'None';\n}\n"],"names":["keys","getDropdownActionFromKey","e","options","cursorPosition","allowArrowUpNavigation","isInSelectionMode","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowUp","Enter","atStart","atEnd","ArrowDown","Home","End","PageUp","PageDown","Tab"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;CAGC,GAED,YAAYA,UAAU,0BAA0B;AA6BhD;;CAEC,GACD,OAAO,SAASC,yBACdC,CAAsC,EACtCC,OAA8B;IAE9B,MAAM,EAAEC,cAAc,EAAEC,sBAAsB,EAAEC,iBAAiB,EAAE,GAAGH;IACtE,MAAMI,OAAOL,EAAEM,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGT;IAE1C,8CAA8C;IAC9C,IAAIM,IAAII,MAAM,KAAK,KAAKL,SAASP,KAAKa,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAI,AAACJ,SAASP,KAAKc,OAAO,IAAIL,UAAWF,SAASP,KAAKe,KAAK,EAAE;QAC5D,OAAO;IACT;IAEA,0BAA0B;IAC1B,MAAMC,UAAUX,0BAA2BD,CAAAA,mBAAmB,WAAWA,mBAAmB,WAAU;IACtG,MAAMa,QAAQb,mBAAmB,SAASA,mBAAmB;IAC7D,IAAIG,SAASP,KAAKkB,SAAS,EAAE;QAC3B,IAAID,OAAO;YACT,OAAO;QACT,OAAO,IAAID,WAAWV,mBAAmB;YACvC,OAAO;QACT;QACA,OAAO;IACT;IACA,IAAIC,SAASP,KAAKc,OAAO,EAAE;QACzB,IAAIG,SAASX,mBAAmB;YAC9B,OAAO;QACT,OAAO,IAAIU,WAAW,CAACV,mBAAmB;YACxC,OAAO;QACT,OAAO,IAAIU,WAAWV,mBAAmB;YACvC,OAAO;QACT;QACA,OAAO;IACT;IACA,IAAIC,SAASP,KAAKmB,IAAI,EAAE;QACtB,OAAOF,SAASD,UAAU,UAAU;IACtC;IACA,IAAIT,SAASP,KAAKoB,GAAG,EAAE;QACrB,OAAOH,SAASD,UAAU,SAAS;IACrC;IACA,IAAIT,SAASP,KAAKqB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAId,SAASP,KAAKsB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAIf,SAASP,KAAKuB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Brought from Fluent UI
|
|
2
2
|
import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
|
|
3
|
-
export function
|
|
3
|
+
export function useListboxPositioning(props) {
|
|
4
4
|
const {
|
|
5
5
|
positioning,
|
|
6
6
|
fluid
|
|
@@ -16,6 +16,7 @@ export function useComboboxPositioning(props) {
|
|
|
16
16
|
},
|
|
17
17
|
fallbackPositions: fallbackPositions,
|
|
18
18
|
matchTargetSize: fluid ? 'width' : undefined,
|
|
19
|
+
autoSize: true,
|
|
19
20
|
...resolvePositioningShorthand(positioning)
|
|
20
21
|
};
|
|
21
22
|
const {
|
|
@@ -24,4 +25,4 @@ export function useComboboxPositioning(props) {
|
|
|
24
25
|
} = usePositioning(popperOptions);
|
|
25
26
|
return [containerRef, targetRef];
|
|
26
27
|
}
|
|
27
|
-
//# sourceMappingURL=
|
|
28
|
+
//# sourceMappingURL=useListboxPositioning.js.map
|
|
@@ -0,0 +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 { ComboboxBaseProps } from '@fluentui/react-combobox';\nimport type { UsePromptListboxFunctionalityParams } from './PromptListboxFunctionality.types';\nimport type { PositioningShorthandValue } from '@fluentui/react-positioning';\n\nexport function useListboxPositioning(\n props: ComboboxBaseProps & Required<Pick<UsePromptListboxFunctionalityParams, 'fluid'>>,\n): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n triggerRef: React.MutableRefObject<any>,\n] {\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 { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","useListboxPositioning","props","positioning","fluid","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","undefined","autoSize","targetRef","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,yBAAyB;AAEzB,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAM1F,OAAO,SAASC,sBACdC,KAAuF;IAOvF,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,SAAS,EAAEC,YAAY,EAAE,GAAGhB,eAAeM;IAEnD,OAAO;QAACU;QAAcD;KAAU;AAClC"}
|