@fluentui-copilot/react-attachments 0.12.0 → 0.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.json +15 -0
  2. package/CHANGELOG.md +10 -1
  3. package/dist/index.d.ts +4 -4
  4. package/lib/components/Attachment/useAttachmentStyles.styles.js +97 -12
  5. package/lib/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
  6. package/lib/components/AttachmentList/AttachmentList.types.js.map +1 -1
  7. package/lib/components/AttachmentList/useAttachmentList.js +3 -0
  8. package/lib/components/AttachmentList/useAttachmentList.js.map +1 -1
  9. package/lib/components/AttachmentList/useAttachmentListStyles.styles.js +19 -2
  10. package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
  11. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +36 -6
  12. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
  13. package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js.map +1 -1
  14. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +4 -1
  15. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
  16. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js +37 -4
  17. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map +1 -1
  18. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js +153 -12
  19. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
  20. package/lib-commonjs/components/AttachmentList/AttachmentList.types.js.map +1 -1
  21. package/lib-commonjs/components/AttachmentList/useAttachmentList.js +3 -0
  22. package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
  23. package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js +21 -1
  24. package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
  25. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +50 -5
  26. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
  27. package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js.map +1 -1
  28. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +4 -1
  29. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
  30. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js +45 -3
  31. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map +1 -1
  32. package/package.json +3 -3
