npm - @fluentui-copilot/react-attachments - Versions diffs - 0.12.0 → 0.12.2 - Mend

@fluentui-copilot/react-attachments 0.12.0 → 0.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js CHANGED Viewed

@@ -240,14 +240,16 @@ const usePrimaryActionNextStyles = (0, _reactcomponents.__styles)({
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "fpi12dx"
+        B0ocmuz: "f1nm7172",
+        sshi5w: "f1w5jphr"
     },
     sidecar: {
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "fgucwci"
+        B0ocmuz: "f1nm7172",
+        sshi5w: "f1nxs5xn"
     }
 }, {
     d: [
@@ -256,17 +258,19 @@ const usePrimaryActionNextStyles = (0, _reactcomponents.__styles)({
         ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
         ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
         [
-            ".fpi12dx{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
             {
                 p: -1
             }
         ],
+        ".f1w5jphr{min-height:40px;}",
         [
-            ".fgucwci{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
             {
                 p: -1
             }
-        ]
+        ],
+        ".f1nxs5xn{min-height:32px;}"
     ]
 });
 const useDismissButtonNextStyles = (0, _reactcomponents.__styles)({
@@ -278,15 +282,53 @@ const useDismissButtonNextStyles = (0, _reactcomponents.__styles)({
         Bbmb7ep: [
             "fnivh3a",
             "fc7yr5o"
+        ],
+        Bi91k9c: "f3p8bqa",
+        Bpw4n2g: "f19lmcbl",
+        lj723h: "flvvhsy",
+        B25qdkm: "fmk53gl",
+        zhjwy3: [
+            "f1lxtadh",
+            "f1akhkt"
+        ],
+        ibv6hh: [
+            "f1ojsxk5",
+            "f5tn483"
+        ],
+        wvpqe5: [
+            "fjik90z",
+            "fcdblym"
         ]
     },
     canvas: {
-        Bqenvij: "fbhnoac",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1nm7172",
+        sshi5w: "f1w5jphr",
         a9b677: "feqmc2u"
     },
     sidecar: {
-        Bqenvij: "f1d2rq10",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f19d5dog",
+        sshi5w: "f1nxs5xn",
         a9b677: "f1szoe96"
+    },
+    dismissOnly: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu",
+        a9b677: "fkyq1ak",
+        zhjwy3: [
+            "fjscplz",
+            "f1gn591s"
+        ]
     }
 }, {
     d: [
@@ -294,10 +336,128 @@ const useDismissButtonNextStyles = (0, _reactcomponents.__styles)({
         ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}",
         ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
         ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
-        ".fbhnoac{height:40px;}",
+        ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
+        ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
+        ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}",
+        ".f5tn483{border-right-width:var(--strokeWidthThin);}",
+        ".fjik90z{border-left-style:solid;}",
+        ".fcdblym{border-right-style:solid;}",
+        [
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1w5jphr{min-height:40px;}",
         ".feqmc2u{width:40px;}",
-        ".f1d2rq10{height:32px;}",
-        ".f1szoe96{width:32px;}"
+        [
+            ".f19d5dog{padding:var(--spacingVerticalNone) var(--spacingHorizontalMNudge);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1nxs5xn{min-height:32px;}",
+        ".f1szoe96{width:32px;}",
+        [
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ],
+        ".fkyq1ak{width:unset;}",
+        ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
+        ".f1gn591s{border-right-color:var(--colorTransparentStroke);}"
+    ],
+    h: [
+        ".f3p8bqa:hover{color:var(--colorNeutralForeground2);}",
+        ".f19lmcbl:hover .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2);}"
+    ],
+    a: [
+        ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"
+    ],
+    f: [
+        ".fmk53gl:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2Hover);}"
+    ]
+});
+const usePrimaryDismissNextStyles = (0, _reactcomponents.__styles)({
+    sharedStyles: {
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh",
+        De3pzq: "f16xq7d1",
+        Jwef8y: "f1h648pw",
+        ecr2s2: "fwdzr64",
+        Bpw7sjs: 0,
+        zppij7: 0,
+        ajd3u1: 0,
+        iqhfy: 0,
+        B7b6voy: "f1c9fnza"
+    }
+}, {
+    d: [
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}"
+    ],
+    h: [
+        ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"
+    ],
+    a: [
+        ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"
+    ],
+    i: [
+        [
+            ".f1c9fnza:focus-visible{border-radius:var(--borderRadiusLarge);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useRootNextStyles = (0, _reactcomponents.__styles)({
+    root: {
+        Bw0xxkn: 0,
+        oeaueh: 0,
+        Bpd4iqm: 0,
+        Befb4lg: "f1bars0k",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1kijzfu"
+    }
+}, {
+    d: [
+        [
+            ".f1bars0k{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
+            {
+                p: -1
+            }
+        ]
     ]
 });
 const useAttachmentStyles_unstable = (state)=>{
@@ -314,10 +474,12 @@ const useAttachmentStyles_unstable = (state)=>{
     const smallStyles = useSmallStyles();
     const primaryActionNextStyles = usePrimaryActionNextStyles();
     const dismissButtonNextStyles = useDismissButtonNextStyles();
-    const { imageOnly, primaryAction, size, mode, designVersion } = state;
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
-    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
+    const primaryDismissNextStyles = usePrimaryDismissNextStyles();
+    const rootNextStyles = useRootNextStyles();
+    const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && primaryDismissNextStyles.sharedStyles, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly, state.dismissButton.className);
     if (state.media) {
         state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }

package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS} calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n },\n\n sidecar: {\n padding: `calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS} calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n height: '40px',\n width: '40px',\n },\n sidecar: {\n height: '32px',\n width: '32px',\n },\n});\n\n/*\n Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const { imageOnly, primaryAction, size, mode, designVersion } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","minWidth","SMALL_ATTACHMENT_SIZE","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","useImageOnlyStyles","z8tnut","overflow","p","useSmallStyles","useDismissButtonNextStyles","width","Bqenvij","usePrimaryActionNextStyles","borderRadiusXLarge","contentBaseClassName","canvas","primaryActionStyles","sidecar","primaryActionNextStyles","dismissButtonNextStyles","borderBottomRightRadius","mode","mergeClasses","rootBaseClassName","state","className","primaryActionBaseClassName","size","smallStyles","as","isLoading","imageOnly","imageOnlyStyles","designVersion","dismissButtonBaseClassName","mediaBaseClassName","dismissIconBaseClassName","useAttachmentStyles_unstable","bar","slot","optional","elementType","renderByDefault","progressBarStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n root: {\n borderTopLeftRadius: tokens.borderRadiusXLarge,\n borderBottomLeftRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n },\n\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '32px',\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n ':hover': {\n color: tokens.colorNeutralForeground2,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2,\n },\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n borderLeftColor: tokens.colorNeutralStroke1,\n borderLeftWidth: tokens.strokeWidthThin,\n borderLeftStyle: 'solid',\n },\n canvas: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n minHeight: '40px',\n width: '40px',\n },\n sidecar: {\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n minHeight: '32px',\n width: '32px',\n },\n dismissOnly: {\n borderRadius: tokens.borderRadiusXLarge,\n width: 'unset',\n borderLeftColor: tokens.colorTransparentStroke,\n },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n sharedStyles: {\n border: 'none',\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n ':focus-visible': {\n borderRadius: tokens.borderRadiusLarge,\n },\n },\n});\n\nconst useRootNextStyles = makeStyles({\n root: {\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\n/*\n Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const primaryActionNextStyles = usePrimaryActionNextStyles();\n const dismissButtonNextStyles = useDismissButtonNextStyles();\n const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n const rootNextStyles = useRootNextStyles();\n const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n state.root.className = mergeClasses(\n attachmentClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && rootNextStyles.root,\n state.root.className,\n );\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\n size === 'small' && smallStyles.primaryAction,\n primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n imageOnly && imageOnlyStyles.primaryAction,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\n designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(\n attachmentClassNames.media,\n mediaBaseClassName,\n size === 'small' && smallStyles.media,\n state.media.className,\n );\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n size === 'small' && smallStyles.content,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\n size === 'small' && smallStyles.dismissIcon,\n state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","imageOnly","size","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","useImageOnlyStyles","sshi5w","overflow","width","useSmallStyles","typographyStyles","B25qdkm","spacingVerticalXXS","canvas","minHeight","Bbmb7ep","Btl43ni","B7oj6ja","useDismissButtonNextStyles","borderBottomRightRadius","borderLeftWidth","borderLeftStyle","oivjwe","ibv6hh","sidecar","i8vvqc","dismissOnly","De3pzq","Jwef8y","ecr2s2","usePrimaryDismissNextStyles","sharedStyles","p","Bw0xxkn","oeaueh","Bpd4iqm","Beyfa6y","rootBaseClassName","primaryActionBaseClassName","Dimara","dismissButtonBaseClassName","mode","state","className","mergeClasses","mediaBaseClassName","useProgressBarStyles","imageOnlyStyles","optional","elementType","usePrimaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","bar","designVersion","rootNextStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AttachmentList/AttachmentList.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuList, MenuPopover, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n menuList?: Slot<typeof MenuList>;\n menuPopover?: Slot<typeof MenuPopover>;\n\n /*\n An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n /\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/\n AttachmentList Props\n /\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n /\n Callback fired when an attachment is dismissed.\n /\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement \| HTMLButtonElement \| HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /\n Props that will be passed to the overflow menu.\n /\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /\n The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n /\n maxVisibleAttachments?: number;\n};\n\n/\n State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' \| 'overflowMenuProps'> & {\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
1	+ {"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuList, MenuPopover, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\nimport type { DesignVersion } from '@fluentui-copilot/react-provider';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n menuList?: Slot<typeof MenuList>;\n menuPopover?: Slot<typeof MenuPopover>;\n\n /*\n An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n /\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/\n AttachmentList Props\n /\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> &\n DesignVersion & {\n /\n Callback fired when an attachment is dismissed.\n /\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement \| HTMLButtonElement \| HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /\n Props that will be passed to the overflow menu.\n /\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /\n The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n /\n maxVisibleAttachments?: number;\n };\n\n/\n State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' \| 'overflowMenuProps' \| 'designVersion'> & {\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/AttachmentList/useAttachmentList.js CHANGED Viewed

@@ -18,11 +18,13 @@ const _Attachment = require("../Attachment");
 const _AttachmentOverflowMenuButton = require("../AttachmentOverflowMenuButton");
 const _useAttachmentOverflowMenuButtonStylesstyles = require("../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles");
 const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const useAttachmentList_unstable = (props, ref)=>{
     const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;
     const innerRef = _react.useRef(null);
     const [setTimeout] = (0, _reactutilities.useTimeout)();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
     const { findNextFocusable, findPrevFocusable, findLastFocusable } = (0, _reactcomponents.useFocusFinders)();
     const handleAttachmentDismiss = (0, _reactcomponents.useEventCallback)((e, data)=>{
         var _innerRef_current;
@@ -88,6 +90,7 @@ const useAttachmentList_unstable = (props, ref)=>{
     });
     const shouldUseOverflow = maxVisibleAttachments !== undefined;
     return {
+        designVersion,
         onAttachmentDismiss: handleAttachmentDismiss,
         shouldUseOverflow,
         overflowMenuProps,

package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuList,\n MenuPopover,\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/*\n Create the state required to render AttachmentList.\n \n The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n \n @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n const attachmentOverflowMenuItems = React.useMemo(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n return resolvedChildren\n .filter(child => React.isValidElement(child))\n .map(child => (child as React.ReactElement).props)\n .map(attachment => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n });\n }\n return [];\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n menuList: MenuList,\n menuPopover: MenuPopover,\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n menuList: slot.optional(props.menuList, {\n defaultProps: { children: attachmentOverflowMenuItems },\n elementType: MenuList,\n renderByDefault: true,\n }),\n menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","~~findNextFocusable~~","overflowMenuProps","~~handleAttachmentDismiss~~","innerRef","~~useTimeout~~","next","container","useEventCallback","e","data","findLastFocusable","current","_innerRef_current","contains","activeElement","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","attachmentOverflowMenuItems","resolvedChildren","child","React","isValidElement","attachment","useOverflowMaxVisibleItems","overflow","useMemo","arrowNavigationProps","useArrowNavigationGroup","circular","filter","map","axis","createElement","AttachmentOverflowMenuItem","memorizeCurrent","key","id","shouldUseOverflow","components","~~menuPopover~~","undefined","~~MenuPopover~~","~~menuList~~","slot","defaultProps","MenuList","renderByDefault","~~elementType~~","~~optional~~","~~overflowMenuButton~~"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAiCUA~~;;;eAAAA;;;;~~iEAjCa~~;iCAUhB;qCACyC;gCACrB;iCACgB;4BACT;8CACW;6DACU;4CACZ;~~AAgBzC~~,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,~~EACRF~~,~~mBAAQG~~,~~EACRC~~,~~iBAAMC~~;~~UACJC~~,~~WAAKN,~~OAAAA,MAAAA,CAAAA;~~sBACH~~,~~GAAAO~~,IAAAA,~~0BAAA~~;~~UACF~~,~~gBAEAP~~,~~gDAEA~~;~~UACA~~,~~mBACIM~~,mBACF,mBACME,yCAAyDC;oCAA4BC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEX,GAAAA;6CACEY;8BAAAA,mBAAAA,QAAAA,mBAAkBP,KAASQ,IAAO,KAAA,IAAAZ,eAAlCW,aAAAA;iCACCP,SAAAQ,OAAA,MAAA,QAAAC,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAC,gBAAA;wGACE;2CACKA,eAAA;2BACZX,SAAAQ,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GI,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAP,kBAAAP,SAAAQ,OAAA,CAAA,MAAA,QAAAM,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEY;;mBAEJ;gBACF,MAAAK,OAAAI,kBAAAL,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAM,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAzB,WAAM0B;gBACJ,IAAIC;sCACKA,kBACGC,SAAAA,OAAAA,CAAAA,MAASC,QAAMC,uBAClBF,KAAAA,IAAUA,KAA6B9B,IAAKqB,mBAC5CY,KAAAA;;;;;6BAELC,IAAAA,2CAAA,EAAA;;yBAEKnC;QACX4B,mBAAGF,OAAAU,QAAA;;UAAkBP,8BAAAG,OAAAK,OAAA,CAAA;QAErB,IAAAP,oBAAMQ,MAAuBC,OAAAA,CAAAA,mBAAwB;mBACnDC,iBAAUC,MAAA,CAAAV,CAAAA,QAAA,WAAA,GAAAC,OAAAC,cAAA,CAAAF,QAAAW,GAAA,CAAAX,CAAAA,QAAAA,MAAA9B,KAAA,EAAAyC,GAAA,CAAAR,CAAAA;gBACVS,OAAM,WAAA,GAAAX,OAAAY,aAAA,CAAAC,sDAAA,EAAA;oBACNC,GAAAA,UAAAA;oBACFC,KAAAb,WAAAc,EAAA;gBAEA;YAEA;;~~eAEEC~~,EAAAA;;;~~KACA3C~~;~~UACA4C~~,~~uBAAYX~~,IAAAA,~~wCAAA~~,~~EAAA~~;~~kBACVlB~~;;~~yBAEA8B~~;;~~UAEFF~~,~~oBAAAjD,0BAAAoD~~;~~WACA/B;6BAEId~~;;;~~oBAGG+B~~;kBACH;sBACAvC,yBAAU+B;~~yBAEZuB~~,4BAAA;gCAAe;;~~cAEjBC~~,qBAAAA,CAAAA,~~MAAUC~~,CAAAA,IAAAA,yCAA4B,EAAA,OAAE;0BACtCC;~~mDAAgBzD~~,EAAAA,KAAU8B;kBAA4B;~~mCACzC4B~~;oBACbC;~~sBACF5B~~;~~YACAqB~~;~~yBAAgDQ~~;;~~kBAAgDJ~~,qBAAA,~~CAAAK~~,QAAA,~~CAAA3D~~,~~MAAAqD~~,QAAA,EAAA;~~0BAChGO~~;~~0BACEL~~;;yBAA2DC,yBAAA;~~6BAC3DE~~;;~~qBAEFJ~~,qBAAA,~~CAAAK~~,QAAA,~~CAAA3D~~,~~MAAAkD~~,WAAA,EAAA;~~YACFQ~~,aAAAN,4BAAA;~~YACAK~~,iBAAA"}
1	+ {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuList,\n MenuPopover,\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/*\n Create the state required to render AttachmentList.\n \n The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n \n @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n\n const designVersion = useDesignVersion(props.designVersion);\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n const attachmentOverflowMenuItems = React.useMemo(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n return resolvedChildren\n .filter(child => React.isValidElement(child))\n .map(child => (child as React.ReactElement).props)\n .map(attachment => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n });\n }\n return [];\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n designVersion,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n menuList: MenuList,\n menuPopover: MenuPopover,\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n menuList: slot.optional(props.menuList, {\n defaultProps: { children: attachmentOverflowMenuItems },\n elementType: MenuList,\n renderByDefault: true,\n }),\n menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","designVersion","overflowMenuProps","findNextFocusable","innerRef","useDesignVersion","next","container","useEventCallback","e","data","findLastFocusable","current","_innerRef_current","contains","activeElement","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","attachmentOverflowMenuItems","resolvedChildren","child","React","isValidElement","attachment","useOverflowMaxVisibleItems","overflow","useMemo","arrowNavigationProps","useArrowNavigationGroup","circular","filter","map","axis","createElement","AttachmentOverflowMenuItem","memorizeCurrent","key","id","shouldUseOverflow","components","menuList","overflowMenuButton","undefined","handleAttachmentDismiss","MenuPopover","slot","defaultProps","MenuList","renderByDefault","menuPopover","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkCUA;;;eAAAA;;;;iEAlCa;iCAUhB;qCACyC;gCACrB;iCACgB;4BACT;8CACW;6DACU;4CACZ;+BAEV;AAe/B,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EAERF,mBAAMG,EACNC,iBAAQC,KACRN;qBASMO,OAAAA,MAAAA,CAAAA;UARJ,CAAAL,WAAKD,GAAAA,IAAAA,0BAAAA;0BAEL,gDAEAA;UAEAG,gBAAAI,IAAAA,+BAAA,EAAAR,MAAqCI,aAAA;UACrC,mBACIG,mBACF,mBACME,yCAAyDC;oCAA4BC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEX,GAAAA;6CACEY;8BAAAA,mBAAAA,QAAAA,mBAAkBP,KAASQ,IAAO,KAAA,IAAAZ,eAAlCW,aAAAA;iCACCP,SAAAQ,OAAA,MAAA,QAAAC,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAC,gBAAA;wGACE;2CACKA,eAAA;2BACZX,SAAAQ,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GI,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAP,kBAAAP,SAAAQ,OAAA,CAAA,MAAA,QAAAM,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEY;;mBAEJ;gBACF,MAAAK,OAAAI,kBAAAL,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAM,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAzB,WAAM0B;gBACJ,IAAIC;sCACKA,kBACGC,SAAAA,OAAAA,CAAAA,MAASC,QAAMC,uBAClBF,KAAAA,IAAUA,KAA6B9B,IAAKqB,mBAC5CY,KAAAA;;;;;6BAELC,IAAAA,2CAAA,EAAA;;yBAEKnC;QACX4B,mBAAGF,OAAAU,QAAA;;UAAkBP,8BAAAG,OAAAK,OAAA,CAAA;QAErB,IAAAP,oBAAMQ,MAAuBC,OAAAA,CAAAA,mBAAwB;mBACnDC,iBAAUC,MAAA,CAAAV,CAAAA,QAAA,WAAA,GAAAC,OAAAC,cAAA,CAAAF,QAAAW,GAAA,CAAAX,CAAAA,QAAAA,MAAA9B,KAAA,EAAAyC,GAAA,CAAAR,CAAAA;gBACVS,OAAM,WAAA,GAAAX,OAAAY,aAAA,CAAAC,sDAAA,EAAA;oBACNC,GAAAA,UAAAA;oBACFC,KAAAb,WAAAc,EAAA;gBAEA;YAEA;;eAEE9C,EAAAA;;;KACA+C;UACA3C,uBAAAA,IAAAA,wCAAAA,EAAAA;kBACA4C;;yBAEEC;;8BAEAC,0BAAoBC;WACtB;;6BAGIC;;;oBAGGhB;kBACH;sBACAvC,yBAAU+B;yBAEZyB,4BAAA;gCAAe;;cAEjBJ,qBAAAA,CAAAA,MAAUK,CAAAA,IAAAA,yCAA4B,EAAA,OAAE;0BACtCC;mDAAgB1D,EAAAA,KAAU8B;kBAA4B;mCACzC6B;oBACbC;sBACF7B;YACA8B;yBAAgDC;;kBAAgDL,qBAAA,CAAAM,QAAA,CAAA7D,MAAAkD,QAAA,EAAA;0BAChGC;0BACEK;;yBAA2DC,yBAAA;6BAC3DG;;qBAEFL,qBAAA,CAAAM,QAAA,CAAA7D,MAAA2D,WAAA,EAAA;YACFC,aAAAN,4BAAA;YACAI,iBAAA"}

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js CHANGED Viewed

@@ -29,16 +29,36 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", nul
 const useOverflowMenuButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rvxcmzt", null, [
     ".rvxcmzt{display:inline-flex;}"
 ]);
+const useOverflowMenuPopoverNextStyles = (0, _reactcomponents.__styles)({
+    borderRadius: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1pwvjsv"
+    }
+}, {
+    d: [
+        [
+            ".f1pwvjsv{border-radius:var(--borderRadius4XL);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
 const useAttachmentListStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
     const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+    const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+    const { designVersion } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
     if (state.menuList) {
         state.menuList.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuList, state.menuList.className);
     }
     if (state.menuPopover) {
-        state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, state.menuPopover.className);
+        state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
     }
     if (state.overflowMenuButton) {
         state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/*\n Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["attachmentListClassNames","~~flexWrap~~","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","~~state~~","useOverflowMenuButtonBaseClassName","~~display~~","~~className~~","~~mergeClasses~~","rootBaseClassName","overflowMenuButtonClassName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;~~IAYXC~~,~~gCAAU~~;~~eAAVA~~;;;~~iCAjBoC~~;~~AAK/B~~,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;~~AAIzCR~~,~~MAAAA~~,~~mCAAUS~~,CAAAA;;~~IAIZ~~,~~MAAMC~~,~~oBAAAA~~;~~UACJC~~,~~8BAASD~~;~~IACXD~~,~~MAAAR~~,IAAA,~~CAAAW~~,SAAA,GAAAC,IAAAA,6BAAA,~~EAAAd~~,yBAAAE,IAAA,~~EAAAa~~,~~mBAAAL~~,~~MAAAR~~,IAAA,~~CAAAW~~,SAAA;~~IAEA~~,~~IAAAH~~,~~MAAAP~~,~~QAAA~~,~~EAAA~~;;~~IAEC;QAECO~~,~~MAAAN~~,~~WAAA~~,~~EAAA~~;~~QAEAM~~,~~MAAMK~~,~~WAAAA,~~CAAAA,~~SAAoBT~~,~~GAAAA~~,IAAAA,~~6BAAAA~~,EAAAA,~~yBAAAA~~,~~WAAAA~~,EAAAA,MAAAA,~~WAAAA~~,CAAAA,~~SAAAA~~;;~~QAG1BI~~,~~MAAMR~~,~~kBAAiBY~~,EAAAA;~~QAEvBJ~~,~~MAAIA~~,~~kBAAgB~~,~~CAAAG~~,SAAA,GAAAC,IAAAA,6BAAA,~~EAAAd~~,yBAAAK,kBAAA,~~EAAAW~~,~~6BAAAN~~,~~MAAAL~~,kBAAA,~~CAAAQ~~,SAAA~~;;WAEpBH;6DAE6CV~~"}
1	+ {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\nconst useOverflowMenuPopoverNextStyles = makeStyles({\n borderRadius: {\n borderRadius: tokens.borderRadius4XL,\n },\n});\n\n/*\n Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();\n const { designVersion } = state;\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(\n attachmentListClassNames.menuPopover,\n designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius,\n state.menuPopover.className,\n );\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["attachmentListClassNames","useAttachmentListStyles_unstable","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","display","__styles","flexDirection","flexShrink","flexWrap","rowGap","tokens","B7oj6ja","Dimara","useOverflowMenuButtonBaseClassName","d","useOverflowMenuPopoverNextStyles","borderRadius","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","state","designVersion","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IA6BNC,gCAAMA;eAANA;;;iCAlC2C;AAK3C,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;MACzCC,mCAASC,IAAAA,yBAAA,EAAA;kBACTC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQC;QACVC,SAAA;QAEAC,QAAMC;;AAEN,GAAA;IAEAC,GAAA;QAAMC;YAAAA;YAA8C;gBAClDC,GAAAA,CAAAA;;;;;AAQF,MAAOrB,mCAAMA,CAAAA;;UAIXsB,oBAAMC;UACNA,8BAAMC;UACNA,gCAA0BC;UAE1BA,EAEAC,aAAUxB;UAEVD,IAAA,CAAA0B,SAAA,GAAAC,IAAAA,6BAAA,EAAA7B,yBAAAE,IAAA,EAAAqB,mBAAAG,MAAAxB,IAAA,CAAA0B,SAAA;QACAF,MAAIA,QAAMtB,EAAAA;cACRsB,QAAMtB,CAAAA,SAAYwB,GAAAA,IAAAA,6BAAYC,EAAAA,yBAC5B7B,QAAyBI,EAAAA,MAAAA,QACzBuB,CAAAA,SAAAA;;QAKJD,MAAIA,WAAMrB,EAAAA;cACRqB,WAAMrB,CAAAA,SAAAA,GAAmBuB,IAAAA,6BAAYC,EAAAA,yBACnC7B,WAAyBK,EAAAA,kBACzBmB,UAAAA,8BACMnB,YAAAA,EAAmBuB,MAAAA,WAAS,CAAAA,SAAA;;QAItCF,MAAOA,kBAAAA,EAAAA;QACPA,MAAArB,kBAAA,CAAAuB,SAAA,GAAAC,IAAAA,6BAAA,EAAA7B,yBAAAK,kBAAA,EAAAmB,6BAAAE,MAAArB,kBAAA,CAAAuB,SAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js CHANGED Viewed

@@ -38,21 +38,47 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         Bbmb7ep: 0,
         Btl43ni: 0,
         B7oj6ja: 0,
-        Dimara: "f1kijzfu"
+        Dimara: "f1kijzfu",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh",
+        sj55zd: "fkfq4zb",
+        De3pzq: "f16xq7d1",
+        eoavqd: "f8491dx",
+        Bi91k9c: "fnwyq0v",
+        Jwef8y: "f1h648pw",
+        lj723h: "flvvhsy",
+        ecr2s2: "fwdzr64"
     },
     canvas: {
+        sshi5w: "f1w5jphr",
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "fg7z1me"
+        B0ocmuz: "f1nm7172"
     },
     sidecar: {
+        sshi5w: "f1nxs5xn",
         Byoj8tv: 0,
         uwmqm3: 0,
         z189sj: 0,
         z8tnut: 0,
-        B0ocmuz: "f1s87h8p"
+        B0ocmuz: "f1nm7172"
     }
 }, {
     d: [
@@ -63,17 +89,36 @@ const useNextStyles = (0, _reactcomponents.__styles)({
             }
         ],
         [
-            ".fg7z1me{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".f1w5jphr{min-height:40px;}",
+        [
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
             {
                 p: -1
             }
         ],
+        ".f1nxs5xn{min-height:32px;}",
         [
-            ".f1s87h8p{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            ".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}",
             {
                 p: -1
             }
         ]
+    ],
+    h: [
+        ".f8491dx:hover{cursor:pointer;}",
+        ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}",
+        ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"
+    ],
+    a: [
+        ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}",
+        ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"
     ]
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n verticalAlign: 'middle',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useNextStyles = makeStyles({\n root: { borderRadius: tokens.borderRadiusXLarge },\n ~~canvas~~: {\n ~~padding~~: ~~`calc($~~{tokens.~~spacingVerticalS~~} - ${tokens.~~strokeWidthThin~~}) ${tokens.spacingHorizontalS}`,\n },\n sidecar: {\n padding: ~~`calc($~~{tokens.~~spacingVerticalXS~~} - ${tokens.~~strokeWidthThin}) ${tokens.~~spacingHorizontalS}`,\n },\n});\n\n/*\n Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const { designVersion, mode } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n designVersion === 'next' && nextStyles[mode],\n 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","~~borderRadius~~","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","boxSizing","columnGap","cursor","display","flexWrap","fontSize","fontWeight","justifyContent","padding","verticalAlign","position","backgroundColor","~~z189sj~~","~~z8tnut~~","~~state~~","~~designVersion~~","sidecar","~~rootBaseClassName~~","~~progressBarStyles~~","~~useProgressBarStyles~~","~~nextStyles~~","~~useNextStyles~~","~~useAttachmentOverflowMenuButtonStyles_unstable~~","className","mergeClasses","~~bar~~","mode","~~elementType~~","~~renderByDefault~~","value","undefined"~~,"regularProgressBar"~~],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;~~IA4CHC~~,~~8CAAuC~~;~~eAAvCA~~;;;~~iCArDgE~~;4CAErC;AAO9B,MAAMD,yCAA4F;~~UACvGE~~;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;~~UAClBR~~;~~QACAS~~,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA~~;;YAEAC~~;QACAC,SAAAA;QACAC,~~QAAAA~~;QACAC,QAAAA;QACAC,QAAAA;QACAC,~~SAAAA;;aAGER~~;~~iBACAS~~;~~gBACAf~~;~~QACFgB~~,QAAA;QACAC,QAAA;~~iBACEF~~;;;~~OAGF~~;QAAA;YAAA;~~YAAkC~~;~~oBAChC;;;;;YACmB;oBACnB;;;;;YACW;;;;;;MAOLpB~~,~~iDAAuCuB~~,CAAAA;;~~UAE7CN~~,~~EACFO~~,~~aAAA~~,~~EACAC~~,~~IAAAA~~;~~UAEAC~~,~~oBAAAvB~~;~~IACF~~,~~MAAAwB~~,~~oBAAAC,~~IAAAA,gDAAA;~~IAEA~~,~~MAAAC~~,~~aAAAC;;IAEC~~,~~IACDP~~,~~MAAOrB~~,~~QAAM6B~~,EAAAA~~;QAGXR~~,~~MAAArB~~,~~QAAA~~,~~CAAA8B~~,~~SAAA~~,~~GAAAC~~,~~IAAAA~~,~~6BAAA~~,~~EAAAlC~~,~~uCAAAG~~,~~QAAA~~,~~EAAAyB~~,~~kBAAAzB~~,~~QAAA~~,~~EAAAqB~~,~~MAAArB~~,~~QAAA,CAAA8B,~~SAAA;~~QAEA~~,~~MAAME~~,~~MAAEV~~,~~qBAAAA,~~CAAAA,~~QAAeW~~,~~CAAAA~~,~~MAASZ~~,~~QAAAA~~,~~CAAAA~~,~~GAAAA~~,EAAAA~~;YAEhCa~~,~~aAAMV;YACNW~~,~~iBAAMV;QACN;QAEAJ~~,~~IAAAA~~,~~KAAMtB;YAQN~~,~~IAAIsB~~,~~MAAMrB,QAAU,~~CAAAoC,~~KAAA,KAAAC,WAAA~~;~~gBAClBhB~~,~~IAAAA~~,~~SAAMrB~~,~~GAAS8B~~,~~IAAAA~~,~~6BAAYC~~,~~EAAAA~~,~~kBACzBlC~~,~~wBAAAA~~,~~EAAAA,IAAAA,SAAuCG~~;~~mBAKzC~~;~~oBAAgDkC~~,~~SAAAA~~,~~GAAAA~~,IAAAA,~~6BAAa~~,~~EAAAT~~,~~kBAAAa~~,~~kBAAA~~,~~EAAAN~~,~~IAAAF,SAAA;;kBAA6B9B,QAAA,CAAAgC,GAAA,GAAAA;;;;2EAKvCM~~"}
1	+ {"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n AttachmentOverflowMenuButtonSlots,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n root: 'fai-AttachmentOverflowMenuButton',\n progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n fontFamily: typographyStyles.body1.fontFamily,\n fontSize: typographyStyles.body1.fontSize,\n fontWeight: typographyStyles.body1.fontWeight,\n justifyContent: 'center',\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n verticalAlign: 'middle',\n position: 'relative',\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useNextStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusXLarge,\n border: 'none',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground3,\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground3Hover,\n },\n ':active': {\n color: tokens.colorNeutralForeground2Pressed,\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n },\n },\n canvas: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n },\n sidecar: {\n minHeight: '32px',\n padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n },\n});\n\n/*\n Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n 'use no memo';\n\n const { designVersion, mode } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n attachmentOverflowMenuButtonClassNames.root,\n rootBaseClassName,\n designVersion === 'next' && nextStyles.root,\n designVersion === 'next' && nextStyles[mode],\n 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","nextStyles","useNextStyles","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","borderRadius","boxSizing","columnGap","cursor","display","flexWrap","fontFamily","fontSize","fontWeight","justifyContent","padding","verticalAlign","position","ibv6hh","backgroundColor","Bekrc4i","i8vvqc","B4j52fo","irswps","ecr2s2","canvas","sidecar","p","a","state","bar","rootBaseClassName","progressBarStyles","useProgressBarStyles","className","mergeClasses","indeterminateProgressBar","designVersion","mode","slot","optional","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAiFLC,8CAAaC;eAAbD;;;iCA1FkE;4CAErC;AAO9B,MAAMD,yCAA4F;UACvGG;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;QACAC,SAAAA;QACAC,SAAAA;QACAC,QAAAA;QACAC,SAAAA;QACAC,SAAS;QACTC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;gBACEV;gBACAW;gBACAlB;QACFmB,SAAA;QACAC,QAAA;gBACEF;gBACAlB;QACFqB,SAAA;QACAC,QAAA;gBACE;gBACEJ;gBACF;iBACA;gBACEA;gBACF;QACFK,QAAA;IACF;IAEAC,QAAM7B;QACJC,QAAM;iBACJQ;gBACAF;gBACAF;gBACAkB;iBACA;;;gBAGEA;iBACF;gBACA;gBACElB;gBACAkB;iBACF;;;;;;YAGW;oBACXJ;;SACF;QAAA;YAAA;YAAA;gBACAW,GAAAA,CAAAA;;;;QACa;QAAA;QAAA;YAAA;YAAA;oBACXX;;SACF;QAAA;QAAA;YAAA;YAAA;gBACFY,GAAA,CAAA;YAEA;SAAA;KAAA;;;;;;IAECC,GACD;QAAA;QACEC;KAAAA;;AAQA,MAAMlC,iDAAaC,CAAAA;;UAWjBiC,eAMMC;UAAoFC,oBAAAhC;UAC1FiC,oBAASC,IAAAA,gDAAA;uBACHJ;wBACEK,GAAAA,IAAAA,6BAAYC,EAAAA,uCAA+BC,IAAAA,EAAAA,mBAAuCC,kBAAA,UAAA1C,WAAAE,IAAA,EAAAwC,kBAAA,UAAA1C,UAAA,CAAA2C,KAAA,EAAAT,MAAAhC,IAAA,CAAAqC,SAAA;cACxFpC,QAAO,EAAA;sBACLgC,CAAAA,SAAII,GAASC,IAAAA,6BAAGA,EAAAA,uCAAmDL,QAAII,EAAAA,kBAASpC,QAAA,EAAA+B,MAAA/B,QAAA,CAAAoC,SAAA;oBAClFK,qBAAA,CAAAC,QAAA,CAAAX,MAAA/B,QAAA,CAAAgC,GAAA,EAAA;yBACMhC;6BACR;QACF;QAEA,IAAAgC,KAAOD;YACP,IAAAA,MAAA/B,QAAA,CAAA2C,KAAA,KAAAC,WAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\n\nexport type AttachmentOverflowMenuItemSlots = {\n root: NonNullable<Slot<typeof MenuItem>>;\n progress?: Slot<typeof ProgressBar>;\n};\n\n/*\n AttachmentOverflowMenuItem Props\n /\nexport type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> &\n Pick<AttachmentProps, 'id' \| 'media' \| 'imageOnly'>;\n\n/\n State used in rendering AttachmentOverflowMenuItem\n */\nexport type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> &\n Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {\n isVisible: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"~~AAcA~~;;CAEC"}
1	+ {"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\nimport type { DesignVersion } from '@fluentui-copilot/react-provider';\n\nexport type AttachmentOverflowMenuItemSlots = {\n root: NonNullable<Slot<typeof MenuItem>>;\n progress?: Slot<typeof ProgressBar>;\n};\n\n/*\n AttachmentOverflowMenuItem Props\n /\nexport type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> &\n DesignVersion &\n Pick<AttachmentProps, 'id' \| 'media' \| 'imageOnly'>;\n\n/\n State used in rendering AttachmentOverflowMenuItem\n */\nexport type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> &\n Pick<AttachmentOverflowMenuItemProps, 'imageOnly' \| 'designVersion'> & {\n isVisible: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAgBA;;CAEC"}