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/components/Attachment/useAttachmentStyles.styles.js CHANGED Viewed

@@ -136,37 +136,131 @@ const usePrimaryActionNextStyles = __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: [".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".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);}", {
+  d: [".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
     p: -1
-  }], [".fgucwci{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
+  }], ".f1w5jphr{min-height:40px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
     p: -1
-  }]]
+  }], ".f1nxs5xn{min-height:32px;}"]
 });
 const useDismissButtonNextStyles = __styles({
   root: {
     B7oj6ja: ["f1el4m67", "f8yange"],
-    Bbmb7ep: ["fnivh3a", "fc7yr5o"]
+    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: [".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".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;}", [".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 = __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: [".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".f1d2rq10{height:32px;}", ".f1szoe96{width:32px;}"]
+  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 = __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
+  }]]
 });
 /**
  * Apply styling to the Attachment slots based on the state
@@ -186,16 +280,19 @@ export const useAttachmentStyles_unstable = state => {
   const smallStyles = useSmallStyles();
   const primaryActionNextStyles = usePrimaryActionNextStyles();
   const dismissButtonNextStyles = useDismissButtonNextStyles();
+  const primaryDismissNextStyles = usePrimaryDismissNextStyles();
+  const rootNextStyles = useRootNextStyles();
   const {
     imageOnly,
     primaryAction,
     size,
     mode,
-    designVersion
+    designVersion,
+    dismissOnly
   } = state;
-  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
-  state.primaryAction.className = 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 = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
+  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, designVersion === 'next' && rootNextStyles.root, state.root.className);
+  state.primaryAction.className = 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 = 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 = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
   }

package/lib/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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalS","sidecar","useDismissButtonNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n root: 'fai-Attachment',\n primaryAction: 'fai-Attachment__primaryAction',\n dismissButton: 'fai-Attachment__dismissButton',\n media: 'fai-Attachment__media',\n content: 'fai-Attachment__content',\n dismissIcon: 'fai-Attachment__dismissIcon',\n progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexWrap: 'nowrap',\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n width: 'fit-content',\n alignSelf: 'end',\n position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n alignItems: 'center',\n backgroundColor: tokens.colorSubtleBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n boxSizing: 'border-box',\n columnGap: tokens.spacingHorizontalSNudge,\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n button: {\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n ...buttonBaseStyles,\n\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: ATTACHMENT_SIZE,\n lineHeight: ATTACHMENT_SIZE,\n width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n display: 'inline-flex',\n fontSize: ATTACHMENT_SIZE,\n height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n justifyContent: 'center',\n maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n primaryAction: {\n padding: 0,\n },\n content: {\n lineHeight: 0,\n },\n});\n\nexport const useOverflowStyles = makeStyles({\n overflow: {\n maxWidth: '100%',\n width: '100%',\n },\n});\n\nconst useSmallStyles = makeStyles({\n primaryAction: {\n maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n },\n media: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: SMALL_ATTACHMENT_SIZE,\n lineHeight: SMALL_ATTACHMENT_SIZE,\n width: SMALL_ATTACHMENT_SIZE,\n },\n content: {\n ...typographyStyles.caption1,\n },\n dismissButton: {\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n },\n dismissIcon: {\n fontSize: SMALL_ATTACHMENT_SIZE,\n height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n },\n});\n\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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","spacingHorizontalMNudge","dismissOnly","usePrimaryDismissNextStyles","sharedStyles","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","borderRadiusLarge","useRootNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/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":"~~AAyDA~~,WAEE"}
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":"AA2DA,WAEE"}

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

@@ -7,6 +7,7 @@ import { useOverflowStyles } from '../Attachment';
 import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
 import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';
 import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
+import { useDesignVersion } from '@fluentui-copilot/react-provider';
 /**
  * Create the state required to render AttachmentList.
  *
@@ -28,6 +29,7 @@ export const useAttachmentList_unstable = (props, ref) => {
   const {
     targetDocument
   } = useFluent();
+  const designVersion = useDesignVersion(props.designVersion);
   const {
     findNextFocusable,
     findPrevFocusable,
@@ -95,6 +97,7 @@ export const useAttachmentList_unstable = (props, ref) => {
   });
   const shouldUseOverflow = maxVisibleAttachments !== undefined;
   return {
+    designVersion,
     onAttachmentDismiss: handleAttachmentDismiss,
     shouldUseOverflow,
     overflowMenuProps,

package/lib/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":["React","MenuList","MenuPopover","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","AttachmentOverflowMenuItem","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","attachmentOverflowMenuItems","useMemo","Array","isArray","filter","child","isValidElement","map","attachment","key","id","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","menuList","menuPopover","overflowMenuButton","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,QAAQ,EACRC,WAAW,EACXC,wBAAwB,EACxBC,IAAI,EACJC,uBAAuB,EACvBC,gBAAgB,EAChBC,eAAe,EACfC,aAAa,QACR,6BAA6B;AACpC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,sCAAsC,QAAQ,+EAA+E;AACtI,SAASC,0BAA0B,QAAQ,gCAAgC;~~AAG3E~~;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,qBAAqB,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGL;IACpF,MAAMM,~~WAAWxB~~,~~MAAMyB~~,MAAM,CAAiB;IAC9C,MAAM,CAACC,WAAW,~~GAAGf~~;IACrB,MAAM,~~EAAEgB~~,cAAc,EAAE,~~GAAGjB~~;~~IAC3B~~,MAAM,~~EAAEkB~~,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,~~GAAGvB~~;IACpE,~~MAAMwB~~,~~0BAAsEzB~~,iBAAiB,~~CAAC0B~~,GAAGC;~~YAS3FT~~;QARJ,IAAI,CAACF,qBAAqB;YACxB;QACF;QAEAA,~~oBAAoBU~~,GAAGC;QAEvB,qCAAqC;QACrC,MAAMC,~~gBAAgBP~~,2BAAAA,qCAAAA,~~eAAgBO~~,aAAa;QACnD,~~KAAIV~~,oBAAAA,~~SAASW~~,OAAO,~~cAAhBX~~,wCAAAA,~~kBAAkBY~~,QAAQ,CAACF,gBAA+B;YAC5D,4FAA4F;YAC5F,MAAMG,OAAOT,kBAAkBM,eAA8B;gBAAEI,~~WAAWd~~,~~SAASW~~,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACR,qFAAqF;gBACrF,0GAA0G;gBAC1G,IAAIA,KAAKE,SAAS,CAACH,QAAQ,~~CAACrB~~,~~uCAAuCyB~~,IAAI,GAAG;~~oBACxEd~~,WAAW;~~4BACTI~~;yBAAAA,qBAAAA,~~kBAAkBN~~,~~SAASW~~,OAAO,eAAlCL,yCAAAA,mBAAoDW,KAAK;oBAC3D,GAAG;gBACL,OAAO;oBACLJ,KAAKI,KAAK;gBACZ;YACF,OAAO;gBACL,MAAMC,OAAOb,kBAAkBK,0BAAAA,oCAAAA,cAAeS,aAAa,EAAiB;oBAAEL,~~WAAWd~~,~~SAASW~~,OAAO;gBAAC;gBAC1GO,iBAAAA,2BAAAA,KAAMD,KAAK;YACb;QACF,OAAO;YACL,+IAA+I;YAC/If,WAAW;~~oBACTI~~;iBAAAA,qBAAAA,~~kBAAkBN~~,~~SAASW~~,OAAO,eAAlCL,yCAAAA,mBAAoDW,KAAK;YAC3D,GAAG;QACL;IACF;IAEA,MAAMG,~~SAAS/B~~;IACf,~~MAAMgC~~,~~mBAAmBjC~~,2BAA2B;~~QAClDQ~~;~~QACA0B~~,~~iBAAiBzB~~;~~QACjB0B~~,mBAAmBH,OAAOI,QAAQ;IACpC;IAEA,MAAMC,~~8BAA8BjD~~,~~MAAMkD~~,OAAO,CAAC;QAChD,IAAIL,oBAAoBM,MAAMC,OAAO,CAACP,mBAAmB;YACvD,OAAOA,iBACJQ,MAAM,CAACC,CAAAA,~~sBAAStD~~,~~MAAMuD~~,cAAc,CAACD,QACrCE,GAAG,CAACF,CAAAA,QAAS,AAACA,~~MAA6BpC~~,KAAK,~~EAChDsC~~,GAAG,CAACC,CAAAA;gBACH,qBAAO,~~oBAACzC~~;oBAA4B,~~GAAGyC~~,UAAU;oBAAEC,KAAKD,WAAWE,EAAE;;YACvE;QACJ;QACA,OAAO,EAAE;IACX,GAAG;QAACd;KAAiB;IAErB,MAAMe,~~uBAAuBvD~~,wBAAwB;~~QACnDwD~~,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,~~oBAAoB3C~~,~~0BAA0B4C~~;IAEpD,OAAO;~~QACL3C~~,~~qBAAqBS~~;QACrBiC;~~QACAzC~~;~~QACA2C~~,YAAY;YACV1B,MAAM;YACN2B,~~UAAUlE~~;~~YACVmE~~,~~aAAalE~~;~~YACbmE~~,oBAAoB;QACtB;QACA7B,~~MAAMpC~~,~~KAAKkE~~,MAAM,~~CACfnE~~,yBAAyB,OAAO;YAC9B,cAAc;~~YACdgB~~,~~KAAKX~~,~~cAAcW~~,KAAKK;~~YACxB+C~~,MAAM;YACN,GAAGX,oBAAoB;YACvB,~~GAAG1C~~,KAAK;YACRE,~~UAAUyB~~;QACZ,IACA;YAAE2B,aAAa;QAAM;QAEvBL,~~UAAU/D~~,~~KAAKqE~~,QAAQ,~~CAACvD~~,~~MAAMiD~~,QAAQ,EAAE;YACtCO,cAAc;~~gBAAEtD~~,~~UAAU6B~~;YAA4B;YACtDuB,~~aAAavE~~;~~YACb0E~~,iBAAiB;QACnB;QACAP,~~aAAahE~~,~~KAAKqE~~,QAAQ,~~CAACvD~~,~~MAAMkD~~,WAAW,EAAE;YAAEI,~~aAAatE~~;~~YAAayE~~,iBAAiB;QAAK;QAChGN,~~oBAAoBjE~~,~~KAAKqE~~,QAAQ,~~CAACvD~~,~~MAAMmD~~,kBAAkB,EAAE;YAC1DK,cAAc;~~gBAAEtD~~,wBAAU,~~oBAACN~~;YAAgC;~~YAC3D0D~~,aAAa;YACbG,iBAAiB;QACnB;IACF;AACF,EAAE"}
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":["React","MenuList","MenuPopover","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","AttachmentOverflowMenuItem","useDesignVersion","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","designVersion","findNextFocusable","findPrevFocusable","findLastFocusable","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","attachmentOverflowMenuItems","useMemo","Array","isArray","filter","child","isValidElement","map","attachment","key","id","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","menuList","menuPopover","overflowMenuButton","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { __resetStyles, mergeClasses } from '@fluentui/react-components';
+import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
 import { tokens } from '@fluentui-copilot/tokens';
 export const attachmentListClassNames = {
   root: 'fai-AttachmentList',
@@ -8,6 +8,19 @@ export const attachmentListClassNames = {
 };
 const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"]);
 const useOverflowMenuButtonBaseClassName = __resetStyles("rvxcmzt", null, [".rvxcmzt{display:inline-flex;}"]);
+const useOverflowMenuPopoverNextStyles = __styles({
+  borderRadius: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1pwvjsv"
+  }
+}, {
+  d: [[".f1pwvjsv{border-radius:var(--borderRadius4XL);}", {
+    p: -1
+  }]]
+});
 /**
  * Apply styling to the AttachmentList slots based on the state
  */
