@fluentui-copilot/react-attachments 0.12.3 → 0.12.5-hotfix.1

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -1,6 +1,9 @@
+import * as React from 'react';
 import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';
 import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';
 import { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';
+import { Attach20Regular, Attach24Regular } from '@fluentui/react-icons';
+import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
  * Create the state required to render AttachmentOverflowMenuButton.
  *
@@ -9,49 +12,58 @@ import { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attach
  *
  * @param props - props from this instance of AttachmentOverflowMenuButton
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton
- */
-export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
-  const {
-    children,
-    text
-  } = props;
-  const {
-    isOverflowing,
-    overflowCount,
-    overflowButtonRef
-  } = useAttachmentOverflowMenuContext_unstable(context => context);
-  const isLoading = !!props.isLoading;
-  const designVersion = useDesignVersion(props.designVersion);
-  const mode = useCopilotMode(props.mode);
-  const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
-  return {
-    components: {
-      root: 'button',
-      progress: ProgressBar
-    },
-    root: slot.always(getIntrinsicElementProps('button', {
-      ref: useMergedRefs(ref, overflowButtonRef),
-      ...props
-    }), {
-      defaultProps: {
-        children: processedText !== null && processedText !== void 0 ? processedText : `+${overflowCount}`
-      },
-      elementType: 'button'
-    }),
-    progress: slot.always(props.progress, {
-      defaultProps: {
-        value: undefined,
-        shape: 'square',
-        thickness: 'large',
-        'aria-label': 'Loading'
-      },
-      elementType: ProgressBar
-    }),
-    isOverflowing,
-    overflowCount,
-    isLoading,
-    designVersion,
-    mode
-  };
+ */ export const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
+    const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable((context)=>context);
+    const { numberOfAttachments } = useAttachmentListContext_unstable((context)=>context);
+    const fullyOverflowed = overflowCount >= numberOfAttachments;
+    const isLoading = !!props.isLoading;
+    const designVersion = useDesignVersion(props.designVersion);
+    const mode = useCopilotMode(props.mode);
+    const buttonText = defaultButtonText(props, overflowCount, designVersion, mode, fullyOverflowed);
+    return {
+        components: {
+            root: 'button',
+            progress: ProgressBar
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref: useMergedRefs(ref, overflowButtonRef),
+            ...props
+        }), {
+            defaultProps: {
+                children: buttonText
+            },
+            elementType: 'button'
+        }),
+        progress: slot.always(props.progress, {
+            defaultProps: {
+                value: undefined,
+                shape: 'square',
+                thickness: 'large',
+                'aria-label': 'Loading'
+            },
+            elementType: ProgressBar
+        }),
+        fullyOverflowed,
+        isOverflowing,
+        overflowCount,
+        isLoading,
+        designVersion,
+        mode
+    };
 };
