@fluentui-copilot/react-attachments 0.13.2 → 0.13.3

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 (133) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +11 -2
  3. package/lib/AgentTag.js +0 -1
  4. package/lib/Attachment.js +0 -1
  5. package/lib/AttachmentList.js +0 -1
  6. package/lib/AttachmentOverflowMenu.js +0 -1
  7. package/lib/AttachmentOverflowMenuButton.js +0 -1
  8. package/lib/AttachmentOverflowMenuItem.js +0 -1
  9. package/lib/components/AgentTag/AgentTag.js +4 -5
  10. package/lib/components/AgentTag/AgentTag.types.js +1 -2
  11. package/lib/components/AgentTag/index.js +0 -1
  12. package/lib/components/AgentTag/renderAgentTag.js +3 -5
  13. package/lib/components/AgentTag/useAgentTag.js +7 -9
  14. package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js +66 -0
  15. package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js.map +1 -0
  16. package/lib/components/Attachment/Attachment.js +5 -6
  17. package/lib/components/Attachment/Attachment.types.js +1 -2
  18. package/lib/components/Attachment/index.js +0 -1
  19. package/lib/components/Attachment/renderAttachment.js +36 -31
  20. package/lib/components/Attachment/useAttachment.js +85 -95
  21. package/lib/components/Attachment/useAttachmentStyles.styles.raw.js +317 -0
  22. package/lib/components/Attachment/useAttachmentStyles.styles.raw.js.map +1 -0
  23. package/lib/components/AttachmentList/AttachmentList.js +6 -7
  24. package/lib/components/AttachmentList/AttachmentList.types.js +1 -2
  25. package/lib/components/AttachmentList/index.js +0 -1
  26. package/lib/components/AttachmentList/renderAttachmentList.js +25 -25
  27. package/lib/components/AttachmentList/useAttachmentList.js +113 -124
  28. package/lib/components/AttachmentList/useAttachmentListContextValues.js +10 -15
  29. package/lib/components/AttachmentList/useAttachmentListStyles.styles.raw.js +44 -0
  30. package/lib/components/AttachmentList/useAttachmentListStyles.styles.raw.js.map +1 -0
  31. package/lib/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js +8 -9
  32. package/lib/components/AttachmentOverflowMenu/AttachmentOverflowMenu.types.js +1 -2
  33. package/lib/components/AttachmentOverflowMenu/index.js +0 -1
  34. package/lib/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js +8 -13
  35. package/lib/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js +9 -15
  36. package/lib/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js +10 -15
  37. package/lib/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js +5 -6
  38. package/lib/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.types.js +1 -2
  39. package/lib/components/AttachmentOverflowMenuButton/index.js +0 -1
  40. package/lib/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js +11 -10
  41. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js +51 -59
  42. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js +102 -0
  43. package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js.map +1 -0
  44. package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js +4 -5
  45. package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js +1 -2
  46. package/lib/components/AttachmentOverflowMenuItem/index.js +0 -1
  47. package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js +9 -8
  48. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +41 -49
  49. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js +57 -0
  50. package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js.map +1 -0
  51. package/lib/components/index.js +0 -1
  52. package/lib/components/utils/useProgressBarStyles.styles.raw.js +42 -0
  53. package/lib/components/utils/useProgressBarStyles.styles.raw.js.map +1 -0
  54. package/lib/contexts/attachmentListContext.js +4 -5
  55. package/lib/contexts/attachmentOverflowMenuContext.js +4 -5
  56. package/lib/index.js +0 -1
  57. package/lib-commonjs/AgentTag.js +0 -1
  58. package/lib-commonjs/Attachment.js +0 -1
  59. package/lib-commonjs/AttachmentList.js +0 -1
  60. package/lib-commonjs/AttachmentOverflowMenu.js +0 -1
  61. package/lib-commonjs/AttachmentOverflowMenuButton.js +0 -1
  62. package/lib-commonjs/AttachmentOverflowMenuItem.js +0 -1
  63. package/lib-commonjs/components/AgentTag/AgentTag.js +1 -1
  64. package/lib-commonjs/components/AgentTag/AgentTag.js.map +1 -1
  65. package/lib-commonjs/components/AgentTag/AgentTag.types.js +0 -1
  66. package/lib-commonjs/components/AgentTag/index.js +0 -1
  67. package/lib-commonjs/components/AgentTag/renderAgentTag.js +1 -1
  68. package/lib-commonjs/components/AgentTag/renderAgentTag.js.map +1 -1
  69. package/lib-commonjs/components/AgentTag/useAgentTag.js +1 -1
  70. package/lib-commonjs/components/AgentTag/useAgentTag.js.map +1 -1
  71. package/lib-commonjs/components/AgentTag/useAgentTagStyles.styles.raw.js +82 -0
  72. package/lib-commonjs/components/AgentTag/useAgentTagStyles.styles.raw.js.map +1 -0
  73. package/lib-commonjs/components/Attachment/Attachment.js +1 -1
  74. package/lib-commonjs/components/Attachment/Attachment.js.map +1 -1
  75. package/lib-commonjs/components/Attachment/Attachment.types.js +0 -1
  76. package/lib-commonjs/components/Attachment/index.js +0 -1
  77. package/lib-commonjs/components/Attachment/renderAttachment.js +1 -1
  78. package/lib-commonjs/components/Attachment/renderAttachment.js.map +1 -1
  79. package/lib-commonjs/components/Attachment/useAttachment.js +1 -1
  80. package/lib-commonjs/components/Attachment/useAttachment.js.map +1 -1
  81. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.raw.js +336 -0
  82. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.raw.js.map +1 -0
  83. package/lib-commonjs/components/AttachmentList/AttachmentList.js +1 -1
  84. package/lib-commonjs/components/AttachmentList/AttachmentList.js.map +1 -1
  85. package/lib-commonjs/components/AttachmentList/AttachmentList.types.js +0 -1
  86. package/lib-commonjs/components/AttachmentList/index.js +0 -1
  87. package/lib-commonjs/components/AttachmentList/renderAttachmentList.js +1 -1
  88. package/lib-commonjs/components/AttachmentList/renderAttachmentList.js.map +1 -1
  89. package/lib-commonjs/components/AttachmentList/useAttachmentList.js +1 -1
  90. package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
  91. package/lib-commonjs/components/AttachmentList/useAttachmentListContextValues.js +1 -1
  92. package/lib-commonjs/components/AttachmentList/useAttachmentListContextValues.js.map +1 -1
  93. package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.raw.js +60 -0
  94. package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.raw.js.map +1 -0
  95. package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js +1 -1
  96. package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js.map +1 -1
  97. package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.types.js +0 -1
  98. package/lib-commonjs/components/AttachmentOverflowMenu/index.js +0 -1
  99. package/lib-commonjs/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js +1 -1
  100. package/lib-commonjs/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js.map +1 -1
  101. package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js +1 -1
  102. package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js.map +1 -1
  103. package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js +1 -1
  104. package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js.map +1 -1
  105. package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js +1 -1
  106. package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js.map +1 -1
  107. package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.types.js +0 -1
  108. package/lib-commonjs/components/AttachmentOverflowMenuButton/index.js +0 -1
  109. package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js +1 -1
  110. package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js.map +1 -1
  111. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js +1 -1
  112. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js.map +1 -1
  113. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js +118 -0
  114. package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js.map +1 -0
  115. package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js +1 -1
  116. package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js.map +1 -1
  117. package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js +0 -1
  118. package/lib-commonjs/components/AttachmentOverflowMenuItem/index.js +0 -1
  119. package/lib-commonjs/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js +1 -1
  120. package/lib-commonjs/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js.map +1 -1
  121. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +1 -1
  122. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
  123. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js +73 -0
  124. package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js.map +1 -0
  125. package/lib-commonjs/components/index.js +0 -1
  126. package/lib-commonjs/components/utils/useProgressBarStyles.styles.raw.js +50 -0
  127. package/lib-commonjs/components/utils/useProgressBarStyles.styles.raw.js.map +1 -0
  128. package/lib-commonjs/contexts/attachmentListContext.js +1 -1
  129. package/lib-commonjs/contexts/attachmentListContext.js.map +1 -1
  130. package/lib-commonjs/contexts/attachmentOverflowMenuContext.js +1 -1
  131. package/lib-commonjs/contexts/attachmentOverflowMenuContext.js.map +1 -1
  132. package/lib-commonjs/index.js +0 -1
  133. package/package.json +4 -4
