@fluentui-copilot/react-send-button 0.0.0-nightly-20250708-1433-52f2b6b1.1 → 0.0.0-nightly-20250710-0405-e728c4d6.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 +3 -3
- package/CHANGELOG.md +4 -4
- package/lib/SendButton.js +1 -0
- package/lib/components/SendButton/SendButton.js +5 -4
- package/lib/components/SendButton/SendButton.types.js +2 -1
- package/lib/components/SendButton/buttonMotion.js +138 -199
- package/lib/components/SendButton/index.js +1 -0
- package/lib/components/SendButton/renderSendButton.js +30 -38
- package/lib/components/SendButton/useSendButton.js +97 -95
- package/lib/index.js +1 -0
- package/lib-commonjs/SendButton.js +1 -0
- package/lib-commonjs/components/SendButton/SendButton.js +1 -1
- package/lib-commonjs/components/SendButton/SendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/SendButton.types.js +1 -0
- package/lib-commonjs/components/SendButton/buttonMotion.js +1 -1
- package/lib-commonjs/components/SendButton/buttonMotion.js.map +1 -1
- package/lib-commonjs/components/SendButton/index.js +1 -0
- package/lib-commonjs/components/SendButton/renderSendButton.js +1 -1
- package/lib-commonjs/components/SendButton/renderSendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/useSendButton.js +1 -1
- package/lib-commonjs/components/SendButton/useSendButton.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/package.json +4 -4
- package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +0 -193
- package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +0 -209
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +0 -1
|
@@ -13,99 +13,101 @@ const SendIcon = bundleIcon(SendFilled, SendRegular);
|
|
|
13
13
|
*
|
|
14
14
|
* @param props - props from this instance of SendButton
|
|
15
15
|
* @param ref - reference to root HTMLElement of SendButton
|
|
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
|
-
|
|
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
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
16
|
+
*/
|
|
17
|
+
export const useSendButton_unstable = (props, ref) => {
|
|
18
|
+
/** Used to apply/remove styles when button is animating */const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);
|
|
19
|
+
const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);
|
|
20
|
+
const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;
|
|
21
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
22
|
+
const mode = useCopilotMode(props.mode);
|
|
23
|
+
const [visible, setVisible] = React.useState(false);
|
|
24
|
+
const mountRef = React.useCallback(elem => {
|
|
25
|
+
if (elem) {
|
|
26
|
+
setVisible(true);
|
|
27
|
+
} else {
|
|
28
|
+
setVisible(false);
|
|
29
|
+
}
|
|
30
|
+
}, []);
|
|
31
|
+
const finalRef = useMergedRefs(ref, mountRef);
|
|
32
|
+
const buttonState = useButton_unstable({
|
|
33
|
+
shape: designVersion === 'next' ? 'circular' : undefined,
|
|
34
|
+
...props,
|
|
35
|
+
appearance: 'transparent',
|
|
36
|
+
'aria-disabled': props.disabled ? true : undefined,
|
|
37
|
+
type: 'submit'
|
|
38
|
+
}, finalRef);
|
|
39
|
+
const icon = (() => {
|
|
40
|
+
if (designVersion === 'next') {
|
|
41
|
+
return mode === 'canvas' ? /*#__PURE__*/React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/React.createElement(ArrowRight20Filled, null);
|
|
42
|
+
} else {
|
|
43
|
+
if (props.isSendIconFilled || isButtonMotionRunning) {
|
|
44
|
+
return /*#__PURE__*/React.createElement(SendFilled, null);
|
|
45
|
+
} else {
|
|
46
|
+
return /*#__PURE__*/React.createElement(SendIcon, null);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
})();
|
|
50
|
+
var _props_isDictationActive;
|
|
51
|
+
const state = {
|
|
52
|
+
...buttonState,
|
|
53
|
+
components: {
|
|
54
|
+
root: 'button',
|
|
55
|
+
sendIcon: 'span',
|
|
56
|
+
stopIcon: 'span',
|
|
57
|
+
stopBackground: 'div',
|
|
58
|
+
sendButtonMotion: SendButtonMotion,
|
|
59
|
+
stopButtonMotion: StopButtonMotion,
|
|
60
|
+
stopBackgroundMotion: CircleButtonMotion
|
|
61
|
+
},
|
|
62
|
+
root: buttonState.root,
|
|
63
|
+
sendIcon: slot.always(props.sendIcon, {
|
|
64
|
+
elementType: 'span',
|
|
65
|
+
defaultProps: {
|
|
66
|
+
children: icon
|
|
67
|
+
}
|
|
68
|
+
}),
|
|
69
|
+
stopIcon: slot.optional(props.stopIcon, {
|
|
70
|
+
elementType: 'span',
|
|
71
|
+
defaultProps: {
|
|
72
|
+
children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/React.createElement(Stop20Filled, null) : /*#__PURE__*/React.createElement(Stop16Filled, null) : /*#__PURE__*/React.createElement(Stop16Filled, null)
|
|
73
|
+
},
|
|
74
|
+
renderByDefault: true
|
|
75
|
+
}),
|
|
76
|
+
stopBackground: slot.always(props.stopBackground, {
|
|
77
|
+
elementType: 'div'
|
|
78
|
+
}),
|
|
79
|
+
sendButtonMotion: presenceMotionSlot(props.sendButtonMotion, {
|
|
80
|
+
elementType: SendButtonMotion,
|
|
81
|
+
defaultProps: {
|
|
82
|
+
visible: !props.isSending,
|
|
83
|
+
unmountOnExit: true,
|
|
84
|
+
onMotionFinish: () => setIsSendMotionRunning(false),
|
|
85
|
+
onMotionStart: () => setIsSendMotionRunning(true)
|
|
86
|
+
}
|
|
87
|
+
}),
|
|
88
|
+
stopButtonMotion: presenceMotionSlot(props.stopButtonMotion, {
|
|
89
|
+
elementType: StopButtonMotion,
|
|
90
|
+
defaultProps: {
|
|
91
|
+
visible: props.isSending,
|
|
92
|
+
unmountOnExit: true,
|
|
93
|
+
onMotionFinish: () => setIsStopMotionRunning(false),
|
|
94
|
+
onMotionStart: () => setIsStopMotionRunning(true)
|
|
95
|
+
}
|
|
96
|
+
}),
|
|
97
|
+
stopBackgroundMotion: presenceMotionSlot(props.stopBackgroundMotion, {
|
|
98
|
+
elementType: CircleButtonMotion,
|
|
99
|
+
defaultProps: {
|
|
100
|
+
visible: designVersion === 'next' ? visible : props.isSending,
|
|
101
|
+
unmountOnExit: true
|
|
102
|
+
}
|
|
103
|
+
}),
|
|
104
|
+
isButtonMotionRunning,
|
|
105
|
+
isDictationActive: (_props_isDictationActive = props.isDictationActive) !== null && _props_isDictationActive !== void 0 ? _props_isDictationActive : false,
|
|
106
|
+
isSendIconFilled: props.isSendIconFilled,
|
|
107
|
+
isSending: props.isSending,
|
|
108
|
+
designVersion,
|
|
109
|
+
mode
|
|
110
|
+
};
|
|
111
|
+
return state;
|
|
111
112
|
};
|
|
113
|
+
//# sourceMappingURL=useSendButton.js.map
|
package/lib/index.js
CHANGED
|
@@ -18,4 +18,4 @@ const SendButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
18
18
|
(0, _useSendButtonStylesstyles.useSendButtonStyles_unstable)(state);
|
|
19
19
|
return (0, _renderSendButton.renderSendButton_unstable)(state);
|
|
20
20
|
});
|
|
21
|
-
SendButton.displayName = 'SendButton';
|
|
21
|
+
SendButton.displayName = 'SendButton'; //# sourceMappingURL=SendButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n const state = useSendButton_unstable(props, ref);\n\n useSendButtonStyles_unstable(state);\n return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","
|
|
1
|
+
{"version":3,"sources":["SendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSendButton_unstable } from './useSendButton';\nimport { renderSendButton_unstable } from './renderSendButton';\nimport { useSendButtonStyles_unstable } from './useSendButtonStyles.styles';\nimport type { SendButtonProps } from './SendButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// SendButton component - TODO: add more docs\nexport const SendButton: ForwardRefComponent<SendButtonProps> = React.forwardRef((props, ref) => {\n const state = useSendButton_unstable(props, ref);\n\n useSendButtonStyles_unstable(state);\n return renderSendButton_unstable(state);\n});\n\nSendButton.displayName = 'SendButton';\n"],"names":["SendButton","React","forwardRef","props","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,GAAAA,OAAmDC,UAAMC,CAAU,CAACC,OAACA;UAChFC,QAAMA,IAAAA,qCAAQC,EAAAA,OAAuBF;+DAErCG,EAAAA;WACAC,IAAAA,2CAAOA,EAAAA;AACT;AAEAP,WAAWQ,WAAW,GAAG"}
|
|
@@ -230,4 +230,4 @@ const circleMotion = ()=>{
|
|
|
230
230
|
};
|
|
231
231
|
const SendButtonMotion = (0, _reactcomponents.createPresenceComponent)(sendMotion);
|
|
232
232
|
const StopButtonMotion = (0, _reactcomponents.createPresenceComponent)(stopMotion);
|
|
233
|
-
const CircleButtonMotion = (0, _reactcomponents.createPresenceComponent)(circleMotion);
|
|
233
|
+
const CircleButtonMotion = (0, _reactcomponents.createPresenceComponent)(circleMotion); //# sourceMappingURL=buttonMotion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["buttonMotion.ts"],"sourcesContent":["import type { PresenceMotionFn } from '@fluentui/react-components';\nimport { createPresenceComponent, motionTokens } from '@fluentui/react-components';\n\nconst scaleSend = 1.2;\nconst startScaleStop = 0.5;\nconst scaleStop = 1.2;\nconst startScaleCircle = 0.1;\nconst scaleCircle = 1.1;\n\nconst motionSpeedMultiplier = 1;\n\nconst sendMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ transform: `scale(0)` }],\n duration: 0,\n },\n {\n keyframes: [{ transform: `scale(0)` }, { transform: `scale(${scaleSend})` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationSlow * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleSend})` }, { transform: 'scale(1)' }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n delay: (motionTokens.durationSlow + motionTokens.durationNormal) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(0)` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst stopMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 1 }],\n duration: 0,\n delay: 30 * motionSpeedMultiplier, // non-standard motion duration\n },\n {\n keyframes: [{ transform: `scale(${startScaleStop})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationSlower * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleStop})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationUltraFast * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleStop})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationUltraFast + motionTokens.durationFast) * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst circleMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n duration: 0,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${startScaleCircle})` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationSlow + motionTokens.durationFaster) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: motionTokens.durationFast * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\nexport const SendButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(sendMotion);\nexport const StopButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","
|
|
1
|
+
{"version":3,"sources":["buttonMotion.ts"],"sourcesContent":["import type { PresenceMotionFn } from '@fluentui/react-components';\nimport { createPresenceComponent, motionTokens } from '@fluentui/react-components';\n\nconst scaleSend = 1.2;\nconst startScaleStop = 0.5;\nconst scaleStop = 1.2;\nconst startScaleCircle = 0.1;\nconst scaleCircle = 1.1;\n\nconst motionSpeedMultiplier = 1;\n\nconst sendMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ transform: `scale(0)` }],\n duration: 0,\n },\n {\n keyframes: [{ transform: `scale(0)` }, { transform: `scale(${scaleSend})` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationSlow * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleSend})` }, { transform: 'scale(1)' }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n delay: (motionTokens.durationSlow + motionTokens.durationNormal) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(0)` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst stopMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 1 }],\n duration: 0,\n delay: 30 * motionSpeedMultiplier, // non-standard motion duration\n },\n {\n keyframes: [{ transform: `scale(${startScaleStop})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationSlower * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMid,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleStop})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationUltraFast * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleStop})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationUltraFast + motionTokens.durationFast) * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\n\nconst circleMotion: PresenceMotionFn = () => {\n const enterKeyframes = [\n {\n keyframes: [{ opacity: 0 }],\n duration: 0,\n },\n {\n keyframes: [{ opacity: 0 }, { opacity: 1 }],\n duration: 0,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${startScaleCircle})` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationSlow * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n delay: motionTokens.durationFaster * motionSpeedMultiplier,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: `scale(1)` }],\n duration: motionTokens.durationNormal * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: (motionTokens.durationSlow + motionTokens.durationFaster) * motionSpeedMultiplier,\n },\n ];\n\n const exitKeyframes = [\n {\n keyframes: [{ transform: `scale(1)` }, { transform: `scale(${scaleCircle})` }],\n duration: motionTokens.durationFast * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMax,\n },\n {\n keyframes: [{ transform: `scale(${scaleCircle})` }, { transform: 'scale(0)' }],\n duration: motionTokens.durationFaster * motionSpeedMultiplier,\n easing: motionTokens.curveDecelerateMin,\n delay: motionTokens.durationFast * motionSpeedMultiplier,\n },\n ];\n\n return {\n enter: enterKeyframes,\n exit: exitKeyframes,\n };\n};\nexport const SendButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(sendMotion);\nexport const StopButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion: ReturnType<typeof createPresenceComponent<{}>> = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","duration","delay","motionTokens","scaleSend","startScaleStop","scaleStop","startScaleCircle","scaleCircle","motionSpeedMultiplier","sendMotion","enterKeyframes","keyframes","durationNormal","transform","durationSlow","curveDecelerateMid","durationFast","exitKeyframes","stopMotion","durationSlower","curveDecelerateMax","durationUltraFast","durationFaster","curveDecelerateMin","opacity","easing","enter","circleMotion","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -29,3 +29,4 @@ const _SendButton = require("./SendButton");
|
|
|
29
29
|
const _renderSendButton = require("./renderSendButton");
|
|
30
30
|
const _useSendButton = require("./useSendButton");
|
|
31
31
|
const _useSendButtonStylesstyles = require("./useSendButtonStyles.styles");
|
|
32
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SendButtonState, SendButtonSlots } from './SendButton.types';\n\n/**\n * Render the final JSX of SendButton\n */\nexport const renderSendButton_unstable = (state: SendButtonState) => {\n if (state.designVersion === 'next') {\n return renderSendButtonNext(state);\n }\n\n return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n {state.stopIcon && (\n <>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n </>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n\nfunction renderSendButtonNext(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n {state.stopIcon && (\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["renderSendButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { SendButtonState, SendButtonSlots } from './SendButton.types';\n\n/**\n * Render the final JSX of SendButton\n */\nexport const renderSendButton_unstable = (state: SendButtonState) => {\n if (state.designVersion === 'next') {\n return renderSendButtonNext(state);\n }\n\n return renderSendButtonCurrent(state);\n};\n\nfunction renderSendButtonCurrent(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n {state.stopIcon && (\n <>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n </>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n\nfunction renderSendButtonNext(state: SendButtonState) {\n assertSlots<SendButtonSlots>(state);\n\n return (\n <state.root>\n <state.stopBackgroundMotion>\n <state.stopBackground />\n </state.stopBackgroundMotion>\n {state.stopIcon && (\n <state.stopButtonMotion>\n <state.stopIcon />\n </state.stopButtonMotion>\n )}\n <state.sendButtonMotion>\n <state.sendIcon />\n </state.sendButtonMotion>\n </state.root>\n );\n}\n"],"names":["state","designVersion","renderSendButtonNext","renderSendButtonCurrent","assertSlots","stopIcon","_jsxs","_Fragment","stopBackgroundMotion","stopButtonMotion","children","_jsx","stopBackground"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUMA;;;eAAAA;;;4BATN;iCAE4B;AAO1B,MAAIA,4BAAgCA,CAAAA;cAClCC,aAAOC,KAAAA,QAAqBF;QAC9B,OAAAE,qBAAAF;;IAGA,OAAAG,wBAAAH;AAEF;SACEI,wBAA6BJ,KAAAA;oCAE7B,EAAAA;;kBAEKA;YAAAA,MAAMK,QAAQ,IAAA,WACb,GAAAC,IAAAA,gBAAA,EAAAC,oBAAA,EAAA;;;mEACE,EAAAP,MAACA,cAAMQ,EAAAA,CAAAA;;6DACLC,gBAAA,EAAA;;;;;qEAGA,EAAA;;;;;;8BAKJT,KAAA;;;;;gBAIRU,UAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAX,MAAAY,cAAA,EAAA,CAAA;YAEA;YAAAZ,MAASE,QAAAA,IAAAA,WAA2C,GAAAS,IAAAA,eAAA,EAAAX,MAAAS,gBAAA,EAAA;gBAClDL,UAA6BJ,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,MAAAA,QAAAA,EAAAA,CAAAA;YAE7B;YAAA,WAAA,GAAAW,IAAAA,eACE,EAAAX,MAACA,gBAAU,EAAA;;;;;8CAKP"}
|
|
@@ -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 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","
|
|
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/lib-commonjs/index.js
CHANGED
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-20250710-0405-e728c4d6.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-20250710-0405-e728c4d6.1",
|
|
16
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20250710-0405-e728c4d6.1",
|
|
17
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20250710-0405-e728c4d6.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
|
|
2
|
-
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
|
-
export const sendButtonClassNames = {
|
|
4
|
-
root: 'fai-SendButton',
|
|
5
|
-
sendIcon: 'fai-SendButton__sendIcon',
|
|
6
|
-
stopIcon: 'fai-SendButton__stopIcon',
|
|
7
|
-
stopBackground: 'fai-SendButton__stopBackground',
|
|
8
|
-
sendButtonMotion: 'fai-SendButton__sendButtonMotion',
|
|
9
|
-
stopButtonMotion: 'fai-SendButton__stopButtonMotion',
|
|
10
|
-
stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
|
|
11
|
-
};
|
|
12
|
-
/**
|
|
13
|
-
* Styles for the root slot
|
|
14
|
-
*/ const useStyles = makeStyles({
|
|
15
|
-
root: {
|
|
16
|
-
display: 'flex',
|
|
17
|
-
width: '32px',
|
|
18
|
-
minWidth: '32px',
|
|
19
|
-
height: '32px',
|
|
20
|
-
alignItems: 'center',
|
|
21
|
-
padding: '0'
|
|
22
|
-
},
|
|
23
|
-
baseIconButton: {
|
|
24
|
-
position: 'absolute',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
display: 'inline-flex',
|
|
27
|
-
justifyContent: 'center',
|
|
28
|
-
fontSize: tokens.fontSizeBase500,
|
|
29
|
-
height: '20px',
|
|
30
|
-
width: '20px'
|
|
31
|
-
},
|
|
32
|
-
disabled: {
|
|
33
|
-
color: tokens.colorNeutralForegroundDisabled
|
|
34
|
-
},
|
|
35
|
-
iconFilled: {
|
|
36
|
-
color: tokens.colorCompoundBrandBackground,
|
|
37
|
-
':hover': {
|
|
38
|
-
color: tokens.colorCompoundBrandBackgroundHover
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
stopBackground: {
|
|
42
|
-
position: 'absolute',
|
|
43
|
-
width: 'inherit',
|
|
44
|
-
height: 'inherit',
|
|
45
|
-
borderRadius: tokens.borderRadiusCircular,
|
|
46
|
-
/** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: tokens.colorBrandBackground2
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
const useNextStyles = makeStyles({
|
|
50
|
-
baseIconButton: {
|
|
51
|
-
display: 'inline-flex',
|
|
52
|
-
justifyContent: 'center',
|
|
53
|
-
gridArea: 'button',
|
|
54
|
-
position: 'initial',
|
|
55
|
-
zIndex: 1,
|
|
56
|
-
color: tokens.colorNeutralForegroundOnBrand
|
|
57
|
-
},
|
|
58
|
-
dictationActive: {
|
|
59
|
-
color: tokens.colorNeutralForeground2
|
|
60
|
-
},
|
|
61
|
-
sendIconFilled: {
|
|
62
|
-
color: tokens.colorNeutralForegroundOnBrand
|
|
63
|
-
},
|
|
64
|
-
stopIconFilled: {
|
|
65
|
-
color: tokens.colorBrandForeground2
|
|
66
|
-
},
|
|
67
|
-
stopBackground: {
|
|
68
|
-
gridArea: 'button',
|
|
69
|
-
height: '100%',
|
|
70
|
-
width: '100%',
|
|
71
|
-
borderRadius: tokens.borderRadiusCircular,
|
|
72
|
-
backgroundColor: tokens.colorBrandBackground
|
|
73
|
-
},
|
|
74
|
-
stopBackgroundSending: {
|
|
75
|
-
backgroundColor: tokens.colorBrandBackground2
|
|
76
|
-
},
|
|
77
|
-
stopBackgroundDictationActive: {
|
|
78
|
-
backgroundColor: tokens.colorTransparentBackground
|
|
79
|
-
},
|
|
80
|
-
disabled: {
|
|
81
|
-
color: tokens.colorNeutralForegroundDisabled
|
|
82
|
-
},
|
|
83
|
-
stopBackgroundDisabled: {
|
|
84
|
-
backgroundColor: tokens.colorNeutralBackgroundDisabled
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
const useRootNextStyles = makeStyles({
|
|
88
|
-
root: {
|
|
89
|
-
display: 'grid',
|
|
90
|
-
gridTemplateAreas: `"button"`,
|
|
91
|
-
gridTemplateRows: '1fr',
|
|
92
|
-
gridTemplateColumns: '1fr',
|
|
93
|
-
justifyItems: 'center',
|
|
94
|
-
alignItems: 'center',
|
|
95
|
-
padding: tokens.spacingVerticalNone,
|
|
96
|
-
border: 'none',
|
|
97
|
-
position: 'relative',
|
|
98
|
-
...createCustomFocusIndicatorStyle({
|
|
99
|
-
outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
|
|
100
|
-
boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`
|
|
101
|
-
})
|
|
102
|
-
},
|
|
103
|
-
canvas: {
|
|
104
|
-
minWidth: '40px',
|
|
105
|
-
height: '40px'
|
|
106
|
-
},
|
|
107
|
-
sidecar: {
|
|
108
|
-
minWidth: '32px',
|
|
109
|
-
height: '32px'
|
|
110
|
-
},
|
|
111
|
-
notSending: {
|
|
112
|
-
':hover': {
|
|
113
|
-
[`& .${sendButtonClassNames.stopBackground}`]: {
|
|
114
|
-
backgroundColor: tokens.colorBrandBackgroundHover
|
|
115
|
-
},
|
|
116
|
-
[`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
|
|
117
|
-
color: tokens.colorNeutralForegroundOnBrand
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
':active': {
|
|
121
|
-
[`& .${sendButtonClassNames.stopBackground}`]: {
|
|
122
|
-
backgroundColor: tokens.colorBrandBackgroundPressed
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
notSendingDictationActive: {
|
|
127
|
-
':hover': {
|
|
128
|
-
[`& .${sendButtonClassNames.stopBackground}`]: {
|
|
129
|
-
backgroundColor: tokens.colorSubtleBackgroundHover
|
|
130
|
-
},
|
|
131
|
-
[`& .${sendButtonClassNames.sendIcon}`]: {
|
|
132
|
-
color: tokens.colorNeutralForeground2Hover
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
':active': {
|
|
136
|
-
[`& .${sendButtonClassNames.stopBackground}`]: {
|
|
137
|
-
backgroundColor: tokens.colorSubtleBackgroundPressed
|
|
138
|
-
},
|
|
139
|
-
[`& .${sendButtonClassNames.sendIcon}`]: {
|
|
140
|
-
color: tokens.colorNeutralForeground2Pressed
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
|
-
sending: {
|
|
145
|
-
':hover': {
|
|
146
|
-
[`& .${sendButtonClassNames.stopBackground}`]: {
|
|
147
|
-
backgroundColor: tokens.colorBrandBackground2Hover
|
|
148
|
-
},
|
|
149
|
-
[`& .${sendButtonClassNames.stopIcon}`]: {
|
|
150
|
-
color: tokens.colorBrandForeground2Hover
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
':active': {
|
|
154
|
-
[`& .${sendButtonClassNames.stopBackground}`]: {
|
|
155
|
-
backgroundColor: tokens.colorBrandBackground2Pressed
|
|
156
|
-
},
|
|
157
|
-
[`& .${sendButtonClassNames.stopIcon}`]: {
|
|
158
|
-
color: tokens.colorBrandForeground2Pressed
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
/**
|
|
164
|
-
* Apply styling to the SendButton slots based on the state
|
|
165
|
-
*/ export const useSendButtonStyles_unstable = (state)=>{
|
|
166
|
-
'use no memo';
|
|
167
|
-
const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
|
|
168
|
-
const styles = useStyles();
|
|
169
|
-
const nextStyles = useNextStyles();
|
|
170
|
-
const rootNextStyles = useRootNextStyles();
|
|
171
|
-
const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
|
|
172
|
-
const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
|
|
173
|
-
state.root.className = mergeClasses(sendButtonClassNames.root, designVersion === 'next' ? rootNextStyles.root : styles.root, isSendIconFilled && sendIconFilledStyle, (state.isButtonMotionRunning || isSending) && sendIconFilledStyle, designVersion === 'next' && rootNextStyles[mode], designVersion === 'next' && rootNextStyles.root, !disabled && designVersion === 'next' && !isSending && (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending), !disabled && designVersion === 'next' && isSending && rootNextStyles.sending, disabled && styles.disabled, state.root.className);
|
|
174
|
-
if (state.sendIcon) {
|
|
175
|
-
state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
|
|
176
|
-
}
|
|
177
|
-
if (state.stopIcon) {
|
|
178
|
-
state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
|
|
179
|
-
}
|
|
180
|
-
if (state.stopBackground) {
|
|
181
|
-
state.stopBackground.className = mergeClasses(sendButtonClassNames.stopBackground, designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground, designVersion === 'next' && isSending && nextStyles.stopBackgroundSending, designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive, designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled, state.stopBackground.className);
|
|
182
|
-
}
|
|
183
|
-
// Add style hooks from button
|
|
184
|
-
useButtonStyles_unstable({
|
|
185
|
-
...state,
|
|
186
|
-
components: {
|
|
187
|
-
...state.components,
|
|
188
|
-
icon: 'span'
|
|
189
|
-
},
|
|
190
|
-
iconOnly: false
|
|
191
|
-
});
|
|
192
|
-
return state;
|
|
193
|
-
};
|