@fluentui-copilot/react-send-button 0.0.3 → 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 (7) hide show
  1. package/CHANGELOG.json +46 -1
  2. package/CHANGELOG.md +20 -2
  3. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +204 -0
  4. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
  5. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +209 -0
  6. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -0
  7. package/package.json +8 -12
package/CHANGELOG.json CHANGED
@@ -2,7 +2,52 @@
2
2
  "name": "@fluentui-copilot/react-send-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 30 Apr 2025 01:46:04 GMT",
5
+ "date": "Fri, 19 Sep 2025 15:10:20 GMT",
6
+ "tag": "@fluentui-copilot/react-send-button_v0.0.4-hotfix.2",
7
+ "version": "0.0.4-hotfix.2",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "hochelmartin@gmail.com",
12
+ "package": "@fluentui-copilot/react-send-button",
13
+ "commit": "3e4ebe676646c4c4346dbbab83511f963ffefd85",
14
+ "comment": "release: prepare hotfix 0.26.2-hotfix.2"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 19 May 2025 18:04:28 GMT",
21
+ "tag": "@fluentui-copilot/react-send-button_v0.0.4",
22
+ "version": "0.0.4",
23
+ "comments": {
24
+ "none": [
25
+ {
26
+ "author": "hochelmartin@gmail.com",
27
+ "package": "@fluentui-copilot/react-send-button",
28
+ "commit": "442954951d0eca92de20ecb0ff0fa9492431b62d",
29
+ "comment": "fix: exclude story files from production build"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Sat, 03 May 2025 01:27:45 GMT",
36
+ "tag": "@fluentui-copilot/react-send-button_v0.0.4",
37
+ "version": "0.0.4",
38
+ "comments": {
39
+ "patch": [
40
+ {
41
+ "author": "estebanmu@microsoft.com",
42
+ "package": "@fluentui-copilot/react-send-button",
43
+ "commit": "3dc05bb66ec473691f198f65b5124cc24390f47c",
44
+ "comment": "chore: Bump @fluentui/react-components to 9.63.0."
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Wed, 30 Apr 2025 01:47:49 GMT",
6
51
  "tag": "@fluentui-copilot/react-send-button_v0.0.3",
7
52
  "version": "0.0.3",
8
53
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,30 @@
1
1
  # Change Log - @fluentui-copilot/react-send-button
2
2
 
3
- This log was last generated on Wed, 30 Apr 2025 01:46:04 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 19 Sep 2025 15:10:20 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.0.4-hotfix.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.4-hotfix.2)
8
+
9
+ Fri, 19 Sep 2025 15:10:20 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.0.4..@fluentui-copilot/react-send-button_v0.0.4-hotfix.2)
11
+
12
+ ### Changes
13
+
14
+ - release: prepare hotfix 0.26.2-hotfix.2 ([PR #3284](https://github.com/microsoft/fluentai/pull/3284) by hochelmartin@gmail.com)
15
+
16
+ ## [0.0.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.4)
17
+
18
+ Sat, 03 May 2025 01:27:45 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.0.3..@fluentui-copilot/react-send-button_v0.0.4)
20
+
21
+ ### Patches
22
+
23
+ - chore: Bump @fluentui/react-components to 9.63.0. ([PR #2917](https://github.com/microsoft/fluentai/pull/2917) by estebanmu@microsoft.com)
24
+
7
25
  ## [0.0.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.0.3)
8
26
 
9
- Wed, 30 Apr 2025 01:46:04 GMT
27
+ Wed, 30 Apr 2025 01:47:49 GMT
10
28
  [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.0.2..@fluentui-copilot/react-send-button_v0.0.3)
11
29
 
12
30
  ### Patches
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js ADDED
@@ -0,0 +1,204 @@
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
+ */
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
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
+ }
49
+ });
50
+ const useNextStyles = makeStyles({
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
+ }
87
+ });
88
+ const useRootNextStyles = makeStyles({
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
+ }
120
+ },
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
+ }
162
+ }
163
+ });
164
+ /**
165
+ * Apply styling to the SendButton slots based on the 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;
203
+ };
204
+ //# sourceMappingURL=useSendButtonStyles.styles.raw.js.map
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map ADDED
@@ -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-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js ADDED
@@ -0,0 +1,209 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ sendButtonClassNames: function() {
13
+ return sendButtonClassNames;
14
+ },
15
+ useSendButtonStyles_unstable: function() {
16
+ return useSendButtonStyles_unstable;
17
+ }
18
+ });
19
+ const _reactcomponents = require("@fluentui/react-components");
20
+ const _tokens = require("@fluentui-copilot/tokens");
21
+ const sendButtonClassNames = {
22
+ root: 'fai-SendButton',
23
+ sendIcon: 'fai-SendButton__sendIcon',
24
+ stopIcon: 'fai-SendButton__stopIcon',
25
+ stopBackground: 'fai-SendButton__stopBackground',
26
+ sendButtonMotion: 'fai-SendButton__sendButtonMotion',
27
+ stopButtonMotion: 'fai-SendButton__stopButtonMotion',
28
+ stopBackgroundMotion: 'fai-SendButton__stopBackgroundMotion'
29
+ };
30
+ /**
31
+ * Styles for the root slot
32
+ */ const useStyles = (0, _reactcomponents.makeStyles)({
33
+ root: {
34
+ display: 'flex',
35
+ width: '32px',
36
+ minWidth: '32px',
37
+ height: '32px',
38
+ alignItems: 'center',
39
+ padding: '0'
40
+ },
41
+ baseIconButton: {
42
+ position: 'absolute',
43
+ alignItems: 'center',
44
+ display: 'inline-flex',
45
+ justifyContent: 'center',
46
+ fontSize: _tokens.tokens.fontSizeBase500,
47
+ height: '20px',
48
+ width: '20px'
49
+ },
50
+ disabled: {
51
+ color: _tokens.tokens.colorNeutralForegroundDisabled
52
+ },
53
+ iconFilled: {
54
+ color: _tokens.tokens.colorCompoundBrandBackground,
55
+ ':hover': {
56
+ color: _tokens.tokens.colorCompoundBrandBackgroundHover
57
+ }
58
+ },
59
+ stopBackground: {
60
+ position: 'absolute',
61
+ width: 'inherit',
62
+ height: 'inherit',
63
+ borderRadius: _tokens.tokens.borderRadiusCircular,
64
+ /** To-do: Change to backgroundColor: var(--Brand-Background-Tint-Rest, #EBEFFF);*/ backgroundColor: _tokens.tokens.colorBrandBackground2
65
+ }
66
+ });
67
+ const useNextStyles = (0, _reactcomponents.makeStyles)({
68
+ baseIconButton: {
69
+ display: 'inline-flex',
70
+ justifyContent: 'center',
71
+ gridArea: 'button',
72
+ position: 'initial',
73
+ zIndex: 1,
74
+ color: _tokens.tokens.colorNeutralForegroundOnBrand
75
+ },
76
+ dictationActive: {
77
+ color: _tokens.tokens.colorNeutralForeground2
78
+ },
79
+ sendIconFilled: {
80
+ color: _tokens.tokens.colorNeutralForegroundOnBrand
81
+ },
82
+ stopIconFilled: {
83
+ color: _tokens.tokens.colorBrandForeground2
84
+ },
85
+ stopBackground: {
86
+ gridArea: 'button',
87
+ height: '100%',
88
+ width: '100%',
89
+ borderRadius: _tokens.tokens.borderRadiusCircular,
90
+ backgroundColor: _tokens.tokens.colorBrandBackground
91
+ },
92
+ stopBackgroundSending: {
93
+ backgroundColor: _tokens.tokens.colorBrandBackground2
94
+ },
95
+ stopBackgroundDictationActive: {
96
+ backgroundColor: _tokens.tokens.colorTransparentBackground
97
+ },
98
+ disabled: {
99
+ color: _tokens.tokens.colorNeutralForegroundDisabled
100
+ },
101
+ stopBackgroundDisabled: {
102
+ backgroundColor: _tokens.tokens.colorNeutralBackgroundDisabled
103
+ }
104
+ });
105
+ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
106
+ root: {
107
+ display: 'grid',
108
+ gridTemplateAreas: `"button"`,
109
+ gridTemplateRows: '1fr',
110
+ gridTemplateColumns: '1fr',
111
+ justifyItems: 'center',
112
+ alignItems: 'center',
113
+ padding: _tokens.tokens.spacingVerticalNone,
114
+ border: 'none',
115
+ position: 'relative',
116
+ ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
117
+ outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorTransparentStroke}`,
118
+ boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThick} ${_tokens.tokens.colorStrokeFocus2}`
119
+ })
120
+ },
121
+ canvas: {
122
+ minWidth: '40px',
123
+ height: '40px'
124
+ },
125
+ sidecar: {
126
+ minWidth: '32px',
127
+ height: '32px'
128
+ },
129
+ notSending: {
130
+ ':hover': {
131
+ [`& .${sendButtonClassNames.stopBackground}`]: {
132
+ backgroundColor: _tokens.tokens.colorBrandBackgroundHover
133
+ },
134
+ [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
135
+ color: _tokens.tokens.colorNeutralForegroundOnBrand
136
+ }
137
+ },
138
+ ':active': {
139
+ [`& .${sendButtonClassNames.stopBackground}`]: {
140
+ backgroundColor: _tokens.tokens.colorBrandBackgroundPressed
141
+ }
142
+ }
143
+ },
144
+ notSendingDictationActive: {
145
+ ':hover': {
146
+ [`& .${sendButtonClassNames.stopBackground}`]: {
147
+ backgroundColor: _tokens.tokens.colorSubtleBackgroundHover
148
+ },
149
+ [`& .${sendButtonClassNames.sendIcon}`]: {
150
+ color: _tokens.tokens.colorNeutralForeground2Hover
151
+ }
152
+ },
153
+ ':active': {
154
+ [`& .${sendButtonClassNames.stopBackground}`]: {
155
+ backgroundColor: _tokens.tokens.colorSubtleBackgroundPressed
156
+ },
157
+ [`& .${sendButtonClassNames.sendIcon}`]: {
158
+ color: _tokens.tokens.colorNeutralForeground2Pressed
159
+ }
160
+ }
161
+ },
162
+ sending: {
163
+ ':hover': {
164
+ [`& .${sendButtonClassNames.stopBackground}`]: {
165
+ backgroundColor: _tokens.tokens.colorBrandBackground2Hover
166
+ },
167
+ [`& .${sendButtonClassNames.stopIcon}`]: {
168
+ color: _tokens.tokens.colorBrandForeground2Hover
169
+ }
170
+ },
171
+ ':active': {
172
+ [`& .${sendButtonClassNames.stopBackground}`]: {
173
+ backgroundColor: _tokens.tokens.colorBrandBackground2Pressed
174
+ },
175
+ [`& .${sendButtonClassNames.stopIcon}`]: {
176
+ color: _tokens.tokens.colorBrandForeground2Pressed
177
+ }
178
+ }
179
+ }
180
+ });
181
+ const useSendButtonStyles_unstable = (state)=>{
182
+ 'use no memo';
183
+ const { isDictationActive, isSendIconFilled, isSending, disabled, designVersion, mode } = state;
184
+ const styles = useStyles();
185
+ const nextStyles = useNextStyles();
186
+ const rootNextStyles = useRootNextStyles();
187
+ const sendIconFilledStyle = designVersion === 'next' ? nextStyles.sendIconFilled : styles.iconFilled;
188
+ const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
189
+ state.root.className = (0, _reactcomponents.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);
190
+ if (state.sendIcon) {
191
+ state.sendIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
192
+ }
193
+ if (state.stopIcon) {
194
+ state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
195
+ }
196
+ if (state.stopBackground) {
197
+ state.stopBackground.className = (0, _reactcomponents.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);
198
+ }
199
+ // Add style hooks from button
200
+ (0, _reactcomponents.useButtonStyles_unstable)({
201
+ ...state,
202
+ components: {
203
+ ...state.components,
204
+ icon: 'span'
205
+ },
206
+ iconOnly: false
207
+ });
208
+ return state;
209
+ }; //# sourceMappingURL=useSendButtonStyles.styles.raw.js.map
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map ADDED
@@ -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":["sendButtonClassNames","isDictationActive","isSendIconFilled","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","makeStyles","display","width","minWidth","height","alignItems","padding","justifyContent","tokens","fontSizeBase500","color","colorNeutralForegroundDisabled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","baseIconButton","position","zIndex","colorNeutralForegroundOnBrand","colorNeutralForeground2","colorBrandForeground2","colorBrandBackground","colorTransparentBackground","colorNeutralBackgroundDisabled","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","border","spacingVerticalNone","createCustomFocusIndicatorStyle","strokeWidthThick","boxShadow","colorTransparentStroke","colorStrokeFocus2","colorBrandBackgroundHover","colorBrandBackgroundPressed","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","sendIconFilledStyle","stopIconFilledStyle","state","disabled","mode","nextStyles","useNextStyles","className","mergeClasses","designVersion","stopIconFilled","styles","iconFilled","rootNextStyles","isButtonMotionRunning","isSending","notSendingDictationActive","notSending","sending","useButtonStyles_unstable","dictationActive","components","iconOnly","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-send-button",
3
- "version": "0.0.3",
3
+ "version": "0.0.4-hotfix.2",
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,27 +12,23 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "^0.11.2",
16
- "@fluentui-copilot/react-utilities": "^0.0.7",
17
- "@fluentui-copilot/tokens": "^0.3.10",
15
+ "@fluentui-copilot/react-provider": "0.11.3-hotfix.2",
16
+ "@fluentui-copilot/react-utilities": "0.0.8-hotfix.2",
17
+ "@fluentui-copilot/tokens": "0.3.11-hotfix.2",
18
18
  "@swc/helpers": "^0.5.1"