package/CHANGELOG.json CHANGED
@@ -1,6 +1,21 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-attachments",
3
3
  "entries": [
4
+ {
5
+ "date": "Sat, 19 Apr 2025 00:04:01 GMT",
6
+ "tag": "@fluentui-copilot/react-attachments_v0.12.1",
7
+ "version": "0.12.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "estebanmu@microsoft.com",
12
+ "package": "@fluentui-copilot/react-attachments",
13
+ "commit": "30715b3112eff5afe692c88fbbacb43b1f2eb6b3",
14
+ "comment": "feat: Add rocksteady updated styles."
15
+ }
16
+ ]
17
+ }
18
+ },
4
19
  {
5
20
  "date": "Thu, 20 Mar 2025 17:00:44 GMT",
6
21
  "tag": "@fluentui-copilot/react-attachments_v0.11.0",
package/CHANGELOG.md CHANGED
@@ -1,9 +1,18 @@
1
1
  # Change Log - @fluentui-copilot/react-attachments
2
2
 
3
- This log was last generated on Thu, 20 Mar 2025 17:00:44 GMT and should not be manually modified.
3
+ This log was last generated on Sat, 19 Apr 2025 00:04:01 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.12.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.12.1)
8
+
9
+ Sat, 19 Apr 2025 00:04:01 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.11.0..@fluentui-copilot/react-attachments_v0.12.1)
11
+
12
+ ### Patches
13
+
14
+ - feat: Add rocksteady updated styles. ([PR #2937](https://github.com/microsoft/fluentai/pull/2937) by estebanmu@microsoft.com)
15
+
7
16
  ## [0.11.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.11.0)
8
17
 
9
18
  Thu, 20 Mar 2025 17:00:44 GMT
package/dist/index.d.ts CHANGED
@@ -50,7 +50,7 @@ declare type AttachmentListContextValues = {
50
50
  /**
51
51
  * AttachmentList Props
52
52
  */
53
- export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {
53
+ export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & DesignVersion & {
54
54
  /**
55
55
  * Callback fired when an attachment is dismissed.
56
56
  */
@@ -84,7 +84,7 @@ export declare type AttachmentListSlots = {
84
84
  /**
85
85
  * State used in rendering AttachmentList
86
86
  */
87
- export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {
87
+ export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps' | 'designVersion'> & {
88
88
  shouldUseOverflow: boolean;
89
89
  };
90
90
 
@@ -135,7 +135,7 @@ export declare const attachmentOverflowMenuItemClassNames: SlotClassNames<Attach
135
135
  /**
136
136
  * AttachmentOverflowMenuItem Props
137
137
  */
138
- export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;
138
+ export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & DesignVersion & Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;
139
139
 
140
140
  export declare type AttachmentOverflowMenuItemSlots = {
141
141
  root: NonNullable<Slot<typeof MenuItem>>;
@@ -145,7 +145,7 @@ export declare type AttachmentOverflowMenuItemSlots = {
145
145
  /**
146
146
  * State used in rendering AttachmentOverflowMenuItem
147
147
  */
148
- export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {
148
+ export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & Pick<AttachmentOverflowMenuItemProps, 'imageOnly' | 'designVersion'> & {
149
149
  isVisible: boolean;
150
150
  };
151
151
 
package/lib/components/Attachment/useAttachmentStyles.styles.js CHANGED
@@ -136,37 +136,120 @@ const usePrimaryActionNextStyles = __styles({
136
136
  uwmqm3: 0,
137
137
  z189sj: 0,
138
138
  z8tnut: 0,
139
- B0ocmuz: "fpi12dx"
139
+ B0ocmuz: "f1nm7172",
140
+ sshi5w: "f1w5jphr"
140
141
  },
141
142
  sidecar: {
142
143
  Byoj8tv: 0,
143
144
  uwmqm3: 0,
144
145
  z189sj: 0,
145
146
  z8tnut: 0,
146
- B0ocmuz: "fgucwci"
147
+ B0ocmuz: "f1nm7172",
148
+ sshi5w: "f1nxs5xn"
147
149
  }
148
150
  }, {
149
- d: [".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", [".fpi12dx{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
151
+ d: [".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
150
152
  p: -1
151
- }], [".fgucwci{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
153
+ }], ".f1w5jphr{min-height:40px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
152
154
  p: -1
153
- }]]
155
+ }], ".f1nxs5xn{min-height:32px;}"]
154
156
  });
155
157
  const useDismissButtonNextStyles = __styles({
156
158
  root: {
157
159
  B7oj6ja: ["f1el4m67", "f8yange"],
158
- Bbmb7ep: ["fnivh3a", "fc7yr5o"]
160
+ Bbmb7ep: ["fnivh3a", "fc7yr5o"],
161
+ Bi91k9c: "f3p8bqa",
162
+ Bpw4n2g: "f19lmcbl",
163
+ lj723h: "flvvhsy",
164
+ B25qdkm: "fmk53gl",
165
+ zhjwy3: ["f1lxtadh", "f1akhkt"],
166
+ ibv6hh: ["f1ojsxk5", "f5tn483"],
167
+ wvpqe5: ["fjik90z", "fcdblym"]
159
168
  },
160
169
  canvas: {
161
- Bqenvij: "fbhnoac",
170
+ Byoj8tv: 0,
171
+ uwmqm3: 0,
172
+ z189sj: 0,
173
+ z8tnut: 0,
174
+ B0ocmuz: "f1nm7172",
175
+ sshi5w: "f1w5jphr",
162
176
  a9b677: "feqmc2u"
163
177
  },
164
178
  sidecar: {
165
- Bqenvij: "f1d2rq10",
179
+ Byoj8tv: 0,
180
+ uwmqm3: 0,
181
+ z189sj: 0,
182
+ z8tnut: 0,
183
+ B0ocmuz: "f19d5dog",
184
+ sshi5w: "f1nxs5xn",
166
185
  a9b677: "f1szoe96"
167
186
  }
168
187
  }, {
169
- d: [".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".f1d2rq10{height:32px;}", ".f1szoe96{width:32px;}"]
188
+ d: [".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".fjik90z{border-left-style:solid;}", ".fcdblym{border-right-style:solid;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
189
+ p: -1
190
+ }], ".f1w5jphr{min-height:40px;}", ".feqmc2u{width:40px;}", [".f19d5dog{padding:var(--spacingVerticalNone) var(--spacingHorizontalMNudge);}", {
191
+ p: -1
192
+ }], ".f1nxs5xn{min-height:32px;}", ".f1szoe96{width:32px;}"],
193
+ h: [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".f19lmcbl:hover .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2);}"],
194
+ a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"],
195
+ f: [".fmk53gl:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2Hover);}"]
196
+ });
197
+ const usePrimaryDismissNextStyles = __styles({
198
+ sharedStyles: {
199
+ Bgfg5da: 0,
200
+ B9xav0g: 0,
201
+ oivjwe: 0,
202
+ Bn0qgzm: 0,
203
+ B4g9neb: 0,
204
+ zhjwy3: 0,
205
+ wvpqe5: 0,
206
+ ibv6hh: 0,
207
+ u1mtju: 0,
208
+ h3c5rm: 0,
209
+ vrafjx: 0,
210
+ Bekrc4i: 0,
211
+ i8vvqc: 0,
212
+ g2u3we: 0,
213
+ icvyot: 0,
214
+ B4j52fo: 0,
215
+ irswps: "f3bhgqh",
216
+ De3pzq: "f16xq7d1",
217
+ Jwef8y: "f1h648pw",
218
+ ecr2s2: "fwdzr64",
219
+ Bpw7sjs: 0,
220
+ zppij7: 0,
221
+ ajd3u1: 0,
222
+ iqhfy: 0,
223
+ B7b6voy: "f1c9fnza"
224
+ }
225
+ }, {
226
+ d: [[".f3bhgqh{border:none;}", {
227
+ p: -2
228
+ }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"],
229
+ h: [".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"],
230
+ a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"],
231
+ i: [[".f1c9fnza:focus-visible{border-radius:var(--borderRadiusLarge);}", {
232
+ p: -1
233
+ }]]
234
+ });
235
+ const useRootNextStyles = __styles({
236
+ root: {
237
+ Bw0xxkn: 0,
238
+ oeaueh: 0,
239
+ Bpd4iqm: 0,
240
+ Befb4lg: "f1bars0k",
241
+ Beyfa6y: 0,
242
+ Bbmb7ep: 0,
243
+ Btl43ni: 0,
244
+ B7oj6ja: 0,
245
+ Dimara: "f1kijzfu"
246
+ }
247
+ }, {
248
+ d: [[".f1bars0k{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
249
+ p: -1
250
+ }], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
251
+ p: -1
252
+ }]]
170
253
  });
171
254
  /**
172
255
  * Apply styling to the Attachment slots based on the state
@@ -186,6 +269,8 @@ export const useAttachmentStyles_unstable = state => {
186
269
  const smallStyles = useSmallStyles();
187
270
  const primaryActionNextStyles = usePrimaryActionNextStyles();
188
271
  const dismissButtonNextStyles = useDismissButtonNextStyles();
272
+ const primaryDismissNextStyles = usePrimaryDismissNextStyles();
273
+ const rootNextStyles = useRootNextStyles();
189
274
  const {
190
275
  imageOnly,
191
276
  primaryAction,
@@ -193,9 +278,9 @@ export const useAttachmentStyles_unstable = state => {
193
278
  mode,
194
279
  designVersion
195
280
  } = state;
196
- state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
197
- state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
198
- state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
281
+ state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
282
+ state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
283
+ state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
199
284
  if (state.media) {
200
285
  state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
201
286
  }
package/lib/components/Attachment/useAttachmentStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS} calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n },\n\n sidecar: {\n padding: `calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS} calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n height: '40px',\n width: '40px',\n },\n sidecar: {\n height: '32px',\n width: '32px',\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const { imageOnly, primaryAction, size, mode, designVersion } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalS","sidecar","useDismissButtonNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n },\n\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '32px',\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n borderLeftColor: tokens.colorNeutralStroke1,\n borderLeftWidth: tokens.strokeWidthThin,\n borderLeftStyle: 'solid',\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n width: '40px',\n },\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n minHeight: '32px',\n width: '32px',\n },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n sharedStyles: {\n border: 'none',\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n ':focus-visible': {\n borderRadius: tokens.borderRadiusLarge,\n },\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n const rootNextStyles = useRootNextStyles();\n const { imageOnly, primaryAction, size, mode, designVersion } = state;\n\n state.root.className = mergeClasses(\n attachmentClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","spacingHorizontalMNudge","usePrimaryDismissNextStyles","sharedStyles","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","borderRadiusLarge","useRootNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/AttachmentList/AttachmentList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuList, MenuPopover, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n menuList?: Slot<typeof MenuList>;\n menuPopover?: Slot<typeof MenuPopover>;\n\n /**\n * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n */\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n /**\n * Callback fired when an attachment is dismissed.\n */\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /**\n * Props that will be passed to the overflow menu.\n */\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /**\n * The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAyDA,WAEE"}
1
+ {"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuList, MenuPopover, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\nimport type { DesignVersion } from '@fluentui-copilot/react-provider';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n menuList?: Slot<typeof MenuList>;\n menuPopover?: Slot<typeof MenuPopover>;\n\n /**\n * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n */\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> &\n DesignVersion & {\n /**\n * Callback fired when an attachment is dismissed.\n */\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /**\n * Props that will be passed to the overflow menu.\n */\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /**\n * The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleAttachments?: number;\n };\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps' | 'designVersion'> & {\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA2DA,WAEE"}
package/lib/components/AttachmentList/useAttachmentList.js CHANGED
@@ -7,6 +7,7 @@ import { useOverflowStyles } from '../Attachment';
7
7
  import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
8
8
  import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';
9
9
  import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
10
+ import { useDesignVersion } from '@fluentui-copilot/react-provider';
10
11
  /**
11
12
  * Create the state required to render AttachmentList.
12
13
  *
@@ -28,6 +29,7 @@ export const useAttachmentList_unstable = (props, ref) => {
28
29
  const {
29
30
  targetDocument
30
31
  } = useFluent();
32
+ const designVersion = useDesignVersion(props.designVersion);
31
33
  const {
32
34
  findNextFocusable,
33
35
  findPrevFocusable,
@@ -95,6 +97,7 @@ export const useAttachmentList_unstable = (props, ref) => {
95
97
  });
96
98
  const shouldUseOverflow = maxVisibleAttachments !== undefined;
97
99
  return {
100
+ designVersion,
98
101
  onAttachmentDismiss: handleAttachmentDismiss,
99
102
  shouldUseOverflow,
100
103
  overflowMenuProps,
package/lib/components/AttachmentList/useAttachmentList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuList,\n MenuPopover,\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n const attachmentOverflowMenuItems = React.useMemo(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n return resolvedChildren\n .filter(child => React.isValidElement(child))\n .map(child => (child as React.ReactElement).props)\n .map(attachment => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n });\n }\n return [];\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n menuList: MenuList,\n menuPopover: MenuPopover,\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n menuList: slot.optional(props.menuList, {\n defaultProps: { children: attachmentOverflowMenuItems },\n elementType: MenuList,\n renderByDefault: true,\n }),\n menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["React","MenuList","MenuPopover","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","AttachmentOverflowMenuItem","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","attachmentOverflowMenuItems","useMemo","Array","isArray","filter","child","isValidElement","map","attachment","key","id","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","menuList","menuPopover","overflowMenuButton","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuList,\n MenuPopover,\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n\n const designVersion = useDesignVersion(props.designVersion);\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n const attachmentOverflowMenuItems = React.useMemo(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n return resolvedChildren\n .filter(child => React.isValidElement(child))\n .map(child => (child as React.ReactElement).props)\n .map(attachment => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n });\n }\n return [];\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n designVersion,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n menuList: MenuList,\n menuPopover: MenuPopover,\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n menuList: slot.optional(props.menuList, {\n defaultProps: { children: attachmentOverflowMenuItems },\n elementType: MenuList,\n renderByDefault: true,\n }),\n menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["React","MenuList","MenuPopover","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","AttachmentOverflowMenuItem","useDesignVersion","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","designVersion","findNextFocusable","findPrevFocusable","findLastFocusable","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","attachmentOverflowMenuItems","useMemo","Array","isArray","filter","child","isValidElement","map","attachment","key","id","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","menuList","menuPopover","overflowMenuButton","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/AttachmentList/useAttachmentListStyles.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __resetStyles, mergeClasses } from '@fluentui/react-components';
1
+ import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
2
2
  import { tokens } from '@fluentui-copilot/tokens';
3
3
  export const attachmentListClassNames = {
4
4
  root: 'fai-AttachmentList',
@@ -8,6 +8,19 @@ export const attachmentListClassNames = {
8
8
  };
9
9
  const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"]);
10
10
  const useOverflowMenuButtonBaseClassName = __resetStyles("rvxcmzt", null, [".rvxcmzt{display:inline-flex;}"]);
11
+ const useOverflowMenuPopoverNextStyles = __styles({
12
+ borderRadius: {
13
+ Beyfa6y: 0,
14
+ Bbmb7ep: 0,
15
+ Btl43ni: 0,
16
+ B7oj6ja: 0,
17
+ Dimara: "f1pwvjsv"
18
+ }
19
+ }, {
20
+ d: [[".f1pwvjsv{border-radius:var(--borderRadius4XL);}", {
21
+ p: -1
22
+ }]]
23
+ });
11
24
  /**
12
25
  * Apply styling to the AttachmentList slots based on the state
13
26
  */
@@ -16,12 +29,16 @@ export const useAttachmentListStyles_unstable = state => {
16
29
 
17
30
  const rootBaseClassName = useRootBaseClassName();
18
31
  const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
32
+ const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
33
+ const {
34
+ designVersion
35
+ } = state;
19
36
  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
20
37
  if (state.menuList) {
21
38
  state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);
22
39
  }
23
40
  if (state.menuPopover) {
24
- state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);
41
+ state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
25
42
  }
26
43
  if (state.overflowMenuButton) {
27
44
  state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBR,gBAAgB;IAC3CS,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqCjB,gBAAgB;IACzDW,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,MAAMO,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBZ;IAC1B,MAAMa,8BAA8BJ;IAEpCE,MAAMf,IAAI,CAACkB,SAAS,GAAGrB,aAAaE,yBAAyBC,IAAI,EAAEgB,mBAAmBD,MAAMf,IAAI,CAACkB,SAAS;IAE1G,IAAIH,MAAMd,QAAQ,EAAE;QAClBc,MAAMd,QAAQ,CAACiB,SAAS,GAAGrB,aAAaE,yBAAyBE,QAAQ,EAAEc,MAAMd,QAAQ,CAACiB,SAAS;IACrG;IACA,IAAIH,MAAMb,WAAW,EAAE;QACrBa,MAAMb,WAAW,CAACgB,SAAS,GAAGrB,aAAaE,yBAAyBG,WAAW,EAAEa,MAAMb,WAAW,CAACgB,SAAS;IAC9G;IAEA,IAAIH,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACe,SAAS,GAAGrB,aACnCE,yBAAyBI,kBAAkB,EAC3Cc,6BACAF,MAAMZ,kBAAkB,CAACe,SAAS;IAEtC;IAEA,OAAOH;AACT,EAAE"}
1
+ {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\nconst useOverflowMenuPopoverNextStyles = makeStyles({\n borderRadius: {\n borderRadius: tokens.borderRadius4XL,\n },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();\n const { designVersion } = state;\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(\n attachmentListClassNames.menuPopover,\n designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius,\n state.menuPopover.className,\n );\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useOverflowMenuPopoverNextStyles","borderRadius","borderRadius4XL","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","designVersion","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqClB,gBAAgB;IACzDY,SAAS;AACX;AAEA,MAAMO,mCAAmClB,WAAW;IAClDmB,cAAc;QACZA,cAAcjB,OAAOkB,eAAe;IACtC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBf;IAC1B,MAAMgB,8BAA8BP;IACpC,MAAMQ,gCAAgCP;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGJ;IAE1BA,MAAMlB,IAAI,CAACuB,SAAS,GAAG1B,aAAaE,yBAAyBC,IAAI,EAAEmB,mBAAmBD,MAAMlB,IAAI,CAACuB,SAAS;IAE1G,IAAIL,MAAMjB,QAAQ,EAAE;QAClBiB,MAAMjB,QAAQ,CAACsB,SAAS,GAAG1B,aAAaE,yBAAyBE,QAAQ,EAAEiB,MAAMjB,QAAQ,CAACsB,SAAS;IACrG;IACA,IAAIL,MAAMhB,WAAW,EAAE;QACrBgB,MAAMhB,WAAW,CAACqB,SAAS,GAAG1B,aAC5BE,yBAAyBG,WAAW,EACpCoB,kBAAkB,UAAUD,8BAA8BN,YAAY,EACtEG,MAAMhB,WAAW,CAACqB,SAAS;IAE/B;IAEA,IAAIL,MAAMf,kBAAkB,EAAE;QAC5Be,MAAMf,kBAAkB,CAACoB,SAAS,GAAG1B,aACnCE,yBAAyBI,kBAAkB,EAC3CiB,6BACAF,MAAMf,kBAAkB,CAACoB,SAAS;IAEtC;IAEA,OAAOL;AACT,EAAE"}
package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js CHANGED
@@ -15,30 +15,60 @@ const useNextStyles = __styles({
15
15
  Bbmb7ep: 0,
16
16
  Btl43ni: 0,
17
17
  B7oj6ja: 0,
18
- Dimara: "f1kijzfu"
18
+ Dimara: "f1kijzfu",
19
+ Bgfg5da: 0,
20
+ B9xav0g: 0,
21
+ oivjwe: 0,
22
+ Bn0qgzm: 0,
23
+ B4g9neb: 0,
24
+ zhjwy3: 0,
25
+ wvpqe5: 0,
26
+ ibv6hh: 0,
27
+ u1mtju: 0,
28
+ h3c5rm: 0,
29
+ vrafjx: 0,
30
+ Bekrc4i: 0,
31
+ i8vvqc: 0,
32
+ g2u3we: 0,
33
+ icvyot: 0,
34
+ B4j52fo: 0,
35
+ irswps: "f3bhgqh",
36
+ sj55zd: "fkfq4zb",
37
+ De3pzq: "f16xq7d1",
38
+ eoavqd: "f8491dx",
39
+ Bi91k9c: "fnwyq0v",
40
+ Jwef8y: "f1h648pw",
41
+ lj723h: "flvvhsy",
42
+ ecr2s2: "fwdzr64"
19
43
  },
20
44
  canvas: {
45
+ sshi5w: "f1w5jphr",
21
46
  Byoj8tv: 0,
22
47
  uwmqm3: 0,
23
48
  z189sj: 0,
24
49
  z8tnut: 0,
25
- B0ocmuz: "fg7z1me"
50
+ B0ocmuz: "f1nm7172"
26
51
  },
27
52
  sidecar: {
53
+ sshi5w: "f1nxs5xn",
28
54
  Byoj8tv: 0,
29
55
  uwmqm3: 0,
30
56
  z189sj: 0,
31
57
  z8tnut: 0,
32
- B0ocmuz: "f1s87h8p"
58
+ B0ocmuz: "f1nm7172"
33
59
  }
34
60
  }, {
35
61
  d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
36
62
  p: -1
37
- }], [".fg7z1me{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
63
+ }], [".f3bhgqh{border:none;}", {
64
+ p: -2
65
+ }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f1w5jphr{min-height:40px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
38
66
  p: -1
39
- }], [".f1s87h8p{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
67
+ }], ".f1nxs5xn{min-height:32px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
40
68
  p: -1
41
- }]]
69
+ }]],
70
+ h: [".f8491dx:hover{cursor:pointer;}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"],
71
+ a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"]
42
72
  });
43
73
  /**
44
74
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state