-//# sourceMappingURL=useAttachmentOverflowMenuButton.js.map
+function defaultButtonText(props, overflowCount, designVersion, copilotMode, fullyOverflowed) {
+    if (props.children) {
+        return props.children;
+    }
+    if (props.text) {
+        if (typeof props.text === 'function') {
+            return props.text(overflowCount);
+        } else {
+            return props.text;
+        }
+    }
+    if (designVersion === 'next' && fullyOverflowed) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, copilotMode === 'canvas' ? /*#__PURE__*/ React.createElement(Attach24Regular, null) : /*#__PURE__*/ React.createElement(Attach20Regular, null), overflowCount);
+    }
+    return `+${overflowCount}`;
+}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { children, text } = props;\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const isLoading = !!props.isLoading;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { defaultProps: { children: processedText ?? `+${overflowCount}` }, elementType: 'button' },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    isOverflowing,\n    overflowCount,\n    isLoading,\n    designVersion,\n    mode,\n  };\n};\n"],"names":["useCopilotMode","useDesignVersion","ProgressBar","getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","children","text","isOverflowing","overflowCount","overflowButtonRef","context","isLoading","designVersion","mode","processedText","components","root","progress","always","defaultProps","elementType","value","undefined","shape","thickness"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,cAAc,EAAEC,gBAAgB,QAAQ,mCAAmC;AACpF,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AACxG,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAC3B,MAAM,EAAEI,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGR,0CAC1DS,CAAAA,UAAWA;IAEb,MAAMC,YAAY,CAAC,CAACR,MAAMQ,SAAS;IAEnC,MAAMC,gBAAgBhB,iBAAiBO,MAAMS,aAAa;IAC1D,MAAMC,OAAOlB,eAAeQ,MAAMU,IAAI;IAEtC,MAAMC,gBAAgBT,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKE,iBAAiBF;IACtF,OAAO;QACLS,YAAY;YACVC,MAAM;YACNC,UAAUpB;QACZ;QACAmB,MAAMjB,KAAKmB,MAAM,CACfpB,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKK;YACxB,GAAGN,KAAK;QACV,IACA;YAAEgB,cAAc;gBAAEd,UAAUS,0BAAAA,2BAAAA,gBAAiB,CAAC,CAAC,EAAEN,cAAc,CAAC;YAAC;YAAGY,aAAa;QAAS;QAE5FH,UAAUlB,KAAKmB,MAAM,CAACf,MAAMc,QAAQ,EAAE;YACpCE,cAAc;gBAAEE,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FJ,aAAavB;QACf;QACAU;QACAC;QACAG;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport { Attach20Regular, Attach24Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const { numberOfAttachments } = useAttachmentListContext_unstable(context => context);\n\n  const fullyOverflowed = overflowCount >= numberOfAttachments;\n  const isLoading = !!props.isLoading;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const buttonText = defaultButtonText(props, overflowCount, designVersion, mode, fullyOverflowed);\n\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      {\n        defaultProps: {\n          children: buttonText,\n        },\n        elementType: 'button',\n      },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    fullyOverflowed,\n    isOverflowing,\n    overflowCount,\n    isLoading,\n    designVersion,\n    mode,\n  };\n};\n\nfunction defaultButtonText(\n  props: AttachmentOverflowMenuButtonProps,\n  overflowCount: number,\n  designVersion: DesignVersion['designVersion'],\n  copilotMode: CopilotMode['mode'],\n  fullyOverflowed: boolean,\n) {\n  if (props.children) {\n    return props.children;\n  }\n\n  if (props.text) {\n    if (typeof props.text === 'function') {\n      return props.text(overflowCount);\n    } else {\n      return props.text;\n    }\n  }\n\n  if (designVersion === 'next' && fullyOverflowed) {\n    return (\n      <>\n        {copilotMode === 'canvas' ? <Attach24Regular /> : <Attach20Regular />}\n        {overflowCount}\n      </>\n    );\n  }\n\n  return `+${overflowCount}`;\n}\n"],"names":["React","useCopilotMode","useDesignVersion","ProgressBar","getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","Attach20Regular","Attach24Regular","useAttachmentListContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","isOverflowing","overflowCount","overflowButtonRef","context","numberOfAttachments","fullyOverflowed","isLoading","designVersion","mode","buttonText","defaultButtonText","components","root","progress","always","defaultProps","children","elementType","value","undefined","shape","thickness","copilotMode","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,mCAAmC;AACpF,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AACxG,SAASC,yCAAyC,QAAQ,+CAA+C;AAKzG,SAASC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACzE,SAASC,iCAAiC,QAAQ,uCAAuC;AAEzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGT,0CAC1DU,CAAAA,UAAWA;IAEb,MAAM,EAAEC,mBAAmB,EAAE,GAAGR,kCAAkCO,CAAAA,UAAWA;IAE7E,MAAME,kBAAkBJ,iBAAiBG;IACzC,MAAME,YAAY,CAAC,CAACR,MAAMQ,SAAS;IAEnC,MAAMC,gBAAgBnB,iBAAiBU,MAAMS,aAAa;IAC1D,MAAMC,OAAOrB,eAAeW,MAAMU,IAAI;IAEtC,MAAMC,aAAaC,kBAAkBZ,OAAOG,eAAeM,eAAeC,MAAMH;IAEhF,OAAO;QACLM,YAAY;YACVC,MAAM;YACNC,UAAUxB;QACZ;QACAuB,MAAMrB,KAAKuB,MAAM,CACfxB,yBAAyB,UAAU;YACjCS,KAAKP,cAAcO,KAAKG;YACxB,GAAGJ,KAAK;QACV,IACA;YACEiB,cAAc;gBACZC,UAAUP;YACZ;YACAQ,aAAa;QACf;QAEFJ,UAAUtB,KAAKuB,MAAM,CAAChB,MAAMe,QAAQ,EAAE;YACpCE,cAAc;gBAAEG,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FJ,aAAa5B;QACf;QACAgB;QACAL;QACAC;QACAK;QACAC;QACAC;IACF;AACF,EAAE;AAEF,SAASE,kBACPZ,KAAwC,EACxCG,aAAqB,EACrBM,aAA6C,EAC7Ce,WAAgC,EAChCjB,eAAwB;IAExB,IAAIP,MAAMkB,QAAQ,EAAE;QAClB,OAAOlB,MAAMkB,QAAQ;IACvB;IAEA,IAAIlB,MAAMyB,IAAI,EAAE;QACd,IAAI,OAAOzB,MAAMyB,IAAI,KAAK,YAAY;YACpC,OAAOzB,MAAMyB,IAAI,CAACtB;QACpB,OAAO;YACL,OAAOH,MAAMyB,IAAI;QACnB;IACF;IAEA,IAAIhB,kBAAkB,UAAUF,iBAAiB;QAC/C,qBACE,0CACGiB,gBAAgB,yBAAW,oBAAC3B,uCAAqB,oBAACD,wBAClDO;IAGP;IAEA,OAAO,CAAC,CAAC,EAAEA,cAAc,CAAC;AAC5B"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js

@@ -1,5 +1,5 @@
-import { __resetStyles, __styles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';
-import { tokens } from '@fluentui-copilot/tokens';
+import { __resetStyles, __styles, mergeClasses, shorthands, slot } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
 import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
 export const attachmentOverflowMenuButtonClassNames = {
   root: 'fai-AttachmentOverflowMenuButton',
@@ -16,23 +16,10 @@ const useNextStyles = __styles({
     Btl43ni: 0,
     B7oj6ja: 0,
     Dimara: "f1kijzfu",
-    Bgfg5da: 0,
-    B9xav0g: 0,
-    oivjwe: 0,
-    Bn0qgzm: 0,
-    B4g9neb: 0,
-    zhjwy3: 0,
-    wvpqe5: 0,
-    ibv6hh: 0,
-    u1mtju: 0,
-    h3c5rm: 0,
-    vrafjx: 0,
-    Bekrc4i: 0,
-    i8vvqc: 0,
-    g2u3we: 0,
-    icvyot: 0,
-    B4j52fo: 0,
-    irswps: "f3bhgqh",
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
     sj55zd: "fkfq4zb",
     De3pzq: "f16xq7d1",
     eoavqd: "f8491dx",
@@ -56,17 +43,41 @@ const useNextStyles = __styles({
     z189sj: 0,
     z8tnut: 0,
     B0ocmuz: "f1nm7172"
+  },
+  fullyOverflowed_canvas: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fuva4e2",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1anucx2"
+  },
+  fullyOverflowed_sidecar: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "ffysxzw",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi"
   }
 }, {
   d: [[".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
     p: -1
-  }], [".f3bhgqh{border:none;}", {
-    p: -2
-  }], ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f1w5jphr{min-height:40px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
+  }], ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f1w5jphr{min-height:40px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
     p: -1
   }], ".f1nxs5xn{min-height:32px;}", [".f1nm7172{padding:var(--spacingVerticalNone) var(--spacingHorizontalS);}", {
     p: -1
-  }]],
+  }], [".fuva4e2{padding:var(--spacingVerticalNone) var(--spacingHorizontalL);}", {
+    p: -1
+  }], ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1anucx2{line-height:var(--lineHeightBase450);}", [".ffysxzw{padding:var(--spacingVerticalNone) var(--spacingHorizontalM);}", {
+    p: -1
+  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"],
   h: [".f8491dx:hover{cursor:pointer;}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}"],
   a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}"]
 });
