@fluentui-copilot/react-prompt-listbox 0.2.3 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -1,6 +1,21 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-prompt-listbox",
3
3
  "entries": [
4
+ {
5
+ "date": "Tue, 01 Oct 2024 20:50:52 GMT",
6
+ "tag": "@fluentui-copilot/react-prompt-listbox_v0.3.1",
7
+ "version": "0.3.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "estebanmu@microsoft.com",
12
+ "package": "@fluentui-copilot/react-prompt-listbox",
13
+ "commit": "53b90d2096584400be7ad0f9af42782606b86503",
14
+ "comment": "feat: Add motion component to apply animations to PromptListbox."
15
+ }
16
+ ]
17
+ }
18
+ },
4
19
  {
5
20
  "date": "Wed, 04 Sep 2024 18:11:50 GMT",
6
21
  "tag": "@fluentui-copilot/react-prompt-listbox_v0.2.0",
package/CHANGELOG.md CHANGED
@@ -1,9 +1,18 @@
1
1
  # Change Log - @fluentui-copilot/react-prompt-listbox
2
2
 
3
- This log was last generated on Wed, 04 Sep 2024 18:11:50 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 01 Oct 2024 20:50:52 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.3.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.3.1)
8
+
9
+ Tue, 01 Oct 2024 20:50:52 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-prompt-listbox_v0.2.0..@fluentui-copilot/react-prompt-listbox_v0.3.1)
11
+
12
+ ### Patches
13
+
14
+ - feat: Add motion component to apply animations to PromptListbox. ([PR #2214](https://github.com/microsoft/fluentai/pull/2214) by estebanmu@microsoft.com)
15
+
7
16
  ## [0.2.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-prompt-listbox_v0.2.0)
8
17
 
9
18
  Wed, 04 Sep 2024 18:11:50 GMT
@@ -0,0 +1,53 @@
1
+ import { createPresenceComponent, motionTokens } from '@fluentui/react-components';
2
+ const collapseMotion = ({
3
+ element
4
+ }) => {
5
+ const fromOpacity = 0;
6
+ const toOpacity = 1;
7
+ const fromHeight = '0';
8
+ const toHeight = `${element.scrollHeight}px`;
9
+ const overflow = 'hidden';
10
+ const duration = motionTokens.durationNormal;
11
+ const easing = motionTokens.curveEasyEaseMax;
12
+ const enterKeyframes = [{
13
+ opacity: fromOpacity,
14
+ maxHeight: fromHeight,
15
+ overflow
16
+ },
17
+ // Transition to the height of the content, at 99.99% of the duration.
18
+ {
19
+ opacity: toOpacity,
20
+ maxHeight: toHeight,
21
+ offset: 0.9999,
22
+ overflow
23
+ },
24
+ // On completion, remove the maxHeight because the content might need to expand later.
25
+ {
26
+ opacity: toOpacity,
27
+ maxHeight: 'unset',
28
+ overflow
29
+ }];
30
+ const exitKeyframes = [{
31
+ opacity: toOpacity,
32
+ maxHeight: toHeight,
33
+ overflow
34
+ }, {
35
+ opacity: fromOpacity,
36
+ maxHeight: fromHeight,
37
+ overflow
38
+ }];
39
+ return {
40
+ enter: {
41
+ duration,
42
+ easing,
43
+ keyframes: enterKeyframes
44
+ },
45
+ exit: {
46
+ duration,
47
+ easing,
48
+ keyframes: exitKeyframes
49
+ }
50
+ };
51
+ };
52
+ export const PromptListboxMotion = createPresenceComponent(collapseMotion);
53
+ //# sourceMappingURL=PromptListboxMotion.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["PromptListboxMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-components';\nimport type { PresenceMotionFn } from '@fluentui/react-components';\n\nconst collapseMotion: PresenceMotionFn = ({ element }) => {\n const fromOpacity = 0;\n const toOpacity = 1;\n const fromHeight = '0';\n const toHeight = `${element.scrollHeight}px`;\n const overflow = 'hidden';\n\n const duration = motionTokens.durationNormal;\n const easing = motionTokens.curveEasyEaseMax;\n\n const enterKeyframes = [\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n // On completion, remove the maxHeight because the content might need to expand later.\n { opacity: toOpacity, maxHeight: 'unset', overflow },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, maxHeight: toHeight, overflow },\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n ];\n\n return {\n enter: { duration, easing, keyframes: enterKeyframes },\n exit: { duration, easing, keyframes: exitKeyframes },\n };\n};\n\nexport const PromptListboxMotion = createPresenceComponent(collapseMotion);\n"],"names":["createPresenceComponent","motionTokens","collapseMotion","element","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","duration","durationNormal","easing","curveEasyEaseMax","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","keyframes","exit","PromptListboxMotion"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,6BAA6B;AAGnF,MAAMC,iBAAmC,CAAC,EAAEC,OAAO,EAAE;IACnD,MAAMC,cAAc;IACpB,MAAMC,YAAY;IAClB,MAAMC,aAAa;IACnB,MAAMC,WAAW,CAAC,EAAEJ,QAAQK,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAMC,WAAW;IAEjB,MAAMC,WAAWT,aAAaU,cAAc;IAC5C,MAAMC,SAASX,aAAaY,gBAAgB;IAE5C,MAAMC,iBAAiB;QACrB;YAAEC,SAASX;YAAaY,WAAWV;YAAYG;QAAS;QACxD,sEAAsE;QACtE;YAAEM,SAASV;YAAWW,WAAWT;YAAUU,QAAQ;YAAQR;QAAS;QACpE,sFAAsF;QACtF;YAAEM,SAASV;YAAWW,WAAW;YAASP;QAAS;KACpD;IAED,MAAMS,gBAAgB;QACpB;YAAEH,SAASV;YAAWW,WAAWT;YAAUE;QAAS;QACpD;YAAEM,SAASX;YAAaY,WAAWV;YAAYG;QAAS;KACzD;IAED,OAAO;QACLU,OAAO;YAAET;YAAUE;YAAQQ,WAAWN;QAAe;QACrDO,MAAM;YAAEX;YAAUE;YAAQQ,WAAWF;QAAc;IACrD;AACF;AAEA,OAAO,MAAMI,sBAAsBtB,wBAAwBE,gBAAgB"}
@@ -8,6 +8,7 @@ import { useListboxPositioning } from './useListboxPositioning';
8
8
  import { useTriggerKeydown } from './useTriggerKeyDown';
9
9
  import { PromptListbox } from '../PromptListbox';
10
10
  import { promptOptionClassNames } from '../PromptOption';
11
+ import { PromptListboxMotion } from '../motion/PromptListboxMotion';
11
12
  export function usePromptListboxFunctionality(params) {
12
13
  const {
13
14
  positioning,
@@ -112,14 +113,16 @@ export function usePromptListboxFunctionality(params) {
112
113
  });
113
114
  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.ref);
114
115
  const listbox = React.useMemo(() => {
115
- return /*#__PURE__*/React.createElement(PromptListbox, {
116
+ return /*#__PURE__*/React.createElement(PromptListboxMotion, {
117
+ visible: open
118
+ }, /*#__PURE__*/React.createElement(PromptListbox, {
116
119
  open: open,
117
120
  ...listboxProps,
118
121
  ...optionCollection,
119
122
  ...selectionState,
120
123
  ref: listboxMergedRef,
121
124
  activeDescendantController: activeDescendantController
122
- });
125
+ }));
123
126
  }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);
124
127
  return {
125
128
  promptListbox: listbox,
@@ -1 +1 @@
1
- {"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const {\n positioning,\n onOpenChange,\n onSelectionModeChange,\n listboxProps,\n fluid = false,\n allowArrowUpNavigation = false,\n } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const setSelectionMode = React.useCallback(\n (selectionMode: boolean) => {\n if (selectionMode === false) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n setIsInSelectionMode(selectionMode);\n onSelectionModeChange?.(selectionMode);\n },\n [activeDescendantController, onSelectionModeChange],\n );\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n setSelectionMode(false);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange, setSelectionMode]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n allowArrowUpNavigation,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n cursorPosition,\n open,\n multiselect: false,\n isInSelectionMode,\n setSelectionMode,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown,\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["React","useActiveDescendant","useControllableState","useMergedRefs","CursorPositionPlugin","useOptionCollection","useSelection","useListboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","allowArrowUpNavigation","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","cursorPosition","setCursorPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","setSelectionMode","useCallback","selectionMode","blur","setHideActiveDescendant","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","onKeyDown","multiselect","hideActiveDescendant","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const {\n positioning,\n onOpenChange,\n onSelectionModeChange,\n listboxProps,\n fluid = false,\n allowArrowUpNavigation = false,\n } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const setSelectionMode = React.useCallback(\n (selectionMode: boolean) => {\n if (selectionMode === false) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n setIsInSelectionMode(selectionMode);\n onSelectionModeChange?.(selectionMode);\n },\n [activeDescendantController, onSelectionModeChange],\n );\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n setSelectionMode(false);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange, setSelectionMode]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n allowArrowUpNavigation,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n cursorPosition,\n open,\n multiselect: false,\n isInSelectionMode,\n setSelectionMode,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListboxMotion visible={open}>\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n </PromptListboxMotion>\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown,\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["React","useActiveDescendant","useControllableState","useMergedRefs","CursorPositionPlugin","useOptionCollection","useSelection","useListboxPositioning","useTriggerKeydown","PromptListbox","promptOptionClassNames","PromptListboxMotion","usePromptListboxFunctionality","params","positioning","onOpenChange","onSelectionModeChange","listboxProps","fluid","allowArrowUpNavigation","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","triggerRef","selectionState","selectOption","optionCollection","getOptionById","cursorPosition","setCursorPosition","useState","isInSelectionMode","setIsInSelectionMode","open","setOpen","state","defaultState","defaultOpen","initialState","setSelectionMode","useCallback","selectionMode","blur","setHideActiveDescendant","onBlur","event","type","onFocus","target","currentTarget","cursorPositionPlugin","onListboxBlur","onKeyDown","multiselect","hideActiveDescendant","useEffect","current","removeAttribute","comboboxPopupRef","comboboxTargetRef","listboxMergedRef","ref","listbox","useMemo","visible","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "PromptListboxMotion", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return PromptListboxMotion;
9
+ }
10
+ });
11
+ const _reactcomponents = require("@fluentui/react-components");
12
+ const collapseMotion = ({ element })=>{
13
+ const fromOpacity = 0;
14
+ const toOpacity = 1;
15
+ const fromHeight = '0';
16
+ const toHeight = `${element.scrollHeight}px`;
17
+ const overflow = 'hidden';
18
+ const duration = _reactcomponents.motionTokens.durationNormal;
19
+ const easing = _reactcomponents.motionTokens.curveEasyEaseMax;
20
+ const enterKeyframes = [
21
+ {
22
+ opacity: fromOpacity,
23
+ maxHeight: fromHeight,
24
+ overflow
25
+ },
26
+ // Transition to the height of the content, at 99.99% of the duration.
27
+ {
28
+ opacity: toOpacity,
29
+ maxHeight: toHeight,
30
+ offset: 0.9999,
31
+ overflow
32
+ },
33
+ // On completion, remove the maxHeight because the content might need to expand later.
34
+ {
35
+ opacity: toOpacity,
36
+ maxHeight: 'unset',
37
+ overflow
38
+ }
39
+ ];
40
+ const exitKeyframes = [
41
+ {
42
+ opacity: toOpacity,
43
+ maxHeight: toHeight,
44
+ overflow
45
+ },
46
+ {
47
+ opacity: fromOpacity,
48
+ maxHeight: fromHeight,
49
+ overflow
50
+ }
51
+ ];
52
+ return {
53
+ enter: {
54
+ duration,
55
+ easing,
56
+ keyframes: enterKeyframes
57
+ },
58
+ exit: {
59
+ duration,
60
+ easing,
61
+ keyframes: exitKeyframes
62
+ }
63
+ };
64
+ };
65
+ const PromptListboxMotion = (0, _reactcomponents.createPresenceComponent)(collapseMotion); //# sourceMappingURL=PromptListboxMotion.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["PromptListboxMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-components';\nimport type { PresenceMotionFn } from '@fluentui/react-components';\n\nconst collapseMotion: PresenceMotionFn = ({ element }) => {\n const fromOpacity = 0;\n const toOpacity = 1;\n const fromHeight = '0';\n const toHeight = `${element.scrollHeight}px`;\n const overflow = 'hidden';\n\n const duration = motionTokens.durationNormal;\n const easing = motionTokens.curveEasyEaseMax;\n\n const enterKeyframes = [\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n // On completion, remove the maxHeight because the content might need to expand later.\n { opacity: toOpacity, maxHeight: 'unset', overflow },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, maxHeight: toHeight, overflow },\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n ];\n\n return {\n enter: { duration, easing, keyframes: enterKeyframes },\n exit: { duration, easing, keyframes: exitKeyframes },\n };\n};\n\nexport const PromptListboxMotion = createPresenceComponent(collapseMotion);\n"],"names":["PromptListboxMotion","collapseMotion","fromOpacity","fromHeight","toOpacity","toHeight","duration","motionTokens","durationNormal","overflow","enterKeyframes","easing","curveEasyEaseMax","maxHeight","offset","exitKeyframes","opacity","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BuDA;;;eAAAA;;;iCA5BD;AAGtD,MAAMC,iBAAmC,CAAC,SACxC;UAEAC,cAAMC;UACNC,YAAMC;UACNF,aAAiB;UAEjBE,WAAMC,CAAAA,EAAWC,QAAAA,YAAaC,CAAAA,EAAAA,CAAAA;UAC9BC,WAAeF;UAEfD,WAAMI,6BAAiB,CAAAF,cAAA;UACrBG,SAAAJ,6BAAA,CAAAK,gBAAA;2BAAWV;QAAAA;qBAAaW;uBAAuBJ;;;8EAE/C;;qBAAsBI;uBAAqBC;oBAAgBL;;;8FAE3D;;qBAAsBI;uBAAoBJ;;;;UAG5CM,gBAAMA;QAAAA;qBACJX;uBAAEY;;;;qBAAkDd;uBACpDC;;;;;eAAwD;YACzDG;YAEDK;uBACSD;;;;;uBACDK;;;;MAA6Cf,sBAAAiB,IAAAA,wCAAA,EAAAhB,gEACrD"}
@@ -19,6 +19,7 @@ const _useListboxPositioning = require("./useListboxPositioning");
19
19
  const _useTriggerKeyDown = require("./useTriggerKeyDown");
20
20
  const _PromptListbox = require("../PromptListbox");
21
21
  const _PromptOption = require("../PromptOption");
22
+ const _PromptListboxMotion = require("../motion/PromptListboxMotion");
22
23
  function usePromptListboxFunctionality(params) {
23
24
  const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false, allowArrowUpNavigation = false } = params;
24
25
  const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
@@ -116,14 +117,16 @@ function usePromptListboxFunctionality(params) {
116
117
  });
