@fluentui-copilot/react-attachments 0.9.2 → 0.9.3

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

@@ -17,10 +17,11 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _useProgressBarStyles = require("../utils/useProgressBarStyles");
 const attachmentOverflowMenuItemClassNames = {
-    root: 'fai-AttachmentOverflowMenuItem'
+    root: 'fai-AttachmentOverflowMenuItem',
+    progress: 'fai-AttachmentOverflowMenuItem__progress'
 };
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r0", null, []);
 const useStyles = (0, _reactcomponents.__styles)({
     imageOnly: {
         Bt984gj: "f122n59"
@@ -32,8 +33,23 @@ const useStyles = (0, _reactcomponents.__styles)({
 });
 const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
     const { imageOnly } = state;
-    const rootBaseClassName = useRootBaseClassName();
     const styles = useStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, imageOnly && styles.imageOnly, state.root.className);
+    const progressBarStyles = (0, _useProgressBarStyles.useProgressBarStyles)();
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, state.root.className);
+    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;
 }; //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\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};\n\nconst useRootBaseClassName = makeResetStyles({});\nconst useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\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  const { imageOnly } = state;\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    rootBaseClassName,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuItemClassNames","styles","useStyles","root","useRootBaseClassName","makeResetStyles","makeStyles","imageOnly","alignItems","d","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,oCAAAA;eAAAA;;IAmBLC,4CAASC;eAATD;;;iCA1B0C;AAO3C,MAAMD,uCAAwF;UACnGG;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,MAAiB,MAAA,EAAA;AAC9C,MAAMH,YAAYI,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;AAEJ,GAAA;IAEAC,GAAA;QAAA;KAAA;;AAQE,MAAMR,+CAASC,CAAAA;UAEfQ,EAOAH,SAAOG,EACP,GAAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\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 useStyles = makeStyles({\n  imageOnly: {\n    alignItems: 'center',\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  const { imageOnly } = state;\n  const styles = useStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    state.root.className,\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","progressBarStyles","useProgressBarStyles","root","progress","useStyles","makeStyles","imageOnly","alignItems","d","state","styles","bar","renderByDefault","className","mergeClasses","undefined","indeterminateProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IAmBLC,4CAAoBC;eAApBD;;;iCA3B+B;sCACF;AAO9B,MAAMD,uCAAwF;UACnGG;cACAC;AACF;AAEA,MAAMC,YAAYC,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;AAEJ,GAAA;IAEAC,GAAA;QAAA;KAAA;;AAQE,MAAMR,+CAAoBC,CAAAA;UAE1BQ,EAMAH,SAAIG;UAOFC,SAAMC;8BAAuDV,IAAAA,0CAAA;cAAOW,CAAAA,SAAAA,GAAAA,IAAAA,6BAAiB,EAAAb,qCAAAG,IAAA,EAAAI,aAAAI,OAAAJ,SAAA,EAAAG,MAAAP,IAAA,CAAAW,SAAA;cAAKV,QAAA,EAAA;cAC1FA,QAAS,CAAAU,SAAA,GAAAC,IAAAA,6BAAA,EAAAf,qCAAAI,QAAA,EAAAH,kBAAAG,QAAA,EAAAM,MAAAN,QAAA,CAAAU,SAAA;oBACHJ,qBAAAA,CAAAA,QAAMN,CAAQM,MAAMN,QAAKY,CAAAA,GAAAA,EAAAA;yBAC3BJ;6BACK;;iBAEP;sBACAF,QAAMN,CAAAA,KAAY,KAAGQ,WAAAA;gBACvBA,IAAAE,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,kBAAAgB,wBAAA,EAAAL,IAAAE,SAAA;YACF,OAAA;gBAEAF,IAAOF,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,kBAAAA,kBAAAA,EAAAA,IAAAA,SAAAA;YACP"}

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

