npm - @fluentui-copilot/react-attachments - Versions diffs - 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251014-0405-d8d3e89c.1 - Mend

@fluentui-copilot/react-attachments 0.0.0-nightly-20251010-0406-7df7c6d1.1 → 0.0.0-nightly-20251014-0405-d8d3e89c.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (220) hide show

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

@@ -0,0 +1,95 @@
+import { __styles, mergeClasses } from '@fluentui/react-components';
+import { useAttachmentStyles_unstable } from '..';
+import { tokens, typographyStyles } 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: "f1anucx2",
+    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);}", ".f1anucx2{line-height:var(--lineHeightBase450);}", ".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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["useAgentTagStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-components';\nimport type { AgentTagSlots, AgentTagState } from './AgentTag.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\nimport { useAttachmentStyles_unstable } from '..';\nimport { tokens, typographyStyles } 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","useAttachmentStyles_unstable","tokens","typographyStyles","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,QAAQ,6BAA6B;AAGtE,SAASC,4BAA4B,QAAQ,KAAK;AAClD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,2BAA2B;AAEpE,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,GAAGV,iBAAiBe,SAAS;QAC7BC,OAAOjB,OAAOkB,uBAAuB;IACvC;IACAJ,SAAS;QACP,GAAGb,iBAAiBkB,WAAW;QAC/BF,OAAOjB,OAAOkB,uBAAuB;IACvC;AACF;AAEA,MAAME,yBAAyBvB,WAAW;IACxCc,QAAQ;QACNU,cAAcrB,OAAOsB,eAAe;QACpCC,aAAavB,OAAOwB,kBAAkB;QACtCC,cAAczB,OAAO0B,kBAAkB;IACzC;IACAZ,SAAS;QACPS,aAAavB,OAAO0B,kBAAkB;QACtCD,cAAczB,OAAO2B,kBAAkB;QACvCN,cAAcrB,OAAO4B,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;IAEApC,6BAA6B+B;IAE7B,OAAOA;AACT,EAAE"}

package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,66 @@
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import { useAttachmentStyles_unstable } from '..';
+import { tokens, typographyStyles } 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 = makeStyles({
+    canvas: {
+        width: '24px',
+        height: '24px'
+    },
+    sidecar: {
+        width: '20px',
+        height: '20px'
+    }
+});
+const useContentStyles = makeStyles({
+    canvas: {
+        ...typographyStyles.subtitle2,
+        color: tokens.colorNeutralForeground2
+    },
+    sidecar: {
+        ...typographyStyles.body1Strong,
+        color: tokens.colorNeutralForeground2
+    }
+});
+const useDismissButtonStyles = makeStyles({
+    canvas: {
+        borderRadius: tokens.borderRadius2XL,
+        paddingLeft: tokens.spacingHorizontalL,
+        paddingRight: tokens.spacingHorizontalM
+    },
+    sidecar: {
+        paddingLeft: tokens.spacingHorizontalM,
+        paddingRight: tokens.spacingHorizontalS,
+        borderRadius: tokens.borderRadiusXLarge
+    }
+});
+/**
+ * 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;
+};

package/lib/components/AgentTag/useAgentTagStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

package/lib/components/Attachment/Attachment.js ADDED Viewed

@@ -0,0 +1,13 @@
+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 ADDED Viewed

@@ -0,0 +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';\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 ADDED Viewed

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering Attachment
+ */ export { };

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

@@ -0,0 +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 = Omit<ComponentProps<Partial<AttachmentSlots>>, 'content'> &\n Pick<Partial<AttachmentSlots>, 'content'> &\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":"AAgEA;;CAEC,GACD,WAKI"}

package/lib/components/Attachment/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { Attachment } from './Attachment';
+export { renderAttachment_unstable } from './renderAttachment';
+export { useAttachment_unstable } from './useAttachment';
+export { attachmentClassNames, useAttachmentStyles_unstable, useOverflowStyles } from './useAttachmentStyles.styles';

