@fluentui-copilot/react-attachments 0.9.3 → 0.9.4

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Tue, 14 May 2024 00:38:44 GMT",
+      "date": "Wed, 15 May 2024 23:57:19 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.9.4",
+      "version": "0.9.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "719196b7226ff5fae1136731498443024039da0a",
+            "comment": "refactor: AttachmentList now has overflow built in."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 May 2024 00:38:55 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.9.3",
       "version": "0.9.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Tue, 14 May 2024 00:38:44 GMT and should not be manually modified.
+This log was last generated on Wed, 15 May 2024 23:57:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.9.4](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.4)
+
+Wed, 15 May 2024 23:57:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.3..@fluentui-copilot/react-attachments_v0.9.4)
+
+### Patches
+
+- refactor: AttachmentList now has overflow built in. ([PR #1616](https://github.com/microsoft/fluentai/pull/1616) by tristan.watanabe@gmail.com)
+
 ## [0.9.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.3)
 
-Tue, 14 May 2024 00:38:44 GMT 
+Tue, 14 May 2024 00:38:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.2..@fluentui-copilot/react-attachments_v0.9.3)
 
 ### Patches

package/dist/index.d.ts

@@ -22,8 +22,10 @@ export declare const Attachment: ForwardRefComponent<AttachmentProps>;
 
 export declare const attachmentClassNames: SlotClassNames<AttachmentSlots>;
 
-declare type AttachmentDismissedData = {
-    id: string;
+export declare type AttachmentDismissedData = {
+    content?: AttachmentProps['children'];
+    media?: AttachmentProps['media'];
+    id?: string;
 };
 
 export declare const AttachmentList: ForwardRefComponent<AttachmentListProps>;
@@ -35,7 +37,7 @@ export declare const AttachmentListContext: Context<AttachmentListContextValue>;
 /**
  * Context shared between AttachmentList and its children components
  */
-export declare type AttachmentListContextValue = Pick<AttachmentListProps, 'onAttachmentDismiss'>;
+export declare type AttachmentListContextValue = Pick<AttachmentListState, 'onAttachmentDismiss' | 'shouldUseOverflow'>;
 
 declare type AttachmentListContextValues = {
     attachmentList: AttachmentListContextValue;
@@ -46,18 +48,31 @@ declare type AttachmentListContextValues = {
  */
 export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {
     onAttachmentDismiss?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>, data: AttachmentDismissedData) => void;
+    overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;
+    /**
+     * The maximum number of attachments to display before the overflow button is shown even if there is
+     * enough space available to show more.
+     * If not set, the overflow functionality will be disabled.
+     * @default undefined
+     */
+    maxVisibleAttachments?: number;
 };
 
 export declare const AttachmentListProvider: Provider<AttachmentListContextValue> & FC<ProviderProps<AttachmentListContextValue>>;
 
 export declare type AttachmentListSlots = {
     root: Slot<'div'>;
+    overflowMenuButton: Slot<'span'>;
+    overflowMenuItem: Slot<'span'>;
 };
 
 /**
  * State used in rendering AttachmentList
  */
-export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss'>;
+export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {
+    attachments: AttachmentProps[];
+    shouldUseOverflow: boolean;
+};
 
 export declare const AttachmentOverflowMenu: React_2.FC<AttachmentOverflowMenuProps>;
 
@@ -75,6 +90,7 @@ export declare type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<A
      * @default false
      */
     isLoading?: boolean;
+    text?: string | ((overflowCount: number) => React.ReactNode);
 };
 
 export declare type AttachmentOverflowMenuButtonSlots = {
@@ -141,7 +157,6 @@ export declare type AttachmentOverflowMenuState = MenuState & {
  * Attachment Props
  */
 export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
-    id: string;
     imageOnly?: boolean;
 };
 
@@ -158,8 +173,9 @@ export declare type AttachmentSlots = {
 /**
  * State used in rendering Attachment
  */
-export declare type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'> & {
+export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id'>> & Pick<AttachmentProps, 'imageOnly'> & {
     isLoading: boolean;
+    shouldUseOverflow: boolean;
 };
 
 /**

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

@@ -1 +1 @@
-{"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"}
+{"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  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAKI"}

package/lib/components/Attachment/renderAttachment.js

@@ -1,16 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-components';
+import { OverflowItem, assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of Attachment
  */
 export const renderAttachment_unstable = state => {
   assertSlots(state);
-  return /*#__PURE__*/_jsxs(state.root, {
+  const {
+    id,
+    shouldUseOverflow
+  } = state;
+  const attachment = /*#__PURE__*/_jsxs(state.root, {
     children: [/*#__PURE__*/_jsxs(state.primaryAction, {
       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, {})
     })]
   });
+  return shouldUseOverflow ? /*#__PURE__*/_jsx(OverflowItem, {
+    id: id,
+    children: attachment
+  }, id) : attachment;
 };
 //# sourceMappingURL=renderAttachment.js.map

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.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"}
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, 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  const { id, shouldUseOverflow } = state;\n\n  const attachment = (\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  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderAttachment_unstable","state","id","shouldUseOverflow","attachment","root","primaryAction","media","imageOnly","content","progress","dismissButton","dismissIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,YAAY,EAAEC,WAAW,QAAQ,6BAA6B;AAGvE;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAC7B,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAE,GAAGF;IAElC,MAAMG,2BACJ,MAACH,MAAMI,IAAI;;0BACT,MAACJ,MAAMK,aAAa;;oBACjBL,MAAMM,KAAK,IAAI,CAACN,MAAMO,SAAS,kBAAI,KAACP,MAAMM,KAAK;kCAChD,KAACN,MAAMQ,OAAO;oBACbR,MAAMS,QAAQ,kBAAI,KAACT,MAAMS,QAAQ;;;0BAEpC,KAACT,MAAMU,aAAa;0BAClB,cAAA,KAACV,MAAMW,WAAW;;;;IAIxB,OAAOT,kCACL,KAACL;QAAaI,IAAIA;kBACfE;OADwBF,MAI3BE;AAEJ,EAAE"}

package/lib/components/Attachment/useAttachment.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
+import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';
 import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
@@ -13,14 +13,20 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
  */
 export const useAttachment_unstable = (props, ref) => {
   const {
+    children,
     imageOnly
   } = props;
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
-  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
+  const {
+    onAttachmentDismiss,
+    shouldUseOverflow
+  } = useAttachmentListContext_unstable(context => context);
+  const attachmentId = useId('attachment-', props.id);
   const isLoading = !!props.progress;
   const root = slot.always(getIntrinsicElementProps('div', {
     ref,
-    ...props
+    ...props,
+    id: attachmentId
   }), {
     elementType: 'div'
   });
@@ -33,9 +39,13 @@ export const useAttachment_unstable = (props, ref) => {
     },
     elementType: 'button'
   });
-  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-    id: props.id
-  }));
+  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => {
+    onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+      content: children,
+      media,
+      id: attachmentId
+    });
+  });
   const media = slot.optional(props.media, {
     elementType: 'span'
   });