@@ -16,12 +29,16 @@ export const useAttachmentListStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
   const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+  const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+  const {
+    designVersion
+  } = state;
   state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
   if (state.menuList) {
     state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);
   }
   if (state.menuPopover) {
-    state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);
+    state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
   }
   if (state.overflowMenuButton) {
     state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);

package/lib/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":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","className"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,6BAA6B;~~AAC3E~~,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,~~uBAAuBR~~,gBAAgB;~~IAC3CS~~,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,~~qCAAqCjB~~,gBAAgB;~~IACzDW~~,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,~~MAAMO~~,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,~~oBAAoBZ~~;IAC1B,~~MAAMa~~,~~8BAA8BJ~~;~~IAEpCE~~,~~MAAMf~~,IAAI,~~CAACkB~~,SAAS,~~GAAGrB~~,aAAaE,yBAAyBC,IAAI,~~EAAEgB~~,mBAAmBD,~~MAAMf~~,IAAI,~~CAACkB~~,SAAS;IAE1G,~~IAAIH~~,~~MAAMd~~,QAAQ,EAAE;~~QAClBc~~,~~MAAMd~~,QAAQ,~~CAACiB~~,SAAS,~~GAAGrB~~,aAAaE,yBAAyBE,QAAQ,~~EAAEc~~,~~MAAMd~~,QAAQ,~~CAACiB~~,SAAS;IACrG;IACA,~~IAAIH~~,~~MAAMb~~,WAAW,EAAE;~~QACrBa~~,~~MAAMb~~,WAAW,~~CAACgB~~,SAAS,~~GAAGrB~~,~~aAAaE~~,yBAAyBG,WAAW,~~EAAEa~~,~~MAAMb~~,WAAW,~~CAACgB~~,SAAS;~~IAC9G~~;IAEA,~~IAAIH~~,~~MAAMZ~~,kBAAkB,EAAE;~~QAC5BY~~,~~MAAMZ~~,kBAAkB,~~CAACe~~,SAAS,~~GAAGrB~~,aACnCE,yBAAyBI,kBAAkB,~~EAC3Cc~~,6BACAF,~~MAAMZ~~,kBAAkB,~~CAACe~~,SAAS;IAEtC;IAEA,~~OAAOH~~;AACT,EAAE"}
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":["makeResetStyles","makeStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useOverflowMenuPopoverNextStyles","borderRadius","borderRadius4XL","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","designVersion","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqClB,gBAAgB;IACzDY,SAAS;AACX;AAEA,MAAMO,mCAAmClB,WAAW;IAClDmB,cAAc;QACZA,cAAcjB,OAAOkB,eAAe;IACtC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBf;IAC1B,MAAMgB,8BAA8BP;IACpC,MAAMQ,gCAAgCP;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGJ;IAE1BA,MAAMlB,IAAI,CAACuB,SAAS,GAAG1B,aAAaE,yBAAyBC,IAAI,EAAEmB,mBAAmBD,MAAMlB,IAAI,CAACuB,SAAS;IAE1G,IAAIL,MAAMjB,QAAQ,EAAE;QAClBiB,MAAMjB,QAAQ,CAACsB,SAAS,GAAG1B,aAAaE,yBAAyBE,QAAQ,EAAEiB,MAAMjB,QAAQ,CAACsB,SAAS;IACrG;IACA,IAAIL,MAAMhB,WAAW,EAAE;QACrBgB,MAAMhB,WAAW,CAACqB,SAAS,GAAG1B,aAC5BE,yBAAyBG,WAAW,EACpCoB,kBAAkB,UAAUD,8BAA8BN,YAAY,EACtEG,MAAMhB,WAAW,CAACqB,SAAS;IAE/B;IAEA,IAAIL,MAAMf,kBAAkB,EAAE;QAC5Be,MAAMf,kBAAkB,CAACoB,SAAS,GAAG1B,aACnCE,yBAAyBI,kBAAkB,EAC3CiB,6BACAF,MAAMf,kBAAkB,CAACoB,SAAS;IAEtC;IAEA,OAAOL;AACT,EAAE"}

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

