@fluentui-copilot/react-prompt-listbox 0.5.0 → 0.5.2
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 +22 -1
- package/CHANGELOG.md +12 -2
- package/dist/index.d.ts +3 -0
- package/lib/components/utils/usePromptListboxFunctionalityV2.js +4 -6
- package/lib/components/utils/usePromptListboxFunctionalityV2.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionalityV2.js +2 -6
- package/lib-commonjs/components/utils/usePromptListboxFunctionalityV2.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 07 Feb 2025 02:02:09 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.5.1",
|
|
7
|
+
"version": "0.5.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "owcampbe@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
13
|
+
"commit": "70796f91c6f172c0a1de2dd0989cec7eb8e1f803",
|
|
14
|
+
"comment": "chore: Use InputListbox's isInSelectionMode state."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "estebanmu@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
19
|
+
"commit": "4d2e21f84ca14afa287a9b81387169da3e26664a",
|
|
20
|
+
"comment": "feat: Add onActiveOptionChange to InputListbox."
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Wed, 29 Jan 2025 01:37:03 GMT",
|
|
6
27
|
"tag": "@fluentui-copilot/react-prompt-listbox_v0.5.0",
|
|
7
28
|
"version": "0.5.0",
|
|
8
29
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-prompt-listbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 07 Feb 2025 02:02:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.5.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.1)
|
|
8
|
+
|
|
9
|
+
Fri, 07 Feb 2025 02:02:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.5.0..@fluentui-copilot/react-prompt-listbox_v0.5.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Use InputListbox's isInSelectionMode state. ([PR #2625](https://github.com/microsoft/fluentai/pull/2625) by owcampbe@microsoft.com)
|
|
15
|
+
- feat: Add onActiveOptionChange to InputListbox. ([PR #2639](https://github.com/microsoft/fluentai/pull/2639) by estebanmu@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [0.5.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.5.0)
|
|
8
18
|
|
|
9
|
-
Wed, 29 Jan 2025 01:
|
|
19
|
+
Wed, 29 Jan 2025 01:37:03 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.4.0..@fluentui-copilot/react-prompt-listbox_v0.5.0)
|
|
11
21
|
|
|
12
22
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
3
|
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
|
|
4
|
+
import { ActiveOptionChangeData } from '@fluentui-copilot/react-input-listbox';
|
|
4
5
|
import type { ComboboxBaseState } from '@fluentui/react-combobox';
|
|
5
6
|
import type { ComboboxProps } from '@fluentui/react-components';
|
|
6
7
|
import type { ComboboxState } from '@fluentui/react-combobox';
|
|
@@ -38,6 +39,8 @@ import type { UseInputListboxFunctionalityParams } from '@fluentui-copilot/react
|
|
|
38
39
|
import { useOption_unstable } from '@fluentui-copilot/react-input-listbox';
|
|
39
40
|
import { useOptionStyles_unstable } from '@fluentui-copilot/react-input-listbox';
|
|
40
41
|
|
|
42
|
+
export { ActiveOptionChangeData }
|
|
43
|
+
|
|
41
44
|
export declare type OnOpenChangeData = (EventData<'click', React_2.MouseEvent<HTMLSpanElement>> | EventData<'focus', React_2.FocusEvent<HTMLSpanElement>> | EventData<'keyboard', React_2.KeyboardEvent<HTMLSpanElement>>) & {
|
|
42
45
|
open: boolean;
|
|
43
46
|
};
|
|
@@ -9,7 +9,8 @@ export function usePromptListboxFunctionality(params) {
|
|
|
9
9
|
var _params_listboxProps, _params_listboxProps1;
|
|
10
10
|
const {
|
|
11
11
|
fluid = false,
|
|
12
|
-
allowArrowUpNavigation = false
|
|
12
|
+
allowArrowUpNavigation = false,
|
|
13
|
+
onSelectionModeChange
|
|
13
14
|
} = params;
|
|
14
15
|
const [open, setOpen] = useControllableState({
|
|
15
16
|
state: params.open,
|
|
@@ -17,7 +18,6 @@ export function usePromptListboxFunctionality(params) {
|
|
|
17
18
|
initialState: false
|
|
18
19
|
});
|
|
19
20
|
const [cursorPosition, setCursorPosition] = React.useState('end');
|
|
20
|
-
const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
|
|
21
21
|
const overrideActionHandler = (e, {
|
|
22
22
|
activeOption,
|
|
23
23
|
action,
|
|
@@ -71,9 +71,6 @@ export function usePromptListboxFunctionality(params) {
|
|
|
71
71
|
...userOverrides
|
|
72
72
|
};
|
|
73
73
|
};
|
|
74
|
-
const onSelectionModeChange = mergeCallbacks(params.onSelectionModeChange, newSelectionMode => {
|
|
75
|
-
setIsInSelectionMode(newSelectionMode);
|
|
76
|
-
});
|
|
77
74
|
const baseListboxFunctionality = useInputListboxFunctionality({
|
|
78
75
|
...params,
|
|
79
76
|
onSelectionModeChange,
|
|
@@ -82,7 +79,8 @@ export function usePromptListboxFunctionality(params) {
|
|
|
82
79
|
const {
|
|
83
80
|
onBlur: baseOnBlur,
|
|
84
81
|
onKeyDown: baseOnKeyDown,
|
|
85
|
-
ref: triggerRef
|
|
82
|
+
ref: triggerRef,
|
|
83
|
+
isInSelectionMode
|
|
86
84
|
} = baseListboxFunctionality.triggerProps;
|
|
87
85
|
const onFocus = event => {
|
|
88
86
|
if (event.target === event.currentTarget) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n InputListboxAction,\n InputListboxProps,\n UseInputListboxFunctionalityParams,\n OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\n\nexport type OnOpenChangeData = (\n | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n open: boolean;\n};\n\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Whether the listbox's width should take all the available space or only\n * the required space.\n *\n * @default false\n */\n fluid?: boolean;\n\n /**\n * Props to be passed to the InputListbox component\n */\n listboxProps?: Partial<InputListboxProps> & {\n ref?: React.RefObject<HTMLDivElement>;\n };\n\n /**\n * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n * Note, this prop is meant to be used with the following positioning props:\n * ```ts\n * usePromptListboxFunctionality({\n * positioning: {\n * position: 'above',\n * fallbackPositions: ['above']\n * }\n * });\n * ```\n * This is useful when using PromptListbox with other components such as ChatInput since\n * the input will always stay at the bottom therefore the listbox would always get cut.\n *\n * @default false\n */\n allowArrowUpNavigation?: boolean;\n\n /**\n * Whether to render the listbox inline or use a portal.\n */\n inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\n /**\n * Component to be rendered in the Input component. This should be passed to the listbox prop.\n */\n promptListbox: JSX.Element;\n /**\n * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n * work correctly.\n */\n triggerProps: {\n ref: React.RefObject<HTMLSpanElement>;\n /**\n * Whether the listbox is being used to go through options or the user is currently typing.\n */\n isInSelectionMode: boolean;\n } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n\n /**\n * Ref used to point which element the listbox should be anchored to. Most use cases\n * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n * this is provided directly to the component and not the slot).\n *\n * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n */\n containerRef: React.RefObject<ContainerElementType>;\n /**\n * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n * keyboard behavior. This should be passed as children in the PromptInput.\n */\n cursorPositionPlugin: JSX.Element;\n};\n\nexport function usePromptListboxFunctionality<\n TriggerElementType extends HTMLElement = HTMLSpanElement,\n ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n const { fluid = false, allowArrowUpNavigation = false } = params;\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n\n const overrideActionHandler: OverrideActionHandler = (\n e,\n { activeOption, action, activeDescendantController, isInSelectionMode },\n ) => {\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n let newAction: InputListboxAction | undefined = undefined;\n let newIsInSelection: boolean | undefined = undefined;\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Next':\n if (!isInSelectionMode && !atEnd) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n case 'Previous':\n if (!isInSelectionMode && !atStart) {\n newAction = 'Type';\n newIsInSelection = false;\n } else if (\n isInSelectionMode &&\n !allowArrowUpNavigation &&\n atEnd &&\n activeOption !== undefined &&\n activeOption.id === firstOption\n ) {\n newAction = 'Type';\n newIsInSelection = false;\n e.preventDefault();\n }\n break;\n case 'First':\n case 'Last':\n case 'PageDown':\n case 'PageUp':\n if (!isInSelectionMode) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n }\n\n const userOverrides = params.overrideActionHandler?.(e, {\n activeOption,\n action,\n activeDescendantController,\n isInSelectionMode,\n });\n\n return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n };\n\n const onSelectionModeChange = mergeCallbacks(params.onSelectionModeChange, newSelectionMode => {\n setIsInSelectionMode(newSelectionMode);\n });\n const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef } = baseListboxFunctionality.triggerProps;\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n params.onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const onBlur = useEventCallback(\n mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n setOpen(false);\n params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n }),\n );\n\n const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n fluid,\n positioning: params.positioning,\n });\n\n const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n const innerListbox = (\n <InputListbox\n {...params.listboxProps}\n {...baseListboxFunctionality.inputListboxProps}\n id={listboxId}\n ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n />\n );\n const listbox = (\n <PromptListboxMotion visible={open}>\n <span aria-owns={open ? listboxId : undefined}>\n {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n </span>\n </PromptListboxMotion>\n );\n\n return {\n promptListbox: listbox,\n cursorPositionPlugin,\n triggerProps: {\n ref: triggerRef,\n isInSelectionMode,\n onFocus,\n onKeyDown: baseOnKeyDown,\n onBlur,\n },\n containerRef: anchorRef,\n };\n}\n"],"names":["React","InputListbox","useInputListboxFunctionality","PromptListboxMotion","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","CursorPositionPlugin","useListboxPositioning","Portal","usePromptListboxFunctionality","params","fluid","allowArrowUpNavigation","open","setOpen","state","defaultState","defaultOpen","initialState","cursorPosition","setCursorPosition","useState","isInSelectionMode","setIsInSelectionMode","overrideActionHandler","e","activeOption","action","activeDescendantController","atStart","atEnd","newAction","undefined","newIsInSelection","firstOption","first","passive","id","preventDefault","userOverrides","onSelectionModeChange","newSelectionMode","baseListboxFunctionality","onBlur","baseOnBlur","onKeyDown","baseOnKeyDown","ref","triggerRef","triggerProps","onFocus","event","target","currentTarget","onOpenChange","type","listboxRef","anchorRef","positioning","listboxId","listboxProps","cursorPositionPlugin","innerListbox","inputListboxProps","listbox","visible","span","aria-owns","inline","mountNode","promptListbox","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n InputListboxAction,\n InputListboxProps,\n UseInputListboxFunctionalityParams,\n OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\n\nexport type OnOpenChangeData = (\n | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n open: boolean;\n};\n\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Whether the listbox's width should take all the available space or only\n * the required space.\n *\n * @default false\n */\n fluid?: boolean;\n\n /**\n * Props to be passed to the InputListbox component\n */\n listboxProps?: Partial<InputListboxProps> & {\n ref?: React.RefObject<HTMLDivElement>;\n };\n\n /**\n * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n * Note, this prop is meant to be used with the following positioning props:\n * ```ts\n * usePromptListboxFunctionality({\n * positioning: {\n * position: 'above',\n * fallbackPositions: ['above']\n * }\n * });\n * ```\n * This is useful when using PromptListbox with other components such as ChatInput since\n * the input will always stay at the bottom therefore the listbox would always get cut.\n *\n * @default false\n */\n allowArrowUpNavigation?: boolean;\n\n /**\n * Whether to render the listbox inline or use a portal.\n */\n inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\n /**\n * Component to be rendered in the Input component. This should be passed to the listbox prop.\n */\n promptListbox: JSX.Element;\n /**\n * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n * work correctly.\n */\n triggerProps: {\n ref: React.RefObject<HTMLSpanElement>;\n /**\n * Whether the listbox is being used to go through options or the user is currently typing.\n */\n isInSelectionMode: boolean;\n } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n\n /**\n * Ref used to point which element the listbox should be anchored to. Most use cases\n * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n * this is provided directly to the component and not the slot).\n *\n * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n */\n containerRef: React.RefObject<ContainerElementType>;\n /**\n * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n * keyboard behavior. This should be passed as children in the PromptInput.\n */\n cursorPositionPlugin: JSX.Element;\n};\n\nexport function usePromptListboxFunctionality<\n TriggerElementType extends HTMLElement = HTMLSpanElement,\n ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n\n const overrideActionHandler: OverrideActionHandler = (\n e,\n { activeOption, action, activeDescendantController, isInSelectionMode },\n ) => {\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n let newAction: InputListboxAction | undefined = undefined;\n let newIsInSelection: boolean | undefined = undefined;\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Next':\n if (!isInSelectionMode && !atEnd) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n case 'Previous':\n if (!isInSelectionMode && !atStart) {\n newAction = 'Type';\n newIsInSelection = false;\n } else if (\n isInSelectionMode &&\n !allowArrowUpNavigation &&\n atEnd &&\n activeOption !== undefined &&\n activeOption.id === firstOption\n ) {\n newAction = 'Type';\n newIsInSelection = false;\n e.preventDefault();\n }\n break;\n case 'First':\n case 'Last':\n case 'PageDown':\n case 'PageUp':\n if (!isInSelectionMode) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n }\n\n const userOverrides = params.overrideActionHandler?.(e, {\n activeOption,\n action,\n activeDescendantController,\n isInSelectionMode,\n });\n\n return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n };\n\n const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const {\n onBlur: baseOnBlur,\n onKeyDown: baseOnKeyDown,\n ref: triggerRef,\n isInSelectionMode,\n } = baseListboxFunctionality.triggerProps;\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n params.onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const onBlur = useEventCallback(\n mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n setOpen(false);\n params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n }),\n );\n\n const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n fluid,\n positioning: params.positioning,\n });\n\n const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n const innerListbox = (\n <InputListbox\n {...params.listboxProps}\n {...baseListboxFunctionality.inputListboxProps}\n id={listboxId}\n ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n />\n );\n const listbox = (\n <PromptListboxMotion visible={open}>\n <span aria-owns={open ? listboxId : undefined}>\n {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n </span>\n </PromptListboxMotion>\n );\n\n return {\n promptListbox: listbox,\n cursorPositionPlugin,\n triggerProps: {\n ref: triggerRef,\n isInSelectionMode,\n onFocus,\n onKeyDown: baseOnKeyDown,\n onBlur,\n },\n containerRef: anchorRef,\n };\n}\n"],"names":["React","InputListbox","useInputListboxFunctionality","PromptListboxMotion","mergeCallbacks","useControllableState","useEventCallback","useId","useMergedRefs","CursorPositionPlugin","useListboxPositioning","Portal","usePromptListboxFunctionality","params","fluid","allowArrowUpNavigation","onSelectionModeChange","open","setOpen","state","defaultState","defaultOpen","initialState","cursorPosition","setCursorPosition","useState","overrideActionHandler","e","activeOption","action","activeDescendantController","isInSelectionMode","atStart","atEnd","newAction","undefined","newIsInSelection","firstOption","first","passive","id","preventDefault","userOverrides","baseListboxFunctionality","onBlur","baseOnBlur","onKeyDown","baseOnKeyDown","ref","triggerRef","triggerProps","onFocus","event","target","currentTarget","onOpenChange","type","listboxRef","anchorRef","positioning","listboxId","listboxProps","cursorPositionPlugin","innerListbox","inputListboxProps","listbox","visible","span","aria-owns","inline","mountNode","promptListbox","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';\nexport type {\n OnOpenChangeData,\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData as OnOpenChangeDataDeprecated,\n ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n\nexport type {\n OptionProps,\n OptionSlots,\n OptionState,\n OptionValue,\n OptionOnSelectData,\n OverrideActionHandler,\n OverrideActionHandlerOptions,\n OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOption_unstable,\n useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable","Option","optionClassNames","renderOption_unstable","useOption_unstable","useOptionStyles_unstable"],"rangeMappings":";;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,qDAAqD;AAOnG,SAASA,iCAAiCC,uCAAuC,QAAQ,mDAAmD;AAS5I,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';\nexport type {\n OnOpenChangeData,\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData as OnOpenChangeDataDeprecated,\n ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n\nexport type {\n ActiveOptionChangeData,\n OptionProps,\n OptionSlots,\n OptionState,\n OptionValue,\n OptionOnSelectData,\n OverrideActionHandler,\n OverrideActionHandlerOptions,\n OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOption_unstable,\n useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["PromptListbox","promptListboxClassNames","renderPromptListbox_unstable","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","PromptOption","promptOptionClassNames","renderPromptOption_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable","Option","optionClassNames","renderOption_unstable","useOption_unstable","useOptionStyles_unstable"],"rangeMappings":";;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAEzB,SAASC,6BAA6B,QAAQ,qDAAqD;AAOnG,SAASA,iCAAiCC,uCAAuC,QAAQ,mDAAmD;AAS5I,SACEC,YAAY,EACZC,sBAAsB,EACtBC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAaxB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,kBAAkB,EAClBC,wBAAwB,QACnB,wCAAwC"}
|
|
@@ -18,14 +18,13 @@ const _useListboxPositioning = require("./useListboxPositioning");
|
|
|
18
18
|
const _reactcomponents = require("@fluentui/react-components");
|
|
19
19
|
function usePromptListboxFunctionality(params) {
|
|
20
20
|
var _params_listboxProps, _params_listboxProps1;
|
|
21
|
-
const { fluid = false, allowArrowUpNavigation = false } = params;
|
|
21
|
+
const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;
|
|
22
22
|
const [open, setOpen] = (0, _reactutilities.useControllableState)({
|
|
23
23
|
state: params.open,
|
|
24
24
|
defaultState: params.defaultOpen,
|
|
25
25
|
initialState: false
|
|
26
26
|
});
|
|
27
27
|
const [cursorPosition, setCursorPosition] = _react.useState('end');
|
|
28
|
-
const [isInSelectionMode, setIsInSelectionMode] = _react.useState(false);
|
|
29
28
|
const overrideActionHandler = (e, { activeOption, action, activeDescendantController, isInSelectionMode })=>{
|
|
30
29
|
var _params_overrideActionHandler;
|
|
31
30
|
const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
|
|
@@ -74,15 +73,12 @@ function usePromptListboxFunctionality(params) {
|
|
|
74
73
|
...userOverrides
|
|
75
74
|
};
|
|
76
75
|
};
|
|
77
|
-
const onSelectionModeChange = (0, _reactutilities.mergeCallbacks)(params.onSelectionModeChange, (newSelectionMode)=>{
|
|
78
|
-
setIsInSelectionMode(newSelectionMode);
|
|
79
|
-
});
|
|
80
76
|
const baseListboxFunctionality = (0, _reactinputlistbox.useInputListboxFunctionality)({
|
|
81
77
|
...params,
|
|
82
78
|
onSelectionModeChange,
|
|
83
79
|
overrideActionHandler
|
|
84
80
|
});
|
|
85
|
-
const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef } = baseListboxFunctionality.triggerProps;
|
|
81
|
+
const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef, isInSelectionMode } = baseListboxFunctionality.triggerProps;
|
|
86
82
|
const onFocus = (event)=>{
|
|
87
83
|
if (event.target === event.currentTarget) {
|
|
88
84
|
var _params_onOpenChange;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n InputListboxAction,\n InputListboxProps,\n UseInputListboxFunctionalityParams,\n OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\n\nexport type OnOpenChangeData = (\n | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n open: boolean;\n};\n\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Whether the listbox's width should take all the available space or only\n * the required space.\n *\n * @default false\n */\n fluid?: boolean;\n\n /**\n * Props to be passed to the InputListbox component\n */\n listboxProps?: Partial<InputListboxProps> & {\n ref?: React.RefObject<HTMLDivElement>;\n };\n\n /**\n * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n * Note, this prop is meant to be used with the following positioning props:\n * ```ts\n * usePromptListboxFunctionality({\n * positioning: {\n * position: 'above',\n * fallbackPositions: ['above']\n * }\n * });\n * ```\n * This is useful when using PromptListbox with other components such as ChatInput since\n * the input will always stay at the bottom therefore the listbox would always get cut.\n *\n * @default false\n */\n allowArrowUpNavigation?: boolean;\n\n /**\n * Whether to render the listbox inline or use a portal.\n */\n inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\n /**\n * Component to be rendered in the Input component. This should be passed to the listbox prop.\n */\n promptListbox: JSX.Element;\n /**\n * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n * work correctly.\n */\n triggerProps: {\n ref: React.RefObject<HTMLSpanElement>;\n /**\n * Whether the listbox is being used to go through options or the user is currently typing.\n */\n isInSelectionMode: boolean;\n } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n\n /**\n * Ref used to point which element the listbox should be anchored to. Most use cases\n * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n * this is provided directly to the component and not the slot).\n *\n * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n */\n containerRef: React.RefObject<ContainerElementType>;\n /**\n * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n * keyboard behavior. This should be passed as children in the PromptInput.\n */\n cursorPositionPlugin: JSX.Element;\n};\n\nexport function usePromptListboxFunctionality<\n TriggerElementType extends HTMLElement = HTMLSpanElement,\n ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n const { fluid = false, allowArrowUpNavigation = false } = params;\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n\n const overrideActionHandler: OverrideActionHandler = (\n e,\n { activeOption, action, activeDescendantController, isInSelectionMode },\n ) => {\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n let newAction: InputListboxAction | undefined = undefined;\n let newIsInSelection: boolean | undefined = undefined;\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Next':\n if (!isInSelectionMode && !atEnd) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n case 'Previous':\n if (!isInSelectionMode && !atStart) {\n newAction = 'Type';\n newIsInSelection = false;\n } else if (\n isInSelectionMode &&\n !allowArrowUpNavigation &&\n atEnd &&\n activeOption !== undefined &&\n activeOption.id === firstOption\n ) {\n newAction = 'Type';\n newIsInSelection = false;\n e.preventDefault();\n }\n break;\n case 'First':\n case 'Last':\n case 'PageDown':\n case 'PageUp':\n if (!isInSelectionMode) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n }\n\n const userOverrides = params.overrideActionHandler?.(e, {\n activeOption,\n action,\n activeDescendantController,\n isInSelectionMode,\n });\n\n return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n };\n\n const onSelectionModeChange = mergeCallbacks(params.onSelectionModeChange, newSelectionMode => {\n setIsInSelectionMode(newSelectionMode);\n });\n const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef } = baseListboxFunctionality.triggerProps;\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n params.onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const onBlur = useEventCallback(\n mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n setOpen(false);\n params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n }),\n );\n\n const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n fluid,\n positioning: params.positioning,\n });\n\n const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n const innerListbox = (\n <InputListbox\n {...params.listboxProps}\n {...baseListboxFunctionality.inputListboxProps}\n id={listboxId}\n ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n />\n );\n const listbox = (\n <PromptListboxMotion visible={open}>\n <span aria-owns={open ? listboxId : undefined}>\n {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n </span>\n </PromptListboxMotion>\n );\n\n return {\n promptListbox: listbox,\n cursorPositionPlugin,\n triggerProps: {\n ref: triggerRef,\n isInSelectionMode,\n onFocus,\n onKeyDown: baseOnKeyDown,\n onBlur,\n },\n containerRef: anchorRef,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","fluid","open","setOpen","initialState","useControllableState","state","defaultState","cursorPosition","setCursorPosition","isInSelectionMode","allowArrowUpNavigation","overrideActionHandler","newAction","activeDescendantController","_params_overrideActionHandler","atEnd","newIsInSelection","first","atStart","activeOption","undefined","id","firstOption","action","baseListboxFunctionality","onSelectionModeChange","onKeyDown","baseOnKeyDown","newSelectionMode","setIsInSelectionMode","event","baseOnBlur","ref","triggerRef","useEventCallback","mergeCallbacks","currentTarget","onOpenChange","_params_onOpenChange","call","type","onBlur","e","cursorPositionPlugin","innerListbox","useMergedRefs","inputListboxProps","positioning","listbox","span","aria-owns","listboxId","inline","React","createElement","InputListbox","listboxProps","triggerProps","listboxRef","_params_listboxProps1","onFocus","Portal","containerRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["usePromptListboxFunctionalityV2.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InputListbox, useInputListboxFunctionality } from '@fluentui-copilot/react-input-listbox';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport {\n mergeCallbacks,\n useControllableState,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { Portal } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type {\n InputListboxAction,\n InputListboxProps,\n UseInputListboxFunctionalityParams,\n OverrideActionHandler,\n} from '@fluentui-copilot/react-input-listbox';\nimport type { PortalProps } from '@fluentui/react-components';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\n\nexport type OnOpenChangeData = (\n | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n open: boolean;\n};\n\nexport type UsePromptListboxFunctionalityParams = UseInputListboxFunctionalityParams & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: EventHandler<OnOpenChangeData>;\n positioning?: PositioningShorthand;\n\n /**\n * Whether the listbox's width should take all the available space or only\n * the required space.\n *\n * @default false\n */\n fluid?: boolean;\n\n /**\n * Props to be passed to the InputListbox component\n */\n listboxProps?: Partial<InputListboxProps> & {\n ref?: React.RefObject<HTMLDivElement>;\n };\n\n /**\n * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n * Note, this prop is meant to be used with the following positioning props:\n * ```ts\n * usePromptListboxFunctionality({\n * positioning: {\n * position: 'above',\n * fallbackPositions: ['above']\n * }\n * });\n * ```\n * This is useful when using PromptListbox with other components such as ChatInput since\n * the input will always stay at the bottom therefore the listbox would always get cut.\n *\n * @default false\n */\n allowArrowUpNavigation?: boolean;\n\n /**\n * Whether to render the listbox inline or use a portal.\n */\n inline?: boolean;\n} & Pick<PortalProps, 'mountNode'>;\n\nexport type UsePromptListboxFunctionality<ContainerElementType extends HTMLElement> = {\n /**\n * Component to be rendered in the Input component. This should be passed to the listbox prop.\n */\n promptListbox: JSX.Element;\n /**\n * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n * work correctly.\n */\n triggerProps: {\n ref: React.RefObject<HTMLSpanElement>;\n /**\n * Whether the listbox is being used to go through options or the user is currently typing.\n */\n isInSelectionMode: boolean;\n } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n\n /**\n * Ref used to point which element the listbox should be anchored to. Most use cases\n * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n * this is provided directly to the component and not the slot).\n *\n * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n */\n containerRef: React.RefObject<ContainerElementType>;\n /**\n * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n * keyboard behavior. This should be passed as children in the PromptInput.\n */\n cursorPositionPlugin: JSX.Element;\n};\n\nexport function usePromptListboxFunctionality<\n TriggerElementType extends HTMLElement = HTMLSpanElement,\n ContainerElementType extends HTMLElement = HTMLDivElement,\n>(params: UsePromptListboxFunctionalityParams): UsePromptListboxFunctionality<ContainerElementType> {\n const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n\n const overrideActionHandler: OverrideActionHandler = (\n e,\n { activeOption, action, activeDescendantController, isInSelectionMode },\n ) => {\n const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');\n const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';\n let newAction: InputListboxAction | undefined = undefined;\n let newIsInSelection: boolean | undefined = undefined;\n const firstOption = activeDescendantController.first({ passive: true });\n\n switch (action) {\n case 'Next':\n if (!isInSelectionMode && !atEnd) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n case 'Previous':\n if (!isInSelectionMode && !atStart) {\n newAction = 'Type';\n newIsInSelection = false;\n } else if (\n isInSelectionMode &&\n !allowArrowUpNavigation &&\n atEnd &&\n activeOption !== undefined &&\n activeOption.id === firstOption\n ) {\n newAction = 'Type';\n newIsInSelection = false;\n e.preventDefault();\n }\n break;\n case 'First':\n case 'Last':\n case 'PageDown':\n case 'PageUp':\n if (!isInSelectionMode) {\n newAction = 'Type';\n newIsInSelection = false;\n }\n break;\n }\n\n const userOverrides = params.overrideActionHandler?.(e, {\n activeOption,\n action,\n activeDescendantController,\n isInSelectionMode,\n });\n\n return { action: newAction, isInSelectionMode: newIsInSelection, ...userOverrides };\n };\n\n const baseListboxFunctionality = useInputListboxFunctionality<TriggerElementType>({\n ...params,\n onSelectionModeChange,\n overrideActionHandler,\n });\n const {\n onBlur: baseOnBlur,\n onKeyDown: baseOnKeyDown,\n ref: triggerRef,\n isInSelectionMode,\n } = baseListboxFunctionality.triggerProps;\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n params.onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const onBlur = useEventCallback(\n mergeCallbacks(baseOnBlur, (e: React.FocusEvent<TriggerElementType>) => {\n setOpen(false);\n params.onOpenChange?.(e, { event: e, type: 'focus', open: false });\n }),\n );\n\n const [listboxRef, anchorRef] = useListboxPositioning<ContainerElementType>({\n fluid,\n positioning: params.positioning,\n });\n\n const listboxId = useId('prompt-listbox', params.listboxProps?.id);\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n const innerListbox = (\n <InputListbox\n {...params.listboxProps}\n {...baseListboxFunctionality.inputListboxProps}\n id={listboxId}\n ref={useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, params.listboxProps?.ref)}\n />\n );\n const listbox = (\n <PromptListboxMotion visible={open}>\n <span aria-owns={open ? listboxId : undefined}>\n {open && (params.inline ? innerListbox : <Portal mountNode={params.mountNode}>{innerListbox}</Portal>)}\n </span>\n </PromptListboxMotion>\n );\n\n return {\n promptListbox: listbox,\n cursorPositionPlugin,\n triggerProps: {\n ref: triggerRef,\n isInSelectionMode,\n onFocus,\n onKeyDown: baseOnKeyDown,\n onBlur,\n },\n containerRef: anchorRef,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","fluid","open","setOpen","useControllableState","state","cursorPosition","defaultState","overrideActionHandler","e","React","undefined","newIsInSelection","allowArrowUpNavigation","atEnd","activeDescendantController","first","isInSelectionMode","newAction","atStart","activeOption","id","firstOption","userOverrides","_params_overrideActionHandler","call","action","baseOnBlur","event","useInputListboxFunctionality","onKeyDown","baseOnKeyDown","ref","triggerRef","useEventCallback","triggerProps","onOpenChange","_params_onOpenChange","type","listboxRef","onBlur","cursorPositionPlugin","setCursorPosition","innerListbox","InputListbox","baseListboxFunctionality","listboxId","listbox","useListboxPositioning","PromptListboxMotion","positioning","inline","listboxProps","Portal","mountNode","createElement","CursorPositionPlugin","promptListbox","inputListboxProps","containerRef","anchorRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+GgBA;;;eAAAA;;;;iEA/GO;mCACoC;qCACvB;gCAO7B;sCAC8B;uCACC;iCACf;AAmGhB,SAASA,8BAGdC,MAA2C;8BA8FDA;UA7F1C,EACAC,QAAOC,KAAMC,2BACO,KAAA,uBACJH;UAEhB,CAAAE,MAAAC,QAAA,GAAAC,IAAAA,oCAAA,EAAA;QACAC,OAAOC,OAAAA,IAAAA;QAEPC,cAAMC,OAAAA,WACJC;sBA2CsBT;;UAvCtB,CAAAM,gBAAcA,kBAAmB,GAAAI,OAASJ,QAAAA,CAAAA;UAC1CE,wBAAgDG,CAAAA,GAAAA,cAC5CC,QACJ,4BAAgE,mBAAK;;wBAI7DC,0BAAuBC,CAAAA,mBAAO,WAAAR,mBAAA,WAAA;yCACpB,SAAAA,mBAAA;wBACZM;+BACFD;4BACAI,2BAAAC,KAAA,CAAA;qBACF;;;;0CAKIC,CAAAA,OAAAA;gCAMAC;uCACAN;;;;oBAIJ,CAAAK,qBAAK,CAAAE,SAAA;gCACA;uCACA;uBACL,IAAKF,qBAAA,CAAAJ,0BAAAC,SAAAM,iBAAAT,aAAAS,aAAAC,EAAA,KAAAC,aAAA;gCACEL;uCACHC;oCACAN;;;iBAGN;iBAEA;;;oBAGEG,CAAAA,mBAAAA;gCACAE;oBACFL,mBAAA;gBAEA;;;8BAAoEW,CAAAA,gCAAavB,OAAAQ,qBAAA,MAAA,QAAAgB,kCAAA,KAAA,IAAA,KAAA,IAAAA,8BAAAC,IAAA,CAAAzB,QAAAS,GAAA;;YACnFiB;YAEAX;;;eAGEP;YACFkB,QAAAR;YACAD,mBACUU;YAMV,GAAAJ,aAAiBK;;;qCAELC,IAAAA,+CAAA,EAAA;iBACR7B;;;;oBACF2B,UAAA,EACFG,WAAAC,aAAA,EAEAC,KAAAC,UAAeC,mBAGXlC,8BADQmC,YAAA;oBACRnC,CAAAA;kBAA2B4B,MAAOnB,KAAAA,MAAAA,aAAAA,EAAAA;;oBAAkBP;oCAAYF,OAAAoC,YAAA,MAAA,QAAAC,yBAAA,KAAA,IAAA,KAAA,IAAAA,qBAAAZ,IAAA,CAAAzB,QAAA4B,OAAA;gBAClEA;gBAGFU,MAAOC;gBACLtC,MAAAA;;QAEF;;UAGAuC,SAAMC,IAAAA,gCAAAA,EAAAA,IAAAA,8BAAuB,EAAAd,YAAAlB,CAAAA;YAAsBiC;;QACnDL,CAAAA,uBAAMM,OAAAA,YACJ,MAAA,QAACC,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,IAAAA,CAAAA,QAAAA,GAAAA;mBACK5C;kBACA6C;kBACAC;;;UAIR,CAAAP,YAAMQ,UAAAA,GACJC,IAAAA,4CAACC,EAAAA;;4BACCC,WAAA;;UACGhD,YAASF,IAAAA,qBAAOmD,EAAAA,kBAASR,CAAAA,uBAAe3C,OAAAoD,YAACC,MAAAA,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,EAAAA;UAAOC,uBAAkBA,WAAS,GAAA5C,OAAA6C,aAAA,CAAAC,0CAAA,EAAA;2BAAwBd;;UAMxGe,eAAeV,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,+BAAAA,EAAAA;kBACfN,YAAAA;oCACciB,iBAAA;;8CAEZzC,EAAAA,yBAAAA,iBAAAA,CAAAA,GAAAA,EAAAA,YAAAA,CAAAA,wBAAAA,OAAAA,YAAAA,MAAAA,QAAAA,0BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,sBAAAA,GAAAA;;oBAEAa,WAAWC,GAAAA,OAAAA,aAAAA,CAAAA,wCAAAA,EAAAA;iBACXS;kBACF,GAAA9B,OAAA6C,aAAA,CAAA,QAAA;qBACAI,OAAcC,YAAAA;OAChB1D,QAAAF,CAAAA,OAAAmD,MAAA,GAAAR,eAAA,WAAA,GAAAjC,OAAA6C,aAAA,CAAAF,uBAAA,EAAA;QACFC,WAAAtD,OAAAsD,SAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';\nexport type {\n OnOpenChangeData,\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData as OnOpenChangeDataDeprecated,\n ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n\nexport type {\n OptionProps,\n OptionSlots,\n OptionState,\n OptionValue,\n OptionOnSelectData,\n OverrideActionHandler,\n OverrideActionHandlerOptions,\n OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOption_unstable,\n useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["Option","PromptListbox","PromptOption","optionClassNames","promptListboxClassNames","promptOptionClassNames","renderOption_unstable","renderPromptListbox_unstable","renderPromptOption_unstable","useOptionStyles_unstable","useOption_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export type { PromptListboxProps, PromptListboxSlots, PromptListboxState } from './PromptListbox';\nexport {\n PromptListbox,\n promptListboxClassNames,\n renderPromptListbox_unstable,\n usePromptListboxStyles_unstable,\n usePromptListbox_unstable,\n} from './PromptListbox';\n\nexport { usePromptListboxFunctionality } from './components/utils/usePromptListboxFunctionalityV2';\nexport type {\n OnOpenChangeData,\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './components/utils/usePromptListboxFunctionalityV2';\n\nexport { usePromptListboxFunctionality as usePromptListboxFunctionalityDeprecated } from './components/utils/usePromptListboxFunctionality';\nexport type {\n OnOpenChangeData as OnOpenChangeDataDeprecated,\n ProcessedPromptListboxProps as ProcessedPromptListboxPropsDeprecated,\n UsePromptListboxFunctionality as UsePromptListboxFunctionalityDeprecated,\n UsePromptListboxFunctionalityParams as UsePromptListboxFunctionalityParamsDeprecated,\n} from './components/utils/PromptListboxFunctionality.types';\n\nexport type { PromptOptionProps, PromptOptionSlots, PromptOptionState } from './PromptOption';\nexport {\n PromptOption,\n promptOptionClassNames,\n renderPromptOption_unstable,\n usePromptOptionStyles_unstable,\n usePromptOption_unstable,\n} from './PromptOption';\n\nexport type {\n ActiveOptionChangeData,\n OptionProps,\n OptionSlots,\n OptionState,\n OptionValue,\n OptionOnSelectData,\n OverrideActionHandler,\n OverrideActionHandlerOptions,\n OverrideActionHandlerResult,\n} from '@fluentui-copilot/react-input-listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOption_unstable,\n useOptionStyles_unstable,\n} from '@fluentui-copilot/react-input-listbox';\n"],"names":["Option","PromptListbox","PromptOption","optionClassNames","promptListboxClassNames","promptOptionClassNames","renderOption_unstable","renderPromptListbox_unstable","renderPromptOption_unstable","useOptionStyles_unstable","useOption_unstable","usePromptListboxFunctionality","usePromptListboxFunctionalityDeprecated","usePromptListboxStyles_unstable","usePromptListbox_unstable","usePromptOptionStyles_unstable","usePromptOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6CEA,MAAM;eAANA,yBAAM;;IA3CNC,aAAa;eAAbA,4BAAa;;IAwBbC,YAAY;eAAZA,0BAAY;;IAoBZC,gBAAgB;eAAhBA,mCAAgB;;IA3ChBC,uBAAuB;eAAvBA,sCAAuB;;IAwBvBC,sBAAsB;eAAtBA,oCAAsB;;IAoBtBC,qBAAqB;eAArBA,wCAAqB;;IA3CrBC,4BAA4B;eAA5BA,2CAA4B;;IAwB5BC,2BAA2B;eAA3BA,yCAA2B;;IAqB3BC,wBAAwB;eAAxBA,2CAAwB;;IADxBC,kBAAkB;eAAlBA,qCAAkB;;IAvCXC,6BAA6B;eAA7BA,8DAA6B;;IAOIC,uCAAuC;eAAxED,4DAAAA;;IAXPE,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;IAuBzBC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;;+BAvBnB;iDAEuC;+CAO2C;8BAelF;mCAmBA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "PromptListbox for input components using EditorInput.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/chat-input-plugins": "^0.4.
|
|
16
|
-
"@fluentui-copilot/react-chat-input-plugins": "^0.4.
|
|
17
|
-
"@fluentui-copilot/react-editor-input": "^0.4.
|
|
18
|
-
"@fluentui-copilot/react-input-listbox": "^0.1.
|
|
19
|
-
"@fluentui-copilot/react-prompt-input": "^0.5.
|
|
20
|
-
"@fluentui-copilot/react-provider": "^0.9.
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "^0.4.2",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "^0.4.2",
|
|
17
|
+
"@fluentui-copilot/react-editor-input": "^0.4.3",
|
|
18
|
+
"@fluentui-copilot/react-input-listbox": "^0.1.3",
|
|
19
|
+
"@fluentui-copilot/react-prompt-input": "^0.5.4",
|
|
20
|
+
"@fluentui-copilot/react-provider": "^0.9.4",
|
|
21
21
|
"@fluentui-copilot/react-text-editor": "^0.4.1",
|
|
22
22
|
"@fluentui-copilot/text-editor": "^0.3.1",
|
|
23
23
|
"@swc/helpers": "^0.5.1"
|