@fluentui-copilot/react-attachments 0.0.0-nightly-20250305-0405-475751f6.1 → 0.0.0-nightly-20250307-0406-22aad7f2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +9 -9
- package/CHANGELOG.md +7 -7
- package/lib/components/Attachment/useAttachmentStyles.styles.js +2 -1
- package/lib/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js +2 -1
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +2 -1
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
- package/lib/components/AttachmentTag/useAttachmentTagStyles.styles.js +2 -1
- package/lib/components/AttachmentTag/useAttachmentTagStyles.styles.js.map +1 -1
- package/lib/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js +2 -1
- package/lib/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js.map +1 -1
- package/lib/components/AttachmentTagList/useAttachmentTagListStyles.styles.js +2 -1
- package/lib/components/AttachmentTagList/useAttachmentTagListStyles.styles.js.map +1 -1
- package/lib/components/utils/useProgressBarStyles.styles.js +2 -2
- package/lib/components/utils/useProgressBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js +7 -6
- package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentTag/useAttachmentTagStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentTagList/useAttachmentTagListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/utils/useProgressBarStyles.styles.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 07 Mar 2025 04:15:06 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
7
|
+
"version": "0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-attachments",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
20
|
+
"commit": "c2709ef00e79c0029ebe5106855c1d6d03099e03"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-attachments",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
26
|
+
"commit": "c2709ef00e79c0029ebe5106855c1d6d03099e03"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-attachments",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/tokens to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/tokens to v0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
32
|
+
"commit": "c2709ef00e79c0029ebe5106855c1d6d03099e03"
|
|
33
33
|
}
|
|
34
34
|
]
|
|
35
35
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-attachments
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 07 Mar 2025 04:15:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250307-0406-22aad7f2.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20250307-0406-22aad7f2.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.6..@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
9
|
+
Fri, 07 Mar 2025 04:15:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.6..@fluentui-copilot/react-attachments_v0.0.0-nightly-20250307-0406-22aad7f2.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20250307-0406-22aad7f2.1 ([commit](https://github.com/microsoft/fluentai/commit/c2709ef00e79c0029ebe5106855c1d6d03099e03) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20250307-0406-22aad7f2.1 ([commit](https://github.com/microsoft/fluentai/commit/c2709ef00e79c0029ebe5106855c1d6d03099e03) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-20250307-0406-22aad7f2.1 ([commit](https://github.com/microsoft/fluentai/commit/c2709ef00e79c0029ebe5106855c1d6d03099e03) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.10.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.6)
|
|
20
20
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, slot,
|
|
1
|
+
import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
|
|
3
4
|
export const attachmentClassNames = {
|
|
4
5
|
root: 'fai-Attachment',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const { imageOnly, primaryAction, size } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","imageOnly","size","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const { imageOnly, primaryAction, size } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","imageOnly","size","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
export const attachmentListClassNames = {
|
|
3
4
|
root: 'fai-AttachmentList',
|
|
4
5
|
menuList: 'fai-AttachmentList__menuList',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBR,gBAAgB;IAC3CS,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqCjB,gBAAgB;IACzDW,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,MAAMO,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBZ;IAC1B,MAAMa,8BAA8BJ;IAEpCE,MAAMf,IAAI,CAACkB,SAAS,GAAGrB,aAAaE,yBAAyBC,IAAI,EAAEgB,mBAAmBD,MAAMf,IAAI,CAACkB,SAAS;IAE1G,IAAIH,MAAMd,QAAQ,EAAE;QAClBc,MAAMd,QAAQ,CAACiB,SAAS,GAAGrB,aAAaE,yBAAyBE,QAAQ,EAAEc,MAAMd,QAAQ,CAACiB,SAAS;IACrG;IACA,IAAIH,MAAMb,WAAW,EAAE;QACrBa,MAAMb,WAAW,CAACgB,SAAS,GAAGrB,aAAaE,yBAAyBG,WAAW,EAAEa,MAAMb,WAAW,CAACgB,SAAS;IAC9G;IAEA,IAAIH,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACe,SAAS,GAAGrB,aACnCE,yBAAyBI,kBAAkB,EAC3Cc,6BACAF,MAAMZ,kBAAkB,CAACe,SAAS;IAEtC;IAEA,OAAOH;AACT,EAAE"}
|
package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses, slot,
|
|
1
|
+
import { __resetStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
|
|
3
4
|
export const attachmentOverflowMenuButtonClassNames = {
|
|
4
5
|
root: 'fai-AttachmentOverflowMenuButton',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot,
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","slot","typographyStyles","tokens","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","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,6BAA6B;AACnG,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAON,OAAOO,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBT,OAAOU,qBAAqB;IAC7CC,QAAQ,CAAC,EAAEX,OAAOY,eAAe,CAAC,OAAO,EAAEZ,OAAOa,mBAAmB,CAAC,CAAC;IACvEC,cAAcd,OAAOe,kBAAkB;IACvCC,WAAW;IACXC,WAAWjB,OAAOkB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYvB,iBAAiBwB,KAAK,CAACD,UAAU;IAC7CE,UAAUzB,iBAAiBwB,KAAK,CAACC,QAAQ;IACzCC,YAAY1B,iBAAiBwB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE3B,OAAO4B,iBAAiB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBT,OAAOgC,0BAA0B;QAClD1B,OAAON,OAAOiC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBT,OAAOkC,4BAA4B;QACpD5B,OAAON,OAAOmC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses,
|
|
1
|
+
import { __resetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
export const attachmentTagClassNames = {
|
|
3
4
|
root: 'fai-AttachmentTag',
|
|
4
5
|
media: 'fai-AttachmentTag__media',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses,
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentTagSlots, AttachmentTagState } from './AttachmentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagClassNames: SlotClassNames<AttachmentTagSlots> = {\n root: 'fai-AttachmentTag',\n media: 'fai-AttachmentTag__media',\n content: 'fai-AttachmentTag__content',\n icon: 'fai-AttachmentTag__icon',\n};\n\n/**\n * @internal\n */\nexport const ATTACHMENTTAG_MAXWIDTH = '180px';\nconst ATTACHMENTTAG_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n maxWidth: ATTACHMENTTAG_MAXWIDTH,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n verticalAlign: 'middle',\n\n ':hover': {\n borderColor: tokens.colorNeutralStroke1Hover,\n\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n\n ':hover:active': {\n borderColor: tokens.colorNeutralStroke1Pressed,\n\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n ':focus': {\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':focus:active': {\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\n/**\n * @internal\n */\nexport const useMediaBaseClassName = makeResetStyles({\n fontSize: ATTACHMENTTAG_SIZE,\n height: ATTACHMENTTAG_SIZE,\n lineHeight: ATTACHMENTTAG_SIZE,\n width: ATTACHMENTTAG_SIZE,\n});\n\n/**\n * @internal\n */\nexport const useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\n/**\n * @internal\n */\nexport const useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENTTAG_SIZE,\n height: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\n/**\n * Apply styling to the AttachmentTag slots based on the state\n */\nexport const useAttachmentTagStyles_unstable = (state: AttachmentTagState): AttachmentTagState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n state.root.className = mergeClasses(attachmentTagClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.media) {\n state.media.className = mergeClasses(attachmentTagClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.content.className = mergeClasses(\n attachmentTagClassNames.content,\n contentBaseClassName,\n state.content.className,\n );\n\n state.icon.className = mergeClasses(attachmentTagClassNames.icon, iconBaseClassName, state.icon.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","typographyStyles","tokens","attachmentTagClassNames","root","media","content","icon","ATTACHMENTTAG_MAXWIDTH","ATTACHMENTTAG_SIZE","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","justifyContent","maxWidth","padding","spacingVerticalXS","spacingHorizontalXS","spacingHorizontalS","verticalAlign","borderColor","colorNeutralStroke1Hover","colorBrandForegroundLinkHover","colorNeutralStroke1Pressed","colorNeutralForeground2BrandPressed","colorNeutralForeground2BrandHover","useMediaBaseClassName","fontSize","height","lineHeight","width","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","spacingHorizontalXXS","minWidth","useAttachmentTagStyles_unstable","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
import { ATTACHMENTTAG_MAXWIDTH, useContentBaseClassName, useIconBaseClassName, useMediaBaseClassName } from '../AttachmentTag/useAttachmentTagStyles.styles';
|
|
3
4
|
export const attachmentTagItemClassNames = {
|
|
4
5
|
root: 'fai-AttachmentTagItem',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport {\n ATTACHMENTTAG_MAXWIDTH,\n useContentBaseClassName,\n useIconBaseClassName,\n useMediaBaseClassName,\n} from '../AttachmentTag/useAttachmentTagStyles.styles';\nimport type { AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots> = {\n root: 'fai-AttachmentTagItem',\n media: 'fai-AttachmentTagItem__media',\n content: 'fai-AttachmentTagItem__content',\n icon: 'fai-AttachmentTagItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n columnGap: tokens.spacingHorizontalSNudge,\n maxWidth: ATTACHMENTTAG_MAXWIDTH,\n alignItems: 'center',\n});\n\n/**\n * Apply styling to the AttachmentTagItem slots based on the state\n */\nexport const useAttachmentTagItemStyles_unstable = (state: AttachmentTagItemState): AttachmentTagItemState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n state.root.className = mergeClasses(attachmentTagItemClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.media) {\n state.media.className = mergeClasses(attachmentTagItemClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.content.className = mergeClasses(\n attachmentTagItemClassNames.content,\n contentBaseClassName,\n state.content.className,\n );\n\n state.icon.className = mergeClasses(attachmentTagItemClassNames.icon, iconBaseClassName, state.icon.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","ATTACHMENTTAG_MAXWIDTH","useContentBaseClassName","useIconBaseClassName","useMediaBaseClassName","attachmentTagItemClassNames","root","media","content","icon","useRootBaseClassName","display","flexWrap","columnGap","spacingHorizontalSNudge","maxWidth","alignItems","useAttachmentTagItemStyles_unstable","state","rootBaseClassName","mediaBaseClassName","contentBaseClassName","iconBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SACEC,sBAAsB,EACtBC,uBAAuB,EACvBC,oBAAoB,EACpBC,qBAAqB,QAChB,iDAAiD;AAIxD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBZ,gBAAgB;IAC3Ca,SAAS;IACTC,UAAU;IACVC,WAAWb,OAAOc,uBAAuB;IACzCC,UAAUd;IACVe,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAMC,oBAAoBT;IAC1B,MAAMU,qBAAqBhB;IAC3B,MAAMiB,uBAAuBnB;IAC7B,MAAMoB,oBAAoBnB;IAE1Be,MAAMZ,IAAI,CAACiB,SAAS,GAAGxB,aAAaM,4BAA4BC,IAAI,EAAEa,mBAAmBD,MAAMZ,IAAI,CAACiB,SAAS;IAE7G,IAAIL,MAAMX,KAAK,EAAE;QACfW,MAAMX,KAAK,CAACgB,SAAS,GAAGxB,aAAaM,4BAA4BE,KAAK,EAAEa,oBAAoBF,MAAMX,KAAK,CAACgB,SAAS;IACnH;IAEAL,MAAMV,OAAO,CAACe,SAAS,GAAGxB,aACxBM,4BAA4BG,OAAO,EACnCa,sBACAH,MAAMV,OAAO,CAACe,SAAS;IAGzBL,MAAMT,IAAI,CAACc,SAAS,GAAGxB,aAAaM,4BAA4BI,IAAI,EAAEa,mBAAmBJ,MAAMT,IAAI,CAACc,SAAS;IAE7G,OAAOL;AACT,EAAE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { __resetStyles, mergeClasses
|
|
1
|
+
import { __resetStyles, mergeClasses } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
2
3
|
export const attachmentTagListClassNames = {
|
|
3
4
|
root: 'fai-AttachmentTagList'
|
|
4
5
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentTagListSlots, AttachmentTagListState } from './AttachmentTagList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagListClassNames: SlotClassNames<AttachmentTagListSlots> = {\n root: 'fai-AttachmentTagList',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentTagList slots based on the state\n */\nexport const useAttachmentTagListStyles_unstable = (state: AttachmentTagListState): AttachmentTagListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(attachmentTagListClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentTagListClassNames","root","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentTagListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;AAC3E,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB;IAC3CM,WAAWJ,OAAOK,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQV,OAAOW,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAMC,oBAAoBX;IAC1BU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,4BAA4BC,IAAI,EAAEY,mBAAmBD,MAAMX,IAAI,CAACa,SAAS;IAE7G,OAAOF;AACT,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { __styles
|
|
2
|
-
import { tokens
|
|
1
|
+
import { __styles } from '@fluentui/react-components';
|
|
2
|
+
import { tokens } from '@fluentui-copilot/tokens';
|
|
3
3
|
const indeterminateProgressBarReducedMotion = {
|
|
4
4
|
'0%': {
|
|
5
5
|
opacity: '.2'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles
|
|
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"}
|
|
@@ -20,6 +20,7 @@ _export(exports, {
|
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
22
|
const _reactcomponents = require("@fluentui/react-components");
|
|
23
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
23
24
|
const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
|
|
24
25
|
const attachmentClassNames = {
|
|
25
26
|
root: 'fai-Attachment',
|
|
@@ -38,18 +39,18 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r16wonf3", nul
|
|
|
38
39
|
]);
|
|
39
40
|
const buttonBaseStyles = {
|
|
40
41
|
alignItems: 'center',
|
|
41
|
-
backgroundColor:
|
|
42
|
-
border: `${
|
|
43
|
-
borderRadius:
|
|
42
|
+
backgroundColor: _tokens.tokens.colorSubtleBackground,
|
|
43
|
+
border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke1}`,
|
|
44
|
+
borderRadius: _tokens.tokens.borderRadiusMedium,
|
|
44
45
|
boxSizing: 'border-box',
|
|
45
|
-
columnGap:
|
|
46
|
-
color:
|
|
46
|
+
columnGap: _tokens.tokens.spacingHorizontalSNudge,
|
|
47
|
+
color: _tokens.tokens.colorNeutralForeground1,
|
|
47
48
|
cursor: 'pointer',
|
|
48
49
|
display: 'inline-flex',
|
|
49
50
|
flexWrap: 'nowrap',
|
|
50
51
|
justifyContent: 'center',
|
|
51
52
|
...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
|
|
52
|
-
outline: `${
|
|
53
|
+
outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorStrokeFocus2}`,
|
|
53
54
|
zIndex: 1
|
|
54
55
|
}),
|
|
55
56
|
verticalAlign: 'middle'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const { imageOnly, primaryAction, size } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","justifyContent","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","state","spacingVerticalXXS","primaryActionBaseClassName","useImageOnlyStyles","makeStyles","dismissIconBaseClassName","useProgressBarStyles","imageOnlyStyles","smallStyles","useSmallStyles","overflow","width","className","mergeClasses","rootBaseClassName","size","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","contentBaseClassName","elementType","bar","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const { imageOnly, primaryAction, size } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","justifyContent","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","state","spacingVerticalXXS","primaryActionBaseClassName","useImageOnlyStyles","makeStyles","dismissIconBaseClassName","useProgressBarStyles","imageOnlyStyles","smallStyles","useSmallStyles","overflow","width","className","mergeClasses","rootBaseClassName","size","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","contentBaseClassName","elementType","bar","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["attachmentListClassNames","flexWrap","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName","overflowMenuButtonClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAYXC,gCAAU;eAAVA;;;iCAjBoC;AAK/B,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;AAIzCR,MAAAA,mCAAUS,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,MAAAR,IAAA,CAAAW,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAE,IAAA,EAAAa,mBAAAL,MAAAR,IAAA,CAAAW,SAAA;IAEA,IAAAH,MAAAP,QAAA,EAAA;;IAEC;QAECO,MAAAN,WAAA,EAAA;QAEAM,MAAMK,WAAAA,CAAAA,SAAoBT,GAAAA,IAAAA,6BAAAA,EAAAA,yBAAAA,WAAAA,EAAAA,MAAAA,WAAAA,CAAAA,SAAAA;;QAG1BI,MAAMR,kBAAiBY,EAAAA;QAEvBJ,MAAIA,kBAAgB,CAAAG,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAK,kBAAA,EAAAW,6BAAAN,MAAAL,kBAAA,CAAAQ,SAAA;;WAEpBH;6DAE6CV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot,
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } 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\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalXS","verticalAlign","position","cursor","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground2Hover","indeterminateProgressBar","bar","regularProgressBar","colorNeutralForeground2Pressed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCArB4D;4CAEzB;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAAYC,qBAAAA,CAAAA,QAAOC,CAAAA,MAAAA,QAAqBD,CAAAA,GAAAA,EAAAA;YACxCE,aAAe;YACfC,iBAAU;QAEV;YACEC,KAAAA;gBACAC,MAAAA,QAAAA,CAAiBL,KAAAA,KAAOM,WAAAA;gBACxBpB,IAAAA,SAAOc,GAAOO,IAAAA,6BAAAA,EAAAA,kBAA4BC,wBAAA,EAAAC,IAAAf,SAAA;YAC5C,OAAA;gBACAe,IAAAf,SAAW,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAY,kBAAA,EAAAD,IAAAf,SAAA;;kBAETR,QAAOc,CAAAA,GAAOW,GAAAA;QAChB;;WAEEvB;2EAEA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses,
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentTagSlots, AttachmentTagState } from './AttachmentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagClassNames: SlotClassNames<AttachmentTagSlots> = {\n root: 'fai-AttachmentTag',\n media: 'fai-AttachmentTag__media',\n content: 'fai-AttachmentTag__content',\n icon: 'fai-AttachmentTag__icon',\n};\n\n/**\n * @internal\n */\nexport const ATTACHMENTTAG_MAXWIDTH = '180px';\nconst ATTACHMENTTAG_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n maxWidth: ATTACHMENTTAG_MAXWIDTH,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n verticalAlign: 'middle',\n\n ':hover': {\n borderColor: tokens.colorNeutralStroke1Hover,\n\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n\n ':hover:active': {\n borderColor: tokens.colorNeutralStroke1Pressed,\n\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n ':focus': {\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':focus:active': {\n [`& .${attachmentTagClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\n/**\n * @internal\n */\nexport const useMediaBaseClassName = makeResetStyles({\n fontSize: ATTACHMENTTAG_SIZE,\n height: ATTACHMENTTAG_SIZE,\n lineHeight: ATTACHMENTTAG_SIZE,\n width: ATTACHMENTTAG_SIZE,\n});\n\n/**\n * @internal\n */\nexport const useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\n/**\n * @internal\n */\nexport const useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENTTAG_SIZE,\n height: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENTTAG_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\n/**\n * Apply styling to the AttachmentTag slots based on the state\n */\nexport const useAttachmentTagStyles_unstable = (state: AttachmentTagState): AttachmentTagState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n state.root.className = mergeClasses(attachmentTagClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.media) {\n state.media.className = mergeClasses(attachmentTagClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.content.className = mergeClasses(\n attachmentTagClassNames.content,\n contentBaseClassName,\n state.content.className,\n );\n\n state.icon.className = mergeClasses(attachmentTagClassNames.icon, iconBaseClassName, state.icon.className);\n\n return state;\n};\n"],"names":["ATTACHMENTTAG_SIZE","attachmentTagClassNames","useAttachmentTagStyles_unstable","useContentBaseClassName","useIconBaseClassName","spacingVerticalXS","borderRadius","borderRadiusMedium","root","media","content","icon","useRootBaseClassName","color","colorNeutralForeground1","display","__resetStyles","padding","tokens","spacingHorizontalXS","state","rootBaseClassName","mediaBaseClassName","useMediaBaseClassName","borderColor","colorNeutralStroke1Pressed","iconBaseClassName","colorNeutralForeground2BrandPressed","className","mergeClasses","contentBaseClassName","colorNeutralForeground2BrandHover"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBMA,sBAAqB;eAArBA;;IAXOC,uBAAAA;eAAAA;;IAgCJC,+BAA+B;eAA/BA;;IAVEC,uBAAA;eAAAA;;IAIAC,oBAAUC;eAAVD;;IARTE,qBAAqBC;eAArBD;;;iCAvBsD;AAKjD,MAAML,0BAA8D;UACzEO;WACAC;aACAC;UACAC;AACF;AAMMX,MAAAA,yBAAqB;AAE3B,MAAMY,qBAAAA;MACJC,uBAAcC,IAAAA,8BAAuB,EAAA,YAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CAAA;AAIrCR,MAAAA,wBAAqBC,IAAAA,8BAAkB,EAAA,YAAA,MAAA;IAAA;CAAA;AAIvCQ,MAASZ,0BAAAa,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAITC,MAASb,uBAAUC,IAAAA,8BAAqBa,EAAAA,YAAOC,MAAAA;IAAAA;CAA8E;MAMtHjB,kCAAiCkB,CAAAA;;UAGxCC,oBAAAT;UAEAU,qBAAiBC;UACfC,uBAAoBC;UAEpBC,oBAAOzB;cACLY,CAAAA,SAAOK,GAAAA,IAAAA,6BAAOS,EAAAA,wBAAmCnB,IAAA,EAAAa,mBAAAD,MAAAZ,IAAA,CAAAoB,SAAA;cACnDnB,KAAA,EAAA;QACFW,MAAAX,KAAA,CAAAmB,SAAA,GAAAC,IAAAA,6BAAA,EAAA5B,wBAAAQ,KAAA,EAAAa,oBAAAF,MAAAX,KAAA,CAAAmB,SAAA;;UAGElB,OAAOT,CAAAA,SAAAA,GAAAA,IAAAA,6BAAwBU,EAAAA,wBAASD,OAAA,EAAAoB,sBAAAV,MAAAV,OAAA,CAAAkB,SAAA;cACtCf,CAAAA,SAAOK,GAAAA,IAAAA,6BAAOa,EAAAA,wBAAiCpB,IAAA,EAAAe,mBAAAN,MAAAT,IAAA,CAAAiB,SAAA;WACjDR;4DAGe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport {\n ATTACHMENTTAG_MAXWIDTH,\n useContentBaseClassName,\n useIconBaseClassName,\n useMediaBaseClassName,\n} from '../AttachmentTag/useAttachmentTagStyles.styles';\nimport type { AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots> = {\n root: 'fai-AttachmentTagItem',\n media: 'fai-AttachmentTagItem__media',\n content: 'fai-AttachmentTagItem__content',\n icon: 'fai-AttachmentTagItem__icon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n columnGap: tokens.spacingHorizontalSNudge,\n maxWidth: ATTACHMENTTAG_MAXWIDTH,\n alignItems: 'center',\n});\n\n/**\n * Apply styling to the AttachmentTagItem slots based on the state\n */\nexport const useAttachmentTagItemStyles_unstable = (state: AttachmentTagItemState): AttachmentTagItemState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n state.root.className = mergeClasses(attachmentTagItemClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.media) {\n state.media.className = mergeClasses(attachmentTagItemClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.content.className = mergeClasses(\n attachmentTagItemClassNames.content,\n contentBaseClassName,\n state.content.className,\n );\n\n state.icon.className = mergeClasses(attachmentTagItemClassNames.icon, iconBaseClassName, state.icon.className);\n\n return state;\n};\n"],"names":["attachmentTagItemClassNames","alignItems","root","media","content","icon","display","__resetStyles","state","mediaBaseClassName","useAttachmentTagItemStyles_unstable","contentBaseClassName","useContentBaseClassName","iconBaseClassName","rootBaseClassName","useRootBaseClassName","useMediaBaseClassName","useIconBaseClassName","mergeClasses","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAWaA,2BAAAA;eAAAA;;IAeXC,mCAAY;eAAZA;;;iCA1BoC;8CAO/B;AAIA,MAAMD,8BAAsE;UACjFE;WACAC;aACAC;UACAC;AACF;AAEA;;CAEC,SAECC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAITN,MAAAA,sCAAYO,CAAAA;IACd;;IAIC,MACDC,qBAAaC,IAAAA,mDAAAA;UACXC,uBAAAC,IAAAA,qDAAA;UAEAC,oBAAMC,IAAAA,kDAAoBC;UAC1Bb,IAAMO,CAAAA,SAAAA,GAAAA,IAAAA,6BAAqBO,EAAAA,4BAAAA,IAAAA,EAAAA,mBAAAA,MAAAA,IAAAA,CAAAA,SAAAA;QAC3BR,MAAMG,KAAAA,EAAAA;QACNH,MAAMK,KAAAA,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoBI,EAAAA,4BAAAA,KAAAA,EAAAA,oBAAAA,MAAAA,KAAAA,CAAAA,SAAAA;;UAItBT,OAAML,CAAAA,SAAO,GAAAe,IAAAA,6BAAA,EAAAlB,4BAAAI,OAAA,EAAAO,sBAAAH,MAAAJ,OAAA,CAAAe,SAAA;UACfX,IAAAA,CAAAA,SAAYW,GAAAA,IAAAA,6BAAYD,EAAAA,4BAAalB,IAAAA,EAAAA,mBAAmCS,MAAAA,IAAoBD,CAAAA,SAAW;WACzGA;gEAQoCR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentTagListSlots, AttachmentTagListState } from './AttachmentTagList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentTagListClassNames: SlotClassNames<AttachmentTagListSlots> = {\n root: 'fai-AttachmentTagList',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentTagList slots based on the state\n */\nexport const useAttachmentTagListStyles_unstable = (state: AttachmentTagListState): AttachmentTagListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(attachmentTagListClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["attachmentTagListClassNames","flexShrink","root","useRootBaseClassName","makeResetStyles","state","rootBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,2BAAAA;eAAAA;;IAQXC,mCAAY;eAAZA;;;iCAboC;AAK/B,MAAMD,8BAAsE;UACjFE;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;AAI3CH,MAAAA,sCAAYI,CAAAA;;IAGd,MAAAC,oBAAAH;IAEAE,MAAAH,IAAA,CAAAK,SAAA,GAAAC,IAAAA,6BAAA,EAAAR,4BAAAE,IAAA,EAAAI,mBAAAD,MAAAH,IAAA,CAAAK,SAAA;;gEAIE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles
|
|
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":["progress","indeterminateProgressBarReducedMotion","opacity","__styles","width","position","bottom","left","right","height","borderBottomLeftRadius","borderBottomRightRadius","tokens","Bbmb7ep","backgroundImage","Bcmaq0h","backgroundColor","maxWidth","animationIterationCount","animationDuration","animationName","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBEA;;;eAAAA;;;iCAnBiB;AAGnB,MAAMC,wCAAwC;UAC5C;iBACEC;;WAEF;iBACEA;;YAEF;iBACEA;;AAEJ;AAMEF,MAAAA,uBAAUG,IAAAA,yBAAA,EAAA;cACRC;gBACAC;gBACAC;iBACAC;gBACAC;YAAAA;YAAO;SAAA;gBACPC;YAAAA;YAAQ;SAAA;iBACRC;iBACAC;YAAAA;YAAAA;SAAyBC;QAC3BC,SAAA;YAAA;YAAA;SAAA;;wBAEU;iBACRC;QACFC,SAAA;;8BAEU;iBACRC;gBACAF;iBACA;gBACEG;iBACAC;iBACAC;gBACAC;;;IAGNC,GAAG;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
4
4
|
"description": "A set of components related to attaching files in Copilot experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-utilities": "0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/tokens": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
16
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
17
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20250307-0406-22aad7f2.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|