@fluentui-copilot/react-attachments 0.12.0 → 0.12.2

package/CHANGELOG.json

@@ -1,6 +1,36 @@
 {
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
+    {
+      "date": "Thu, 24 Apr 2025 00:18:40 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.12.2",
+      "version": "0.12.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "owcampbe@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "3b678663e167612c9e90d36962eb10f0ee1ae032",
+            "comment": "feat: Add dismissOnly prop and AgentTag component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Sat, 19 Apr 2025 00:05:39 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.12.1",
+      "version": "0.12.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "estebanmu@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "30715b3112eff5afe692c88fbbacb43b1f2eb6b3",
+            "comment": "feat: Add rocksteady updated styles."
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 20 Mar 2025 17:00:44 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.11.0",

package/CHANGELOG.md

@@ -1,9 +1,27 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Thu, 20 Mar 2025 17:00:44 GMT and should not be manually modified.
+This log was last generated on Thu, 24 Apr 2025 00:18:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.12.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.12.2)
+
+Thu, 24 Apr 2025 00:18:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.12.1..@fluentui-copilot/react-attachments_v0.12.2)
+
+### Patches
+
+- feat: Add dismissOnly prop and AgentTag component. ([PR #2944](https://github.com/microsoft/fluentai/pull/2944) by owcampbe@microsoft.com)
+
+## [0.12.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.12.1)
+
+Sat, 19 Apr 2025 00:05:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.11.0..@fluentui-copilot/react-attachments_v0.12.1)
+
+### Patches
+
+- feat: Add rocksteady updated styles. ([PR #2937](https://github.com/microsoft/fluentai/pull/2937) by estebanmu@microsoft.com)
+
 ## [0.11.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.11.0)
 
 Thu, 20 Mar 2025 17:00:44 GMT 

package/dist/index.d.ts

@@ -22,6 +22,22 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
 
+export declare const AgentTag: ForwardRefComponent<AgentTagProps>;
+
+export declare const agentTagClassNames: SlotClassNames<AgentTagSlots>;
+
+/**
+ * AgentTag Props
+ */
+export declare type AgentTagProps = ComponentProps<Partial<Omit<AgentTagSlots, 'primaryAction' | 'progress'>>> & Omit<AttachmentProps, keyof AttachmentSlots | 'dismissOnly'>;
+
+export declare type AgentTagSlots = AttachmentSlots;
+
+/**
+ * State used in rendering AgentTag
+ */
+export declare type AgentTagState = ComponentState<AgentTagSlots> & Omit<AttachmentState, keyof AttachmentSlots>;
+
 export declare const Attachment: ForwardRefComponent<AttachmentProps>;
 
 export declare const attachmentClassNames: SlotClassNames<AttachmentSlots>;
@@ -50,7 +66,7 @@ declare type AttachmentListContextValues = {
 /**
  * AttachmentList Props
  */
-export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {
+export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & DesignVersion & {
     /**
      * Callback fired when an attachment is dismissed.
      */
@@ -84,7 +100,7 @@ export declare type AttachmentListSlots = {
 /**
  * State used in rendering AttachmentList
  */
-export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {
+export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps' | 'designVersion'> & {
     shouldUseOverflow: boolean;
 };
 
@@ -135,7 +151,7 @@ export declare const attachmentOverflowMenuItemClassNames: SlotClassNames<Attach
 /**
  * AttachmentOverflowMenuItem Props
  */
-export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;
+export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & DesignVersion & Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;
 
 export declare type AttachmentOverflowMenuItemSlots = {
     root: NonNullable<Slot<typeof MenuItem>>;
@@ -145,7 +161,7 @@ export declare type AttachmentOverflowMenuItemSlots = {
 /**
  * State used in rendering AttachmentOverflowMenuItem
  */
-export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {
+export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & Pick<AttachmentOverflowMenuItemProps, 'imageOnly' | 'designVersion'> & {
     isVisible: boolean;
 };
 
@@ -183,6 +199,11 @@ export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> &
      * @default 'medium'
      */
     size?: 'small' | 'medium';
+    /**
+     * Use this prop if the attachment has no primary action
+     * and should be rendered as a single button
+     */
+    dismissOnly?: boolean;
 };
 
 export declare type AttachmentSlots = {
@@ -216,7 +237,7 @@ export declare type AttachmentSlots = {
 /**
  * State used in rendering Attachment
  */
-export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id' | 'size' | 'designVersion' | 'mode'>> & Pick<AttachmentProps, 'imageOnly'> & {
+export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id' | 'size' | 'designVersion' | 'mode' | 'dismissOnly'>> & Pick<AttachmentProps, 'imageOnly'> & {
     isLoading: boolean;
     shouldUseOverflow: boolean;
 };
@@ -309,6 +330,11 @@ export declare type AttachmentTagSlots = {
  */
 export declare type AttachmentTagState = ComponentState<AttachmentTagSlots>;
 
+/**
+ * Render the final JSX of AgentTag
+ */
+export declare const renderAgentTag_unstable: (state: AgentTagState) => JSX.Element;
+
 /**
  * Render the final JSX of Attachment
  */
@@ -352,6 +378,22 @@ export declare const renderAttachmentTagItem_unstable: (state: AttachmentTagItem
  */
 export declare const renderAttachmentTagList_unstable: (state: AttachmentTagListState, contextValues: AttachmentTagListContextValues) => JSX.Element;
 
+/**
+ * Create the state required to render AgentTag.
+ *
+ * The returned state can be modified with hooks such as useAgentTagStyles_unstable,
+ * before being passed to renderAgentTag_unstable.
+ *
+ * @param props - props from this instance of AgentTag
+ * @param ref - reference to root HTMLElement of AgentTag
+ */
+export declare const useAgentTag_unstable: (props: AgentTagProps, ref: React_2.Ref<HTMLDivElement>) => AgentTagState;
+
+/**
+ * Apply styling to the AgentTag slots based on the state
+ */
+export declare const useAgentTagStyles_unstable: (state: AgentTagState) => AgentTagState;
+
 /**
  * Create the state required to render Attachment.
  *

package/lib/AgentTag.js

@@ -0,0 +1,2 @@
+export { AgentTag, renderAgentTag_unstable, useAgentTag_unstable, agentTagClassNames, useAgentTagStyles_unstable } from './components/AgentTag/index';
+//# sourceMappingURL=AgentTag.js.map

package/lib/AgentTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AgentTag.ts"],"sourcesContent":["export {\n  AgentTag,\n  renderAgentTag_unstable,\n  useAgentTag_unstable,\n  agentTagClassNames,\n  useAgentTagStyles_unstable,\n} from './components/AgentTag/index';\nexport type { AgentTagProps, AgentTagSlots, AgentTagState } from './components/AgentTag/index';\n"],"names":["AgentTag","renderAgentTag_unstable","useAgentTag_unstable","agentTagClassNames","useAgentTagStyles_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,oBAAoB,EACpBC,kBAAkB,EAClBC,0BAA0B,QACrB,8BAA8B"}

package/lib/components/AgentTag/AgentTag.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useAgentTag_unstable } from './useAgentTag';
+import { renderAgentTag_unstable } from './renderAgentTag';
+import { useAgentTagStyles_unstable } from './useAgentTagStyles.styles';
+// AgentTag component - TODO: add more docs
+export const AgentTag = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAgentTag_unstable(props, ref);
+  useAgentTagStyles_unstable(state);
+  return renderAgentTag_unstable(state);
+});
+AgentTag.displayName = 'AgentTag';
+//# sourceMappingURL=AgentTag.js.map

package/lib/components/AgentTag/AgentTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AgentTag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAgentTag_unstable } from './useAgentTag';\nimport { renderAgentTag_unstable } from './renderAgentTag';\nimport { useAgentTagStyles_unstable } from './useAgentTagStyles.styles';\nimport type { AgentTagProps } from './AgentTag.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// AgentTag component - TODO: add more docs\nexport const AgentTag: ForwardRefComponent<AgentTagProps> = React.forwardRef((props, ref) => {\n  const state = useAgentTag_unstable(props, ref);\n\n  useAgentTagStyles_unstable(state);\n  return renderAgentTag_unstable(state);\n});\n\nAgentTag.displayName = 'AgentTag';\n"],"names":["React","useAgentTag_unstable","renderAgentTag_unstable","useAgentTagStyles_unstable","AgentTag","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAIxE,2CAA2C;AAC3C,OAAO,MAAMC,yBAA+CJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3B,OAAON,wBAAwBM;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

package/lib/components/AgentTag/AgentTag.types.js

@@ -0,0 +1,4 @@
+/**
+ * State used in rendering AgentTag
+ */export {};
+//# sourceMappingURL=AgentTag.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AgentTag.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-components';\nimport type { AttachmentSlots, AttachmentProps, AttachmentState } from '../Attachment';\n\nexport type AgentTagSlots = AttachmentSlots;\n\n/**\n * AgentTag Props\n */\nexport type AgentTagProps = ComponentProps<Partial<Omit<AgentTagSlots, 'primaryAction' | 'progress'>>> &\n  Omit<AttachmentProps, keyof AttachmentSlots | 'dismissOnly'>;\n\n/**\n * State used in rendering AgentTag\n */\nexport type AgentTagState = ComponentState<AgentTagSlots> & Omit<AttachmentState, keyof AttachmentSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAWA;;CAEC,GACD,WAAyG"}

package/lib/components/AgentTag/index.js

@@ -0,0 +1,5 @@
+export { AgentTag } from './AgentTag';
+export { renderAgentTag_unstable } from './renderAgentTag';
+export { useAgentTag_unstable } from './useAgentTag';
+export { agentTagClassNames, useAgentTagStyles_unstable } from './useAgentTagStyles.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/AgentTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { AgentTag } from './AgentTag';\nexport type { AgentTagProps, AgentTagSlots, AgentTagState } from './AgentTag.types';\nexport { renderAgentTag_unstable } from './renderAgentTag';\nexport { useAgentTag_unstable } from './useAgentTag';\nexport { agentTagClassNames, useAgentTagStyles_unstable } from './useAgentTagStyles.styles';\n"],"names":["AgentTag","renderAgentTag_unstable","useAgentTag_unstable","agentTagClassNames","useAgentTagStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/AgentTag/renderAgentTag.js

@@ -0,0 +1,8 @@
+import { renderAttachment_unstable } from '../Attachment';
+/**
+ * Render the final JSX of AgentTag
+ */
+export const renderAgentTag_unstable = state => {
+  return renderAttachment_unstable(state);
+};
+//# sourceMappingURL=renderAgentTag.js.map

package/lib/components/AgentTag/renderAgentTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAgentTag.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { renderAttachment_unstable } from '../Attachment';\nimport type { AgentTagState } from './AgentTag.types';\n\n/**\n * Render the final JSX of AgentTag\n */\nexport const renderAgentTag_unstable = (state: AgentTagState) => {\n  return renderAttachment_unstable(state);\n};\n"],"names":["renderAttachment_unstable","renderAgentTag_unstable","state"],"rangeMappings":";;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD,SAASA,yBAAyB,QAAQ,gBAAgB;AAG1D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC,OAAOF,0BAA0BE;AACnC,EAAE"}

package/lib/components/AgentTag/useAgentTag.js

@@ -0,0 +1,20 @@
+import { useAttachment_unstable } from '..';
+// If you add JSX to this file, be sure to change the file type to .tsx
+/**
+ * Create the state required to render AgentTag.
+ *
+ * The returned state can be modified with hooks such as useAgentTagStyles_unstable,
+ * before being passed to renderAgentTag_unstable.
+ *
+ * @param props - props from this instance of AgentTag
+ * @param ref - reference to root HTMLElement of AgentTag
+ */
+export const useAgentTag_unstable = (props, ref) => {
+  const state = useAttachment_unstable({
+    ...props,
+    dismissOnly: true,
+    designVersion: 'next'
+  }, ref);
+  return state;
+};
+//# sourceMappingURL=useAgentTag.js.map

package/lib/components/AgentTag/useAgentTag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAgentTag.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { AgentTagProps, AgentTagState } from './AgentTag.types';\nimport { useAttachment_unstable } from '..';\n\n// If you add JSX to this file, be sure to change the file type to .tsx\n\n/**\n * Create the state required to render AgentTag.\n *\n * The returned state can be modified with hooks such as useAgentTagStyles_unstable,\n * before being passed to renderAgentTag_unstable.\n *\n * @param props - props from this instance of AgentTag\n * @param ref - reference to root HTMLElement of AgentTag\n */\nexport const useAgentTag_unstable = (props: AgentTagProps, ref: React.Ref<HTMLDivElement>): AgentTagState => {\n  const state = useAttachment_unstable({ ...props, dismissOnly: true, designVersion: 'next' }, ref);\n\n  return state;\n};\n"],"names":["useAttachment_unstable","useAgentTag_unstable","props","ref","state","dismissOnly","designVersion"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,sBAAsB,QAAQ,KAAK;AAE5C,uEAAuE;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,QAAQJ,uBAAuB;QAAE,GAAGE,KAAK;QAAEG,aAAa;QAAMC,eAAe;IAAO,GAAGH;IAE7F,OAAOC;AACT,EAAE"}

package/lib/components/AgentTag/useAgentTagStyles.styles.js

@@ -0,0 +1,95 @@
+import { __styles, mergeClasses, typographyStyles } from '@fluentui/react-components';
+import { useAttachmentStyles_unstable } from '..';
+import { tokens } from '@fluentui-copilot/tokens';
+export const agentTagClassNames = {
+  root: 'fai-AgentTag',
+  primaryAction: 'fai-AgentTag__primaryAction',
+  dismissIcon: 'fai-AgentTag__dismissIcon',
+  dismissButton: 'fai-AgentTag__dismissButton',
+  media: 'fai-AgentTag__media',
+  content: 'fai-AgentTag__content',
+  progress: 'fai-AgentTag__progress'
+};
+const useMediaStyles = __styles({
+  canvas: {
+    a9b677: "fq4mcun",
+    Bqenvij: "frvgh55"
+  },
+  sidecar: {
+    a9b677: "f64fuq3",
+    Bqenvij: "fjamq6b"
+  }
+}, {
+  d: [".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}"]
+});
+const useContentStyles = __styles({
+  canvas: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k",
+    sj55zd: "fkfq4zb"
+  },
+  sidecar: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi",
+    sj55zd: "fkfq4zb"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
+const useDismissButtonStyles = __styles({
+  canvas: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1jxijnj",
+    uwmqm3: ["fhx4nu", "fjodcmx"],
+    z189sj: ["fw5db7e", "f1uw59to"]
+  },
+  sidecar: {
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  }
+}, {
+  d: [[".f1jxijnj{border-radius:var(--borderRadius2XL);}", {
+    p: -1
+  }], ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the AgentTag slots based on the state
+ */
+export const useAgentTagStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    mode
+  } = state;
+  const contentStyles = useContentStyles();
+  const dismissButtonStyles = useDismissButtonStyles();
+  const mediaStyles = useMediaStyles();
+  state.root.className = mergeClasses(agentTagClassNames.root, state.root.className);
+  state.primaryAction.className = mergeClasses(agentTagClassNames.primaryAction, state.primaryAction.className);
+  state.dismissIcon.className = mergeClasses(agentTagClassNames.dismissIcon, state.dismissIcon.className);
+  state.dismissButton.className = mergeClasses(agentTagClassNames.dismissButton, dismissButtonStyles[mode], state.dismissButton.className);
+  if (state.media) {
+    state.media.className = mergeClasses(agentTagClassNames.media, mediaStyles[mode], state.media.className);
+  }
+  state.content.className = mergeClasses(agentTagClassNames.content, contentStyles[mode], state.content.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(agentTagClassNames.progress, state.progress.className);
+  }
+  useAttachmentStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useAgentTagStyles.styles.js.map

package/lib/components/AgentTag/useAgentTagStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAgentTagStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport type { AgentTagSlots, AgentTagState } from './AgentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { useAttachmentStyles_unstable } from '..';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nexport const agentTagClassNames: SlotClassNames<AgentTagSlots> = {\n  root: 'fai-AgentTag',\n  primaryAction: 'fai-AgentTag__primaryAction',\n  dismissIcon: 'fai-AgentTag__dismissIcon',\n  dismissButton: 'fai-AgentTag__dismissButton',\n  media: 'fai-AgentTag__media',\n  content: 'fai-AgentTag__content',\n  progress: 'fai-AgentTag__progress',\n};\n\nconst useMediaStyles = makeStyles({\n  canvas: {\n    width: '24px',\n    height: '24px',\n  },\n  sidecar: { width: '20px', height: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n  canvas: {\n    ...typographyStyles.subtitle2,\n    color: tokens.colorNeutralForeground2,\n  },\n  sidecar: {\n    ...typographyStyles.body1Strong,\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useDismissButtonStyles = makeStyles({\n  canvas: {\n    borderRadius: tokens.borderRadius2XL,\n    paddingLeft: tokens.spacingHorizontalL,\n    paddingRight: tokens.spacingHorizontalM,\n  },\n  sidecar: {\n    paddingLeft: tokens.spacingHorizontalM,\n    paddingRight: tokens.spacingHorizontalS,\n    borderRadius: tokens.borderRadiusXLarge,\n  },\n});\n\n/**\n * Apply styling to the AgentTag slots based on the state\n */\nexport const useAgentTagStyles_unstable = (state: AgentTagState): AgentTagState => {\n  'use no memo';\n\n  const { mode } = state;\n\n  const contentStyles = useContentStyles();\n  const dismissButtonStyles = useDismissButtonStyles();\n  const mediaStyles = useMediaStyles();\n\n  state.root.className = mergeClasses(agentTagClassNames.root, state.root.className);\n\n  state.primaryAction.className = mergeClasses(agentTagClassNames.primaryAction, state.primaryAction.className);\n\n  state.dismissIcon.className = mergeClasses(agentTagClassNames.dismissIcon, state.dismissIcon.className);\n\n  state.dismissButton.className = mergeClasses(\n    agentTagClassNames.dismissButton,\n    dismissButtonStyles[mode],\n    state.dismissButton.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(agentTagClassNames.media, mediaStyles[mode], state.media.className);\n  }\n\n  state.content.className = mergeClasses(agentTagClassNames.content, contentStyles[mode], state.content.className);\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(agentTagClassNames.progress, state.progress.className);\n  }\n\n  useAttachmentStyles_unstable(state);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","typographyStyles","useAttachmentStyles_unstable","tokens","agentTagClassNames","root","primaryAction","dismissIcon","dismissButton","media","content","progress","useMediaStyles","canvas","width","height","sidecar","useContentStyles","subtitle2","color","colorNeutralForeground2","body1Strong","useDismissButtonStyles","borderRadius","borderRadius2XL","paddingLeft","spacingHorizontalL","paddingRight","spacingHorizontalM","spacingHorizontalS","borderRadiusXLarge","useAgentTagStyles_unstable","state","mode","contentStyles","dismissButtonStyles","mediaStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,gBAAgB,QAAQ,6BAA6B;AAGxF,SAASC,4BAA4B,QAAQ,KAAK;AAClD,SAASC,MAAM,QAAQ,2BAA2B;AAElD,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,eAAe;IACfC,aAAa;IACbC,eAAe;IACfC,OAAO;IACPC,SAAS;IACTC,UAAU;AACZ,EAAE;AAEF,MAAMC,iBAAiBb,WAAW;IAChCc,QAAQ;QACNC,OAAO;QACPC,QAAQ;IACV;IACAC,SAAS;QAAEF,OAAO;QAAQC,QAAQ;IAAO;AAC3C;AAEA,MAAME,mBAAmBlB,WAAW;IAClCc,QAAQ;QACN,GAAGZ,iBAAiBiB,SAAS;QAC7BC,OAAOhB,OAAOiB,uBAAuB;IACvC;IACAJ,SAAS;QACP,GAAGf,iBAAiBoB,WAAW;QAC/BF,OAAOhB,OAAOiB,uBAAuB;IACvC;AACF;AAEA,MAAME,yBAAyBvB,WAAW;IACxCc,QAAQ;QACNU,cAAcpB,OAAOqB,eAAe;QACpCC,aAAatB,OAAOuB,kBAAkB;QACtCC,cAAcxB,OAAOyB,kBAAkB;IACzC;IACAZ,SAAS;QACPS,aAAatB,OAAOyB,kBAAkB;QACtCD,cAAcxB,OAAO0B,kBAAkB;QACvCN,cAAcpB,OAAO2B,kBAAkB;IACzC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,gBAAgBjB;IACtB,MAAMkB,sBAAsBb;IAC5B,MAAMc,cAAcxB;IAEpBoB,MAAM3B,IAAI,CAACgC,SAAS,GAAGrC,aAAaI,mBAAmBC,IAAI,EAAE2B,MAAM3B,IAAI,CAACgC,SAAS;IAEjFL,MAAM1B,aAAa,CAAC+B,SAAS,GAAGrC,aAAaI,mBAAmBE,aAAa,EAAE0B,MAAM1B,aAAa,CAAC+B,SAAS;IAE5GL,MAAMzB,WAAW,CAAC8B,SAAS,GAAGrC,aAAaI,mBAAmBG,WAAW,EAAEyB,MAAMzB,WAAW,CAAC8B,SAAS;IAEtGL,MAAMxB,aAAa,CAAC6B,SAAS,GAAGrC,aAC9BI,mBAAmBI,aAAa,EAChC2B,mBAAmB,CAACF,KAAK,EACzBD,MAAMxB,aAAa,CAAC6B,SAAS;IAG/B,IAAIL,MAAMvB,KAAK,EAAE;QACfuB,MAAMvB,KAAK,CAAC4B,SAAS,GAAGrC,aAAaI,mBAAmBK,KAAK,EAAE2B,WAAW,CAACH,KAAK,EAAED,MAAMvB,KAAK,CAAC4B,SAAS;IACzG;IAEAL,MAAMtB,OAAO,CAAC2B,SAAS,GAAGrC,aAAaI,mBAAmBM,OAAO,EAAEwB,aAAa,CAACD,KAAK,EAAED,MAAMtB,OAAO,CAAC2B,SAAS;IAE/G,IAAIL,MAAMrB,QAAQ,EAAE;QAClBqB,MAAMrB,QAAQ,CAAC0B,SAAS,GAAGrC,aAAaI,mBAAmBO,QAAQ,EAAEqB,MAAMrB,QAAQ,CAAC0B,SAAS;IAC/F;IAEAnC,6BAA6B8B;IAE7B,OAAOA;AACT,EAAE"}

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

@@ -1 +1 @@
-{"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"}
+{"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     * Use this prop if the attachment has no primary action\n     * and should be rendered as a single button\n     */\n    dismissOnly?: boolean;\n  };\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id' | 'size' | 'designVersion' | 'mode' | 'dismissOnly'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA+DA;;CAEC,GACD,WAKI"}

package/lib/components/Attachment/renderAttachment.js

@@ -4,21 +4,34 @@ import { OverflowItem, assertSlots } from '@fluentui/react-components';
  * Render the final JSX of Attachment
  */
 export const renderAttachment_unstable = state => {
-  assertSlots(state);
   const {
     id,
-    shouldUseOverflow
+    shouldUseOverflow,
+    designVersion,
+    dismissOnly
   } = state;
-  const attachment = /*#__PURE__*/_jsxs(state.root, {
+  const attachment = designVersion === 'next' && dismissOnly ? renderDismissOnly(state) : renderAttachment(state);
+  return shouldUseOverflow ? /*#__PURE__*/_jsx(OverflowItem, {
+    id: id,
+    children: attachment
+  }, id) : attachment;
+};
+const renderAttachment = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsxs(state.root, {
     children: [/*#__PURE__*/_jsxs(state.primaryAction, {
       children: [state.media && !state.imageOnly && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {}), 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;
+};
+const renderDismissOnly = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsx(state.root, {
+    children: /*#__PURE__*/_jsxs(state.dismissButton, {
+      children: [state.media && !state.imageOnly && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {}), state.progress && /*#__PURE__*/_jsx(state.progress, {}), /*#__PURE__*/_jsx(state.dismissIcon, {})]
+    })
+  });
 };
 //# 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 { 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"}
+{"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  const { id, shouldUseOverflow, designVersion, dismissOnly } = state;\n\n  const attachment = designVersion === 'next' && dismissOnly ? renderDismissOnly(state) : renderAttachment(state);\n\n  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n\nconst renderAttachment = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n\nconst renderDismissOnly = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.dismissButton>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["OverflowItem","assertSlots","renderAttachment_unstable","state","id","shouldUseOverflow","designVersion","dismissOnly","attachment","renderDismissOnly","renderAttachment","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;IACxC,MAAM,EAAEC,EAAE,EAAEC,iBAAiB,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGJ;IAE9D,MAAMK,aAAaF,kBAAkB,UAAUC,cAAcE,kBAAkBN,SAASO,iBAAiBP;IAEzG,OAAOE,kCACL,KAACL;QAAaI,IAAIA;kBACfI;OADwBJ,MAI3BI;AAEJ,EAAE;AAEF,MAAME,mBAAmB,CAACP;IACxBF,YAA6BE;IAE7B,qBACE,MAACA,MAAMQ,IAAI;;0BACT,MAACR,MAAMS,aAAa;;oBACjBT,MAAMU,KAAK,IAAI,CAACV,MAAMW,SAAS,kBAAI,KAACX,MAAMU,KAAK;kCAChD,KAACV,MAAMY,OAAO;oBACbZ,MAAMa,QAAQ,kBAAI,KAACb,MAAMa,QAAQ;;;0BAEpC,KAACb,MAAMc,aAAa;0BAClB,cAAA,KAACd,MAAMe,WAAW;;;;AAI1B;AAEA,MAAMT,oBAAoB,CAACN;IACzBF,YAA6BE;IAE7B,qBACE,KAACA,MAAMQ,IAAI;kBACT,cAAA,MAACR,MAAMc,aAAa;;gBACjBd,MAAMU,KAAK,IAAI,CAACV,MAAMW,SAAS,kBAAI,KAACX,MAAMU,KAAK;8BAChD,KAACV,MAAMY,OAAO;gBACbZ,MAAMa,QAAQ,kBAAI,KAACb,MAAMa,QAAQ;8BAClC,KAACb,MAAMe,WAAW;;;;AAI1B"}

package/lib/components/Attachment/useAttachment.js

@@ -16,7 +16,8 @@ export const useAttachment_unstable = (props, ref) => {
   const {
     children,
     imageOnly,
-    size = 'medium'
+    size = 'medium',
+    dismissOnly = false
   } = props;
   const {
     onAttachmentDismiss,
@@ -34,6 +35,9 @@ export const useAttachment_unstable = (props, ref) => {
     elementType: 'div'
   });
   const primaryAction = slot.always(props.primaryAction, {
+    defaultProps: {
+      as: dismissOnly ? 'span' : undefined
+    },
     elementType: 'button'
   });
   const dismissButton = slot.always(props.dismissButton, {
@@ -95,7 +99,8 @@ export const useAttachment_unstable = (props, ref) => {
     isLoading,
     shouldUseOverflow,
     mode,
-    designVersion
+    designVersion,
+    dismissOnly
   };
   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';\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"}
+{"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', dismissOnly = false } = 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    defaultProps: { as: dismissOnly ? 'span' : undefined },\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    dismissOnly,\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","dismissOnly","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","mode","designVersion","root","always","elementType","primaryAction","defaultProps","as","undefined","dismissButton","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components"],"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,EAAEC,cAAc,KAAK,EAAE,GAAGL;IACtE,MAAM,EAAEM,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGX,kCAAkCY,CAAAA,UAAWA;IAChG,MAAMC,eAAehB,MAAM,eAAeO,MAAMU,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACX,MAAMY,QAAQ;IAElC,MAAMC,OAAOhB,eAAeG,MAAMa,IAAI;IACtC,MAAMC,gBAAgBhB,iBAAiBE,MAAMc,aAAa;IAE1D,MAAMC,OAAOvB,KAAKwB,MAAM,CACtB1B,yBAAyB,OAAO;QAC9BW;QACA,GAAGD,KAAK;QACRU,IAAID;IACN,IACA;QAAEQ,aAAa;IAAM;IAGvB,MAAMC,gBAAgB1B,KAAKwB,MAAM,CAAChB,MAAMkB,aAAa,EAAE;QACrDC,cAAc;YAAEC,IAAIf,cAAc,SAASgB;QAAU;QACrDJ,aAAa;IACf;IAEA,MAAMK,gBAAgB9B,KAAKwB,MAAM,CAAChB,MAAMsB,aAAa,EAAE;QACrDH,cAAc;YAAE,cAAc;QAAoB;QAClDF,aAAa;IACf;IAEAK,cAAcC,OAAO,GAAGhC,eACtB+B,cAAcC,OAAO,EACrB,CAACC;QACClB,gCAAAA,0CAAAA,oBAAsBkB,IAAI;YAAEC,SAASvB;YAAUwB;YAAOhB,IAAID;QAAa;IACzE;IAGF,MAAMiB,QAAQlC,KAAKmC,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QAAET,aAAa;IAAO;IAE/D,MAAMQ,UAAUjC,KAAKwB,MAAM,CAAChB,MAAMyB,OAAO,EAAE;QACzCN,cAAc;YACZjB,UAAUF,MAAME,QAAQ;QAC1B;QACAe,aAAa;IACf;IAEA,MAAMW,cAAcpC,KAAKwB,MAAM,CAAChB,MAAM4B,WAAW,EAAE;QACjDT,cAAc;YACZjB,UAAUE,SAAS,wBAAU,oBAACV,wCAAsB,oBAACC;QACvD;QACAsB,aAAa;IACf;IAEA,MAAML,WAAWpB,KAAKmC,QAAQ,CAAC3B,MAAMY,QAAQ,EAAE;QAC7CO,cAAc;YACZU,OAAO;YACPC,WAAW;YACX,mBAAmB9B,MAAMU,EAAE;QAC7B;QACAO,aAAa5B;IACf;IAEA,MAAM0C,QAAyB;QAC7BrB,IAAID;QACJL;QACA4B,YAAY;YACVjB,MAAM;YACNG,eAAe;YACfI,eAAe;YACfI,OAAO;YACPD,SAAS;YACTG,aAAa;YACbhB,UAAUvB;QACZ;QAEA0B;QACAG;QACAI;QACAI;QACAD;QACAG;QACAhB;QACAT;QACAQ;QACAJ;QACAM;QACAC;QACAT;IACF;IAEA,IAAI0B,MAAMb,aAAa,CAACE,EAAE,KAAK,QAAQ;QACrCW,MAAMC,UAAU,CAACd,aAAa,GAAG;IACnC;IAEA,OAAOa;AACT,EAAE"}