@@ -60,6 +70,7 @@ export const useAttachment_unstable = (props, ref) => {
     elementType: ProgressBar
   });
   const state = {
+    id: attachmentId,
     components: {
       root: 'div',
       primaryAction: 'button',
@@ -77,7 +88,8 @@ export const useAttachment_unstable = (props, ref) => {
     dismissIcon,
     progress,
     imageOnly,
-    isLoading
+    isLoading,
+    shouldUseOverflow
   };
   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 { 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"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } 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 { children, imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n      id: attachmentId,\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>) => {\n      onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n    },\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    id: attachmentId,\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    shouldUseOverflow,\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","useId","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","children","imageOnly","DismissIcon","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAChH,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAChC,MAAMI,cAAcP,WAAWD,iBAAiBD;IAChD,MAAM,EAAEU,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGR,kCAAkCS,CAAAA,UAAWA;IAChG,MAAMC,eAAed,MAAM,eAAeM,MAAMS,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACV,MAAMW,QAAQ;IAElC,MAAMC,OAAOnB,KAAKoB,MAAM,CACtBtB,yBAAyB,OAAO;QAC9BU;QACA,GAAGD,KAAK;QACRS,IAAID;IACN,IACA;QAAEM,aAAa;IAAM;IAGvB,MAAMC,gBAAgBtB,KAAKoB,MAAM,CAACb,MAAMe,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBvB,KAAKoB,MAAM,CAACb,MAAMgB,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAG1B,eACtBwB,cAAcE,OAAO,EACrB,CAACC;QACCd,gCAAAA,0CAAAA,oBAAsBc,IAAI;YAAEC,SAASlB;YAAUmB;YAAOZ,IAAID;QAAa;IACzE;IAGF,MAAMa,QAAQ5B,KAAK6B,QAAQ,CAACtB,MAAMqB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAU3B,KAAKoB,MAAM,CAACb,MAAMoB,OAAO,EAAE;QACzCH,cAAc;YACZf,UAAUF,MAAME,QAAQ;QAC1B;QACAY,aAAa;IACf;IAEA,MAAMS,cAAc9B,KAAKoB,MAAM,CAACb,MAAMuB,WAAW,EAAE;QACjDN,cAAc;YACZf,wBAAU,oBAACE;QACb;QACAU,aAAa;IACf;IAEA,MAAMH,WAAWlB,KAAK6B,QAAQ,CAACtB,MAAMW,QAAQ,EAAE;QAC7CM,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmBzB,MAAMS,EAAE;QAC7B;QACAK,aAAaxB;IACf;IAEA,MAAMoC,QAAyB;QAC7BjB,IAAID;QACJmB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbZ,UAAUrB;QACZ;QAEAsB;QACAG;QACAC;QACAK;QACAD;QACAG;QACAZ;QACAR;QACAO;QACAJ;IACF;IAEA,IAAIoB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}

package/lib/components/Attachment/useAttachmentStyles.js

@@ -70,6 +70,13 @@ const useImageOnlyStyles = __styles({
 }, {
   d: [".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".fez10in{line-height:0;}"]
 });
+export const useOverflowStyles = __styles({
+  overflow: {
+    a9b677: "fly5x3f"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}"]
+});
 /**
  * Apply styling to the Attachment slots based on the state
  */

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  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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"}
+{"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\nexport const useOverflowStyles = makeStyles({\n  overflow: {\n    width: '100%',\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","useOverflowStyles","overflow","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/AttachmentList/AttachmentList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AttachmentDismissedData = {\n  id: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA2BA,WAEE"}
+{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n  overflowMenuButton: Slot<'span'>;\n  overflowMenuItem: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n  content?: AttachmentProps['children'];\n  media?: AttachmentProps['media'];\n  id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n  overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n  /**\n   * The maximum number of attachments to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * @default undefined\n   */\n  maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n    attachments: AttachmentProps[];\n    shouldUseOverflow: boolean;\n  };\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4CA,WAEE"}

package/lib/components/AttachmentList/renderAttachmentList.js

@@ -1,14 +1,41 @@
-import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-components';
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { createElement as _createElement } from "@fluentui/react-jsx-runtime";
+import { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';
 import { AttachmentListProvider } from '../../contexts/attachmentListContext';
+import { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';
+import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
 /**
  * Render the final JSX of AttachmentList
  */
 export const renderAttachmentList_unstable = (state, contextValues) => {
   assertSlots(state);
+  const {
+    attachments,
+    overflowMenuProps,
+    root,
+    shouldUseOverflow
+  } = state;
   return /*#__PURE__*/_jsx(AttachmentListProvider, {
     value: contextValues.attachmentList,
-    children: /*#__PURE__*/_jsx(state.root, {})
+    children: shouldUseOverflow ? /*#__PURE__*/_jsx(Overflow, {
+      ref: root.ref,
+      children: /*#__PURE__*/_jsxs(state.root, {
+        children: [root.children, /*#__PURE__*/_jsxs(AttachmentOverflowMenu, {
+          positioning: 'above',
+          ...overflowMenuProps,
+          children: [/*#__PURE__*/_jsx(state.overflowMenuButton, {}), /*#__PURE__*/_jsx(MenuPopover, {
+            children: /*#__PURE__*/_jsx(MenuList, {
+              children: attachments.map(attachment => {
+                return /*#__PURE__*/_createElement(AttachmentOverflowMenuItem, {
+                  ...attachment,
+                  key: attachment.id
+                });
+              })
+            })
+          })]
+        })]
+      })
+    }) : /*#__PURE__*/_jsx(state.root, {})
   });
 };
 //# sourceMappingURL=renderAttachmentList.js.map

package/lib/components/AttachmentList/renderAttachmentList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      <state.root />\n    </AttachmentListProvider>\n  );\n};\n"],"names":["assertSlots","AttachmentListProvider","renderAttachmentList_unstable","state","contextValues","value","attachmentList","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AACzD,SAASC,sBAAsB,QAAQ,uCAAuC;AAG9E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAAuBI,OAAOD,cAAcE,cAAc;kBACzD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n  const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <MenuPopover>\n                <MenuList>\n                  {attachments.map(attachment => {\n                    return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n                  })}\n                </MenuList>\n              </MenuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["MenuList","MenuPopover","Overflow","assertSlots","AttachmentListProvider","AttachmentOverflowMenu","AttachmentOverflowMenuItem","renderAttachmentList_unstable","state","contextValues","attachments","overflowMenuProps","root","shouldUseOverflow","value","attachmentList","ref","children","positioning","overflowMenuButton","map","attachment","key","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;;AAEjD,SAASA,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AAC1F,SAASC,sBAAsB,QAAQ,uCAAuC;AAC9E,SAASC,sBAAsB,QAAQ,4BAA4B;AACnE,SAASC,0BAA0B,QAAQ,gCAAgC;AAG3E;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAN,YAAiCK;IACjC,MAAM,EAAEE,WAAW,EAAEC,iBAAiB,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAEpE,qBACE,KAACJ;QAAuBU,OAAOL,cAAcM,cAAc;kBACxDF,kCACC,KAACX;YAASc,KAAKJ,KAAKI,GAAG;sBACrB,cAAA,MAACR,MAAMI,IAAI;;oBACRA,KAAKK,QAAQ;kCACd,MAACZ;wBAAuBa,aAAa;wBAAU,GAAGP,iBAAiB;;0CACjE,KAACH,MAAMW,kBAAkB;0CACzB,KAAClB;0CACC,cAAA,KAACD;8CACEU,YAAYU,GAAG,CAACC,CAAAA;wCACf,qBAAO,eAACf;4CAA4B,GAAGe,UAAU;4CAAEC,KAAKD,WAAWE,EAAE;;oCACvE;;;;;;;2BAOV,KAACf,MAAMI,IAAI;;AAInB,EAAE"}

package/lib/components/AttachmentList/useAttachmentList.js

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeClasses, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useOverflowContext } from '@fluentui/react-overflow';
+import { useTimeout } from '@fluentui/react-utilities';
+import { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';
+import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
+import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
+import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles';
 /**
  * Create the state required to render AttachmentList.
  *
@@ -13,25 +17,28 @@ import { useOverflowContext } from '@fluentui/react-overflow';
  */
 export const useAttachmentList_unstable = (props, ref) => {
   const {
-    onAttachmentDismiss
+    children,
+    maxVisibleAttachments,
+    onAttachmentDismiss,
+    overflowMenuProps
   } = props;
-  const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);
   const innerRef = React.useRef(null);
+  const [setTimeout] = useTimeout();
   const {
     targetDocument
   } = useFluent();
   const {
     findNextFocusable,
-    findPrevFocusable
+    findPrevFocusable,
+    findLastFocusable
   } = useFocusFinders();
+  const [attachments, setAttachments] = React.useState([]);
   const handleAttachmentDismiss = useEventCallback((e, data) => {
     var _innerRef_current;
     if (!onAttachmentDismiss) {
       return;
     }
     onAttachmentDismiss(e, data);
-    // Remove attachment from overflow context
-    attachmentsVisibilityStatus === null || attachmentsVisibilityStatus === void 0 ? true : delete attachmentsVisibilityStatus[data.id];
     // set focus after attachment dismiss
     const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
     if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {
@@ -40,34 +47,95 @@ export const useAttachmentList_unstable = (props, ref) => {
         container: innerRef.current
       });
       if (next) {
-        next.focus();
-        return;
+        // focus on the overflow button if the next focusable element is the overflow button.
+        // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.
+        if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {
+          setTimeout(() => {
+            var _findLastFocusable;
+            (_findLastFocusable = findLastFocusable(innerRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+          }, 0);
+        } else {
+          next.focus();
+        }
       } else {
         const prev = findPrevFocusable(activeElement === null || activeElement === void 0 ? void 0 : activeElement.parentElement, {
           container: innerRef.current
         });
         prev === null || prev === void 0 ? void 0 : prev.focus();
       }
+    } else {
+      // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.
+      setTimeout(() => {
+        var _findLastFocusable;
+        (_findLastFocusable = findLastFocusable(innerRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+      }, 0);
     }
   });
+  const attachmentOverflowClassName = useAttachmentOverflowStyles().overflow;
+  const resolvedChildren = React.useMemo(() => {
+    if (maxVisibleAttachments !== undefined) {
+      const results = [];
+      const childrenArray = React.Children.toArray(children);
+      for (let index = 0; index < childrenArray.length; index++) {
+        const child = childrenArray[index];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (index >= maxVisibleAttachments && /*#__PURE__*/React.isValidElement(child)) {
+          results.push( /*#__PURE__*/React.cloneElement(child, {
+            ...child.props,
+            className: mergeClasses(child.props.className, attachmentOverflowClassName)
+          }));
+        } else {
+          results.push(child);
+        }
+      }
+      return results;
+    }
+    return children;
+  }, [attachmentOverflowClassName, children, maxVisibleAttachments]);
+  React.useEffect(() => {
+    if (resolvedChildren && Array.isArray(resolvedChildren)) {
+      setAttachments(resolvedChildren.map(child => child.props));
+    }
+  }, [resolvedChildren]);
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: true,
     axis: 'both',
     memorizeCurrent: true
   });
+  const shouldUseOverflow = maxVisibleAttachments !== undefined;
   return {
+    attachments,
     onAttachmentDismiss: handleAttachmentDismiss,
+    shouldUseOverflow,
+    overflowMenuProps,
     components: {
-      root: 'div'
+      root: 'div',
+      overflowMenuButton: 'span',
+      overflowMenuItem: 'span'
     },
     root: slot.always(getIntrinsicElementProps('div', {
       'aria-label': 'Attachments',
       ref: useMergedRefs(ref, innerRef),
       role: 'toolbar',
       ...arrowNavigationProps,
-      ...props
+      ...props,
+      children: resolvedChildren
     }), {
       elementType: 'div'
+    }),
+    overflowMenuButton: slot.optional(props.overflowMenuButton, {
+      defaultProps: {
+        children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuButton, null)
+      },
+      elementType: 'span',
+      renderByDefault: true
+    }),
+    overflowMenuItem: slot.optional(props.overflowMenuItem, {
+      defaultProps: {
+        children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, null)
+      },
+      elementType: 'span',
+      renderByDefault: true
     })
   };
 };