@@ -0,0 +1,102 @@
1
+ import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';
2
+ import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
3
+ import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
4
+ export const attachmentOverflowMenuButtonClassNames = {
5
+ root: 'fai-AttachmentOverflowMenuButton',
6
+ progress: 'fai-AttachmentOverflowMenuButton__progress'
7
+ };
8
+ const useRootBaseClassName = makeResetStyles({
9
+ color: tokens.colorNeutralForeground1,
10
+ alignItems: 'center',
11
+ backgroundColor: tokens.colorSubtleBackground,
12
+ border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
13
+ borderRadius: tokens.borderRadiusMedium,
14
+ boxSizing: 'border-box',
15
+ columnGap: tokens.spacingHorizontalSNudge,
16
+ cursor: 'pointer',
17
+ display: 'inline-flex',
18
+ flexWrap: 'nowrap',
19
+ fontFamily: typographyStyles.body1.fontFamily,
20
+ fontSize: typographyStyles.body1.fontSize,
21
+ fontWeight: typographyStyles.body1.fontWeight,
22
+ justifyContent: 'center',
23
+ padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
24
+ verticalAlign: 'middle',
25
+ position: 'relative',
26
+ ':hover': {
27
+ cursor: 'pointer',
28
+ backgroundColor: tokens.colorSubtleBackgroundHover,
29
+ color: tokens.colorNeutralForeground2Hover
30
+ },
31
+ ':active': {
32
+ backgroundColor: tokens.colorSubtleBackgroundPressed,
33
+ color: tokens.colorNeutralForeground2Pressed
34
+ },
35
+ '@media (forced-colors: active)': {
36
+ ':hover': {
37
+ backgroundColor: 'HighlightText'
38
+ },
39
+ ':active': {
40
+ backgroundColor: 'HighlightText'
41
+ }
42
+ }
43
+ });
44
+ const useNextStyles = makeStyles({
45
+ root: {
46
+ borderRadius: tokens.borderRadiusXLarge,
47
+ ...shorthands.borderColor(tokens.colorTransparentStroke),
48
+ color: tokens.colorNeutralForeground2,
49
+ backgroundColor: tokens.colorNeutralBackground3,
50
+ ':hover': {
51
+ cursor: 'pointer',
52
+ color: tokens.colorNeutralForeground2Hover,
53
+ backgroundColor: tokens.colorNeutralBackground3Hover
54
+ },
55
+ ':active': {
56
+ color: tokens.colorNeutralForeground2Pressed,
57
+ backgroundColor: tokens.colorNeutralBackground3Pressed
58
+ }
59
+ },
60
+ canvas: {
61
+ minHeight: '40px',
62
+ padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`
63
+ },
64
+ sidecar: {
65
+ minHeight: '32px',
66
+ padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`
67
+ },
68
+ fullyOverflowed_canvas: {
69
+ padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,
70
+ ...typographyStyles.subtitle2
71
+ },
72
+ fullyOverflowed_sidecar: {
73
+ padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,
74
+ ...typographyStyles.body1Strong
75
+ }
76
+ });
77
+ /**
78
+ * Apply styling to the AttachmentOverflowMenuButton slots based on the state
79
+ */ export const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
80
+ 'use no memo';
81
+ const { designVersion, mode, fullyOverflowed } = state;
82
+ const rootBaseClassName = useRootBaseClassName();
83
+ const progressBarStyles = useProgressBarStyles();
84
+ const nextStyles = useNextStyles();
85
+ state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`], state.root.className);
86
+ if (state.progress) {
87
+ state.progress.className = mergeClasses(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
88
+ const bar = slot.optional(state.progress.bar, {
89
+ elementType: 'div',
90
+ renderByDefault: true
91
+ });
92
+ if (bar) {
93
+ if (state.progress.value === undefined) {
94
+ bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
95
+ } else {
96
+ bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
97
+ }
98
+ state.progress.bar = bar;
99
+ }
100
+ }
101
+ return state;
102
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\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.colorSubtleBackground,\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.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useNextStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusXLarge,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n canvas: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n },\n sidecar: {\n minHeight: '32px',\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n },\n fullyOverflowed_canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,\n ...typographyStyles.subtitle2,\n },\n fullyOverflowed_sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,\n ...typographyStyles.body1Strong,\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 { designVersion, mode, fullyOverflowed } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n designVersion === 'next' && nextStyles[mode],\n designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`],\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","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","borderColor","colorTransparentStroke","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","fullyOverflowed_canvas","spacingHorizontalL","subtitle2","fullyOverflowed_sidecar","spacingHorizontalM","body1Strong","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","fullyOverflowed","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -2,10 +2,9 @@ import * as React from 'react';
2
2
  import { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';
3
3
  import { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';
4
4
  import { useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';
5
- export const AttachmentOverflowMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
6
- const state = useAttachmentOverflowMenuItem_unstable(props, ref);
7
- useAttachmentOverflowMenuItemStyles_unstable(state);
8
- return renderAttachmentOverflowMenuItem_unstable(state);
5
+ export const AttachmentOverflowMenuItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
6
+ const state = useAttachmentOverflowMenuItem_unstable(props, ref);
7
+ useAttachmentOverflowMenuItemStyles_unstable(state);
8
+ return renderAttachmentOverflowMenuItem_unstable(state);
9
9
  });
10
10
  AttachmentOverflowMenuItem.displayName = 'AttachmentOverflowMenuItem';
11
- //# sourceMappingURL=AttachmentOverflowMenuItem.js.map
@@ -1,4 +1,3 @@
1
1
  /**
2
2
  * State used in rendering AttachmentOverflowMenuItem
3
- */export {};
4
- //# sourceMappingURL=AttachmentOverflowMenuItem.types.js.map
3
+ */ export { };
@@ -2,4 +2,3 @@ export { AttachmentOverflowMenuItem } from './AttachmentOverflowMenuItem';
2
2
  export { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';
3
3
  export { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';
4
4
  export { attachmentOverflowMenuItemClassNames, useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';
5
- //# sourceMappingURL=index.js.map
@@ -1,12 +1,13 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
2
  import { assertSlots } from '@fluentui/react-components';
3
3
  /**
4
4
  * Render the final JSX of AttachmentOverflowMenuItem
5
- */
6
- export const renderAttachmentOverflowMenuItem_unstable = state => {
7
- assertSlots(state);
8
- return !state.isVisible ? /*#__PURE__*/_jsxs(state.root, {
9
- children: [state.root.children, state.progress && /*#__PURE__*/_jsx(state.progress, {})]
10
- }) : null;
5
+ */ export const renderAttachmentOverflowMenuItem_unstable = (state)=>{
6
+ assertSlots(state);
7
+ return !state.isVisible ? /*#__PURE__*/ _jsxs(state.root, {
8
+ children: [
9
+ state.root.children,
10
+ state.progress && /*#__PURE__*/ _jsx(state.progress, {})
11
+ ]
12
+ }) : null;
11
13
  };
12
- //# sourceMappingURL=renderAttachmentOverflowMenuItem.js.map
@@ -11,54 +11,46 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
11
11
  *
12
12
  * @param props - props from this instance of AttachmentOverflowMenuItem
13
13
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem
14
- */
15
- export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
16
- 'use no memo';
17
-
18
- const {
19
- imageOnly,
20
- media
21
- } = props;
22
- const menuItemId = useId('attachment-', props.id);
23
- const isVisible = useIsOverflowItemVisible(menuItemId);
24
- const {
25
- onAttachmentDismiss
26
- } = useAttachmentListContext_unstable(context => context);
27
- const designVersion = useDesignVersion(props.designVersion);
28
- const root = slot.always({
29
- ref,
30
- icon: media,
31
- secondaryContent: /*#__PURE__*/React.createElement(Dismiss20Regular, null),
32
- ...props,
33
- id: menuItemId
34
- }, {
35
- elementType: MenuItem
36
- });
37
- root.onClick = mergeCallbacks(root.onClick, ev => {
38
- onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
39
- content: props.children,
40
- media,
41
- id: menuItemId
14
+ */ export const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
15
+ 'use no memo';
16
+ const { imageOnly, media } = props;
17
+ const menuItemId = useId('attachment-', props.id);
18
+ const isVisible = useIsOverflowItemVisible(menuItemId);
19
+ const { onAttachmentDismiss } = useAttachmentListContext_unstable((context)=>context);
20
+ const designVersion = useDesignVersion(props.designVersion);
21
+ const root = slot.always({
22
+ ref,
23
+ icon: media,
24
+ secondaryContent: /*#__PURE__*/ React.createElement(Dismiss20Regular, null),
25
+ ...props,
26
+ id: menuItemId
27
+ }, {
28
+ elementType: MenuItem
42
29
  });
43
- });
44
- const progress = slot.optional(props.progress, {
45
- defaultProps: {
46
- shape: 'square',
47
- thickness: 'large',
48
- 'aria-labelledby': props.id
49
- },
50
- elementType: ProgressBar
51
- });
52
- return {
53
- components: {
54
- root: MenuItem,
55
- progress: ProgressBar
56
- },
57
- root,
58
- progress,
59
- isVisible,
60
- imageOnly,
61
- designVersion
62
- };
30
+ root.onClick = mergeCallbacks(root.onClick, (ev)=>{
31
+ onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
32
+ content: props.children,
33
+ media,
34
+ id: menuItemId
35
+ });
36
+ });
37
+ const progress = slot.optional(props.progress, {
38
+ defaultProps: {
39
+ shape: 'square',
40
+ thickness: 'large',
41
+ 'aria-labelledby': props.id
42
+ },
43
+ elementType: ProgressBar
44
+ });
45
+ return {
46
+ components: {
47
+ root: MenuItem,
48
+ progress: ProgressBar
49
+ },
50
+ root,
51
+ progress,
52
+ isVisible,
53
+ imageOnly,
54
+ designVersion
55
+ };
63
56
  };
64
- //# sourceMappingURL=useAttachmentOverflowMenuItem.js.map
@@ -0,0 +1,57 @@
1
+ import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';
2
+ import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
3
+ export const attachmentOverflowMenuItemClassNames = {
4
+ root: 'fai-AttachmentOverflowMenuItem',
5
+ progress: 'fai-AttachmentOverflowMenuItem__progress'
6
+ };
7
+ const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
8
+ const useStyles = makeStyles({
9
+ imageOnly: {
10
+ alignItems: 'center'
11
+ },
12
+ secondaryContent: {
13
+ display: 'flex',
14
+ alignItems: 'center'
15
+ }
16
+ });
17
+ const useNextStyles = makeStyles({
18
+ nextStyles: {
19
+ [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
20
+ borderRadius: tokens.borderRadiusXLarge
21
+ },
22
+ outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
23
+ }
24
+ });
25
+ /**
26
+ * Apply styling to the AttachmentList slots based on the state
27
+ */ export const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
28
+ 'use no memo';
29
+ const { imageOnly, designVersion } = state;
30
+ const styles = useStyles();
31
+ const nextStyles = useNextStyles();
32
+ const progressBarStyles = useProgressBarStyles();
33
+ state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
34
+ const secondaryContent = slot.optional(state.root.secondaryContent, {
35
+ elementType: 'span'
36
+ });
37
+ if (secondaryContent) {
38
+ secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);
39
+ state.root.secondaryContent = secondaryContent;
40
+ }
41
+ if (state.progress) {
42
+ state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
43
+ const bar = slot.optional(state.progress.bar, {
44
+ elementType: 'div',
45
+ renderByDefault: true
46
+ });
47
+ if (bar) {
48
+ if (state.progress.value === undefined) {
49
+ bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
50
+ } else {
51
+ bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
52
+ }
53
+ state.progress.bar = bar;
54
+ }
55
+ }
56
+ return state;
57
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuItemSlots,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n root: 'fai-AttachmentOverflowMenuItem',\n progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\nconst useStyles = makeStyles({\n imageOnly: {\n alignItems: 'center',\n },\n secondaryContent: {\n display: 'flex',\n alignItems: 'center',\n },\n});\n\nconst useNextStyles = makeStyles({\n nextStyles: {\n [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n borderRadius: tokens.borderRadiusXLarge,\n },\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, designVersion } = state;\n const styles = useStyles();\n const nextStyles = useNextStyles();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.root,\n imageOnly && styles.imageOnly,\n designVersion === 'next' && nextStyles.nextStyles,\n state.root.className,\n );\n\n const secondaryContent = slot.optional(state.root.secondaryContent, {\n elementType: 'span',\n });\n if (secondaryContent) {\n secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);\n state.root.secondaryContent = secondaryContent;\n }\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.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":["makeStyles","mergeClasses","slot","tokens","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","FOCUS_VISIBLE_ATTR","useStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","borderRadiusXLarge","outline","strokeWidthThin","colorTransparentStroke","useAttachmentOverflowMenuItemStyles_unstable","state","designVersion","styles","progressBarStyles","className","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,QAAQ,6BAA6B;AACpF,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBd,WAAW;IAC/Be,YAAY;QACV,CAAC,CAAC,CAAC,EAAEP,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCQ,cAAcb,OAAOc,kBAAkB;QACzC;QACAC,SAAS,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOiB,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,EAAEZ,SAAS,EAAEa,aAAa,EAAE,GAAGD;IACrC,MAAME,SAASf;IACf,MAAMM,aAAaD;IACnB,MAAMW,oBAAoBrB;IAE1BkB,MAAMhB,IAAI,CAACoB,SAAS,GAAGzB,aACrBI,qCAAqCC,IAAI,EACzCI,aAAac,OAAOd,SAAS,EAC7Ba,kBAAkB,UAAUR,WAAWA,UAAU,EACjDO,MAAMhB,IAAI,CAACoB,SAAS;IAGtB,MAAMd,mBAAmBV,KAAKyB,QAAQ,CAACL,MAAMhB,IAAI,CAACM,gBAAgB,EAAE;QAClEgB,aAAa;IACf;IACA,IAAIhB,kBAAkB;QACpBA,iBAAiBc,SAAS,GAAGzB,aAAauB,OAAOZ,gBAAgB,EAAEA,iBAAiBc,SAAS;QAC7FJ,MAAMhB,IAAI,CAACM,gBAAgB,GAAGA;IAChC;IAEA,IAAIU,MAAMf,QAAQ,EAAE;QAClBe,MAAMf,QAAQ,CAACmB,SAAS,GAAGzB,aACzBI,qCAAqCE,QAAQ,EAC7CkB,kBAAkBlB,QAAQ,EAC1Be,MAAMf,QAAQ,CAACmB,SAAS;QAG1B,MAAMG,MAAM3B,KAAKyB,QAAQ,CAACL,MAAMf,QAAQ,CAACsB,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIP,MAAMf,QAAQ,CAACwB,KAAK,KAAKC,WAAW;gBACtCH,IAAIH,SAAS,GAAGzB,aAAawB,kBAAkBQ,wBAAwB,EAAEJ,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGzB,aAAawB,kBAAkBS,kBAAkB,EAAEL,IAAIH,SAAS;YAClF;YACAJ,MAAMf,QAAQ,CAACsB,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}
@@ -3,4 +3,3 @@ export { AttachmentList, attachmentListClassNames, renderAttachmentList_unstable
3
3
  export { AttachmentOverflowMenu, renderAttachmentOverflowMenu_unstable, useAttachmentOverflowMenuContextValues_unstable, useAttachmentOverflowMenu_unstable } from './AttachmentOverflowMenu';
4
4
  export { AttachmentOverflowMenuButton, attachmentOverflowMenuButtonClassNames, renderAttachmentOverflowMenuButton_unstable, useAttachmentOverflowMenuButtonStyles_unstable, useAttachmentOverflowMenuButton_unstable } from './AttachmentOverflowMenuButton';
5
5
  export { AttachmentOverflowMenuItem, attachmentOverflowMenuItemClassNames, renderAttachmentOverflowMenuItem_unstable, useAttachmentOverflowMenuItemStyles_unstable, useAttachmentOverflowMenuItem_unstable } from './AttachmentOverflowMenuItem';
6
- //# sourceMappingURL=index.js.map
@@ -0,0 +1,42 @@
1
+ import { makeStyles } from '@fluentui/react-components';
2
+ import { tokens } from '@fluentui-copilot/tokens';
3
+ const indeterminateProgressBarReducedMotion = {
4
+ '0%': {
5
+ opacity: '.2'
6
+ },
7
+ '50%': {
8
+ opacity: '1'
9
+ },
10
+ '100%': {
11
+ opacity: '.2'
12
+ }
13
+ };
14
+ /**
15
+ * @internal
16
+ */ export const useProgressBarStyles = makeStyles({
17
+ progress: {
18
+ width: '100%',
19
+ position: 'absolute',
20
+ bottom: 0,
21
+ left: 0,
22
+ right: 0,
23
+ height: '4px',
24
+ borderBottomLeftRadius: tokens.borderRadiusMedium,
25
+ borderBottomRightRadius: tokens.borderRadiusMedium
26
+ },
27
+ regularProgressBar: {
28
+ height: '100%',
29
+ backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`
30
+ },
31
+ indeterminateProgressBar: {
32
+ height: '100%',
33
+ backgroundColor: tokens.colorTransparentBackground,
34
+ backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%, rgba(0,0,0,0))`,
35
+ '@media screen and (prefers-reduced-motion: reduce)': {
36
+ maxWidth: '100%',
37
+ animationIterationCount: 'infinite',
38
+ animationDuration: '3s',
39
+ animationName: indeterminateProgressBarReducedMotion
40
+ }
41
+ }
42
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2', // matches indeterminate bar width\n },\n '50%': {\n opacity: '1',\n },\n '100%': {\n opacity: '.2',\n },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n progress: {\n width: '100%',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n height: '4px',\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n },\n regularProgressBar: {\n height: '100%',\n backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`,\n },\n indeterminateProgressBar: {\n height: '100%',\n backgroundColor: tokens.colorTransparentBackground,\n backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%, rgba(0,0,0,0))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion,\n },\n },\n});\n"],"names":["makeStyles","tokens","indeterminateProgressBarReducedMotion","opacity","useProgressBarStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,6BAA6B;AACxD,SAASC,MAAM,QAAQ,2BAA2B;AAElD,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuBJ,WAAW;IAC7CK,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBX,OAAOY,kBAAkB;QACjDC,yBAAyBb,OAAOY,kBAAkB;IACpD;IACAE,oBAAoB;QAClBJ,QAAQ;QACRK,iBAAiB,CAAC,uBAAuB,EAAEf,OAAOgB,gBAAgB,CAAC,MAAM,EAAEhB,OAAOiB,gBAAgB,CAAC,MAAM,EAAEjB,OAAOkB,gBAAgB,CAAC,KAAK,CAAC;IAC3I;IACAC,0BAA0B;QACxBT,QAAQ;QACRU,iBAAiBpB,OAAOqB,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEf,OAAOgB,gBAAgB,CAAC,MAAM,EAAEhB,OAAOiB,gBAAgB,CAAC,MAAM,EAAEjB,OAAOkB,gBAAgB,CAAC,qBAAqB,CAAC;QAC3K,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAexB;QACjB;IACF;AACF,GAAG"}
@@ -1,10 +1,9 @@
1
1
  import { createContext, useContextSelector } from '@fluentui/react-context-selector';
2
2
  export const AttachmentListContext = createContext(undefined);
3
3
  const attachmentListContextDefaultValue = {
4
- onAttachmentDismiss: () => null,
5
- shouldUseOverflow: false,
6
- numberOfAttachments: 0
4
+ onAttachmentDismiss: ()=>null,
5
+ shouldUseOverflow: false,
6
+ numberOfAttachments: 0
7
7
  };
8
8
  export const AttachmentListProvider = AttachmentListContext.Provider;
9
- export const useAttachmentListContext_unstable = selector => useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));
10
- //# sourceMappingURL=attachmentListContext.js.map
9
+ export const useAttachmentListContext_unstable = (selector)=>useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue)=>selector(ctx));
@@ -1,10 +1,9 @@
1
1
  import { createContext, useContextSelector } from '@fluentui/react-context-selector';
