@fluentui-copilot/react-attachments 0.9.1 → 0.9.3

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';
+import { MenuItem, ProgressBar, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';
 import { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
@@ -31,11 +31,21 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
   root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
     id
   }));
+  const progress = slot.optional(props.progress, {
+    defaultProps: {
+      shape: 'square',
+      thickness: 'large',
+      'aria-labelledby': props.id
+    },
+    elementType: ProgressBar
+  });
   return {
     components: {
-      root: MenuItem
+      root: MenuItem,
+      progress: ProgressBar
     },
     root,
+    progress,
     isVisible,
     imageOnly
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { id, imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev =>\n    onAttachmentDismiss?.(ev, {\n      id,\n    }),\n  );\n\n  return {\n    components: {\n      root: MenuItem,\n    },\n    root,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["React","MenuItem","mergeCallbacks","slot","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","id","imageOnly","media","DismissIcon","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,EAAEC,cAAc,EAAEC,IAAI,EAAEC,wBAAwB,QAAQ,6BAA6B;AACtG,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IACjC,MAAMK,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,YAAYZ,yBAAyBQ;IAE3C,MAAMK,sBAAsBT,kCAAkCU,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOhB,KAAKiB,MAAM,CACtB;QAAET;QAAKU,MAAMP;QAAOQ,gCAAkB,oBAACP;QAAgB,GAAGL,KAAK;IAAC,GAChE;QAAEa,aAAatB;IAAS;IAE1BkB,KAAKK,OAAO,GAAGtB,eAAeiB,KAAKK,OAAO,EAAEC,CAAAA,KAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YACxBb;QACF;IAGF,OAAO;QACLc,YAAY;YACVP,MAAMlB;QACR;QACAkB;QACAH;QACAH;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, ProgressBar, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { id, imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev =>\n    onAttachmentDismiss?.(ev, {\n      id,\n    }),\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","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","id","imageOnly","media","DismissIcon","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,EAAEC,WAAW,EAAEC,cAAc,EAAEC,IAAI,EAAEC,wBAAwB,QAAQ,6BAA6B;AACnH,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IACjC,MAAMK,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,YAAYZ,yBAAyBQ;IAE3C,MAAMK,sBAAsBT,kCAAkCU,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOhB,KAAKiB,MAAM,CACtB;QAAET;QAAKU,MAAMP;QAAOQ,gCAAkB,oBAACP;QAAgB,GAAGL,KAAK;IAAC,GAChE;QAAEa,aAAavB;IAAS;IAE1BmB,KAAKK,OAAO,GAAGtB,eAAeiB,KAAKK,OAAO,EAAEC,CAAAA,KAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YACxBb;QACF;IAGF,MAAMc,WAAWvB,KAAKwB,QAAQ,CAACjB,MAAMgB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmBpB,MAAME,EAAE;QAC7B;QACAW,aAAatB;IACf;IAEA,OAAO;QACL8B,YAAY;YACVZ,MAAMnB;YACN0B,UAAUzB;QACZ;QACAkB;QACAO;QACAV;QACAH;IACF;AACF,EAAE"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.js

@@ -1,8 +1,9 @@
-import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
+import { __styles, mergeClasses, slot } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles';
 export const attachmentOverflowMenuItemClassNames = {
-  root: 'fai-AttachmentOverflowMenuItem'
+  root: 'fai-AttachmentOverflowMenuItem',
+  progress: 'fai-AttachmentOverflowMenuItem__progress'
 };
-const useRootBaseClassName = __resetStyles("r0", null, []);
 const useStyles = __styles({
   imageOnly: {
     Bt984gj: "f122n59"
@@ -17,9 +18,24 @@ export const useAttachmentOverflowMenuItemStyles_unstable = state => {
   const {
     imageOnly
   } = state;
-  const rootBaseClassName = useRootBaseClassName();
   const styles = useStyles();
-  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, imageOnly && styles.imageOnly, state.root.className);
+  const progressBarStyles = useProgressBarStyles();
+  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, state.root.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
+    const bar = slot.optional(state.progress.bar, {
+      elementType: 'div',
+      renderByDefault: true
+    });
+    if (bar) {
+      if (state.progress.value === undefined) {
+        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+      } else {
+        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+      }
+      state.progress.bar = bar;
+    }
+  }
   return state;
 };
 //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\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};\n\nconst useRootBaseClassName = makeResetStyles({});\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  const { imageOnly } = state;\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    rootBaseClassName,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","attachmentOverflowMenuItemClassNames","root","useRootBaseClassName","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","rootBaseClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAOvF,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB,CAAC;AAC9C,MAAMM,YAAYL,WAAW;IAC3BM,WAAW;QACTC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,oBAAoBN;IAC1B,MAAMO,SAASN;IAEfI,MAAMN,IAAI,CAACS,SAAS,GAAGX,aACrBC,qCAAqCC,IAAI,EACzCO,mBACAJ,aAAaK,OAAOL,SAAS,EAC7BG,MAAMN,IAAI,CAACS,SAAS;IAGtB,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  const { imageOnly } = state;\n  const styles = useStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","slot","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","styles","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,QAAQ,gCAAgC;AAOrE,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,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"}

package/lib/components/AttachmentTag/AttachmentTag.js

@@ -5,7 +5,7 @@ import { useAttachmentTagStyles_unstable } from './useAttachmentTagStyles';
 import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
 /**
  * @deprecated use new Attachment component exported from \@fluentui-copilot/react-attachments package instead.
- * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).
+ * Deprecated on 4/9/2024.
  */
 export const AttachmentTag = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAttachmentTag_unstable(props, ref);

package/lib/components/AttachmentTag/AttachmentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTag_unstable } from './useAttachmentTag';\nimport { renderAttachmentTag_unstable } from './renderAttachmentTag';\nimport { useAttachmentTagStyles_unstable } from './useAttachmentTagStyles';\nimport type { AttachmentTagProps } from './AttachmentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/**\n * @deprecated use new Attachment component exported from \\@fluentui-copilot/react-attachments package instead.\n * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).\n */\nexport const AttachmentTag: ForwardRefComponent<AttachmentTagProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTag_unstable(props, ref);\n\n  useAttachmentTagStyles_unstable(state);\n  useCustomStyleHook('useAttachmentTagStyles')(state);\n\n  return renderAttachmentTag_unstable(state);\n});\n\nAttachmentTag.displayName = 'AttachmentTag';\n"],"names":["React","useAttachmentTag_unstable","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useCustomStyleHook","AttachmentTag","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAG3E,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,mBAAmB,0BAA0BK;IAE7C,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTag_unstable } from './useAttachmentTag';\nimport { renderAttachmentTag_unstable } from './renderAttachmentTag';\nimport { useAttachmentTagStyles_unstable } from './useAttachmentTagStyles';\nimport type { AttachmentTagProps } from './AttachmentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/**\n * @deprecated use new Attachment component exported from \\@fluentui-copilot/react-attachments package instead.\n * Deprecated on 4/9/2024.\n */\nexport const AttachmentTag: ForwardRefComponent<AttachmentTagProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTag_unstable(props, ref);\n\n  useAttachmentTagStyles_unstable(state);\n  useCustomStyleHook('useAttachmentTagStyles')(state);\n\n  return renderAttachmentTag_unstable(state);\n});\n\nAttachmentTag.displayName = 'AttachmentTag';\n"],"names":["React","useAttachmentTag_unstable","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useCustomStyleHook","AttachmentTag","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAG3E,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CL,gCAAgCM;IAChCL,mBAAmB,0BAA0BK;IAE7C,OAAOP,6BAA6BO;AACtC,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/AttachmentTagItem/AttachmentTagItem.js

@@ -4,7 +4,7 @@ import { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';
 import { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';
 /**
  * @deprecated use new AttachmentOverflowMenuItem component exported from \@fluentui-copilot/react-attachments package instead.
- * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).
+ * Deprecated on 4/9/2024.
  */
 export const AttachmentTagItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAttachmentTagItem_unstable(props, ref);

package/lib/components/AttachmentTagItem/AttachmentTagItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTagItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTagItem_unstable } from './useAttachmentTagItem';\nimport { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';\nimport { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';\nimport type { AttachmentTagItemProps } from './AttachmentTagItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/**\n * @deprecated use new AttachmentOverflowMenuItem component exported from \\@fluentui-copilot/react-attachments package instead.\n * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).\n */\nexport const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTagItem_unstable(props, ref);\n\n  useAttachmentTagItemStyles_unstable(state);\n  return renderAttachmentTagItem_unstable(state);\n});\n\nAttachmentTagItem.displayName = 'AttachmentTagItem';\n"],"names":["React","useAttachmentTagItem_unstable","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","AttachmentTagItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AAInF;;;CAGC,GACD,OAAO,MAAMC,kCAAiEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpC,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentTagItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentTagItem_unstable } from './useAttachmentTagItem';\nimport { renderAttachmentTagItem_unstable } from './renderAttachmentTagItem';\nimport { useAttachmentTagItemStyles_unstable } from './useAttachmentTagItemStyles';\nimport type { AttachmentTagItemProps } from './AttachmentTagItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n/**\n * @deprecated use new AttachmentOverflowMenuItem component exported from \\@fluentui-copilot/react-attachments package instead.\n * Deprecated on 4/9/2024.\n */\nexport const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTagItem_unstable(props, ref);\n\n  useAttachmentTagItemStyles_unstable(state);\n  return renderAttachmentTagItem_unstable(state);\n});\n\nAttachmentTagItem.displayName = 'AttachmentTagItem';\n"],"names":["React","useAttachmentTagItem_unstable","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","AttachmentTagItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AAInF;;;CAGC,GACD,OAAO,MAAMC,kCAAiEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQP,8BAA8BK,OAAOC;IAEnDJ,oCAAoCK;IACpC,OAAON,iCAAiCM;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

package/lib/components/AttachmentTagList/AttachmentTagList.js

@@ -6,7 +6,7 @@ import { useAttachmentTagListStyles_unstable } from './useAttachmentTagListStyle
 import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
 /**
  * @deprecated use new AttachmentList component exported from \@fluentui-copilot/react-attachments package instead.
- * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).
+ * Deprecated on 4/9/2024.
  */
 export const AttachmentTagList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAttachmentTagList_unstable(props, ref);

package/lib/components/AttachmentTagList/AttachmentTagList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentTagList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAttachmentTagList_unstable } from './renderAttachmentTagList';\nimport { useAttachmentTagList_unstable } from './useAttachmentTagList';\nimport { useAttachmentTagListContextValues_unstable } from './useAttachmentTagListContextValues';\nimport { useAttachmentTagListStyles_unstable } from './useAttachmentTagListStyles';\nimport type { AttachmentTagListProps } from './AttachmentTagList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/**\n * @deprecated use new AttachmentList component exported from \\@fluentui-copilot/react-attachments package instead.\n * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).\n */\nexport const AttachmentTagList: ForwardRefComponent<AttachmentTagListProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTagList_unstable(props, ref);\n  const contextValues = useAttachmentTagListContextValues_unstable(state);\n\n  useAttachmentTagListStyles_unstable(state);\n  useCustomStyleHook('useAttachmentTagListStyles')(state);\n\n  return renderAttachmentTagList_unstable(state, contextValues);\n});\n\nAttachmentTagList.displayName = 'AttachmentTagList';\n"],"names":["React","renderAttachmentTagList_unstable","useAttachmentTagList_unstable","useAttachmentTagListContextValues_unstable","useAttachmentTagListStyles_unstable","useCustomStyleHook","AttachmentTagList","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0CAA0C,QAAQ,sCAAsC;AACjG,SAASC,mCAAmC,QAAQ,+BAA+B;AAGnF,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;CAGC,GACD,OAAO,MAAMC,kCAAiEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IACnD,MAAME,gBAAgBR,2CAA2CO;IAEjEN,oCAAoCM;IACpCL,mBAAmB,8BAA8BK;IAEjD,OAAOT,iCAAiCS,OAAOC;AACjD,GAAG;AAEHL,kBAAkBM,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentTagList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAttachmentTagList_unstable } from './renderAttachmentTagList';\nimport { useAttachmentTagList_unstable } from './useAttachmentTagList';\nimport { useAttachmentTagListContextValues_unstable } from './useAttachmentTagListContextValues';\nimport { useAttachmentTagListStyles_unstable } from './useAttachmentTagListStyles';\nimport type { AttachmentTagListProps } from './AttachmentTagList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n/**\n * @deprecated use new AttachmentList component exported from \\@fluentui-copilot/react-attachments package instead.\n * Deprecated on 4/9/2024.\n */\nexport const AttachmentTagList: ForwardRefComponent<AttachmentTagListProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentTagList_unstable(props, ref);\n  const contextValues = useAttachmentTagListContextValues_unstable(state);\n\n  useAttachmentTagListStyles_unstable(state);\n  useCustomStyleHook('useAttachmentTagListStyles')(state);\n\n  return renderAttachmentTagList_unstable(state, contextValues);\n});\n\nAttachmentTagList.displayName = 'AttachmentTagList';\n"],"names":["React","renderAttachmentTagList_unstable","useAttachmentTagList_unstable","useAttachmentTagListContextValues_unstable","useAttachmentTagListStyles_unstable","useCustomStyleHook","AttachmentTagList","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0CAA0C,QAAQ,sCAAsC;AACjG,SAASC,mCAAmC,QAAQ,+BAA+B;AAGnF,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;;CAGC,GACD,OAAO,MAAMC,kCAAiEN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IACnD,MAAME,gBAAgBR,2CAA2CO;IAEjEN,oCAAoCM;IACpCL,mBAAmB,8BAA8BK;IAEjD,OAAOT,iCAAiCS,OAAOC;AACjD,GAAG;AAEHL,kBAAkBM,WAAW,GAAG"}

