@fluentui-copilot/react-attachments 0.11.2 → 0.12.1

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map

@@ -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":"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"}
+{"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":"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"}

package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js.map

@@ -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"}
+{"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

@@ -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

@@ -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"}
+{"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"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js

@@ -1,15 +1,39 @@
-import { __styles, mergeClasses, slot } from '@fluentui/react-components';
+import { __styles, mergeClasses, slot, tokens } from '@fluentui/react-components';
 import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
 export const attachmentOverflowMenuItemClassNames = {
   root: 'fai-AttachmentOverflowMenuItem',
   progress: 'fai-AttachmentOverflowMenuItem__progress'
 };
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
 const useStyles = __styles({
   imageOnly: {
     Bt984gj: "f122n59"
+  },
+  secondaryContent: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59"
   }
 }, {
-  d: [".f122n59{align-items:center;}"]
+  d: [".f122n59{align-items:center;}", ".f22iagw{display:flex;}"]
+});
+const useNextStyles = __styles({
+  nextStyles: {
+    Dah5zi: 0,
+    B1tsrr9: 0,
+    qqdqy8: 0,
+    Bkh64rk: 0,
+    e3fwne: "f84qbf7",
+    Bw0xxkn: 0,
+    oeaueh: 0,
+    Bpd4iqm: 0,
+    Befb4lg: "f1bars0k"
+  }
+}, {
+  d: [[".f84qbf7[data-fui-focus-visible]::after{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], [".f1bars0k{outline:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }]]
 });
 /**
  * Apply styling to the AttachmentList slots based on the state
@@ -18,11 +42,20 @@ export const useAttachmentOverflowMenuItemStyles_unstable = state => {
   'use no memo';
 
   const {
-    imageOnly
+    imageOnly,
+    designVersion
   } = state;
   const styles = useStyles();
+  const nextStyles = useNextStyles();
   const progressBarStyles = useProgressBarStyles();
-  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, state.root.className);
+  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+  const secondaryContent = slot.optional(state.root.secondaryContent, {
+    elementType: 'span'
+  });
+  if (secondaryContent) {
+    secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);
+    state.root.secondaryContent = secondaryContent;
+  }
   if (state.progress) {
     state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
     const bar = slot.optional(state.progress.bar, {

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly } = state;\n  const styles = useStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","slot","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","styles","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BQ,WAAW;QACTC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,SAASL;IACf,MAAMM,oBAAoBV;IAE1BQ,MAAMN,IAAI,CAACS,SAAS,GAAGb,aACrBG,qCAAqCC,IAAI,EACzCG,aAAaI,OAAOJ,SAAS,EAC7BG,MAAMN,IAAI,CAACS,SAAS;IAGtB,IAAIH,MAAML,QAAQ,EAAE;QAClBK,MAAML,QAAQ,CAACQ,SAAS,GAAGb,aACzBG,qCAAqCE,QAAQ,EAC7CO,kBAAkBP,QAAQ,EAC1BK,MAAML,QAAQ,CAACQ,SAAS;QAG1B,MAAMC,MAAMb,KAAKc,QAAQ,CAACL,MAAML,QAAQ,CAACS,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAML,QAAQ,CAACa,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAGb,aAAaY,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAGb,aAAaY,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAML,QAAQ,CAACS,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n  secondaryContent: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nconst useNextStyles = makeStyles({\n  nextStyles: {\n    [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n      borderRadius: tokens.borderRadiusXLarge,\n    },\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly, designVersion } = state;\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    designVersion === 'next' && nextStyles.nextStyles,\n    state.root.className,\n  );\n\n  const secondaryContent = slot.optional(state.root.secondaryContent, {\n    elementType: 'span',\n  });\n  if (secondaryContent) {\n    secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);\n    state.root.secondaryContent = secondaryContent;\n  }\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","slot","tokens","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","FOCUS_VISIBLE_ATTR","useStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","borderRadiusXLarge","outline","strokeWidthThin","colorTransparentStroke","useAttachmentOverflowMenuItemStyles_unstable","state","designVersion","styles","progressBarStyles","className","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,QAAQ,6BAA6B;AACpF,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYT,WAAW;IAC3BU,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBd,WAAW;IAC/Be,YAAY;QACV,CAAC,CAAC,CAAC,EAAEP,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCQ,cAAcb,OAAOc,kBAAkB;QACzC;QACAC,SAAS,CAAC,EAAEf,OAAOgB,eAAe,CAAC,OAAO,EAAEhB,OAAOiB,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAM,EAAEZ,SAAS,EAAEa,aAAa,EAAE,GAAGD;IACrC,MAAME,SAASf;IACf,MAAMM,aAAaD;IACnB,MAAMW,oBAAoBrB;IAE1BkB,MAAMhB,IAAI,CAACoB,SAAS,GAAGzB,aACrBI,qCAAqCC,IAAI,EACzCI,aAAac,OAAOd,SAAS,EAC7Ba,kBAAkB,UAAUR,WAAWA,UAAU,EACjDO,MAAMhB,IAAI,CAACoB,SAAS;IAGtB,MAAMd,mBAAmBV,KAAKyB,QAAQ,CAACL,MAAMhB,IAAI,CAACM,gBAAgB,EAAE;QAClEgB,aAAa;IACf;IACA,IAAIhB,kBAAkB;QACpBA,iBAAiBc,SAAS,GAAGzB,aAAauB,OAAOZ,gBAAgB,EAAEA,iBAAiBc,SAAS;QAC7FJ,MAAMhB,IAAI,CAACM,gBAAgB,GAAGA;IAChC;IAEA,IAAIU,MAAMf,QAAQ,EAAE;QAClBe,MAAMf,QAAQ,CAACmB,SAAS,GAAGzB,aACzBI,qCAAqCE,QAAQ,EAC7CkB,kBAAkBlB,QAAQ,EAC1Be,MAAMf,QAAQ,CAACmB,SAAS;QAG1B,MAAMG,MAAM3B,KAAKyB,QAAQ,CAACL,MAAMf,QAAQ,CAACsB,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIP,MAAMf,QAAQ,CAACwB,KAAK,KAAKC,WAAW;gBACtCH,IAAIH,SAAS,GAAGzB,aAAawB,kBAAkBQ,wBAAwB,EAAEJ,IAAIH,SAAS;YACxF,OAAO;gBACLG,IAAIH,SAAS,GAAGzB,aAAawB,kBAAkBS,kBAAkB,EAAEL,IAAIH,SAAS;YAClF;YACAJ,MAAMf,QAAQ,CAACsB,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}

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

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

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

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

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

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

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

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

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

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