@fluentui-copilot/react-send-button 0.0.4-hotfix.1 → 0.0.4-hotfix.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.json +4 -4
  2. package/CHANGELOG.md +5 -5
  3. package/lib/SendButton.js +1 -0
  4. package/lib/components/SendButton/SendButton.js +5 -4
  5. package/lib/components/SendButton/SendButton.types.js +2 -1
  6. package/lib/components/SendButton/buttonMotion.js +138 -199
  7. package/lib/components/SendButton/index.js +1 -0
  8. package/lib/components/SendButton/renderSendButton.js +30 -38
  9. package/lib/components/SendButton/useSendButton.js +97 -95
  10. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +187 -176
  11. package/lib/index.js +1 -0
  12. package/lib-commonjs/SendButton.js +1 -0
  13. package/lib-commonjs/components/SendButton/SendButton.js +1 -1
  14. package/lib-commonjs/components/SendButton/SendButton.js.map +1 -1
  15. package/lib-commonjs/components/SendButton/SendButton.types.js +1 -0
  16. package/lib-commonjs/components/SendButton/buttonMotion.js +1 -1
  17. package/lib-commonjs/components/SendButton/buttonMotion.js.map +1 -1
  18. package/lib-commonjs/components/SendButton/index.js +1 -0
  19. package/lib-commonjs/components/SendButton/renderSendButton.js +1 -1
  20. package/lib-commonjs/components/SendButton/renderSendButton.js.map +1 -1
  21. package/lib-commonjs/components/SendButton/useSendButton.js +1 -1
  22. package/lib-commonjs/components/SendButton/useSendButton.js.map +1 -1
  23. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +1 -1
  24. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -1
  25. package/lib-commonjs/index.js +1 -0
  26. package/package.json +4 -4
package/lib/components/SendButton/useSendButton.js CHANGED
@@ -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
- */ 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;
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/components/SendButton/useSendButtonStyles.styles.raw.js CHANGED
@@ -1,193 +1,204 @@
1
1
  import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
2
2
  import { tokens } from '@fluentui-copilot/tokens';
3
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'
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
11
  };
12
12
  /**
13
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
14
+ */
15
+ const useStyles = makeStyles({
16
+ root: {
17
+ display: 'flex',
18
+ width: '32px',
19
+ minWidth: '32px',
20
+ height: '32px',
21
+ alignItems: 'center',
22
+ padding: '0'
23
+ },
24
+ baseIconButton: {
25
+ position: 'absolute',
26
+ alignItems: 'center',
27
+ display: 'inline-flex',
28
+ justifyContent: 'center',
29
+ fontSize: tokens.fontSizeBase500,
30
+ height: '20px',
31
+ width: '20px'
32
+ },
33
+ disabled: {
34
+ color: tokens.colorNeutralForegroundDisabled
35
+ },
36
+ iconFilled: {
37
+ color: tokens.colorCompoundBrandBackground,
38
+ ':hover': {
39
+ color: tokens.colorCompoundBrandBackgroundHover
47
40
  }
41
+ },
42
+ stopBackground: {
43
+ position: 'absolute',
44
+ width: 'inherit',
45
+ height: 'inherit',
46
+ borderRadius: tokens.borderRadiusCircular,
47
+ /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/backgroundColor: tokens.colorBrandBackground2
48
+ }
48
49
  });
49
50
  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
- }
51
+ baseIconButton: {
52
+ display: 'inline-flex',
53
+ justifyContent: 'center',
54
+ gridArea: 'button',
55
+ position: 'initial',
56
+ zIndex: 1,
57
+ color: tokens.colorNeutralForegroundOnBrand
58
+ },
59
+ dictationActive: {
60
+ color: tokens.colorNeutralForeground2
61
+ },
62
+ sendIconFilled: {
63
+ color: tokens.colorNeutralForegroundOnBrand
64
+ },
65
+ stopIconFilled: {
66
+ color: tokens.colorBrandForeground2
67
+ },
68
+ stopBackground: {
69
+ gridArea: 'button',
70
+ height: '100%',
71
+ width: '100%',
72
+ borderRadius: tokens.borderRadiusCircular,
73
+ backgroundColor: tokens.colorBrandBackground
74
+ },
75
+ stopBackgroundSending: {
76
+ backgroundColor: tokens.colorBrandBackground2
77
+ },
78
+ stopBackgroundDictationActive: {
79
+ backgroundColor: tokens.colorTransparentBackground
80
+ },
81
+ disabled: {
82
+ color: tokens.colorNeutralForegroundDisabled
83
+ },
84
+ stopBackgroundDisabled: {
85
+ backgroundColor: tokens.colorNeutralBackgroundDisabled
86
+ }
86
87
  });
87
88
  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