2
2
  export const AttachmentOverflowMenuContext = createContext(undefined);
3
3
  const overflowMenuContextDefaultValue = {
4
- isOverflowing: false,
5
- overflowButtonRef: undefined,
6
- overflowCount: 0
4
+ isOverflowing: false,
5
+ overflowButtonRef: undefined,
6
+ overflowCount: 0
7
7
  };
8
8
  export const AttachmentOverflowMenuProvider = AttachmentOverflowMenuContext.Provider;
9
- export const useAttachmentOverflowMenuContext_unstable = selector => useContextSelector(AttachmentOverflowMenuContext, (ctx = overflowMenuContextDefaultValue) => selector(ctx));
10
- //# sourceMappingURL=attachmentOverflowMenuContext.js.map
9
+ export const useAttachmentOverflowMenuContext_unstable = (selector)=>useContextSelector(AttachmentOverflowMenuContext, (ctx = overflowMenuContextDefaultValue)=>selector(ctx));
package/lib/index.js CHANGED
@@ -6,4 +6,3 @@ export { AttachmentOverflowMenuContext, AttachmentOverflowMenuProvider, useAttac
6
6
  export { AttachmentOverflowMenuButton, attachmentOverflowMenuButtonClassNames, renderAttachmentOverflowMenuButton_unstable, useAttachmentOverflowMenuButtonStyles_unstable, useAttachmentOverflowMenuButton_unstable } from './AttachmentOverflowMenuButton';
7
7
  export { AttachmentOverflowMenuItem, attachmentOverflowMenuItemClassNames, renderAttachmentOverflowMenuItem_unstable, useAttachmentOverflowMenuItemStyles_unstable, useAttachmentOverflowMenuItem_unstable } from './AttachmentOverflowMenuItem';
8
8
  export { AgentTag, renderAgentTag_unstable, useAgentTag_unstable, agentTagClassNames, useAgentTagStyles_unstable } from './AgentTag';
9
- //# sourceMappingURL=index.js.map
@@ -26,4 +26,3 @@ _export(exports, {
26
26
  }
27
27
  });
