@fluentui-copilot/react-attachments 0.13.1 → 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.
- package/CHANGELOG.json +36 -0
- package/CHANGELOG.md +20 -1
- package/lib/AgentTag.js +0 -1
- package/lib/Attachment.js +0 -1
- package/lib/AttachmentList.js +0 -1
- package/lib/AttachmentOverflowMenu.js +0 -1
- package/lib/AttachmentOverflowMenuButton.js +0 -1
- package/lib/AttachmentOverflowMenuItem.js +0 -1
- package/lib/components/AgentTag/AgentTag.js +4 -5
- package/lib/components/AgentTag/AgentTag.types.js +1 -2
- package/lib/components/AgentTag/index.js +0 -1
- package/lib/components/AgentTag/renderAgentTag.js +3 -5
- package/lib/components/AgentTag/useAgentTag.js +7 -9
- package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js +66 -0
- package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js.map +1 -0
- package/lib/components/Attachment/Attachment.js +5 -6
- package/lib/components/Attachment/Attachment.types.js +1 -2
- package/lib/components/Attachment/index.js +0 -1
- package/lib/components/Attachment/renderAttachment.js +36 -31
- package/lib/components/Attachment/useAttachment.js +85 -95
- package/lib/components/Attachment/useAttachmentStyles.styles.raw.js +317 -0
- package/lib/components/Attachment/useAttachmentStyles.styles.raw.js.map +1 -0
- package/lib/components/AttachmentList/AttachmentList.js +6 -7
- package/lib/components/AttachmentList/AttachmentList.types.js +1 -2
- package/lib/components/AttachmentList/index.js +0 -1
- package/lib/components/AttachmentList/renderAttachmentList.js +25 -25
- package/lib/components/AttachmentList/useAttachmentList.js +113 -124
- package/lib/components/AttachmentList/useAttachmentListContextValues.js +10 -15
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.raw.js +44 -0
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.raw.js.map +1 -0
- package/lib/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js +8 -9
- package/lib/components/AttachmentOverflowMenu/AttachmentOverflowMenu.types.js +1 -2
- package/lib/components/AttachmentOverflowMenu/index.js +0 -1
- package/lib/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js +8 -13
- package/lib/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js +9 -15
- package/lib/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js +10 -15
- package/lib/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js +5 -6
- package/lib/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.types.js +1 -2
- package/lib/components/AttachmentOverflowMenuButton/index.js +0 -1
- package/lib/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js +11 -10
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js +51 -59
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js +102 -0
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js.map +1 -0
- package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js +4 -5
- package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js +1 -2
- package/lib/components/AttachmentOverflowMenuItem/index.js +0 -1
- package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js +9 -8
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +41 -49
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js +57 -0
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js.map +1 -0
- package/lib/components/index.js +0 -1
- package/lib/components/utils/useProgressBarStyles.styles.raw.js +42 -0
- package/lib/components/utils/useProgressBarStyles.styles.raw.js.map +1 -0
- package/lib/contexts/attachmentListContext.js +4 -5
- package/lib/contexts/attachmentOverflowMenuContext.js +4 -5
- package/lib/index.js +0 -1
- package/lib-commonjs/AgentTag.js +0 -1
- package/lib-commonjs/Attachment.js +0 -1
- package/lib-commonjs/AttachmentList.js +0 -1
- package/lib-commonjs/AttachmentOverflowMenu.js +0 -1
- package/lib-commonjs/AttachmentOverflowMenuButton.js +0 -1
- package/lib-commonjs/AttachmentOverflowMenuItem.js +0 -1
- package/lib-commonjs/components/AgentTag/AgentTag.js +1 -1
- package/lib-commonjs/components/AgentTag/AgentTag.js.map +1 -1
- package/lib-commonjs/components/AgentTag/AgentTag.types.js +0 -1
- package/lib-commonjs/components/AgentTag/index.js +0 -1
- package/lib-commonjs/components/AgentTag/renderAgentTag.js +1 -1
- package/lib-commonjs/components/AgentTag/renderAgentTag.js.map +1 -1
- package/lib-commonjs/components/AgentTag/useAgentTag.js +1 -1
- package/lib-commonjs/components/AgentTag/useAgentTag.js.map +1 -1
- package/lib-commonjs/components/AgentTag/useAgentTagStyles.styles.raw.js +82 -0
- package/lib-commonjs/components/AgentTag/useAgentTagStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Attachment/Attachment.js +1 -1
- package/lib-commonjs/components/Attachment/Attachment.js.map +1 -1
- package/lib-commonjs/components/Attachment/Attachment.types.js +0 -1
- package/lib-commonjs/components/Attachment/index.js +0 -1
- package/lib-commonjs/components/Attachment/renderAttachment.js +1 -1
- package/lib-commonjs/components/Attachment/renderAttachment.js.map +1 -1
- package/lib-commonjs/components/Attachment/useAttachment.js +1 -1
- package/lib-commonjs/components/Attachment/useAttachment.js.map +1 -1
- package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.raw.js +336 -0
- package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AttachmentList/AttachmentList.js +1 -1
- package/lib-commonjs/components/AttachmentList/AttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/AttachmentList.types.js +0 -1
- package/lib-commonjs/components/AttachmentList/index.js +0 -1
- package/lib-commonjs/components/AttachmentList/renderAttachmentList.js +1 -1
- package/lib-commonjs/components/AttachmentList/renderAttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListContextValues.js +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListContextValues.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.raw.js +60 -0
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.types.js +0 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/index.js +0 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.types.js +0 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/index.js +0 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js +118 -0
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js +0 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/index.js +0 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js +73 -0
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/index.js +0 -1
- package/lib-commonjs/components/utils/useProgressBarStyles.styles.raw.js +50 -0
- package/lib-commonjs/components/utils/useProgressBarStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/contexts/attachmentListContext.js +1 -1
- package/lib-commonjs/contexts/attachmentListContext.js.map +1 -1
- package/lib-commonjs/contexts/attachmentOverflowMenuContext.js +1 -1
- package/lib-commonjs/contexts/attachmentOverflowMenuContext.js.map +1 -1
- package/lib-commonjs/index.js +0 -1
- package/package.json +10 -10
|
@@ -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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
|
@@ -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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
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
|
package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js
ADDED
|
@@ -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"}
|
package/lib/components/index.js
CHANGED
|
@@ -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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
onAttachmentDismiss: ()=>null,
|
|
5
|
+
shouldUseOverflow: false,
|
|
6
|
+
numberOfAttachments: 0
|
|
7
7
|
};
|
|
8
8
|
export const AttachmentListProvider = AttachmentListContext.Provider;
|
|
9
|
-
export const useAttachmentListContext_unstable = selector
|
|
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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
isOverflowing: false,
|
|
5
|
+
overflowButtonRef: undefined,
|
|
6
|
+
overflowCount: 0
|
|
7
7
|
};
|
|
8
8
|
export const AttachmentOverflowMenuProvider = AttachmentOverflowMenuContext.Provider;
|
|
9
|
-
export const useAttachmentOverflowMenuContext_unstable = selector
|
|
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
|
package/lib-commonjs/AgentTag.js
CHANGED
|
@@ -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';
|
|
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,
|
|
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"}
|
|
@@ -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
|
-
};
|
|
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":["
|
|
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"}
|
|
@@ -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":["
|
|
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
|
+
};
|