@fluentui-copilot/react-attachments 0.0.0-nightly-20250717-0405-eecbae35.1 → 0.0.0-nightly-20250718-0405-8e705578.1

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

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentOverflowMenuItemClassNames: function() {
+        return attachmentOverflowMenuItemClassNames;
+    },
+    useAttachmentOverflowMenuItemStyles_unstable: function() {
+        return useAttachmentOverflowMenuItemStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
+const attachmentOverflowMenuItemClassNames = {
+    root: 'fai-AttachmentOverflowMenuItem',
+    progress: 'fai-AttachmentOverflowMenuItem__progress'
+};
+const FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';
+const useStyles = (0, _reactcomponents.makeStyles)({
+    imageOnly: {
+        alignItems: 'center'
+    },
+    secondaryContent: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+const useNextStyles = (0, _reactcomponents.makeStyles)({
+    nextStyles: {
+        [`[${FOCUS_VISIBLE_ATTR}]::after`]: {
+            borderRadius: _reactcomponents.tokens.borderRadiusXLarge
+        },
+        outline: `${_reactcomponents.tokens.strokeWidthThin} solid ${_reactcomponents.tokens.colorTransparentStroke}`
+    }
+});
+const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { imageOnly, designVersion } = state;
+    const styles = useStyles();
+    const nextStyles = useNextStyles();
+    const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, designVersion === 'next' && nextStyles.nextStyles, state.root.className);
+    const secondaryContent = _reactcomponents.slot.optional(state.root.secondaryContent, {
+        elementType: 'span'
+    });
+    if (secondaryContent) {
+        secondaryContent.className = (0, _reactcomponents.mergeClasses)(styles.secondaryContent, secondaryContent.className);
+        state.root.secondaryContent = secondaryContent;
+    }
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
+        const bar = _reactcomponents.slot.optional(state.progress.bar, {
+            elementType: 'div',
+            renderByDefault: true
+        });
+        if (bar) {
+            if (state.progress.value === undefined) {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.indeterminateProgressBar, bar.className);
+            } else {
+                bar.className = (0, _reactcomponents.mergeClasses)(progressBarStyles.regularProgressBar, bar.className);
+            }
+            state.progress.bar = bar;
+        }
+    }
+    return state;
+};