28
28
  const _index = require("./components/AgentTag/index");
29
- //# sourceMappingURL=AgentTag.js.map
@@ -29,4 +29,3 @@ _export(exports, {
29
29
  }
30
30
  });
31
31
  const _index = require("./components/Attachment/index");
32
- //# sourceMappingURL=Attachment.js.map
@@ -26,4 +26,3 @@ _export(exports, {
26
26
  }
27
27
  });
28
28
  const _index = require("./components/AttachmentList/index");
29
- //# sourceMappingURL=AttachmentList.js.map
@@ -23,4 +23,3 @@ _export(exports, {
23
23
  }
24
24
  });
25
25
  const _index = require("./components/AttachmentOverflowMenu/index");
26
- //# sourceMappingURL=AttachmentOverflowMenu.js.map
@@ -26,4 +26,3 @@ _export(exports, {
26
26
  }
27
27
  });
28
28
  const _index = require("./components/AttachmentOverflowMenuButton/index");
29
- //# sourceMappingURL=AttachmentOverflowMenuButton.js.map
@@ -26,4 +26,3 @@ _export(exports, {
26
26
  }
27
27
  });
28
28
  const _index = require("./components/AttachmentOverflowMenuItem/index");
29
- //# sourceMappingURL=AttachmentOverflowMenuItem.js.map
@@ -18,4 +18,4 @@ const AgentTag = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
18
18
  (0, _useAgentTagStylesstyles.useAgentTagStyles_unstable)(state);
