@fluentui-copilot/react-attachments 0.9.2 → 0.9.4

package/lib/components/utils/useProgressBarStyles.js

@@ -0,0 +1,54 @@
+import { __styles, tokens } from '@fluentui/react-components';
+import { tokens as copilotTokens } from '@fluentui-copilot/tokens';
+const indeterminateProgressBarReducedMotion = {
+  '0%': {
+    opacity: '.2'
+  },
+  '50%': {
+    opacity: '1'
+  },
+  '100%': {
+    opacity: '.2'
+  }
+};
+/**
+ * @internal
+ */
+export const useProgressBarStyles = __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/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":["makeStyles","tokens","copilotTokens","indeterminateProgressBarReducedMotion","opacity","useProgressBarStyles","progress","width","position","bottom","left","right","height","borderBottomLeftRadius","borderRadiusMedium","borderBottomRightRadius","regularProgressBar","backgroundImage","colorBrandFlair1","colorBrandFlair2","colorBrandFlair3","indeterminateProgressBar","backgroundColor","colorTransparentBackground","maxWidth","animationIterationCount","animationDuration","animationName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,6BAA6B;AAChE,SAASA,UAAUC,aAAa,QAAQ,2BAA2B;AAEnE,MAAMC,wCAAwC;IAC5C,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,uBAAuBL,WAAW;IAC7CM,UAAU;QACRC,OAAO;QACPC,UAAU;QACVC,QAAQ;QACRC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,wBAAwBZ,OAAOa,kBAAkB;QACjDC,yBAAyBd,OAAOa,kBAAkB;IACpD;IACAE,oBAAoB;QAClBJ,QAAQ;QACRK,iBAAiB,CAAC,uBAAuB,EAAEf,cAAcgB,gBAAgB,CAAC,MAAM,EAAEhB,cAAciB,gBAAgB,CAAC,MAAM,EAAEjB,cAAckB,gBAAgB,CAAC,KAAK,CAAC;IAChK;IACAC,0BAA0B;QACxBT,QAAQ;QACRU,iBAAiBrB,OAAOsB,0BAA0B;QAClDN,iBAAiB,CAAC,yCAAyC,EAAEf,cAAcgB,gBAAgB,CAAC,MAAM,EAAEhB,cAAciB,gBAAgB,CAAC,MAAM,EAAEjB,cAAckB,gBAAgB,CAAC,qBAAqB,CAAC;QAChM,sDAAsD;YACpDI,UAAU;YACVC,yBAAyB;YACzBC,mBAAmB;YACnBC,eAAexB;QACjB;IACF;AACF,GAAG"}

package/lib/contexts/attachmentListContext.js

@@ -1,7 +1,8 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const AttachmentListContext = createContext(undefined);
 const attachmentListContextDefaultValue = {
-  onAttachmentDismiss: () => null
+  onAttachmentDismiss: () => null,
+  shouldUseOverflow: false
 };
 export const AttachmentListProvider = AttachmentListContext.Provider;
 export const useAttachmentListContext_unstable = selector => useContextSelector(AttachmentListContext, (ctx = attachmentListContextDefaultValue) => selector(ctx));

package/lib/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 { AttachmentListProps } 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};\n\n/**\n * Context shared between AttachmentList and its children components\n */\nexport type AttachmentListContextValue = Pick<AttachmentListProps, 'onAttachmentDismiss'>;\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":["createContext","useContextSelector","AttachmentListContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","AttachmentListProvider","Provider","useAttachmentListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,wBAA6DF,cAExEG,WAAkD;AAEpD,MAAMC,oCAAgE;IACpEC,qBAAqB,IAAM;AAC7B;AAOA,OAAO,MAAMC,yBAAyBJ,sBAAsBK,QAAQ,CAAC;AAErE,OAAO,MAAMC,oCAAoC,CAAIC,WACnDR,mBAAmBC,uBAAuB,CAACQ,MAAMN,iCAAiC,GAAKK,SAASC,MAAM"}
+{"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":["createContext","useContextSelector","AttachmentListContext","undefined","attachmentListContextDefaultValue","onAttachmentDismiss","shouldUseOverflow","AttachmentListProvider","Provider","useAttachmentListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,wBAA6DF,cAExEG,WAAkD;AAEpD,MAAMC,oCAAgE;IACpEC,qBAAqB,IAAM;IAC3BC,mBAAmB;AACrB;AAOA,OAAO,MAAMC,yBAAyBL,sBAAsBM,QAAQ,CAAC;AAErE,OAAO,MAAMC,oCAAoC,CAAIC,WACnDT,mBAAmBC,uBAAuB,CAACS,MAAMP,iCAAiC,GAAKM,SAASC,MAAM"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type { AttachmentListProps, AttachmentListSlots, AttachmentListState } from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n\nexport type {\n  AttachmentOverflowMenuProps,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuState,\n} from './AttachmentOverflowMenu';\nexport {\n  AttachmentOverflowMenu,\n  renderAttachmentOverflowMenu_unstable,\n  useAttachmentOverflowMenu_unstable,\n} from './AttachmentOverflowMenu';\n\nexport type { AttachmentOverflowMenuContextValue } from './contexts/attachmentOverflowMenuContext';\nexport {\n  AttachmentOverflowMenuContext,\n  AttachmentOverflowMenuProvider,\n  useAttachmentOverflowMenuContext_unstable,\n} from './contexts/attachmentOverflowMenuContext';\n\nexport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton';\nexport {\n  AttachmentOverflowMenuButton,\n  attachmentOverflowMenuButtonClassNames,\n  renderAttachmentOverflowMenuButton_unstable,\n  useAttachmentOverflowMenuButtonStyles_unstable,\n  useAttachmentOverflowMenuButton_unstable,\n} from './AttachmentOverflowMenuButton';\n\nexport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem';\nexport {\n  AttachmentOverflowMenuItem,\n  attachmentOverflowMenuItemClassNames,\n  renderAttachmentOverflowMenuItem_unstable,\n  useAttachmentOverflowMenuItemStyles_unstable,\n  useAttachmentOverflowMenuItem_unstable,\n} from './AttachmentOverflowMenuItem';\n"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","AttachmentList","attachmentListClassNames","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable","AttachmentOverflowMenu","renderAttachmentOverflowMenu_unstable","useAttachmentOverflowMenu_unstable","AttachmentOverflowMenuContext","AttachmentOverflowMenuProvider","useAttachmentOverflowMenuContext_unstable","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","renderAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useAttachmentOverflowMenuButton_unstable","AttachmentOverflowMenuItem","attachmentOverflowMenuItemClassNames","renderAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenuItemStyles_unstable","useAttachmentOverflowMenuItem_unstable"],"rangeMappings":";;;;;;;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,mCAAmC;AAE1C,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAOtB,SACEC,sBAAsB,EACtBC,qCAAqC,EACrCC,kCAAkC,QAC7B,2BAA2B;AAGlC,SACEC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,yCAAyC,QACpC,2CAA2C;AAOlD,SACEC,4BAA4B,EAC5BC,sCAAsC,EACtCC,2CAA2C,EAC3CC,8CAA8C,EAC9CC,wCAAwC,QACnC,iCAAiC;AAOxC,SACEC,0BAA0B,EAC1BC,oCAAoC,EACpCC,yCAAyC,EACzCC,4CAA4C,EAC5CC,sCAAsC,QACjC,+BAA+B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export type { AttachmentTagProps, AttachmentTagSlots, AttachmentTagState } from './AttachmentTag';\nexport {\n  AttachmentTag,\n  attachmentTagClassNames,\n  renderAttachmentTag_unstable,\n  useAttachmentTagStyles_unstable,\n  useAttachmentTag_unstable,\n} from './AttachmentTag';\nexport type {\n  AttachmentTagDismissedData,\n  AttachmentTagListProps,\n  AttachmentTagListSlots,\n  AttachmentTagListState,\n} from './AttachmentTagList';\nexport {\n  AttachmentTagList,\n  attachmentTagListClassNames,\n  renderAttachmentTagList_unstable,\n  useAttachmentTagListStyles_unstable,\n  useAttachmentTagList_unstable,\n} from './AttachmentTagList';\n\nexport type { AttachmentTagItemProps, AttachmentTagItemSlots, AttachmentTagItemState } from './AttachmentTagItem';\nexport {\n  AttachmentTagItem,\n  attachmentTagItemClassNames,\n  renderAttachmentTagItem_unstable,\n  useAttachmentTagItemStyles_unstable,\n  useAttachmentTagItem_unstable,\n} from './AttachmentTagItem';\n\nexport type {\n  AttachmentListProps,\n  AttachmentListSlots,\n  AttachmentListState,\n  AttachmentDismissedData,\n} from './AttachmentList';\nexport {\n  AttachmentList,\n  attachmentListClassNames,\n  renderAttachmentList_unstable,\n  useAttachmentListStyles_unstable,\n  useAttachmentList_unstable,\n} from './AttachmentList';\nexport type { AttachmentListContextValue } from './contexts/attachmentListContext';\nexport {\n  AttachmentListContext,\n  AttachmentListProvider,\n  useAttachmentListContext_unstable,\n} from './contexts/attachmentListContext';\nexport type { AttachmentProps, AttachmentSlots, AttachmentState } from './Attachment';\nexport {\n  Attachment,\n  attachmentClassNames,\n  renderAttachment_unstable,\n  useAttachmentStyles_unstable,\n  useAttachment_unstable,\n} from './Attachment';\n\nexport type {\n  AttachmentOverflowMenuProps,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuState,\n} from './AttachmentOverflowMenu';\nexport {\n  AttachmentOverflowMenu,\n  renderAttachmentOverflowMenu_unstable,\n  useAttachmentOverflowMenu_unstable,\n} from './AttachmentOverflowMenu';\n\nexport type { AttachmentOverflowMenuContextValue } from './contexts/attachmentOverflowMenuContext';\nexport {\n  AttachmentOverflowMenuContext,\n  AttachmentOverflowMenuProvider,\n  useAttachmentOverflowMenuContext_unstable,\n} from './contexts/attachmentOverflowMenuContext';\n\nexport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton';\nexport {\n  AttachmentOverflowMenuButton,\n  attachmentOverflowMenuButtonClassNames,\n  renderAttachmentOverflowMenuButton_unstable,\n  useAttachmentOverflowMenuButtonStyles_unstable,\n  useAttachmentOverflowMenuButton_unstable,\n} from './AttachmentOverflowMenuButton';\n\nexport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem';\nexport {\n  AttachmentOverflowMenuItem,\n  attachmentOverflowMenuItemClassNames,\n  renderAttachmentOverflowMenuItem_unstable,\n  useAttachmentOverflowMenuItemStyles_unstable,\n  useAttachmentOverflowMenuItem_unstable,\n} from './AttachmentOverflowMenuItem';\n"],"names":["AttachmentTag","attachmentTagClassNames","renderAttachmentTag_unstable","useAttachmentTagStyles_unstable","useAttachmentTag_unstable","AttachmentTagList","attachmentTagListClassNames","renderAttachmentTagList_unstable","useAttachmentTagListStyles_unstable","useAttachmentTagList_unstable","AttachmentTagItem","attachmentTagItemClassNames","renderAttachmentTagItem_unstable","useAttachmentTagItemStyles_unstable","useAttachmentTagItem_unstable","AttachmentList","attachmentListClassNames","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentList_unstable","AttachmentListContext","AttachmentListProvider","useAttachmentListContext_unstable","Attachment","attachmentClassNames","renderAttachment_unstable","useAttachmentStyles_unstable","useAttachment_unstable","AttachmentOverflowMenu","renderAttachmentOverflowMenu_unstable","useAttachmentOverflowMenu_unstable","AttachmentOverflowMenuContext","AttachmentOverflowMenuProvider","useAttachmentOverflowMenuContext_unstable","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","renderAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useAttachmentOverflowMenuButton_unstable","AttachmentOverflowMenuItem","attachmentOverflowMenuItemClassNames","renderAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenuItemStyles_unstable","useAttachmentOverflowMenuItem_unstable"],"rangeMappings":";;;;;;;;;","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,QACpB,kBAAkB;AAOzB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAG7B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAQ7B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,mCAAmC;AAE1C,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,eAAe;AAOtB,SACEC,sBAAsB,EACtBC,qCAAqC,EACrCC,kCAAkC,QAC7B,2BAA2B;AAGlC,SACEC,6BAA6B,EAC7BC,8BAA8B,EAC9BC,yCAAyC,QACpC,2CAA2C;AAOlD,SACEC,4BAA4B,EAC5BC,sCAAsC,EACtCC,2CAA2C,EAC3CC,8CAA8C,EAC9CC,wCAAwC,QACnC,iCAAiC;AAOxC,SACEC,0BAA0B,EAC1BC,oCAAoC,EACpCC,yCAAyC,EACzCC,4CAA4C,EAC5CC,sCAAsC,QACjC,+BAA+B"}

