@fluentui-copilot/react-attachments 0.0.0-nightly-20240522-0405-dbd9212b.1 → 0.0.0-nightly-20240524-0405-c4d67c24.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.js +4 -4
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +1 -7
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/lib/components/utils/useProgressBarStyles.js +8 -8
- package/lib-commonjs/components/Attachment/useAttachmentStyles.js +4 -4
- package/lib-commonjs/components/Attachment/useAttachmentStyles.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +1 -6
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/lib-commonjs/components/utils/useProgressBarStyles.js +8 -8
- package/lib-commonjs/components/utils/useProgressBarStyles.js.map +1 -1
- package/package.json +9 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 24 May 2024 04:11:13 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20240524-0405-c4d67c24.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240524-0405-c4d67c24.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-20240524-0405-c4d67c24.1",
|
|
20
|
+
"commit": "d1e08ace0f3b0499b613bef100bd851f3ca9f338"
|
|
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-20240524-0405-c4d67c24.1",
|
|
26
|
+
"commit": "d1e08ace0f3b0499b613bef100bd851f3ca9f338"
|
|
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 Fri, 24 May 2024 04:11:13 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-20240524-0405-c4d67c24.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20240524-0405-c4d67c24.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
|
+
Fri, 24 May 2024 04:11:13 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-20240524-0405-c4d67c24.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-20240524-0405-c4d67c24.1 ([commit](https://github.com/microsoft/fluentai/commit/d1e08ace0f3b0499b613bef100bd851f3ca9f338) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-20240524-0405-c4d67c24.1 ([commit](https://github.com/microsoft/fluentai/commit/d1e08ace0f3b0499b613bef100bd851f3ca9f338) by beachball)
|
|
17
17
|
|
|
18
18
|
## [0.9.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.4)
|
|
19
19
|
|
|
@@ -38,15 +38,15 @@ const usePrimaryActionStyles = __styles({
|
|
|
38
38
|
Bi91k9c: "fnwyq0v",
|
|
39
39
|
ecr2s2: "fwdzr64",
|
|
40
40
|
lj723h: "flvvhsy",
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
Bbkh6qg: "fkiggi6",
|
|
42
|
+
Cnge2b: "f8zknr1"
|
|
43
43
|
}
|
|
44
44
|
}, {
|
|
45
45
|
h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"],
|
|
46
46
|
a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"],
|
|
47
|
-
m: [["@media (forced-colors: active){.
|
|
47
|
+
m: [["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
|
|
48
48
|
m: "(forced-colors: active)"
|
|
49
|
-
}], ["@media (forced-colors: active){.
|
|
49
|
+
}], ["@media (forced-colors: active){.f8zknr1:active{background-color:HighlightText;}}", {
|
|
50
50
|
m: "(forced-colors: active)"
|
|
51
51
|
}]]
|
|
52
52
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { MenuItem, ProgressBar, mergeCallbacks, slot, useId, useIsOverflowItemVisible } from '@fluentui/react-components';
|
|
3
3
|
import { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';
|
|
4
|
-
import { useOverflowContext } from '@fluentui/react-overflow';
|
|
5
4
|
import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
|
|
6
5
|
/**
|
|
7
6
|
* Create the state required to render AttachmentOverflowMenuItem.
|
|
@@ -21,10 +20,8 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
|
|
|
21
20
|
const menuItemId = useId('attachment-', props.id);
|
|
22
21
|
const isVisible = useIsOverflowItemVisible(menuItemId);
|
|
23
22
|
const {
|
|
24
|
-
onAttachmentDismiss
|
|
25
|
-
shouldUseOverflow
|
|
23
|
+
onAttachmentDismiss
|
|
26
24
|
} = useAttachmentListContext_unstable(context => context);
|
|
27
|
-
const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);
|
|
28
25
|
const root = slot.always({
|
|
29
26
|
ref,
|
|
30
27
|
icon: media,
|
|
@@ -40,9 +37,6 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
|
|
|
40
37
|
media,
|
|
41
38
|
id: menuItemId
|
|
42
39
|
});
|
|
43
|
-
if (shouldUseOverflow) {
|
|
44
|
-
delete attachmentsVisibilityStatus[menuItemId];
|
|
45
|
-
}
|
|
46
40
|
});
|
|
47
41
|
const progress = slot.optional(props.progress, {
|
|
48
42
|
defaultProps: {
|
|
@@ -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 {
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,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"}
|
|
@@ -33,20 +33,20 @@ export const useProgressBarStyles = __styles({
|
|
|
33
33
|
Bqenvij: "f1l02sjl",
|
|
34
34
|
De3pzq: "f1c21dwh",
|
|
35
35
|
Bcmaq0h: "f1hxqsn5",
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
jpy9cc: "f3z2g5w",
|
|
37
|
+
Bqo2lbl: "fz5izi4",
|
|
38
|
+
B6plc1d: "fv40pdu",
|
|
39
|
+
I82g5a: "f1uj6jbf"
|
|
40
40
|
}
|
|
41
41
|
}, {
|
|
42
42
|
d: [".fly5x3f{width:100%;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f6ywr7j{height:4px;}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1l02sjl{height:100%;}", ".fx7worf{background-image:linear-gradient(90deg, var(--fai-colorBrandFlair1) 35%, var(--fai-colorBrandFlair2) 70%, var(--fai-colorBrandFlair3) 92%);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1hxqsn5{background-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--fai-colorBrandFlair1) 35%, var(--fai-colorBrandFlair2) 70%, var(--fai-colorBrandFlair3) 92%, rgba(0,0,0,0));}"],
|
|
43
|
-
m: [["@media screen and (prefers-reduced-motion: reduce){.
|
|
43
|
+
m: [["@media screen and (prefers-reduced-motion: reduce){.f3z2g5w{max-width:100%;}}", {
|
|
44
44
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
45
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
45
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}", {
|
|
46
46
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
47
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
47
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}", {
|
|
48
48
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
49
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
49
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}", {
|
|
50
50
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
51
51
|
}]],
|
|
52
52
|
k: ["@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"]
|
|
@@ -66,8 +66,8 @@ const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
|
|
|
66
66
|
Bi91k9c: "fnwyq0v",
|
|
67
67
|
ecr2s2: "fwdzr64",
|
|
68
68
|
lj723h: "flvvhsy",
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
Bbkh6qg: "fkiggi6",
|
|
70
|
+
Cnge2b: "f8zknr1"
|
|
71
71
|
}
|
|
72
72
|
}, {
|
|
73
73
|
h: [
|
|
@@ -81,13 +81,13 @@ const usePrimaryActionStyles = (0, _reactcomponents.__styles)({
|
|
|
81
81
|
],
|
|
82
82
|
m: [
|
|
83
83
|
[
|
|
84
|
-
"@media (forced-colors: active){.
|
|
84
|
+
"@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}",
|
|
85
85
|
{
|
|
86
86
|
m: "(forced-colors: active)"
|
|
87
87
|
}
|
|
88
88
|
],
|
|
89
89
|
[
|
|
90
|
-
"@media (forced-colors: active){.
|
|
90
|
+
"@media (forced-colors: active){.f8zknr1:active{background-color:HighlightText;}}",
|
|
91
91
|
{
|
|
92
92
|
m: "(forced-colors: active)"
|
|
93
93
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentStyles.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';\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","Bqrx1nm","usePrimaryActionBaseClassName","kx9iu6","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.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';\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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"}
|
|
@@ -12,15 +12,13 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
14
|
const _reacticons = require("@fluentui/react-icons");
|
|
15
|
-
const _reactoverflow = require("@fluentui/react-overflow");
|
|
16
15
|
const _attachmentListContext = require("../../contexts/attachmentListContext");
|
|
17
16
|
const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
|
|
18
17
|
const { imageOnly, media } = props;
|
|
19
18
|
const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
|
|
20
19
|
const menuItemId = (0, _reactcomponents.useId)('attachment-', props.id);
|
|
21
20
|
const isVisible = (0, _reactcomponents.useIsOverflowItemVisible)(menuItemId);
|
|
22
|
-
const { onAttachmentDismiss
|
|
23
|
-
const attachmentsVisibilityStatus = (0, _reactoverflow.useOverflowContext)((context)=>context.itemVisibility);
|
|
21
|
+
const { onAttachmentDismiss } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
|
|
24
22
|
const root = _reactcomponents.slot.always({
|
|
25
23
|
ref,
|
|
26
24
|
icon: media,
|
|
@@ -36,9 +34,6 @@ const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
|
|
|
36
34
|
media,
|
|
37
35
|
id: menuItemId
|
|
38
36
|
});
|
|
39
|
-
if (shouldUseOverflow) {
|
|
40
|
-
delete attachmentsVisibilityStatus[menuItemId];
|
|
41
|
-
}
|
|
42
37
|
});
|
|
43
38
|
const progress = _reactcomponents.slot.optional(props.progress, {
|
|
44
39
|
defaultProps: {
|
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 {
|
|
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":["imageOnly","props","menuItemId","media","DismissIcon","always","Dismiss20Filled","Dismiss20Regular","ref","icon","secondaryContent","root","slot","mergeCallbacks","onClick","ev","onAttachmentDismiss","optional","defaultProps","elementType","ProgressBar","shape","components","MenuItem","progress","isVisible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BUA;;;eAAAA;;;;iEA7Ba;iCAQhB;4BACuD;uCACZ;AAmBhD,MAAQA,yCAAqBC,CAAAA,OAAAA;UAC7B,EACAD,SAAME,EACNC,KAAA,KACAF;UAEAG,cAAkBC,IAAAA,sBAChB,EAAAC,2BAAA,EAAAC,4BAAA;UAAEC,aAAAA,IAAAA,sBAAAA,EAAAA,eAAAA,MAAAA,EAAAA;UAAKC,YAAMN,IAAAA,yCAAAA,EAAAA;UAAOO,qBAA2C,iEAAMR,EAAAA,CAAAA,UAAAA;UACrES,OAAAC,qBAAA,CAAAP,MAAA,CAAA;;QAAwBI,MAAAN;QAE1BQ,kBAAeE,WAAAA,GAAeF,OAAKG,aAASC,CAAAA,aAAAA;gBAC1CC;;;qBAAgEd,yBAAAA;;SAClEY,OAAA,GAAAD,IAAAA,+BAAA,EAAAF,KAAAG,OAAA,EAAAC,CAAAA;QAEAC,wBAAsBC,QAAShB,wBAAgB,KAAA,IAAA,KAAA,IAAAe,oBAAAD,IAAA;qBAC7CG,MAAAA,QAAc;;;;;UAKdC,WAAAA,qBAAaC,CAAAA,QAAAA,CAAAA,MAAAA,QAAAA,EAAAA;QACfF,cAAA;YAEAG,OAAO;uBACLC;+BACQC,MAAAA,EAAAA;;qBAERH,4BAAA;;WAEAI;oBACAC;kBACAzB,yBAAAA;YACFwB,UAAAJ,4BAAA;QACA"}
|
|
@@ -51,10 +51,10 @@ const useProgressBarStyles = (0, _reactcomponents.__styles)({
|
|
|
51
51
|
Bqenvij: "f1l02sjl",
|
|
52
52
|
De3pzq: "f1c21dwh",
|
|
53
53
|
Bcmaq0h: "f1hxqsn5",
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
jpy9cc: "f3z2g5w",
|
|
55
|
+
Bqo2lbl: "fz5izi4",
|
|
56
|
+
B6plc1d: "fv40pdu",
|
|
57
|
+
I82g5a: "f1uj6jbf"
|
|
58
58
|
}
|
|
59
59
|
}, {
|
|
60
60
|
d: [
|
|
@@ -73,25 +73,25 @@ const useProgressBarStyles = (0, _reactcomponents.__styles)({
|
|
|
73
73
|
],
|
|
74
74
|
m: [
|
|
75
75
|
[
|
|
76
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
76
|
+
"@media screen and (prefers-reduced-motion: reduce){.f3z2g5w{max-width:100%;}}",
|
|
77
77
|
{
|
|
78
78
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
79
79
|
}
|
|
80
80
|
],
|
|
81
81
|
[
|
|
82
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
82
|
+
"@media screen and (prefers-reduced-motion: reduce){.fz5izi4{animation-iteration-count:infinite;}}",
|
|
83
83
|
{
|
|
84
84
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
85
85
|
}
|
|
86
86
|
],
|
|
87
87
|
[
|
|
88
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
88
|
+
"@media screen and (prefers-reduced-motion: reduce){.fv40pdu{animation-duration:3s;}}",
|
|
89
89
|
{
|
|
90
90
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
91
91
|
}
|
|
92
92
|
],
|
|
93
93
|
[
|
|
94
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
94
|
+
"@media screen and (prefers-reduced-motion: reduce){.f1uj6jbf{animation-name:ftc26vs;}}",
|
|
95
95
|
{
|
|
96
96
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
97
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\nimport { tokens as copilotTokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2', // matches indeterminate bar width\n },\n '50%': {\n opacity: '1',\n },\n '100%': {\n opacity: '.2',\n },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n progress: {\n width: '100%',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n height: '4px',\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n },\n regularProgressBar: {\n height: '100%',\n backgroundImage: `linear-gradient(90deg, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%)`,\n },\n indeterminateProgressBar: {\n height: '100%',\n backgroundColor: tokens.colorTransparentBackground,\n backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%, rgba(0,0,0,0))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion,\n },\n },\n});\n"],"names":["progress","indeterminateProgressBarReducedMotion","opacity","__styles","width","position","bottom","left","right","height","borderBottomLeftRadius","borderBottomRightRadius","tokens","Bbmb7ep","backgroundImage","Bcmaq0h","backgroundColor","maxWidth","animationIterationCount","animationDuration","animationName","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBEA;;;eAAAA;;;iCAnByB;AAG3B,MAAMC,wCAAwC;UAC5C;iBACEC;;WAEF;iBACEA;;YAEF;iBACEA;;AAEJ;AAMEF,MAAAA,uBAAUG,IAAAA,yBAAA,EAAA;cACRC;gBACAC;gBACAC;iBACAC;gBACAC;YAAAA;YAAO;SAAA;gBACPC;YAAAA;YAAQ;SAAA;iBACRC;iBACAC;YAAAA;YAAAA;SAAyBC;QAC3BC,SAAA;YAAA;YAAA;SAAA;;wBAEU;iBACRC;QACFC,SAAA;;8BAEU;iBACRC;gBACAF;iBACA;
|
|
1
|
+
{"version":3,"sources":["useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\nimport { tokens as copilotTokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2', // matches indeterminate bar width\n },\n '50%': {\n opacity: '1',\n },\n '100%': {\n opacity: '.2',\n },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n progress: {\n width: '100%',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n height: '4px',\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n },\n regularProgressBar: {\n height: '100%',\n backgroundImage: `linear-gradient(90deg, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%)`,\n },\n indeterminateProgressBar: {\n height: '100%',\n backgroundColor: tokens.colorTransparentBackground,\n backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%, rgba(0,0,0,0))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion,\n },\n },\n});\n"],"names":["progress","indeterminateProgressBarReducedMotion","opacity","__styles","width","position","bottom","left","right","height","borderBottomLeftRadius","borderBottomRightRadius","tokens","Bbmb7ep","backgroundImage","Bcmaq0h","backgroundColor","maxWidth","animationIterationCount","animationDuration","animationName","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBEA;;;eAAAA;;;iCAnByB;AAG3B,MAAMC,wCAAwC;UAC5C;iBACEC;;WAEF;iBACEA;;YAEF;iBACEA;;AAEJ;AAMEF,MAAAA,uBAAUG,IAAAA,yBAAA,EAAA;cACRC;gBACAC;gBACAC;iBACAC;gBACAC;YAAAA;YAAO;SAAA;gBACPC;YAAAA;YAAQ;SAAA;iBACRC;iBACAC;YAAAA;YAAAA;SAAyBC;QAC3BC,SAAA;YAAA;YAAA;SAAA;;wBAEU;iBACRC;QACFC,SAAA;;8BAEU;iBACRC;gBACAF;iBACA;gBACEG;iBACAC;iBACAC;gBACAC;;;IAGNC,GAAG;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240524-0405-c4d67c24.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,19 +12,18 @@
|
|
|
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-20240524-0405-c4d67c24.1",
|
|
16
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20240524-0405-c4d67c24.1",
|
|
17
17
|
"@swc/helpers": "^0.5.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
|
|
21
|
-
"@fluentui/react-components": ">=9.
|
|
22
|
-
"@fluentui/react-context-selector": ">=9.1.
|
|
23
|
-
"@fluentui/react-icons": ">=2.0.
|
|
24
|
-
"@fluentui/react-jsx-runtime": ">=9.0.
|
|
25
|
-
"@fluentui/react-
|
|
26
|
-
"@fluentui/react-
|
|
27
|
-
"@fluentui/react-utilities": ">=9.18.8 <10.0.0",
|
|
21
|
+
"@fluentui/react-components": ">=9.52.0 <10.0.0",
|
|
22
|
+
"@fluentui/react-context-selector": ">=9.1.60 <10.0.0",
|
|
23
|
+
"@fluentui/react-icons": ">=2.0.240 <3.0.0",
|
|
24
|
+
"@fluentui/react-jsx-runtime": ">=9.0.38 <10.0.0",
|
|
25
|
+
"@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
|
|
26
|
+
"@fluentui/react-utilities": ">=9.18.9 <10.0.0",
|
|
28
27
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
29
28
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
30
29
|
"react": ">=16.14.0 <19.0.0",
|