package/lib/components/Attachment/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { Attachment } from './Attachment';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment.types';\nexport { renderAttachment_unstable } from './renderAttachment';\nexport { useAttachment_unstable } from './useAttachment';\nexport { attachmentClassNames, useAttachmentStyles_unstable, useOverflowStyles } from './useAttachmentStyles.styles';\n"],"names":["Attachment","renderAttachment_unstable","useAttachment_unstable","attachmentClassNames","useAttachmentStyles_unstable","useOverflowStyles"],"rangeMappings":";;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,EAAEC,iBAAiB,QAAQ,+BAA+B"}

package/lib/components/Attachment/renderAttachment.js ADDED Viewed

@@ -0,0 +1,42 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { OverflowItem, assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of Attachment
+ */ export const renderAttachment_unstable = (state)=>{
+    const { id, shouldUseOverflow, designVersion, dismissOnly } = state;
+    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, {})
+            })
+        ]
+    });
+};
+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, {})
+            ]
+        })
+    });
+};

package/lib/components/Attachment/renderAttachment.js.map ADDED Viewed

@@ -0,0 +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 { JSXElement } 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): JSXElement => {\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): JSXElement => {\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): JSXElement => {\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;AAIvE;;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 ADDED Viewed

@@ -0,0 +1,103 @@
+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.
+ *
+ * The returned state can be modified with hooks such as useAttachmentStyles_unstable,
+ * before being passed to renderAttachment_unstable.
+ *
+ * @param props - props from this instance of Attachment
+ * @param ref - reference to root HTMLElement of Attachment
+ */ export const useAttachment_unstable = (props, ref)=>{
+    const { children, imageOnly, size = 'medium', dismissOnly = false } = props;
+    const { onAttachmentDismiss, shouldUseOverflow } = 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,
+        id: attachmentId
+    }, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute
+    [
+        'content'
+    ]), {
+        elementType: 'div'
+    });
+    const primaryAction = slot.always(props.primaryAction, {
+        defaultProps: {
+            as: dismissOnly ? 'span' : undefined
+        },
+        elementType: 'button'
+    });
+    const dismissButton = slot.always(props.dismissButton, {
+        defaultProps: {
+            'aria-label': 'Remove attachment'
+        },
+        elementType: 'button'
+    });
+    dismissButton.onClick = mergeCallbacks(dismissButton.onClick, (ev)=>{
+        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            content: children,
+            media,
+            id: attachmentId
+        });
+    });
+    const media = slot.optional(props.media, {
+        elementType: 'span'
+    });
+    const content = slot.always(props.content, {
+        defaultProps: {
+            children: props.children
+        },
+        elementType: 'span'
+    });
+    const dismissIcon = slot.always(props.dismissIcon, {
+        defaultProps: {
+            children: size === 'small' ? /*#__PURE__*/ React.createElement(Dismiss12Regular, null) : /*#__PURE__*/ React.createElement(Dismiss20Regular, null)
+        },
+        elementType: 'span'
+    });
+    const progress = slot.optional(props.progress, {
+        defaultProps: {
+            shape: 'square',
+            thickness: 'large',
+            'aria-labelledby': props.id
+        },
+        elementType: ProgressBar
+    });
+    const state = {
+        id: attachmentId,
+        size,
+        components: {
+            root: 'div',
+            primaryAction: 'button',
+            dismissButton: 'button',
+            media: 'span',
+            content: 'span',
+            dismissIcon: 'span',
+            progress: ProgressBar
+        },
+        root,
+        primaryAction,
+        dismissButton,
+        media,
+        content,
+        dismissIcon,
+        progress,
+        imageOnly,
+        isLoading,
+        shouldUseOverflow,
+        mode,
+        designVersion,
+        dismissOnly
+    };
+    if (state.primaryAction.as === 'span') {
+        state.components.primaryAction = 'span';
+    }
+    return state;
+};

package/lib/components/Attachment/useAttachment.js.map ADDED Viewed

@@ -0,0 +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', 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(\n 'div',\n {\n ref,\n ...props,\n id: attachmentId,\n },\n // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n ['content'],\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,yBACE,OACA;QACEW;QACA,GAAGD,KAAK;QACRU,IAAID;IACN,GACA,qFAAqF;IACrF;QAAC;KAAU,GAEb;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"}