@fluentui-copilot/react-prompt-listbox 0.0.4 → 0.1.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 +80 -1
- package/CHANGELOG.md +21 -1
- package/dist/index.d.ts +1 -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/dropdownKeyActions.js +5 -5
- package/lib/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib/components/utils/useComboboxPositioning.js +1 -0
- package/lib/components/utils/useComboboxPositioning.js.map +1 -1
- package/lib/components/utils/usePromptListboxFunctionality.js +10 -8
- package/lib/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib/components/utils/useTriggerKeyDown.js +2 -2
- 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 +42 -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/dropdownKeyActions.js +5 -5
- package/lib-commonjs/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/components/utils/useComboboxPositioning.js +1 -0
- package/lib-commonjs/components/utils/useComboboxPositioning.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js +9 -7
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib-commonjs/components/utils/useTriggerKeyDown.js +2 -2
- 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 +53 -0
- package/lib-commonjs/plugins/CursorPositionPlugin.js.map +1 -0
- package/package.json +15 -16
- package/lib/plugins/TextCursorPositionPlugin.js +0 -44
- package/lib/plugins/TextCursorPositionPlugin.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,86 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 21 Aug 2024 00:24:51 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.1.0",
|
|
7
|
+
"version": "0.1.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
13
|
+
"commit": "85fc7f2580c8bad8ea04e2c73960204b4ca1c116",
|
|
14
|
+
"comment": "chore: update api.md file."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "owcampbe@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
19
|
+
"commit": "27762790e2d38ca7090eb13352b2b9fe2d4788a6",
|
|
20
|
+
"comment": "chore: Applying package updates."
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"patch": [
|
|
24
|
+
{
|
|
25
|
+
"author": "ololubek@microsoft.com",
|
|
26
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
27
|
+
"commit": "0a6327b6b174fc99abed7fa70ed0542e698bcf40",
|
|
28
|
+
"comment": "chore: bump react-components version to 9.54.10."
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "owcampbe@microsoft.com",
|
|
32
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
33
|
+
"commit": "0ae2e0d2d5118dde219c9ebddc091c000184a2ff",
|
|
34
|
+
"comment": "chore: Fix eslint error."
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "estebanmu@microsoft.com",
|
|
38
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
39
|
+
"commit": "43e316d20417fa2a753adf92ceed00902dc6332b",
|
|
40
|
+
"comment": "fix: Don't hijack home, end, pgup, and pgdown keys and cleanup cursorplugin."
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
44
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
45
|
+
"commit": "6ce23774f5f2055977299510e8df454d86a1a313",
|
|
46
|
+
"comment": "chore: Removing shorthands' usage now that griffel supports them."
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
50
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
51
|
+
"commit": "907c63c4da894b41cad4601b30e0df6d9f269056",
|
|
52
|
+
"comment": "chore: Bumping versions of @fluentui/* and @griffel/* packages to latest (corresponding to version 9.54.8 of @fluentui/react-components)."
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"author": "estebanmu@microsoft.com",
|
|
56
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
57
|
+
"commit": "838c1e83ffd3b38c12651bfc16235e7d370d9ca3",
|
|
58
|
+
"comment": "feat: Add PromptListbox autosizing."
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "jiangemma@microsoft.com",
|
|
62
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
63
|
+
"commit": "89eb22acc4fbdaa3c2b6cbafd2ffc5ea325ca222",
|
|
64
|
+
"comment": "fix: No longer set aria-activedescendant on click, and clear aria-activedescendant on blur of PromptListbox"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "jiangemma@microsoft.com",
|
|
68
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
69
|
+
"commit": "0c623fdbcd9a2f037d09403c4e298b02668f204b",
|
|
70
|
+
"comment": "chore: Add unit and e2e tests for PromptListbox component and hook"
|
|
71
|
+
}
|
|
72
|
+
],
|
|
73
|
+
"minor": [
|
|
74
|
+
{
|
|
75
|
+
"author": "estebanmu@microsoft.com",
|
|
76
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
77
|
+
"commit": "cc08f744d3ecbb16ea423c49fe4210ecd3880edd",
|
|
78
|
+
"comment": "feat: Move PromptListbox, PromptInput, and PromptOption to stable."
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"date": "Thu, 15 Aug 2024 00:14:10 GMT",
|
|
6
85
|
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.4",
|
|
7
86
|
"version": "0.0.4",
|
|
8
87
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,29 @@
|
|
|
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, 21 Aug 2024 00:24:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.1.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.1.0)
|
|
8
|
+
|
|
9
|
+
Wed, 21 Aug 2024 00:24:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.0.4..@fluentui-copilot/react-prompt-listbox_v0.1.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: Move PromptListbox, PromptInput, and PromptOption to stable. ([PR #2056](https://github.com/microsoft/fluentai/pull/2056) by estebanmu@microsoft.com)
|
|
15
|
+
|
|
16
|
+
### Patches
|
|
17
|
+
|
|
18
|
+
- chore: bump react-components version to 9.54.10. ([PR #2018](https://github.com/microsoft/fluentai/pull/2018) by ololubek@microsoft.com)
|
|
19
|
+
- chore: Fix eslint error. ([PR #1997](https://github.com/microsoft/fluentai/pull/1997) by owcampbe@microsoft.com)
|
|
20
|
+
- 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)
|
|
21
|
+
- chore: Removing shorthands' usage now that griffel supports them. ([PR #1994](https://github.com/microsoft/fluentai/pull/1994) by Humberto.Morimoto@microsoft.com)
|
|
22
|
+
- 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)
|
|
23
|
+
- feat: Add PromptListbox autosizing. ([PR #2030](https://github.com/microsoft/fluentai/pull/2030) by estebanmu@microsoft.com)
|
|
24
|
+
- 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)
|
|
25
|
+
- chore: Add unit and e2e tests for PromptListbox component and hook ([PR #1982](https://github.com/microsoft/fluentai/pull/1982) by jiangemma@microsoft.com)
|
|
26
|
+
|
|
7
27
|
## [0.0.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.3)
|
|
8
28
|
|
|
9
29
|
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
|
*
|
|
@@ -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"}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export function getDropdownActionFromKey(e, options) {
|
|
9
9
|
const {
|
|
10
|
-
|
|
10
|
+
cursorPosition
|
|
11
11
|
} = options;
|
|
12
12
|
const code = e.key;
|
|
13
13
|
const {
|
|
@@ -26,16 +26,16 @@ export function getDropdownActionFromKey(e, options) {
|
|
|
26
26
|
}
|
|
27
27
|
// navigation interactions
|
|
28
28
|
if (code === keys.ArrowDown) {
|
|
29
|
-
return
|
|
29
|
+
return cursorPosition === 'end' ? 'Next' : 'Type';
|
|
30
30
|
}
|
|
31
31
|
if (code === keys.ArrowUp) {
|
|
32
|
-
return
|
|
32
|
+
return cursorPosition === 'end' ? 'Previous' : 'Type';
|
|
33
33
|
}
|
|
34
34
|
if (code === keys.Home) {
|
|
35
|
-
return 'First';
|
|
35
|
+
return cursorPosition === 'end' ? 'First' : 'Type';
|
|
36
36
|
}
|
|
37
37
|
if (code === keys.End) {
|
|
38
|
-
return 'Last';
|
|
38
|
+
return cursorPosition === 'end' ? 'Last' : 'Type';
|
|
39
39
|
}
|
|
40
40
|
if (code === keys.PageUp) {
|
|
41
41
|
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}\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 } = 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 if (code === keys.ArrowDown) {\n return cursorPosition === 'end' ? 'Next' : 'Type';\n }\n if (code === keys.ArrowUp) {\n return cursorPosition === 'end' ? 'Previous' : 'Type';\n }\n if (code === keys.Home) {\n return cursorPosition === 'end' ? 'First' : 'Type';\n }\n if (code === keys.End) {\n return cursorPosition === 'end' ? '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","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowUp","Enter","ArrowDown","Home","End","PageUp","PageDown","Tab"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;CAGC,GAED,YAAYA,UAAU,0BAA0B;AA2BhD;;CAEC,GACD,OAAO,SAASC,yBACdC,CAAsC,EACtCC,OAA8B;IAE9B,MAAM,EAAEC,cAAc,EAAE,GAAGD;IAC3B,MAAME,OAAOH,EAAEI,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGP;IAE1C,8CAA8C;IAC9C,IAAII,IAAII,MAAM,KAAK,KAAKL,SAASL,KAAKW,KAAK,IAAI,CAACJ,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAI,AAACJ,SAASL,KAAKY,OAAO,IAAIL,UAAWF,SAASL,KAAKa,KAAK,EAAE;QAC5D,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIR,SAASL,KAAKc,SAAS,EAAE;QAC3B,OAAOV,mBAAmB,QAAQ,SAAS;IAC7C;IACA,IAAIC,SAASL,KAAKY,OAAO,EAAE;QACzB,OAAOR,mBAAmB,QAAQ,aAAa;IACjD;IACA,IAAIC,SAASL,KAAKe,IAAI,EAAE;QACtB,OAAOX,mBAAmB,QAAQ,UAAU;IAC9C;IACA,IAAIC,SAASL,KAAKgB,GAAG,EAAE;QACrB,OAAOZ,mBAAmB,QAAQ,SAAS;IAC7C;IACA,IAAIC,SAASL,KAAKiB,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAIZ,SAASL,KAAKkB,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAIb,SAASL,KAAKmB,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxPositioning.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 useComboboxPositioning(\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 ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["resolvePositioningShorthand","usePositioning","useComboboxPositioning","props","positioning","fluid","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","undefined","targetRef","containerRef"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useComboboxPositioning.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 useComboboxPositioning(\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","useComboboxPositioning","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,uBACdC,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"}
|
|
@@ -2,10 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { useActiveDescendant } from '@fluentui/react-aria';
|
|
3
3
|
import { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import { getDropdownActionFromKey } from './dropdownKeyActions';
|
|
5
|
-
import {
|
|
5
|
+
import { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';
|
|
6
6
|
import { useOptionCollection } from './useOptionCollection';
|
|
7
7
|
import { useSelection } from './useSelection';
|
|
8
|
-
import {
|
|
8
|
+
import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
|
|
9
9
|
import { useComboboxPositioning } from './useComboboxPositioning';
|
|
10
10
|
import { useTriggerKeydown } from './useTriggerKeyDown';
|
|
11
11
|
import { PromptListbox } from '../PromptListbox';
|
|
@@ -35,7 +35,7 @@ export function usePromptListboxFunctionality(params) {
|
|
|
35
35
|
const {
|
|
36
36
|
getOptionById
|
|
37
37
|
} = optionCollection;
|
|
38
|
-
const [
|
|
38
|
+
const [cursorPosition, setCursorPosition] = React.useState('end');
|
|
39
39
|
const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
|
|
40
40
|
const [open, setOpen] = useControllableState({
|
|
41
41
|
state: params.open,
|
|
@@ -49,6 +49,8 @@ export function usePromptListboxFunctionality(params) {
|
|
|
49
49
|
type: 'focus',
|
|
50
50
|
open: false
|
|
51
51
|
});
|
|
52
|
+
activeDescendantController.blur();
|
|
53
|
+
setHideActiveDescendant(true);
|
|
52
54
|
};
|
|
53
55
|
const onFocus = event => {
|
|
54
56
|
if (event.target === event.currentTarget) {
|
|
@@ -60,8 +62,8 @@ export function usePromptListboxFunctionality(params) {
|
|
|
60
62
|
});
|
|
61
63
|
}
|
|
62
64
|
};
|
|
63
|
-
const cursorPositionPlugin = /*#__PURE__*/React.createElement(
|
|
64
|
-
|
|
65
|
+
const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
|
|
66
|
+
setCursorPosition: setCursorPosition
|
|
65
67
|
});
|
|
66
68
|
const onListboxBlur = React.useCallback(() => {
|
|
67
69
|
setIsInSelectionMode(false);
|
|
@@ -74,7 +76,7 @@ export function usePromptListboxFunctionality(params) {
|
|
|
74
76
|
getOptionById,
|
|
75
77
|
onBlur: onListboxBlur,
|
|
76
78
|
selectOption,
|
|
77
|
-
|
|
79
|
+
cursorPosition,
|
|
78
80
|
open,
|
|
79
81
|
multiselect: false
|
|
80
82
|
});
|
|
@@ -90,9 +92,9 @@ export function usePromptListboxFunctionality(params) {
|
|
|
90
92
|
const action = getDropdownActionFromKey(event, {
|
|
91
93
|
open,
|
|
92
94
|
multiselect: false,
|
|
93
|
-
|
|
95
|
+
cursorPosition
|
|
94
96
|
});
|
|
95
|
-
if (event.key === ArrowLeft || event.key === ArrowRight ||
|
|
97
|
+
if (event.key === ArrowLeft || event.key === ArrowRight || action === 'Type') {
|
|
96
98
|
activeDescendantController.blur();
|
|
97
99
|
setHideActiveDescendant(true);
|
|
98
100
|
setIsInSelectionMode(false);
|