@fluentui-copilot/react-prompt-listbox 0.8.1-hotfix.1 → 0.8.1-hotfix.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 +4 -4
- package/CHANGELOG.md +5 -5
- package/lib/PromptListbox.js +1 -0
- package/lib/PromptOption.js +1 -0
- package/lib/components/PromptListbox/PromptListbox.js +7 -5
- package/lib/components/PromptListbox/PromptListbox.types.js +2 -1
- package/lib/components/PromptListbox/index.js +1 -0
- package/lib/components/PromptListbox/renderPromptListbox.js +21 -17
- package/lib/components/PromptListbox/usePromptListbox.js +67 -53
- package/lib/components/PromptListbox/usePromptListboxContextValues.js +30 -22
- package/lib/components/PromptListbox/usePromptListboxStyles.styles.raw.js +25 -21
- package/lib/components/PromptOption/PromptOption.js +6 -4
- package/lib/components/PromptOption/PromptOption.types.js +2 -1
- package/lib/components/PromptOption/index.js +1 -0
- package/lib/components/PromptOption/renderPromptOption.js +6 -4
- package/lib/components/PromptOption/usePromptOption.js +84 -84
- package/lib/components/PromptOption/usePromptOptionStyles.styles.raw.js +60 -54
- package/lib/components/motion/PromptListboxMotion.js +50 -52
- package/lib/components/utils/OptionCollection.types.js +2 -1
- package/lib/components/utils/PromptListboxFunctionality.types.js +2 -1
- package/lib/components/utils/Selection.types.js +2 -1
- package/lib/components/utils/dropdownKeyActions.js +60 -49
- package/lib/components/utils/useListboxPositioning.js +24 -22
- package/lib/components/utils/useOptionCollection.js +32 -30
- package/lib/components/utils/usePromptListboxFunctionality.js +123 -121
- package/lib/components/utils/usePromptListboxFunctionalityV2.js +124 -109
- package/lib/components/utils/useSelection.js +49 -57
- package/lib/components/utils/useTriggerKeyDown.js +133 -124
- package/lib/index.js +1 -0
- package/lib/plugins/CursorPositionPlugin.js +39 -39
- package/lib-commonjs/PromptListbox.js +1 -0
- package/lib-commonjs/PromptOption.js +1 -0
- package/lib-commonjs/components/PromptListbox/PromptListbox.js +1 -1
- package/lib-commonjs/components/PromptListbox/PromptListbox.js.map +1 -1
- package/lib-commonjs/components/PromptListbox/PromptListbox.types.js +1 -0
- package/lib-commonjs/components/PromptListbox/index.js +1 -0
- package/lib-commonjs/components/PromptListbox/renderPromptListbox.js +1 -1
- package/lib-commonjs/components/PromptListbox/renderPromptListbox.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/PromptListbox/usePromptListboxContextValues.js +1 -1
- package/lib-commonjs/components/PromptListbox/usePromptListboxContextValues.js.map +1 -1
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/PromptListbox/usePromptListboxStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/PromptOption/PromptOption.js +1 -1
- package/lib-commonjs/components/PromptOption/PromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/PromptOption.types.js +1 -0
- package/lib-commonjs/components/PromptOption/index.js +1 -0
- package/lib-commonjs/components/PromptOption/renderPromptOption.js +1 -1
- package/lib-commonjs/components/PromptOption/renderPromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOption.js.map +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.raw.js +1 -1
- package/lib-commonjs/components/PromptOption/usePromptOptionStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/motion/PromptListboxMotion.js +1 -1
- package/lib-commonjs/components/motion/PromptListboxMotion.js.map +1 -1
- package/lib-commonjs/components/utils/OptionCollection.types.js +1 -0
- package/lib-commonjs/components/utils/PromptListboxFunctionality.types.js +1 -0
- package/lib-commonjs/components/utils/Selection.types.js +1 -0
- package/lib-commonjs/components/utils/dropdownKeyActions.js +1 -1
- package/lib-commonjs/components/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/components/utils/useListboxPositioning.js +1 -1
- package/lib-commonjs/components/utils/useListboxPositioning.js.map +1 -1
- package/lib-commonjs/components/utils/useOptionCollection.js +1 -1
- package/lib-commonjs/components/utils/useOptionCollection.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionality.js.map +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionalityV2.js +1 -1
- package/lib-commonjs/components/utils/usePromptListboxFunctionalityV2.js.map +1 -1
- package/lib-commonjs/components/utils/useSelection.js +1 -1
- package/lib-commonjs/components/utils/useSelection.js.map +1 -1
- package/lib-commonjs/components/utils/useTriggerKeyDown.js +1 -1
- package/lib-commonjs/components/utils/useTriggerKeyDown.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/plugins/CursorPositionPlugin.js +1 -1
- package/lib-commonjs/plugins/CursorPositionPlugin.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-prompt-listbox",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-prompt-listbox_v0.8.1-hotfix.
|
|
7
|
-
"version": "0.8.1-hotfix.
|
|
5
|
+
"date": "Fri, 19 Sep 2025 15:10:20 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-prompt-listbox_v0.8.1-hotfix.2",
|
|
7
|
+
"version": "0.8.1-hotfix.2",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
11
|
"author": "hochelmartin@gmail.com",
|
|
12
12
|
"package": "@fluentui-copilot/react-prompt-listbox",
|
|
13
13
|
"commit": "3e4ebe676646c4c4346dbbab83511f963ffefd85",
|
|
14
|
-
"comment": "release: prepare hotfix 0.26.2-hotfix.
|
|
14
|
+
"comment": "release: prepare hotfix 0.26.2-hotfix.2"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
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, 19 Sep 2025 15:10:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.8.1-hotfix.
|
|
7
|
+
## [0.8.1-hotfix.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.8.1-hotfix.2)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.8.1..@fluentui-copilot/react-prompt-listbox_v0.8.1-hotfix.
|
|
9
|
+
Fri, 19 Sep 2025 15:10:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.8.1..@fluentui-copilot/react-prompt-listbox_v0.8.1-hotfix.2)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
- release: prepare hotfix 0.26.2-hotfix.
|
|
14
|
+
- release: prepare hotfix 0.26.2-hotfix.2 ([PR #3284](https://github.com/microsoft/fluentai/pull/3284) by hochelmartin@gmail.com)
|
|
15
15
|
|
|
16
16
|
## [0.8.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.8.0)
|
|
17
17
|
|
package/lib/PromptListbox.js
CHANGED
package/lib/PromptOption.js
CHANGED
|
@@ -3,10 +3,12 @@ import { usePromptListbox_unstable } from './usePromptListbox';
|
|
|
3
3
|
import { renderPromptListbox_unstable } from './renderPromptListbox';
|
|
4
4
|
import { usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';
|
|
5
5
|
import { usePromptListboxContextValues } from './usePromptListboxContextValues';
|
|
6
|
-
/**@deprecated - use InputListbox instead */
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
/**@deprecated - use InputListbox instead */
|
|
7
|
+
export const PromptListbox = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
8
|
+
const state = usePromptListbox_unstable(props, ref);
|
|
9
|
+
const contextValues = usePromptListboxContextValues(state);
|
|
10
|
+
usePromptListboxStyles_unstable(state);
|
|
11
|
+
return renderPromptListbox_unstable(state, contextValues);
|
|
11
12
|
});
|
|
12
13
|
PromptListbox.displayName = 'PromptListbox';
|
|
14
|
+
//# sourceMappingURL=PromptListbox.js.map
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=PromptListbox.types.js.map
|
|
@@ -2,3 +2,4 @@ export { PromptListbox } from './PromptListbox';
|
|
|
2
2
|
export { renderPromptListbox_unstable } from './renderPromptListbox';
|
|
3
3
|
export { usePromptListbox_unstable } from './usePromptListbox';
|
|
4
4
|
export { promptListboxClassNames, usePromptListboxStyles_unstable } from './usePromptListboxStyles.styles';
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,22 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots, ListboxProvider, Portal } from '@fluentui/react-components';
|
|
3
3
|
import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of PromptListbox
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
6
|
+
*/
|
|
7
|
+
export const renderPromptListbox_unstable = (state, contextValues) => {
|
|
8
|
+
assertSlots(state);
|
|
9
|
+
const {
|
|
10
|
+
open
|
|
11
|
+
} = state;
|
|
12
|
+
return /*#__PURE__*/_jsx(ListboxProvider, {
|
|
13
|
+
value: contextValues.listbox,
|
|
14
|
+
children: /*#__PURE__*/_jsx(ActiveDescendantContextProvider, {
|
|
15
|
+
value: contextValues.activeDescendant,
|
|
16
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
17
|
+
"aria-owns": open ? state.root.id : undefined,
|
|
18
|
+
children: open && (state.inlinePopup ? /*#__PURE__*/_jsx(state.root, {}) : /*#__PURE__*/_jsx(Portal, {
|
|
19
|
+
mountNode: state.mountNode,
|
|
20
|
+
children: /*#__PURE__*/_jsx(state.root, {})
|
|
21
|
+
}))
|
|
22
|
+
})
|
|
23
|
+
})
|
|
24
|
+
});
|
|
22
25
|
};
|
|
26
|
+
//# sourceMappingURL=renderPromptListbox.js.map
|
|
@@ -9,60 +9,74 @@ import { mergeCallbacks, useEventCallback, useId } from '@fluentui/react-utiliti
|
|
|
9
9
|
*
|
|
10
10
|
* @param props - props from this instance of PromptListbox
|
|
11
11
|
* @param ref - reference to root HTMLElement of PromptListbox
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
12
|
+
*/
|
|
13
|
+
export const usePromptListbox_unstable = (props, ref) => {
|
|
14
|
+
const {
|
|
15
|
+
id,
|
|
16
|
+
onActiveOptionChange,
|
|
17
|
+
inlinePopup = false,
|
|
18
|
+
mountNode = undefined,
|
|
19
|
+
open = true,
|
|
20
|
+
activeDescendantController,
|
|
21
|
+
getOptionById,
|
|
22
|
+
getOptionsMatchingValue,
|
|
23
|
+
selectedOptions,
|
|
24
|
+
selectOption,
|
|
25
|
+
registerOption
|
|
26
|
+
} = props;
|
|
27
|
+
const listboxId = useId('prompt-listbox', id);
|
|
28
|
+
const onActiveDescendantChange = useEventCallback(event => {
|
|
29
|
+
const previousOption = event.detail.previousId ? getOptionById(event.detail.previousId) : null;
|
|
30
|
+
const nextOption = getOptionById(event.detail.id);
|
|
31
|
+
onActiveOptionChange === null || onActiveOptionChange === void 0 ? void 0 : onActiveOptionChange(event, {
|
|
32
|
+
event,
|
|
33
|
+
type: 'change',
|
|
34
|
+
previousOption,
|
|
35
|
+
nextOption
|
|
24
36
|
});
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
37
|
+
});
|
|
38
|
+
const state = {
|
|
39
|
+
...deprecatedPropsDefaults,
|
|
40
|
+
open,
|
|
41
|
+
getOptionById,
|
|
42
|
+
getOptionsMatchingValue,
|
|
43
|
+
selectedOptions,
|
|
44
|
+
selectOption,
|
|
45
|
+
registerOption,
|
|
46
|
+
onActiveDescendantChange,
|
|
47
|
+
activeDescendantController,
|
|
48
|
+
inlinePopup,
|
|
49
|
+
mountNode,
|
|
50
|
+
components: {
|
|
51
|
+
root: Listbox
|
|
52
|
+
},
|
|
53
|
+
root: slot.always({
|
|
54
|
+
...props,
|
|
55
|
+
selectedOptions
|
|
56
|
+
}, {
|
|
57
|
+
defaultProps: {
|
|
58
|
+
disableAutoFocus: true,
|
|
59
|
+
id: listboxId,
|
|
60
|
+
tabIndex: undefined,
|
|
61
|
+
role: 'listbox'
|
|
62
|
+
},
|
|
63
|
+
elementType: Listbox
|
|
64
|
+
})
|
|
65
|
+
};
|
|
66
|
+
state.root.ref = useMergedRefs(ref, state.root.ref);
|
|
67
|
+
state.root.onMouseDown = useEventCallback(mergeCallbacks(event => {
|
|
68
|
+
event.preventDefault();
|
|
69
|
+
}, state.root.onMouseDown));
|
|
70
|
+
state.root.onClick = useEventCallback(mergeCallbacks(event => {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
}, state.root.onClick));
|
|
73
|
+
return state;
|
|
61
74
|
};
|
|
62
|
-
const noop = ()=>null;
|
|
75
|
+
const noop = () => null;
|
|
63
76
|
const deprecatedPropsDefaults = {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
77
|
+
activeOption: undefined,
|
|
78
|
+
focusVisible: false,
|
|
79
|
+
setActiveOption: noop,
|
|
80
|
+
onOptionClick: noop
|
|
68
81
|
};
|
|
82
|
+
//# sourceMappingURL=usePromptListbox.js.map
|
|
@@ -1,25 +1,33 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export function usePromptListboxContextValues(state) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
3
|
+
const {
|
|
4
|
+
getOptionById,
|
|
5
|
+
getOptionsMatchingValue,
|
|
6
|
+
registerOption,
|
|
7
|
+
selectedOptions,
|
|
8
|
+
selectOption,
|
|
9
|
+
activeDescendantController,
|
|
10
|
+
onOptionClick,
|
|
11
|
+
onActiveDescendantChange
|
|
12
|
+
} = state;
|
|
13
|
+
const activeDescendant = React.useMemo(() => ({
|
|
14
|
+
controller: activeDescendantController
|
|
15
|
+
}), [activeDescendantController]);
|
|
16
|
+
const listbox = {
|
|
17
|
+
activeOption: undefined,
|
|
18
|
+
focusVisible: false,
|
|
19
|
+
getOptionById,
|
|
20
|
+
getOptionsMatchingValue,
|
|
21
|
+
registerOption,
|
|
22
|
+
selectedOptions,
|
|
23
|
+
selectOption,
|
|
24
|
+
setActiveOption: () => null,
|
|
25
|
+
onOptionClick,
|
|
26
|
+
onActiveDescendantChange
|
|
27
|
+
};
|
|
28
|
+
return {
|
|
29
|
+
activeDescendant,
|
|
30
|
+
listbox
|
|
31
|
+
};
|
|
25
32
|
}
|
|
33
|
+
//# sourceMappingURL=usePromptListboxContextValues.js.map
|
|
@@ -1,31 +1,35 @@
|
|
|
1
1
|
import { makeStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
2
|
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
3
|
export const promptListboxClassNames = {
|
|
4
|
-
|
|
4
|
+
root: 'fai-PromptListbox'
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the root slot
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
8
|
+
*/
|
|
9
|
+
const useStyles = makeStyles({
|
|
10
|
+
listbox: {
|
|
11
|
+
boxShadow: tokens.shadow16,
|
|
12
|
+
borderRadius: tokens.borderRadiusMedium,
|
|
13
|
+
maxHeight: '80vh',
|
|
14
|
+
boxSizing: 'border-box'
|
|
15
|
+
},
|
|
16
|
+
listboxCollapsed: {
|
|
17
|
+
display: 'none'
|
|
18
|
+
},
|
|
19
|
+
// When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
|
|
20
|
+
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
|
|
21
|
+
inlineListbox: {
|
|
22
|
+
zIndex: 1
|
|
23
|
+
}
|
|
23
24
|
});
|
|
24
25
|
/**
|
|
25
26
|
* Apply styling to the PromptListbox slots based on the state
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
*/
|
|
28
|
+
export const usePromptListboxStyles_unstable = state => {
|
|
29
|
+
'use no memo';
|
|
30
|
+
|
|
31
|
+
const styles = useStyles();
|
|
32
|
+
state.root.className = mergeClasses(promptListboxClassNames.root, styles.listbox, state.inlinePopup && styles.inlineListbox, !state.open && styles.listboxCollapsed, state.root.className);
|
|
33
|
+
return state;
|
|
31
34
|
};
|
|
35
|
+
//# sourceMappingURL=usePromptListboxStyles.styles.raw.js.map
|
|
@@ -2,9 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import { usePromptOption_unstable } from './usePromptOption';
|
|
3
3
|
import { renderPromptOption_unstable } from './renderPromptOption';
|
|
4
4
|
import { usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';
|
|
5
|
-
/**@deprecated - use Option instead */
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
/**@deprecated - use Option instead */
|
|
6
|
+
export const PromptOption = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
7
|
+
const state = usePromptOption_unstable(props, ref);
|
|
8
|
+
usePromptOptionStyles_unstable(state);
|
|
9
|
+
return renderPromptOption_unstable(state);
|
|
9
10
|
});
|
|
10
11
|
PromptOption.displayName = 'PromptOption';
|
|
12
|
+
//# sourceMappingURL=PromptOption.js.map
|
|
@@ -2,3 +2,4 @@ export { PromptOption } from './PromptOption';
|
|
|
2
2
|
export { renderPromptOption_unstable } from './renderPromptOption';
|
|
3
3
|
export { usePromptOption_unstable } from './usePromptOption';
|
|
4
4
|
export { promptOptionClassNames, usePromptOptionStyles_unstable } from './usePromptOptionStyles.styles';
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-components';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of PromptOption
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
*/
|
|
6
|
+
export const renderPromptOption_unstable = state => {
|
|
7
|
+
assertSlots(state);
|
|
8
|
+
return /*#__PURE__*/_jsx(state.root, {});
|
|
8
9
|
};
|
|
10
|
+
//# sourceMappingURL=renderPromptOption.js.map
|
|
@@ -11,91 +11,91 @@ import { useListboxContext_unstable } from '@fluentui/react-combobox';
|
|
|
11
11
|
*
|
|
12
12
|
* @param props - props from this instance of PromptOption
|
|
13
13
|
* @param ref - reference to root HTMLElement of PromptOption
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
};
|
|
14
|
+
*/
|
|
15
|
+
export const usePromptOption_unstable = (props, ref) => {
|
|
16
|
+
const {
|
|
17
|
+
controller: activeDescendantController
|
|
18
|
+
} = useActiveDescendantContext();
|
|
19
|
+
const {
|
|
20
|
+
children,
|
|
21
|
+
disabled,
|
|
22
|
+
text,
|
|
23
|
+
value
|
|
24
|
+
} = props;
|
|
25
|
+
const optionRef = React.useRef(null);
|
|
26
|
+
const optionText = getTextString(text, children);
|
|
27
|
+
const optionValue = value !== null && value !== void 0 ? value : optionText;
|
|
28
|
+
// use the id if provided, otherwise use a generated id
|
|
29
|
+
const id = useId('fluent-option', props.id);
|
|
30
|
+
// data used for context registration & events
|
|
31
|
+
const optionData = React.useMemo(() => ({
|
|
32
|
+
id,
|
|
33
|
+
disabled,
|
|
34
|
+
text: optionText,
|
|
35
|
+
value: optionValue
|
|
36
|
+
}), [id, disabled, optionText, optionValue]);
|
|
37
|
+
// context values
|
|
38
|
+
const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);
|
|
39
|
+
const selected = useListboxContext_unstable(ctx => {
|
|
40
|
+
const selectedOptions = ctx.selectedOptions;
|
|
41
|
+
return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;
|
|
42
|
+
});
|
|
43
|
+
const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);
|
|
44
|
+
const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);
|
|
45
|
+
const onClick = event => {
|
|
46
|
+
var _props_onClick;
|
|
47
|
+
if (disabled) {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
activeDescendantController.focus(id);
|
|
52
|
+
// handle selection change
|
|
53
|
+
selectOption(event, optionData);
|
|
54
|
+
onOptionClick(event);
|
|
55
|
+
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
|
|
56
|
+
};
|
|
57
|
+
// register option data with context
|
|
58
|
+
React.useEffect(() => {
|
|
59
|
+
if (id && optionRef.current) {
|
|
60
|
+
return registerOption(optionData, optionRef.current);
|
|
61
|
+
}
|
|
62
|
+
}, [id, optionData, registerOption]);
|
|
63
|
+
return {
|
|
64
|
+
components: {
|
|
65
|
+
root: 'div'
|
|
66
|
+
},
|
|
67
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
68
|
+
ref: useMergedRefs(ref, optionRef),
|
|
69
|
+
'aria-disabled': disabled ? true : undefined,
|
|
70
|
+
id,
|
|
71
|
+
role: 'option',
|
|
72
|
+
...props,
|
|
73
|
+
onClick
|
|
74
|
+
}), {
|
|
75
|
+
elementType: 'div'
|
|
76
|
+
}),
|
|
77
|
+
disabled,
|
|
78
|
+
selected
|
|
79
|
+
};
|
|
81
80
|
};
|
|
82
81
|
function getTextString(text, children) {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
// warn if an Option has non-string children and no text prop
|
|
96
|
-
if (hasNonStringChild) {
|
|
97
|
-
// eslint-disable-next-line no-console
|
|
98
|
-
console.warn('Provide a `text` prop to Option components when they contain non-string children.');
|
|
82
|
+
if (text !== undefined) {
|
|
83
|
+
return text;
|
|
84
|
+
}
|
|
85
|
+
let textString = '';
|
|
86
|
+
let hasNonStringChild = false;
|
|
87
|
+
React.Children.forEach(children, child => {
|
|
88
|
+
if (typeof child === 'string') {
|
|
89
|
+
textString += child;
|
|
90
|
+
} else {
|
|
91
|
+
hasNonStringChild = true;
|
|
99
92
|
}
|
|
100
|
-
|
|
93
|
+
});
|
|
94
|
+
// warn if an Option has non-string children and no text prop
|
|
95
|
+
if (hasNonStringChild) {
|
|
96
|
+
// eslint-disable-next-line no-console
|
|
97
|
+
console.warn('Provide a `text` prop to Option components when they contain non-string children.');
|
|
98
|
+
}
|
|
99
|
+
return textString;
|
|
101
100
|
}
|
|
101
|
+
//# sourceMappingURL=usePromptOption.js.map
|