@fluentui-copilot/react-prompt-listbox 0.0.0-nightly-20240809-0407-b2c628b1.1 → 0.0.0-nightly-20240813-0406-bd8a2b3b.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +17 -17
- package/CHANGELOG.md +11 -11
- package/dist/index.d.ts +1 -55
- package/lib/components/PromptOption/usePromptOption.js +0 -5
- package/lib/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib/components/utils/usePromptListboxFunctionality.js +2 -0
- package/lib/components/utils/usePromptListboxFunctionality.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/utils/usePromptListboxFunctionality.js +2 -0
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 13 Aug 2024 04:12:25 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,44 +16,44 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
20
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
26
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
32
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
37
|
-
"comment": "Bump @fluentui-copilot/react-prompt-input to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui-copilot/react-prompt-input to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
38
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
43
|
-
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
44
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
49
|
-
"comment": "Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
50
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
55
|
-
"comment": "Bump @fluentui-copilot/text-editor to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui-copilot/text-editor to v0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
56
|
+
"commit": "f27594018d2990d35267346359890e59c27f10a9"
|
|
57
57
|
}
|
|
58
58
|
]
|
|
59
59
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
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 Tue, 13 Aug 2024 04:12:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240813-0406-bd8a2b3b.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240813-0406-bd8a2b3b.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.0.3..@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-
|
|
9
|
+
Tue, 13 Aug 2024 04:12:25 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.0.3..@fluentui-copilot/react-prompt-listbox_v0.0.0-nightly-20240813-0406-bd8a2b3b.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui-copilot/react-prompt-input to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui-copilot/text-editor to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/chat-input-plugins to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-chat-input-plugins to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/react-editor-input to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
18
|
+
- Bump @fluentui-copilot/react-prompt-input to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
19
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
20
|
+
- Bump @fluentui-copilot/react-text-editor to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
21
|
+
- Bump @fluentui-copilot/text-editor to v0.0.0-nightly-20240813-0406-bd8a2b3b.1 ([commit](https://github.com/microsoft/fluentai/commit/f27594018d2990d35267346359890e59c27f10a9) by beachball)
|
|
22
22
|
|
|
23
23
|
## [0.0.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.0.3)
|
|
24
24
|
|
package/dist/index.d.ts
CHANGED
|
@@ -6,16 +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
13
|
import type { Listbox } from '@fluentui/react-components';
|
|
14
14
|
import type { ListboxContextValue } from '@fluentui/react-combobox';
|
|
15
15
|
import type { ListboxContextValue as ListboxContextValue_2 } from '@fluentui/react-components';
|
|
16
16
|
import type { OptionProps } from '@fluentui/react-components';
|
|
17
17
|
import type { OptionState } from '@fluentui/react-components';
|
|
18
|
-
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
|
|
19
18
|
import type { PortalProps } from '@fluentui/react-components';
|
|
20
19
|
import type { PositioningShorthand } from '@fluentui/react-components';
|
|
21
20
|
import * as React_2 from 'react';
|
|
@@ -23,59 +22,6 @@ import type { default as React_3 } from 'react';
|
|
|
23
22
|
import type { Slot } from '@fluentui/react-components';
|
|
24
23
|
import type { SlotClassNames } from '@fluentui/react-components';
|
|
25
24
|
|
|
26
|
-
/**
|
|
27
|
-
* EditorInput Props
|
|
28
|
-
*/
|
|
29
|
-
declare type EditorInputProps = Omit<ComponentProps<Partial<EditorInputSlots>, 'input'>, 'onChange' | 'onPaste' | 'defaultValue' | 'onSubmit'> & {
|
|
30
|
-
disabled?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* If defaultValue is a string, it will be added to the input on first render.
|
|
33
|
-
* If defaultValue is a function, it can call lexical $ functions to imperatively set the initial content with more complex nodes.
|
|
34
|
-
*/
|
|
35
|
-
defaultValue?: string | (() => void);
|
|
36
|
-
/**
|
|
37
|
-
* Callback for when the user changes the value.
|
|
38
|
-
* TODO: Add proper event type for callback
|
|
39
|
-
*/
|
|
40
|
-
onChange?: (ev: any, data: EditorInputValueData) => void;
|
|
41
|
-
/**
|
|
42
|
-
* Callback for when content is pasted into the Editor.
|
|
43
|
-
*/
|
|
44
|
-
onPaste?: (ev: ClipboardEvent) => void;
|
|
45
|
-
/**
|
|
46
|
-
* When true, the input will be cleared when only whitespace is remaining.
|
|
47
|
-
* @default false
|
|
48
|
-
*/
|
|
49
|
-
trimWhiteSpace?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Used to register any custom nodes used by plugins added. Can also be used to override the default nodes.
|
|
52
|
-
*/
|
|
53
|
-
customNodes?: InitialConfigType['nodes'];
|
|
54
|
-
/**
|
|
55
|
-
* The plugin which is in charge of initializing Lexical and is given the `input` and `placeholder` slots
|
|
56
|
-
* @default LexicalPlainTextPlugin
|
|
57
|
-
*/
|
|
58
|
-
textPlugin?: typeof PlainTextPlugin;
|
|
59
|
-
/**
|
|
60
|
-
* Controls whether history is tracked to provide undo and redo functionality
|
|
61
|
-
* @default true
|
|
62
|
-
*/
|
|
63
|
-
history?: boolean;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
declare type EditorInputSlots = {
|
|
67
|
-
root: NonNullable<Slot<'span'>>;
|
|
68
|
-
input: NonNullable<Slot<'span'>>;
|
|
69
|
-
placeholderValue?: Slot<'span'>;
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Data passed to the `onChange` callback when the chat input's value changes.
|
|
74
|
-
*/
|
|
75
|
-
declare type EditorInputValueData = {
|
|
76
|
-
value: string;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
25
|
export declare type OnOpenChangeData = (EventData<'click', React_3.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_3.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_3.KeyboardEvent<HTMLSpanElement>>) & {
|
|
80
26
|
open: boolean;
|
|
81
27
|
};
|
|
@@ -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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n isInLastPosition,\n open,\n multiselect: false,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n /**\n * Freeform combobox should not select\n */\n const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n if (\n event.key === ArrowLeft ||\n event.key === ArrowRight ||\n (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n (action === 'Type' && isInLastPosition) ||\n action === 'Type'\n ) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n } else if (\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n setHideActiveDescendant(false);\n setIsInSelectionMode(true);\n onSelectionModeChange?.(true);\n }\n });\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["React","useActiveDescendant","mergeCallbacks","useControllableState","useEventCallback","useMergedRefs","getDropdownActionFromKey","TextCursorPositionPlugin","useOptionCollection","useSelection","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","useComboboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","isInLastPosition","setIsInLastPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","useCallback","onKeyDown","multiselect","hideActiveDescendant","setHideActiveDescendant","onInputTriggerKeyDown","action","key","blur","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n isInLastPosition,\n open,\n multiselect: false,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n /**\n * Freeform combobox should not select\n */\n const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n if (\n event.key === ArrowLeft ||\n event.key === ArrowRight ||\n (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n (action === 'Type' && isInLastPosition) ||\n action === 'Type'\n ) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n } else if (\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n setHideActiveDescendant(false);\n setIsInSelectionMode(true);\n onSelectionModeChange?.(true);\n }\n });\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["React","useActiveDescendant","mergeCallbacks","useControllableState","useEventCallback","useMergedRefs","getDropdownActionFromKey","TextCursorPositionPlugin","useOptionCollection","useSelection","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","useComboboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","isInLastPosition","setIsInLastPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","onBlur","event","type","blur","setHideActiveDescendant","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","useCallback","onKeyDown","multiselect","hideActiveDescendant","onInputTriggerKeyDown","action","key","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -12,7 +12,6 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
14
|
const _reactcombobox = require("@fluentui/react-combobox");
|
|
15
|
-
const _reactaria = require("@fluentui/react-aria");
|
|
16
15
|
const usePromptOption_unstable = (props, ref)=>{
|
|
17
16
|
const { children, disabled, text, value } = props;
|
|
18
17
|
const optionRef = _react.useRef(null);
|
|
@@ -33,7 +32,6 @@ const usePromptOption_unstable = (props, ref)=>{
|
|
|
33
32
|
optionValue
|
|
34
33
|
]);
|
|
35
34
|
// context values
|
|
36
|
-
const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
|
|
37
35
|
const registerOption = (0, _reactcombobox.useListboxContext_unstable)((ctx)=>ctx.registerOption);
|
|
38
36
|
const selected = (0, _reactcombobox.useListboxContext_unstable)((ctx)=>{
|
|
39
37
|
const selectedOptions = ctx.selectedOptions;
|
|
@@ -47,7 +45,6 @@ const usePromptOption_unstable = (props, ref)=>{
|
|
|
47
45
|
event.preventDefault();
|
|
48
46
|
return;
|
|
49
47
|
}
|
|
50
|
-
activeDescendantController.focus(id);
|
|
51
48
|
// handle selection change
|
|
52
49
|
selectOption(event, optionData);
|
|
53
50
|
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":["children","value","props","optionText","disabled","optionValue","text","optionRef","optionData","React","useMemo","id","registerOption","useListboxContext_unstable","ctx","selected","selectedOptions","undefined","find","o","selectOption","onOptionClick","event","_props_onClick","preventDefault","onClick","call","useEffect","current","root","components","getIntrinsicElementProps","ref","textString","Children","forEach","child","hasNonStringChild","console","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBUA;;;eAAAA;;;;iEArBa;iCAC8C;+BAC1B;AAmBzC,MAAQA,2BAA0BC,CAAAA,OAAUC;UAC5C,EACAF,QAAMG,EACNC,QAAMC,EAENC,IAAA,EACAL,KAAA,KAEAC;UACAK,YAAMC,OAAaC,MAAMC,CAAAA;uBACdC,cAAAA,MAAAA;wBAAIP,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAAA;2DAAgBD;eAAYF,IAAAA,sBAAAA,EAAOI,iBAAAA,MAAAA,EAAAA;kDAChD;UAACM,aAAAA,OAAAA,OAAAA,CAAAA,IAAAA,CAAAA;;;kBAA0BN;mBAAYA;YAGzC;QAAAM;QAAAP;QAAiBD;QAAAE;KAAA;qBACXO;UACNA,iBAAiBC,IAAAA,yCAA2BC,EAAAA,CAAAA,MAAAA,IAAAA,cAAAA;UAC1CC,WAAMC,IAAAA,yCAAsBA,EAAAA,CAAAA;cAE5BA,kBAAOX,IAAgBY,eAAaD;QACtC,OAAAX,gBAAAY,aAAAD,gBAAAE,IAAA,CAAAC,CAAAA,IAAAA,MAAAd,iBAAAY;;UAEAG,eAAMC,IAAAA,yCAAgBR,EAAAA,CAAAA,MAA2BC,IAAOA,YAAIO;UAE5DA,gBAAiBC,IAAAA,yCAAAA,EAAAA,CAAAA,MAAAA,IAAAA,aAAAA;oBAUfpB,CAAAA;YATAqB;sBACQC;kBACNA,cAAA;;;kCAIkBhB;qBAEpBa,OAAcC;sBACdpB;QACFqB,CAAAA,iBAAArB,MAAAuB,OAAA,MAAA,QAAAF,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAG,IAAA,CAAAxB,OAAAoB;;wCAGgB;WACdK,SAAIhB,CAAMJ;kBACRA,UAAOK,OAAAA,EAAAA;mBACTA,eAAAJ,YAAAD,UAAAqB,OAAA;QACF;;;QAAIjB;QAAAA;KAAAA;WAAIH;oBAAYI;YAAeiB,MAAA;QAEnC;cACEC,qBAAAA,CAAAA,MAAY,CAAAC,IAAAA,yCAAA,EAAA,OAAA;mDACJ,EAAAC,KAAAzB;6BACRH,WAAA,OAAAa;;kBAGIe;oBACA;;;yBAGG9B;;;;;;SAMPa,cAAAA,IAAAA,EAAAA,QAAAA;QACFT,SAAAW,WAAA;QACA,OAAAX;IAEF;QACE2B,aAAahB;4BACJX;WACT4B,QAAA,CAAAC,OAAA,CAAAnC,UAAAoC,CAAAA;QAEA,IAAIH,OAAAA,UAAa,UAAA;YACjBA,cAAII;QACJ5B,OAAMyB;gCACOE;;;iEAGW;2BACtB;QACF,sCAAA;QAEAE,QAAAC,IAAA,CAAA;;WAEEN;6CAEF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n isInLastPosition,\n open,\n multiselect: false,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n /**\n * Freeform combobox should not select\n */\n const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n if (\n event.key === ArrowLeft ||\n event.key === ArrowRight ||\n (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n (action === 'Type' && isInLastPosition) ||\n action === 'Type'\n ) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n } else if (\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n setHideActiveDescendant(false);\n setIsInSelectionMode(true);\n onSelectionModeChange?.(true);\n }\n });\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","fluid","triggerRef","optionCollection","useOptionCollection","activeParentRef","getOptionById","controller","isInLastPosition","setIsInLastPosition","useActiveDescendant","isInSelectionMode","setOpen","classList","useControllableState","root","initialState","selectionState","useSelection","event","open","React","useState","
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { mergeCallbacks, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from './dropdownKeyActions';\nimport { TextCursorPositionPlugin } from '../../plugins/TextCursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useComboboxPositioning } from './useComboboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [isInLastPosition, setIsInLastPosition] = React.useState(true);\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <TextCursorPositionPlugin setIsInLastPosition={setIsInLastPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n isInLastPosition,\n open,\n multiselect: false,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n /**\n * Freeform combobox should not select\n */\n const onInputTriggerKeyDown: EditorInputProps['onKeyDown'] = useEventCallback(event => {\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(event, { open, multiselect: false, isInLastPosition });\n if (\n event.key === ArrowLeft ||\n event.key === ArrowRight ||\n (!isInLastPosition && (event.key === ArrowDown || event.key === ArrowUp)) ||\n (action === 'Type' && isInLastPosition) ||\n action === 'Type'\n ) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n setIsInSelectionMode(false);\n onSelectionModeChange?.(false);\n } else if (\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n setHideActiveDescendant(false);\n setIsInSelectionMode(true);\n onSelectionModeChange?.(true);\n }\n });\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown: useEventCallback(mergeCallbacks(onKeyDown, onInputTriggerKeyDown)),\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","fluid","triggerRef","optionCollection","useOptionCollection","activeParentRef","getOptionById","controller","isInLastPosition","setIsInLastPosition","useActiveDescendant","isInSelectionMode","setOpen","classList","useControllableState","root","initialState","selectionState","useSelection","event","open","activeDescendantController","React","useState","setHideActiveDescendant","state","onFocus","target","defaultOpen","currentTarget","onOpenChange","setIsInSelectionMode","type","onKeyDown","onBlur","onListboxBlur","selectOption","useTriggerKeydown","hideActiveDescendant","onInputTriggerKeyDown","multiselect","ArrowDown","action","useEffect","comboboxPopupRef","_triggerRef_current","current","removeAttribute","PromptListbox","listboxMergedRef","ref","listbox","cursorPositionPlugin"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
4
4
|
"description": "PromptListbox for input components using EditorInput.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,20 +12,20 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/chat-input-plugins": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-chat-input-plugins": "0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/react-editor-input": "0.0.0-nightly-
|
|
18
|
-
"@fluentui-copilot/react-prompt-input": "0.0.0-nightly-
|
|
19
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
20
|
-
"@fluentui-copilot/react-text-editor": "0.0.0-nightly-
|
|
21
|
-
"@fluentui-copilot/text-editor": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
17
|
+
"@fluentui-copilot/react-editor-input": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
18
|
+
"@fluentui-copilot/react-prompt-input": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
19
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
20
|
+
"@fluentui-copilot/react-text-editor": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
21
|
+
"@fluentui-copilot/text-editor": "0.0.0-nightly-20240813-0406-bd8a2b3b.1",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
|
|
26
26
|
"@fluentui/react-aria": ">=9.13.2 <10.0.0",
|
|
27
27
|
"@fluentui/react-combobox": ">=9.13.3 <10.0.0",
|
|
28
|
-
"@fluentui/react-components": ">=9.54.
|
|
28
|
+
"@fluentui/react-components": ">=9.54.10 <10.0.0",
|
|
29
29
|
"@fluentui/react-icons": ">=2.0.247 <3.0.0",
|
|
30
30
|
"@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
|
|
31
31
|
"@fluentui/react-positioning": ">=9.15.7 <10.0.0",
|