@fluentui-copilot/react-attachments 0.12.3 → 0.12.5

package/lib-commonjs/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":["children","props","isLoading","text","isOverflowing","components","ProgressBar","root","always","getIntrinsicElementProps","ref","useMergedRefs","overflowButtonRef","overflowCount","defaultProps","slot","progress","shape","thickness","processedText","designVersion","mode","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBUA;;;eAAAA;;;+BArBuC;iCAC0B;+CACjB;AAmBxD,MAAQA,2CAAmBC,CAAAA,OAAAA;UAC3B,EAGAD,QAAME,EAENC,IAAA,KACAF;UAEA,EACAG,aAAO,eACLC,mBACQ,iFACIC,EAAAA,CAAAA,UAAAA;UACZJ,YAAA,CAAA,CAAAD,MAAAC,SAAA;UACAK,gBAAWC,IAAAA,+BACTC,EAAAA,MAAAA,aAAyB;iBACvBC,IAAAA,6BAAKC,EAAAA,MAAmBC,IAAAA;0BAChBZ,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAG,SAAA,aAAAA,KAAAU,iBAAAV;WACV;oBACEW;;sBAA+DR,4BAAA;;cAAyBS,qBAAA,CAAAP,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBAE5FO,IAAAA,8BAAeR,EAAAA,KAAOP;oBACpBa;;0BAAkCG;0BAAiBC,kBAAW,QAAAC,kBAAA,KAAA,IAAAA,gBAAA,CAAA,CAAA,EAAAN,cAAA,CAAA;;yBAAiC;;kBAEjGE,qBAAA,CAAAP,MAAA,CAAAP,MAAAe,QAAA,EAAA;0BACAZ;gBACAS,OAAAA;gBACAX,OAAAA;gBACAkB,WAAAA;gBACAC,cAAAA;YACF;YACAC,aAAAhB,4BAAA"}
+{"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":["isOverflowing","overflowButtonRef","useAttachmentOverflowMenuContext_unstable","fullyOverflowed","overflowCount","isLoading","designVersion","context","numberOfAttachments","progress","ProgressBar","useDesignVersion","props","root","slot","getIntrinsicElementProps","useMergedRefs","defaultProps","children","buttonText","elementType","ref","value","shape","mode","defaultButtonText","copilotMode","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;+BAE0B;iCAC0B;+CACjB;4BAKT;uCACC;AAehD,MAAQA,2CAA8BC,CAAAA,OAAsBC;UAG5D,EAEAF,aAAMG,EACNC,aAAMC,EAENJ,iBAAMK,KACNJ,IAAAA,wEAAsC,EAAAK,CAAAA,UAAAA;UAEtC,EAEAC,mBAAO,iEACO,EAAAD,CAAAA,UAAAA;4BACJH,iBAAAI;sBACNC,CAAAA,CAAUC,MAAAA,SAAAA;UACZJ,gBAAAK,IAAAA,+BAAA,EAAAC,MAAAN,aAAA;UACAO,OAAMC,IAAAA,6BACJC,EAAAA,MAAAA,IAAAA;uBACOC,kBAAmBf,OAAAA,eAAAA,eAAAA,MAAAA;;oBAG1B;kBACEgB;sBACEC,4BAAUC;;mCAEZC,CAAAA,MAAAA,CAAAA,IAAAA,yCAAa,EAAA,UAAA;iBACfJ,IAAAA,8BAAA,EAAAK,KAAApB;eAEFQ,KAAAA;;0BACkBa;0BAAkBC;;yBAAqC;;kBACvEH,qBAAAA,CAAAA,MAAaV,CAAAA,MAAAA,QAAAA,EAAAA;0BACf;gBACAP,OAAAA;gBACAH,OAAAA;gBACAI,WAAAA;gBACAC,cAAAA;;yBAEAmB,4BAAAA;QACF;QACArB;QAEFH;QAOEI;;QAEAE;QAEAkB;;;SAGEC,kBAAOb,KAAA,EAAAR,aAAA,EAAAE,aAAA,EAAAoB,WAAA,EAAAvB,eAAA;cACLe,QAAON,EAAAA;eACTA,MAAAM,QAAA;;QAGFN,MAAIN,IAAAA,EAAAA;YACF,OAAAM,MAAAe,IAAA,KACE,YAAA;YAKJ,OAAAf,MAAAe,IAAA,CAAAvB;QAEA,OAAO;YACT,OAAAQ,MAAAe,IAAA"}

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

@@ -39,23 +39,16 @@ const useNextStyles = (0, _reactcomponents.__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",
@@ -79,6 +72,28 @@ const useNextStyles = (0, _reactcomponents.__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: [
@@ -88,12 +103,10 @@ const useNextStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
-        [
-            ".f3bhgqh{border:none;}",
-            {
-                p: -2
-            }
-        ],
+        ".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;}",
@@ -109,7 +122,25 @@ const useNextStyles = (0, _reactcomponents.__styles)({
             {
                 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;}",
@@ -123,11 +154,11 @@ const useNextStyles = (0, _reactcomponents.__styles)({
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
     'use no memo';
-    const { designVersion, mode } = state;
+    const { designVersion, mode, fullyOverflowed } = state;
     const rootBaseClassName = useRootBaseClassName();
     const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
     const nextStyles = useNextStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], state.root.className);
+    state.root.className = (0, _reactcomponents.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 = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
         const bar = _reactcomponents.slot.optional(state.progress.bar, {

package/lib-commonjs/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":["attachmentOverflowMenuButtonClassNames","nextStyles","useNextStyles","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","borderRadius","boxSizing","columnGap","cursor","display","flexWrap","fontFamily","fontSize","fontWeight","justifyContent","padding","verticalAlign","position","ibv6hh","backgroundColor","Bekrc4i","i8vvqc","B4j52fo","irswps","ecr2s2","canvas","sidecar","p","a","state","bar","rootBaseClassName","progressBarStyles","useProgressBarStyles","className","mergeClasses","indeterminateProgressBar","designVersion","mode","slot","optional","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAiFLC,8CAAaC;eAAbD;;;iCA1FkE;4CAErC;AAO9B,MAAMD,yCAA4F;UACvGG;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;QACAC,SAAAA;QACAC,SAAAA;QACAC,QAAAA;QACAC,SAAAA;QACAC,SAAS;QACTC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;gBACEV;gBACAW;gBACAlB;QACFmB,SAAA;QACAC,QAAA;gBACEF;gBACAlB;QACFqB,SAAA;QACAC,QAAA;gBACE;gBACEJ;gBACF;iBACA;gBACEA;gBACF;QACFK,QAAA;IACF;IAEAC,QAAM7B;QACJC,QAAM;iBACJQ;gBACAF;gBACAF;gBACAkB;iBACA;;;gBAGEA;iBACF;gBACA;gBACElB;gBACAkB;iBACF;;;;;;YAGW;oBACXJ;;SACF;QAAA;YAAA;YAAA;gBACAW,GAAAA,CAAAA;;;;QACa;QAAA;QAAA;YAAA;YAAA;oBACXX;;SACF;QAAA;QAAA;YAAA;YAAA;gBACFY,GAAA,CAAA;YAEA;SAAA;KAAA;;;;;;IAECC,GACD;QAAA;QACEC;KAAAA;;AAQA,MAAMlC,iDAAaC,CAAAA;;UAWjBiC,eAMMC;UAAoFC,oBAAAhC;UAC1FiC,oBAASC,IAAAA,gDAAA;uBACHJ;wBACEK,GAAAA,IAAAA,6BAAYC,EAAAA,uCAA+BC,IAAAA,EAAAA,mBAAuCC,kBAAA,UAAA1C,WAAAE,IAAA,EAAAwC,kBAAA,UAAA1C,UAAA,CAAA2C,KAAA,EAAAT,MAAAhC,IAAA,CAAAqC,SAAA;cACxFpC,QAAO,EAAA;sBACLgC,CAAAA,SAAII,GAASC,IAAAA,6BAAGA,EAAAA,uCAAmDL,QAAII,EAAAA,kBAASpC,QAAA,EAAA+B,MAAA/B,QAAA,CAAAoC,SAAA;oBAClFK,qBAAA,CAAAC,QAAA,CAAAX,MAAA/B,QAAA,CAAAgC,GAAA,EAAA;yBACMhC;6BACR;QACF;QAEA,IAAAgC,KAAOD;YACP,IAAAA,MAAA/B,QAAA,CAAA2C,KAAA,KAAAC,WAAA"}
+{"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":["attachmentOverflowMenuButtonClassNames","state","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","borderRadius","boxSizing","columnGap","cursor","display","flexWrap","fontFamily","fontSize","typographyStyles","body1","fontWeight","justifyContent","padding","verticalAlign","position","Bi91k9c","backgroundColor","uwmqm3","z189sj","z8tnut","useNextStyles","borderColor","Byoj8tv","canvas","minHeight","B0ocmuz","sidecar","Bg96gwp","p","fullyOverflowed_sidecar","body1Strong","fullyOverflowed","className","progressBarStyles","bar","mergeClasses","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAqGTC,8CACED;eADFC;;;iCA9GgE;4CAE/B;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;QACAC,QAAAA;QACAC,QAAAA;YAAAA;YAAUC;SAAiBC;QAC3BC,SAAAA;QACAC,QAAAA;YAAAA;YAAgB;SAAA;QAChBC,QAAAA;QACAC,QAAAA;QACAC,QAAAA;QAEAC,SAAA;gBACEZ;gBACAa;gBACApB;;YAEF;gBACEoB;iBACApB;QACFqB,QAAA;QACAC,QAAA;gBACE;iBACEF;;aAEF;gBACEA;iBACF;QACFC,QAAA;QACFC,QAAA;QAEAC,QAAMC;QACJ5B,SAAM;;4BAEU6B;iBACdzB;gBACAoB;gBACA;gBACEb;iBACAP;iBACAoB;iBACF;iBACA;iBACEpB;;6BAEF;QACF0B,SAAA;QACAC,QAAQ;gBACNC;gBACAZ;QACFa,SAAA;QACAC,SAAS;iBACPF;iBACAZ;QACFe,SAAA;;;;;;YAG+B;gBAC/BC,GAAA,CAAA;;SACAC;QAAAA;QAAyB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACvBjB;;;;QACoBkB;YAAAA;YAAW;gBACjCF,GAAA,CAAA;YACF;SAAA;QAAA;YAAA;YAAA;gBAEAA,GAAA,CAAA;;;;;;;;;;gBAGAA,GAAA,CAAA;;SAGE;QAAA;QAAA;KAAA;OAEA;QAAA;QAA6BG;QAAoBxC;KAAAA;OAEjD;QAAA;QAA0BG;KAAAA;;MAcxBH,iDACED,CAAAA;;yBAKwF,MAC1F,iBACMC;8BAEGG;8BACDsC,IAAAA,gDAAyBC;uBAC/Bb;cACA7B,CAAAA,SAAME,GAAAA,IAAAA,6BAAeyC,EAAAA,uCAAAA,IAAAA,EAAAA,mBAAAA,kBAAAA,UAAAA,WAAAA,IAAAA,EAAAA,kBAAAA,UAAAA,UAAAA,CAAAA,KAAAA,EAAAA,kBAAAA,UAAAA,mBAAAA,UAAAA,CAAAA,CAAAA,gBAAAA,EAAAA,KAAAA,CAAAA,CAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;cACvBzC,QAAA,EAAA;QACFF,MAAAE,QAAA,CAAAuC,SAAA,GAAAG,IAAAA,6BAAA,EAAA7C,uCAAAG,QAAA,EAAAwC,kBAAAxC,QAAA,EAAAF,MAAAE,QAAA,CAAAuC,SAAA;QAEA,MAAAE,MAAO3C,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,QAAAA,CAAAA,GAAAA,EAAAA;YACP6C,aAAA"}

package/lib-commonjs/contexts/attachmentListContext.js

@@ -23,7 +23,8 @@ const _reactcontextselector = require("@fluentui/react-context-selector");
 const AttachmentListContext = (0, _reactcontextselector.createContext)(undefined);
 const attachmentListContextDefaultValue = {
     onAttachmentDismiss: ()=>null,
-    shouldUseOverflow: false
+    shouldUseOverflow: false,
+    numberOfAttachments: 0
 };
 const AttachmentListProvider = AttachmentListContext.Provider;
 const useAttachmentListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(AttachmentListContext, (ctx = attachmentListContextDefaultValue)=>selector(ctx)); //# sourceMappingURL=attachmentListContext.js.map

package/lib-commonjs/contexts/attachmentListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["attachmentListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AttachmentListState } from '../components/index';\n\nexport const AttachmentListContext: Context<AttachmentListContextValue> = createContext<\n  AttachmentListContextValue | undefined\n>(undefined) as Context<AttachmentListContextValue>;\n\nconst attachmentListContextDefaultValue: AttachmentListContextValue = {\n  onAttachmentDismiss: () => null,\n  shouldUseOverflow: false,\n};\n\n/**\n * Context shared between AttachmentList and its children components\n */\nexport type AttachmentListContextValue = Pick<AttachmentListState, 'onAttachmentDismiss' | 'shouldUseOverflow'>;\n\nexport const AttachmentListProvider = AttachmentListContext.Provider;\n\nexport const useAttachmentListContext_unstable = <T>(selector: ContextSelector<AttachmentListContextValue, T>) =>\n  useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));\n"],"names":["AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","createContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","shouldUseOverflow","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,qBAAAA;eAAAA;;IAcAC,sBAAAA;eAAAA;;IAEAC,iCAAAA;eAAAA;;;sCApBqC;AAI3C,MAAMF,wBAA6DG,IAAAA,mCAAAA,EAExEC;AAEF,MAAMC,oCAAgE;yBACpEC,IAA2B;uBAC3BC;AACF;AAOO,MAAMN,yBAAyBD,sBAAsBQ,QAAQ;AAE7D,MAAMN,oCAAoCO,CAAAA,WAC/CC,IAAAA,wCAAAA,EAAmBV,uBAAuB,CAACW,MAAMN,iCAAiC,GAAKI,SAASE"}
+{"version":3,"sources":["attachmentListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { AttachmentListState } from '../components/index';\n\nexport const AttachmentListContext: Context<AttachmentListContextValue> = createContext<\n  AttachmentListContextValue | undefined\n>(undefined) as Context<AttachmentListContextValue>;\n\nconst attachmentListContextDefaultValue: AttachmentListContextValue = {\n  onAttachmentDismiss: () => null,\n  shouldUseOverflow: false,\n  numberOfAttachments: 0,\n};\n\n/**\n * Context shared between AttachmentList and its children components\n */\nexport type AttachmentListContextValue = Pick<\n  AttachmentListState,\n  'onAttachmentDismiss' | 'shouldUseOverflow' | 'numberOfAttachments'\n>;\n\nexport const AttachmentListProvider = AttachmentListContext.Provider;\n\nexport const useAttachmentListContext_unstable = <T>(selector: ContextSelector<AttachmentListContextValue, T>) =>\n  useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));\n"],"names":["AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","createContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","shouldUseOverflow","numberOfAttachments","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,qBAAAA;eAAAA;;IAkBAC,sBAAAA;eAAAA;;IAEAC,iCAAAA;eAAAA;;;sCAxBqC;AAI3C,MAAMF,wBAA6DG,IAAAA,mCAAAA,EAExEC;AAEF,MAAMC,oCAAgE;yBACpEC,IAA2B;uBAC3BC;yBACAC;AACF;AAUO,MAAMP,yBAAyBD,sBAAsBS,QAAQ;AAE7D,MAAMP,oCAAoCQ,CAAAA,WAC/CC,IAAAA,wCAAAA,EAAmBX,uBAAuB,CAACY,MAAMP,iCAAiC,GAAKK,SAASE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,17 +12,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "^0.11.2",
-    "@fluentui-copilot/react-utilities": "^0.0.7",
-    "@fluentui-copilot/tokens": "^0.3.10",
+    "@fluentui-copilot/react-provider": "^0.11.3",
+    "@fluentui-copilot/react-utilities": "^0.0.8",
+    "@fluentui-copilot/tokens": "^0.3.11",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@fluentui/keyboard-keys": ">=9.0.8 <10.0.0",
-    "@fluentui/react-components": ">=9.58.3 <10.0.0",
+    "@fluentui/react-components": ">=9.63.0 <10.0.0",
     "@fluentui/react-context-selector": ">=9.1.76 <10.0.0",
     "@fluentui/react-icons": ">=2.0.260 <3.0.0",
-    "@fluentui/react-jsx-runtime": ">=9.0.50 <10.0.0",
+    "@fluentui/react-jsx-runtime": ">=9.0.54 <10.0.0",
     "@fluentui/react-shared-contexts": ">=9.23.1 <10.0.0",
     "@fluentui/react-utilities": ">=9.19.0 <10.0.0",
     "@types/react": ">=16.14.0 <19.0.0",