19
19
  return (0, _renderAgentTag.renderAgentTag_unstable)(state);
20
20
  });
21
- AgentTag.displayName = 'AgentTag'; //# sourceMappingURL=AgentTag.js.map
21
+ AgentTag.displayName = 'AgentTag';
@@ -1 +1 @@
1
- {"version":3,"sources":["AgentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAgentTag_unstable } from './useAgentTag';\nimport { renderAgentTag_unstable } from './renderAgentTag';\nimport { useAgentTagStyles_unstable } from './useAgentTagStyles.styles';\nimport type { AgentTagProps } from './AgentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// AgentTag component - TODO: add more docs\nexport const AgentTag: ForwardRefComponent<AgentTagProps> = React.forwardRef((props, ref) => {\n const state = useAgentTag_unstable(props, ref);\n\n useAgentTagStyles_unstable(state);\n return renderAgentTag_unstable(state);\n});\n\nAgentTag.displayName = 'AgentTag';\n"],"names":["AgentTag","React","forwardRef","props","state","useAgentTag_unstable","useAgentTagStyles_unstable","renderAgentTag_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACc;gCACG;yCACG;AAKpC,MAAMA,WAAAA,WAAAA,GAAAA,OAA+CC,UAAMC,CAAU,CAACC,OAACA;UAC5EC,QAAMA,IAAAA,iCAAQC,EAAAA,OAAqBF;2DAEnCG,EAAAA;WACAC,IAAAA,uCAAOA,EAAAA;AACT;AAEAP,SAASQ,WAAW,GAAG"}
1
+ {"version":3,"sources":["AgentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAgentTag_unstable } from './useAgentTag';\nimport { renderAgentTag_unstable } from './renderAgentTag';\nimport { useAgentTagStyles_unstable } from './useAgentTagStyles.styles';\nimport type { AgentTagProps } from './AgentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// AgentTag component - TODO: add more docs\nexport const AgentTag: ForwardRefComponent<AgentTagProps> = React.forwardRef((props, ref) => {\n const state = useAgentTag_unstable(props, ref);\n\n useAgentTagStyles_unstable(state);\n return renderAgentTag_unstable(state);\n});\n\nAgentTag.displayName = 'AgentTag';\n"],"names":["AgentTag","React","forwardRef","props","ref","state","useAgentTag_unstable","useAgentTagStyles_unstable","renderAgentTag_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;6BACc;gCACG;yCACG;AAKpC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAC3B,OAAOG,IAAAA,uCAAAA,EAAwBH;AACjC;AAEAL,SAASS,WAAW,GAAG"}
@@ -4,4 +4,3 @@
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- //# sourceMappingURL=AgentTag.types.js.map
@@ -29,4 +29,3 @@ const _AgentTag = require("./AgentTag");
29
29
  const _renderAgentTag = require("./renderAgentTag");
30
30
  const _useAgentTag = require("./useAgentTag");
31
31
  const _useAgentTagStylesstyles = require("./useAgentTagStyles.styles");
32
- //# sourceMappingURL=index.js.map
@@ -11,4 +11,4 @@ Object.defineProperty(exports, "renderAgentTag_unstable", {
11
11
  const _Attachment = require("../Attachment");
12
12
  const renderAgentTag_unstable = (state)=>{
13
13
  return (0, _Attachment.renderAttachment_unstable)(state);
14
- }; //# sourceMappingURL=renderAgentTag.js.map
14
+ };
@@ -1 +1 @@
1
- {"version":3,"sources":["renderAgentTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { renderAttachment_unstable } from '../Attachment';\nimport type { AgentTagState } from './AgentTag.types';\n\n/**\n * Render the final JSX of AgentTag\n */\nexport const renderAgentTag_unstable = (state: AgentTagState) => {\n return renderAttachment_unstable(state);\n};\n"],"names":["renderAttachment_unstable","state"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BAUSA;;;eAAAA;;;4BATT;AASE,MAAOA,0BAA0BC,CAAAA;IACjC,OAAAD,IAAAA,qCAAA,EAAAC"}
1
+ {"version":3,"sources":["renderAgentTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { renderAttachment_unstable } from '../Attachment';\nimport type { AgentTagState } from './AgentTag.types';\n\n/**\n * Render the final JSX of AgentTag\n */\nexport const renderAgentTag_unstable = (state: AgentTagState) => {\n return renderAttachment_unstable(state);\n};\n"],"names":["renderAgentTag_unstable","state","renderAttachment_unstable"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;AAQO,MAAMA,0BAA0B,CAACC;IACtC,OAAOC,IAAAA,qCAAAA,EAA0BD;AACnC"}
@@ -16,4 +16,4 @@ const useAgentTag_unstable = (props, ref)=>{
16
16
  designVersion: 'next'
17
17
  }, ref);
18
18
  return state;
19
- }; //# sourceMappingURL=useAgentTag.js.map
19
+ };
@@ -1 +1 @@
1
- {"version":3,"sources":["useAgentTag.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AgentTagProps, AgentTagState } from './AgentTag.types';\nimport { useAttachment_unstable } from '..';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render AgentTag.\n *\n * The returned state can be modified with hooks such as useAgentTagStyles_unstable,\n * before being passed to renderAgentTag_unstable.\n *\n * @param props - props from this instance of AgentTag\n * @param ref - reference to root HTMLElement of AgentTag\n */\nexport const useAgentTag_unstable = (props: AgentTagProps, ref: React.Ref<HTMLDivElement>): AgentTagState => {\n const state = useAttachment_unstable({ ...props, dismissOnly: true, designVersion: 'next' }, ref);\n\n return state;\n};\n"],"names":["state","useAttachment_unstable","ref","dismissOnly","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBQA;;;eAAAA;;;kBAd+B;AAcrC,MAAMA,uBAAQC,CAAAA,OAAuBC;UAAEF,QAAQC,IAAAA,wBAAA,EAAA;gBAAEE;qBAAmBC;QAAsBA,eAAGF;OAE7FA;IACA,OAAAF"}
1
+ {"version":3,"sources":["useAgentTag.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AgentTagProps, AgentTagState } from './AgentTag.types';\nimport { useAttachment_unstable } from '..';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render AgentTag.\n *\n * The returned state can be modified with hooks such as useAgentTagStyles_unstable,\n * before being passed to renderAgentTag_unstable.\n *\n * @param props - props from this instance of AgentTag\n * @param ref - reference to root HTMLElement of AgentTag\n */\nexport const useAgentTag_unstable = (props: AgentTagProps, ref: React.Ref<HTMLDivElement>): AgentTagState => {\n const state = useAttachment_unstable({ ...props, dismissOnly: true, designVersion: 'next' }, ref);\n\n return state;\n};\n"],"names":["useAgentTag_unstable","props","ref","state","useAttachment_unstable","dismissOnly","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;kBAb0B;AAahC,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,QAAQC,IAAAA,wBAAAA,EAAuB;QAAE,GAAGH,KAAK;QAAEI,aAAa;QAAMC,eAAe;IAAO,GAAGJ;IAE7F,OAAOC;AACT"}
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ agentTagClassNames: function() {
13
+ return agentTagClassNames;
14
+ },
15
+ useAgentTagStyles_unstable: function() {
16
+ return useAgentTagStyles_unstable;
17
+ }
18
+ });
19
+ const _reactcomponents = require("@fluentui/react-components");
20
+ const _ = require("..");
21
+ const _tokens = require("@fluentui-copilot/tokens");
22
+ const agentTagClassNames = {
23
+ root: 'fai-AgentTag',
24
+ primaryAction: 'fai-AgentTag__primaryAction',
25
+ dismissIcon: 'fai-AgentTag__dismissIcon',
26
+ dismissButton: 'fai-AgentTag__dismissButton',
27
+ media: 'fai-AgentTag__media',
28
+ content: 'fai-AgentTag__content',
29
+ progress: 'fai-AgentTag__progress'
30
+ };
31
+ const useMediaStyles = (0, _reactcomponents.makeStyles)({
32
+ canvas: {
33
+ width: '24px',
34
+ height: '24px'
35
+ },
36
+ sidecar: {
37
+ width: '20px',
38
+ height: '20px'
39
+ }
40
+ });
41
+ const useContentStyles = (0, _reactcomponents.makeStyles)({
42
+ canvas: {
43
+ ..._tokens.typographyStyles.subtitle2,
44
+ color: _tokens.tokens.colorNeutralForeground2
45
+ },
46
+ sidecar: {
47
+ ..._tokens.typographyStyles.body1Strong,
48
+ color: _tokens.tokens.colorNeutralForeground2
49
+ }
50
+ });
51
+ const useDismissButtonStyles = (0, _reactcomponents.makeStyles)({
52
+ canvas: {
53
+ borderRadius: _tokens.tokens.borderRadius2XL,
54
+ paddingLeft: _tokens.tokens.spacingHorizontalL,
55
+ paddingRight: _tokens.tokens.spacingHorizontalM
56
+ },
57
+ sidecar: {
58
+ paddingLeft: _tokens.tokens.spacingHorizontalM,
59
+ paddingRight: _tokens.tokens.spacingHorizontalS,
60
+ borderRadius: _tokens.tokens.borderRadiusXLarge
61
+ }
62
+ });
63
+ const useAgentTagStyles_unstable = (state)=>{
64
+ 'use no memo';
65
+ const { mode } = state;
66
+ const contentStyles = useContentStyles();
67
+ const dismissButtonStyles = useDismissButtonStyles();
68
+ const mediaStyles = useMediaStyles();
69
+ state.root.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.root, state.root.className);
70
+ state.primaryAction.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.primaryAction, state.primaryAction.className);
71
+ state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.dismissIcon, state.dismissIcon.className);
72
+ state.dismissButton.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.dismissButton, dismissButtonStyles[mode], state.dismissButton.className);
73
+ if (state.media) {
74
+ state.media.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.media, mediaStyles[mode], state.media.className);
75
+ }
76
+ state.content.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.content, contentStyles[mode], state.content.className);
77
+ if (state.progress) {
78
+ state.progress.className = (0, _reactcomponents.mergeClasses)(agentTagClassNames.progress, state.progress.className);
79
+ }
80
+ (0, _.useAttachmentStyles_unstable)(state);
81
+ return state;
82
+ };