- }
89
+ root: {
90
+ display: 'grid',
91
+ gridTemplateAreas: `"button"`,
92
+ gridTemplateRows: '1fr',
93
+ gridTemplateColumns: '1fr',
94
+ justifyItems: 'center',
95
+ alignItems: 'center',
96
+ padding: tokens.spacingVerticalNone,
97
+ border: 'none',
98
+ position: 'relative',
99
+ ...createCustomFocusIndicatorStyle({
100
+ outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
101
+ boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`
102
+ })
103
+ },
104
+ canvas: {
105
+ minWidth: '40px',
106
+ height: '40px'
107
+ },
108
+ sidecar: {
109
+ minWidth: '32px',
110
+ height: '32px'
111
+ },
112
+ notSending: {
113
+ ':hover': {
114
+ [`& .${sendButtonClassNames.stopBackground}`]: {
115
+ backgroundColor: tokens.colorBrandBackgroundHover
116
+ },
117
+ [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
118
+ color: tokens.colorNeutralForegroundOnBrand
119
+ }
143
120
  },
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
- }
121
+ ':active': {
122
+ [`& .${sendButtonClassNames.stopBackground}`]: {
123
+ backgroundColor: tokens.colorBrandBackgroundPressed
124
+ }
125
+ }
126
+ },
127
+ notSendingDictationActive: {
128
+ ':hover': {
129
+ [`& .${sendButtonClassNames.stopBackground}`]: {
130
+ backgroundColor: tokens.colorSubtleBackgroundHover
131
+ },
132
+ [`& .${sendButtonClassNames.sendIcon}`]: {
133
+ color: tokens.colorNeutralForeground2Hover
134
+ }
135
+ },
136
+ ':active': {
137
+ [`& .${sendButtonClassNames.stopBackground}`]: {
138
+ backgroundColor: tokens.colorSubtleBackgroundPressed
139
+ },
140
+ [`& .${sendButtonClassNames.sendIcon}`]: {
141
+ color: tokens.colorNeutralForeground2Pressed
142
+ }
143
+ }
144
+ },
145
+ sending: {
146
+ ':hover': {
147
+ [`& .${sendButtonClassNames.stopBackground}`]: {
148
+ backgroundColor: tokens.colorBrandBackground2Hover
149
+ },
150
+ [`& .${sendButtonClassNames.stopIcon}`]: {
151
+ color: tokens.colorBrandForeground2Hover
152
+ }
153
+ },
154
+ ':active': {
155
+ [`& .${sendButtonClassNames.stopBackground}`]: {
156
+ backgroundColor: tokens.colorBrandBackground2Pressed
157
+ },
158
+ [`& .${sendButtonClassNames.stopIcon}`]: {
159
+ color: tokens.colorBrandForeground2Pressed
160
+ }
161
161
  }
162
+ }
162
163
  });
163
164
  /**
164
165
  * 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;
166
+ */
167
+ export const useSendButtonStyles_unstable = state => {
168
+ 'use no memo';
169
+
170
+ const {
171
+ isDictationActive,
172
+ isSendIconFilled,
173
+ isSending,
174
+ disabled,
175
+ designVersion,
176
+ mode
177
+ } = state;
178
+ const styles = useStyles();
179
+ const nextStyles = useNextStyles();
180
+ const rootNextStyles = useRootNextStyles();
181
+ const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
182
+ const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
183
+ 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);
184
+ if (state.sendIcon) {
185
+ 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);
186
+ }
187
+ if (state.stopIcon) {
188
+ state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
189
+ }
190
+ if (state.stopBackground) {
191
+ 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);
192
+ }
193
+ // Add style hooks from button
194
+ useButtonStyles_unstable({
195
+ ...state,
196
+ components: {
197
+ ...state.components,
198
+ icon: 'span'
199
+ },
200
+ iconOnly: false
201
+ });
202
+ return state;
193
203
  };
204
+ //# sourceMappingURL=useSendButtonStyles.styles.raw.js.map
package/lib/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { SendButton, renderSendButton_unstable, sendButtonClassNames, useSendButtonStyles_unstable, useSendButton_unstable } from './SendButton';
2
+ //# sourceMappingURL=index.js.map
package/lib-commonjs/SendButton.js CHANGED
@@ -26,3 +26,4 @@ _export(exports, {
26
26
  }
27
27
  });
28
28
  const _SendButton = require("./components/SendButton");
29
+ //# sourceMappingURL=SendButton.js.map
package/lib-commonjs/components/SendButton/SendButton.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
package/lib-commonjs/components/SendButton/SendButton.js.map CHANGED
@@ -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","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"}
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"}
package/lib-commonjs/components/SendButton/SendButton.types.js CHANGED
@@ -4,3 +4,4 @@
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
+ //# sourceMappingURL=SendButton.types.js.map
package/lib-commonjs/components/SendButton/buttonMotion.js CHANGED
@@ -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