@fluentui-copilot/react-send-button 0.0.0-nightly-20250422-0405-e3cd1c04.1 → 0.0.0-nightly-20250424-0405-9968fcdb.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 +18 -3
- package/CHANGELOG.md +13 -4
- package/lib/components/SendButton/useSendButton.js +3 -9
- package/lib/components/SendButton/useSendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/useSendButton.js +2 -8
- package/lib-commonjs/components/SendButton/useSendButton.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-send-button",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-send-button_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 24 Apr 2025 04:12:32 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-send-button_v0.0.0-nightly-20250424-0405-9968fcdb.1",
|
|
7
|
+
"version": "0.0.0-nightly-20250424-0405-9968fcdb.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,6 +16,21 @@
|
|
|
16
16
|
]
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 24 Apr 2025 00:19:01 GMT",
|
|
21
|
+
"tag": "@fluentui-copilot/react-send-button_v0.0.2",
|
|
22
|
+
"version": "0.0.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "estebanmu@microsoft.com",
|
|
27
|
+
"package": "@fluentui-copilot/react-send-button",
|
|
28
|
+
"commit": "19cf739deebae7d461f7cc303683f1895e6837a8",
|
|
29
|
+
"comment": "fix: Change arrow icon in next theme to be always filled and decrease stop icon to 20/16 from 24/20."
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
19
34
|
{
|
|
20
35
|
"date": "Sat, 19 Apr 2025 00:05:40 GMT",
|
|
21
36
|
"tag": "@fluentui-copilot/react-send-button_v0.0.1",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-send-button
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 24 Apr 2025 04:12:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250424-0405-9968fcdb.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.0-nightly-20250424-0405-9968fcdb.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.0.
|
|
9
|
+
Thu, 24 Apr 2025 04:12:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.0.2..@fluentui-copilot/react-send-button_v0.0.0-nightly-20250424-0405-9968fcdb.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
15
|
|
|
16
|
+
## [0.0.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.2)
|
|
17
|
+
|
|
18
|
+
Thu, 24 Apr 2025 00:19:01 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.0.1..@fluentui-copilot/react-send-button_v0.0.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: Change arrow icon in next theme to be always filled and decrease stop icon to 20/16 from 24/20. ([PR #2941](https://github.com/microsoft/fluentai/pull/2941) by estebanmu@microsoft.com)
|
|
24
|
+
|
|
16
25
|
## [0.0.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.1)
|
|
17
26
|
|
|
18
27
|
Sat, 19 Apr 2025 00:05:40 GMT
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';
|
|
3
3
|
import { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';
|
|
4
|
-
import { bundleIcon, SendFilled, SendRegular, Stop16Filled,
|
|
4
|
+
import { bundleIcon, SendFilled, SendRegular, Stop16Filled, ArrowRight24Filled, Stop20Filled, ArrowRight20Filled } from '@fluentui/react-icons';
|
|
5
5
|
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
6
6
|
import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
7
7
|
const SendIcon = bundleIcon(SendFilled, SendRegular);
|
|
8
|
-
const SendIconV2Canvas = bundleIcon(ArrowRight24Filled, ArrowRight24Regular);
|
|
9
|
-
const SendIconV2Sidecar = bundleIcon(ArrowRight20Filled, ArrowRight20Regular);
|
|
10
8
|
/**
|
|
11
9
|
* Create the state required to render SendButton.
|
|
12
10
|
*
|
|
@@ -40,11 +38,7 @@ export const useSendButton_unstable = (props, ref) => {
|
|
|
40
38
|
}, finalRef);
|
|
41
39
|
const icon = (() => {
|
|
42
40
|
if (designVersion === 'next') {
|
|
43
|
-
|
|
44
|
-
return mode === 'canvas' ? /*#__PURE__*/React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/React.createElement(ArrowRight20Regular, null);
|
|
45
|
-
} else {
|
|
46
|
-
return mode === 'canvas' ? /*#__PURE__*/React.createElement(SendIconV2Canvas, null) : /*#__PURE__*/React.createElement(SendIconV2Sidecar, null);
|
|
47
|
-
}
|
|
41
|
+
return mode === 'canvas' ? /*#__PURE__*/React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/React.createElement(ArrowRight20Filled, null);
|
|
48
42
|
} else {
|
|
49
43
|
if (props.isSendIconFilled || isButtonMotionRunning) {
|
|
50
44
|
return /*#__PURE__*/React.createElement(SendFilled, null);
|
|
@@ -75,7 +69,7 @@ export const useSendButton_unstable = (props, ref) => {
|
|
|
75
69
|
stopIcon: slot.optional(props.stopIcon, {
|
|
76
70
|
elementType: 'span',
|
|
77
71
|
defaultProps: {
|
|
78
|
-
children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/React.createElement(
|
|
72
|
+
children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/React.createElement(Stop20Filled, null) : /*#__PURE__*/React.createElement(Stop16Filled, null) : /*#__PURE__*/React.createElement(Stop16Filled, null)
|
|
79
73
|
},
|
|
80
74
|
renderByDefault: true
|
|
81
75
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n
|
|
1
|
+
{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n ArrowRight24Filled,\n Stop20Filled,\n ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n props: SendButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n /** Used to apply/remove styles when button is animating */\n const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n const designVersion = useDesignVersion(props.designVersion);\n const mode = useCopilotMode(props.mode);\n\n const [visible, setVisible] = React.useState(false);\n const mountRef = React.useCallback((elem: HTMLElement | null) => {\n if (elem) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n }, []);\n const finalRef = useMergedRefs(ref, mountRef);\n const buttonState = useButton_unstable(\n {\n shape: designVersion === 'next' ? 'circular' : undefined,\n ...(props as ButtonProps),\n appearance: 'transparent',\n 'aria-disabled': props.disabled ? true : undefined,\n type: 'submit',\n },\n finalRef,\n );\n\n const icon = (() => {\n if (designVersion === 'next') {\n return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Filled />;\n } else {\n if (props.isSendIconFilled || isButtonMotionRunning) {\n return <SendFilled />;\n } else {\n return <SendIcon />;\n }\n }\n })();\n\n const state: SendButtonState = {\n ...buttonState,\n components: {\n root: 'button',\n sendIcon: 'span',\n stopIcon: 'span',\n stopBackground: 'div',\n sendButtonMotion: SendButtonMotion as React.ComponentType,\n stopButtonMotion: StopButtonMotion as React.ComponentType,\n stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["React","slot","useButton_unstable","useMergedRefs","CircleButtonMotion","SendButtonMotion","StopButtonMotion","bundleIcon","SendFilled","SendRegular","Stop16Filled","ArrowRight24Filled","Stop20Filled","ArrowRight20Filled","presenceMotionSlot","useCopilotMode","useDesignVersion","SendIcon","useSendButton_unstable","props","ref","isSendMotionRunning","setIsSendMotionRunning","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","shape","undefined","appearance","disabled","type","icon","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","always","elementType","defaultProps","children","optional","renderByDefault","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -16,8 +16,6 @@ const _reacticons = require("@fluentui/react-icons");
|
|
|
16
16
|
const _reactmotion = require("@fluentui/react-motion");
|
|
17
17
|
const _reactprovider = require("@fluentui-copilot/react-provider");
|
|
18
18
|
const SendIcon = (0, _reacticons.bundleIcon)(_reacticons.SendFilled, _reacticons.SendRegular);
|
|
19
|
-
const SendIconV2Canvas = (0, _reacticons.bundleIcon)(_reacticons.ArrowRight24Filled, _reacticons.ArrowRight24Regular);
|
|
20
|
-
const SendIconV2Sidecar = (0, _reacticons.bundleIcon)(_reacticons.ArrowRight20Filled, _reacticons.ArrowRight20Regular);
|
|
21
19
|
const useSendButton_unstable = (props, ref)=>{
|
|
22
20
|
/** Used to apply/remove styles when button is animating */ const [isSendMotionRunning, setIsSendMotionRunning] = _react.useState(false);
|
|
23
21
|
const [isStopMotionRunning, setIsStopMotionRunning] = _react.useState(false);
|
|
@@ -42,11 +40,7 @@ const useSendButton_unstable = (props, ref)=>{
|
|
|
42
40
|
}, finalRef);
|
|
43
41
|
const icon = (()=>{
|
|
44
42
|
if (designVersion === 'next') {
|
|
45
|
-
|
|
46
|
-
return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight24Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight20Regular, null);
|
|
47
|
-
} else {
|
|
48
|
-
return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(SendIconV2Canvas, null) : /*#__PURE__*/ _react.createElement(SendIconV2Sidecar, null);
|
|
49
|
-
}
|
|
43
|
+
return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight24Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight20Filled, null);
|
|
50
44
|
} else {
|
|
51
45
|
if (props.isSendIconFilled || isButtonMotionRunning) {
|
|
52
46
|
return /*#__PURE__*/ _react.createElement(_reacticons.SendFilled, null);
|
|
@@ -77,7 +71,7 @@ const useSendButton_unstable = (props, ref)=>{
|
|
|
77
71
|
stopIcon: _reactcomponents.slot.optional(props.stopIcon, {
|
|
78
72
|
elementType: 'span',
|
|
79
73
|
defaultProps: {
|
|
80
|
-
children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.
|
|
74
|
+
children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.Stop20Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Stop16Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.Stop16Filled, null)
|
|
81
75
|
},
|
|
82
76
|
renderByDefault: true
|
|
83
77
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n
|
|
1
|
+
{"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n ArrowRight24Filled,\n Stop20Filled,\n ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n props: SendButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n /** Used to apply/remove styles when button is animating */\n const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n const designVersion = useDesignVersion(props.designVersion);\n const mode = useCopilotMode(props.mode);\n\n const [visible, setVisible] = React.useState(false);\n const mountRef = React.useCallback((elem: HTMLElement | null) => {\n if (elem) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n }, []);\n const finalRef = useMergedRefs(ref, mountRef);\n const buttonState = useButton_unstable(\n {\n shape: designVersion === 'next' ? 'circular' : undefined,\n ...(props as ButtonProps),\n appearance: 'transparent',\n 'aria-disabled': props.disabled ? true : undefined,\n type: 'submit',\n },\n finalRef,\n );\n\n const icon = (() => {\n if (designVersion === 'next') {\n return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Filled />;\n } else {\n if (props.isSendIconFilled || isButtonMotionRunning) {\n return <SendFilled />;\n } else {\n return <SendIcon />;\n }\n }\n })();\n\n const state: SendButtonState = {\n ...buttonState,\n components: {\n root: 'button',\n sendIcon: 'span',\n stopIcon: 'span',\n stopBackground: 'div',\n sendButtonMotion: SendButtonMotion as React.ComponentType,\n stopButtonMotion: StopButtonMotion as React.ComponentType,\n stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","props","ref","React","useState","setIsSendMotionRunning","isStopMotionRunning","isButtonMotionRunning","isSendMotionRunning","useDesignVersion","designVersion","useCopilotMode","mode","visible","setVisible","mountRef","useCallback","elem","finalRef","buttonState","useButton_unstable","shape","undefined","appearance","disabled","type","icon","createElement","ArrowRight24Filled","ArrowRight20Filled","isSendIconFilled","_props_isDictationActive","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","StopButtonMotion","stopBackgroundMotion","CircleButtonMotion","slot","always","elementType","defaultProps","children","Stop20Filled","Stop16Filled","SendButtonMotion","unmountOnExit","onMotionFinish","onMotionStart","setIsStopMotionRunning","isSending","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiCEA;;;eAAAA;;;;iEAjCqB;iCAEiC;8BAGe;4BAShE;6BAC4B;+BACc;AAEjD,MAAMC,WAAWC,IAAAA,sBAAAA,EAAWC,sBAAAA,EAAYC,uBAAAA;AAetC,MAAAJ,yBAAA,CAAAK,OAAAC;6DAEsDC,GAAAA,MAAMC,CAAAA,qBAASC,uBAAA,GAAAF,OAAAC,QAAA,CAAA;UACrE,CAAAE,qBAAMC,uBAAwBC,GAAAA,OAAuBF,QAAAA,CAAAA;UAErDC,wBAAsBE,uBAAuBC;UAC7CA,gBAAaC,IAAAA,+BAAqBC,EAAAA,MAAIF,aAAA;UAEtCE,OAAOC,IAAAA,6BAASC,EAAAA,MAAcX,IAAMC;UACpC,CAAAS,SAAME,WAAiBC,GAAAA,OAAWZ,QAAEa,CAAAA;UAClCF,WAAUZ,OAAAa,WAAA,CAAAC,CAAAA;kBACRH;uBACK;;uBAEP;QACF;OACA,EAAA;UACAI,WAAMC,IAAAA,8BAAcC,EAAAA,KAAAA;UAEhBC,cAAOX,IAAAA,mCAAkB,EAAA;eACrBT,kBAAK,SAAA,aAAAqB;gBACTC;oBACA;yBACMtB,MAAAuB,QAAA,GAAA,OAAAF;QACRG,MACAP;OAGFA;UACEQ,OAAIhB,CAAAA;8BACKE,QAAS;mBAClBA,SAAO,WAAA,WAAA,GAAAT,OAAAwB,aAAA,CAAAC,8BAAA,EAAA,QAAA,WAAA,GAAAzB,OAAAwB,aAAA,CAAAE,8BAAA,EAAA;;sBAEHC,gBAAA,IAAAvB,uBAAQR;uBACV,WAAO,GAAAI,OAAAwB,aAAA,CAAA5B,sBAAA,EAAA;;uBAEP,WAAA,GAAAI,OAAAwB,aAAA,CAAA9B,UAAA;;QAEJ;;QAEAkC;UACEC,QAAGb;sBACHc;oBACEC;kBACAC;sBACAC;sBACAC;4BACAC;8BACAC,8BAAkBC;8BAClBC,8BAAsBC;kCACxBA,gCAAA;;cAEAP,YAAUQ,IAAKC;kBACbC,qBAAAA,CAAAA,MAAa,CAAA5C,MAAAkC,QAAA,EAAA;yBACbW;0BACEC;0BACFrB;;;kBAGAmB,qBAAAA,CAAAA,QAAa,CAAA5C,MAAAmC,QAAA,EAAA;yBACbU;0BACEC;0BACFrC,kBAAA,SAAAE,SAAA,WAAA,WAAA,GAAAT,OAAAwB,aAAA,CAAAqB,wBAAA,EAAA,QAAA,WAAA,GAAA7C,OAAAwB,aAAA,CAAAsB,wBAAA,EAAA,QAAA,WAAA,GAAA9C,OAAAwB,aAAA,CAAAsB,wBAAA,EAAA;;6BAEF;;wBACoDJ,qBAAAA,CAAaD,MAAA,CAAA3C,MAAAoC,cAAA,EAAA;yBAAM;;0BAErEQ,IAAAA,+BAAaK,EAAAA,MAAAA,gBAAAA,EAAAA;yBACbJ,8BAAc;0BACZjC;yBACAsC,CAAAA,MAAAA,SAAe;+BACfC;gCACAC,IAAAA,uBAAqBhD;+BACvB,IAAAA,uBAAA;;;0BAGAwC,IAAAA,+BAAaL,EAAAA,MAAAA,gBAAAA,EAAAA;yBACbM,8BAAc;0BACZjC;yBACAsC,MAAAA,SAAe;+BACfC;gCACAC,IAAAA,uBAAqBC;+BACvB,IAAAA,uBAAA;;;8BAGaZ,IAAAA,+BAAAA,EAAAA,MAAAA,oBAAAA,EAAAA;yBACbI,gCAAc;0BACZjC;yBACAsC,kBAAe,SAAAtC,UAAAZ,MAAAsD,SAAA;+BACjB;;;;2BAIFzB,CAAAA,2BAAwC7B,MAAAuD,iBAAA,MAAA,QAAAzB,6BAAA,KAAA,IAAAA,2BAAA;0BAC7B9B,MAAMsD,gBAAS;mBAC1B7C,MAAAA,SAAAA;;QAEFE;;IAGA,OAAAoB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-send-button",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250424-0405-9968fcdb.1",
|
|
4
4
|
"description": "Fluent AI control for the send button used in ChatInput and PromptInput.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "^0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-utilities": "^0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/tokens": "^0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-provider": "^0.0.0-nightly-20250424-0405-9968fcdb.1",
|
|
16
|
+
"@fluentui-copilot/react-utilities": "^0.0.0-nightly-20250424-0405-9968fcdb.1",
|
|
17
|
+
"@fluentui-copilot/tokens": "^0.0.0-nightly-20250424-0405-9968fcdb.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|