@@ -78,12 +89,13 @@ export const useAttachmentOverflowMenuButtonStyles_unstable = state => {
 
   const {
     designVersion,
-    mode
+    mode,
+    fullyOverflowed
   } = state;
   const rootBaseClassName = useRootBaseClassName();
   const progressBarStyles = useProgressBarStyles();
   const nextStyles = useNextStyles();
-  state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], state.root.className);
+  state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`], state.root.className);
   if (state.progress) {
     state.progress.className = mergeClasses(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
     const bar = slot.optional(state.progress.bar, {

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\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  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\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\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    border: 'none',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const { designVersion, mode } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.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":["makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC/G,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,oBAAoB,QAAQ,uCAAuC;AAO5E,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBV,gBAAgB;IAC3CW,OAAON,OAAOO,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBT,OAAOU,qBAAqB;IAC7CC,QAAQ,CAAC,EAAEX,OAAOY,eAAe,CAAC,OAAO,EAAEZ,OAAOa,mBAAmB,CAAC,CAAC;IACvEC,cAAcd,OAAOe,kBAAkB;IACvCC,WAAW;IACXC,WAAWjB,OAAOkB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYvB,iBAAiBwB,KAAK,CAACD,UAAU;IAC7CE,UAAUzB,iBAAiBwB,KAAK,CAACC,QAAQ;IACzCC,YAAY1B,iBAAiBwB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS,CAAC,EAAE3B,OAAO4B,iBAAiB,CAAC,CAAC,EAAE5B,OAAO6B,kBAAkB,CAAC,CAAC;IACnEC,eAAe;IACfC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBT,OAAOgC,0BAA0B;QAClD1B,OAAON,OAAOiC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBT,OAAOkC,4BAA4B;QACpD5B,OAAON,OAAOmC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA,MAAM2B,gBAAgBxC,WAAW;IAC/BO,MAAM;QACJW,cAAcd,OAAOqC,kBAAkB;QACvC1B,QAAQ;QACRL,OAAON,OAAOsC,uBAAuB;QACrC7B,iBAAiBT,OAAOuC,uBAAuB;QAC/C,UAAU;YACRpB,QAAQ;YACRb,OAAON,OAAOiC,4BAA4B;YAC1CxB,iBAAiBT,OAAOwC,4BAA4B;QACtD;QACA,WAAW;YACTlC,OAAON,OAAOmC,8BAA8B;YAC5C1B,iBAAiBT,OAAOyC,8BAA8B;QACxD;IACF;IACAC,QAAQ;QACNC,WAAW;QACXhB,SAAS,CAAC,EAAE3B,OAAO4C,mBAAmB,CAAC,CAAC,EAAE5C,OAAO6B,kBAAkB,CAAC,CAAC;IACvE;IACAgB,SAAS;QACPF,WAAW;QACXhB,SAAS,CAAC,EAAE3B,OAAO4C,mBAAmB,CAAC,CAAC,EAAE5C,OAAO6B,kBAAkB,CAAC,CAAC;IACvE;AACF;AAEA;;CAEC,GACD,OAAO,MAAMiB,iDAAiD,CAC5DC;IAEA;IAEA,MAAM,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGF;IAEhC,MAAMG,oBAAoB7C;IAC1B,MAAM8C,oBAAoBlD;IAC1B,MAAMmD,aAAahB;IAEnBW,MAAM5C,IAAI,CAACkD,SAAS,GAAGxD,aACrBK,uCAAuCC,IAAI,EAC3C+C,mBACAF,kBAAkB,UAAUI,WAAWjD,IAAI,EAC3C6C,kBAAkB,UAAUI,UAAU,CAACH,KAAK,EAC5CF,MAAM5C,IAAI,CAACkD,SAAS;IAGtB,IAAIN,MAAM3C,QAAQ,EAAE;QAClB2C,MAAM3C,QAAQ,CAACiD,SAAS,GAAGxD,aACzBK,uCAAuCE,QAAQ,EAC/C+C,kBAAkB/C,QAAQ,EAC1B2C,MAAM3C,QAAQ,CAACiD,SAAS;QAG1B,MAAMC,MAAMxD,KAAKyD,QAAQ,CAACR,MAAM3C,QAAQ,CAACkD,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIP,MAAM3C,QAAQ,CAACsD,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAGxD,aAAasD,kBAAkBS,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAGxD,aAAasD,kBAAkBU,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAN,MAAM3C,QAAQ,CAACkD,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOP;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\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  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\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\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  fullyOverflowed_canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,\n    ...typographyStyles.subtitle2,\n  },\n  fullyOverflowed_sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,\n    ...typographyStyles.body1Strong,\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const { designVersion, mode, fullyOverflowed } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`],\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.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":["makeResetStyles","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","borderColor","colorTransparentStroke","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","fullyOverflowed_canvas","spacingHorizontalL","subtitle2","fullyOverflowed_sidecar","spacingHorizontalM","body1Strong","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","fullyOverflowed","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js