package/lib-commonjs/components/Attachment/Attachment.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  id: string;\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> & Pick<AttachmentProps, 'imageOnly'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n  root: NonNullable<Slot<'div'>>;\n  primaryAction: NonNullable<Slot<'button', 'span'>>;\n  dismissButton: NonNullable<Slot<'button'>>;\n  media?: Slot<'span'>;\n  content: NonNullable<Slot<'span'>>;\n  dismissIcon: NonNullable<Slot<'span'>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n  imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n  Required<Pick<AttachmentProps, 'id'>> &\n  Pick<AttachmentProps, 'imageOnly'> & {\n    isLoading: boolean;\n    shouldUseOverflow: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}

package/lib-commonjs/components/Attachment/renderAttachment.js

@@ -12,12 +12,14 @@ const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const renderAttachment_unstable = (state)=>{
     (0, _reactcomponents.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+    const { id, shouldUseOverflow } = state;
+    const attachment = /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.primaryAction, {
                 children: [
                     state.media && !state.imageOnly && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {}),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {})
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.content, {}),
+                    state.progress && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.progress, {})
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(state.dismissButton, {
@@ -25,4 +27,8 @@ const renderAttachment_unstable = (state)=>{
             })
         ]
     });
+    return shouldUseOverflow ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.OverflowItem, {
+        id: id,
+        children: attachment
+    }, id) : attachment;
 }; //# sourceMappingURL=renderAttachment.js.map