package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot, tokens } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst FOCUS_VISIBLE_ATTR = 'data-fui-focus-visible';\n\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\n  },\n  secondaryContent: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nconst useNextStyles = makeStyles({\n  nextStyles: {\n    [`[${FOCUS_VISIBLE_ATTR}]::after`]: {\n      borderRadius: tokens.borderRadiusXLarge,\n    },\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  },\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentOverflowMenuItemStyles_unstable = (\n  state: AttachmentOverflowMenuItemState,\n): AttachmentOverflowMenuItemState => {\n  'use no memo';\n\n  const { imageOnly, designVersion } = state;\n  const styles = useStyles();\n  const nextStyles = useNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    designVersion === 'next' && nextStyles.nextStyles,\n    state.root.className,\n  );\n\n  const secondaryContent = slot.optional(state.root.secondaryContent, {\n    elementType: 'span',\n  });\n  if (secondaryContent) {\n    secondaryContent.className = mergeClasses(styles.secondaryContent, secondaryContent.className);\n    state.root.secondaryContent = secondaryContent;\n  }\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.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":["attachmentOverflowMenuItemClassNames","useAttachmentOverflowMenuItemStyles_unstable","root","progress","FOCUS_VISIBLE_ATTR","useStyles","makeStyles","imageOnly","alignItems","secondaryContent","display","useNextStyles","nextStyles","borderRadius","tokens","borderRadiusXLarge","outline","strokeWidthThin","colorTransparentStroke","state","designVersion","styles","progressBarStyles","useProgressBarStyles","className","mergeClasses","slot","optional","elementType","bar","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IA6BAC,4CAAAA;eAAAA;;;iCArC0C;4CAClB;AAO9B,MAAMD,uCAAwF;IACnGE,MAAM;IACNC,UAAU;AACZ;AAEA,MAAMC,qBAAqB;AAE3B,MAAMC,YAAYC,IAAAA,2BAAAA,EAAW;IAC3BC,WAAW;QACTC,YAAY;IACd;IACAC,kBAAkB;QAChBC,SAAS;QACTF,YAAY;IACd;AACF;AAEA,MAAMG,gBAAgBL,IAAAA,2BAAAA,EAAW;IAC/BM,YAAY;QACV,CAAC,CAAC,CAAC,EAAER,mBAAmB,QAAQ,CAAC,CAAC,EAAE;YAClCS,cAAcC,uBAAAA,CAAOC,kBAAkB;QACzC;QACAC,SAAS,CAAC,EAAEF,uBAAAA,CAAOG,eAAe,CAAC,OAAO,EAAEH,uBAAAA,CAAOI,sBAAsB,CAAC,CAAC;IAC7E;AACF;AAKO,MAAMjB,+CAA+C,CAC1DkB;IAEA;IAEA,MAAM,EAAEZ,SAAS,EAAEa,aAAa,EAAE,GAAGD;IACrC,MAAME,SAAShB;IACf,MAAMO,aAAaD;IACnB,MAAMW,oBAAoBC,IAAAA,gDAAAA;IAE1BJ,MAAMjB,IAAI,CAACsB,SAAS,GAAGC,IAAAA,6BAAAA,EACrBzB,qCAAqCE,IAAI,EACzCK,aAAac,OAAOd,SAAS,EAC7Ba,kBAAkB,UAAUR,WAAWA,UAAU,EACjDO,MAAMjB,IAAI,CAACsB,SAAS;IAGtB,MAAMf,mBAAmBiB,qBAAAA,CAAKC,QAAQ,CAACR,MAAMjB,IAAI,CAACO,gBAAgB,EAAE;QAClEmB,aAAa;IACf;IACA,IAAInB,kBAAkB;QACpBA,iBAAiBe,SAAS,GAAGC,IAAAA,6BAAAA,EAAaJ,OAAOZ,gBAAgB,EAAEA,iBAAiBe,SAAS;QAC7FL,MAAMjB,IAAI,CAACO,gBAAgB,GAAGA;IAChC;IAEA,IAAIU,MAAMhB,QAAQ,EAAE;QAClBgB,MAAMhB,QAAQ,CAACqB,SAAS,GAAGC,IAAAA,6BAAAA,EACzBzB,qCAAqCG,QAAQ,EAC7CmB,kBAAkBnB,QAAQ,EAC1BgB,MAAMhB,QAAQ,CAACqB,SAAS;QAG1B,MAAMK,MAAMH,qBAAAA,CAAKC,QAAQ,CAACR,MAAMhB,QAAQ,CAAC0B,GAAG,EAAE;YAAED,aAAa;YAAOE,iBAAiB;QAAK;QAC1F,IAAID,KAAK;YACP,IAAIV,MAAMhB,QAAQ,CAAC4B,KAAK,KAAKC,WAAW;gBACtCH,IAAIL,SAAS,GAAGC,IAAAA,6BAAAA,EAAaH,kBAAkBW,wBAAwB,EAAEJ,IAAIL,SAAS;YACxF,OAAO;gBACLK,IAAIL,SAAS,GAAGC,IAAAA,6BAAAA,EAAaH,kBAAkBY,kBAAkB,EAAEL,IAAIL,SAAS;YAClF;YACAL,MAAMhB,QAAQ,CAAC0B,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOV;AACT"}

package/lib-commonjs/components/utils/useProgressBarStyles.styles.raw.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useProgressBarStyles", {
+    enumerable: true,
+    get: function() {
+        return useProgressBarStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const indeterminateProgressBarReducedMotion = {
+    '0%': {
+        opacity: '.2'
+    },
+    '50%': {
+        opacity: '1'
+    },
+    '100%': {
+        opacity: '.2'
+    }
+};
+const useProgressBarStyles = (0, _reactcomponents.makeStyles)({
+    progress: {
+        width: '100%',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '4px',
+        borderBottomLeftRadius: _tokens.tokens.borderRadiusMedium,
+        borderBottomRightRadius: _tokens.tokens.borderRadiusMedium
+    },
+    regularProgressBar: {
+        height: '100%',
+        backgroundImage: `linear-gradient(90deg, ${_tokens.tokens.colorBrandFlair1} 35%, ${_tokens.tokens.colorBrandFlair2} 70%, ${_tokens.tokens.colorBrandFlair3} 92%)`
+    },
+    indeterminateProgressBar: {
+        height: '100%',
+        backgroundColor: _tokens.tokens.colorTransparentBackground,
+        backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${_tokens.tokens.colorBrandFlair1} 35%, ${_tokens.tokens.colorBrandFlair2} 70%, ${_tokens.tokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            maxWidth: '100%',
+            animationIterationCount: 'infinite',
+            animationDuration: '3s',
+            animationName: indeterminateProgressBarReducedMotion
+        }
+    }
+});

package/lib-commonjs/components/utils/useProgressBarStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\n\nconst indeterminateProgressBarReducedMotion = {\n  '0%': {\n    opacity: '.2', // matches indeterminate bar width\n  },\n  '50%': {\n    opacity: '1',\n  },\n  '100%': {\n    opacity: '.2',\n  },\n};\n\n/**\n * @internal\n */\nexport const useProgressBarStyles = makeStyles({\n  progress: {\n    width: '100%',\n    position: 'absolute',\n    bottom: 0,\n    left: 0,\n    right: 0,\n    height: '4px',\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n  },\n  regularProgressBar: {\n    height: '100%',\n    backgroundImage: `linear-gradient(90deg, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%)`,\n  },\n  indeterminateProgressBar: {\n    height: '100%',\n    backgroundColor: tokens.colorTransparentBackground,\n    backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${tokens.colorBrandFlair1} 35%, ${tokens.colorBrandFlair2} 70%, ${tokens.colorBrandFlair3} 92%,  rgba(0,0,0,0))`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      maxWidth: '100%',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationName: indeterminateProgressBarReducedMotion,\n    },\n  },\n});\n"],"names":["useProgressBarStyles","indeterminateProgressBarReducedMotion","opacity","makeStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","tokens","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;iCAlBc;wBACJ;AAEvB,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAKO,MAAMF,uBAAuBG,IAAAA,2BAAAA,EAAW;IAC7CC,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBC,cAAAA,CAAOC,kBAAkB;QACjDC,yBAAyBF,cAAAA,CAAOC,kBAAkB;IACpD;IACAE,oBAAoB;QAClBL,QAAQ;QACRM,iBAAiB,CAAC,uBAAuB,EAAEJ,cAAAA,CAAOK,gBAAgB,CAAC,MAAM,EAAEL,cAAAA,CAAOM,gBAAgB,CAAC,MAAM,EAAEN,cAAAA,CAAOO,gBAAgB,CAAC,KAAK,CAAC;IAC3I;IACAC,0BAA0B;QACxBV,QAAQ;QACRW,iBAAiBT,cAAAA,CAAOU,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEJ,cAAAA,CAAOK,gBAAgB,CAAC,MAAM,EAAEL,cAAAA,CAAOM,gBAAgB,CAAC,MAAM,EAAEN,cAAAA,CAAOO,gBAAgB,CAAC,qBAAqB,CAAC;QAC3K,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAezB;QACjB;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.0.0-nightly-20250717-0405-eecbae35.1",
+  "version": "0.0.0-nightly-20250718-0405-8e705578.1",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,9 +12,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui-copilot/react-provider": "0.0.0-nightly-20250717-0405-eecbae35.1",
-    "@fluentui-copilot/react-utilities": "0.0.0-nightly-20250717-0405-eecbae35.1",
-    "@fluentui-copilot/tokens": "0.0.0-nightly-20250717-0405-eecbae35.1",
+    "@fluentui-copilot/react-provider": "0.0.0-nightly-20250718-0405-8e705578.1",
+    "@fluentui-copilot/react-utilities": "0.0.0-nightly-20250718-0405-8e705578.1",
+    "@fluentui-copilot/tokens": "0.0.0-nightly-20250718-0405-8e705578.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {