@fluentui-copilot/react-send-button 0.0.1 → 0.0.3-hotfix.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 +54 -1
- package/CHANGELOG.md +29 -2
- package/lib/SendButton.js +0 -1
- package/lib/components/SendButton/SendButton.js +4 -5
- package/lib/components/SendButton/SendButton.types.js +1 -2
- package/lib/components/SendButton/buttonMotion.js +199 -138
- package/lib/components/SendButton/index.js +0 -1
- package/lib/components/SendButton/renderSendButton.js +38 -30
- package/lib/components/SendButton/useSendButton.js +96 -104
- package/lib/components/SendButton/useSendButton.js.map +1 -1
- package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +193 -0
- package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
- package/lib/index.js +0 -1
- package/lib-commonjs/SendButton.js +0 -1
- 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 +0 -1
- 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 +0 -1
- 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 +3 -9
- package/lib-commonjs/components/SendButton/useSendButton.js.map +1 -1
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +209 -0
- package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/index.js +0 -1
- package/package.json +9 -13
|
@@ -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
|
*
|
|
@@ -15,105 +13,99 @@ const SendIconV2Sidecar = bundleIcon(ArrowRight20Filled, ArrowRight20Regular);
|
|
|
15
13
|
*
|
|
16
14
|
* @param props - props from this instance of SendButton
|
|
17
15
|
* @param ref - reference to root HTMLElement of SendButton
|
|
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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
isSending: props.isSending,
|
|
114
|
-
designVersion,
|
|
115
|
-
mode
|
|
116
|
-
};
|
|
117
|
-
return state;
|
|
16
|
+
*/ export const useSendButton_unstable = (props, ref)=>{
|
|
17
|
+
/** Used to apply/remove styles when button is animating */ const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);
|
|
18
|
+
const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);
|
|
19
|
+
const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;
|
|
20
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
21
|
+
const mode = useCopilotMode(props.mode);
|
|
22
|
+
const [visible, setVisible] = React.useState(false);
|
|
23
|
+
const mountRef = React.useCallback((elem)=>{
|
|
24
|
+
if (elem) {
|
|
25
|
+
setVisible(true);
|
|
26
|
+
} else {
|
|
27
|
+
setVisible(false);
|
|
28
|
+
}
|
|
29
|
+
}, []);
|
|
30
|
+
const finalRef = useMergedRefs(ref, mountRef);
|
|
31
|
+
const buttonState = useButton_unstable({
|
|
32
|
+
shape: designVersion === 'next' ? 'circular' : undefined,
|
|
33
|
+
...props,
|
|
34
|
+
appearance: 'transparent',
|
|
35
|
+
'aria-disabled': props.disabled ? true : undefined,
|
|
36
|
+
type: 'submit'
|
|
37
|
+
}, finalRef);
|
|
38
|
+
const icon = (()=>{
|
|
39
|
+
if (designVersion === 'next') {
|
|
40
|
+
return mode === 'canvas' ? /*#__PURE__*/ React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/ React.createElement(ArrowRight20Filled, null);
|
|
41
|
+
} else {
|
|
42
|
+
if (props.isSendIconFilled || isButtonMotionRunning) {
|
|
43
|
+
return /*#__PURE__*/ React.createElement(SendFilled, null);
|
|
44
|
+
} else {
|
|
45
|
+
return /*#__PURE__*/ React.createElement(SendIcon, null);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
})();
|
|
49
|
+
var _props_isDictationActive;
|
|
50
|
+
const state = {
|
|
51
|
+
...buttonState,
|
|
52
|
+
components: {
|
|
53
|
+
root: 'button',
|
|
54
|
+
sendIcon: 'span',
|
|
55
|
+
stopIcon: 'span',
|
|
56
|
+
stopBackground: 'div',
|
|
57
|
+
sendButtonMotion: SendButtonMotion,
|
|
58
|
+
stopButtonMotion: StopButtonMotion,
|
|
59
|
+
stopBackgroundMotion: CircleButtonMotion
|
|
60
|
+
},
|
|
61
|
+
root: buttonState.root,
|
|
62
|
+
sendIcon: slot.always(props.sendIcon, {
|
|
63
|
+
elementType: 'span',
|
|
64
|
+
defaultProps: {
|
|
65
|
+
children: icon
|
|
66
|
+
}
|
|
67
|
+
}),
|
|
68
|
+
stopIcon: slot.optional(props.stopIcon, {
|
|
69
|
+
elementType: 'span',
|
|
70
|
+
defaultProps: {
|
|
71
|
+
children: designVersion === 'next' ? mode === 'canvas' ? /*#__PURE__*/ React.createElement(Stop20Filled, null) : /*#__PURE__*/ React.createElement(Stop16Filled, null) : /*#__PURE__*/ React.createElement(Stop16Filled, null)
|
|
72
|
+
},
|
|
73
|
+
renderByDefault: true
|
|
74
|
+
}),
|
|
75
|
+
stopBackground: slot.always(props.stopBackground, {
|
|
76
|
+
elementType: 'div'
|
|
77
|
+
}),
|
|
78
|
+
sendButtonMotion: presenceMotionSlot(props.sendButtonMotion, {
|
|
79
|
+
elementType: SendButtonMotion,
|
|
80
|
+
defaultProps: {
|
|
81
|
+
visible: !props.isSending,
|
|
82
|
+
unmountOnExit: true,
|
|
83
|
+
onMotionFinish: ()=>setIsSendMotionRunning(false),
|
|
84
|
+
onMotionStart: ()=>setIsSendMotionRunning(true)
|
|
85
|
+
}
|
|
86
|
+
}),
|
|
87
|
+
stopButtonMotion: presenceMotionSlot(props.stopButtonMotion, {
|
|
88
|
+
elementType: StopButtonMotion,
|
|
89
|
+
defaultProps: {
|
|
90
|
+
visible: props.isSending,
|
|
91
|
+
unmountOnExit: true,
|
|
92
|
+
onMotionFinish: ()=>setIsStopMotionRunning(false),
|
|
93
|
+
onMotionStart: ()=>setIsStopMotionRunning(true)
|
|
94
|
+
}
|
|
95
|
+
}),
|
|
96
|
+
stopBackgroundMotion: presenceMotionSlot(props.stopBackgroundMotion, {
|
|
97
|
+
elementType: CircleButtonMotion,
|
|
98
|
+
defaultProps: {
|
|
99
|
+
visible: designVersion === 'next' ? visible : props.isSending,
|
|
100
|
+
unmountOnExit: true
|
|
101
|
+
}
|
|
102
|
+
}),
|
|
103
|
+
isButtonMotionRunning,
|
|
104
|
+
isDictationActive: (_props_isDictationActive = props.isDictationActive) !== null && _props_isDictationActive !== void 0 ? _props_isDictationActive : false,
|
|
105
|
+
isSendIconFilled: props.isSendIconFilled,
|
|
106
|
+
isSending: props.isSending,
|
|
107
|
+
designVersion,
|
|
108
|
+
mode
|
|
109
|
+
};
|
|
110
|
+
return state;
|
|
118
111
|
};
|
|
119
|
-
//# sourceMappingURL=useSendButton.js.map
|
|
@@ -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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"}
|
|
@@ -0,0 +1,193 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nimport type { SendButtonSlots, SendButtonState } from './SendButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const sendButtonClassNames: SlotClassNames<SendButtonSlots> = {\n root: 'fai-SendButton',\n sendIcon: 'fai-SendButton__sendIcon',\n stopIcon: 'fai-SendButton__stopIcon',\n stopBackground: 'fai-SendButton__stopBackground',\n sendButtonMotion: 'fai-SendButton__sendButtonMotion',\n stopButtonMotion: 'fai-SendButton__stopButtonMotion',\n stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n width: '32px',\n minWidth: '32px',\n height: '32px',\n alignItems: 'center',\n padding: '0',\n },\n\n baseIconButton: {\n position: 'absolute',\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n fontSize: tokens.fontSizeBase500, // 20px\n height: '20px',\n width: '20px',\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n iconFilled: {\n color: tokens.colorCompoundBrandBackground,\n ':hover': {\n color: tokens.colorCompoundBrandBackgroundHover,\n },\n },\n\n stopBackground: {\n position: 'absolute',\n width: 'inherit',\n height: 'inherit',\n borderRadius: tokens.borderRadiusCircular,\n /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/\n backgroundColor: tokens.colorBrandBackground2,\n },\n});\n\nconst useNextStyles = makeStyles({\n baseIconButton: {\n display: 'inline-flex',\n justifyContent: 'center',\n gridArea: 'button',\n position: 'initial',\n zIndex: 1,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n dictationActive: {\n color: tokens.colorNeutralForeground2,\n },\n\n sendIconFilled: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n stopIconFilled: {\n color: tokens.colorBrandForeground2,\n },\n\n stopBackground: {\n gridArea: 'button',\n height: '100%',\n width: '100%',\n borderRadius: tokens.borderRadiusCircular,\n backgroundColor: tokens.colorBrandBackground,\n },\n\n stopBackgroundSending: {\n backgroundColor: tokens.colorBrandBackground2,\n },\n\n stopBackgroundDictationActive: {\n backgroundColor: tokens.colorTransparentBackground,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n stopBackgroundDisabled: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n display: 'grid',\n gridTemplateAreas: `\"button\"`,\n gridTemplateRows: '1fr',\n gridTemplateColumns: '1fr',\n justifyItems: 'center',\n alignItems: 'center',\n padding: tokens.spacingVerticalNone,\n border: 'none',\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`,\n }),\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '32px',\n height: '32px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n },\n },\n },\n notSendingDictationActive: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n sending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n },\n },\n ':active': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Pressed,\n },\n },\n },\n});\n\n/**\n * Apply styling to the SendButton slots based on the state\n */\nexport const useSendButtonStyles_unstable = (state: SendButtonState): SendButtonState => {\n 'use no memo';\n const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;\n\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const rootNextStyles = useRootNextStyles();\n\n const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;\n const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;\n\n state.root.className = mergeClasses(\n sendButtonClassNames.root,\n designVersion === 'next' ? rootNextStyles.root : styles.root,\n isSendIconFilled && sendIconFilledStyle,\n (state.isButtonMotionRunning || isSending) && sendIconFilledStyle,\n designVersion === 'next' && rootNextStyles[mode],\n designVersion === 'next' && rootNextStyles.root,\n !disabled &&\n designVersion === 'next' &&\n !isSending &&\n (isDictationActive ? rootNextStyles.notSendingDictationActive : rootNextStyles.notSending),\n !disabled && designVersion === 'next' && isSending && rootNextStyles.sending,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.sendIcon) {\n state.sendIcon.className = mergeClasses(\n sendButtonClassNames.sendIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive,\n disabled && designVersion === 'next' && nextStyles.disabled,\n state.sendIcon.className,\n );\n }\n\n if (state.stopIcon) {\n state.stopIcon.className = mergeClasses(\n sendButtonClassNames.stopIcon,\n designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton,\n stopIconFilledStyle,\n state.stopIcon.className,\n );\n }\n\n if (state.stopBackground) {\n state.stopBackground.className = mergeClasses(\n sendButtonClassNames.stopBackground,\n designVersion === 'next' ? nextStyles.stopBackground : styles.stopBackground,\n designVersion === 'next' && isSending && nextStyles.stopBackgroundSending,\n designVersion === 'next' && !isSending && isDictationActive && nextStyles.stopBackgroundDictationActive,\n designVersion === 'next' && disabled && nextStyles.stopBackgroundDisabled,\n state.stopBackground.className,\n );\n }\n\n // Add style hooks from button\n useButtonStyles_unstable({ ...state, components: { ...state.components, icon: 'span' }, iconOnly: false });\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","useButtonStyles_unstable","createCustomFocusIndicatorStyle","tokens","sendButtonClassNames","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","useSendButtonStyles_unstable","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","isButtonMotionRunning","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
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';
|
|
@@ -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","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,
|
|
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","ref","state","useSendButton_unstable","useSendButtonStyles_unstable","renderSendButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;+BACgB;kCACG;2CACG;AAKtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,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);
|
|
@@ -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 = createPresenceComponent(sendMotion);\nexport const StopButtonMotion = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion = 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 = createPresenceComponent(sendMotion);\nexport const StopButtonMotion = createPresenceComponent(stopMotion);\nexport const CircleButtonMotion = createPresenceComponent(circleMotion);\n"],"names":["CircleButtonMotion","SendButtonMotion","StopButtonMotion","scaleSend","startScaleStop","scaleStop","startScaleCircle","scaleCircle","motionSpeedMultiplier","sendMotion","enterKeyframes","keyframes","transform","duration","motionTokens","durationNormal","easing","curveDecelerateMax","delay","durationSlow","curveDecelerateMid","exitKeyframes","durationFast","enter","exit","stopMotion","opacity","durationSlower","durationUltraFast","durationFaster","curveDecelerateMin","circleMotion","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -29,4 +29,3 @@ 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
|