@@ -0,0 +1,102 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';
+import { tokens, typographyStyles } from '@fluentui-copilot/tokens';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+export const attachmentOverflowMenuButtonClassNames = {
+    root: 'fai-AttachmentOverflowMenuButton',
+    progress: 'fai-AttachmentOverflowMenuButton__progress'
+};
+const useRootBaseClassName = makeResetStyles({
+    color: tokens.colorNeutralForeground1,
+    alignItems: 'center',
+    backgroundColor: tokens.colorSubtleBackground,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    boxSizing: 'border-box',
+    columnGap: tokens.spacingHorizontalSNudge,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexWrap: 'nowrap',
+    fontFamily: typographyStyles.body1.fontFamily,
+    fontSize: typographyStyles.body1.fontSize,
+    fontWeight: typographyStyles.body1.fontWeight,
+    justifyContent: 'center',
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+    verticalAlign: 'middle',
+    position: 'relative',
+    ':hover': {
+        cursor: 'pointer',
+        backgroundColor: tokens.colorSubtleBackgroundHover,
+        color: tokens.colorNeutralForeground2Hover
+    },
+    ':active': {
+        backgroundColor: tokens.colorSubtleBackgroundPressed,
+        color: tokens.colorNeutralForeground2Pressed
+    },
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'HighlightText'
+        },
+        ':active': {
+            backgroundColor: 'HighlightText'
+        }
+    }
+});
+const useNextStyles = makeStyles({
+    root: {
+        borderRadius: tokens.borderRadiusXLarge,
+        ...shorthands.borderColor(tokens.colorTransparentStroke),
+        color: tokens.colorNeutralForeground2,
+        backgroundColor: tokens.colorNeutralBackground3,
+        ':hover': {
+            cursor: 'pointer',
+            color: tokens.colorNeutralForeground2Hover,
+            backgroundColor: tokens.colorNeutralBackground3Hover
+        },
+        ':active': {
+            color: tokens.colorNeutralForeground2Pressed,
+            backgroundColor: tokens.colorNeutralBackground3Pressed
+        }
+    },
+    canvas: {
+        minHeight: '40px',
+        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`
+    },
+    sidecar: {
+        minHeight: '32px',
+        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`
+    },
+    fullyOverflowed_canvas: {
+        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,
+        ...typographyStyles.subtitle2
+    },
+    fullyOverflowed_sidecar: {
+        padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,
+        ...typographyStyles.body1Strong
+    }
+});
+/**
+ * Apply styling to the AttachmentOverflowMenuButton slots based on the state
+ */ export const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { designVersion, mode, fullyOverflowed } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const progressBarStyles = useProgressBarStyles();
+    const nextStyles = useNextStyles();
+    state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`], state.root.className);
+    if (state.progress) {
+        state.progress.className = mergeClasses(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
+    return state;
+};

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\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  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\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\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  fullyOverflowed_canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,\n    ...typographyStyles.subtitle2,\n  },\n  fullyOverflowed_sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,\n    ...typographyStyles.body1Strong,\n  },\n});\n\n/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  'use no memo';\n\n  const { designVersion, mode, fullyOverflowed } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`],\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.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":["makeResetStyles","makeStyles","mergeClasses","shorthands","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalXS","spacingHorizontalS","verticalAlign","position","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useNextStyles","borderRadiusXLarge","borderColor","colorTransparentStroke","colorNeutralForeground2","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","canvas","minHeight","spacingVerticalNone","sidecar","fullyOverflowed_canvas","spacingHorizontalL","subtitle2","fullyOverflowed_sidecar","spacingHorizontalM","body1Strong","useAttachmentOverflowMenuButtonStyles_unstable","state","designVersion","mode","fullyOverflowed","rootBaseClassName","progressBarStyles","nextStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';
 import { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';
 import { useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';
-export const AttachmentOverflowMenuItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAttachmentOverflowMenuItem_unstable(props, ref);
-  useAttachmentOverflowMenuItemStyles_unstable(state);
-  return renderAttachmentOverflowMenuItem_unstable(state);
+export const AttachmentOverflowMenuItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAttachmentOverflowMenuItem_unstable(props, ref);
+    useAttachmentOverflowMenuItemStyles_unstable(state);
+    return renderAttachmentOverflowMenuItem_unstable(state);
 });
 AttachmentOverflowMenuItem.displayName = 'AttachmentOverflowMenuItem';
