@fluentui-copilot/react-attachments 0.9.2 → 0.9.3

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Wed, 08 May 2024 22:09:00 GMT",
+      "date": "Tue, 14 May 2024 00:38:44 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.9.3",
+      "version": "0.9.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "c8ce565a74aac1a6837a4d7c19bf42264da2eb6e",
+            "comment": "feat: add progress slot to Attachment, AttachmentOverflowMenuButton and AttachmentOverflowMenuItem."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 08 May 2024 22:10:20 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.9.2",
       "version": "0.9.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Wed, 08 May 2024 22:09:00 GMT and should not be manually modified.
+This log was last generated on Tue, 14 May 2024 00:38:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.9.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.3)
+
+Tue, 14 May 2024 00:38:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.2..@fluentui-copilot/react-attachments_v0.9.3)
+
+### Patches
+
+- feat: add progress slot to Attachment, AttachmentOverflowMenuButton and AttachmentOverflowMenuItem. ([PR #1581](https://github.com/microsoft/fluentai/pull/1581) by tristan.watanabe@gmail.com)
+
 ## [0.9.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.2)
 
-Wed, 08 May 2024 22:09:00 GMT 
+Wed, 08 May 2024 22:10:20 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.1..@fluentui-copilot/react-attachments_v0.9.2)
 
 ### Patches

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import type { MenuItem } from '@fluentui/react-components';
 import type { MenuProps } from '@fluentui/react-components';
 import type { MenuSlots } from '@fluentui/react-components';
 import type { MenuState } from '@fluentui/react-components';
+import type { ProgressBar } from '@fluentui/react-components';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
 import * as React_2 from 'react';
@@ -67,16 +68,24 @@ export declare const attachmentOverflowMenuButtonClassNames: SlotClassNames<Atta
 /**
  * AttachmentOverflowMenuButton Props
  */
-export declare type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>>;
+export declare type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & {
+    /**
+     * Toggle prop to indicate that there are Attachments in the overflow menu that's currently loading.
+     * Setting this to true will show an indeterminate progress bar on the button.
+     * @default false
+     */
+    isLoading?: boolean;
+};
 
 export declare type AttachmentOverflowMenuButtonSlots = {
     root: NonNullable<Slot<'button'>>;
+    progress: NonNullable<Slot<typeof ProgressBar>>;
 };
 
 /**
  * State used in rendering AttachmentOverflowMenuButton
  */
-export declare type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> & Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'>;
+export declare type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> & Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> & Pick<AttachmentOverflowMenuButtonProps, 'isLoading'>;
 
 export declare const AttachmentOverflowMenuContext: Context<AttachmentOverflowMenuContextValue>;
 
@@ -100,6 +109,7 @@ export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<Att
 
 export declare type AttachmentOverflowMenuItemSlots = {
     root: NonNullable<Slot<typeof MenuItem>>;
+    progress?: Slot<typeof ProgressBar>;
 };
 
 /**
@@ -142,12 +152,15 @@ export declare type AttachmentSlots = {
     media?: Slot<'span'>;
     content: NonNullable<Slot<'span'>>;
     dismissIcon: NonNullable<Slot<'span'>>;
+    progress?: Slot<typeof ProgressBar>;
 };
 
 /**
  * State used in rendering Attachment
  */
-export declare type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'>;
+export declare type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'> & {
+    isLoading: boolean;
+};
 
 /**
  * @deprecated use new Attachment component exported from \@fluentui-copilot/react-attachments package instead.

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

package/lib/components/Attachment/renderAttachment.js

@@ -7,7 +7,7 @@ export const renderAttachment_unstable = state => {
   assertSlots(state);
   return /*#__PURE__*/_jsxs(state.root, {
     children: [/*#__PURE__*/_jsxs(state.primaryAction, {
-      children: [state.media && !state.imageOnly && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {})]
+      children: [state.media && !state.imageOnly && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {}), state.progress && /*#__PURE__*/_jsx(state.progress, {})]
     }), /*#__PURE__*/_jsx(state.dismissButton, {
       children: /*#__PURE__*/_jsx(state.dismissIcon, {})
     })]