package/lib/components/utils/useProgressBarStyles.js

@@ -0,0 +1,54 @@
+import { __styles, tokens } from '@fluentui/react-components';
+import { tokens as copilotTokens } from '@fluentui-copilot/tokens';
+const indeterminateProgressBarReducedMotion = {
+  '0%': {
+    opacity: '.2'
+  },
+  '50%': {
+    opacity: '1'
+  },
+  '100%': {
+    opacity: '.2'
+  }
+};
+/**
+ * @internal
+ */
+export const useProgressBarStyles = __styles({
+  progress: {
+    a9b677: "fly5x3f",
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f1yab3r1",
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bqenvij: "f6ywr7j",
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"]
+  },
+  regularProgressBar: {
+    Bqenvij: "f1l02sjl",
+    Bcmaq0h: "fx7worf"
+  },
+  indeterminateProgressBar: {
+    Bqenvij: "f1l02sjl",
+    De3pzq: "f1c21dwh",
+    Bcmaq0h: "f1hxqsn5",
+    B3ks32h: "f2xo07b",
+    B3vm3ge: "f1f2ih6z",
+    Gqtpxc: "f7h4d4t",
+    vr3tzx: "f32r5lb"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f6ywr7j{height:4px;}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1l02sjl{height:100%;}", ".fx7worf{background-image:linear-gradient(90deg, var(--fai-colorBrandFlair1) 35%, var(--fai-colorBrandFlair2) 70%, var(--fai-colorBrandFlair3) 92%);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1hxqsn5{background-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--fai-colorBrandFlair1) 35%, var(--fai-colorBrandFlair2) 70%, var(--fai-colorBrandFlair3) 92%,  rgba(0,0,0,0));}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f2xo07b{max-width:100%;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1f2ih6z{animation-iteration-count:infinite;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f7h4d4t{animation-duration:3s;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f32r5lb{animation-name:ftc26vs;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]],
+  k: ["@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"]
+});
+//# sourceMappingURL=useProgressBarStyles.js.map

package/lib/components/utils/useProgressBarStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\nimport { tokens as copilotTokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2', // matches indeterminate bar width\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n  progress: {\n    width: '100%',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n  },\n  regularProgressBar: {\n    height: '100%',\n    backgroundImage: `linear-gradient(90deg, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%)`,\n  },\n  indeterminateProgressBar: {\n    height: '100%',\n    backgroundColor: tokens.colorTransparentBackground,\n    backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n});\n"],"names":["makeStyles","tokens","copilotTokens","indeterminateProgressBarReducedMotion","opacity","useProgressBarStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAChE,SAASA,UAAUC,aAAa,QAAQ,2BAA2B;AAEnE,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuBL,WAAW;IAC7CM,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBZ,OAAOa,kBAAkB;QACjDC,yBAAyBd,OAAOa,kBAAkB;IACpD;IACAE,oBAAoB;QAClBJ,QAAQ;QACRK,iBAAiB,CAAC,uBAAuB,EAAEf,cAAcgB,gBAAgB,CAAC,MAAM,EAAEhB,cAAciB,gBAAgB,CAAC,MAAM,EAAEjB,cAAckB,gBAAgB,CAAC,KAAK,CAAC;IAChK;IACAC,0BAA0B;QACxBT,QAAQ;QACRU,iBAAiBrB,OAAOsB,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEf,cAAcgB,gBAAgB,CAAC,MAAM,EAAEhB,cAAciB,gBAAgB,CAAC,MAAM,EAAEjB,cAAckB,gBAAgB,CAAC,qBAAqB,CAAC;QAChM,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAexB;QACjB;IACF;AACF,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  id: string;\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  id: string;\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}

package/lib-commonjs/components/Attachment/renderAttachment.js

@@ -17,7 +17,8 @@ const renderAttachment_unstable = (state)=>{
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
                 children: [
                     state.media && !state.imageOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {}),
+                    state.progress && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.progress, {})
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dismissButton, {

package/lib-commonjs/components/Attachment/renderAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsxs","primaryAction","media","dismissButton","imageOnly","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE4B;AAO1BA,MAAAA,4BAA6BC,CAAAA;oCAE7B,EAAAA;;;uBAEI,GAAAC,IAAAA,gBAACD,EAAAA,MAAME,aAAa,EAAA;;;;;;0BACjBF,IAAAA,eAAAA,EAAMG,MAAKC,aAAWC,EAAAA;6DACvBL,MAACA,WAAMM,EAAO,CAAA;;;;+CAGd"}
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsxs","primaryAction","media","dismissButton","imageOnly","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE4B;AAO1BA,MAAAA,4BAA6BC,CAAAA;oCAE7B,EAAAA;;;uBAEI,GAAAC,IAAAA,gBAACD,EAAAA,MAAME,aAAa,EAAA;;;;;;;0BACjBF,IAAAA,eAAAA,EAAMG,MAAKC,aAAWC,EAAAA;6DACvBL,MAACA,WAAMM,EAAO,CAAA;;;;+CAGTF"}

package/lib-commonjs/components/Attachment/useAttachment.js

@@ -17,6 +17,7 @@ const useAttachment_unstable = (props, ref)=>{
     const { imageOnly } = props;
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
     const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
+    const isLoading = !!props.progress;
     const root = _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
         ref,
         ...props
@@ -50,6 +51,14 @@ const useAttachment_unstable = (props, ref)=>{
         },
         elementType: 'span'
     });
+    const progress = _reactcomponents.slot.optional(props.progress, {
+        defaultProps: {
+            shape: 'square',
+            thickness: 'large',
+            'aria-labelledby': props.id
+        },
+        elementType: _reactcomponents.ProgressBar
+    });
     const state = {
         components: {
             root: 'div',
@@ -57,7 +66,8 @@ const useAttachment_unstable = (props, ref)=>{
             dismissButton: 'button',
             media: 'span',
             content: 'span',
-            dismissIcon: 'span'
+            dismissIcon: 'span',
+            progress: _reactcomponents.ProgressBar
         },
         root,
         primaryAction,
@@ -65,7 +75,9 @@ const useAttachment_unstable = (props, ref)=>{
         media,
         content,
         dismissIcon,
-        imageOnly
+        progress,
+        imageOnly,
+        isLoading
     };
     if (state.primaryAction.as === 'span') {
         state.components.primaryAction = 'span';

package/lib-commonjs/components/Attachment/useAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Dismiss' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => onAttachmentDismiss?.(ev, { id: props.id }),\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    imageOnly,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["imageOnly","props","onAttachmentDismiss","ref","useAttachmentListContext_unstable","context","root","slot","always","getIntrinsicElementProps","elementType","primaryAction","dismissButton","defaultProps","media","optional","onClick","ev","content","children","dismissIcon","React","createElement","DismissIcon","components","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCACwC;4BACD;uCACZ;AAahD,MAAQA,yBAAcC,CAAAA,OAAAA;UACtB,EAEAD,SAAME,KAEND;UAEIE,cAAAA,IAAAA,sBAAAA,EAAAA,2BAAAA,EAAAA,4BAAAA;UACAD,sBAAQE,IAAAA,wDAAA,EAAAC,CAAAA,UAAAA,QAAAH,mBAAA;UAEVI,OAAAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;;QAAqB,GAAAR,KAAA;QAGvB;qBACES;;UAGFC,gBAAMC,qBAAgBL,CAAAA,MAAKC,CAAAA,MAAOP,aAAMW,EAAa;qBACnDC;;UAAwCD,gBAAAL,qBAAA,CAAAC,MAAA,CAAAP,MAAAW,aAAA,EAAA;sBACxCF;YACF,cAAA;QAEAE;qBAEmGX;;kBAG7Fa,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA,KAAAf,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAe,IAAA;gBAAEP,MAAAA,EAAAA;;UAE3CI,QAAMI,qBAAUX,CAAAA,QAAKC,CAAAA,MAAOP,KAAMiB,EAAAA;qBAChCL;;UAEAK,UAAAX,qBAAA,CAAAC,MAAA,CAAAP,MAAAiB,OAAA,EAAA;sBACAR;YACFS,UAAAlB,MAAAkB,QAAA;QAEA;qBACEN;;UAEAO,cAAAb,qBAAA,CAAAC,MAAA,CAAAP,MAAAmB,WAAA,EAAA;sBACAV;YACFS,UAAA,WAAA,GAAAE,OAAAC,aAAA,CAAAC,aAAA;QAEA;qBACEC;;kBAEEb;oBACAC;kBACAE;2BACS;2BACTM;mBACF;qBAEAd;yBACAK;;;;;;QAMFO;QAEAE;;;QAIAK,MAAOA,aAAAA,CAAAA,EAAAA,KAAAA,QAAAA;QACPA,MAAAD,UAAA,CAAAb,aAAA,GAAA"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n  const isLoading = !!props.progress;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Dismiss' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => onAttachmentDismiss?.(ev, { id: props.id }),\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\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  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["imageOnly","props","onAttachmentDismiss","DismissIcon","always","getIntrinsicElementProps","ref","isLoading","progress","root","slot","elementType","primaryAction","dismissButton","defaultProps","media","optional","onClick","ev","content","children","dismissIcon","React","createElement","thickness","id","components","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCACqD;4BACd;uCACZ;AAahD,MAAQA,yBAAcC,CAAAA,OAAAA;UACtB,EACAD,SAAME,KACND;UAEAE,cAAkBC,IAAAA,sBAChBC,EAAAA,2BAAAA,EAAAA,4BAAgC;UAC9BC,sBAAAA,IAAAA,wDAAAA,EAAAA,CAAAA,UAAAA,QAAAA,mBAAAA;UACAC,YAAQ,CAAA,CAAAN,MAAAO,QAAA;UAEVC,OAAAC,qBAAA,CAAAN,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;;QAAqB,GAAAJ,KAAA;QAGvB;qBACEU;;UAGFC,gBAAMC,qBAAgBH,CAAAA,MAAKN,CAAAA,MAAOH,aAAMY,EAAa;qBACnDC;;UAAwCD,gBAAAH,qBAAA,CAAAN,MAAA,CAAAH,MAAAY,aAAA,EAAA;sBACxCF;YACF,cAAA;QAEAE;qBAEmGZ;;kBAG7Fc,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA,KAAAhB,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAgB,IAAA;gBAAEP,MAAAA,EAAAA;;UAE3CI,QAAMI,qBAAUT,CAAAA,QAAKN,CAAAA,MAAOH,KAAMkB,EAAAA;qBAChCL;;UAEAK,UAAAT,qBAAA,CAAAN,MAAA,CAAAH,MAAAkB,OAAA,EAAA;sBACAR;YACFS,UAAAnB,MAAAmB,QAAA;QAEA;qBACEN;;UAEAO,cAAAX,qBAAA,CAAAN,MAAA,CAAAH,MAAAoB,WAAA,EAAA;sBACAV;YACFS,UAAA,WAAA,GAAAE,OAAAC,aAAA,CAAApB,aAAA;QAEA;qBACEW;;qBAEEU,qBAAW,CAAAR,QAAA,CAAAf,MAAAO,QAAA,EAAA;sBACX;mBACF;uBACAG;YACF,mBAAAV,MAAAwB,EAAA;QAEA;qBACEC,4BAAY;;kBAEVd;oBACAC;kBACAE;2BACS;2BACTM;mBACAb;qBACF;yBAEAC;sBACAG,4BAAAA;;;;;;;;QAQFJ;QAEAR;;;QAIA2B,MAAOA,aAAAA,CAAAA,EAAAA,KAAAA,QAAAA;QACPA,MAAAD,UAAA,CAAAd,aAAA,GAAA"}

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

@@ -17,18 +17,20 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _useProgressBarStyles = require("../utils/useProgressBarStyles");
 const attachmentClassNames = {
     root: 'fai-Attachment',
     primaryAction: 'fai-Attachment__primaryAction',
     dismissButton: 'fai-Attachment__dismissButton',
     media: 'fai-Attachment__media',
     content: 'fai-Attachment__content',
-    dismissIcon: 'fai-Attachment__dismissIcon'
+    dismissIcon: 'fai-Attachment__dismissIcon',
+    progress: 'fai-Attachment__progress'
 };
 const ATTACHMENT_MAXWIDTH = '180px';
 const ATTACHMENT_SIZE = '20px';
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rmfolg5", null, [
-    ".rmfolg5{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;}"
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r16wonf3", null, [
+    ".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"
 ]);
 const buttonBaseStyles = {
     alignItems: 'center',
@@ -150,16 +152,32 @@ const useAttachmentStyles_unstable = (state)=>{
     const mediaBaseClassName = useMediaBaseClassName();
     const contentBaseClassName = useContentBaseClassName();
     const dismissIconBaseClassName = useDismissIconBaseClassName();
+    const progressBarStyles = (0, _useProgressBarStyles.useProgressBarStyles)();
     const primaryActionStyles = usePrimaryActionStyles();
     const imageOnlyStyles = useImageOnlyStyles();
     const { imageOnly, primaryAction } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
     state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
     if (state.media) {
         state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, state.media.className);
     }
     state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
     state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = _reactcomponents.slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
     return state;
 }; //# sourceMappingURL=useAttachmentStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  return state;\n};\n"],"names":["attachmentClassNames","borderTopLeftRadius","borderRadiusNone","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","columnGap","spacingHorizontalSNudge","color","buttonBaseStyles","alignItems","backgroundColor","colorStrokeFocus2","cursor","justifyContent","__resetStyles","usePrimaryActionStyles","createCustomFocusIndicatorStyle","zIndex","Jwef8y","verticalAlign","ecr2s2","lj723h","usePrimaryActionBaseClassName","Bqrx1nm","borderTopRightRadius","maxWidth","spacingHorizontalXXS","padding","spacingVerticalXS","m","button","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","__styles","Bg96gwp","spacingHorizontalXS","borderBottomLeftRadius","borderBottomRightRadius","mediaBaseClassName","useMediaBaseClassName","useContentBaseClassName","colorNeutralBackground3Hover","colorNeutralForeground2BrandHover","imageOnlyStyles","state","colorNeutralBackground3Pressed","rootBaseClassName","className","colorNeutralForeground2BrandPressed","primaryActionBaseClassName","as","primaryActionStyles","imageOnly","mergeClasses","dismissButtonBaseClassName","contentBaseClassName","dismissIconBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  slot,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentClassNames","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bqrx1nm","usePrimaryActionBaseClassName","kx9iu6","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","borderTopLeftRadius","borderBottomLeftRadius","borderRadiusNone","borderTopRightRadius","borderBottomRightRadius","contentBaseClassName","useContentBaseClassName","useDismissIconBaseClassName","colorNeutralForeground2BrandHover","imageOnlyStyles","state","rootBaseClassName","className","colorNeutralForeground2BrandPressed","primaryActionBaseClassName","as","isLoading","primaryActionStyles","imageOnly","mergeClasses","dismissButtonBaseClassName","mediaBaseClassName","dismissIconBaseClassName","progressBarStyles","bar","value","undefined","indeterminateProgressBar","useMediaBaseClassName","regularProgressBar","fontSize","height","lineHeight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuState } from '../AttachmentOverflowMenu';\n\nexport type AttachmentOverflowMenuButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * AttachmentOverflowMenuButton Props\n */\nexport type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>>;\n\n/**\n * State used in rendering AttachmentOverflowMenuButton\n */\nexport type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> &\n  Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC"}
+{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuState } from '../AttachmentOverflowMenu';\n\nexport type AttachmentOverflowMenuButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n  progress: NonNullable<Slot<typeof ProgressBar>>;\n};\n\n/**\n * AttachmentOverflowMenuButton Props\n */\nexport type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & {\n  /**\n   * Toggle prop to indicate that there are Attachments in the overflow menu that's currently loading.\n   * Setting this to true will show an indeterminate progress bar on the button.\n   * @default false\n   */\n  isLoading?: boolean;\n};\n\n/**\n * State used in rendering AttachmentOverflowMenuButton\n */\nexport type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> &\n  Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> &\n  Pick<AttachmentOverflowMenuButtonProps, 'isLoading'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAoBA;;CAEC"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js

@@ -15,9 +15,9 @@ const renderAttachmentOverflowMenuButton_unstable = (state)=>{
     return state.isOverflowing ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.MenuTrigger, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
             children: [
-                " +",
+                "+",
                 state.overflowCount,
-                " "
+                state.isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.progress, {})
             ]
         })
     }) : null;