package/lib-commonjs/components/Attachment/renderAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","state","_jsxs","primaryAction","media","dismissButton","imageOnly","content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE4B;AAO1BA,MAAAA,4BAA6BC,CAAAA;oCAE7B,EAAAA;;;uBAEI,GAAAC,IAAAA,gBAACD,EAAAA,MAAME,aAAa,EAAA;;;;;;0BACjBF,IAAAA,eAAAA,EAAMG,MAAKC,aAAWC,EAAAA;6DACvBL,MAACA,WAAMM,EAAO,CAAA;;;;+CAGd"}
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n  const { id, shouldUseOverflow } = state;\n\n  const attachment = (\n    <state.root>\n      <state.primaryAction>\n        {state.media && !state.imageOnly && <state.media />}\n        <state.content />\n        {state.progress && <state.progress />}\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n  return shouldUseOverflow ? (\n    <OverflowItem id={id} key={id}>\n      {attachment}\n    </OverflowItem>\n  ) : (\n    attachment\n  );\n};\n"],"names":["assertSlots","state","id","_jsxs","imageOnly","progress","media","_jsx","content","shouldUseOverflow","attachment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUEA;;;eAAAA;;;4BATF;iCAE0C;AAOxCA,MAAAA,4BAA6BC,CAAAA;oCACrBC,EAAED;UAEV;uBAGOA,WAAW,GAAAE,IAAAA,gBAAKF,EAAAA,MAAMG,IAAAA,EAAS;;gDAChCH,MAACA,aAAa,EAAA;;0BACbA,KAAMI,IAAAA,CAAAA,MAAQD,SAAA,IAAI,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,MAAQC,KAAA,EAAA,CAAA;oBAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAN,MAAAO,OAAA,EAAA,CAAA;oBAAAP,MAAAI,QAAA,IAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAN,MAAAI,QAAA,EAAA,CAAA;iBAAA;;;;;;;;;;OAOxCH,MAAOO;+CAEFC"}

package/lib-commonjs/components/Attachment/useAttachment.js

@@ -14,12 +14,15 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachment_unstable = (props, ref)=>{
-    const { imageOnly } = props;
+    const { children, imageOnly } = props;
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
-    const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
+    const { onAttachmentDismiss, shouldUseOverflow } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
+    const attachmentId = (0, _reactcomponents.useId)('attachment-', props.id);
+    const isLoading = !!props.progress;
     const root = _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
         ref,
-        ...props
+        ...props,
+        id: attachmentId
     }), {
         elementType: 'div'
     });
@@ -32,9 +35,13 @@ const useAttachment_unstable = (props, ref)=>{
         },
         elementType: 'button'
     });
-    dismissButton.onClick = (0, _reactcomponents.mergeCallbacks)(dismissButton.onClick, (ev)=>onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-            id: props.id
-        }));
+    dismissButton.onClick = (0, _reactcomponents.mergeCallbacks)(dismissButton.onClick, (ev)=>{
+        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            content: children,
+            media,
+            id: attachmentId
+        });
+    });
     const media = _reactcomponents.slot.optional(props.media, {
         elementType: 'span'
     });
@@ -50,14 +57,24 @@ const useAttachment_unstable = (props, ref)=>{
         },
         elementType: 'span'
     });
