@fluentui-copilot/react-attachments 0.9.5 → 0.9.6

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 (19) hide show
  1. package/CHANGELOG.json +58 -1
  2. package/CHANGELOG.md +13 -2
  3. package/lib/components/Attachment/useAttachmentStyles.styles.js +3 -2
  4. package/lib/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
  5. package/lib/components/AttachmentList/useAttachmentList.js +10 -24
  6. package/lib/components/AttachmentList/useAttachmentList.js.map +1 -1
  7. package/lib/components/AttachmentList/useAttachmentListStyles.styles.js +3 -1
  8. package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
  9. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +3 -3
  10. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
  11. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js +4 -2
  12. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
  13. package/lib-commonjs/components/AttachmentList/useAttachmentList.js +7 -25
  14. package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
  15. package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js +5 -1
  16. package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
  17. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +5 -5
  18. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
  19. package/package.json +8 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,64 @@
2
2
  "name": "@fluentui-copilot/react-attachments",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 31 May 2024 18:42:05 GMT",
5
+ "date": "Tue, 23 Jul 2024 00:55:17 GMT",
6
+ "tag": "@fluentui-copilot/react-attachments_v0.9.6",
7
+ "version": "0.9.6",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui-copilot/react-attachments",
13
+ "commit": "eccb618e00c9a2bcec1111b302140ba1f51a64ad",
14
+ "comment": "feat: Deduplicating overflow code by using useOverflowMaxVisibleItems shared hook instead."
15
+ },
16
+ {
17
+ "author": "jiangemma@microsoft.com",
18
+ "package": "@fluentui-copilot/react-attachments",
19
+ "commit": "2ab6acda372c69b7fdc733d7f402c64a66f98a1a",
20
+ "comment": "Bump Fluent UI version to latest"
21
+ },
22
+ {
23
+ "author": "tristan.watanabe@gmail.com",
24
+ "package": "@fluentui-copilot/react-attachments",
25
+ "commit": "366a2af73a6e9da8b6b106e0902ba54fb0ec62f3",
26
+ "comment": "fix: Attachment media slot now properly aligns children to center."
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Thu, 20 Jun 2024 23:05:53 GMT",
33
+ "tag": "@fluentui-copilot/react-attachments_v0.9.5",
34
+ "version": "0.9.5",
35
+ "comments": {
36
+ "none": [
37
+ {
38
+ "author": "tristan.watanabe@gmail.com",
39
+ "package": "@fluentui-copilot/react-attachments",
40
+ "commit": "b8a46e43b66fa17ed3cbb98a57171f9805ca5801",
41
+ "comment": "fix: failing e2e tests after playwright/test dependency update to v1.44.0."
42
+ }
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "date": "Thu, 13 Jun 2024 21:00:45 GMT",
48
+ "tag": "@fluentui-copilot/react-attachments_v0.9.5",
49
+ "version": "0.9.5",
50
+ "comments": {
51
+ "none": [
52
+ {
53
+ "author": "estebanmu@microsoft.com",
54
+ "package": "@fluentui-copilot/react-attachments",
55
+ "commit": "f17f78e440c2dc6b0cd7ac5ac998ccf7f5c475d0",
56
+ "comment": "chore: Disable typecheck for ssr-tests."
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Fri, 31 May 2024 18:42:53 GMT",
6
63
  "tag": "@fluentui-copilot/react-attachments_v0.9.5",
7
64
  "version": "0.9.5",
8
65
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,23 @@
1
1
  # Change Log - @fluentui-copilot/react-attachments
2
2
 
3
- This log was last generated on Fri, 31 May 2024 18:42:05 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 23 Jul 2024 00:55:17 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.9.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.6)
8
+
9
+ Tue, 23 Jul 2024 00:55:17 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.5..@fluentui-copilot/react-attachments_v0.9.6)
11
+
12
+ ### Patches
13
+
14
+ - feat: Deduplicating overflow code by using useOverflowMaxVisibleItems shared hook instead. ([PR #1762](https://github.com/microsoft/fluentai/pull/1762) by Humberto.Morimoto@microsoft.com)
15
+ - Bump Fluent UI version to latest ([PR #1805](https://github.com/microsoft/fluentai/pull/1805) by jiangemma@microsoft.com)
16
+ - fix: Attachment media slot now properly aligns children to center. ([PR #1770](https://github.com/microsoft/fluentai/pull/1770) by tristan.watanabe@gmail.com)
17
+
7
18
  ## [0.9.5](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.5)
8
19
 
9
- Fri, 31 May 2024 18:42:05 GMT
20
+ Fri, 31 May 2024 18:42:53 GMT
10
21
  [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.4..@fluentui-copilot/react-attachments_v0.9.5)
11
22
 
12
23
  ### Patches
package/lib/components/Attachment/useAttachmentStyles.styles.js CHANGED
@@ -54,7 +54,7 @@ const useDismissButtonBaseClassName = __resetStyles("r1cf2ehf", "rhq1520", {
54
54
  r: [".r1cf2ehf{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}", ".r1cf2ehf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".r1cf2ehf:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}", ".r1cf2ehf:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".r1cf2ehf:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r1cf2ehf:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}", ".rhq1520{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}", ".rhq1520[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".rhq1520:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}", ".rhq1520:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".rhq1520:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}", ".rhq1520:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"],
55
55
  s: ["@media (forced-colors: active){.r1cf2ehf:hover{background-color:HighlightText;}.r1cf2ehf:active{background-color:HighlightText;}}", "@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}"]
56
56
  });
57
- const useMediaBaseClassName = __resetStyles("rz1lum2", null, [".rz1lum2{display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"]);
57
+ const useMediaBaseClassName = __resetStyles("r1a4a4my", null, [".r1a4a4my{align-items:center;display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"]);
58
58
  const useContentBaseClassName = __resetStyles("rmt99gk", null, [".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
59
59
  const useDismissIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"]);
60
60
  const useImageOnlyStyles = __styles({
@@ -72,10 +72,11 @@ const useImageOnlyStyles = __styles({
72
72
  });
73
73
  export const useOverflowStyles = __styles({
74
74
  overflow: {
75
+ B2u0y6b: "f6dzj5z",
75
76
  a9b677: "fly5x3f"
76
77
  }
77
78
  }, {
78
- d: [".fly5x3f{width:100%;}"]
79
+ d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
79
80
  });
80
81
  /**
81
82
  * Apply styling to the Attachment slots based on the state
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 shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 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.colorNeutralBackground1,\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 ...shorthands.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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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 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 ...shorthands.padding(0),\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n width: '100%',\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 { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\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","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","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","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","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","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","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 shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 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.colorNeutralBackground1,\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 ...shorthands.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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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 ...shorthands.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\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 { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\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","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","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","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","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","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/AttachmentList/useAttachmentList.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
- import { getIntrinsicElementProps, mergeClasses, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
2
+ import { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
3
3
  import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
4
4
  import { useTimeout } from '@fluentui/react-utilities';
5
- import { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';
5
+ import { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';
6
+ import { useOverflowStyles } from '../Attachment';
6
7
  import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
7
8
  import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
8
9
  import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';
@@ -71,30 +72,15 @@ export const useAttachmentList_unstable = (props, ref) => {
71
72
  }, 0);
72
73
  }
73
74
  });
74
- const attachmentOverflowClassName = useAttachmentOverflowStyles().overflow;
75
- const resolvedChildren = React.useMemo(() => {
76
- if (maxVisibleAttachments !== undefined) {
77
- const results = [];
78
- const childrenArray = React.Children.toArray(children);
79
- for (let index = 0; index < childrenArray.length; index++) {
80
- const child = childrenArray[index];
81
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
82
- if (index >= maxVisibleAttachments && /*#__PURE__*/React.isValidElement(child)) {
83
- results.push( /*#__PURE__*/React.cloneElement(child, {
84
- ...child.props,
85
- className: mergeClasses(child.props.className, attachmentOverflowClassName)
86
- }));
87
- } else {
88
- results.push(child);
89
- }
90
- }
91
- return results;
92
- }
93
- return children;
94
- }, [attachmentOverflowClassName, children, maxVisibleAttachments]);
75
+ const styles = useOverflowStyles();
76
+ const resolvedChildren = useOverflowMaxVisibleItems({
77
+ children,
78
+ maxVisibleItems: maxVisibleAttachments,
79
+ overflowClassName: styles.overflow
80
+ });
95
81
  React.useEffect(() => {
96
82
  if (resolvedChildren && Array.isArray(resolvedChildren)) {
97
- setAttachments(resolvedChildren.map(child => child.props));
83
+ setAttachments(resolvedChildren.filter(child => /*#__PURE__*/React.isValidElement(child)).map(child => child.props));
98
84
  }
99
85
  }, [resolvedChildren]);
100
86
  const arrowNavigationProps = useArrowNavigationGroup({
package/lib/components/AttachmentList/useAttachmentList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeClasses,\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 { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment';\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 [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\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 attachmentOverflowClassName = useAttachmentOverflowStyles().overflow;\n const resolvedChildren = React.useMemo(() => {\n if (maxVisibleAttachments !== undefined) {\n const results = [];\n const childrenArray = React.Children.toArray(children);\n for (let index = 0; index < childrenArray.length; index++) {\n const child = childrenArray[index] as React.ReactElement;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (index >= maxVisibleAttachments && React.isValidElement<any>(child)) {\n results.push(\n React.cloneElement(child, {\n ...child.props,\n className: mergeClasses(child.props.className, attachmentOverflowClassName),\n }),\n );\n } else {\n results.push(child);\n }\n }\n\n return results;\n }\n return children;\n }, [attachmentOverflowClassName, children, maxVisibleAttachments]);\n\n React.useEffect(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n setAttachments(resolvedChildren.map(child => child.props));\n }\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 attachments,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n overflowMenuButton: 'span',\n overflowMenuItem: '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 overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n overflowMenuItem: slot.optional(props.overflowMenuItem, {\n defaultProps: { children: <AttachmentOverflowMenuItem /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowStyles","useAttachmentOverflowStyles","AttachmentOverflowMenuButton","AttachmentOverflowMenuItem","attachmentOverflowMenuButtonClassNames","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","attachments","setAttachments","useState","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","attachmentOverflowClassName","overflow","resolvedChildren","useMemo","undefined","results","childrenArray","Children","toArray","index","length","child","isValidElement","push","cloneElement","className","useEffect","Array","isArray","map","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","components","overflowMenuButton","overflowMenuItem","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 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, type AttachmentProps } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\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 [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\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 React.useEffect(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n setAttachments(\n resolvedChildren.filter(child => React.isValidElement(child)).map(child => (child as React.ReactElement).props),\n );\n }\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 attachments,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n overflowMenuButton: 'span',\n overflowMenuItem: '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 overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n overflowMenuItem: slot.optional(props.overflowMenuItem, {\n defaultProps: { children: <AttachmentOverflowMenuItem /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","AttachmentOverflowMenuItem","attachmentOverflowMenuButtonClassNames","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","attachments","setAttachments","useState","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","useEffect","Array","isArray","filter","child","isValidElement","map","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","overflowMenuButton","overflowMenuItem","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/AttachmentList/useAttachmentListStyles.styles.js CHANGED
@@ -5,6 +5,7 @@ export const attachmentListClassNames = {
5
5
  overflowMenuItem: 'fai-AttachmentList__overflowMenuItem'
6
6
  };
7
7
  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);}"]);
8
+ const useOverflowMenuButtonBaseClassName = __resetStyles("rvxcmzt", null, [".rvxcmzt{display:inline-flex;}"]);
8
9
  /**
9
10
  * Apply styling to the AttachmentList slots based on the state
10
11
  */
@@ -12,9 +13,10 @@ export const useAttachmentListStyles_unstable = state => {
12
13
  'use no memo';
13
14
 
14
15
  const rootBaseClassName = useRootBaseClassName();
16
+ const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
15
17
  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
16
18
  if (state.overflowMenuButton) {
17
- state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, state.overflowMenuButton.className);
19
+ state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
18
20
  }
19
21
  if (state.overflowMenuItem) {
20
22
  state.overflowMenuItem.className = mergeClasses(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\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\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 state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,oBAAoB;IACpBC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAWN,OAAOO,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBX;IAC1BU,MAAMb,IAAI,CAACe,SAAS,GAAGlB,aAAaE,yBAAyBC,IAAI,EAAEc,mBAAmBD,MAAMb,IAAI,CAACe,SAAS;IAE1G,IAAIF,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACc,SAAS,GAAGlB,aACnCE,yBAAyBE,kBAAkB,EAC3CY,MAAMZ,kBAAkB,CAACc,SAAS;IAEtC;IAEA,IAAIF,MAAMX,gBAAgB,EAAE;QAC1BW,MAAMX,gBAAgB,CAACa,SAAS,GAAGlB,aACjCE,yBAAyBG,gBAAgB,EACzCW,MAAMX,gBAAgB,CAACa,SAAS;IAEpC;IACA,OAAOF;AACT,EAAE"}
1
+ {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\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.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,oBAAoB;IACpBC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAWN,OAAOO,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;AAClC;AAEA,MAAMC,qCAAqChB,gBAAgB;IACzDU,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,MAAMO,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBZ;IAC1B,MAAMa,8BAA8BJ;IAEpCE,MAAMd,IAAI,CAACiB,SAAS,GAAGpB,aAAaE,yBAAyBC,IAAI,EAAEe,mBAAmBD,MAAMd,IAAI,CAACiB,SAAS;IAE1G,IAAIH,MAAMb,kBAAkB,EAAE;QAC5Ba,MAAMb,kBAAkB,CAACgB,SAAS,GAAGpB,aACnCE,yBAAyBE,kBAAkB,EAC3Ce,6BACAF,MAAMb,kBAAkB,CAACgB,SAAS;IAEtC;IAEA,IAAIH,MAAMZ,gBAAgB,EAAE;QAC1BY,MAAMZ,gBAAgB,CAACe,SAAS,GAAGpB,aACjCE,yBAAyBG,gBAAgB,EACzCY,MAAMZ,gBAAgB,CAACe,SAAS;IAEpC;IACA,OAAOH;AACT,EAAE"}
package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js CHANGED
@@ -4,9 +4,9 @@ export const attachmentOverflowMenuButtonClassNames = {
4
4
  root: 'fai-AttachmentOverflowMenuButton',
5
5
  progress: 'fai-AttachmentOverflowMenuButton__progress'
6
6
  };
7
- const useRootBaseClassName = __resetStyles("r1opa2g9", null, {
8
- r: [".r1opa2g9{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalS);vertical-align:middle;align-self:end;position:relative;}", ".r1opa2g9:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".r1opa2g9:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
9
- s: ["@media (forced-colors: active){.r1opa2g9:hover{background-color:HighlightText;}.r1opa2g9:active{background-color:HighlightText;}}"]
7
+ const useRootBaseClassName = __resetStyles("rn3o5tq", null, {
8
+ r: [".rn3o5tq{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;position:relative;}", ".rn3o5tq:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".rn3o5tq:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
9
+ s: ["@media (forced-colors: active){.rn3o5tq:hover{background-color:HighlightText;}.rn3o5tq:active{background-color:HighlightText;}}"]
10
10
  });
11
11
  /**
12
12
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state
package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: tokens.spacingVerticalS,\n verticalAlign: 'middle',\n alignSelf: 'end',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.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":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS5B,OAAO6B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IACXC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,4BAA4B;QACpD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,8BAA8B;QACtD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
1
+ {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n verticalAlign: 'middle',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.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":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE5B,OAAO6B,iBAAiB,CAAC,CAAC,EAAE7B,OAAO8B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,4BAA4B;QACpD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,8BAA8B;QACtD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js CHANGED
@@ -114,8 +114,8 @@ const useDismissButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r1cf2
114
114
  "@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}"
115
115
  ]
116
116
  });
117
- const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("rz1lum2", null, [
118
- ".rz1lum2{display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"
117
+ const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("r1a4a4my", null, [
118
+ ".r1a4a4my{align-items:center;display:inline-flex;font-size:20px;height:20px;line-height:20px;width:20px;}"
119
119
  ]);
120
120
  const useContentBaseClassName = (0, _reactcomponents.__resetStyles)("rmt99gk", null, [
121
121
  ".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"
@@ -150,10 +150,12 @@ const useImageOnlyStyles = (0, _reactcomponents.__styles)({
150
150
  });
151
151
  const useOverflowStyles = (0, _reactcomponents.__styles)({
152
152
  overflow: {
153
+ B2u0y6b: "f6dzj5z",
153
154
  a9b677: "fly5x3f"
154
155
  }
155
156
  }, {
156
157
  d: [
158
+ ".f6dzj5z{max-width:100%;}",
157
159
  ".fly5x3f{width:100%;}"
158
160
  ]
159
161
  });
package/lib-commonjs/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 shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 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.colorNeutralBackground1,\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 ...shorthands.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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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 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 ...shorthands.padding(0),\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n width: '100%',\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 { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\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":["attachmentClassNames","backgroundColor","colorNeutralBackground3Hover","maxWidth","ATTACHMENT_SIZE","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","a9b677","borderBottomLeftRadius","colorBrandForegroundLinkHover","primaryActionBaseClassName","dismissButtonBaseClassName","useDismissButtonBaseClassName","mediaBaseClassName","useMediaBaseClassName","colorNeutralForeground2BrandPressed","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnlyStyles","state","className","mergeClasses","rootBaseClassName","as","isLoading","imageOnly","contentBaseClassName","dismissIconBaseClassName","fontSize","height","lineHeight","width","bar","useContentBaseClassName","overflowX","indeterminateProgressBar","textOverflow","whiteSpace","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 shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 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.colorNeutralBackground1,\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 ...shorthands.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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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 ...shorthands.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\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 { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\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":["attachmentClassNames","color","colorNeutralForeground2BrandHover","maxWidth","ATTACHMENT_SIZE","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","B2u0y6b","borderLeftColor","borderTopRightRadius","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","useDismissButtonBaseClassName","colorNeutralForeground2BrandPressed","dismissIconBaseClassName","useDismissIconBaseClassName","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnly","state","className","mergeClasses","as","isLoading","imageOnlyStyles","mediaBaseClassName","contentBaseClassName","useMediaBaseClassName","fontSize","height","lineHeight","width","bar","useContentBaseClassName","overflowX","indeterminateProgressBar","textOverflow","whiteSpace","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/AttachmentList/useAttachmentList.js CHANGED
@@ -13,6 +13,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
13
  const _reactcomponents = require("@fluentui/react-components");
14
14
  const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
15
15
  const _reactutilities = require("@fluentui/react-utilities");
16
+ const _reactutilities1 = require("@fluentui-copilot/react-utilities");
16
17
  const _Attachment = require("../Attachment");
17
18
  const _AttachmentOverflowMenuButton = require("../AttachmentOverflowMenuButton");
18
19
  const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
@@ -62,34 +63,15 @@ const useAttachmentList_unstable = (props, ref)=>{
62
63
  }, 0);
63
64
  }
64
65
  });
65
- const attachmentOverflowClassName = (0, _Attachment.useOverflowStyles)().overflow;
66
- const resolvedChildren = _react.useMemo(()=>{
67
- if (maxVisibleAttachments !== undefined) {
68
- const results = [];
69
- const childrenArray = _react.Children.toArray(children);
70
- for(let index = 0; index < childrenArray.length; index++){
71
- const child = childrenArray[index];
72
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
73
- if (index >= maxVisibleAttachments && /*#__PURE__*/ _react.isValidElement(child)) {
74
- results.push(/*#__PURE__*/ _react.cloneElement(child, {
75
- ...child.props,
76
- className: (0, _reactcomponents.mergeClasses)(child.props.className, attachmentOverflowClassName)
77
- }));
78
- } else {
79
- results.push(child);
80
- }
81
- }
82
- return results;
83
- }
84
- return children;
85
- }, [
86
- attachmentOverflowClassName,
66
+ const styles = (0, _Attachment.useOverflowStyles)();
67
+ const resolvedChildren = (0, _reactutilities1.useOverflowMaxVisibleItems)({
87
68
  children,
88
- maxVisibleAttachments
89
- ]);
69
+ maxVisibleItems: maxVisibleAttachments,
70
+ overflowClassName: styles.overflow
71
+ });
90
72
  _react.useEffect(()=>{
91
73
  if (resolvedChildren && Array.isArray(resolvedChildren)) {
92
- setAttachments(resolvedChildren.map((child)=>child.props));
74
+ setAttachments(resolvedChildren.filter((child)=>/*#__PURE__*/ _react.isValidElement(child)).map((child)=>child.props));
93
75
  }
94
76
  }, [
95
77
  resolvedChildren
package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeClasses,\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 { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment';\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 [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\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 attachmentOverflowClassName = useAttachmentOverflowStyles().overflow;\n const resolvedChildren = React.useMemo(() => {\n if (maxVisibleAttachments !== undefined) {\n const results = [];\n const childrenArray = React.Children.toArray(children);\n for (let index = 0; index < childrenArray.length; index++) {\n const child = childrenArray[index] as React.ReactElement;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (index >= maxVisibleAttachments && React.isValidElement<any>(child)) {\n results.push(\n React.cloneElement(child, {\n ...child.props,\n className: mergeClasses(child.props.className, attachmentOverflowClassName),\n }),\n );\n } else {\n results.push(child);\n }\n }\n\n return results;\n }\n return children;\n }, [attachmentOverflowClassName, children, maxVisibleAttachments]);\n\n React.useEffect(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n setAttachments(resolvedChildren.map(child => child.props));\n }\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 attachments,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n overflowMenuButton: 'span',\n overflowMenuItem: '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 overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n overflowMenuItem: slot.optional(props.overflowMenuItem, {\n defaultProps: { children: <AttachmentOverflowMenuItem /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","findNextFocusable","overflowMenuProps","attachments","innerRef","activeElement","next","container","current","useState","useEventCallback","e","data","findLastFocusable","_innerRef_current","contains","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","attachmentOverflowClassName","undefined","React","isValidElement","useAttachmentOverflowStyles","overflow","useMemo","child","childrenArray","Children","toArray","index","results","useEffect","resolvedChildren","useArrowNavigationGroup","circular","axis","Array","isArray","memorizeCurrent","map","shouldUseOverflow","arrowNavigationProps","components","overflowMenuItem","ref","elementType","overflowMenuButton","slot","defaultProps","optional","createElement","AttachmentOverflowMenuButton","AttachmentOverflowMenuItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\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, type AttachmentProps } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\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 [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\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 React.useEffect(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n setAttachments(\n resolvedChildren.filter(child => React.isValidElement(child)).map(child => (child as React.ReactElement).props),\n );\n }\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 attachments,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n overflowMenuButton: 'span',\n overflowMenuItem: '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 overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n overflowMenuItem: slot.optional(props.overflowMenuItem, {\n defaultProps: { children: <AttachmentOverflowMenuItem /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","findNextFocusable","overflowMenuProps","attachments","innerRef","activeElement","next","container","current","useState","useEventCallback","e","data","findLastFocusable","_innerRef_current","contains","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","React","useEffect","resolvedChildren","filter","child","arrowNavigationProps","useArrowNavigationGroup","memorizeCurrent","overflow","shouldUseOverflow","Array","isArray","components","overflowMenuButton","undefined","useMergedRefs","elementType","defaultProps","renderByDefault","overflowMenuItem","slot","optional","createElement","AttachmentOverflowMenuButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+BUA;;;eAAAA;;;;iEA/Ba;iCAQhB;qCACyC;gCACrB;iCACgB;4BACa;8CACX;4CACF;6DACY;AAgBrD,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EACRF,mBAAQG,EACRC,iBAAOC,KACPN;qBASMO,OAAAA,MAAAA,CAAAA;UARJ,CAAAL,WAAKD,GAAAA,IAAAA,0BAAAA;0BAEL,gDAEAA;UAEA,mBACMO,mBACFD,mBACF,yCACME;wBAAyDC,eAAoBC,GAAAA,OAAOC,QAAA,CAAA,EAAA;oCAACC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEb,GAAAA;6CACEc;8BAAAA,mBAAAA,QAAAA,mBAAkBT,KAASI,IAAO,KAAA,IAAAR,eAAlCa,aAAAA;iCACCT,SAAAI,OAAA,MAAA,QAAAM,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAV,gBAAA;wGACE;2CACKA,eAAA;2BACZD,SAAAI,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GQ,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAL,kBAAAT,SAAAI,OAAA,CAAA,MAAA,QAAAU,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEc;;mBAEJ;gBACF,MAAAG,OAAAI,kBAAAf,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAgB,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAC,WAAMC;gBACJ,IAAIC;sCAEAA,kBAAiBC,SAAOC,OAAAA,CAAAA,MAAAA,QAASJ,uBAAqBI,KAAYA,IAAAA,KAAS,IAACA,mBAAkCV,KAAA;eAElH;QACF;;UAAqBG,SAAAC,IAAAA,6BAAA;UAErBI,mBAAMG,IAAAA,2CAAuBC,EAAAA;;yBAErBnC;2BACNoC,OAAiBC,QAAA;;WAGnBP,SAAMQ,CAAAA;QAEN,IAAAP,oBAAOQ,MAAAC,OAAA,CAAAT,mBAAA;2BACLxB,iBAAAA,MAAAA,CAAAA,CAAAA,QAAAA,WAAAA,GAAAA,OAAAA,cAAAA,CAAAA,QAAAA,GAAAA,CAAAA,CAAAA,QAAAA,MAAAA,KAAAA;;;;KAEA+B;UACAhC,uBAAAA,IAAAA,wCAAAA,EAAAA;kBACAmC;;yBAEEC;;UAEFJ,oBAAAtC,0BAAA2C;WACAtB;;6BAGSuB;;;oBAGF3C;kBACHF;gCAEF;8BAAE8C;;cAEJH,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAkCzC,EAAAA,OAAMyC;0BACtCI;mDAAgB/C,EAAAA,KAAAA;kBAA2C;mCAC9C;oBACbgD;sBACFhB;YACAiB;yBACEF;;4BAAyDG,qBAAA,CAAAC,QAAA,CAAAjD,MAAAyC,kBAAA,EAAA;0BACzDG;0BACAE,WAAiB,GAAAlB,OAAAsB,aAAA,CAAAC,0DAAA,EAAA;;YAErBP,aAAA;YACAE,iBAAA"}
package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js CHANGED
@@ -25,12 +25,16 @@ const attachmentListClassNames = {
25
25
  const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", null, [
26
26
  ".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"
27
27
  ]);
28
+ const useOverflowMenuButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rvxcmzt", null, [
29
+ ".rvxcmzt{display:inline-flex;}"
30
+ ]);
28
31
  const useAttachmentListStyles_unstable = (state)=>{
29
32
  'use no memo';
30
33
  const rootBaseClassName = useRootBaseClassName();
34
+ const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
31
35
  state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
32
36
  if (state.overflowMenuButton) {
33
- state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, state.overflowMenuButton.className);
37
+ state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
34
38
  }
35
39
  if (state.overflowMenuItem) {
36
40
  state.overflowMenuItem.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\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\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 state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["attachmentListClassNames","flexShrink","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","makeResetStyles","state","rootBaseClassName","className","mergeClasses","useAttachmentListStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAUXC,gCAAY;eAAZA;;;iCAd4C;AAIvC,MAAMD,2BAAgE;UAC3EE;wBACAC;sBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;AAI3CL,MAAAA,mCAAYM,CAAAA;;IAGd,MAAAC,oBAAAH;IAEAE,MAAAL,IAAA,CAAAO,SAAA,GAAAC,IAAAA,6BAAA,EAAAV,yBAAAE,IAAA,EAAAM,mBAAAD,MAAAL,IAAA,CAAAO,SAAA;;QAGAF,MAAAJ,kBAAaQ,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoCJ,EAAAA,yBAAAA,kBAAAA,EAAAA,MAAAA,kBAAAA,CAAAA,SAAAA;;QAG/CA,MAAMC,gBAAAA,EAAoBH;QAC1BE,MAAML,gBAAc,CAAGQ,SAAAA,GAAAA,IAAAA,6BAAaV,EAAAA,yBAA+BQ,gBAAmBD,EAAAA,MAAWE,gBAAS,CAAAA,SAAA;;WAGxGF;6DAM0B"}
1
+ {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\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.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["attachmentListClassNames","flexWrap","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAWXC,gCAAU;eAAVA;;;iCAf4C;AAIvC,MAAMD,2BAAgE;UAC3EE;wBACAC;sBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;AAIzCP,MAAAA,mCAAUQ,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,MAAAP,IAAA,CAAAU,SAAA,GAAAC,IAAAA,6BAAA,EAAAb,yBAAAE,IAAA,EAAAY,mBAAAL,MAAAP,IAAA,CAAAU,SAAA;IAEA,IAAAH,MAAAN,kBAAA,EAAA;;IAEC;QAECM,MAAAL,gBAAA,EAAA;QAEAK,MAAMK,gBAAAA,CAAAA,SAAoBT,GAAAA,IAAAA,6BAAAA,EAAAA,yBAAAA,gBAAAA,EAAAA,MAAAA,gBAAAA,CAAAA,SAAAA;;WAG1BI;6DAIIT"}
package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js CHANGED
@@ -22,14 +22,14 @@ const attachmentOverflowMenuButtonClassNames = {
22
22
  root: 'fai-AttachmentOverflowMenuButton',
23
23
  progress: 'fai-AttachmentOverflowMenuButton__progress'
24
24
  };
25
- const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1opa2g9", null, {
25
+ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rn3o5tq", null, {
26
26
  r: [
27
- ".r1opa2g9{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalS);vertical-align:middle;align-self:end;position:relative;}",
28
- ".r1opa2g9:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
29
- ".r1opa2g9:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
27
+ ".rn3o5tq{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;position:relative;}",
28
+ ".rn3o5tq:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
29
+ ".rn3o5tq:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
30
30
  ],
31
31
  s: [
32
- "@media (forced-colors: active){.r1opa2g9:hover{background-color:HighlightText;}.r1opa2g9:active{background-color:HighlightText;}}"
32
+ "@media (forced-colors: active){.rn3o5tq:hover{background-color:HighlightText;}.rn3o5tq:active{background-color:HighlightText;}}"
33
33
  ]
34
34
  });
35
35
  const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: tokens.spacingVerticalS,\n verticalAlign: 'middle',\n alignSelf: 'end',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.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":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalS","bar","verticalAlign","alignSelf","position","cursor","value","undefined","backgroundColor","colorNeutralBackground3Hover","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCApBoE;4CACjC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAASC,qBAAOC,CAAAA,QAAAA,CAAAA,MAAgBlB,QAAA,CAAAmB,GAAA,EAAA;YAChCC,aAAe;YACfC,iBAAW;QACXC;QAEA,IAAAH,KAAA;gBACEI,MAAQvB,QAAA,CAAAwB,KAAA,KAAAC,WAAA;gBACRC,IAAAA,SAAAA,GAAAA,IAAAA,6BAAwBC,EAAAA,kBAAAA,wBAA4B,EAAAR,IAAAR,SAAA;mBACpDR;gBACFgB,IAAAR,SAAA,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAa,kBAAA,EAAAT,IAAAR,SAAA;YACA;kBACEe,QAAAA,CAAAA,GAAAA,GAAiBT;;;WAGnBZ;2EAEqB"}
1
+ {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n verticalAlign: 'middle',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.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":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalXS","verticalAlign","position","cursor","backgroundColor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","indeterminateProgressBar","bar","regularProgressBar","colorNeutralForeground2Pressed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCApBoE;4CACjC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,WAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAAYC,qBAAAA,CAAAA,QAAOC,CAAAA,MAAAA,QAAqBD,CAAAA,GAAAA,EAAAA;YACxCE,aAAe;YACfC,iBAAU;QAEV;YACEC,KAAAA;gBACAC,MAAAA,QAAAA,CAAiBL,KAAAA,KAAOM,WAAAA;gBACxBpB,IAAAA,SAAOc,GAAOO,IAAAA,6BAAAA,EAAAA,kBAA4BC,wBAAA,EAAAC,IAAAf,SAAA;YAC5C,OAAA;gBACAe,IAAAf,SAAW,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAY,kBAAA,EAAAD,IAAAf,SAAA;;kBAETR,QAAOc,CAAAA,GAAOW,GAAAA;QAChB;;WAEEvB;2EAEA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-attachments",
3
- "version": "0.9.5",
3
+ "version": "0.9.6",
4
4
  "description": "A set of components related to attaching files in Copilot experiences.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,18 +12,19 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "^0.8.3",
15
+ "@fluentui-copilot/react-provider": "^0.8.4",
16
+ "@fluentui-copilot/react-utilities": "^0.0.1",
16
17
  "@fluentui-copilot/tokens": "^0.3.2",
17
18
  "@swc/helpers": "^0.5.1"
18
19
  },
19
20
  "peerDependencies": {
20
21
  "@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
21
- "@fluentui/react-components": ">=9.52.0 <10.0.0",
22
- "@fluentui/react-context-selector": ">=9.1.60 <10.0.0",
23
- "@fluentui/react-icons": ">=2.0.240 <3.0.0",
24
- "@fluentui/react-jsx-runtime": ">=9.0.38 <10.0.0",
22
+ "@fluentui/react-components": ">=9.54.4 <10.0.0",
23
+ "@fluentui/react-context-selector": ">=9.1.63 <10.0.0",
24
+ "@fluentui/react-icons": ">=2.0.247 <3.0.0",
25
+ "@fluentui/react-jsx-runtime": ">=9.0.40 <10.0.0",
25
26
  "@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
26
- "@fluentui/react-utilities": ">=9.18.9 <10.0.0",
27
+ "@fluentui/react-utilities": ">=9.18.11 <10.0.0",
27
28
  "@types/react": ">=16.14.0 <19.0.0",
28
29
  "@types/react-dom": ">=16.9.8 <19.0.0",
29
30
  "react": ">=16.14.0 <19.0.0",