package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentOverflowMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuTrigger, assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonState,\n  AttachmentOverflowMenuButtonSlots,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuButton\n */\nexport const renderAttachmentOverflowMenuButton_unstable = (state: AttachmentOverflowMenuButtonState) => {\n  assertSlots<AttachmentOverflowMenuButtonSlots>(state);\n\n  return state.isOverflowing ? (\n    <MenuTrigger>\n      <state.root> +{state.overflowCount} </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["assertSlots","state","root","MenuTrigger","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaEA;;;eAAAA;;;4BAZF;iCAEyC;AAUvCA,MAAAA,8CAA+CC,CAAAA;oCAExCA,EAAAA;8BAEH,GAAA,WAACA,GAAMC,IAAAA,eAAI,EAAAC,4BAAA,EAAA;;sBAAC;gBAAA;gBAAAF,MAAAG,aAAA;gBAAA;aAAA"}
+{"version":3,"sources":["renderAttachmentOverflowMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuTrigger, assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonState,\n  AttachmentOverflowMenuButtonSlots,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuButton\n */\nexport const renderAttachmentOverflowMenuButton_unstable = (state: AttachmentOverflowMenuButtonState) => {\n  assertSlots<AttachmentOverflowMenuButtonSlots>(state);\n\n  return state.isOverflowing ? (\n    <MenuTrigger>\n      <state.root>\n        +{state.overflowCount}\n        {state.isLoading && <state.progress />}\n      </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["assertSlots","state","root","MenuTrigger","overflowCount","isLoading","_jsx","progress"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaEA;;;eAAAA;;;4BAZF;iCAEyC;AAUvCA,MAAAA,8CAA+CC,CAAAA;oCAExCA,EAAAA;8BAEH,GAAA,WAACA,GAAMC,IAAAA,eAAI,EAAAC,4BAAA,EAAA;;sBAAC;gBAAA;gBAAAF,MAAAG,aAAA;gBAAAH,MAAAI,SAAA,IAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAL,MAAAM,QAAA,EAAA,CAAA;aAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -12,9 +12,11 @@ const _reactcomponents = require("@fluentui/react-components");
 const _attachmentOverflowMenuContext = require("../../contexts/attachmentOverflowMenuContext");
 const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
     const { isOverflowing, overflowCount, overflowButtonRef } = (0, _attachmentOverflowMenuContext.useAttachmentOverflowMenuContext_unstable)((context)=>context);
+    const isLoading = !!props.isLoading;
     return {
         components: {
-            root: 'button'
+            root: 'button',
+            progress: _reactcomponents.ProgressBar
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('button', {
             ref: (0, _reactcomponents.useMergedRefs)(ref, overflowButtonRef),
@@ -22,7 +24,17 @@ const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
         }), {
             elementType: 'button'
         }),
+        progress: _reactcomponents.slot.always(props.progress, {
+            defaultProps: {
+                value: undefined,
+                shape: 'square',
+                thickness: 'large',
+                'aria-label': 'Loading'
+            },
+            elementType: _reactcomponents.ProgressBar
+        }),
         isOverflowing,
-        overflowCount
+        overflowCount,
+        isLoading
     };
 }; //# sourceMappingURL=useAttachmentOverflowMenuButton.js.map

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    isOverflowing,\n    overflowCount,\n  };\n};\n"],"names":["isOverflowing","overflowButtonRef","useAttachmentOverflowMenuContext_unstable","components","root","getIntrinsicElementProps","context","props","slot","always","overflowCount","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;iCApBoD;+CACJ;AAmBxD,MAAQA,2CAA8BC,CAAAA,OAAsBC;UAI5D,eACEC,eACEC,mBACF,iFAEEC,EAAAA,CAAAA,UAAyBC;;oBAEpBC;kBAEL;;cAAwBC,qBAAA,CAAAC,MAAA,CAAAJ,IAAAA,yCAAA,EAAA,UAAA;iBAE1BL,IAAAA,8BAAAA,EAAAA,KAAAA;eACAU,KAAAA;QACF,IAAA;YACAC,aAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const isLoading = !!props.isLoading;\n\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    isOverflowing,\n    overflowCount,\n    isLoading,\n  };\n};\n"],"names":["isOverflowing","overflowButtonRef","useAttachmentOverflowMenuContext_unstable","components","ProgressBar","isLoading","props","root","ref","slot","always","getIntrinsicElementProps","progress","defaultProps","shape","elementType","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;iCApBiE;+CACjB;AAmBxD,MAAQA,2CAA8BC,CAAAA,OAAsBC;UAG5D,EAEAF,aAAO,eACLG,mBACQ,iFACIC,EAAAA,CAAAA,UAAAA;UACZC,YAAA,CAAA,CAAAC,MAAAD,SAAA;WACAE;oBAEIC;kBACA;sBAEFJ,4BAAA;;cAAwBK,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBAE1BC,IAAAA,8BAAeF,EAAAA,KAAOJ;oBACpBO;;yBAAkCC;;uCAAqC,CAAAJ,MAAA,CAAAJ,MAAcM,QAAA,EAAA;0BAAU;uBAC/FG;gBACFD,OAAA;gBACAd,WAAAA;gBACAgB,cAAAA;;YAEFD,aAAAX,4BAAA;QACA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.js

@@ -17,21 +17,39 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _useProgressBarStyles = require("../utils/useProgressBarStyles");
 const attachmentOverflowMenuButtonClassNames = {
-    root: 'fai-AttachmentOverflowMenuButton'
+    root: 'fai-AttachmentOverflowMenuButton',
+    progress: 'fai-AttachmentOverflowMenuButton__progress'
 };
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rkv09vy", null, {
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1opa2g9", null, {
     r: [
-        ".rkv09vy{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalS);vertical-align:middle;align-self:end;}",
-        ".rkv09vy:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
-        ".rkv09vy:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
+        ".r1opa2g9{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalS);vertical-align:middle;align-self:end;position:relative;}",
+        ".r1opa2g9:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}",
+        ".r1opa2g9:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"
     ],
     s: [
-        "@media (forced-colors: active){.rkv09vy:hover{background-color:HighlightText;}.rkv09vy:active{background-color:HighlightText;}}"
+        "@media (forced-colors: active){.r1opa2g9:hover{background-color:HighlightText;}.r1opa2g9:active{background-color:HighlightText;}}"
     ]
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
     const rootBaseClassName = useRootBaseClassName();
+    const progressBarStyles = (0, _useProgressBarStyles.useProgressBarStyles)();
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = _reactcomponents.slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
     return state;
 }; //# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.js.map