@fluentui-copilot/react-attachments 0.10.7 → 0.11.1

package/CHANGELOG.json

@@ -1,6 +1,35 @@
 {
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
+    {
+      "date": "Thu, 20 Mar 2025 17:00:44 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.11.0",
+      "version": "0.11.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "acea64a0cbcc519d30a93b74d7a4711fd78618c7",
+            "comment": "feat: menuList and menuPopover are now dedicated slots to allow for customizability."
+          }
+        ],
+        "patch": [
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "20c56b1c4a0f93db76fc8b348ccb86b563c364d6",
+            "comment": "feat: Add support for customStyleHooks to Attachment, AttachmentList, and AttachmentOverflowMenuButton."
+          },
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "9958f308833b5b38dd8afdaf5505f87aca5d3961",
+            "comment": "chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components."
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 18 Feb 2025 22:28:02 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.10.6",

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Tue, 18 Feb 2025 22:28:02 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Mar 2025 17:00:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.11.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.11.0)
+
+Thu, 20 Mar 2025 17:00:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.6..@fluentui-copilot/react-attachments_v0.11.0)
+
+### Minor changes
+
+- feat: menuList and menuPopover are now dedicated slots to allow for customizability. ([PR #2727](https://github.com/microsoft/fluentai/pull/2727) by tristan.watanabe@gmail.com)
+
+### Patches
+
+- feat: Add support for customStyleHooks to Attachment, AttachmentList, and AttachmentOverflowMenuButton. ([PR #2786](https://github.com/microsoft/fluentai/pull/2786) by owcampbe@microsoft.com)
+- chore: Updating imports of tokens to be imported from @fluentui-copilot/tokens instead of from @fluentui/react-components. ([PR #2745](https://github.com/microsoft/fluentai/pull/2745) by makotom@microsoft.com)
+
 ## [0.10.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.6)
 
 Tue, 18 Feb 2025 22:28:02 GMT 

package/dist/index.d.ts

@@ -4,10 +4,14 @@ import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import { CopilotMode } from '@fluentui-copilot/react-provider';
+import { DesignVersion } from '@fluentui-copilot/react-provider';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
 import type { MenuContextValues } from '@fluentui/react-components';
 import type { MenuItem } from '@fluentui/react-components';
+import type { MenuList } from '@fluentui/react-components';
+import type { MenuPopover } 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';
@@ -68,6 +72,8 @@ export declare const AttachmentListProvider: Provider<AttachmentListContextValue
 
 export declare type AttachmentListSlots = {
     root: Slot<'div'>;
+    menuList?: Slot<typeof MenuList>;
+    menuPopover?: Slot<typeof MenuPopover>;
     /**
      * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.
      * Adding a custom button for the overflow menu is supported.
@@ -79,7 +85,6 @@ export declare type AttachmentListSlots = {
  * State used in rendering AttachmentList
  */
 export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {
-    attachments: AttachmentProps[];
     shouldUseOverflow: boolean;
 };
 
@@ -92,7 +97,7 @@ export declare const attachmentOverflowMenuButtonClassNames: SlotClassNames<Atta
 /**
  * AttachmentOverflowMenuButton Props
  */
-export declare type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & {
+export declare type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & CopilotMode & DesignVersion & {
     /**
      * 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.
@@ -110,7 +115,7 @@ export declare type AttachmentOverflowMenuButtonSlots = {
 /**
  * State used in rendering AttachmentOverflowMenuButton
  */
-export declare type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> & Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> & Pick<AttachmentOverflowMenuButtonProps, 'isLoading'>;
+export declare type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> & Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> & Pick<AttachmentOverflowMenuButtonProps, 'isLoading'> & Pick<Required<AttachmentOverflowMenuButtonProps>, 'designVersion' | 'mode'>;
 
 export declare const AttachmentOverflowMenuContext: Context<AttachmentOverflowMenuContextValue>;
 
@@ -165,7 +170,7 @@ export declare type AttachmentOverflowMenuState = MenuState & {
 /**
  * Attachment Props
  */
-export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
+export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & CopilotMode & DesignVersion & {
     /**
      * Use this prop if an attachment has no text content.
      *
@@ -211,7 +216,7 @@ export declare type AttachmentSlots = {
 /**
  * State used in rendering Attachment
  */
-export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id' | 'size'>> & Pick<AttachmentProps, 'imageOnly'> & {
+export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id' | 'size' | 'designVersion' | 'mode'>> & Pick<AttachmentProps, 'imageOnly'> & {
     isLoading: boolean;
     shouldUseOverflow: boolean;
 };

package/lib/components/Attachment/Attachment.js

@@ -2,10 +2,12 @@ import * as React from 'react';
 import { useAttachment_unstable } from './useAttachment';
 import { renderAttachment_unstable } from './renderAttachment';
 import { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
 // Attachment component - TODO: add more docs
 export const Attachment = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAttachment_unstable(props, ref);
   useAttachmentStyles_unstable(state);
+  useCustomStyleHook('useAttachmentStyles')(state);
   return renderAttachment_unstable(state);
 });
 Attachment.displayName = 'Attachment';

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

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachment_unstable } from './useAttachment';\nimport { renderAttachment_unstable } from './renderAttachment';\nimport { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';\nimport type { AttachmentProps } from './Attachment.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// Attachment component - TODO: add more docs\nexport const Attachment: ForwardRefComponent<AttachmentProps> = React.forwardRef((props, ref) => {\n  const state = useAttachment_unstable(props, ref);\n\n  useAttachmentStyles_unstable(state);\n  return renderAttachment_unstable(state);\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["React","useAttachment_unstable","renderAttachment_unstable","useAttachmentStyles_unstable","Attachment","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAI5E,6CAA6C;AAC7C,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachment_unstable } from './useAttachment';\nimport { renderAttachment_unstable } from './renderAttachment';\nimport { useAttachmentStyles_unstable } from './useAttachmentStyles.styles';\nimport type { AttachmentProps } from './Attachment.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\n// Attachment component - TODO: add more docs\nexport const Attachment: ForwardRefComponent<AttachmentProps> = React.forwardRef((props, ref) => {\n  const state = useAttachment_unstable(props, ref);\n\n  useAttachmentStyles_unstable(state);\n  useCustomStyleHook('useAttachmentStyles')(state);\n\n  return renderAttachment_unstable(state);\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["React","useAttachment_unstable","renderAttachment_unstable","useAttachmentStyles_unstable","useCustomStyleHook","Attachment","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,6CAA6C;AAC7C,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BL,mBAAmB,uBAAuBK;IAE1C,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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\n  /**\n   * Attachments support a primary action.\n   */\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n\n  /**\n   * Attachments have a dismiss button.\n   */\n  dismissButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * Attachments can include an image or other media.\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * The content of the attachment.\n   */\n  content: NonNullable<Slot<'span'>>;\n\n  /**\n   * The icon that renders for the `dismissButton`.\n   */\n  dismissIcon: NonNullable<Slot<'span'>>;\n\n  /**\n   * An attachment supports a progress bar, which can display the attachment's upload progress.\n   */\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  /**\n   * Use this prop if an attachment has no text content.\n   *\n   * @default false\n   */\n  imageOnly?: boolean;\n\n  /**\n   * An attachment supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id' | 'size'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAuDA;;CAEC,GACD,WAKI"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Attachments support a primary action.\n   */\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n\n  /**\n   * Attachments have a dismiss button.\n   */\n  dismissButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * Attachments can include an image or other media.\n   */\n  media?: Slot<'span'>;\n\n  /**\n   * The content of the attachment.\n   */\n  content: NonNullable<Slot<'span'>>;\n\n  /**\n   * The icon that renders for the `dismissButton`.\n   */\n  dismissIcon: NonNullable<Slot<'span'>>;\n\n  /**\n   * An attachment supports a progress bar, which can display the attachment's upload progress.\n   */\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> &\n  CopilotMode &\n  DesignVersion & {\n    /**\n     * Use this prop if an attachment has no text content.\n     *\n     * @default false\n     */\n    imageOnly?: boolean;\n\n    /**\n     * An attachment supports different sizes.\n     *\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium';\n  };\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id' | 'size' | 'designVersion' | 'mode'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA0DA;;CAEC,GACD,WAKI"}

package/lib/components/Attachment/useAttachment.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';
 import { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
+import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
 /**
  * Create the state required to render Attachment.
  *
@@ -23,6 +24,8 @@ export const useAttachment_unstable = (props, ref) => {
   } = useAttachmentListContext_unstable(context => context);
   const attachmentId = useId('attachment-', props.id);
   const isLoading = !!props.progress;
+  const mode = useCopilotMode(props.mode);
+  const designVersion = useDesignVersion(props.designVersion);
   const root = slot.always(getIntrinsicElementProps('div', {
     ref,
     ...props,
@@ -90,7 +93,9 @@ export const useAttachment_unstable = (props, ref) => {
     progress,
     imageOnly,
     isLoading,
-    shouldUseOverflow
+    shouldUseOverflow,
+    mode,
+    designVersion
   };
   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, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } 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, size = 'medium' } = props;\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': 'Remove attachment' },\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: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\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    size,\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","Dismiss12Regular","Dismiss20Regular","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","children","imageOnly","size","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,gBAAgB,QAAQ,wBAAwB;AAC3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IACjD,MAAM,EAAEK,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGR,kCAAkCS,CAAAA,UAAWA;IAChG,MAAMC,eAAeb,MAAM,eAAeK,MAAMS,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACV,MAAMW,QAAQ;IAElC,MAAMC,OAAOlB,KAAKmB,MAAM,CACtBrB,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;QACRS,IAAID;IACN,IACA;QAAEM,aAAa;IAAM;IAGvB,MAAMC,gBAAgBrB,KAAKmB,MAAM,CAACb,MAAMe,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBtB,KAAKmB,MAAM,CAACb,MAAMgB,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAoB;QAClDH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGzB,eACtBuB,cAAcE,OAAO,EACrB,CAACC;QACCd,gCAAAA,0CAAAA,oBAAsBc,IAAI;YAAEC,SAASlB;YAAUmB;YAAOZ,IAAID;QAAa;IACzE;IAGF,MAAMa,QAAQ3B,KAAK4B,QAAQ,CAACtB,MAAMqB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAU1B,KAAKmB,MAAM,CAACb,MAAMoB,OAAO,EAAE;QACzCH,cAAc;YACZf,UAAUF,MAAME,QAAQ;QAC1B;QACAY,aAAa;IACf;IAEA,MAAMS,cAAc7B,KAAKmB,MAAM,CAACb,MAAMuB,WAAW,EAAE;QACjDN,cAAc;YACZf,UAAUE,SAAS,wBAAU,oBAACR,wCAAsB,oBAACC;QACvD;QACAiB,aAAa;IACf;IAEA,MAAMH,WAAWjB,KAAK4B,QAAQ,CAACtB,MAAMW,QAAQ,EAAE;QAC7CM,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmBzB,MAAMS,EAAE;QAC7B;QACAK,aAAavB;IACf;IAEA,MAAMmC,QAAyB;QAC7BjB,IAAID;QACJJ;QACAuB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbZ,UAAUpB;QACZ;QAEAqB;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"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\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, size = 'medium' } = props;\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const mode = useCopilotMode(props.mode);\n  const designVersion = useDesignVersion(props.designVersion);\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': 'Remove attachment' },\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: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\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    size,\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    mode,\n    designVersion,\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","Dismiss12Regular","Dismiss20Regular","useAttachmentListContext_unstable","useCopilotMode","useDesignVersion","useAttachment_unstable","props","ref","children","imageOnly","size","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","mode","designVersion","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,gBAAgB,QAAQ,wBAAwB;AAC3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,mCAAmC;AAEpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IACjD,MAAM,EAAEK,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGV,kCAAkCW,CAAAA,UAAWA;IAChG,MAAMC,eAAef,MAAM,eAAeO,MAAMS,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACV,MAAMW,QAAQ;IAElC,MAAMC,OAAOf,eAAeG,MAAMY,IAAI;IACtC,MAAMC,gBAAgBf,iBAAiBE,MAAMa,aAAa;IAE1D,MAAMC,OAAOtB,KAAKuB,MAAM,CACtBzB,yBAAyB,OAAO;QAC9BW;QACA,GAAGD,KAAK;QACRS,IAAID;IACN,IACA;QAAEQ,aAAa;IAAM;IAGvB,MAAMC,gBAAgBzB,KAAKuB,MAAM,CAACf,MAAMiB,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgB1B,KAAKuB,MAAM,CAACf,MAAMkB,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAoB;QAClDH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAG7B,eACtB2B,cAAcE,OAAO,EACrB,CAACC;QACChB,gCAAAA,0CAAAA,oBAAsBgB,IAAI;YAAEC,SAASpB;YAAUqB;YAAOd,IAAID;QAAa;IACzE;IAGF,MAAMe,QAAQ/B,KAAKgC,QAAQ,CAACxB,MAAMuB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAU9B,KAAKuB,MAAM,CAACf,MAAMsB,OAAO,EAAE;QACzCH,cAAc;YACZjB,UAAUF,MAAME,QAAQ;QAC1B;QACAc,aAAa;IACf;IAEA,MAAMS,cAAcjC,KAAKuB,MAAM,CAACf,MAAMyB,WAAW,EAAE;QACjDN,cAAc;YACZjB,UAAUE,SAAS,wBAAU,oBAACV,wCAAsB,oBAACC;QACvD;QACAqB,aAAa;IACf;IAEA,MAAML,WAAWnB,KAAKgC,QAAQ,CAACxB,MAAMW,QAAQ,EAAE;QAC7CQ,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmB3B,MAAMS,EAAE;QAC7B;QACAO,aAAa3B;IACf;IAEA,MAAMuC,QAAyB;QAC7BnB,IAAID;QACJJ;QACAyB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbd,UAAUtB;QACZ;QAEAyB;QACAG;QACAC;QACAK;QACAD;QACAG;QACAd;QACAR;QACAO;QACAJ;QACAM;QACAC;IACF;IAEA,IAAIe,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}

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

@@ -1,4 +1,5 @@
-import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';
+import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
 import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
 export const attachmentClassNames = {
   root: 'fai-Attachment',
@@ -125,6 +126,48 @@ const useSmallStyles = __styles({
     p: -1
   }], ".fatynhj{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fydhda{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fzi9ji0{height:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));}", ".f11qte0n{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}", ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"]
 });
+const usePrimaryActionNextStyles = __styles({
+  root: {
+    Btl43ni: ["f8yange", "f1el4m67"],
+    Beyfa6y: ["fc7yr5o", "fnivh3a"]
+  },
+  canvas: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fpi12dx"
+  },
+  sidecar: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fgucwci"
+  }
+}, {
+  d: [".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", [".fpi12dx{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".fgucwci{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}", {
+    p: -1
+  }]]
+});
+const useDismissButtonNextStyles = __styles({
+  root: {
+    B7oj6ja: ["f1el4m67", "f8yange"],
+    Bbmb7ep: ["fnivh3a", "fc7yr5o"]
+  },
+  canvas: {
+    Bqenvij: "fbhnoac",
+    a9b677: "feqmc2u"
+  },
+  sidecar: {
+    Bqenvij: "f1d2rq10",
+    a9b677: "f1szoe96"
+  }
+}, {
+  d: [".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".f1d2rq10{height:32px;}", ".f1szoe96{width:32px;}"]
+});
 /**
  * Apply styling to the Attachment slots based on the state
  */
@@ -141,14 +184,18 @@ export const useAttachmentStyles_unstable = state => {
   const primaryActionStyles = usePrimaryActionStyles();
   const imageOnlyStyles = useImageOnlyStyles();
   const smallStyles = useSmallStyles();
+  const primaryActionNextStyles = usePrimaryActionNextStyles();
+  const dismissButtonNextStyles = useDismissButtonNextStyles();
   const {
     imageOnly,
     primaryAction,
-    size
+    size,
+    mode,
+    designVersion
   } = state;
   state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
-  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
-  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, state.dismissButton.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
+  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
   if (state.media) {
     state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
   }

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

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

package/lib/components/AttachmentList/AttachmentList.js

@@ -3,10 +3,12 @@ import { useAttachmentList_unstable } from './useAttachmentList';
 import { renderAttachmentList_unstable } from './renderAttachmentList';
 import { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';
 import { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';
+import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
 export const AttachmentList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useAttachmentList_unstable(props, ref);
   const contextValues = useAttachmentListContextValues_unstable(state);
   useAttachmentListStyles_unstable(state);
+  useCustomStyleHook('useAttachmentListStyles')(state);
   return renderAttachmentList_unstable(state, contextValues);
 });
 AttachmentList.displayName = 'AttachmentList';

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nimport type { AttachmentListProps } from './AttachmentList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentList: ForwardRefComponent<AttachmentListProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentList_unstable(props, ref);\n  const contextValues = useAttachmentListContextValues_unstable(state);\n\n  useAttachmentListStyles_unstable(state);\n\n  return renderAttachmentList_unstable(state, contextValues);\n});\n\nAttachmentList.displayName = 'AttachmentList';\n"],"names":["React","useAttachmentList_unstable","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentListContextValues_unstable","AttachmentList","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAI3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAChD,MAAME,gBAAgBN,wCAAwCK;IAE9DN,iCAAiCM;IAEjC,OAAOP,8BAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nimport type { AttachmentListProps } from './AttachmentList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\nexport const AttachmentList: ForwardRefComponent<AttachmentListProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentList_unstable(props, ref);\n  const contextValues = useAttachmentListContextValues_unstable(state);\n\n  useAttachmentListStyles_unstable(state);\n  useCustomStyleHook('useAttachmentListStyles')(state);\n\n  return renderAttachmentList_unstable(state, contextValues);\n});\n\nAttachmentList.displayName = 'AttachmentList';\n"],"names":["React","useAttachmentList_unstable","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentListContextValues_unstable","useCustomStyleHook","AttachmentList","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAChD,MAAME,gBAAgBP,wCAAwCM;IAE9DP,iCAAiCO;IACjCL,mBAAmB,2BAA2BK;IAE9C,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

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

package/lib/components/AttachmentList/renderAttachmentList.js

@@ -1,37 +1,27 @@
 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 { 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: shouldUseOverflow && state.overflowMenuButton ? /*#__PURE__*/_jsx(Overflow, {
+    children: shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? /*#__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
-                });
-              })
-            })
+          children: [/*#__PURE__*/_jsx(state.overflowMenuButton, {}), /*#__PURE__*/_jsx(state.menuPopover, {
+            children: /*#__PURE__*/_jsx(state.menuList, {})
           })]
         })]
       })

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 { 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 && state.overflowMenuButton ? (\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","overflowMenuButton","ref","children","positioning","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,qBAAqBL,MAAMQ,kBAAkB,iBAC5C,KAACd;YAASe,KAAKL,KAAKK,GAAG;sBACrB,cAAA,MAACT,MAAMI,IAAI;;oBACRA,KAAKM,QAAQ;kCACd,MAACb;wBAAuBc,aAAa;wBAAU,GAAGR,iBAAiB;;0CACjE,KAACH,MAAMQ,kBAAkB;0CACzB,KAACf;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"}
+{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\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 { overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <state.menuPopover>\n                <state.menuList />\n              </state.menuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["Overflow","assertSlots","AttachmentListProvider","AttachmentOverflowMenu","renderAttachmentList_unstable","state","contextValues","overflowMenuProps","root","shouldUseOverflow","value","attachmentList","overflowMenuButton","menuList","menuPopover","ref","children","positioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AACnE,SAASC,sBAAsB,QAAQ,uCAAuC;AAC9E,SAASC,sBAAsB,QAAQ,4BAA4B;AAGnE;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAL,YAAiCI;IACjC,MAAM,EAAEE,iBAAiB,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGJ;IAEvD,qBACE,KAACH;QAAuBQ,OAAOJ,cAAcK,cAAc;kBACxDF,qBAAqBJ,MAAMO,kBAAkB,IAAIP,MAAMQ,QAAQ,IAAIR,MAAMS,WAAW,iBACnF,KAACd;YAASe,KAAKP,KAAKO,GAAG;sBACrB,cAAA,MAACV,MAAMG,IAAI;;oBACRA,KAAKQ,QAAQ;kCACd,MAACb;wBAAuBc,aAAa;wBAAU,GAAGV,iBAAiB;;0CACjE,KAACF,MAAMO,kBAAkB;0CACzB,KAACP,MAAMS,WAAW;0CAChB,cAAA,KAACT,MAAMQ,QAAQ;;;;;;2BAMvB,KAACR,MAAMG,IAAI;;AAInB,EAAE"}

package/lib/components/AttachmentList/useAttachmentList.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
+import { MenuList, MenuPopover, getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useTimeout } from '@fluentui/react-utilities';
 import { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';
 import { useOverflowStyles } from '../Attachment';
 import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
 import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';
+import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
 /**
  * Create the state required to render AttachmentList.
  *
@@ -32,7 +33,6 @@ export const useAttachmentList_unstable = (props, ref) => {
     findPrevFocusable,
     findLastFocusable
   } = useFocusFinders();
-  const [attachments, setAttachments] = React.useState([]);
   const handleAttachmentDismiss = useEventCallback((e, data) => {
     var _innerRef_current;
     if (!onAttachmentDismiss) {
@@ -77,10 +77,16 @@ export const useAttachmentList_unstable = (props, ref) => {
     maxVisibleItems: maxVisibleAttachments,
     overflowClassName: styles.overflow
   });
-  React.useEffect(() => {
+  const attachmentOverflowMenuItems = React.useMemo(() => {
     if (resolvedChildren && Array.isArray(resolvedChildren)) {
-      setAttachments(resolvedChildren.filter(child => /*#__PURE__*/React.isValidElement(child)).map(child => child.props));
+      return resolvedChildren.filter(child => /*#__PURE__*/React.isValidElement(child)).map(child => child.props).map(attachment => {
+        return /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, {
+          ...attachment,
+          key: attachment.id
+        });
+      });
     }
+    return [];
   }, [resolvedChildren]);
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: true,
@@ -89,12 +95,13 @@ export const useAttachmentList_unstable = (props, ref) => {
   });
   const shouldUseOverflow = maxVisibleAttachments !== undefined;
   return {
-    attachments,
     onAttachmentDismiss: handleAttachmentDismiss,
     shouldUseOverflow,
     overflowMenuProps,
     components: {
       root: 'div',
+      menuList: MenuList,
+      menuPopover: MenuPopover,
       overflowMenuButton: 'span'
     },
     root: slot.always(getIntrinsicElementProps('div', {
@@ -107,6 +114,17 @@ export const useAttachmentList_unstable = (props, ref) => {
     }), {
       elementType: 'div'
     }),
+    menuList: slot.optional(props.menuList, {
+      defaultProps: {
+        children: attachmentOverflowMenuItems
+      },
+      elementType: MenuList,
+      renderByDefault: true
+    }),
+    menuPopover: slot.optional(props.menuPopover, {
+      elementType: MenuPopover,
+      renderByDefault: true
+    }),
     overflowMenuButton: slot.optional(props.overflowMenuButton, {
       defaultProps: {
         children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuButton, null)