-//# sourceMappingURL=AttachmentOverflowMenuItem.js.map

package/lib/components/AttachmentOverflowMenuItem/AttachmentOverflowMenuItem.types.js

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

package/lib/components/AttachmentOverflowMenuItem/index.js

@@ -2,4 +2,3 @@ export { AttachmentOverflowMenuItem } from './AttachmentOverflowMenuItem';
 export { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';
 export { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';
 export { attachmentOverflowMenuItemClassNames, useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of AttachmentOverflowMenuItem
- */
-export const renderAttachmentOverflowMenuItem_unstable = state => {
-  assertSlots(state);
-  return !state.isVisible ? /*#__PURE__*/_jsxs(state.root, {
-    children: [state.root.children, state.progress && /*#__PURE__*/_jsx(state.progress, {})]
-  }) : null;
+ */ export const renderAttachmentOverflowMenuItem_unstable = (state)=>{
+    assertSlots(state);
+    return !state.isVisible ? /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.progress && /*#__PURE__*/ _jsx(state.progress, {})
+        ]
+    }) : null;
 };
-//# sourceMappingURL=renderAttachmentOverflowMenuItem.js.map

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -11,54 +11,46 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
  *
  * @param props - props from this instance of AttachmentOverflowMenuItem
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem
- */
-export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
-  'use no memo';
-
-  const {
-    imageOnly,
-    media
-  } = props;
-  const menuItemId = useId('attachment-', props.id);
-  const isVisible = useIsOverflowItemVisible(menuItemId);
-  const {
-    onAttachmentDismiss
-  } = useAttachmentListContext_unstable(context => context);
-  const designVersion = useDesignVersion(props.designVersion);
-  const root = slot.always({
-    ref,
-    icon: media,
-    secondaryContent: /*#__PURE__*/React.createElement(Dismiss20Regular, null),
-    ...props,
-    id: menuItemId
-  }, {
-    elementType: MenuItem
-  });
-  root.onClick = mergeCallbacks(root.onClick, ev => {
-    onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-      content: props.children,
-      media,
-      id: menuItemId
+ */ export const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
+    'use no memo';
+    const { imageOnly, media } = props;
+    const menuItemId = useId('attachment-', props.id);
+    const isVisible = useIsOverflowItemVisible(menuItemId);
+    const { onAttachmentDismiss } = useAttachmentListContext_unstable((context)=>context);
+    const designVersion = useDesignVersion(props.designVersion);
+    const root = slot.always({
+        ref,
+        icon: media,
+        secondaryContent: /*#__PURE__*/ React.createElement(Dismiss20Regular, null),
+        ...props,
+        id: menuItemId
+    }, {
+        elementType: MenuItem
     });
-  });
-  const progress = slot.optional(props.progress, {
-    defaultProps: {
-      shape: 'square',
-      thickness: 'large',
-      'aria-labelledby': props.id
-    },
-    elementType: ProgressBar
-  });
-  return {
-    components: {
-      root: MenuItem,
-      progress: ProgressBar
-    },
-    root,
-    progress,
-    isVisible,
-    imageOnly,
-    designVersion
-  };
+    root.onClick = mergeCallbacks(root.onClick, (ev)=>{
+        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            content: props.children,
+            media,
+            id: menuItemId
+        });
+    });
+    const progress = slot.optional(props.progress, {
+        defaultProps: {
+            shape: 'square',
+            thickness: 'large',
+            'aria-labelledby': props.id
+        },
+        elementType: ProgressBar
+    });
+    return {
+        components: {
+            root: MenuItem,
+            progress: ProgressBar
+        },
+        root,
+        progress,
+        isVisible,
+        imageOnly,
+        designVersion
+    };
 };
-//# sourceMappingURL=useAttachmentOverflowMenuItem.js.map

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js

@@ -0,0 +1,57 @@
+import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';
+export const attachmentOverflowMenuItemClassNames = {
+    root: 'fai-AttachmentOverflowMenuItem',
+    progress: 'fai-AttachmentOverflowMenuItem__progress'
+};
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+const useStyles = makeStyles({
+    imageOnly: {
+        alignItems: 'center'
+    },
+    secondaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+const useNextStyles = makeStyles({
+    nextStyles: {
+        [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
+            borderRadius: tokens.borderRadiusXLarge
+        },
+        outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
+    }
+});
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */ export const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { imageOnly, designVersion } = state;
+    const styles = useStyles();
+    const nextStyles = useNextStyles();
+    const progressBarStyles = useProgressBarStyles();
+    state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+    const secondaryContent = slot.optional(state.root.secondaryContent, {
+        elementType: 'span'
+    });
+    if (secondaryContent) {
+        secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);
+        state.root.secondaryContent = secondaryContent;
+    }
+    if (state.progress) {
+        state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
+    return state;
+};