19
19
  },
20
20
  "peerDependencies": {
21
- "@fluentui/react-components": ">=9.58.3 <10.0.0",
21
+ "@fluentui/react-components": ">=9.63.0 <10.0.0",
22
22
  "@fluentui/react-icons": ">=2.0.260 <3.0.0",
23
- "@fluentui/react-jsx-runtime": ">=9.0.50 <10.0.0",
24
- "@fluentui/react-motion": ">=9.6.7 <10.0.0",
23
+ "@fluentui/react-jsx-runtime": ">=9.0.54 <10.0.0",
24
+ "@fluentui/react-motion": ">=9.7.2 <10.0.0",
25
25
  "@fluentui/react-shared-contexts": ">=9.23.1 <10.0.0",
26
26
  "@types/react": ">=16.14.0 <19.0.0",
27
27
  "@types/react-dom": ">=16.9.8 <19.0.0",
28
28
  "react": ">=16.14.0 <19.0.0",
29
29
  "react-dom": ">=16.14.0 <19.0.0"
30
30
  },
31
- "beachball": {
32
- "disallowedChangeTypes": [
33
- "major"
34
- ]
35
- },
31
+ "beachball": {},
36
32
  "exports": {
37
33
  ".": {
38
34
  "types": "./dist/index.d.ts",