@@ -15,30 +15,60 @@ const useNextStyles = __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: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
     p: -1
-  }], [".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
-  }], [".f1s87h8p{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
+  }], ".f1nxs5xn{min-height:32px;}", [".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);}"]
 });
 /**
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state

package/lib/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":["makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","canvas","~~spacingVerticalS~~","sidecar","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC/G,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBV,gBAAgB;IAC3CW,OAAON,OAAOO,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBT,OAAOU,qBAAqB;IAC7CC,QAAQ,CAAC,EAAEX,OAAOY,eAAe,CAAC,OAAO,EAAEZ,OAAOa,mBAAmB,CAAC,CAAC;IACvEC,cAAcd,OAAOe,kBAAkB;IACvCC,WAAW;IACXC,WAAWjB,OAAOkB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYvB,iBAAiBwB,KAAK,CAACD,UAAU;IAC7CE,UAAUzB,iBAAiBwB,KAAK,CAACC,QAAQ;IACzCC,YAAY1B,iBAAiBwB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE3B,OAAO4B,iBAAiB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBT,OAAOgC,0BAA0B;QAClD1B,OAAON,OAAOiC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBT,OAAOkC,4BAA4B;QACpD5B,OAAON,OAAOmC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA,MAAM2B,gBAAgBxC,WAAW;IAC/BO,MAAM;~~QAAEW~~,cAAcd,OAAOqC,kBAAkB;~~IAAC;IAChDC~~,QAAQ;~~QACNX~~,~~SAAS~~,~~CAAC~~,~~KAAK~~,~~EAAE3B~~,OAAOuC,~~gBAAgB~~,CAAC,~~GAAG~~,~~EAAEvC~~,~~OAAOY~~,~~eAAe~~,CAAC,~~EAAE~~,~~EAAEZ,~~OAAO6B,kBAAkB,CAAC,CAAC;~~IACtG~~;~~IACAW~~,SAAS;~~QACPb~~,SAAS,CAAC,~~KAAK,~~EAAE3B,~~OAAO4B~~,~~iBAAiB~~,CAAC,~~GAAG,EAAE5B,OAAOY,eAAe,~~CAAC,~~EAAE~~,~~EAAEZ,~~OAAO6B,kBAAkB,CAAC,CAAC;~~IACvG~~;AACF;AAEA;;CAEC,GACD,OAAO,~~MAAMY~~,iDAAiD,CAC5DC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,~~oBAAoBxC~~;IAC1B,~~MAAMyC~~,~~oBAAoB7C~~;IAC1B,~~MAAM8C~~,~~aAAaX~~;~~IAEnBM~~,~~MAAMvC~~,IAAI,~~CAAC6C~~,SAAS,~~GAAGnD~~,aACrBK,uCAAuCC,IAAI,~~EAC3C0C~~,mBACAF,kBAAkB,UAAUI,~~WAAW5C~~,IAAI,~~EAC3CwC~~,kBAAkB,UAAUI,UAAU,CAACH,KAAK,EAC5CF,~~MAAMvC~~,IAAI,~~CAAC6C~~,SAAS;IAGtB,IAAIN,~~MAAMtC~~,QAAQ,EAAE;~~QAClBsC~~,~~MAAMtC~~,QAAQ,~~CAAC4C~~,SAAS,~~GAAGnD~~,aACzBK,uCAAuCE,QAAQ,EAC/~~C0C~~,~~kBAAkB1C~~,QAAQ,~~EAC1BsC~~,~~MAAMtC~~,QAAQ,~~CAAC4C~~,SAAS;QAG1B,MAAMC,~~MAAMnD~~,~~KAAKoD~~,QAAQ,CAACR,~~MAAMtC~~,QAAQ,~~CAAC6C~~,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIP,~~MAAMtC~~,QAAQ,~~CAACiD~~,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,~~GAAGnD~~,~~aAAaiD~~,kBAAkBS,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,~~GAAGnD~~,~~aAAaiD~~,kBAAkBU,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAN,~~MAAMtC~~,QAAQ,~~CAAC6C~~,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}
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":["makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC/G,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBV,gBAAgB;IAC3CW,OAAON,OAAOO,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBT,OAAOU,qBAAqB;IAC7CC,QAAQ,CAAC,EAAEX,OAAOY,eAAe,CAAC,OAAO,EAAEZ,OAAOa,mBAAmB,CAAC,CAAC;IACvEC,cAAcd,OAAOe,kBAAkB;IACvCC,WAAW;IACXC,WAAWjB,OAAOkB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYvB,iBAAiBwB,KAAK,CAACD,UAAU;IAC7CE,UAAUzB,iBAAiBwB,KAAK,CAACC,QAAQ;IACzCC,YAAY1B,iBAAiBwB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE3B,OAAO4B,iBAAiB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBT,OAAOgC,0BAA0B;QAClD1B,OAAON,OAAOiC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBT,OAAOkC,4BAA4B;QACpD5B,OAAON,OAAOmC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA,MAAM2B,gBAAgBxC,WAAW;IAC/BO,MAAM;QACJW,cAAcd,OAAOqC,kBAAkB;QACvC1B,QAAQ;QACRL,OAAON,OAAOsC,uBAAuB;QACrC7B,iBAAiBT,OAAOuC,uBAAuB;QAC/C,UAAU;YACRpB,QAAQ;YACRb,OAAON,OAAOiC,4BAA4B;YAC1CxB,iBAAiBT,OAAOwC,4BAA4B;QACtD;QACA,WAAW;YACTlC,OAAON,OAAOmC,8BAA8B;YAC5C1B,iBAAiBT,OAAOyC,8BAA8B;QACxD;IACF;IACAC,QAAQ;QACNC,WAAW;QACXhB,SAAS,CAAC,EAAE3B,OAAO4C,mBAAmB,CAAC,CAAC,EAAE5C,OAAO6B,kBAAkB,CAAC,CAAC;IACvE;IACAgB,SAAS;QACPF,WAAW;QACXhB,SAAS,CAAC,EAAE3B,OAAO4C,mBAAmB,CAAC,CAAC,EAAE5C,OAAO6B,kBAAkB,CAAC,CAAC;IACvE;AACF;AAEA;;CAEC,GACD,OAAO,MAAMiB,iDAAiD,CAC5DC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,oBAAoB7C;IAC1B,MAAM8C,oBAAoBlD;IAC1B,MAAMmD,aAAahB;IAEnBW,MAAM5C,IAAI,CAACkD,SAAS,GAAGxD,aACrBK,uCAAuCC,IAAI,EAC3C+C,mBACAF,kBAAkB,UAAUI,WAAWjD,IAAI,EAC3C6C,kBAAkB,UAAUI,UAAU,CAACH,KAAK,EAC5CF,MAAM5C,IAAI,CAACkD,SAAS;IAGtB,IAAIN,MAAM3C,QAAQ,EAAE;QAClB2C,MAAM3C,QAAQ,CAACiD,SAAS,GAAGxD,aACzBK,uCAAuCE,QAAQ,EAC/C+C,kBAAkB/C,QAAQ,EAC1B2C,MAAM3C,QAAQ,CAACiD,SAAS;QAG1B,MAAMC,MAAMxD,KAAKyD,QAAQ,CAACR,MAAM3C,QAAQ,CAACkD,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIP,MAAM3C,QAAQ,CAACsD,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAGxD,aAAasD,kBAAkBS,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAGxD,aAAasD,kBAAkBU,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAN,MAAM3C,QAAQ,CAACkD,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}

package/lib/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,GACD,WAGI"}
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,GACD,WAGI"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js CHANGED Viewed

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { MenuItem, ProgressBar, mergeCallbacks, slot, useId, useIsOverflowItemVisible } from '@fluentui/react-components';
 import { Dismiss20Regular } from '@fluentui/react-icons';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
+import { useDesignVersion } from '@fluentui-copilot/react-provider';
 /**
  * Create the state required to render AttachmentOverflowMenuItem.
  *
@@ -23,6 +24,7 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
   const {
     onAttachmentDismiss
   } = useAttachmentListContext_unstable(context => context);
+  const designVersion = useDesignVersion(props.designVersion);
   const root = slot.always({
     ref,
     icon: media,
@@ -55,7 +57,8 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
     root,
     progress,
     isVisible,
-    imageOnly
+    imageOnly,
+    designVersion
   };
 };
 //# sourceMappingURL=useAttachmentOverflowMenuItem.js.map

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map CHANGED Viewed

	@@ -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 { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/*\n Create the state required to render AttachmentOverflowMenuItem.\n \n The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n \n @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, media } = props;\n const 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: <Dismiss20Regular />, ...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","Dismiss20Regular","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","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,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iCAAiC,QAAQ,uCAAuC;~~AAMzF~~;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IAC7B,MAAMI,~~aAAaT~~,MAAM,~~eAAeK~~,MAAMK,EAAE;IAChD,MAAMC,~~YAAYV~~,~~yBAAyBQ~~;IAC3C,MAAM,EAAEG,mBAAmB,EAAE,~~GAAGT~~,~~kCAAkCU~~,CAAAA,UAAWA;~~IAE7E~~,MAAMC,~~OAAOf~~,~~KAAKgB~~,MAAM,CACtB;~~QAAET~~;~~QAAKU~~,~~MAAMR~~;~~QAAOS~~,gCAAkB,~~oBAACf~~;QAAqB,~~GAAGG~~,KAAK;QAAEK,IAAID;IAAW,GACrF;~~QAAES~~,~~aAAatB~~;IAAS;~~IAE1BkB~~,KAAKK,OAAO,~~GAAGrB~~,~~eAAegB~~,KAAKK,OAAO,EAAEC,CAAAA;~~QAC1CR~~,gCAAAA,0CAAAA,~~oBAAsBQ~~,IAAI;YAAEC,~~SAAShB~~,~~MAAMiB~~,QAAQ;~~YAAEd~~;YAAOE,IAAID;QAAW;IAC7E;IAEA,~~MAAMc~~,~~WAAWxB~~,~~KAAKyB~~,QAAQ,~~CAACnB~~,~~MAAMkB~~,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,~~mBAAmBtB~~,MAAMK,EAAE;QAC7B;~~QACAQ~~,~~aAAarB~~;IACf;IAEA,OAAO;~~QACL+B~~,YAAY;YACVd,~~MAAMlB~~;~~YACN2B~~,~~UAAU1B~~;QACZ;~~QACAiB~~;QACAS;~~QACAZ~~;QACAJ;IACF;AACF,EAAE"}
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 { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/*\n Create the state required to render AttachmentOverflowMenuItem.\n \n The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n \n @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, media } = props;\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n const designVersion = useDesignVersion(props.designVersion);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <Dismiss20Regular />, ...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 designVersion,\n };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useId","useIsOverflowItemVisible","Dismiss20Regular","useAttachmentListContext_unstable","useDesignVersion","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","menuItemId","id","isVisible","onAttachmentDismiss","context","designVersion","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,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iCAAiC,QAAQ,uCAAuC;AAKzF,SAASC,gBAAgB,QAAQ,mCAAmC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IAC7B,MAAMI,aAAaV,MAAM,eAAeM,MAAMK,EAAE;IAChD,MAAMC,YAAYX,yBAAyBS;IAC3C,MAAM,EAAEG,mBAAmB,EAAE,GAAGV,kCAAkCW,CAAAA,UAAWA;IAC7E,MAAMC,gBAAgBX,iBAAiBE,MAAMS,aAAa;IAE1D,MAAMC,OAAOjB,KAAKkB,MAAM,CACtB;QAAEV;QAAKW,MAAMT;QAAOU,gCAAkB,oBAACjB;QAAqB,GAAGI,KAAK;QAAEK,IAAID;IAAW,GACrF;QAAEU,aAAaxB;IAAS;IAE1BoB,KAAKK,OAAO,GAAGvB,eAAekB,KAAKK,OAAO,EAAEC,CAAAA;QAC1CT,gCAAAA,0CAAAA,oBAAsBS,IAAI;YAAEC,SAASjB,MAAMkB,QAAQ;YAAEf;YAAOE,IAAID;QAAW;IAC7E;IAEA,MAAMe,WAAW1B,KAAK2B,QAAQ,CAACpB,MAAMmB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmBvB,MAAMK,EAAE;QAC7B;QACAS,aAAavB;IACf;IAEA,OAAO;QACLiC,YAAY;YACVd,MAAMpB;YACN6B,UAAU5B;QACZ;QACAmB;QACAS;QACAb;QACAJ;QACAO;IACF;AACF,EAAE"}