package/lib/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","renderAttachment_unstable","state","root","primaryAction","media","imageOnly","content","dismissButton","dismissIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,KAAK,IAAI,CAACH,MAAMI,SAAS,kBAAI,KAACJ,MAAMG,KAAK;kCAChD,KAACH,MAAMK,OAAO;;;0BAEhB,KAACL,MAAMM,aAAa;0BAClB,cAAA,KAACN,MAAMO,WAAW;;;;AAI1B,EAAE"}
+{"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","renderAttachment_unstable","state","root","primaryAction","media","imageOnly","content","progress","dismissButton","dismissIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,KAAK,IAAI,CAACH,MAAMI,SAAS,kBAAI,KAACJ,MAAMG,KAAK;kCAChD,KAACH,MAAMK,OAAO;oBACbL,MAAMM,QAAQ,kBAAI,KAACN,MAAMM,QAAQ;;;0BAEpC,KAACN,MAAMO,aAAa;0BAClB,cAAA,KAACP,MAAMQ,WAAW;;;;AAI1B,EAAE"}

package/lib/components/Attachment/useAttachment.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
+import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
 import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
@@ -17,6 +17,7 @@ export const useAttachment_unstable = (props, ref) => {
   } = props;
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
   const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
+  const isLoading = !!props.progress;
   const root = slot.always(getIntrinsicElementProps('div', {
     ref,
     ...props
@@ -50,6 +51,14 @@ export const useAttachment_unstable = (props, ref) => {
     },
     elementType: 'span'
   });
+  const progress = slot.optional(props.progress, {
+    defaultProps: {
+      shape: 'square',
+      thickness: 'large',
+      'aria-labelledby': props.id
+    },
+    elementType: ProgressBar
+  });
   const state = {
     components: {
       root: 'div',
@@ -57,7 +66,8 @@ export const useAttachment_unstable = (props, ref) => {
       dismissButton: 'button',
       media: 'span',
       content: 'span',
-      dismissIcon: 'span'
+      dismissIcon: 'span',
+      progress: ProgressBar
     },
     root,
     primaryAction,
@@ -65,7 +75,9 @@ export const useAttachment_unstable = (props, ref) => {
     media,
     content,
     dismissIcon,
-    imageOnly
+    progress,
+    imageOnly,
+    isLoading
   };
   if (state.primaryAction.as === 'span') {
     state.components.primaryAction = 'span';

package/lib/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":["React","getIntrinsicElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","imageOnly","DismissIcon","onAttachmentDismiss","context","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","id","media","optional","content","children","dismissIcon","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AAC5F,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,MAAMG,cAAcN,WAAWD,iBAAiBD;IAEhD,MAAMS,sBAAsBN,kCAAkCO,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOZ,KAAKa,MAAM,CACtBf,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;IACV,IACA;QAAEQ,aAAa;IAAM;IAGvB,MAAMC,gBAAgBf,KAAKa,MAAM,CAACP,MAAMS,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBhB,KAAKa,MAAM,CAACP,MAAMU,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGnB,eACtBiB,cAAcE,OAAO,EACrB,CAACC,KAAgET,gCAAAA,0CAAAA,oBAAsBS,IAAI;YAAEC,IAAId,MAAMc,EAAE;QAAC;IAG5G,MAAMC,QAAQrB,KAAKsB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMS,UAAUvB,KAAKa,MAAM,CAACP,MAAMiB,OAAO,EAAE;QACzCN,cAAc;YACZO,UAAUlB,MAAMkB,QAAQ;QAC1B;QACAV,aAAa;IACf;IAEA,MAAMW,cAAczB,KAAKa,MAAM,CAACP,MAAMmB,WAAW,EAAE;QACjDR,cAAc;YACZO,wBAAU,oBAACf;QACb;QACAK,aAAa;IACf;IAEA,MAAMY,QAAyB;QAC7BC,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPE,SAAS;YACTE,aAAa;QACf;QAEAb;QACAG;QACAC;QACAK;QACAE;QACAE;QACAjB;IACF;IAEA,IAAIkB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}
+{"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":["React","ProgressBar","getIntrinsicElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","imageOnly","DismissIcon","onAttachmentDismiss","context","isLoading","progress","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","id","media","optional","content","children","dismissIcon","shape","thickness","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AACzG,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,MAAMG,cAAcN,WAAWD,iBAAiBD;IAChD,MAAMS,sBAAsBN,kCAAkCO,CAAAA,UAAWA,QAAQD,mBAAmB;IACpG,MAAME,YAAY,CAAC,CAACN,MAAMO,QAAQ;IAElC,MAAMC,OAAOd,KAAKe,MAAM,CACtBjB,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;IACV,IACA;QAAEU,aAAa;IAAM;IAGvB,MAAMC,gBAAgBjB,KAAKe,MAAM,CAACT,MAAMW,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBlB,KAAKe,MAAM,CAACT,MAAMY,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGrB,eACtBmB,cAAcE,OAAO,EACrB,CAACC,KAAgEX,gCAAAA,0CAAAA,oBAAsBW,IAAI;YAAEC,IAAIhB,MAAMgB,EAAE;QAAC;IAG5G,MAAMC,QAAQvB,KAAKwB,QAAQ,CAAClB,MAAMiB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMS,UAAUzB,KAAKe,MAAM,CAACT,MAAMmB,OAAO,EAAE;QACzCN,cAAc;YACZO,UAAUpB,MAAMoB,QAAQ;QAC1B;QACAV,aAAa;IACf;IAEA,MAAMW,cAAc3B,KAAKe,MAAM,CAACT,MAAMqB,WAAW,EAAE;QACjDR,cAAc;YACZO,wBAAU,oBAACjB;QACb;QACAO,aAAa;IACf;IAEA,MAAMH,WAAWb,KAAKwB,QAAQ,CAAClB,MAAMO,QAAQ,EAAE;QAC7CM,cAAc;YACZS,OAAO;YACPC,WAAW;YACX,mBAAmBvB,MAAMgB,EAAE;QAC7B;QACAN,aAAanB;IACf;IAEA,MAAMiC,QAAyB;QAC7BC,YAAY;YACVjB,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPE,SAAS;YACTE,aAAa;YACbd,UAAUhB;QACZ;QAEAiB;QACAG;QACAC;QACAK;QACAE;QACAE;QACAd;QACAL;QACAI;IACF;IAEA,IAAIkB,MAAMb,aAAa,CAACe,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACd,aAAa,GAAG;IACnC;IAEA,OAAOa;AACT,EAAE"}

package/lib/components/Attachment/useAttachmentStyles.js

@@ -1,15 +1,17 @@
-import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, shorthands, slot, tokens, typographyStyles } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles';
 export 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 = __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 = __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',
   backgroundColor: tokens.colorNeutralBackground1,
@@ -78,6 +80,7 @@ export const useAttachmentStyles_unstable = state => {
   const mediaBaseClassName = useMediaBaseClassName();
   const contentBaseClassName = useContentBaseClassName();
   const dismissIconBaseClassName = useDismissIconBaseClassName();
+  const progressBarStyles = useProgressBarStyles();
   const primaryActionStyles = usePrimaryActionStyles();
   const imageOnlyStyles = useImageOnlyStyles();
   const {
@@ -85,13 +88,28 @@ export const useAttachmentStyles_unstable = state => {
     primaryAction
   } = state;
   state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
-  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
   state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
   if (state.media) {
     state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);
   }
   state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
   state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentClassNames.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=useAttachmentStyles.js.map

package/lib/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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","imageOnlyStyles","imageOnly","className","as"],"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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/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,GACD,WACuE"}
+{"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,GACD,WAEuD"}

package/lib/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js

@@ -7,7 +7,7 @@ export const renderAttachmentOverflowMenuButton_unstable = state => {
   assertSlots(state);
   return state.isOverflowing ? /*#__PURE__*/_jsx(MenuTrigger, {
     children: /*#__PURE__*/_jsxs(state.root, {
-      children: [" +", state.overflowCount, " "]
+      children: ["+", state.overflowCount, state.isLoading && /*#__PURE__*/_jsx(state.progress, {})]
     })
   }) : null;
 };

package/lib/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":["MenuTrigger","assertSlots","renderAttachmentOverflowMenuButton_unstable","state","isOverflowing","root","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,WAAW,QAAQ,6BAA6B;AAMtE;;CAEC,GACD,OAAO,MAAMC,8CAA8C,CAACC;IAC1DF,YAA+CE;IAE/C,OAAOA,MAAMC,aAAa,iBACxB,KAACJ;kBACC,cAAA,MAACG,MAAME,IAAI;;gBAAC;gBAAGF,MAAMG,aAAa;gBAAC;;;SAEnC;AACN,EAAE"}
+{"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":["MenuTrigger","assertSlots","renderAttachmentOverflowMenuButton_unstable","state","isOverflowing","root","overflowCount","isLoading","progress"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,WAAW,QAAQ,6BAA6B;AAMtE;;CAEC,GACD,OAAO,MAAMC,8CAA8C,CAACC;IAC1DF,YAA+CE;IAE/C,OAAOA,MAAMC,aAAa,iBACxB,KAACJ;kBACC,cAAA,MAACG,MAAME,IAAI;;gBAAC;gBACRF,MAAMG,aAAa;gBACpBH,MAAMI,SAAS,kBAAI,KAACJ,MAAMK,QAAQ;;;SAGrC;AACN,EAAE"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -1,4 +1,4 @@
-import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';
+import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';
 import { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';
 /**
  * Create the state required to render AttachmentOverflowMenuButton.
@@ -15,9 +15,11 @@ export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
     overflowCount,
     overflowButtonRef
   } = useAttachmentOverflowMenuContext_unstable(context => context);
+  const isLoading = !!props.isLoading;
   return {
     components: {
-      root: 'button'
+      root: 'button',
+      progress: ProgressBar
     },
     root: slot.always(getIntrinsicElementProps('button', {
       ref: useMergedRefs(ref, overflowButtonRef),
@@ -25,8 +27,18 @@ export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
     }), {
       elementType: 'button'
     }),
+    progress: slot.always(props.progress, {
+      defaultProps: {
+        value: undefined,
+        shape: 'square',
+        thickness: 'large',
+        'aria-label': 'Loading'
+      },
+      elementType: ProgressBar
+    }),
     isOverflowing,
-    overflowCount
+    overflowCount,
+    isLoading
   };
 };
 //# sourceMappingURL=useAttachmentOverflowMenuButton.js.map

package/lib/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":["getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","isOverflowing","overflowCount","overflowButtonRef","context","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AAC3F,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGN,0CAC1DO,CAAAA,UAAWA;IAGb,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMX,KAAKY,MAAM,CACfb,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKG;YACxB,GAAGJ,KAAK;QACV,IACA;YAAES,aAAa;QAAS;QAE1BP;QACAC;IACF;AACF,EAAE"}
+{"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":["ProgressBar","getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","isOverflowing","overflowCount","overflowButtonRef","context","isLoading","components","root","progress","always","elementType","defaultProps","value","undefined","shape","thickness"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AACxG,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGN,0CAC1DO,CAAAA,UAAWA;IAEb,MAAMC,YAAY,CAAC,CAACN,MAAMM,SAAS;IAEnC,OAAO;QACLC,YAAY;YACVC,MAAM;YACNC,UAAUf;QACZ;QACAc,MAAMZ,KAAKc,MAAM,CACff,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKG;YACxB,GAAGJ,KAAK;QACV,IACA;YAAEW,aAAa;QAAS;QAE1BF,UAAUb,KAAKc,MAAM,CAACV,MAAMS,QAAQ,EAAE;YACpCG,cAAc;gBAAEC,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FL,aAAajB;QACf;QACAQ;QACAC;QACAG;IACF;AACF,EAAE"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.js

@@ -1,17 +1,35 @@
-import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles';
 export const attachmentOverflowMenuButtonClassNames = {
-  root: 'fai-AttachmentOverflowMenuButton'
+  root: 'fai-AttachmentOverflowMenuButton',
+  progress: 'fai-AttachmentOverflowMenuButton__progress'
 };
-const useRootBaseClassName = __resetStyles("rkv09vy", 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);}"],
-  s: ["@media (forced-colors: active){.rkv09vy:hover{background-color:HighlightText;}.rkv09vy:active{background-color:HighlightText;}}"]
+const useRootBaseClassName = __resetStyles("r1opa2g9", null, {
+  r: [".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){.r1opa2g9:hover{background-color:HighlightText;}.r1opa2g9:active{background-color:HighlightText;}}"]
 });
 /**
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state
  */
 export const useAttachmentOverflowMenuButtonStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
+  const progressBarStyles = useProgressBarStyles();
   state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentOverflowMenuButtonClassNames.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=useAttachmentOverflowMenuButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\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};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\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  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.spacingVerticalS,\n  verticalAlign: 'middle',\n  alignSelf: 'end',\n\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 * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","attachmentOverflowMenuButtonClassNames","root","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAOrG,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBR,OAAOS,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEV,OAAOW,eAAe,CAAC,OAAO,EAAEX,OAAOY,mBAAmB,CAAC,CAAC;IACvEC,cAAcb,OAAOc,kBAAkB;IACvCC,WAAW;IACXC,WAAWhB,OAAOiB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYpB,iBAAiBqB,KAAK,CAACD,UAAU;IAC7CE,UAAUtB,iBAAiBqB,KAAK,CAACC,QAAQ;IACzCC,YAAYvB,iBAAiBqB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS1B,OAAO2B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IAEX,UAAU;QACRX,QAAQ;QACRV,iBAAiBR,OAAO8B,4BAA4B;QACpDzB,OAAOL,OAAO+B,4BAA4B;IAC5C;IACA,WAAW;QACTvB,iBAAiBR,OAAOgC,8BAA8B;QACtD3B,OAAOL,OAAOiC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACRzB,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AACA;;CAEC,GACD,OAAO,MAAM0B,iDAAiD,CAC5DC;IAEA,MAAMC,oBAAoBhC;IAE1B+B,MAAMhC,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,uCAAuCC,IAAI,EAC3CiC,mBACAD,MAAMhC,IAAI,CAACkC,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\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.colorNeutralBackground1,\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.spacingVerticalS,\n  verticalAlign: 'middle',\n  alignSelf: 'end',\n  position: 'relative',\n\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\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","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,gCAAgC;AAOrE,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS5B,OAAO6B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IACXC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,4BAA4B;QACpD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,8BAA8B;QACtD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\n\nexport type AttachmentOverflowMenuItemSlots = {\n  root: NonNullable<Slot<typeof MenuItem>>;\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":"AAaA;;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';\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"}

package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of AttachmentOverflowMenuItem
  */
 export const renderAttachmentOverflowMenuItem_unstable = state => {
   assertSlots(state);
-  return !state.isVisible ? /*#__PURE__*/_jsx(state.root, {}) : null;
+  return !state.isVisible ? /*#__PURE__*/_jsxs(state.root, {
+    children: [state.root.children, state.progress && /*#__PURE__*/_jsx(state.progress, {})]
+  }) : null;
 };
 //# sourceMappingURL=renderAttachmentOverflowMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentOverflowMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuItemState,\n  AttachmentOverflowMenuItemSlots,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuItem\n */\nexport const renderAttachmentOverflowMenuItem_unstable = (state: AttachmentOverflowMenuItemState) => {\n  assertSlots<AttachmentOverflowMenuItemSlots>(state);\n\n  return !state.isVisible ? <state.root /> : null;\n};\n"],"names":["assertSlots","renderAttachmentOverflowMenuItem_unstable","state","isVisible","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAMzD;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDF,YAA6CE;IAE7C,OAAO,CAACA,MAAMC,SAAS,iBAAG,KAACD,MAAME,IAAI,QAAM;AAC7C,EAAE"}
+{"version":3,"sources":["renderAttachmentOverflowMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuItemState,\n  AttachmentOverflowMenuItemSlots,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuItem\n */\nexport const renderAttachmentOverflowMenuItem_unstable = (state: AttachmentOverflowMenuItemState) => {\n  assertSlots<AttachmentOverflowMenuItemSlots>(state);\n\n  return !state.isVisible ? (\n    <state.root>\n      {state.root.children}\n      {state.progress && <state.progress />}\n    </state.root>\n  ) : null;\n};\n"],"names":["assertSlots","renderAttachmentOverflowMenuItem_unstable","state","isVisible","root","children","progress"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAMzD;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDF,YAA6CE;IAE7C,OAAO,CAACA,MAAMC,SAAS,iBACrB,MAACD,MAAME,IAAI;;YACRF,MAAME,IAAI,CAACC,QAAQ;YACnBH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;;SAElC;AACN,EAAE"}

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"}