117
118
  const listboxMergedRef = (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef, listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.ref);
118
119
  const listbox = _react.useMemo(()=>{
119
- return /*#__PURE__*/ _react.createElement(_PromptListbox.PromptListbox, {
120
+ return /*#__PURE__*/ _react.createElement(_PromptListboxMotion.PromptListboxMotion, {
121
+ visible: open
122
+ }, /*#__PURE__*/ _react.createElement(_PromptListbox.PromptListbox, {
120
123
  open: open,
121
124
  ...listboxProps,
122
125
  ...optionCollection,
123
126
  ...selectionState,
124
127
  ref: listboxMergedRef,
125
128
  activeDescendantController: activeDescendantController
126
- });
129
+ }));
127
130
  }, [
128
131
  activeDescendantController,
129
132
  listboxMergedRef,
@@ -1 +1 @@
1
- {"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const {\n positioning,\n onOpenChange,\n onSelectionModeChange,\n listboxProps,\n fluid = false,\n allowArrowUpNavigation = false,\n } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const setSelectionMode = React.useCallback(\n (selectionMode: boolean) => {\n if (selectionMode === false) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n setIsInSelectionMode(selectionMode);\n onSelectionModeChange?.(selectionMode);\n },\n [activeDescendantController, onSelectionModeChange],\n );\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n setSelectionMode(false);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange, setSelectionMode]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n allowArrowUpNavigation,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n cursorPosition,\n open,\n multiselect: false,\n isInSelectionMode,\n setSelectionMode,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown,\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","fluid","triggerRef","allowArrowUpNavigation","useSelection","getOptionById","optionCollection","activeParentRef","cursorPosition","controller","isInSelectionMode","setIsInSelectionMode","useActiveDescendant","open","classList","contains","promptOptionClassNames","root","useMergedRefs","selectionState","setSelectionMode","useCallback","selectionMode","activeDescendantController","useOptionCollection","React","useState","defaultOpen","initialState","onBlur","onOpenChange","event","blur","currentTarget","type","cursorPositionPlugin","onListboxBlur","createElement","CursorPositionPlugin","selectOption","multiselect","hideActiveDescendant","setHideActiveDescendant","useEffect","_triggerRef_current","current","removeAttribute","activeDescendantListboxRef","listboxMergedRef","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["usePromptListboxFunctionality.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useControllableState, useMergedRefs } from '@fluentui/react-utilities';\nimport { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';\nimport { useOptionCollection } from './useOptionCollection';\nimport { useSelection } from './useSelection';\nimport { useListboxPositioning } from './useListboxPositioning';\nimport { useTriggerKeydown } from './useTriggerKeyDown';\nimport { PromptListbox } from '../PromptListbox';\nimport { promptOptionClassNames } from '../PromptOption';\nimport { PromptListboxMotion } from '../motion/PromptListboxMotion';\nimport type { CursorPosition } from '../../plugins/CursorPositionPlugin';\nimport type {\n UsePromptListboxFunctionalityParams,\n UsePromptListboxFunctionality,\n} from './PromptListboxFunctionality.types';\n\nexport function usePromptListboxFunctionality(\n params: UsePromptListboxFunctionalityParams,\n): UsePromptListboxFunctionality {\n const {\n positioning,\n onOpenChange,\n onSelectionModeChange,\n listboxProps,\n fluid = false,\n allowArrowUpNavigation = false,\n } = params;\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLSpanElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(promptOptionClassNames.root),\n });\n // useMergedRefs to normalize the ref into a React.RefObject type\n const triggerRef = useMergedRefs(activeParentRef);\n const selectionState = useSelection(listboxProps ?? {});\n const { selectOption } = selectionState;\n const optionCollection = useOptionCollection();\n const { getOptionById } = optionCollection;\n const [cursorPosition, setCursorPosition] = React.useState<CursorPosition>('end');\n const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);\n const [open, setOpen] = useControllableState({\n state: params.open,\n defaultState: params.defaultOpen,\n initialState: false,\n });\n\n const setSelectionMode = React.useCallback(\n (selectionMode: boolean) => {\n if (selectionMode === false) {\n activeDescendantController.blur();\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n setIsInSelectionMode(selectionMode);\n onSelectionModeChange?.(selectionMode);\n },\n [activeDescendantController, onSelectionModeChange],\n );\n\n const onBlur = (event: React.FocusEvent<HTMLSpanElement>) => {\n setOpen(false);\n onOpenChange?.(event, { event, type: 'focus', open: false });\n setSelectionMode(false);\n };\n\n const onFocus = (event: React.FocusEvent<HTMLSpanElement>) => {\n if (event.target === event.currentTarget) {\n setOpen(true);\n onOpenChange?.(event, { event, type: 'focus', open: true });\n }\n };\n\n const cursorPositionPlugin = <CursorPositionPlugin setCursorPosition={setCursorPosition} />;\n\n const onListboxBlur = React.useCallback(() => {\n setSelectionMode(false);\n onSelectionModeChange?.(false);\n }, [onSelectionModeChange, setSelectionMode]);\n\n // handle combobox keyboard interaction\n const onKeyDown = useTriggerKeydown({\n ...optionCollection,\n allowArrowUpNavigation,\n activeDescendantController,\n getOptionById,\n onBlur: onListboxBlur,\n selectOption,\n cursorPosition,\n open,\n multiselect: false,\n isInSelectionMode,\n setSelectionMode,\n });\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n React.useEffect(() => {\n if (hideActiveDescendant) {\n triggerRef.current?.removeAttribute('aria-activedescendant');\n }\n // We only want to run this when the hideActiveDescendant changes, if the triggerRef\n // is undefined, there's no need to remove theAttribute and we shouldn't be adding\n // refs as dependencies since it can blow up the number of runs.\n // eslint-disable-next-line react-compiler/react-compiler\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [hideActiveDescendant]);\n\n const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({ positioning, fluid });\n\n const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps?.ref);\n const listbox = React.useMemo(() => {\n return (\n <PromptListboxMotion visible={open}>\n <PromptListbox\n open={open}\n {...listboxProps}\n {...optionCollection}\n {...selectionState}\n ref={listboxMergedRef}\n activeDescendantController={activeDescendantController}\n />\n </PromptListboxMotion>\n );\n }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);\n\n return {\n promptListbox: listbox,\n triggerProps: {\n ref: triggerRef,\n onBlur,\n onFocus,\n onKeyDown,\n isInSelectionMode,\n },\n containerRef: comboboxTargetRef,\n cursorPositionPlugin,\n };\n}\n"],"names":["usePromptListboxFunctionality","params","positioning","listboxRef","matchOption","onSelectionModeChange","listboxProps","fluid","triggerRef","allowArrowUpNavigation","useSelection","getOptionById","optionCollection","activeParentRef","cursorPosition","controller","isInSelectionMode","setIsInSelectionMode","useActiveDescendant","open","classList","contains","promptOptionClassNames","root","useMergedRefs","selectionState","setSelectionMode","useCallback","selectionMode","activeDescendantController","useOptionCollection","React","useState","defaultOpen","initialState","onBlur","onOpenChange","event","blur","currentTarget","type","cursorPositionPlugin","onListboxBlur","createElement","CursorPositionPlugin","selectOption","multiselect","hideActiveDescendant","setHideActiveDescendant","useEffect","_triggerRef_current","current","removeAttribute","activeDescendantListboxRef","comboboxPopupRef","ref","listboxMergedRef","promptListbox","triggerProps","containerRef"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-prompt-listbox",
3
- "version": "0.2.3",
3
+ "version": "0.3.1",
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.2.2",
16
- "@fluentui-copilot/react-chat-input-plugins": "^0.2.2",
17
- "@fluentui-copilot/react-editor-input": "^0.2.2",
18
- "@fluentui-copilot/react-prompt-input": "^0.3.3",
15
+ "@fluentui-copilot/chat-input-plugins": "^0.3.0",
16
+ "@fluentui-copilot/react-chat-input-plugins": "^0.3.0",
17
+ "@fluentui-copilot/react-editor-input": "^0.3.0",
18
+ "@fluentui-copilot/react-prompt-input": "^0.4.0",
19
19
  "@fluentui-copilot/react-provider": "^0.9.1",
20
- "@fluentui-copilot/react-text-editor": "^0.2.0",
21
- "@fluentui-copilot/text-editor": "^0.1.0",
20
+ "@fluentui-copilot/react-text-editor": "^0.3.0",
21
+ "@fluentui-copilot/text-editor": "^0.2.0",
22
22
  "@swc/helpers": "^0.5.1"
23
23
  },
24
24
  "peerDependencies": {