@fluentui-copilot/react-attachments 0.9.2 → 0.9.4

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Wed, 08 May 2024 22:09:00 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": {
+        "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,30 @@
 # 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 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: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
+
+- 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';
@@ -21,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>;
@@ -34,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;
@@ -45,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>;
 
@@ -67,16 +83,25 @@ 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;
+    text?: string | ((overflowCount: number) => React.ReactNode);
+};
 
 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 +125,7 @@ export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<Att
 
 export declare type AttachmentOverflowMenuItemSlots = {
     root: NonNullable<Slot<typeof MenuItem>>;
+    progress?: Slot<typeof ProgressBar>;
 };
 
 /**
@@ -131,7 +157,6 @@ export declare type AttachmentOverflowMenuState = MenuState & {
  * Attachment Props
  */
 export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
-    id: string;
     imageOnly?: boolean;
 };
 
@@ -142,12 +167,16 @@ 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> & Required<Pick<AttachmentProps, 'id'>> & Pick<AttachmentProps, 'imageOnly'> & {
+    isLoading: boolean;
+    shouldUseOverflow: 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  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, {})]
+      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.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 { 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 { 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,13 +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'
   });
@@ -32,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'
   });
@@ -50,14 +61,24 @@ 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 = {
+    id: attachmentId,
     components: {
       root: 'div',
       primaryAction: 'button',
       dismissButton: 'button',
       media: 'span',
       content: 'span',
-      dismissIcon: 'span'
+      dismissIcon: 'span',
+      progress: ProgressBar
     },
     root,
     primaryAction,
@@ -65,7 +86,10 @@ export const useAttachment_unstable = (props, ref) => {
     media,
     content,
     dismissIcon,
-    imageOnly
+    progress,
+    imageOnly,
+    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 { 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, 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

@@ -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,
@@ -68,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
  */
@@ -78,6 +87,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 +95,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\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"}