@@ -0,0 +1,103 @@
+"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 indeterminateProgressBarReducedMotion = {
+    '0%': {
+        opacity: '.2'
+    },
+    '50%': {
+        opacity: '1'
+    },
+    '100%': {
+        opacity: '.2'
+    }
+};
+const useProgressBarStyles = (0, _reactcomponents.__styles)({
+    progress: {
+        a9b677: "fly5x3f",
+        qhf8xq: "f1euv43f",
+        B5kzvoi: "f1yab3r1",
+        oyh7mz: [
+            "f1vgc2s3",
+            "f1e31b4d"
+        ],
+        j35jbq: [
+            "f1e31b4d",
+            "f1vgc2s3"
+        ],
+        Bqenvij: "f6ywr7j",
+        Beyfa6y: [
+            "f16jpd5f",
+            "f1aa9q02"
+        ],
+        Bbmb7ep: [
+            "f1aa9q02",
+            "f16jpd5f"
+        ]
+    },
+    regularProgressBar: {
+        Bqenvij: "f1l02sjl",
+        Bcmaq0h: "fx7worf"
+    },
+    indeterminateProgressBar: {
+        Bqenvij: "f1l02sjl",
+        De3pzq: "f1c21dwh",
+        Bcmaq0h: "f1hxqsn5",
+        B3ks32h: "f2xo07b",
+        B3vm3ge: "f1f2ih6z",
+        Gqtpxc: "f7h4d4t",
+        vr3tzx: "f32r5lb"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f1euv43f{position:absolute;}",
+        ".f1yab3r1{bottom:0;}",
+        ".f1vgc2s3{left:0;}",
+        ".f1e31b4d{right:0;}",
+        ".f6ywr7j{height:4px;}",
+        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
+        ".f1l02sjl{height:100%;}",
+        ".fx7worf{background-image:linear-gradient(90deg, var(--fai-colorBrandFlair1) 35%, var(--fai-colorBrandFlair2) 70%, var(--fai-colorBrandFlair3) 92%);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1hxqsn5{background-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--fai-colorBrandFlair1) 35%, var(--fai-colorBrandFlair2) 70%, var(--fai-colorBrandFlair3) 92%,  rgba(0,0,0,0));}"
+    ],
+    m: [
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f2xo07b{max-width:100%;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1f2ih6z{animation-iteration-count:infinite;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f7h4d4t{animation-duration:3s;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f32r5lb{animation-name:ftc26vs;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ]
+    ],
+    k: [
+        "@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"
+    ]
+}); //# sourceMappingURL=useProgressBarStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, tokens } from '@fluentui/react-components';\nimport { tokens as copilotTokens } 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, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.colorBrandFlair3} 92%)`,\n  },\n  indeterminateProgressBar: {\n    height: '100%',\n    backgroundColor: tokens.colorTransparentBackground,\n    backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0) 0%, ${copilotTokens.colorBrandFlair1} 35%, ${copilotTokens.colorBrandFlair2} 70%, ${copilotTokens.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":["progress","indeterminateProgressBarReducedMotion","opacity","__styles","width","position","bottom","left","right","height","borderBottomLeftRadius","borderBottomRightRadius","tokens","Bbmb7ep","backgroundImage","Bcmaq0h","backgroundColor","maxWidth","animationIterationCount","animationDuration","animationName","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBEA;;;eAAAA;;;iCAnByB;AAG3B,MAAMC,wCAAwC;UAC5C;iBACEC;;WAEF;iBACEA;;YAEF;iBACEA;;AAEJ;AAMEF,MAAAA,uBAAUG,IAAAA,yBAAA,EAAA;cACRC;gBACAC;gBACAC;iBACAC;gBACAC;YAAAA;YAAO;SAAA;gBACPC;YAAAA;YAAQ;SAAA;iBACRC;iBACAC;YAAAA;YAAAA;SAAyBC;QAC3BC,SAAA;YAAA;YAAA;SAAA;;wBAEU;iBACRC;QACFC,SAAA;;8BAEU;iBACRC;gBACAF;iBACA;iBACEG;iBACAC;gBACAC;gBACAC;;;IAGNC,GAAG;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-copilot/react-attachments",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "A set of components related to attaching files in Copilot experiences.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,6 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-copilot/react-provider": "^0.8.2",
+    "@fluentui-copilot/tokens": "^0.3.2",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {