@fluentui-copilot/react-send-button 0.1.3 → 0.1.5

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 (16) hide show
  1. package/CHANGELOG.json +37 -1
  2. package/CHANGELOG.md +21 -2
  3. package/dist/index.d.ts +2 -0
  4. package/lib/components/SendButton/useSendButton.js +2 -2
  5. package/lib/components/SendButton/useSendButton.js.map +1 -1
  6. package/lib/components/SendButton/useSendButtonStyles.styles.js +51 -15
  7. package/lib/components/SendButton/useSendButtonStyles.styles.js.map +1 -1
  8. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js +47 -16
  9. package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -1
  10. package/lib-commonjs/components/SendButton/useSendButton.js +1 -1
  11. package/lib-commonjs/components/SendButton/useSendButton.js.map +1 -1
  12. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js +96 -14
  13. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map +1 -1
  14. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js +46 -15
  15. package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map +1 -1
  16. package/package.json +3 -3
package/CHANGELOG.json CHANGED
@@ -2,7 +2,43 @@
2
2
  "name": "@fluentui-copilot/react-send-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 17 Jul 2025 17:47:34 GMT",
5
+ "date": "Mon, 29 Sep 2025 20:25:10 GMT",
6
+ "tag": "@fluentui-copilot/react-send-button_v0.1.5",
7
+ "version": "0.1.5",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "jiangemma@microsoft.com",
12
+ "package": "@fluentui-copilot/react-send-button",
13
+ "commit": "d74d0f78f6a091a98d395a018dd88f0b76618798",
14
+ "comment": "feat: Update appearance in sidecar mode to match Catalyst craft"
15
+ },
16
+ {
17
+ "author": "tristan.watanabe@gmail.com",
18
+ "package": "@fluentui-copilot/react-send-button",
19
+ "commit": "eb866bbd84d778637cb17f869920ae47a3eeec50",
20
+ "comment": "fix: type issues after React 18 upgrade."
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Wed, 27 Aug 2025 23:20:53 GMT",
27
+ "tag": "@fluentui-copilot/react-send-button_v0.1.4",
28
+ "version": "0.1.4",
29
+ "comments": {
30
+ "patch": [
31
+ {
32
+ "author": "jiangemma@microsoft.com",
33
+ "package": "@fluentui-copilot/react-send-button",
34
+ "commit": "c199731a876599c38b001c9b9f18845d52885220",
35
+ "comment": "feat: Add WHCM styles"
36
+ }
37
+ ]
38
+ }
39
+ },
40
+ {
41
+ "date": "Thu, 17 Jul 2025 17:49:25 GMT",
6
42
  "tag": "@fluentui-copilot/react-send-button_v0.1.3",
7
43
  "version": "0.1.3",
8
44
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui-copilot/react-send-button
2
2
 
3
- This log was last generated on Thu, 17 Jul 2025 17:47:34 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 29 Sep 2025 20:25:10 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.1.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.5)
8
+
9
+ Mon, 29 Sep 2025 20:25:10 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.4..@fluentui-copilot/react-send-button_v0.1.5)
11
+
12
+ ### Patches
13
+
14
+ - feat: Update appearance in sidecar mode to match Catalyst craft ([PR #3332](https://github.com/microsoft/fluentai/pull/3332) by jiangemma@microsoft.com)
15
+ - fix: type issues after React 18 upgrade. ([PR #3341](https://github.com/microsoft/fluentai/pull/3341) by tristan.watanabe@gmail.com)
16
+
17
+ ## [0.1.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.4)
18
+
19
+ Wed, 27 Aug 2025 23:20:53 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.3..@fluentui-copilot/react-send-button_v0.1.4)
21
+
22
+ ### Patches
23
+
24
+ - feat: Add WHCM styles ([PR #3310](https://github.com/microsoft/fluentai/pull/3310) by jiangemma@microsoft.com)
25
+
7
26
  ## [0.1.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-send-button_v0.1.3)
8
27
 
9
- Thu, 17 Jul 2025 17:47:34 GMT
28
+ Thu, 17 Jul 2025 17:49:25 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-send-button_v0.1.2..@fluentui-copilot/react-send-button_v0.1.3)
11
30
 
12
31
  ### Patches
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+
1
3
  import type { ARIAButtonSlotProps } from '@fluentui/react-aria';
2
4
  import type { ButtonProps } from '@fluentui/react-components';
3
5
  import type { ButtonState } from '@fluentui/react-components';
package/lib/components/SendButton/useSendButton.js CHANGED
@@ -1,7 +1,7 @@
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, ArrowRight24Filled, Stop20Filled, ArrowRight20Filled } from '@fluentui/react-icons';
4
+ import { bundleIcon, SendFilled, SendRegular, Stop16Filled, ArrowRight24Filled, Stop20Filled, ArrowRight16Filled } 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);
@@ -37,7 +37,7 @@ const SendIcon = bundleIcon(SendFilled, SendRegular);
37
37
  }, finalRef);
38
38
  const icon = (()=>{
39
39
  if (designVersion === 'next') {
40
- return mode === 'canvas' ? /*#__PURE__*/ React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/ React.createElement(ArrowRight20Filled, null);
40
+ return mode === 'canvas' ? /*#__PURE__*/ React.createElement(ArrowRight24Filled, null) : /*#__PURE__*/ React.createElement(ArrowRight16Filled, null);
41
41
  } else {
42
42
  if (props.isSendIconFilled || isButtonMotionRunning) {
43
43
  return /*#__PURE__*/ React.createElement(SendFilled, null);
package/lib/components/SendButton/useSendButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n ArrowRight24Filled,\n Stop20Filled,\n ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n props: SendButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n /** Used to apply/remove styles when button is animating */\n const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n const designVersion = useDesignVersion(props.designVersion);\n const mode = useCopilotMode(props.mode);\n\n const [visible, setVisible] = React.useState(false);\n const mountRef = React.useCallback((elem: HTMLElement | null) => {\n if (elem) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n }, []);\n const finalRef = useMergedRefs(ref, mountRef);\n const buttonState = useButton_unstable(\n {\n shape: designVersion === 'next' ? 'circular' : undefined,\n ...(props as ButtonProps),\n appearance: 'transparent',\n 'aria-disabled': props.disabled ? true : undefined,\n type: 'submit',\n },\n finalRef,\n );\n\n const icon = (() => {\n if (designVersion === 'next') {\n return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Filled />;\n } else {\n if (props.isSendIconFilled || isButtonMotionRunning) {\n return <SendFilled />;\n } else {\n return <SendIcon />;\n }\n }\n })();\n\n const state: SendButtonState = {\n ...buttonState,\n components: {\n root: 'button',\n sendIcon: 'span',\n stopIcon: 'span',\n stopBackground: 'div',\n sendButtonMotion: SendButtonMotion as React.ComponentType,\n stopButtonMotion: StopButtonMotion as React.ComponentType,\n stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["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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"}
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 ArrowRight16Filled,\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 /> : <ArrowRight16Filled />;\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,\n stopButtonMotion: StopButtonMotion,\n stopBackgroundMotion: CircleButtonMotion,\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","ArrowRight16Filled","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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"}
package/lib/components/SendButton/useSendButtonStyles.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __styles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
1
+ import { __styles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle, shorthands } from '@fluentui/react-components';
2
2
  import { tokens } from '@fluentui-copilot/tokens';
3
3
  export const sendButtonClassNames = {
4
4
  root: 'fai-SendButton',
@@ -71,7 +71,12 @@ const useNextStyles = __styles({
71
71
  Bq1tomu: "fwzfryc",
72
72
  qhf8xq: "f1tmlkn4",
73
73
  Bj3rh1h: "f19g0ac",
74
- sj55zd: "f1phragk"
74
+ sj55zd: "f1phragk",
75
+ B7iucu3: "fqc85l4"
76
+ },
77
+ baseIconButtonSidecar: {
78
+ a9b677: "fjw5fx7",
79
+ Bqenvij: "fd461yt"
75
80
  },
76
81
  dictationActive: {
77
82
  sj55zd: "fkfq4zb"
@@ -112,11 +117,14 @@ const useNextStyles = __styles({
112
117
  }, {
113
118
  d: [".ftuwxu6{display:inline-flex;}", ".f4d9j23{justify-content:center;}", [".fwzfryc{grid-area:button;}", {
114
119
  p: -1
115
- }], ".f1tmlkn4{position:initial;}", ".f19g0ac{z-index:1;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".fwzfryc{grid-area:button;}", {
120
+ }], ".f1tmlkn4{position:initial;}", ".f19g0ac{z-index:1;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".fwzfryc{grid-area:button;}", {
116
121
  p: -1
117
122
  }], ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
118
123
  p: -1
119
- }], ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"]
124
+ }], ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"],
125
+ m: [["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
126
+ m: "(forced-colors: active)"
127
+ }]]
120
128
  });
121
129
  const useRootNextStyles = __styles({
122
130
  root: {
@@ -147,48 +155,76 @@ const useRootNextStyles = __styles({
147
155
  g2u3we: 0,
148
156
  icvyot: 0,
149
157
  B4j52fo: 0,
150
- irswps: "f3bhgqh",
158
+ irswps: "f88035w",
151
159
  qhf8xq: "f10pi13n",
152
160
  Bfpq7zp: 0,
153
161
  g9k6zt: 0,
154
162
  Bn4voq9: 0,
155
- giviqs: "f1pz6nmm",
156
- j6ew2k: "f43rluz"
163
+ giviqs: "f1m9av4t",
164
+ j6ew2k: "f1nlh5rk",
165
+ Bcq6wej: "fjq791v",
166
+ Jcjdmf: ["fkq2p2y", "f1sehlss"],
167
+ sc4o1m: "f11odvng",
168
+ Bosien3: ["f1sehlss", "fkq2p2y"],
169
+ B0a1hpu: "f12mm4ns"
157
170
  },
158
171
  canvas: {
159
172
  Bf4jedk: "f12clzc2",
160
173
  Bqenvij: "fbhnoac"
161
174
  },
162
175
  sidecar: {
163
- Bf4jedk: "fwbmr0d",
164
- Bqenvij: "f1d2rq10"
176
+ Bf4jedk: "f107v6xj",
177
+ Bqenvij: "fxldao9"
165
178
  },
166
179
  notSending: {
167
180
  Bmdhgnd: "fiaw31n",
168
- yc1b9o: "f7x9b1s",
181
+ Buhwtog: "fmv7hed",
182
+ Bsyoesm: "f10g5jnj",
183
+ B5xjowy: "f1hzts53",
169
184
  f30giq: "f3l45fr"
170
185
  },
171
186
  notSendingDictationActive: {
172
187
  Bmdhgnd: "fkhxdak",
188
+ Buhwtog: "fmv7hed",
173
189
  jhc297: "f1dxmfzy",
190
+ B885nwu: "f175mo2",
174
191
  f30giq: "f1zsivl",
175
192
  Ba808g4: "f50srwi"
176
193
  },
177
194
  sending: {
178
195
  Bmdhgnd: "f1hzdlu9",
196
+ Buhwtog: "fmv7hed",
179
197
  uj1ttc: "fe9pnmy",
198
+ E4wjbi: "f18cpvo8",
180
199
  f30giq: "f876z59",
181
200
  Bssu2nw: "fqsoy9w"
182
201
  }
183
202
  }, {
184
203
  d: [".f13qh94s{display:grid;}", ".f9o42qa{grid-template-areas:\"button\";}", ".f1u7ey36{grid-template-rows:1fr;}", ".f1c2z91y{grid-template-columns:1fr;}", ".f1oiokrs{justify-items:center;}", ".f122n59{align-items:center;}", [".fv5o1b5{padding:var(--spacingVerticalNone);}", {
185
204
  p: -1
186
- }], [".f3bhgqh{border:none;}", {
205
+ }], [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
187
206
  p: -2
188
- }], ".f10pi13n{position:relative;}", [".f1pz6nmm[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}", {
207
+ }], ".f10pi13n{position:relative;}", [".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}", {
189
208
  p: -1
190
- }], ".f43rluz[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", ".f12clzc2{min-width:40px;}", ".fbhnoac{height:40px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}"],
191
- h: [".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}", ".f7x9b1s:hover .fai-SendButton__sendIcon,.f7x9b1s:hover.fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}", ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}", ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}", ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"],
209
+ }], ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}", ".f12clzc2{min-width:40px;}", ".fbhnoac{height:40px;}", ".f107v6xj{min-width:28px;}", ".fxldao9{height:28px;}"],
210
+ m: [["@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}", {
211
+ m: "(forced-colors: active)"
212
+ }], ["@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}", {
213
+ m: "(forced-colors: active)"
214
+ }], ["@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}", {
215
+ m: "(forced-colors: active)"
216
+ }], ["@media (forced-colors: active){.f12mm4ns .fai-SendButton__stopBackground{background-color:Highlight;}}", {
217
+ m: "(forced-colors: active)"
218
+ }], ["@media (forced-colors: active){.fmv7hed:hover .fai-SendButton__stopBackground{background-color:HighlightText;}}", {
219
+ m: "(forced-colors: active)"
220
+ }], ["@media (forced-colors: active){.f1hzts53:hover .fai-SendButton__sendIcon,.f1hzts53:hover .fai-SendButton__stopIcon{color:Highlight;}}", {
221
+ m: "(forced-colors: active)"
222
+ }], ["@media (forced-colors: active){.f175mo2:hover .fai-SendButton__sendIcon{color:Highlight;}}", {
223
+ m: "(forced-colors: active)"
224
+ }], ["@media (forced-colors: active){.f18cpvo8:hover .fai-SendButton__stopIcon{color:Highlight;}}", {
225
+ m: "(forced-colors: active)"
226
+ }]],
227
+ h: [".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}", ".f10g5jnj:hover .fai-SendButton__sendIcon,.f10g5jnj:hover .fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}", ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}", ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}", ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}", ".fe9pnmy:hover .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Hover);}"],
192
228
  a: [".f3l45fr:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundPressed);}", ".f1zsivl:active .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundPressed);}", ".f50srwi:active .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Pressed);}", ".f876z59:active .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Pressed);}", ".fqsoy9w:active .fai-SendButton__stopIcon{color:var(--colorBrandForeground2Pressed);}"]
193
229
  });
194
230
  /**
@@ -212,7 +248,7 @@ export const useSendButtonStyles_unstable = state => {
212
248
  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
213
249
  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);
214
250
  if (state.sendIcon) {
215
- 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);
251
+ state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
216
252
  }
217
253
  if (state.stopIcon) {
218
254
  state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
package/lib/components/SendButton/useSendButtonStyles.styles.js.map CHANGED
@@ -1 +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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"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\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 '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","shorthands","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","baseIconButtonSidecar","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","outline","boxShadow","colorStrokeFocus2","borderColor","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/components/SendButton/useSendButtonStyles.styles.raw.js CHANGED
@@ -1,4 +1,4 @@
1
- import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle } from '@fluentui/react-components';
1
+ import { makeStyles, mergeClasses, useButtonStyles_unstable, createCustomFocusIndicatorStyle, shorthands } from '@fluentui/react-components';
2
2
  import { tokens } from '@fluentui-copilot/tokens';
3
3
  export const sendButtonClassNames = {
4
4
  root: 'fai-SendButton',
@@ -53,7 +53,14 @@ const useNextStyles = makeStyles({
53
53
  gridArea: 'button',
54
54
  position: 'initial',
55
55
  zIndex: 1,
56
- color: tokens.colorNeutralForegroundOnBrand
56
+ color: tokens.colorNeutralForegroundOnBrand,
57
+ '@media (forced-colors: active)': {
58
+ color: 'HighlightText'
59
+ }
60
+ },
61
+ baseIconButtonSidecar: {
62
+ width: '16px',
63
+ height: '16px'
57
64
  },
58
65
  dictationActive: {
59
66
  color: tokens.colorNeutralForeground2
@@ -93,28 +100,40 @@ const useRootNextStyles = makeStyles({
93
100
  justifyItems: 'center',
94
101
  alignItems: 'center',
95
102
  padding: tokens.spacingVerticalNone,
96
- border: 'none',
103
+ border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
97
104
  position: 'relative',
98
105
  ...createCustomFocusIndicatorStyle({
99
- outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
100
- boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}`
101
- })
106
+ outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,
107
+ boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`
108
+ }),
109
+ '@media (forced-colors: active)': {
110
+ ...shorthands.borderColor('Highlight'),
111
+ [`& .${sendButtonClassNames.stopBackground}`]: {
112
+ backgroundColor: 'Highlight'
113
+ }
114
+ }
102
115
  },
103
116
  canvas: {
104
117
  minWidth: '40px',
105
118
  height: '40px'
106
119
  },
107
120
  sidecar: {
108
- minWidth: '32px',
109
- height: '32px'
121
+ minWidth: '28px',
122
+ height: '28px'
110
123
  },
111
124
  notSending: {
112
125
  ':hover': {
113
126
  [`& .${sendButtonClassNames.stopBackground}`]: {
114
- backgroundColor: tokens.colorBrandBackgroundHover
127
+ backgroundColor: tokens.colorBrandBackgroundHover,
128
+ '@media (forced-colors: active)': {
129
+ backgroundColor: 'HighlightText'
130
+ }
115
131
  },
116
- [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
117
- color: tokens.colorNeutralForegroundOnBrand
132
+ [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {
133
+ color: tokens.colorNeutralForegroundOnBrand,
134
+ '@media (forced-colors: active)': {
135
+ color: 'Highlight'
136
+ }
118
137
  }
119
138
  },
120
139
  ':active': {
@@ -126,10 +145,16 @@ const useRootNextStyles = makeStyles({
126
145
  notSendingDictationActive: {
127
146
  ':hover': {
128
147
  [`& .${sendButtonClassNames.stopBackground}`]: {
129
- backgroundColor: tokens.colorSubtleBackgroundHover
148
+ backgroundColor: tokens.colorSubtleBackgroundHover,
149
+ '@media (forced-colors: active)': {
150
+ backgroundColor: 'HighlightText'
151
+ }
130
152
  },
131
153
  [`& .${sendButtonClassNames.sendIcon}`]: {
132
- color: tokens.colorNeutralForeground2Hover
154
+ color: tokens.colorNeutralForeground2Hover,
155
+ '@media (forced-colors: active)': {
156
+ color: 'Highlight'
157
+ }
133
158
  }
134
159
  },
135
160
  ':active': {
@@ -144,10 +169,16 @@ const useRootNextStyles = makeStyles({
144
169
  sending: {
145
170
  ':hover': {
146
171
  [`& .${sendButtonClassNames.stopBackground}`]: {
147
- backgroundColor: tokens.colorBrandBackground2Hover
172
+ backgroundColor: tokens.colorBrandBackground2Hover,
173
+ '@media (forced-colors: active)': {
174
+ backgroundColor: 'HighlightText'
175
+ }
148
176
  },
149
177
  [`& .${sendButtonClassNames.stopIcon}`]: {
150
- color: tokens.colorBrandForeground2Hover
178
+ color: tokens.colorBrandForeground2Hover,
179
+ '@media (forced-colors: active)': {
180
+ color: 'Highlight'
181
+ }
151
182
  }
152
183
  },
153
184
  ':active': {
@@ -172,7 +203,7 @@ const useRootNextStyles = makeStyles({
172
203
  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
173
204
  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
205
  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);
206
+ state.sendIcon.className = mergeClasses(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
176
207
  }
177
208
  if (state.stopIcon) {
178
209
  state.stopIcon.className = mergeClasses(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
package/lib/components/SendButton/useSendButtonStyles.styles.raw.js.map CHANGED
@@ -1 +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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"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\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 '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","shorthands","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","baseIconButtonSidecar","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","outline","boxShadow","colorStrokeFocus2","borderColor","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/useSendButton.js CHANGED
@@ -40,7 +40,7 @@ const useSendButton_unstable = (props, ref)=>{
40
40
  }, finalRef);
41
41
  const icon = (()=>{
42
42
  if (designVersion === 'next') {
43
- return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight24Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight20Filled, null);
43
+ return mode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight24Filled, null) : /*#__PURE__*/ _react.createElement(_reacticons.ArrowRight16Filled, null);
44
44
  } else {
45
45
  if (props.isSendIconFilled || isButtonMotionRunning) {
46
46
  return /*#__PURE__*/ _react.createElement(_reacticons.SendFilled, null);
package/lib-commonjs/components/SendButton/useSendButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSendButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonProps } from '@fluentui/react-components';\nimport { slot, useButton_unstable, useMergedRefs } from '@fluentui/react-components';\nimport type { SendButtonProps, SendButtonState } from './SendButton.types';\n\nimport { CircleButtonMotion, SendButtonMotion, StopButtonMotion } from './buttonMotion';\nimport {\n bundleIcon,\n SendFilled,\n SendRegular,\n Stop16Filled,\n ArrowRight24Filled,\n Stop20Filled,\n ArrowRight20Filled,\n} from '@fluentui/react-icons';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\n\nconst SendIcon = bundleIcon(SendFilled, SendRegular);\n\n/**\n * Create the state required to render SendButton.\n *\n * The returned state can be modified with hooks such as useSendButtonStyles_unstable,\n * before being passed to renderSendButton_unstable.\n *\n * @param props - props from this instance of SendButton\n * @param ref - reference to root HTMLElement of SendButton\n */\nexport const useSendButton_unstable = (\n props: SendButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): SendButtonState => {\n /** Used to apply/remove styles when button is animating */\n const [isSendMotionRunning, setIsSendMotionRunning] = React.useState(false);\n const [isStopMotionRunning, setIsStopMotionRunning] = React.useState(false);\n const isButtonMotionRunning = isSendMotionRunning || isStopMotionRunning;\n\n const designVersion = useDesignVersion(props.designVersion);\n const mode = useCopilotMode(props.mode);\n\n const [visible, setVisible] = React.useState(false);\n const mountRef = React.useCallback((elem: HTMLElement | null) => {\n if (elem) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n }, []);\n const finalRef = useMergedRefs(ref, mountRef);\n const buttonState = useButton_unstable(\n {\n shape: designVersion === 'next' ? 'circular' : undefined,\n ...(props as ButtonProps),\n appearance: 'transparent',\n 'aria-disabled': props.disabled ? true : undefined,\n type: 'submit',\n },\n finalRef,\n );\n\n const icon = (() => {\n if (designVersion === 'next') {\n return mode === 'canvas' ? <ArrowRight24Filled /> : <ArrowRight20Filled />;\n } else {\n if (props.isSendIconFilled || isButtonMotionRunning) {\n return <SendFilled />;\n } else {\n return <SendIcon />;\n }\n }\n })();\n\n const state: SendButtonState = {\n ...buttonState,\n components: {\n root: 'button',\n sendIcon: 'span',\n stopIcon: 'span',\n stopBackground: 'div',\n sendButtonMotion: SendButtonMotion as React.ComponentType,\n stopButtonMotion: StopButtonMotion as React.ComponentType,\n stopBackgroundMotion: CircleButtonMotion as React.ComponentType,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","props","ref","isSendMotionRunning","setIsSendMotionRunning","React","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","useDesignVersion","mode","useCopilotMode","visible","setVisible","mountRef","useCallback","elem","finalRef","useMergedRefs","buttonState","useButton_unstable","shape","undefined","appearance","disabled","type","icon","createElement","ArrowRight24Filled","ArrowRight20Filled","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","SendButtonMotion","stopButtonMotion","StopButtonMotion","stopBackgroundMotion","CircleButtonMotion","slot","always","elementType","defaultProps","children","optional","Stop20Filled","Stop16Filled","renderByDefault","presenceMotionSlot","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 ArrowRight16Filled,\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 /> : <ArrowRight16Filled />;\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,\n stopButtonMotion: StopButtonMotion,\n stopBackgroundMotion: CircleButtonMotion,\n },\n root: buttonState.root,\n sendIcon: slot.always(props.sendIcon, {\n elementType: 'span',\n defaultProps: {\n children: icon,\n },\n }),\n stopIcon: slot.optional(props.stopIcon, {\n elementType: 'span',\n defaultProps: {\n children: designVersion === 'next' ? mode === 'canvas' ? <Stop20Filled /> : <Stop16Filled /> : <Stop16Filled />,\n },\n renderByDefault: true,\n }),\n stopBackground: slot.always(props.stopBackground, { elementType: 'div' }),\n sendButtonMotion: presenceMotionSlot<{}>(props.sendButtonMotion, {\n elementType: SendButtonMotion,\n defaultProps: {\n visible: !props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsSendMotionRunning(false),\n onMotionStart: () => setIsSendMotionRunning(true),\n },\n }),\n stopButtonMotion: presenceMotionSlot<{}>(props.stopButtonMotion, {\n elementType: StopButtonMotion,\n defaultProps: {\n visible: props.isSending,\n unmountOnExit: true,\n onMotionFinish: () => setIsStopMotionRunning(false),\n onMotionStart: () => setIsStopMotionRunning(true),\n },\n }),\n stopBackgroundMotion: presenceMotionSlot<{}>(props.stopBackgroundMotion, {\n elementType: CircleButtonMotion,\n defaultProps: {\n visible: designVersion === 'next' ? visible : props.isSending,\n unmountOnExit: true,\n },\n }),\n isButtonMotionRunning,\n isDictationActive: props.isDictationActive ?? false,\n isSendIconFilled: props.isSendIconFilled,\n isSending: props.isSending,\n designVersion,\n mode,\n };\n\n return state;\n};\n"],"names":["useSendButton_unstable","SendIcon","bundleIcon","SendFilled","SendRegular","props","ref","isSendMotionRunning","setIsSendMotionRunning","React","useState","isStopMotionRunning","setIsStopMotionRunning","isButtonMotionRunning","designVersion","useDesignVersion","mode","useCopilotMode","visible","setVisible","mountRef","useCallback","elem","finalRef","useMergedRefs","buttonState","useButton_unstable","shape","undefined","appearance","disabled","type","icon","createElement","ArrowRight24Filled","ArrowRight16Filled","isSendIconFilled","state","components","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","SendButtonMotion","stopButtonMotion","StopButtonMotion","stopBackgroundMotion","CircleButtonMotion","slot","always","elementType","defaultProps","children","optional","Stop20Filled","Stop16Filled","renderByDefault","presenceMotionSlot","isSending","unmountOnExit","onMotionFinish","onMotionStart","isDictationActive"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js CHANGED
@@ -114,7 +114,12 @@ const useNextStyles = (0, _reactcomponents.__styles)({
114
114
  Bq1tomu: "fwzfryc",
115
115
  qhf8xq: "f1tmlkn4",
116
116
  Bj3rh1h: "f19g0ac",
117
- sj55zd: "f1phragk"
117
+ sj55zd: "f1phragk",
118
+ B7iucu3: "fqc85l4"
119
+ },
120
+ baseIconButtonSidecar: {
121
+ a9b677: "fjw5fx7",
122
+ Bqenvij: "fd461yt"
118
123
  },
119
124
  dictationActive: {
120
125
  sj55zd: "fkfq4zb"
@@ -165,6 +170,8 @@ const useNextStyles = (0, _reactcomponents.__styles)({
165
170
  ".f1tmlkn4{position:initial;}",
166
171
  ".f19g0ac{z-index:1;}",
167
172
  ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
173
+ ".fjw5fx7{width:16px;}",
174
+ ".fd461yt{height:16px;}",
168
175
  ".fkfq4zb{color:var(--colorNeutralForeground2);}",
169
176
  ".faj9fo0{color:var(--colorBrandForeground2);}",
170
177
  [
@@ -186,6 +193,14 @@ const useNextStyles = (0, _reactcomponents.__styles)({
186
193
  ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
187
194
  ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
188
195
  ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}"
196
+ ],
197
+ m: [
198
+ [
199
+ "@media (forced-colors: active){.fqc85l4{color:HighlightText;}}",
200
+ {
201
+ m: "(forced-colors: active)"
202
+ }
203
+ ]
189
204
  ]
190
205
  });
191
206
  const useRootNextStyles = (0, _reactcomponents.__styles)({
@@ -217,36 +232,53 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
217
232
  g2u3we: 0,
218
233
  icvyot: 0,
219
234
  B4j52fo: 0,
220
- irswps: "f3bhgqh",
235
+ irswps: "f88035w",
221
236
  qhf8xq: "f10pi13n",
222
237
  Bfpq7zp: 0,
223
238
  g9k6zt: 0,
224
239
  Bn4voq9: 0,
225
- giviqs: "f1pz6nmm",
226
- j6ew2k: "f43rluz"
240
+ giviqs: "f1m9av4t",
241
+ j6ew2k: "f1nlh5rk",
242
+ Bcq6wej: "fjq791v",
243
+ Jcjdmf: [
244
+ "fkq2p2y",
245
+ "f1sehlss"
246
+ ],
247
+ sc4o1m: "f11odvng",
248
+ Bosien3: [
249
+ "f1sehlss",
250
+ "fkq2p2y"
251
+ ],
252
+ B0a1hpu: "f12mm4ns"
227
253
  },
228
254
  canvas: {
229
255
  Bf4jedk: "f12clzc2",
230
256
  Bqenvij: "fbhnoac"
231
257
  },
232
258
  sidecar: {
233
- Bf4jedk: "fwbmr0d",
234
- Bqenvij: "f1d2rq10"
259
+ Bf4jedk: "f107v6xj",
260
+ Bqenvij: "fxldao9"
235
261
  },
236
262
  notSending: {
237
263
  Bmdhgnd: "fiaw31n",
238
- yc1b9o: "f7x9b1s",
264
+ Buhwtog: "fmv7hed",
265
+ Bsyoesm: "f10g5jnj",
266
+ B5xjowy: "f1hzts53",
239
267
  f30giq: "f3l45fr"
240
268
  },
241
269
  notSendingDictationActive: {
242
270
  Bmdhgnd: "fkhxdak",
271
+ Buhwtog: "fmv7hed",
243
272
  jhc297: "f1dxmfzy",
273
+ B885nwu: "f175mo2",
244
274
  f30giq: "f1zsivl",
245
275
  Ba808g4: "f50srwi"
246
276
  },
247
277
  sending: {
248
278
  Bmdhgnd: "f1hzdlu9",
279
+ Buhwtog: "fmv7hed",
249
280
  uj1ttc: "fe9pnmy",
281
+ E4wjbi: "f18cpvo8",
250
282
  f30giq: "f876z59",
251
283
  Bssu2nw: "fqsoy9w"
252
284
  }
@@ -265,27 +297,77 @@ const useRootNextStyles = (0, _reactcomponents.__styles)({
265
297
  }
266
298
  ],
267
299
  [
268
- ".f3bhgqh{border:none;}",
300
+ ".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
269
301
  {
270
302
  p: -2
271
303
  }
272
304
  ],
273
305
  ".f10pi13n{position:relative;}",
274
306
  [
275
- ".f1pz6nmm[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}",
307
+ ".f1m9av4t[data-fui-focus-visible]{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke) inset;}",
276
308
  {
277
309
  p: -1
278
310
  }
279
311
  ],
280
- ".f43rluz[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}",
312
+ ".f1nlh5rk[data-fui-focus-visible]{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2);}",
281
313
  ".f12clzc2{min-width:40px;}",
282
314
  ".fbhnoac{height:40px;}",
283
- ".fwbmr0d{min-width:32px;}",
284
- ".f1d2rq10{height:32px;}"
315
+ ".f107v6xj{min-width:28px;}",
316
+ ".fxldao9{height:28px;}"
317
+ ],
318
+ m: [
319
+ [
320
+ "@media (forced-colors: active){.fjq791v{border-top-color:Highlight;}}",
321
+ {
322
+ m: "(forced-colors: active)"
323
+ }
324
+ ],
325
+ [
326
+ "@media (forced-colors: active){.f1sehlss{border-left-color:Highlight;}.fkq2p2y{border-right-color:Highlight;}}",
327
+ {
328
+ m: "(forced-colors: active)"
329
+ }
330
+ ],
331
+ [
332
+ "@media (forced-colors: active){.f11odvng{border-bottom-color:Highlight;}}",
333
+ {
334
+ m: "(forced-colors: active)"
335
+ }
336
+ ],
337
+ [
338
+ "@media (forced-colors: active){.f12mm4ns .fai-SendButton__stopBackground{background-color:Highlight;}}",
339
+ {
340
+ m: "(forced-colors: active)"
341
+ }
342
+ ],
343
+ [
344
+ "@media (forced-colors: active){.fmv7hed:hover .fai-SendButton__stopBackground{background-color:HighlightText;}}",
345
+ {
346
+ m: "(forced-colors: active)"
347
+ }
348
+ ],
349
+ [
350
+ "@media (forced-colors: active){.f1hzts53:hover .fai-SendButton__sendIcon,.f1hzts53:hover .fai-SendButton__stopIcon{color:Highlight;}}",
351
+ {
352
+ m: "(forced-colors: active)"
353
+ }
354
+ ],
355
+ [
356
+ "@media (forced-colors: active){.f175mo2:hover .fai-SendButton__sendIcon{color:Highlight;}}",
357
+ {
358
+ m: "(forced-colors: active)"
359
+ }
360
+ ],
361
+ [
362
+ "@media (forced-colors: active){.f18cpvo8:hover .fai-SendButton__stopIcon{color:Highlight;}}",
363
+ {
364
+ m: "(forced-colors: active)"
365
+ }
366
+ ]
285
367
  ],
286
368
  h: [
287
369
  ".fiaw31n:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackgroundHover);}",
288
- ".f7x9b1s:hover .fai-SendButton__sendIcon,.f7x9b1s:hover.fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}",
370
+ ".f10g5jnj:hover .fai-SendButton__sendIcon,.f10g5jnj:hover .fai-SendButton__stopIcon{color:var(--colorNeutralForegroundOnBrand);}",
289
371
  ".fkhxdak:hover .fai-SendButton__stopBackground{background-color:var(--colorSubtleBackgroundHover);}",
290
372
  ".f1dxmfzy:hover .fai-SendButton__sendIcon{color:var(--colorNeutralForeground2Hover);}",
291
373
  ".f1hzdlu9:hover .fai-SendButton__stopBackground{background-color:var(--colorBrandBackground2Hover);}",
@@ -309,7 +391,7 @@ const useSendButtonStyles_unstable = (state)=>{
309
391
  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
310
392
  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);
311
393
  if (state.sendIcon) {
312
- 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);
394
+ state.sendIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
313
395
  }
314
396
  if (state.stopIcon) {
315
397
  state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.js.map CHANGED
@@ -1 +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","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","__styles","display","width","minWidth","height","alignItems","padding","Byoj8tv","baseIconButton","position","tokens","mc9l5x","disabled","color","Bqenvij","iconFilled","borderRadius","Beyfa6y","Bbmb7ep","useNextStyles","justifyContent","gridArea","colorNeutralForegroundOnBrand","p","dictationActive","sendIconFilled","stopIconFilled","Brf1p80","backgroundColor","Bj3rh1h","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Bw0ie65","Br312pm","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","border","createCustomFocusIndicatorStyle","sidecar","De3pzq","wkccdc","notSendingDictationActive","h3c5rm","sending","Bf4jedk","Bmdhgnd","isDictationActive","yc1b9o","styles","f30giq","nextStyles","sendIconFilledStyle","stopIconFilledStyle","state","uj1ttc","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,oBAAAA;eAAAA;;;;;;iCAPoB;AAO1B,MAAMA,uBAAwD;UACnEC;cACAC;cACAC;oBACAC;sBACAC;sBACAC;0BACAC;AACF;AAEA;;CAEC,SAECN,YAAMO,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,QAAAA;gBACEC;gBACAJ;iBACAJ;;oBAEUS;gBACVN;iBACAF;QACFS,QAAA;QAEAC,SAAAA;iBACEC;QACFC,SAAA;QAEAC,QAAAA;;cAEE;gBACEF;;gBAEJ;QAEAjB,QAAAA;iBACEa;;oBAEQ;gBACRO;gBACA;QAEFF,SAAA;QACFG,SAAA;QAEAC,SAAMC;QACJX,SAAAA;iBACEP;gBACAmB;gBACAC;;;;;QAGcC;QAA6B;QAAA;QAAA;QAAA;YAAA;YAAA;gBAC7CC,GAAA,CAAA;;SAEAC;QAAAA;QAAiB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACfX;;SACF;QAAA;KAAA;OAEAY;QAAAA;KAAgB;;MAEhBN,gBAAAnB,IAAAA,yBAAA,EAAA;oBAEA0B;gBACEb;QACFc,SAAA;QAEA/B,SAAAA;iBACEyB;gBACAjB;gBACAF;iBACAc;gBACAY;QACFC,SAAA;QAEAC,QAAAA;;qBAEA;QAEAC,QAAAA;;oBAEA;QACAnB,QAAAA;;oBAEA;QACAoB,QAAAA;;oBAEA;QACFC,SAAA;QAEAC,SAAMC;QACJ1C,QAAM;gBACJQ;iBACAmC;iBACAC;gBACAC;iBACAC;iBACAlC;iBACAC;iBACAkC;gBACA/B;gBACGgC;;2BAEW;gBACZ;;mCAGI;gBACNtC;;cAEF;QAEAuC,QAAAA;;4BAEU;QACVC,QAAA;;;;;QAIgC/C;QAAmB;YAAA;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;;;;;QAGgB0B;QAAAA;YAA6B;YAAA;;;;;QAE/C;QAAA;QAAA;QAAA;KAAA;;0BAES9B,IAAAA,yBAAAA,EAAAA;;gBAEP;gBACF;QACFoD,QAAA;QACAC,SAAAA;iBACE;iBACG;;gBAED;gBAEA;;iBAEA;iBACF;iBACA;gBACE;;iBAEA;gBACA;;gBAEA;gBACF;QACFC,QAAA;QAEAC,QAAAA;iBACE;gBACE;;gBAEA;iBACC;;gBAED;iBACF;gBACA;iBACG;;gBAED;;;iBAGA;iBACF;;IAEJL,SAAA;QAEAM,SAAA;;IAEC;gBAEC;QACAC,SAAQC;QAERC,QAAMC;QACNC,QAAMC;;+BAGAC;QACNN,SAAMO;QAENC,QAAMhE;QAgBN4D,QAAII;iBACFA;;aASEA;iBACFA;QAMFC,QAAA;QAEAL,QAAII;iBACFA;;;OAWFE;QAAAA;QAAyB;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBAAE;;;;;YAAsB;;;;;QAA6B;YAAA;YAAA;oBAAO;;;;QAAa;QAAA;QAAA;QAAA;KAAA;OAAM;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;OAExG;QAAA;QAAOF;QAAAA;QAAAA;QAAAA;KAAAA;AACT"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\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 '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","__styles","display","width","minWidth","height","alignItems","padding","Byoj8tv","baseIconButton","position","tokens","mc9l5x","disabled","color","Bqenvij","iconFilled","borderRadius","Beyfa6y","Bbmb7ep","useNextStyles","justifyContent","gridArea","colorNeutralForegroundOnBrand","baseIconButtonSidecar","dictationActive","Bw0ie65","sendIconFilled","Ijaq50","stopIconFilled","Bj3rh1h","backgroundColor","stopBackgroundSending","stopBackgroundDictationActive","stopBackgroundDisabled","Br312pm","nk6f5a","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","border","createCustomFocusIndicatorStyle","outline","De3pzq","p","sidecar","notSending","oivjwe","notSendingDictationActive","Bosien3","sending","Ba808g4","Buhwtog","uj1ttc","E4wjbi","isDictationActive","f30giq","styles","Bssu2nw","nextStyles","designVersion","state","stopIconFilledStyle","className","m","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAYaA,oBAAAA;eAAAA;;;;;;iCAPD;AAOL,MAAMA,uBAAwD;UACnEC;cACAC;cACAC;oBACAC;sBACAC;sBACAC;0BACAC;AACF;AAEA;;CAEC,SAECN,YAAMO,IAAAA,yBAAA,EAAA;UACJC;gBACAC;gBACAC;iBACAC;iBACAC;iBACAC;QACFC,SAAA;QAEAC,QAAAA;gBACEC;gBACAJ;iBACAJ;;oBAEUS;gBACVN;iBACAF;QACFS,QAAA;QAEAC,SAAAA;iBACEC;QACFC,SAAA;QAEAC,QAAAA;;cAEE;gBACEF;;gBAEJ;QAEAjB,QAAAA;iBACEa;;oBAEQ;gBACRO;gBACA;QAEFF,SAAA;QACFG,SAAA;QAEAC,SAAMC;QACJX,SAAAA;iBACEP;gBACAmB;gBACAC;;;;;QAGcC;QAA6B;QAAA;QAAA;QAAA;YAAA;YAAA;oBAE3C;;;;QACS;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACT;;SACF;QAAA;KAAA;OAEAC;QAAAA;KAAuB;;sBAEbvB,IAAAA,yBAAA,EAAA;oBACV;QAEAwB,QAAAA;iBACEX;QACFY,SAAA;QAEAC,SAAAA;gBACEb;QACFc,QAAA;QAEAC,SAAAA;gBACEf;QACFgB,SAAA;QAEAjC,QAAAA;iBACEyB;;2BAEO;gBACPL;iBACAc;;qBAGFC;gBACED;;oBAGFE;gBACEF;;oBAEQ;gBACRjB;;oBAEFoB;iBACEH;QACFI,SAAA;QACFC,QAAA;QAEAR,QAAMS;QACJ3C,SAAM;iBACJQ;gBACAoC;iBACAC;iBACAC;iBACAC;iBACAnC;gBACAC;gBACAmC;;2BAEGC;gBACDC;;mCAEA;gBAEF;;cAEE;;;4BAGF;QACFC,QAAA;;;;;QAIU;QAAA;YAAA;YAAA;gBACVC,GAAA,CAAA;;SAEAC;QAAAA;QAAS;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACP3C;;;;QACQ;QAAA;YAAA;YAAA;gBACV0C,GAAA,CAAA;;SAEAE;QAAAA;QAAY;QAAA;QAAA;QAAA;KAAA;;;;YACA;;;;;;0BAKJjB,IAAAA,yBAAAA,EAAAA;;gBAEJ;gBAEA;;;;;iBAMA;gBACF;gBACA;gBACE;;iBAEA;iBACF;QACFkB,QAAA;QACAC,SAAAA;iBACE;gBACE;;;;;gBAMA;iBAEC;;;;;gBAMD;gBACF;iBACA;gBACE;;gBAEA;gBACA;;gBAEA;YAAA;YAAA;SAAA;gBACF;QACFC,SAAA;YAAA;YAAA;SAAA;QAEAC,SAAS;;;;;;;iBAQL;iBACC;;;;;iBAMD;iBACF;gBACA;;+BAEIrB;iBACF;iBACC;;iBAED;gBACF;QACFsB,SAAA;IACF;IAEAD,SAAA;;QAGAE,SAAO;QACLC,QAAA;QACAC,QAAQC;QAERC,QAAMC;QACNC,SAAMC;;;OAIN;QAAA;QAA4BC;QAAsCjC;QAAkC;QAAA;QAAA;QAAA;YAAA;YAAA;gBAEpGkC,GAAAA,CAAAA;;SAgBA;QAAA;YAAA;YAAoB;oBAClBA;;SAQF;QAAA;QAAA;YAAA;YAAA;gBAEAjB,GAAA,CAAIiB;;;;QAG2BF;QAA4BF;QACvDK;QACeC;KAAS;OAE5B;QAAA;YAAA;YAAA;gBAEAC,GAAA;;;;;YAG+BL;gBAM/BK,GAAA;;SAEA;QAAA;YAAA;YAA8B;gBAC9BC,GAAAA;;;;;YAAmC;;;;;;YAAmC;;;;;;YAAe;;;SAAmB;QAAA;YAAA;YAAA;gBAExGD,GAAA;YACA;SAAA;QAAA;YAAA;YAAA"}
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js CHANGED
@@ -71,7 +71,14 @@ const useNextStyles = (0, _reactcomponents.makeStyles)({
71
71
  gridArea: 'button',
72
72
  position: 'initial',
73
73
  zIndex: 1,
74
- color: _tokens.tokens.colorNeutralForegroundOnBrand
74
+ color: _tokens.tokens.colorNeutralForegroundOnBrand,
75
+ '@media (forced-colors: active)': {
76
+ color: 'HighlightText'
77
+ }
78
+ },
79
+ baseIconButtonSidecar: {
80
+ width: '16px',
81
+ height: '16px'
75
82
  },
76
83
  dictationActive: {
77
84
  color: _tokens.tokens.colorNeutralForeground2
@@ -111,28 +118,40 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
111
118
  justifyItems: 'center',
112
119
  alignItems: 'center',
113
120
  padding: _tokens.tokens.spacingVerticalNone,
114
- border: 'none',
121
+ border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke}`,
115
122
  position: 'relative',
116
123
  ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
117
- outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorTransparentStroke}`,
118
- boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThick} ${_tokens.tokens.colorStrokeFocus2}`
119
- })
124
+ outline: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorTransparentStroke} inset`,
125
+ boxShadow: `0 0 0 ${_tokens.tokens.strokeWidthThin} ${_tokens.tokens.colorStrokeFocus2}`
126
+ }),
127
+ '@media (forced-colors: active)': {
128
+ ..._reactcomponents.shorthands.borderColor('Highlight'),
129
+ [`& .${sendButtonClassNames.stopBackground}`]: {
130
+ backgroundColor: 'Highlight'
131
+ }
132
+ }
120
133
  },
121
134
  canvas: {
122
135
  minWidth: '40px',
123
136
  height: '40px'
124
137
  },
125
138
  sidecar: {
126
- minWidth: '32px',
127
- height: '32px'
139
+ minWidth: '28px',
140
+ height: '28px'
128
141
  },
129
142
  notSending: {
130
143
  ':hover': {
131
144
  [`& .${sendButtonClassNames.stopBackground}`]: {
132
- backgroundColor: _tokens.tokens.colorBrandBackgroundHover
145
+ backgroundColor: _tokens.tokens.colorBrandBackgroundHover,
146
+ '@media (forced-colors: active)': {
147
+ backgroundColor: 'HighlightText'
148
+ }
133
149
  },
134
- [`& .${sendButtonClassNames.sendIcon},.${sendButtonClassNames.stopIcon}`]: {
135
- color: _tokens.tokens.colorNeutralForegroundOnBrand
150
+ [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {
151
+ color: _tokens.tokens.colorNeutralForegroundOnBrand,
152
+ '@media (forced-colors: active)': {
153
+ color: 'Highlight'
154
+ }
136
155
  }
137
156
  },
138
157
  ':active': {
@@ -144,10 +163,16 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
144
163
  notSendingDictationActive: {
145
164
  ':hover': {
146
165
  [`& .${sendButtonClassNames.stopBackground}`]: {
147
- backgroundColor: _tokens.tokens.colorSubtleBackgroundHover
166
+ backgroundColor: _tokens.tokens.colorSubtleBackgroundHover,
167
+ '@media (forced-colors: active)': {
168
+ backgroundColor: 'HighlightText'
169
+ }
148
170
  },
149
171
  [`& .${sendButtonClassNames.sendIcon}`]: {
150
- color: _tokens.tokens.colorNeutralForeground2Hover
172
+ color: _tokens.tokens.colorNeutralForeground2Hover,
173
+ '@media (forced-colors: active)': {
174
+ color: 'Highlight'
175
+ }
151
176
  }
152
177
  },
153
178
  ':active': {
@@ -162,10 +187,16 @@ const useRootNextStyles = (0, _reactcomponents.makeStyles)({
162
187
  sending: {
163
188
  ':hover': {
164
189
  [`& .${sendButtonClassNames.stopBackground}`]: {
165
- backgroundColor: _tokens.tokens.colorBrandBackground2Hover
190
+ backgroundColor: _tokens.tokens.colorBrandBackground2Hover,
191
+ '@media (forced-colors: active)': {
192
+ backgroundColor: 'HighlightText'
193
+ }
166
194
  },
167
195
  [`& .${sendButtonClassNames.stopIcon}`]: {
168
- color: _tokens.tokens.colorBrandForeground2Hover
196
+ color: _tokens.tokens.colorBrandForeground2Hover,
197
+ '@media (forced-colors: active)': {
198
+ color: 'Highlight'
199
+ }
169
200
  }
170
201
  },
171
202
  ':active': {
@@ -188,7 +219,7 @@ const useSendButtonStyles_unstable = (state)=>{
188
219
  const stopIconFilledStyle = designVersion === 'next' ? nextStyles.stopIconFilled : styles.iconFilled;
189
220
  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
221
  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);
222
+ state.sendIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.sendIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar, !disabled && designVersion === 'next' && !isSending && isDictationActive && nextStyles.dictationActive, disabled && designVersion === 'next' && nextStyles.disabled, state.sendIcon.className);
192
223
  }
193
224
  if (state.stopIcon) {
194
225
  state.stopIcon.className = (0, _reactcomponents.mergeClasses)(sendButtonClassNames.stopIcon, designVersion === 'next' ? nextStyles.baseIconButton : styles.baseIconButton, stopIconFilledStyle, state.stopIcon.className);
package/lib-commonjs/components/SendButton/useSendButtonStyles.styles.raw.js.map CHANGED
@@ -1 +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","useSendButtonStyles_unstable","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","makeStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","tokens","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","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorTransparentStroke","boxShadow","colorStrokeFocus2","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","mergeClasses","isButtonMotionRunning","useButtonStyles_unstable","components","icon","iconOnly"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSendButtonStyles.styles.ts"],"sourcesContent":["import {\n makeStyles,\n mergeClasses,\n useButtonStyles_unstable,\n createCustomFocusIndicatorStyle,\n shorthands,\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 '@media (forced-colors: active)': {\n color: 'HighlightText',\n },\n },\n\n baseIconButtonSidecar: {\n width: '16px',\n height: '16px',\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: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n position: 'relative',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke} inset`,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}`,\n }),\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('Highlight'),\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: 'Highlight',\n },\n },\n },\n\n canvas: {\n minWidth: '40px',\n height: '40px',\n },\n\n sidecar: {\n minWidth: '28px',\n height: '28px',\n },\n\n notSending: {\n ':hover': {\n [`& .${sendButtonClassNames.stopBackground}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}, & .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n\n [`& .${sendButtonClassNames.sendIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 '@media (forced-colors: active)': {\n backgroundColor: 'HighlightText',\n },\n },\n [`& .${sendButtonClassNames.stopIcon}`]: {\n color: tokens.colorBrandForeground2Hover,\n\n '@media (forced-colors: active)': {\n color: 'Highlight',\n },\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 designVersion === 'next' && mode === 'sidecar' && nextStyles.baseIconButtonSidecar,\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","useSendButtonStyles_unstable","root","sendIcon","stopIcon","stopBackground","sendButtonMotion","stopButtonMotion","stopBackgroundMotion","useStyles","makeStyles","display","width","minWidth","height","alignItems","padding","baseIconButton","position","justifyContent","fontSize","tokens","fontSizeBase500","disabled","color","colorNeutralForegroundDisabled","iconFilled","colorCompoundBrandBackground","colorCompoundBrandBackgroundHover","borderRadius","borderRadiusCircular","backgroundColor","colorBrandBackground2","useNextStyles","gridArea","zIndex","colorNeutralForegroundOnBrand","baseIconButtonSidecar","dictationActive","colorNeutralForeground2","sendIconFilled","stopIconFilled","colorBrandForeground2","colorBrandBackground","stopBackgroundSending","stopBackgroundDictationActive","colorTransparentBackground","stopBackgroundDisabled","colorNeutralBackgroundDisabled","useRootNextStyles","gridTemplateAreas","gridTemplateRows","gridTemplateColumns","justifyItems","spacingVerticalNone","border","strokeWidthThin","colorTransparentStroke","createCustomFocusIndicatorStyle","outline","boxShadow","colorStrokeFocus2","shorthands","borderColor","canvas","sidecar","notSending","colorBrandBackgroundHover","colorBrandBackgroundPressed","notSendingDictationActive","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","sending","colorBrandBackground2Hover","colorBrandForeground2Hover","colorBrandBackground2Pressed","colorBrandForeground2Pressed","state","isDictationActive","isSendIconFilled","isSending","designVersion","mode","styles","nextStyles","rootNextStyles","sendIconFilledStyle","stopIconFilledStyle","className","mergeClasses","isButtonMotionRunning","useButtonStyles_unstable","components","icon","iconOnly"],"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.1.3",
3
+ "version": "0.1.5",
4
4
  "description": "Fluent AI control for the send button used in ChatInput and PromptInput.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,9 +12,9 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "^0.12.3",
15
+ "@fluentui-copilot/react-provider": "^0.12.5",
16
16
  "@fluentui-copilot/react-utilities": "^0.0.10",
17
- "@fluentui-copilot/tokens": "^0.3.12",
17
+ "@fluentui-copilot/tokens": "^0.3.14",
18
18
  "@swc/helpers": "^0.5.1"
19
19
  },
20
20
  "peerDependencies": {