@fluentui-copilot/react-attachments 0.0.0-nightly-20240527-0406-162a35f3.1 → 0.0.0-nightly-20240530-0404-c2e14c44.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 +7 -7
- package/CHANGELOG.md +6 -6
- package/lib/components/Attachment/useAttachmentStyles.styles.js +2 -0
- package/lib/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js +2 -0
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +2 -0
- package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +2 -0
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js +2 -0
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map +1 -1
- package/lib/components/AttachmentTag/useAttachmentTagStyles.styles.js +2 -0
- package/lib/components/AttachmentTag/useAttachmentTagStyles.styles.js.map +1 -1
- package/lib/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js +2 -0
- package/lib/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js.map +1 -1
- package/lib/components/AttachmentTagList/useAttachmentTagListStyles.styles.js +2 -0
- package/lib/components/AttachmentTagList/useAttachmentTagListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js +1 -0
- package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js +1 -0
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js +1 -0
- package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +1 -0
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js +1 -0
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentTag/useAttachmentTagStyles.styles.js +1 -0
- package/lib-commonjs/components/AttachmentTag/useAttachmentTagStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js +1 -0
- package/lib-commonjs/components/AttachmentTagItem/useAttachmentTagItemStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentTagList/useAttachmentTagListStyles.styles.js +1 -0
- package/lib-commonjs/components/AttachmentTagList/useAttachmentTagListStyles.styles.js.map +1 -1
- package/package.json +3 -3
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": "Thu, 30 May 2024 04:10:28 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20240530-0404-c2e14c44.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240530-0404-c2e14c44.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,14 +16,14 @@
|
|
|
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-20240530-0404-c2e14c44.1",
|
|
20
|
+
"commit": "41ea9f8fe5aca53381edae42789977021da57431"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-attachments",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/tokens to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/tokens to v0.0.0-nightly-20240530-0404-c2e14c44.1",
|
|
26
|
+
"commit": "41ea9f8fe5aca53381edae42789977021da57431"
|
|
27
27
|
}
|
|
28
28
|
]
|
|
29
29
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-attachments
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 30 May 2024 04:10:28 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-20240530-0404-c2e14c44.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20240530-0404-c2e14c44.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.4..@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
9
|
+
Thu, 30 May 2024 04:10:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.4..@fluentui-copilot/react-attachments_v0.0.0-nightly-20240530-0404-c2e14c44.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/tokens to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240530-0404-c2e14c44.1 ([commit](https://github.com/microsoft/fluentai/commit/41ea9f8fe5aca53381edae42789977021da57431) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-20240530-0404-c2e14c44.1 ([commit](https://github.com/microsoft/fluentai/commit/41ea9f8fe5aca53381edae42789977021da57431) by beachball)
|
|
17
17
|
|
|
18
18
|
## [0.9.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.4)
|
|
19
19
|
|
|
@@ -81,6 +81,8 @@ export const useOverflowStyles = __styles({
|
|
|
81
81
|
* Apply styling to the Attachment slots based on the state
|
|
82
82
|
*/
|
|
83
83
|
export const useAttachmentStyles_unstable = state => {
|
|
84
|
+
'use no memo';
|
|
85
|
+
|
|
84
86
|
const rootBaseClassName = useRootBaseClassName();
|
|
85
87
|
const primaryActionBaseClassName = usePrimaryActionBaseClassName();
|
|
86
88
|
const dismissButtonBaseClassName = useDismissButtonBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n ...shorthands.padding(0),\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n ...shorthands.padding(0),\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,+BAA+B,EAC/BC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AACpC,SAASC,oBAAoB,QAAQ,uCAAuC;AAI5E,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;AACZ,EAAE;AAEF,MAAMC,sBAAsB;AAC5B,MAAMC,kBAAkB;AAExB,MAAMC,uBAAuBlB,gBAAgB;IAC3CmB,SAAS;IACTC,UAAU;IACVC,eAAe;IACfC,WAAW;IACXC,OAAO;IACPC,WAAW;IACXC,UAAU;AACZ;AAEA,MAAMC,mBAAsC;IAC1CC,YAAY;IACZC,iBAAiBvB,OAAOwB,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEzB,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO2B,mBAAmB,CAAC,CAAC;IACvEC,cAAc5B,OAAO6B,kBAAkB;IACvCZ,WAAW;IACXa,WAAW9B,OAAO+B,uBAAuB;IACzCC,OAAOhC,OAAOiC,uBAAuB;IACrCC,QAAQ;IACRpB,SAAS;IACTC,UAAU;IACVoB,gBAAgB;IAChB,GAAGzC,gCAAgC;QACjC,GAAGI,WAAWsC,OAAO,CAACpC,OAAOqC,gBAAgB,EAAE,SAASrC,OAAOsC,iBAAiB,CAAC;QACjFC,QAAQ;IACV,EAAE;IACFvB,eAAe;AACjB;AAEA,MAAMwB,gCAAgC7C,gBAAgB;IACpD,GAAG0B,gBAAgB;IACnBoB,sBAAsBzC,OAAO0C,gBAAgB;IAC7CC,yBAAyB3C,OAAO0C,gBAAgB;IAChDE,kBAAkB;IAClBC,UAAU,CAAC,KAAK,EAAElC,oBAAoB,GAAG,EAAEC,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,GAAG,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC,CAAC;IAC9JC,SAAS,CAAC,EAAEhD,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAOkD,kBAAkB,CAAC,CAAC,EAAElD,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAOkD,kBAAkB,CAAC,CAAC;AAC9H;AAEA,MAAMC,yBAAyBvD,WAAW;IACxCwD,QAAQ;QACN,UAAU;YACRlB,QAAQ;YACRX,iBAAiBvB,OAAOqD,4BAA4B;YACpDrB,OAAOhC,OAAOsD,4BAA4B;QAC5C;QACA,WAAW;YACT/B,iBAAiBvB,OAAOuD,8BAA8B;YACtDvB,OAAOhC,OAAOwD,8BAA8B;QAC9C;QACA,kCAAkC;YAChC,UAAU;gBACRjC,iBAAiB;YACnB;YACA,WAAW;gBACTA,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMkC,gCAAgC9D,gBAAgB;IACpD,GAAG0B,gBAAgB;IAEnB2B,SAAS,CAAC,EAAEhD,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAO+C,mBAAmB,CAAC,CAAC,EAAE/C,OAAOiD,iBAAiB,CAAC,CAAC,EAAEjD,OAAO+C,mBAAmB,CAAC,CAAC;IAC9HF,UAAU,CAAC,KAAK,EAAEjC,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,IAAI,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC;IACrIW,UAAU,CAAC,KAAK,EAAE9C,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,IAAI,EAAE9C,OAAO+C,mBAAmB,CAAC,CAAC;IAErI,WAAW;IACXY,iBAAiB3D,OAAO2B,mBAAmB;IAC3CiC,qBAAqB5D,OAAO0C,gBAAgB;IAC5CmB,wBAAwB7D,OAAO0C,gBAAgB;IAE/CD,sBAAsBzC,OAAO6B,kBAAkB;IAC/Cc,yBAAyB3C,OAAO6B,kBAAkB;IAElD,UAAU;QACRK,QAAQ;QACRX,iBAAiBvB,OAAOqD,4BAA4B;QACpDrB,OAAOhC,OAAO8D,iCAAiC;QAC/C,CAAC,CAAC,GAAG,EAAE3D,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;YAC1CuB,OAAOhC,OAAO+D,6BAA6B;QAC7C;IACF;IACA,WAAW;QACTxC,iBAAiBvB,OAAOuD,8BAA8B;QACtDvB,OAAOhC,OAAOgE,mCAAmC;IACnD;IACA,UAAU;QACR,CAAC,CAAC,GAAG,EAAE7D,qBAAqBM,WAAW,CAAC,CAAC,CAAC,EAAE;YAC1CuB,OAAOhC,OAAO8D,iCAAiC;QACjD;IACF;IACA,kCAAkC;QAChC,UAAU;YACRvC,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA,MAAM0C,wBAAwBtE,gBAAgB;IAC5CmB,SAAS;IACToD,UAAUtD;IACVuD,QAAQvD;IACRwD,YAAYxD;IACZM,OAAON;AACT;AAEA,MAAMyD,0BAA0B1E,gBAAgB;IAC9C2E,WAAW;IACXC,cAAc;IACdC,YAAY;IACZ,GAAGvE,iBAAiBwE,KAAK;AAC3B;AAEA,MAAMC,8BAA8B/E,gBAAgB;IAClD2B,YAAY;IACZM,cAAc5B,OAAO2E,oBAAoB;IACzClD,QAAQ,CAAC,EAAEzB,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO4E,sBAAsB,CAAC,CAAC;IAC1E3D,WAAW;IACXe,OAAOhC,OAAOiC,uBAAuB;IACrCnB,SAAS;IACToD,UAAUtD;IACVuD,QAAQ,CAAC,KAAK,EAAEvD,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO6E,kBAAkB,CAAC,CAAC,CAAC;IACjG1C,gBAAgB;IAChBU,UAAU,CAAC,KAAK,EAAEjC,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,CAAC,CAAC;IACrGY,UAAU,CAAC,KAAK,EAAE9C,gBAAgB,GAAG,EAAEZ,OAAO0B,eAAe,CAAC,OAAO,EAAE1B,OAAO8C,oBAAoB,CAAC,CAAC,CAAC;IACrGE,SAAS,CAAC,KAAK,EAAEhD,OAAO6E,kBAAkB,CAAC,WAAW,EAAE7E,OAAO8C,oBAAoB,CAAC,KAAK,CAAC;AAC5F;AAEA,MAAMgC,qBAAqBlF,WAAW;IACpCS,eAAe;QACb,GAAGP,WAAWkD,OAAO,CAAC,EAAE;IAC1B;IACAxC,SAAS;QACP4D,YAAY;IACd;AACF;AAEA,OAAO,MAAMW,oBAAoBnF,WAAW;IAC1CoF,UAAU;QACR9D,OAAO;IACT;AACF,GAAG;AAEH;;CAEC,GACD,OAAO,MAAM+D,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,oBAAoBtE;IAC1B,MAAMuE,6BAA6B5C;IACnC,MAAM6C,6BAA6B5B;IACnC,MAAM6B,qBAAqBrB;IAC3B,MAAMsB,uBAAuBlB;IAC7B,MAAMmB,2BAA2Bd;IACjC,MAAMe,oBAAoBvF;IAC1B,MAAMwF,sBAAsBvC;IAC5B,MAAMwC,kBAAkBb;IACxB,MAAM,EAAEc,SAAS,EAAEvF,aAAa,EAAE,GAAG6E;IAErCA,MAAM9E,IAAI,CAACyF,SAAS,GAAGhG,aAAaM,qBAAqBC,IAAI,EAAE+E,mBAAmBD,MAAM9E,IAAI,CAACyF,SAAS;IACtGX,MAAM7E,aAAa,CAACwF,SAAS,GAAGhG,aAC9BM,qBAAqBE,aAAa,EAClC+E,4BACA/E,cAAcyF,EAAE,KAAK,UAAU,CAACZ,MAAMa,SAAS,IAAIL,oBAAoBtC,MAAM,EAC7EwC,aAAaD,gBAAgBtF,aAAa,EAC1C6E,MAAM7E,aAAa,CAACwF,SAAS;IAE/BX,MAAM5E,aAAa,CAACuF,SAAS,GAAGhG,aAC9BM,qBAAqBG,aAAa,EAClC+E,4BACAH,MAAM5E,aAAa,CAACuF,SAAS;IAE/B,IAAIX,MAAM3E,KAAK,EAAE;QACf2E,MAAM3E,KAAK,CAACsF,SAAS,GAAGhG,aAAaM,qBAAqBI,KAAK,EAAE+E,oBAAoBJ,MAAM3E,KAAK,CAACsF,SAAS;IAC5G;IACAX,MAAM1E,OAAO,CAACqF,SAAS,GAAGhG,aACxBM,qBAAqBK,OAAO,EAC5B+E,sBACAK,aAAaD,gBAAgBnF,OAAO,EACpC0E,MAAM1E,OAAO,CAACqF,SAAS;IAEzBX,MAAMzE,WAAW,CAACoF,SAAS,GAAGhG,aAC5BM,qBAAqBM,WAAW,EAChC+E,0BACAN,MAAMzE,WAAW,CAACoF,SAAS;IAG7B,IAAIX,MAAMxE,QAAQ,EAAE;QAClBwE,MAAMxE,QAAQ,CAACmF,SAAS,GAAGhG,aACzBM,qBAAqBO,QAAQ,EAC7B+E,kBAAkB/E,QAAQ,EAC1BwE,MAAMxE,QAAQ,CAACmF,SAAS;QAG1B,MAAMG,MAAMjG,KAAKkG,QAAQ,CAACf,MAAMxE,QAAQ,CAACsF,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAId,MAAMxE,QAAQ,CAAC0F,KAAK,KAAKC,WAAW;gBACtCL,IAAIH,SAAS,GAAGhG,aAAa4F,kBAAkBa,wBAAwB,EAAEN,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGhG,aAAa4F,kBAAkBc,kBAAkB,EAAEP,IAAIH,SAAS;YAClF;YACAX,MAAMxE,QAAQ,CAACsF,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOd;AACT,EAAE"}
|
|
@@ -9,6 +9,8 @@ const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-
|
|
|
9
9
|
* Apply styling to the AttachmentList slots based on the state
|
|
10
10
|
*/
|
|
11
11
|
export const useAttachmentListStyles_unstable = state => {
|
|
12
|
+
'use no memo';
|
|
13
|
+
|
|
12
14
|
const rootBaseClassName = useRootBaseClassName();
|
|
13
15
|
state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
|
|
14
16
|
if (state.overflowMenuButton) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,oBAAoB;IACpBC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAWN,OAAOO,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBX;IAC1BU,MAAMb,IAAI,CAACe,SAAS,GAAGlB,aAAaE,yBAAyBC,IAAI,EAAEc,mBAAmBD,MAAMb,IAAI,CAACe,SAAS;IAE1G,IAAIF,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACc,SAAS,GAAGlB,aACnCE,yBAAyBE,kBAAkB,EAC3CY,MAAMZ,kBAAkB,CAACc,SAAS;IAEtC;IAEA,IAAIF,MAAMX,gBAAgB,EAAE;QAC1BW,MAAMX,gBAAgB,CAACa,SAAS,GAAGlB,aACjCE,yBAAyBG,gBAAgB,EACzCW,MAAMX,gBAAgB,CAACa,SAAS;IAEpC;IACA,OAAOF;AACT,EAAE"}
|
package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js
CHANGED
|
@@ -12,6 +12,8 @@ const useRootBaseClassName = __resetStyles("r1opa2g9", null, {
|
|
|
12
12
|
* Apply styling to the AttachmentOverflowMenuButton slots based on the state
|
|
13
13
|
*/
|
|
14
14
|
export const useAttachmentOverflowMenuButtonStyles_unstable = state => {
|
|
15
|
+
'use no memo';
|
|
16
|
+
|
|
15
17
|
const rootBaseClassName = useRootBaseClassName();
|
|
16
18
|
const progressBarStyles = useProgressBarStyles();
|
|
17
19
|
state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: tokens.spacingVerticalS,\n verticalAlign: 'middle',\n alignSelf: 'end',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: tokens.spacingVerticalS,\n verticalAlign: 'middle',\n alignSelf: 'end',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS5B,OAAO6B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IACXC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,4BAA4B;QACpD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,8BAA8B;QACtD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -12,6 +12,8 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
|
|
|
12
12
|
* @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem
|
|
13
13
|
*/
|
|
14
14
|
export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
|
|
15
|
+
'use no memo';
|
|
16
|
+
|
|
15
17
|
const {
|
|
16
18
|
imageOnly,
|
|
17
19
|
media
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n const { imageOnly, media } = props;\n const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <DismissIcon />, ...props, id: menuItemId },\n { elementType: MenuItem },\n );\n root.onClick = mergeCallbacks(root.onClick, ev => {\n onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n return {\n components: {\n root: MenuItem,\n progress: ProgressBar,\n },\n root,\n progress,\n isVisible,\n imageOnly,\n };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useId","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","DismissIcon","menuItemId","id","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","content","children","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, media } = props;\n const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <DismissIcon />, ...props, id: menuItemId },\n { elementType: MenuItem },\n );\n root.onClick = mergeCallbacks(root.onClick, ev => {\n onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n return {\n components: {\n root: MenuItem,\n progress: ProgressBar,\n },\n root,\n progress,\n isVisible,\n imageOnly,\n };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useId","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","DismissIcon","menuItemId","id","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","content","children","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,KAAK,EACLC,wBAAwB,QACnB,6BAA6B;AACpC,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IAC7B,MAAMI,cAAcP,WAAWF,iBAAiBC;IAChD,MAAMS,aAAaZ,MAAM,eAAeO,MAAMM,EAAE;IAChD,MAAMC,YAAYb,yBAAyBW;IAC3C,MAAM,EAAEG,mBAAmB,EAAE,GAAGV,kCAAkCW,CAAAA,UAAWA;IAE7E,MAAMC,OAAOlB,KAAKmB,MAAM,CACtB;QAAEV;QAAKW,MAAMT;QAAOU,gCAAkB,oBAACT;QAAgB,GAAGJ,KAAK;QAAEM,IAAID;IAAW,GAChF;QAAES,aAAazB;IAAS;IAE1BqB,KAAKK,OAAO,GAAGxB,eAAemB,KAAKK,OAAO,EAAEC,CAAAA;QAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YAAEC,SAASjB,MAAMkB,QAAQ;YAAEf;YAAOG,IAAID;QAAW;IAC7E;IAEA,MAAMc,WAAW3B,KAAK4B,QAAQ,CAACpB,MAAMmB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmBvB,MAAMM,EAAE;QAC7B;QACAQ,aAAaxB;IACf;IAEA,OAAO;QACLkC,YAAY;YACVd,MAAMrB;YACN8B,UAAU7B;QACZ;QACAoB;QACAS;QACAZ;QACAL;IACF;AACF,EAAE"}
|
package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuItemSlots,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n root: 'fai-AttachmentOverflowMenuItem',\n progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n imageOnly: {\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n const { imageOnly } = state;\n const styles = useStyles();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.root,\n imageOnly && styles.imageOnly,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","slot","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","styles","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuItemSlots,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n root: 'fai-AttachmentOverflowMenuItem',\n progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n imageOnly: {\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly } = state;\n const styles = useStyles();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.root,\n imageOnly && styles.imageOnly,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","slot","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","styles","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BQ,WAAW;QACTC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,SAASL;IACf,MAAMM,oBAAoBV;IAE1BQ,MAAMN,IAAI,CAACS,SAAS,GAAGb,aACrBG,qCAAqCC,IAAI,EACzCG,aAAaI,OAAOJ,SAAS,EAC7BG,MAAMN,IAAI,CAACS,SAAS;IAGtB,IAAIH,MAAML,QAAQ,EAAE;QAClBK,MAAML,QAAQ,CAACQ,SAAS,GAAGb,aACzBG,qCAAqCE,QAAQ,EAC7CO,kBAAkBP,QAAQ,EAC1BK,MAAML,QAAQ,CAACQ,SAAS;QAG1B,MAAMC,MAAMb,KAAKc,QAAQ,CAACL,MAAML,QAAQ,CAACS,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAML,QAAQ,CAACa,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAGb,aAAaY,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAGb,aAAaY,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAML,QAAQ,CAACS,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
|
|
@@ -27,6 +27,8 @@ export const useIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{
|
|
|
27
27
|
* Apply styling to the AttachmentTag slots based on the state
|
|
28
28
|
*/
|
|
29
29
|
export const useAttachmentTagStyles_unstable = state => {
|
|
30
|
+
'use no memo';
|
|
31
|
+
|
|
30
32
|
const rootBaseClassName = useRootBaseClassName();
|
|
31
33
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
32
34
|
const contentBaseClassName = useContentBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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 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","tokens","typographyStyles","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":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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","tokens","typographyStyles","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":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIrG,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,QAAQ;AAC9C,MAAMC,qBAAqB;AAE3B,MAAMC,uBAAuBX,gBAAgB;IAC3CY,OAAOV,OAAOW,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBb,OAAOc,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOiB,mBAAmB,CAAC,CAAC;IACvEC,cAAclB,OAAOmB,kBAAkB;IACvCC,WAAW;IACXC,WAAWrB,OAAOsB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,gBAAgB;IAChBC,UAAUpB;IACVqB,SAAS,CAAC,EAAE5B,OAAO6B,iBAAiB,CAAC,CAAC,EAAE7B,OAAO8B,mBAAmB,CAAC,CAAC,EAAE9B,OAAO6B,iBAAiB,CAAC,CAAC,EAAE7B,OAAO+B,kBAAkB,CAAC,CAAC;IAC7HC,eAAe;IAEf,UAAU;QACRC,aAAajC,OAAOkC,wBAAwB;QAE5C,CAAC,CAAC,GAAG,EAAEhC,wBAAwBI,IAAI,CAAC,CAAC,CAAC,EAAE;YACtCI,OAAOV,OAAOmC,6BAA6B;QAC7C;IACF;IAEA,iBAAiB;QACfF,aAAajC,OAAOoC,0BAA0B;QAE9C,CAAC,CAAC,GAAG,EAAElC,wBAAwBI,IAAI,CAAC,CAAC,CAAC,EAAE;YACtCI,OAAOV,OAAOqC,mCAAmC;QACnD;IACF;IAEA,UAAU;QACR,CAAC,CAAC,GAAG,EAAEnC,wBAAwBI,IAAI,CAAC,CAAC,CAAC,EAAE;YACtCI,OAAOV,OAAOsC,iCAAiC;QACjD;IACF;IAEA,iBAAiB;QACf,CAAC,CAAC,GAAG,EAAEpC,wBAAwBI,IAAI,CAAC,CAAC,CAAC,EAAE;YACtCI,OAAOV,OAAOqC,mCAAmC;QACnD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,wBAAwBzC,gBAAgB;IACnD0C,UAAUhC;IACViC,QAAQjC;IACRkC,YAAYlC;IACZmC,OAAOnC;AACT,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMoC,0BAA0B9C,gBAAgB;IACrD+C,WAAW;IACXC,cAAc;IACdC,YAAY;IACZ,GAAG9C,iBAAiB+C,KAAK;AAC3B,GAAG;AAEH;;CAEC,GACD,OAAO,MAAMC,uBAAuBnD,gBAAgB;IAClDc,YAAY;IACZM,cAAclB,OAAOkD,oBAAoB;IACzCnC,QAAQ,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOmD,sBAAsB,CAAC,CAAC;IAC1E/B,WAAW;IACXV,OAAOV,OAAOW,uBAAuB;IACrCa,SAAS;IACTgB,UAAUhC;IACViC,QAAQ,CAAC,KAAK,EAAEjC,mBAAmB,GAAG,EAAER,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOoD,kBAAkB,CAAC,CAAC,CAAC;IACpG1B,gBAAgB;IAChBC,UAAU,CAAC,KAAK,EAAEnB,mBAAmB,GAAG,EAAER,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOqD,oBAAoB,CAAC,CAAC,CAAC;IACxGC,UAAU,CAAC,KAAK,EAAE9C,mBAAmB,GAAG,EAAER,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOqD,oBAAoB,CAAC,CAAC,CAAC;IACxGzB,SAAS,CAAC,KAAK,EAAE5B,OAAOoD,kBAAkB,CAAC,WAAW,EAAEpD,OAAOqD,oBAAoB,CAAC,KAAK,CAAC;AAC5F,GAAG;AAEH;;CAEC,GACD,OAAO,MAAME,kCAAkC,CAACC;IAC9C;IAEA,MAAMC,oBAAoBhD;IAC1B,MAAMiD,qBAAqBnB;IAC3B,MAAMoB,uBAAuBf;IAC7B,MAAMgB,oBAAoBX;IAE1BO,MAAMrD,IAAI,CAAC0D,SAAS,GAAG9D,aAAaG,wBAAwBC,IAAI,EAAEsD,mBAAmBD,MAAMrD,IAAI,CAAC0D,SAAS;IAEzG,IAAIL,MAAMpD,KAAK,EAAE;QACfoD,MAAMpD,KAAK,CAACyD,SAAS,GAAG9D,aAAaG,wBAAwBE,KAAK,EAAEsD,oBAAoBF,MAAMpD,KAAK,CAACyD,SAAS;IAC/G;IAEAL,MAAMnD,OAAO,CAACwD,SAAS,GAAG9D,aACxBG,wBAAwBG,OAAO,EAC/BsD,sBACAH,MAAMnD,OAAO,CAACwD,SAAS;IAGzBL,MAAMlD,IAAI,CAACuD,SAAS,GAAG9D,aAAaG,wBAAwBI,IAAI,EAAEsD,mBAAmBJ,MAAMlD,IAAI,CAACuD,SAAS;IAEzG,OAAOL;AACT,EAAE"}
|
|
@@ -14,6 +14,8 @@ const useRootBaseClassName = __resetStyles("rcbi0rb", null, [".rcbi0rb{display:i
|
|
|
14
14
|
* Apply styling to the AttachmentTagItem slots based on the state
|
|
15
15
|
*/
|
|
16
16
|
export const useAttachmentTagItemStyles_unstable = state => {
|
|
17
|
+
'use no memo';
|
|
18
|
+
|
|
17
19
|
const rootBaseClassName = useRootBaseClassName();
|
|
18
20
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
19
21
|
const contentBaseClassName = useContentBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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,EAAEC,MAAM,QAAQ,6BAA6B;AACnF,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"}
|
|
@@ -7,6 +7,8 @@ const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-
|
|
|
7
7
|
* Apply styling to the AttachmentTagList slots based on the state
|
|
8
8
|
*/
|
|
9
9
|
export const useAttachmentTagListStyles_unstable = state => {
|
|
10
|
+
'use no memo';
|
|
11
|
+
|
|
10
12
|
const rootBaseClassName = useRootBaseClassName();
|
|
11
13
|
state.root.className = mergeClasses(attachmentTagListClassNames.root, rootBaseClassName, state.root.className);
|
|
12
14
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,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"}
|
|
@@ -158,6 +158,7 @@ const useOverflowStyles = (0, _reactcomponents.__styles)({
|
|
|
158
158
|
]
|
|
159
159
|
});
|
|
160
160
|
const useAttachmentStyles_unstable = (state)=>{
|
|
161
|
+
'use no memo';
|
|
161
162
|
const rootBaseClassName = useRootBaseClassName();
|
|
162
163
|
const primaryActionBaseClassName = usePrimaryActionBaseClassName();
|
|
163
164
|
const dismissButtonBaseClassName = useDismissButtonBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n ...shorthands.padding(0),\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","backgroundColor","colorNeutralBackground3Hover","maxWidth","ATTACHMENT_SIZE","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","a9b677","borderBottomLeftRadius","colorNeutralForeground2BrandHover","primaryActionBaseClassName","colorBrandForegroundLinkHover","mediaBaseClassName","useMediaBaseClassName","contentBaseClassName","useContentBaseClassName","dismissIconBaseClassName","useDismissIconBaseClassName","colorNeutralForeground2BrandPressed","imageOnlyStyles","useImageOnlyStyles","className","mergeClasses","rootBaseClassName","state","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","progressBarStyles","fontSize","height","lineHeight","width","bar","indeterminateProgressBar","overflowX","regularProgressBar","textOverflow","whiteSpace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n ...shorthands.padding(0),\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n width: '100%',\n },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","backgroundColor","colorNeutralBackground3Hover","maxWidth","ATTACHMENT_SIZE","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","a9b677","borderBottomLeftRadius","colorBrandForegroundLinkHover","primaryActionBaseClassName","dismissButtonBaseClassName","useDismissButtonBaseClassName","mediaBaseClassName","useMediaBaseClassName","colorNeutralForeground2BrandPressed","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnlyStyles","state","className","mergeClasses","rootBaseClassName","as","isLoading","imageOnly","contentBaseClassName","dismissIconBaseClassName","fontSize","height","lineHeight","width","bar","useContentBaseClassName","overflowX","indeterminateProgressBar","textOverflow","whiteSpace","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -26,6 +26,7 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", nul
|
|
|
26
26
|
".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"
|
|
27
27
|
]);
|
|
28
28
|
const useAttachmentListStyles_unstable = (state)=>{
|
|
29
|
+
'use no memo';
|
|
29
30
|
const rootBaseClassName = useRootBaseClassName();
|
|
30
31
|
state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
|
|
31
32
|
if (state.overflowMenuButton) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["attachmentListClassNames","flexShrink","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","makeResetStyles","state","
|
|
1
|
+
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n state.overflowMenuButton.className,\n );\n }\n\n if (state.overflowMenuItem) {\n state.overflowMenuItem.className = mergeClasses(\n attachmentListClassNames.overflowMenuItem,\n state.overflowMenuItem.className,\n );\n }\n return state;\n};\n"],"names":["attachmentListClassNames","flexShrink","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","makeResetStyles","state","rootBaseClassName","className","mergeClasses","useAttachmentListStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAUXC,gCAAY;eAAZA;;;iCAd4C;AAIvC,MAAMD,2BAAgE;UAC3EE;wBACAC;sBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;AAI3CL,MAAAA,mCAAYM,CAAAA;;IAGd,MAAAC,oBAAAH;IAEAE,MAAAL,IAAA,CAAAO,SAAA,GAAAC,IAAAA,6BAAA,EAAAV,yBAAAE,IAAA,EAAAM,mBAAAD,MAAAL,IAAA,CAAAO,SAAA;;QAGAF,MAAAJ,kBAAaQ,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoCJ,EAAAA,yBAAAA,kBAAAA,EAAAA,MAAAA,kBAAAA,CAAAA,SAAAA;;QAG/CA,MAAMC,gBAAAA,EAAoBH;QAC1BE,MAAML,gBAAc,CAAGQ,SAAAA,GAAAA,IAAAA,6BAAaV,EAAAA,yBAA+BQ,gBAAmBD,EAAAA,MAAWE,gBAAS,CAAAA,SAAA;;WAGxGF;6DAM0B"}
|
|
@@ -33,6 +33,7 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1opa2g9", nul
|
|
|
33
33
|
]
|
|
34
34
|
});
|
|
35
35
|
const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
|
|
36
|
+
'use no memo';
|
|
36
37
|
const rootBaseClassName = useRootBaseClassName();
|
|
37
38
|
const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
|
|
38
39
|
state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: tokens.spacingVerticalS,\n verticalAlign: 'middle',\n alignSelf: 'end',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 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","
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: tokens.spacingVerticalS,\n verticalAlign: 'middle',\n alignSelf: 'end',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalS","bar","verticalAlign","alignSelf","position","cursor","value","undefined","backgroundColor","colorNeutralBackground3Hover","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCApBoE;4CACjC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAASC,qBAAOC,CAAAA,QAAAA,CAAAA,MAAgBlB,QAAA,CAAAmB,GAAA,EAAA;YAChCC,aAAe;YACfC,iBAAW;QACXC;QAEA,IAAAH,KAAA;gBACEI,MAAQvB,QAAA,CAAAwB,KAAA,KAAAC,WAAA;gBACRC,IAAAA,SAAAA,GAAAA,IAAAA,6BAAwBC,EAAAA,kBAAAA,wBAA4B,EAAAR,IAAAR,SAAA;mBACpDR;gBACFgB,IAAAR,SAAA,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAa,kBAAA,EAAAT,IAAAR,SAAA;YACA;kBACEe,QAAAA,CAAAA,GAAAA,GAAiBT;;;WAGnBZ;2EAEqB"}
|
|
@@ -14,6 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
|
|
|
14
14
|
const _reacticons = require("@fluentui/react-icons");
|
|
15
15
|
const _attachmentListContext = require("../../contexts/attachmentListContext");
|
|
16
16
|
const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
|
|
17
|
+
'use no memo';
|
|
17
18
|
const { imageOnly, media } = props;
|
|
18
19
|
const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
|
|
19
20
|
const menuItemId = (0, _reactcomponents.useId)('attachment-', props.id);
|
package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n const { imageOnly, media } = props;\n const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <DismissIcon />, ...props, id: menuItemId },\n { elementType: MenuItem },\n );\n root.onClick = mergeCallbacks(root.onClick, ev => {\n onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n return {\n components: {\n root: MenuItem,\n progress: ProgressBar,\n },\n root,\n progress,\n isVisible,\n imageOnly,\n };\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, media } = props;\n const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <DismissIcon />, ...props, id: menuItemId },\n { elementType: MenuItem },\n );\n root.onClick = mergeCallbacks(root.onClick, ev => {\n onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n return {\n components: {\n root: MenuItem,\n progress: ProgressBar,\n },\n root,\n progress,\n isVisible,\n imageOnly,\n };\n};\n"],"names":["useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","isVisible","media","icon","secondaryContent","menuItemId","useAttachmentListContext_unstable","context","elementType","MenuItem","root","onClick","onAttachmentDismiss","content","progress","optional","ev","shape","children","slot","defaultProps","components","ProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BEA;;;eAAAA;;;;iEA7BqB;iCAQhB;4BACuD;uCACZ;AAmBhD,MAAAA,yCAAA,CAAAC,OAAAC;;UAIA,EACAC,SAAMC,EACNC,KAAA,KAEAJ;UACIC,cAAAA,IAAAA,sBAAAA,EAAAA,2BAAAA,EAAAA,4BAAAA;UAAKI,aAAMD,IAAAA,sBAAAA,EAAAA,eAAAA,MAAAA,EAAAA;UAAOE,YAAAA,IAAAA,yCAAkB,EAAAC;UAAiB,qBAAcA,KAAWC,IAAAA,wDAChF,EAAAC,CAAAA,UAAAA;UAAEC,OAAAA,qBAAAA,CAAAA,MAAaC,CAAAA;QAASV;QAE1BW,MAAKC;0BACHC,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,aAAAA;gBAA4BC;;;qBAA+CJ,yBAAA;;SAG7EE,OAAMG,GAAAA,IAAAA,+BAAgBC,EAAAA,KAASjB,OAAMgB,EAAAA,CAAAA;gCACrB,QAAAF,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAI,IAAA;qBACZC,MAAOC,QAAA;;;;;UAKXJ,WAAAK,qBAAA,CAAAJ,QAAA,CAAAjB,MAAAgB,QAAA,EAAA;QAEAM,cAAO;mBACLC;uBACEX;+BACUY,MAAAA,EAAAA;;qBAEZZ,4BAAAA;;WAEAT;oBACAD;YACFU,MAAAD,yBAAA;YACAK,UAAAQ,4BAAA"}
|
|
@@ -32,6 +32,7 @@ const useStyles = (0, _reactcomponents.__styles)({
|
|
|
32
32
|
]
|
|
33
33
|
});
|
|
34
34
|
const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
|
|
35
|
+
'use no memo';
|
|
35
36
|
const { imageOnly } = state;
|
|
36
37
|
const styles = useStyles();
|
|
37
38
|
const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuItemSlots,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n root: 'fai-AttachmentOverflowMenuItem',\n progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n imageOnly: {\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n const { imageOnly } = state;\n const styles = useStyles();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.root,\n imageOnly && styles.imageOnly,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentOverflowMenuItemClassNames","
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuItemSlots,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n root: 'fai-AttachmentOverflowMenuItem',\n progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n imageOnly: {\n alignItems: 'center',\n },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly } = state;\n const styles = useStyles();\n const progressBarStyles = useProgressBarStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.root,\n imageOnly && styles.imageOnly,\n state.root.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentOverflowMenuItemClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentOverflowMenuItemClassNames","styles","useStyles","root","progress","makeStyles","imageOnly","alignItems","d","state","elementType","renderByDefault","className","mergeClasses","bar","value","undefined","progressBarStyles","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IAoBLC,4CAASC;eAATD;;;iCA5B+B;4CACF;AAO9B,MAAMD,uCAAwF;UACnGG;cACAC;AACF;AAEA,MAAMF,YAAYG,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;AAEJ,GAAA;IAEAC,GAAA;QAAA;KAAA;;AASE,MAAMP,+CAASC,CAAAA;;UASXO,WACFA;mBAMgDC;8BAAoBC,IAAAA,gDAAiB;UAAKR,IAAA,CAAAS,SAAA,GAAAC,IAAAA,6BAAA,EAAAb,qCAAAG,IAAA,EAAAG,aAAAL,OAAAK,SAAA,EAAAG,MAAAN,IAAA,CAAAS,SAAA;cACtFE,QAAK,EAAA;sBACHL,CAAAA,SAAML,GAASW,IAAAA,6BAAUC,EAAAA,qCAAWZ,QAAA,EAAAa,kBAAAb,QAAA,EAAAK,MAAAL,QAAA,CAAAQ,SAAA;oBACtCE,qBAAIF,CAAAA,QAAS,CAAAH,MAAGI,QAAAA,CAAaI,GAAAA,EAAAA;yBACxB;6BACDL;;iBAENH;gBACFA,MAAAL,QAAA,CAAAW,KAAA,KAAAC,WAAA;gBACFF,IAAAF,SAAA,GAAAC,IAAAA,6BAAA,EAAAI,kBAAAC,wBAAA,EAAAJ,IAAAF,SAAA;YAEA,OAAOH;gBACPK,IAAAF,SAAA,GAAAC,IAAAA,6BAAA,EAAAI,kBAAAE,kBAAA,EAAAL,IAAAF,SAAA"}
|
|
@@ -63,6 +63,7 @@ const useIconBaseClassName = (0, _reactcomponents.__resetStyles)("r176grtk", nul
|
|
|
63
63
|
".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"
|
|
64
64
|
]);
|
|
65
65
|
const useAttachmentTagStyles_unstable = (state)=>{
|
|
66
|
+
'use no memo';
|
|
66
67
|
const rootBaseClassName = useRootBaseClassName();
|
|
67
68
|
const mediaBaseClassName = useMediaBaseClassName();
|
|
68
69
|
const contentBaseClassName = useContentBaseClassName();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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 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","
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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":";;;;;;;;;;;IAeMA,sBAAqB;eAArBA;;IAXOC,uBAAAA;eAAAA;;IAgCJC,+BAA+B;eAA/BA;;IAVEC,uBAAA;eAAAA;;IAIAC,oBAAUC;eAAVD;;IARTE,qBAAqBC;eAArBD;;;iCAtB8D;AAIzD,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"}
|
|
@@ -30,6 +30,7 @@ const attachmentTagItemClassNames = {
|
|
|
30
30
|
".rcbi0rb{display:inline-flex;flex-wrap:nowrap;column-gap:var(--spacingHorizontalSNudge);max-width:180px;align-items:center;}"
|
|
31
31
|
]);
|
|
32
32
|
const useAttachmentTagItemStyles_unstable = (state)=>{
|
|
33
|
+
'use no memo';
|
|
33
34
|
const rootBaseClassName = useRootBaseClassName();
|
|
34
35
|
const mediaBaseClassName = (0, _useAttachmentTagStylesstyles.useMediaBaseClassName)();
|
|
35
36
|
const contentBaseClassName = (0, _useAttachmentTagStylesstyles.useContentBaseClassName)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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","
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagItemStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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":";;;;;;;;;;;IAUaA,2BAAAA;eAAAA;;IAeXC,mCAAY;eAAZA;;;iCAzB4C;8CAMvC;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"}
|
|
@@ -24,6 +24,7 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", nul
|
|
|
24
24
|
".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"
|
|
25
25
|
]);
|
|
26
26
|
const useAttachmentTagListStyles_unstable = (state)=>{
|
|
27
|
+
'use no memo';
|
|
27
28
|
const rootBaseClassName = useRootBaseClassName();
|
|
28
29
|
state.root.className = (0, _reactcomponents.mergeClasses)(attachmentTagListClassNames.root, rootBaseClassName, state.root.className);
|
|
29
30
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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","
|
|
1
|
+
{"version":3,"sources":["useAttachmentTagListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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":";;;;;;;;;;;IAIaA,2BAAAA;eAAAA;;IAQXC,mCAAY;eAAZA;;;iCAZ4C;AAIvC,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"}
|
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-20240530-0404-c2e14c44.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,8 +12,8 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/tokens": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20240530-0404-c2e14c44.1",
|
|
16
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20240530-0404-c2e14c44.1",
|
|
17
17
|
"@swc/helpers": "^0.5.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|