@fluentui-copilot/react-prompt-listbox 0.3.6 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +16 -1
- package/CHANGELOG.md +11 -2
- package/lib/components/PromptListbox/usePromptListbox.js +1 -1
- package/lib/components/PromptListbox/usePromptListbox.js.map +1 -1
- package/lib/components/PromptOption/usePromptOption.js +6 -1
- package/lib/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptListbox/usePromptListbox.js +1 -1
- package/lib-commonjs/components/PromptListbox/usePromptListbox.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js +4 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 09 Jan 2025 01:14:53 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.4.0",
|
|
7
|
+
"version": "0.4.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "estebanmu@microsoft.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
13
|
+
"commit": "922e7a481c47e3dd170d10a2e8aaa3e78bd213bf",
|
|
14
|
+
"comment": "fix: Use listbox semantics and set aria-activedescendant when clicking to allow mouse + keyboard interactions."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 18 Dec 2024 08:55:42 GMT",
|
|
6
21
|
"tag": "@fluentui-copilot/react-prompt-listbox_v0.3.6",
|
|
7
22
|
"version": "0.3.6",
|
|
8
23
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
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 Thu, 09 Jan 2025 01:14:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.4.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.4.0)
|
|
8
|
+
|
|
9
|
+
Thu, 09 Jan 2025 01:14:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.3.6..@fluentui-copilot/react-prompt-listbox_v0.4.0)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Use listbox semantics and set aria-activedescendant when clicking to allow mouse + keyboard interactions. ([PR #2475](https://github.com/microsoft/fluentai/pull/2475) by estebanmu@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [0.3.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.3.6)
|
|
8
17
|
|
|
9
|
-
Wed, 18 Dec 2024 08:
|
|
18
|
+
Wed, 18 Dec 2024 08:55:42 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.3.5..@fluentui-copilot/react-prompt-listbox_v0.3.6)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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 PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n props: PromptListboxProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n const {\n id,\n onActiveOptionChange,\n inlinePopup = false,\n mountNode = undefined,\n open = true,\n activeDescendantController,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n } = props;\n const listboxId = useId('prompt-listbox', id);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n const nextOption = getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n const state: PromptListboxState = {\n ...deprecatedPropsDefaults,\n open,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n onActiveDescendantChange,\n activeDescendantController,\n inlinePopup,\n mountNode,\n\n components: {\n root: Listbox,\n },\n\n root: slot.always(\n { ...props, selectedOptions },\n {\n defaultProps: {\n disableAutoFocus: true,\n id: listboxId,\n tabIndex: undefined,\n role: '
|
|
1
|
+
{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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 PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n props: PromptListboxProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n const {\n id,\n onActiveOptionChange,\n inlinePopup = false,\n mountNode = undefined,\n open = true,\n activeDescendantController,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n } = props;\n const listboxId = useId('prompt-listbox', id);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n const nextOption = getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n const state: PromptListboxState = {\n ...deprecatedPropsDefaults,\n open,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n onActiveDescendantChange,\n activeDescendantController,\n inlinePopup,\n mountNode,\n\n components: {\n root: Listbox,\n },\n\n root: slot.always(\n { ...props, selectedOptions },\n {\n defaultProps: {\n disableAutoFocus: true,\n id: listboxId,\n tabIndex: undefined,\n role: 'listbox',\n },\n elementType: Listbox,\n },\n ),\n };\n\n state.root.ref = useMergedRefs(ref, state.root.ref);\n state.root.onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, state.root.onMouseDown),\n );\n\n state.root.onClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, state.root.onClick),\n );\n\n return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n PromptListboxContextState,\n 'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: noop,\n onOptionClick: noop,\n};\n"],"names":["Listbox","slot","useMergedRefs","mergeCallbacks","useEventCallback","useId","usePromptListbox_unstable","props","ref","id","onActiveOptionChange","inlinePopup","mountNode","undefined","open","activeDescendantController","getOptionById","getOptionsMatchingValue","selectedOptions","selectOption","registerOption","listboxId","onActiveDescendantChange","event","previousOption","detail","previousId","nextOption","type","state","deprecatedPropsDefaults","components","root","always","defaultProps","disableAutoFocus","tabIndex","role","elementType","onMouseDown","preventDefault","onClick","noop","activeOption","focusVisible","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,OAAO,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AAC1E,SAASC,cAAc,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAKpF,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,EAAE,EACFC,oBAAoB,EACpBC,cAAc,KAAK,EACnBC,YAAYC,SAAS,EACrBC,OAAO,IAAI,EACXC,0BAA0B,EAC1BC,aAAa,EACbC,uBAAuB,EACvBC,eAAe,EACfC,YAAY,EACZC,cAAc,EACf,GAAGb;IACJ,MAAMc,YAAYhB,MAAM,kBAAkBI;IAE1C,MAAMa,2BAA2BlB,iBAAiB,CAACmB;QACjD,MAAMC,iBAAiBD,MAAME,MAAM,CAACC,UAAU,GAAGV,cAAcO,MAAME,MAAM,CAACC,UAAU,IAAI;QAC1F,MAAMC,aAAaX,cAAcO,MAAME,MAAM,CAAChB,EAAE;QAChDC,iCAAAA,2CAAAA,qBAAuBa,OAAO;YAAEA;YAAOK,MAAM;YAAUJ;YAAgBG;QAAW;IACpF;IAEA,MAAME,QAA4B;QAChC,GAAGC,uBAAuB;QAC1BhB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAE;QACAP;QACAJ;QACAC;QAEAmB,YAAY;YACVC,MAAMhC;QACR;QAEAgC,MAAM/B,KAAKgC,MAAM,CACf;YAAE,GAAG1B,KAAK;YAAEW;QAAgB,GAC5B;YACEgB,cAAc;gBACZC,kBAAkB;gBAClB1B,IAAIY;gBACJe,UAAUvB;gBACVwB,MAAM;YACR;YACAC,aAAatC;QACf;IAEJ;IAEA6B,MAAMG,IAAI,CAACxB,GAAG,GAAGN,cAAcM,KAAKqB,MAAMG,IAAI,CAACxB,GAAG;IAClDqB,MAAMG,IAAI,CAACO,WAAW,GAAGnC,iBACvBD,eAAe,CAACoB;QACdA,MAAMiB,cAAc;IACtB,GAAGX,MAAMG,IAAI,CAACO,WAAW;IAG3BV,MAAMG,IAAI,CAACS,OAAO,GAAGrC,iBACnBD,eAAe,CAACoB;QACdA,MAAMiB,cAAc;IACtB,GAAGX,MAAMG,IAAI,CAACS,OAAO;IAGvB,OAAOZ;AACT,EAAE;AAEF,MAAMa,OAAO,IAAM;AAEnB,MAAMZ,0BAGF;IACFa,cAAc9B;IACd+B,cAAc;IACdC,iBAAiBH;IACjBI,eAAeJ;AACjB"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';
|
|
3
|
+
import { useActiveDescendantContext } from '@fluentui/react-aria';
|
|
3
4
|
import { useListboxContext_unstable } from '@fluentui/react-combobox';
|
|
4
5
|
// If you add JSX to this file, be sure to change the file type to .tsx
|
|
5
6
|
/**
|
|
@@ -12,6 +13,9 @@ import { useListboxContext_unstable } from '@fluentui/react-combobox';
|
|
|
12
13
|
* @param ref - reference to root HTMLElement of PromptOption
|
|
13
14
|
*/
|
|
14
15
|
export const usePromptOption_unstable = (props, ref) => {
|
|
16
|
+
const {
|
|
17
|
+
controller: activeDescendantController
|
|
18
|
+
} = useActiveDescendantContext();
|
|
15
19
|
const {
|
|
16
20
|
children,
|
|
17
21
|
disabled,
|
|
@@ -44,6 +48,7 @@ export const usePromptOption_unstable = (props, ref) => {
|
|
|
44
48
|
event.preventDefault();
|
|
45
49
|
return;
|
|
46
50
|
}
|
|
51
|
+
activeDescendantController.focus(id);
|
|
47
52
|
// handle selection change
|
|
48
53
|
selectOption(event, optionData);
|
|
49
54
|
onOptionClick(event);
|
|
@@ -63,7 +68,7 @@ export const usePromptOption_unstable = (props, ref) => {
|
|
|
63
68
|
ref: useMergedRefs(ref, optionRef),
|
|
64
69
|
'aria-disabled': disabled ? true : undefined,
|
|
65
70
|
id,
|
|
66
|
-
role: '
|
|
71
|
+
role: 'option',
|
|
67
72
|
...props,
|
|
68
73
|
onClick
|
|
69
74
|
}), {
|
|
@@ -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 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: '
|
|
1
|
+
{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\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 { controller: activeDescendantController } = useActiveDescendantContext();\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 activeDescendantController.focus(id);\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: 'option',\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","useActiveDescendantContext","useListboxContext_unstable","usePromptOption_unstable","props","ref","controller","activeDescendantController","children","disabled","text","value","optionRef","useRef","optionText","getTextString","optionValue","id","optionData","useMemo","registerOption","ctx","selected","selectedOptions","undefined","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","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,uBAAuB;AAClE,SAASC,0BAA0B,QAAQ,2BAA2B;AAItE,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,YAAYC,0BAA0B,EAAE,GAAGN;IACnD,MAAM,EAAEO,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAC5C,MAAMQ,YAAYhB,MAAMiB,MAAM,CAAiB;IAC/C,MAAMC,aAAaC,cAAcL,MAAMF;IACvC,MAAMQ,cAAcL,kBAAAA,mBAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAMG,KAAKlB,MAAM,iBAAiBK,MAAMa,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAatB,MAAMuB,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIR;YAAUC,MAAMI;YAAYH,OAAOK;QAAY,CAAA,GAC5D;QAACC;QAAIR;QAAUK;QAAYE;KAAY;IAGzC,iBAAiB;IACjB,MAAMI,iBAAiBlB,2BAA2BmB,CAAAA,MAAOA,IAAID,cAAc;IAC3E,MAAME,WAAWpB,2BAA2BmB,CAAAA;QAC1C,MAAME,kBAAkBF,IAAIE,eAAe;QAE3C,OAAOP,gBAAgBQ,aAAaD,gBAAgBE,IAAI,CAACC,CAAAA,IAAKA,MAAMV,iBAAiBQ;IACvF;IACA,MAAMG,eAAezB,2BAA2BmB,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgB1B,2BAA2BmB,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,MAAMC,UAAU,CAACC;YAYf1B;QAXA,IAAIK,UAAU;YACZqB,MAAMC,cAAc;YACpB;QACF;QAEAxB,2BAA2ByB,KAAK,CAACf;QAEjC,0BAA0B;QAC1BU,aAAaG,OAAOZ;QAEpBU,cAAcE;SACd1B,iBAAAA,MAAMyB,OAAO,cAAbzB,qCAAAA,oBAAAA,OAAgB0B;IAClB;IAEA,oCAAoC;IACpClC,MAAMqC,SAAS,CAAC;QACd,IAAIhB,MAAML,UAAUsB,OAAO,EAAE;YAC3B,OAAOd,eAAeF,YAAYN,UAAUsB,OAAO;QACrD;IACF,GAAG;QAACjB;QAAIC;QAAYE;KAAe;IAEnC,OAAO;QACLe,YAAY;YACVC,MAAM;QACR;QACAA,MAAMtC,KAAKuC,MAAM,CACfxC,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKO;YACxB,iBAAiBH,WAAW,OAAOe;YACnCP;YACAqB,MAAM;YACN,GAAGlC,KAAK;YACRyB;QACF,IACA;YAAEU,aAAa;QAAM;QAEvB9B;QACAa;IACF;AACF,EAAE;AAEF,SAASP,cAAcL,IAAwB,EAAEF,QAAyB;IACxE,IAAIE,SAASc,WAAW;QACtB,OAAOd;IACT;IAEA,IAAI8B,aAAa;IACjB,IAAIC,oBAAoB;IACxB7C,MAAM8C,QAAQ,CAACC,OAAO,CAACnC,UAAUoC,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":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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 PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n props: PromptListboxProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n const {\n id,\n onActiveOptionChange,\n inlinePopup = false,\n mountNode = undefined,\n open = true,\n activeDescendantController,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n } = props;\n const listboxId = useId('prompt-listbox', id);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n const nextOption = getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n const state: PromptListboxState = {\n ...deprecatedPropsDefaults,\n open,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n onActiveDescendantChange,\n activeDescendantController,\n inlinePopup,\n mountNode,\n\n components: {\n root: Listbox,\n },\n\n root: slot.always(\n { ...props, selectedOptions },\n {\n defaultProps: {\n disableAutoFocus: true,\n id: listboxId,\n tabIndex: undefined,\n role: '
|
|
1
|
+
{"version":3,"sources":["usePromptListbox.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Listbox, slot, useMergedRefs } from '@fluentui/react-components';\nimport { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utilities';\nimport type { PromptListboxProps, PromptListboxState } from './PromptListbox.types';\nimport type { PromptListboxContextState } from './usePromptListboxContextValues';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\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 PromptListbox.\n *\n * The returned state can be modified with hooks such as usePromptListboxStyles_unstable,\n * before being passed to renderPromptListbox_unstable.\n *\n * @param props - props from this instance of PromptListbox\n * @param ref - reference to root HTMLElement of PromptListbox\n */\nexport const usePromptListbox_unstable = (\n props: PromptListboxProps,\n ref: React.Ref<HTMLDivElement>,\n): PromptListboxState => {\n const {\n id,\n onActiveOptionChange,\n inlinePopup = false,\n mountNode = undefined,\n open = true,\n activeDescendantController,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n } = props;\n const listboxId = useId('prompt-listbox', id);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;\n const nextOption = getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n const state: PromptListboxState = {\n ...deprecatedPropsDefaults,\n open,\n getOptionById,\n getOptionsMatchingValue,\n selectedOptions,\n selectOption,\n registerOption,\n onActiveDescendantChange,\n activeDescendantController,\n inlinePopup,\n mountNode,\n\n components: {\n root: Listbox,\n },\n\n root: slot.always(\n { ...props, selectedOptions },\n {\n defaultProps: {\n disableAutoFocus: true,\n id: listboxId,\n tabIndex: undefined,\n role: 'listbox',\n },\n elementType: Listbox,\n },\n ),\n };\n\n state.root.ref = useMergedRefs(ref, state.root.ref);\n state.root.onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, state.root.onMouseDown),\n );\n\n state.root.onClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, state.root.onClick),\n );\n\n return state;\n};\n\nconst noop = () => null;\n\nconst deprecatedPropsDefaults: Pick<\n PromptListboxContextState,\n 'activeOption' | 'focusVisible' | 'setActiveOption' | 'onOptionClick'\n> = {\n activeOption: undefined,\n focusVisible: false,\n setActiveOption: noop,\n onOptionClick: noop,\n};\n"],"names":["id","inlinePopup","previousOption","nextOption","onActiveOptionChange","event","selectOption","registerOption","open","getOptionById","getOptionsMatchingValue","selectedOptions","onActiveDescendantChange","root","elementType","Listbox","state","ref","useMergedRefs","onClick","preventDefault","tabIndex","role","noop","deprecatedPropsDefaults","activeOption","setActiveOption","onOptionClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAuBIA;;;eAAAA;;;iCAtByC;gCACW;AAoBtD,MACEA,4BAEAC,CAAAA,OAAAA;UAUF,EAEAD,EAAA,sBACQE,gBACAC,KAAAA,cACNC,SAAAA,aAAgCC,4BAAa,eAAUH,yBAAgBC,iBAAW,EACpFG,YAAA,EAEAC,cAAkC;UAEhCC,YAAAA,IAAAA,qBAAAA,EAAAA,kBAAAA;UACAC,2BAAAA,IAAAA,gCAAAA,EAAAA,CAAAA;cACAC,iBAAAA,MAAAA,MAAAA,CAAAA,UAAAA,GAAAA,cAAAA,MAAAA,MAAAA,CAAAA,UAAAA,IAAAA;cACAC,aAAAA,cAAAA,MAAAA,MAAAA,CAAAA,EAAAA;iCACAL,QAAAA,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,OAAAA;;kBAEAM;;;;;kBAMEC;kCACF;;;;;;;;;;;oBAWIC;kBACFC,wBAAA;QAEJ;QAEAC,MAAMH,qBAAI,CAACI,MAAMC,CAAAA;YACjBF,GAAAA,KAAU;;QAGR,GAAGA;YAGLA,cAAWG;gBAEPd,kBAAMe;gBACLJ,IAAAA;gBAGLK,UAAOL;gBACPM,MAAA;YAEIC;YAEAC,aAAAA,wBAAAA;QAIJC;;UAEAC,IAAAA,CAAAA,GAAAA,GAAAA,IAAAA,8BAAiBH,EAAAA,KAAAA,MAAAA,IAAAA,CAAAA,GAAAA;UACjBI,IAAAA,CAAAA,WAAeJ,GAAAA,IAAAA,gCAAAA,EAAAA,IAAAA,8BAAAA,EAAAA,CAAAA;QACjBlB,MAAAe,cAAA"}
|
|
@@ -11,8 +11,10 @@ Object.defineProperty(exports, "usePromptOption_unstable", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
|
+
const _reactaria = require("@fluentui/react-aria");
|
|
14
15
|
const _reactcombobox = require("@fluentui/react-combobox");
|
|
15
16
|
const usePromptOption_unstable = (props, ref)=>{
|
|
17
|
+
const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
|
|
16
18
|
const { children, disabled, text, value } = props;
|
|
17
19
|
const optionRef = _react.useRef(null);
|
|
18
20
|
const optionText = getTextString(text, children);
|
|
@@ -45,6 +47,7 @@ const usePromptOption_unstable = (props, ref)=>{
|
|
|
45
47
|
event.preventDefault();
|
|
46
48
|
return;
|
|
47
49
|
}
|
|
50
|
+
activeDescendantController.focus(id);
|
|
48
51
|
// handle selection change
|
|
49
52
|
selectOption(event, optionData);
|
|
50
53
|
onOptionClick(event);
|
|
@@ -68,7 +71,7 @@ const usePromptOption_unstable = (props, ref)=>{
|
|
|
68
71
|
ref: (0, _reactcomponents.useMergedRefs)(ref, optionRef),
|
|
69
72
|
'aria-disabled': disabled ? true : undefined,
|
|
70
73
|
id,
|
|
71
|
-
role: '
|
|
74
|
+
role: 'option',
|
|
72
75
|
...props,
|
|
73
76
|
onClick
|
|
74
77
|
}), {
|
|
@@ -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 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: '
|
|
1
|
+
{"version":3,"sources":["usePromptOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId, useMergedRefs } from '@fluentui/react-components';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\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 { controller: activeDescendantController } = useActiveDescendantContext();\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 activeDescendantController.focus(id);\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: 'option',\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":["controller","activeDescendantController","optionRef","useActiveDescendantContext","getTextString","children","disabled","id","text","value","optionText","optionValue","registerOption","selected","useListboxContext_unstable","selectedOptions","find","ctx","selectOption","onOptionClick","undefined","props","preventDefault","event","optionData","React","onClick","_props_onClick","call","useEffect","current","components","slot","always","getIntrinsicElementProps","root","ref","useMergedRefs","role","textString","hasNonStringChild","child","Children","forEach","warn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBUA;;;eAAAA;;;;iEAtBa;iCAC8C;2BAC1B;+BACA;AAmBzC,MAAQA,2BAAYC,CAAAA,OAAAA;UACpB,EACAD,YAAME,0BAAyC,KAC/CC,IAAAA,qCAAmBC;UACnB,EAEAC,QAAA,EACAC,QAAMC,EAENC,IAAA,EACAC,KAAA;sBACeH,OAAAA,MAAAA,CAAAA;uBAAgBI,cAAAA,MAAAA;wBAAmBC,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAAA;2DAChD;UAACJ,KAAAA,IAAAA,sBAAAA,EAAAA,iBAAAA,MAAAA,EAAAA;kDAAID;UAAUI,aAAAA,OAAAA,OAAAA,CAAAA,IAAAA,CAAAA;;;YAGjBF,MAAAE;YACAD,OAAMG;YACN;QAAAL;QAAMM;QAAWC;QAAAA;KAAAA;qBACTC;UAENH,iBAAOD,IAAAA,yCAA6BI,EAAAA,CAAAA,MAAAA,IAAgBC,cAAgBL;UACtEE,WAAAC,IAAAA,yCAAA,EAAAG,CAAAA;QACA,MAAMC,kBAAeJ,IAAAA,eAAAA;QACrB,OAAMK,gBAAgBL,aAAAA,gBAA2BG,IAAOA,CAAAA,CAAAA,IAAIE,MAAAA,iBAAaC;;yBAcvEC,IAAAA,yCAAAA,EAAAA,CAAAA,MAAAA,IAAAA,YAAAA;UAXAF,gBAAcL,IAAAA,yCAAA,EAAAG,CAAAA,MAAAA,IAAAE,aAAA;oBACNG,CAAAA;;YAERhB,UAAA;kBAEAL,cAAAA;;;mCAKcsB,KAAAA,CAAAA;kCACdF;QACFH,aAAAK,OAAAC;QAEAL,cAAAI;QACAE,CAAAA,iBAAgBJ,MAAAK,OAAA,MAAA,QAAAC,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAC,IAAA,CAAAP,OAAAE;;wCAEUC;WACxBK,SAAA,CAAA;QACF,IAAGtB,MAAAL,UAAA4B,OAAA,EAAA;mBAACvB,eAAAA,YAAAA,UAAAA,OAAAA;;;;QAAgBK;QAAAA;KAAAA;WAAe;QAEnCmB,YAAO;kBACLA;;cAEAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;iBACAC,IAAAA,8BAAWF,EAAMG,KACfF;6BACOG,WAAcD,OAAKlC;;kBAExBK;oBACA+B;;;yBAIF;;;;;;AAKN,SAAElC,cAAAI,IAAA,EAAAH,QAAA;IAEF,IAAAG,SAASJ,WAAcI;QACrB,OAAIA;;QAEJ+B,aAAA;QAEAC,oBAAiB;WACbA,QAAAA,CAAAA,OAAAA,CAAAA,UAAoBC,CAAAA;QACxBhB,IAAAA,OAAMiB,UAASC,UAAQtC;0BACVoC;;gCAEJ;;;iEAGT;QAEAD,mBAAA;QACA,sCAAuB;gBACrBI,IAAA,CAAA;;WAEFL;EAGF,2CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "PromptListbox for input components using EditorInput.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/chat-input-plugins": "^0.
|
|
16
|
-
"@fluentui-copilot/react-chat-input-plugins": "^0.
|
|
17
|
-
"@fluentui-copilot/react-editor-input": "^0.
|
|
18
|
-
"@fluentui-copilot/react-prompt-input": "^0.
|
|
15
|
+
"@fluentui-copilot/chat-input-plugins": "^0.4.0",
|
|
16
|
+
"@fluentui-copilot/react-chat-input-plugins": "^0.4.0",
|
|
17
|
+
"@fluentui-copilot/react-editor-input": "^0.4.0",
|
|
18
|
+
"@fluentui-copilot/react-prompt-input": "^0.5.0",
|
|
19
19
|
"@fluentui-copilot/react-provider": "^0.9.3",
|
|
20
|
-
"@fluentui-copilot/react-text-editor": "^0.
|
|
21
|
-
"@fluentui-copilot/text-editor": "^0.
|
|
20
|
+
"@fluentui-copilot/react-text-editor": "^0.4.0",
|
|
21
|
+
"@fluentui-copilot/text-editor": "^0.3.0",
|
|
22
22
|
"@swc/helpers": "^0.5.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|