+    const progress = _reactcomponents.slot.optional(props.progress, {
+        defaultProps: {
+            shape: 'square',
+            thickness: 'large',
+            'aria-labelledby': props.id
+        },
+        elementType: _reactcomponents.ProgressBar
+    });
     const state = {
+        id: attachmentId,
         components: {
             root: 'div',
             primaryAction: 'button',
             dismissButton: 'button',
             media: 'span',
             content: 'span',
-            dismissIcon: 'span'
+            dismissIcon: 'span',
+            progress: _reactcomponents.ProgressBar
         },
         root,
         primaryAction,
@@ -65,7 +82,10 @@ const useAttachment_unstable = (props, ref)=>{
         media,
         content,
         dismissIcon,
-        imageOnly
+        progress,
+        imageOnly,
+        isLoading,
+        shouldUseOverflow
     };
     if (state.primaryAction.as === 'span') {
         state.components.primaryAction = 'span';

package/lib-commonjs/components/Attachment/useAttachment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Dismiss' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => onAttachmentDismiss?.(ev, { id: props.id }),\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    imageOnly,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["imageOnly","props","onAttachmentDismiss","ref","useAttachmentListContext_unstable","context","root","slot","always","getIntrinsicElementProps","elementType","primaryAction","dismissButton","defaultProps","media","optional","onClick","ev","content","children","dismissIcon","React","createElement","DismissIcon","components","state"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCACwC;4BACD;uCACZ;AAahD,MAAQA,yBAAcC,CAAAA,OAAAA;UACtB,EAEAD,SAAME,KAEND;UAEIE,cAAAA,IAAAA,sBAAAA,EAAAA,2BAAAA,EAAAA,4BAAAA;UACAD,sBAAQE,IAAAA,wDAAA,EAAAC,CAAAA,UAAAA,QAAAH,mBAAA;UAEVI,OAAAC,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;;QAAqB,GAAAR,KAAA;QAGvB;qBACES;;UAGFC,gBAAMC,qBAAgBL,CAAAA,MAAKC,CAAAA,MAAOP,aAAMW,EAAa;qBACnDC;;UAAwCD,gBAAAL,qBAAA,CAAAC,MAAA,CAAAP,MAAAW,aAAA,EAAA;sBACxCF;YACF,cAAA;QAEAE;qBAEmGX;;kBAG7Fa,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA,KAAAf,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAe,IAAA;gBAAEP,MAAAA,EAAAA;;UAE3CI,QAAMI,qBAAUX,CAAAA,QAAKC,CAAAA,MAAOP,KAAMiB,EAAAA;qBAChCL;;UAEAK,UAAAX,qBAAA,CAAAC,MAAA,CAAAP,MAAAiB,OAAA,EAAA;sBACAR;YACFS,UAAAlB,MAAAkB,QAAA;QAEA;qBACEN;;UAEAO,cAAAb,qBAAA,CAAAC,MAAA,CAAAP,MAAAmB,WAAA,EAAA;sBACAV;YACFS,UAAA,WAAA,GAAAE,OAAAC,aAAA,CAAAC,aAAA;QAEA;qBACEC;;kBAEEb;oBACAC;kBACAE;2BACS;2BACTM;mBACF;qBAEAd;yBACAK;;;;;;QAMFO;QAEAE;;;QAIAK,MAAOA,aAAAA,CAAAA,EAAAA,KAAAA,QAAAA;QACPA,MAAAD,UAAA,CAAAb,aAAA,GAAA"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n  const { children, imageOnly } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n  const attachmentId = useId('attachment-', props.id);\n  const isLoading = !!props.progress;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n      id: attachmentId,\n    }),\n    { elementType: 'div' },\n  );\n\n  const primaryAction = slot.always(props.primaryAction, {\n    elementType: 'button',\n  });\n\n  const dismissButton = slot.always(props.dismissButton, {\n    defaultProps: { 'aria-label': 'Dismiss' },\n    elementType: 'button',\n  });\n\n  dismissButton.onClick = mergeCallbacks(\n    dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n      onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n    },\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children: props.children,\n    },\n    elementType: 'span',\n  });\n\n  const dismissIcon = slot.always(props.dismissIcon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const progress = slot.optional(props.progress, {\n    defaultProps: {\n      shape: 'square',\n      thickness: 'large',\n      'aria-labelledby': props.id,\n    },\n    elementType: ProgressBar,\n  });\n\n  const state: AttachmentState = {\n    id: attachmentId,\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n      progress: ProgressBar,\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n    progress,\n    imageOnly,\n    isLoading,\n    shouldUseOverflow,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["children","props","onAttachmentDismiss","imageOnly","attachmentId","DismissIcon","always","getIntrinsicElementProps","ref","useAttachmentListContext_unstable","context","elementType","useId","id","isLoading","progress","root","primaryAction","slot","content","media","optional","onClick","ev","defaultProps","dismissIcon","shape","thickness","React","createElement","components","dismissButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC4D;4BACrB;uCACZ;AAahD,MAAQA,yBAAwBC,CAAAA,OAAAA;UAChC,EACAD,QAAQE,EACRC,SAAMC,KACNH;UAEAI,cAAkBC,IAAAA,sBAChBC,EAAAA,2BAAAA,EAAAA,4BAAgC;UAC9BC,qBACQ,mBACJJ,KACNK,IAAAA,wDACA,EAAAC,CAAAA,UAAAA;UAAEC,eAAaC,IAAAA,sBAAA,EAAA,eAAAX,MAAAY,EAAA;UAAMC,YAAA,CAAA,CAAAb,MAAAc,QAAA;UAGvBC,OAAMC,qBAAAA,CAAAA,MAAgBC,CAAAA,IAAAA,yCAAkBD,EAAAA,OAAe;;QAEvD,GAAAhB,KAAA;QAEAY,IAAAT;;qBACkB;;UAChBO,gBAAaO,qBAAA,CAAAZ,MAAA,CAAAL,MAAAgB,aAAA,EAAA;QACfN,aAAA;;UAKIT,gBAAAA,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAA4BiB;0BAAmBC;;qBAAwB;;kBAIrEA,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA;gCAAe,QAAArB,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAqB,IAAA;YAAOJ,SAAAnB;YAE/DoB;gBACEI;;;UAGAb,QAAAA,qBAAAA,CAAaU,QAAA,CAAApB,MAAAmB,KAAA,EAAA;QACfT,aAAA;;UAGEa,UAAAA,qBAAc,CAAAlB,MAAA,CAAAL,MAAAkB,OAAA,EAAA;sBACZnB;sBACFC,MAAAD,QAAA;;QAEFW,aAAA;;UAGEa,cAAcN,qBAAA,CAAAZ,MAAA,CAAAL,MAAAwB,WAAA,EAAA;sBACZC;sBACAC,WAAW,GAAAC,OAAAC,aAAA,CAAAxB,aAAA;;qBAEb;;UAEFU,WAAAG,qBAAA,CAAAG,QAAA,CAAApB,MAAAc,QAAA,EAAA;QAEAS,cAA+B;mBACzBpB;uBACJ0B;+BACQ7B,MAAAY,EAAA;;qBAENkB,4BAAe;;kBAEfZ;;oBAEAJ;kBACF;2BAEAC;2BACAC;mBACAc;qBACAX;yBACAD;sBACAM,4BAAAA;;;;;QAKFL;QAEAD;;QAEAJ;QAEAZ;QACAW"}

package/lib-commonjs/components/Attachment/useAttachmentStyles.js

@@ -14,21 +14,26 @@ _export(exports, {
     },
     useAttachmentStyles_unstable: function() {
         return useAttachmentStyles_unstable;
+    },
+    useOverflowStyles: function() {
+        return useOverflowStyles;
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _useProgressBarStyles = require("../utils/useProgressBarStyles");
 const attachmentClassNames = {
     root: 'fai-Attachment',
     primaryAction: 'fai-Attachment__primaryAction',
     dismissButton: 'fai-Attachment__dismissButton',
     media: 'fai-Attachment__media',
     content: 'fai-Attachment__content',
-    dismissIcon: 'fai-Attachment__dismissIcon'
+    dismissIcon: 'fai-Attachment__dismissIcon',
+    progress: 'fai-Attachment__progress'
 };
 const ATTACHMENT_MAXWIDTH = '180px';
 const ATTACHMENT_SIZE = '20px';
-const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rmfolg5", null, [
-    ".rmfolg5{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;}"
+const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r16wonf3", null, [
+    ".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"
 ]);
 const buttonBaseStyles = {
     alignItems: 'center',
@@ -143,6 +148,15 @@ const useImageOnlyStyles = (0, _reactcomponents.__styles)({
         ".fez10in{line-height:0;}"
     ]
 });
+const useOverflowStyles = (0, _reactcomponents.__styles)({
+    overflow: {
+        a9b677: "fly5x3f"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     const rootBaseClassName = useRootBaseClassName();
     const primaryActionBaseClassName = usePrimaryActionBaseClassName();
@@ -150,16 +164,32 @@ const useAttachmentStyles_unstable = (state)=>{
     const mediaBaseClassName = useMediaBaseClassName();
     const contentBaseClassName = useContentBaseClassName();
     const dismissIconBaseClassName = useDismissIconBaseClassName();
+    const progressBarStyles = (0, _useProgressBarStyles.useProgressBarStyles)();
     const primaryActionStyles = usePrimaryActionStyles();
     const imageOnlyStyles = useImageOnlyStyles();
     const { imageOnly, primaryAction } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
     state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
     if (state.media) {
         state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, state.media.className);
     }
     state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
     state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+    if (state.progress) {
+        state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.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=useAttachmentStyles.js.map

package/lib-commonjs/components/Attachment/useAttachmentStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  return state;\n};\n"],"names":["attachmentClassNames","borderTopLeftRadius","borderRadiusNone","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","columnGap","spacingHorizontalSNudge","color","buttonBaseStyles","alignItems","backgroundColor","colorStrokeFocus2","cursor","justifyContent","__resetStyles","usePrimaryActionStyles","createCustomFocusIndicatorStyle","zIndex","Jwef8y","verticalAlign","ecr2s2","lj723h","usePrimaryActionBaseClassName","Bqrx1nm","borderTopRightRadius","maxWidth","spacingHorizontalXXS","padding","spacingVerticalXS","m","button","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","__styles","Bg96gwp","spacingHorizontalXS","borderBottomLeftRadius","borderBottomRightRadius","mediaBaseClassName","useMediaBaseClassName","useContentBaseClassName","colorNeutralBackground3Hover","colorNeutralForeground2BrandHover","imageOnlyStyles","state","colorNeutralBackground3Pressed","rootBaseClassName","className","colorNeutralForeground2BrandPressed","primaryActionBaseClassName","as","primaryActionStyles","imageOnly","mergeClasses","dismissButtonBaseClassName","contentBaseClassName","dismissIconBaseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  slot,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  ':focus': {\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    ...shorthands.padding(0),\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\nexport const useOverflowStyles = makeStyles({\n  overflow: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const { imageOnly, primaryAction } = state;\n\n  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.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":["attachmentClassNames","backgroundColor","colorNeutralBackground3Hover","maxWidth","ATTACHMENT_SIZE","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","useRootBaseClassName","makeResetStyles","display","tokens","colorNeutralBackground1","boxSizing","strokeWidthThin","colorNeutralStroke1","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","borderRadius","outline","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","shorthands","zIndex","Bi91k9c","verticalAlign","lj723h","Bqrx1nm","usePrimaryActionBaseClassName","kx9iu6","borderRightStyle","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","a9b677","borderBottomLeftRadius","colorNeutralForeground2BrandHover","primaryActionBaseClassName","colorBrandForegroundLinkHover","mediaBaseClassName","useMediaBaseClassName","contentBaseClassName","useContentBaseClassName","dismissIconBaseClassName","useDismissIconBaseClassName","colorNeutralForeground2BrandPressed","imageOnlyStyles","useImageOnlyStyles","className","mergeClasses","rootBaseClassName","state","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","progressBarStyles","fontSize","height","lineHeight","width","bar","indeterminateProgressBar","overflowX","regularProgressBar","textOverflow","whiteSpace"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AttachmentList/AttachmentList.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AttachmentDismissedData = {\n  id: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n  overflowMenuButton: Slot<'span'>;\n  overflowMenuItem: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n  content?: AttachmentProps['children'];\n  media?: AttachmentProps['media'];\n  id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n  overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n  /**\n   * The maximum number of attachments to display before the overflow button is shown even if there is\n   * enough space available to show more.\n   * If not set, the overflow functionality will be disabled.\n   * @default undefined\n   */\n  maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n    attachments: AttachmentProps[];\n    shouldUseOverflow: boolean;\n  };\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/lib-commonjs/components/AttachmentList/renderAttachmentList.js

@@ -9,12 +9,40 @@ Object.defineProperty(exports, "renderAttachmentList_unstable", {
     }
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactjsxruntime = require("@fluentui/react-jsx-runtime");
 const _reactcomponents = require("@fluentui/react-components");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
+const _AttachmentOverflowMenu = require("../AttachmentOverflowMenu");
+const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
 const renderAttachmentList_unstable = (state, contextValues)=>{
     (0, _reactcomponents.assertSlots)(state);
+    const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_attachmentListContext.AttachmentListProvider, {
         value: contextValues.attachmentList,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        children: shouldUseOverflow ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
+            ref: root.ref,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+                children: [
+                    root.children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_AttachmentOverflowMenu.AttachmentOverflowMenu, {
+                        positioning: 'above',
+                        ...overflowMenuProps,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.overflowMenuButton, {}),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.MenuPopover, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.MenuList, {
+                                    children: attachments.map((attachment)=>{
+                                        return /*#__PURE__*/ (0, _reactjsxruntime.createElement)(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, {
+                                            ...attachment,
+                                            key: attachment.id
+                                        });
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
     });
 }; //# sourceMappingURL=renderAttachmentList.js.map

package/lib-commonjs/components/AttachmentList/renderAttachmentList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      <state.root />\n    </AttachmentListProvider>\n  );\n};\n"],"names":["assertSlots","state","value","contextValues","attachmentList"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcEA;;;eAAAA;;;4BAdwB;iCAGE;uCACW;AAUrCA,MAAAA,gCAAiCC,CAAAA,OAAAA;oCAEjC,EAAAA;WAC0BC,WAAOC,GAAAA,IAAAA,eAAAA,EAAAA,6CAA4B,EAAA;6BACzDC,cAACH;;IAGL"}
+{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n  state: AttachmentListState,\n  contextValues: AttachmentListContextValues,\n) => {\n  assertSlots<AttachmentListSlots>(state);\n  const { attachments, overflowMenuProps, root, shouldUseOverflow } = state;\n\n  return (\n    <AttachmentListProvider value={contextValues.attachmentList}>\n      {shouldUseOverflow ? (\n        <Overflow ref={root.ref}>\n          <state.root>\n            {root.children}\n            <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n              <state.overflowMenuButton />\n              <MenuPopover>\n                <MenuList>\n                  {attachments.map(attachment => {\n                    return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n                  })}\n                </MenuList>\n              </MenuPopover>\n            </AttachmentOverflowMenu>\n          </state.root>\n        </Overflow>\n      ) : (\n        <state.root />\n      )}\n    </AttachmentListProvider>\n  );\n};\n"],"names":["assertSlots","state","attachments","contextValues","shouldUseOverflow","root","children","positioning","_jsx","Overflow","overflowMenuButton","attachment","MenuList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBEA;;;eAAAA;;;4BAfF;;iCAE6D;uCACtB;wCACA;4CACI;AAUzCA,MAAAA,gCAAiCC,CAAAA,OAAAA;oCACzBC,EAAAA;UAER,aACiCC,mBAC5BC;sBAGMC,GAAAA,IAAAA,eAAKC,EAAAA,6CAAQ,EAAA;2CACd;sCAAwBC,WAAa,GAAAC,IAAAA,eAAA,EAAAC,yBAAA,EAAA;;;;;+BACnC,GAACR,IAAAA,gBAAAA,EAAMS,8CAAkB,EAAA;;;;uFAGJC,EAAAA,CAAAA;4BAAAA,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,4BAAAA,EAAAA;6EACfC,yBAAA,EAAA;;+FAAwDD,EAAAA,sDAAa,EAAA;;8DACvE;;;;;;;;;gDAOVV,MAACA,IAAAA,EAAMI,CAAAA;;AAIf"}

package/lib-commonjs/components/AttachmentList/useAttachmentList.js

@@ -12,21 +12,24 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactcomponents = require("@fluentui/react-components");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _reactoverflow = require("@fluentui/react-overflow");
+const _reactutilities = require("@fluentui/react-utilities");
+const _Attachment = require("../Attachment");
+const _AttachmentOverflowMenuButton = require("../AttachmentOverflowMenuButton");
+const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
+const _useAttachmentOverflowMenuButtonStyles = require("../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles");
 const useAttachmentList_unstable = (props, ref)=>{
-    const { onAttachmentDismiss } = props;
-    const attachmentsVisibilityStatus = (0, _reactoverflow.useOverflowContext)((context)=>context.itemVisibility);
+    const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;
     const innerRef = _react.useRef(null);
+    const [setTimeout] = (0, _reactutilities.useTimeout)();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const { findNextFocusable, findPrevFocusable } = (0, _reactcomponents.useFocusFinders)();
+    const { findNextFocusable, findPrevFocusable, findLastFocusable } = (0, _reactcomponents.useFocusFinders)();
+    const [attachments, setAttachments] = _react.useState([]);
     const handleAttachmentDismiss = (0, _reactcomponents.useEventCallback)((e, data)=>{
         var _innerRef_current;
         if (!onAttachmentDismiss) {
             return;
         }
         onAttachmentDismiss(e, data);
-        // Remove attachment from overflow context
-        attachmentsVisibilityStatus === null || attachmentsVisibilityStatus === void 0 ? true : delete attachmentsVisibilityStatus[data.id];
         // set focus after attachment dismiss
         const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
         if ((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement)) {
@@ -35,34 +38,101 @@ const useAttachmentList_unstable = (props, ref)=>{
                 container: innerRef.current
             });
             if (next) {
-                next.focus();
-                return;
+                // focus on the overflow button if the next focusable element is the overflow button.
+                // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.
+                if (next.classList.contains(_useAttachmentOverflowMenuButtonStyles.attachmentOverflowMenuButtonClassNames.root)) {
+                    setTimeout(()=>{
+                        var _findLastFocusable;
+                        (_findLastFocusable = findLastFocusable(innerRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+                    }, 0);
+                } else {
+                    next.focus();
+                }
             } else {
                 const prev = findPrevFocusable(activeElement === null || activeElement === void 0 ? void 0 : activeElement.parentElement, {
                     container: innerRef.current
                 });
                 prev === null || prev === void 0 ? void 0 : prev.focus();
             }
+        } else {
+            // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.
+            setTimeout(()=>{
+                var _findLastFocusable;
+                (_findLastFocusable = findLastFocusable(innerRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+            }, 0);
         }
     });
+    const attachmentOverflowClassName = (0, _Attachment.useOverflowStyles)().overflow;
+    const resolvedChildren = _react.useMemo(()=>{
+        if (maxVisibleAttachments !== undefined) {
+            const results = [];
+            const childrenArray = _react.Children.toArray(children);
+            for(let index = 0; index < childrenArray.length; index++){
+                const child = childrenArray[index];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (index >= maxVisibleAttachments && /*#__PURE__*/ _react.isValidElement(child)) {
+                    results.push(/*#__PURE__*/ _react.cloneElement(child, {
+                        ...child.props,
+                        className: (0, _reactcomponents.mergeClasses)(child.props.className, attachmentOverflowClassName)
+                    }));
+                } else {
+                    results.push(child);
+                }
+            }
+            return results;
+        }
+        return children;
+    }, [
+        attachmentOverflowClassName,
+        children,
+        maxVisibleAttachments
+    ]);
+    _react.useEffect(()=>{
+        if (resolvedChildren && Array.isArray(resolvedChildren)) {
+            setAttachments(resolvedChildren.map((child)=>child.props));
+        }
+    }, [
+        resolvedChildren
+    ]);
     const arrowNavigationProps = (0, _reactcomponents.useArrowNavigationGroup)({
         circular: true,
         axis: 'both',
         memorizeCurrent: true
     });
+    const shouldUseOverflow = maxVisibleAttachments !== undefined;
     return {
+        attachments,
         onAttachmentDismiss: handleAttachmentDismiss,
+        shouldUseOverflow,
+        overflowMenuProps,
         components: {
-            root: 'div'
+            root: 'div',
+            overflowMenuButton: 'span',
+            overflowMenuItem: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
             'aria-label': 'Attachments',
             ref: (0, _reactcomponents.useMergedRefs)(ref, innerRef),
             role: 'toolbar',
             ...arrowNavigationProps,
-            ...props
+            ...props,
+            children: resolvedChildren
         }), {
             elementType: 'div'
+        }),
+        overflowMenuButton: _reactcomponents.slot.optional(props.overflowMenuButton, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuButton.AttachmentOverflowMenuButton, null)
+            },
+            elementType: 'span',
+            renderByDefault: true
+        }),
+        overflowMenuItem: _reactcomponents.slot.optional(props.overflowMenuItem, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, null)
+            },
+            elementType: 'span',
+            renderByDefault: true
         })
     };
 }; //# sourceMappingURL=useAttachmentList.js.map