@fluentui-copilot/react-attachments 0.9.2 → 0.9.4

package/lib/components/AttachmentList/useAttachmentList.js

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeClasses, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useOverflowContext } from '@fluentui/react-overflow';
+import { useTimeout } from '@fluentui/react-utilities';
+import { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';
+import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
+import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
+import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles';
 /**
  * Create the state required to render AttachmentList.
  *
@@ -13,25 +17,28 @@ import { useOverflowContext } from '@fluentui/react-overflow';
  */
 export const useAttachmentList_unstable = (props, ref) => {
   const {
-    onAttachmentDismiss
+    children,
+    maxVisibleAttachments,
+    onAttachmentDismiss,
+    overflowMenuProps
   } = props;
-  const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);
   const innerRef = React.useRef(null);
+  const [setTimeout] = useTimeout();
   const {
     targetDocument
   } = useFluent();
   const {
     findNextFocusable,
-    findPrevFocusable
+    findPrevFocusable,
+    findLastFocusable
   } = useFocusFinders();
+  const [attachments, setAttachments] = React.useState([]);
   const handleAttachmentDismiss = 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)) {
@@ -40,34 +47,95 @@ export 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(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 = useAttachmentOverflowStyles().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: 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 = 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: slot.always(getIntrinsicElementProps('div', {
       'aria-label': 'Attachments',
       ref: useMergedRefs(ref, innerRef),
       role: 'toolbar',
       ...arrowNavigationProps,
-      ...props
+      ...props,
+      children: resolvedChildren
     }), {
       elementType: 'div'
+    }),
+    overflowMenuButton: slot.optional(props.overflowMenuButton, {
+      defaultProps: {
+        children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuButton, null)
+      },
+      elementType: 'span',
+      renderByDefault: true
+    }),
+    overflowMenuItem: slot.optional(props.overflowMenuItem, {
+      defaultProps: {
+        children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, null)
+      },
+      elementType: 'span',
+      renderByDefault: true
     })
   };
 };

package/lib/components/AttachmentList/useAttachmentList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '@fluentui/react-overflow';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { onAttachmentDismiss } = props;\n\n  const attachmentsVisibilityStatus: Record<string, boolean> = useOverflowContext(context => context.itemVisibility);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // Remove attachment from overflow context\n    delete attachmentsVisibilityStatus?.[data.id];\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n\n      if (next) {\n        next.focus();\n        return;\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    }\n  });\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  return {\n    onAttachmentDismiss: handleAttachmentDismiss,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useOverflowContext","useAttachmentList_unstable","props","ref","onAttachmentDismiss","attachmentsVisibilityStatus","context","itemVisibility","innerRef","useRef","targetDocument","findNextFocusable","findPrevFocusable","handleAttachmentDismiss","e","data","id","activeElement","current","contains","next","container","focus","prev","parentElement","arrowNavigationProps","circular","axis","memorizeCurrent","components","root","always","role","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,IAAI,EACJC,uBAAuB,EACvBC,gBAAgB,EAChBC,eAAe,EACfC,aAAa,QACR,6BAA6B;AACpC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,mBAAmB,EAAE,GAAGF;IAEhC,MAAMG,8BAAuDL,mBAAmBM,CAAAA,UAAWA,QAAQC,cAAc;IAEjH,MAAMC,WAAWjB,MAAMkB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGhB;IAEjD,MAAMiB,0BAAsElB,iBAAiB,CAACmB,GAAGC;YAY3FP;QAXJ,IAAI,CAACJ,qBAAqB;YACxB;QACF;QAEAA,oBAAoBU,GAAGC;QAEvB,0CAA0C;QACnCV,wCAAAA,uDAAAA,2BAA6B,CAACU,KAAKC,EAAE,CAAC;QAE7C,qCAAqC;QACrC,MAAMC,gBAAgBP,2BAAAA,qCAAAA,eAAgBO,aAAa;QACnD,KAAIT,oBAAAA,SAASU,OAAO,cAAhBV,wCAAAA,kBAAkBW,QAAQ,CAACF,gBAA+B;YAC5D,4FAA4F;YAC5F,MAAMG,OAAOT,kBAAkBM,eAA8B;gBAAEI,WAAWb,SAASU,OAAO;YAAC;YAE3F,IAAIE,MAAM;gBACRA,KAAKE,KAAK;gBACV;YACF,OAAO;gBACL,MAAMC,OAAOX,kBAAkBK,0BAAAA,oCAAAA,cAAeO,aAAa,EAAiB;oBAAEH,WAAWb,SAASU,OAAO;gBAAC;gBAC1GK,iBAAAA,2BAAAA,KAAMD,KAAK;YACb;QACF;IACF;IAEA,MAAMG,uBAAuB/B,wBAAwB;QACnDgC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,OAAO;QACLxB,qBAAqBS;QACrBgB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMrC,KAAKsC,MAAM,CACfvC,yBAAyB,OAAO;YAC9B,cAAc;YACdW,KAAKN,cAAcM,KAAKK;YACxBwB,MAAM;YACN,GAAGP,oBAAoB;YACvB,GAAGvB,KAAK;QACV,IACA;YAAE+B,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeClasses,\n  slot,\n  useArrowNavigationGroup,\n  useEventCallback,\n  useFocusFinders,\n  useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowStyles as useAttachmentOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n  props: AttachmentListProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n  const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const [setTimeout] = useTimeout();\n  const { targetDocument } = useFluent();\n  const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n  const [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\n  const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n    if (!onAttachmentDismiss) {\n      return;\n    }\n\n    onAttachmentDismiss(e, data);\n\n    // set focus after attachment dismiss\n    const activeElement = targetDocument?.activeElement;\n    if (innerRef.current?.contains(activeElement as HTMLElement)) {\n      // focus on next attachment only if the active element is within the current attachment list\n      const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n      if (next) {\n        // focus on the overflow button if the next focusable element is the overflow button.\n        // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n        if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n          setTimeout(() => {\n            findLastFocusable(innerRef.current as HTMLElement)?.focus();\n          }, 0);\n        } else {\n          next.focus();\n        }\n      } else {\n        const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    } else {\n      // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n      setTimeout(() => {\n        findLastFocusable(innerRef.current as HTMLElement)?.focus();\n      }, 0);\n    }\n  });\n\n  const attachmentOverflowClassName = useAttachmentOverflowStyles().overflow;\n  const resolvedChildren = React.useMemo(() => {\n    if (maxVisibleAttachments !== undefined) {\n      const results = [];\n      const childrenArray = React.Children.toArray(children);\n      for (let index = 0; index < childrenArray.length; index++) {\n        const child = childrenArray[index] as React.ReactElement;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if (index >= maxVisibleAttachments && React.isValidElement<any>(child)) {\n          results.push(\n            React.cloneElement(child, {\n              ...child.props,\n              className: mergeClasses(child.props.className, attachmentOverflowClassName),\n            }),\n          );\n        } else {\n          results.push(child);\n        }\n      }\n\n      return results;\n    }\n    return children;\n  }, [attachmentOverflowClassName, children, maxVisibleAttachments]);\n\n  React.useEffect(() => {\n    if (resolvedChildren && Array.isArray(resolvedChildren)) {\n      setAttachments(resolvedChildren.map(child => child.props));\n    }\n  }, [resolvedChildren]);\n\n  const arrowNavigationProps = useArrowNavigationGroup({\n    circular: true,\n    axis: 'both',\n    memorizeCurrent: true,\n  });\n\n  const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n  return {\n    attachments,\n    onAttachmentDismiss: handleAttachmentDismiss,\n    shouldUseOverflow,\n    overflowMenuProps,\n    components: {\n      root: 'div',\n      overflowMenuButton: 'span',\n      overflowMenuItem: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        'aria-label': 'Attachments',\n        ref: useMergedRefs(ref, innerRef),\n        role: 'toolbar',\n        ...arrowNavigationProps,\n        ...props,\n        children: resolvedChildren,\n      }),\n      { elementType: 'div' },\n    ),\n    overflowMenuButton: slot.optional(props.overflowMenuButton, {\n      defaultProps: { children: <AttachmentOverflowMenuButton /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n    overflowMenuItem: slot.optional(props.overflowMenuItem, {\n      defaultProps: { children: <AttachmentOverflowMenuItem /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeClasses","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowStyles","useAttachmentOverflowStyles","AttachmentOverflowMenuButton","AttachmentOverflowMenuItem","attachmentOverflowMenuButtonClassNames","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","attachments","setAttachments","useState","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","attachmentOverflowClassName","overflow","resolvedChildren","useMemo","undefined","results","childrenArray","Children","toArray","index","length","child","isValidElement","push","cloneElement","className","useEffect","Array","isArray","map","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","components","overflowMenuButton","overflowMenuItem","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,YAAY,EACZC,IAAI,EACJC,uBAAuB,EACvBC,gBAAgB,EAChBC,eAAe,EACfC,aAAa,QACR,6BAA6B;AACpC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,qBAAqBC,2BAA2B,QAAQ,gBAAgB;AACjF,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,0BAA0B,QAAQ,gCAAgC;AAC3E,SAASC,sCAAsC,QAAQ,wEAAwE;AAI/H;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,qBAAqB,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGL;IACpF,MAAMM,WAAWvB,MAAMwB,MAAM,CAAiB;IAC9C,MAAM,CAACC,WAAW,GAAGf;IACrB,MAAM,EAAEgB,cAAc,EAAE,GAAGjB;IAC3B,MAAM,EAAEkB,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGvB;IACpE,MAAM,CAACwB,aAAaC,eAAe,GAAG/B,MAAMgC,QAAQ,CAAoB,EAAE;IAC1E,MAAMC,0BAAsE5B,iBAAiB,CAAC6B,GAAGC;YAS3FZ;QARJ,IAAI,CAACF,qBAAqB;YACxB;QACF;QAEAA,oBAAoBa,GAAGC;QAEvB,qCAAqC;QACrC,MAAMC,gBAAgBV,2BAAAA,qCAAAA,eAAgBU,aAAa;QACnD,KAAIb,oBAAAA,SAASc,OAAO,cAAhBd,wCAAAA,kBAAkBe,QAAQ,CAACF,gBAA+B;YAC5D,4FAA4F;YAC5F,MAAMG,OAAOZ,kBAAkBS,eAA8B;gBAAEI,WAAWjB,SAASc,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACR,qFAAqF;gBACrF,0GAA0G;gBAC1G,IAAIA,KAAKE,SAAS,CAACH,QAAQ,CAACvB,uCAAuC2B,IAAI,GAAG;oBACxEjB,WAAW;4BACTI;yBAAAA,qBAAAA,kBAAkBN,SAASc,OAAO,eAAlCR,yCAAAA,mBAAoDc,KAAK;oBAC3D,GAAG;gBACL,OAAO;oBACLJ,KAAKI,KAAK;gBACZ;YACF,OAAO;gBACL,MAAMC,OAAOhB,kBAAkBQ,0BAAAA,oCAAAA,cAAeS,aAAa,EAAiB;oBAAEL,WAAWjB,SAASc,OAAO;gBAAC;gBAC1GO,iBAAAA,2BAAAA,KAAMD,KAAK;YACb;QACF,OAAO;YACL,+IAA+I;YAC/IlB,WAAW;oBACTI;iBAAAA,qBAAAA,kBAAkBN,SAASc,OAAO,eAAlCR,yCAAAA,mBAAoDc,KAAK;YAC3D,GAAG;QACL;IACF;IAEA,MAAMG,8BAA8BlC,8BAA8BmC,QAAQ;IAC1E,MAAMC,mBAAmBhD,MAAMiD,OAAO,CAAC;QACrC,IAAI7B,0BAA0B8B,WAAW;YACvC,MAAMC,UAAU,EAAE;YAClB,MAAMC,gBAAgBpD,MAAMqD,QAAQ,CAACC,OAAO,CAACnC;YAC7C,IAAK,IAAIoC,QAAQ,GAAGA,QAAQH,cAAcI,MAAM,EAAED,QAAS;gBACzD,MAAME,QAAQL,aAAa,CAACG,MAAM;gBAClC,8DAA8D;gBAC9D,IAAIA,SAASnC,uCAAyBpB,MAAM0D,cAAc,CAAMD,QAAQ;oBACtEN,QAAQQ,IAAI,eACV3D,MAAM4D,YAAY,CAACH,OAAO;wBACxB,GAAGA,MAAMxC,KAAK;wBACd4C,WAAW3D,aAAauD,MAAMxC,KAAK,CAAC4C,SAAS,EAAEf;oBACjD;gBAEJ,OAAO;oBACLK,QAAQQ,IAAI,CAACF;gBACf;YACF;YAEA,OAAON;QACT;QACA,OAAOhC;IACT,GAAG;QAAC2B;QAA6B3B;QAAUC;KAAsB;IAEjEpB,MAAM8D,SAAS,CAAC;QACd,IAAId,oBAAoBe,MAAMC,OAAO,CAAChB,mBAAmB;YACvDjB,eAAeiB,iBAAiBiB,GAAG,CAACR,CAAAA,QAASA,MAAMxC,KAAK;QAC1D;IACF,GAAG;QAAC+B;KAAiB;IAErB,MAAMkB,uBAAuB9D,wBAAwB;QACnD+D,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,oBAAoBlD,0BAA0B8B;IAEpD,OAAO;QACLpB;QACAT,qBAAqBY;QACrBqC;QACAhD;QACAiD,YAAY;YACV7B,MAAM;YACN8B,oBAAoB;YACpBC,kBAAkB;QACpB;QACA/B,MAAMvC,KAAKuE,MAAM,CACfzE,yBAAyB,OAAO;YAC9B,cAAc;YACdiB,KAAKX,cAAcW,KAAKK;YACxBoD,MAAM;YACN,GAAGT,oBAAoB;YACvB,GAAGjD,KAAK;YACRE,UAAU6B;QACZ,IACA;YAAE4B,aAAa;QAAM;QAEvBJ,oBAAoBrE,KAAK0E,QAAQ,CAAC5D,MAAMuD,kBAAkB,EAAE;YAC1DM,cAAc;gBAAE3D,wBAAU,oBAACN;YAAgC;YAC3D+D,aAAa;YACbG,iBAAiB;QACnB;QACAN,kBAAkBtE,KAAK0E,QAAQ,CAAC5D,MAAMwD,gBAAgB,EAAE;YACtDK,cAAc;gBAAE3D,wBAAU,oBAACL;YAA8B;YACzD8D,aAAa;YACbG,iBAAiB;QACnB;IACF;AACF,EAAE"}

package/lib/components/AttachmentList/useAttachmentListContextValues.js

@@ -1,10 +1,12 @@
 export function useAttachmentListContextValues_unstable(state) {
   const {
-    onAttachmentDismiss
+    onAttachmentDismiss,
+    shouldUseOverflow
   } = state;
   // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
   const attachmentList = {
-    onAttachmentDismiss
+    onAttachmentDismiss,
+    shouldUseOverflow
   };
   return {
     attachmentList

package/lib/components/AttachmentList/useAttachmentListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentListContextValues.ts"],"sourcesContent":["import type { AttachmentListContextValues, AttachmentListState } from './AttachmentList.types';\n\nexport function useAttachmentListContextValues_unstable(state: AttachmentListState): AttachmentListContextValues {\n  const { onAttachmentDismiss } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentList = {\n    onAttachmentDismiss,\n  };\n\n  return { attachmentList };\n}\n"],"names":["useAttachmentListContextValues_unstable","state","onAttachmentDismiss","attachmentList"],"rangeMappings":";;;;;;;;;","mappings":"AAEA,OAAO,SAASA,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,mBAAmB,EAAE,GAAGD;IAEhC,mGAAmG;IACnG,MAAME,iBAAiB;QACrBD;IACF;IAEA,OAAO;QAAEC;IAAe;AAC1B"}
+{"version":3,"sources":["useAttachmentListContextValues.ts"],"sourcesContent":["import type { AttachmentListContextValues, AttachmentListState } from './AttachmentList.types';\n\nexport function useAttachmentListContextValues_unstable(state: AttachmentListState): AttachmentListContextValues {\n  const { onAttachmentDismiss, shouldUseOverflow } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentList = {\n    onAttachmentDismiss,\n    shouldUseOverflow,\n  };\n\n  return { attachmentList };\n}\n"],"names":["useAttachmentListContextValues_unstable","state","onAttachmentDismiss","shouldUseOverflow","attachmentList"],"rangeMappings":";;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGF;IAEnD,mGAAmG;IACnG,MAAMG,iBAAiB;QACrBF;QACAC;IACF;IAEA,OAAO;QAAEC;IAAe;AAC1B"}

package/lib/components/AttachmentList/useAttachmentListStyles.js

@@ -1,6 +1,8 @@
 import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
 export const attachmentListClassNames = {
-  root: 'fai-AttachmentList'
+  root: 'fai-AttachmentList',
+  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',
+  overflowMenuItem: 'fai-AttachmentList__overflowMenuItem'
 };
 const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"]);
 /**
@@ -9,6 +11,12 @@ const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-
 export const useAttachmentListStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
   state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+  if (state.overflowMenuButton) {
+    state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, state.overflowMenuButton.className);
+  }
+  if (state.overflowMenuItem) {
+    state.overflowMenuItem.className = mergeClasses(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
+  }
   return state;
 };
 //# sourceMappingURL=useAttachmentListStyles.js.map

package/lib/components/AttachmentList/useAttachmentListStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB;IAC3CM,WAAWJ,OAAOK,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQV,OAAOW,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBX;IAE1BU,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,yBAAyBC,IAAI,EAAEY,mBAAmBD,MAAMX,IAAI,CAACa,SAAS;IAE1G,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n  root: 'fai-AttachmentList',\n  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n  overflowMenuItem: 'fai-AttachmentList__overflowMenuItem',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  columnGap: tokens.spacingHorizontalSNudge,\n  display: 'flex',\n  flexDirection: 'row',\n  flexShrink: 0,\n  flexWrap: 'wrap',\n  rowGap: tokens.spacingVerticalXS,\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.overflowMenuButton) {\n    state.overflowMenuButton.className = mergeClasses(\n      attachmentListClassNames.overflowMenuButton,\n      state.overflowMenuButton.className,\n    );\n  }\n\n  if (state.overflowMenuItem) {\n    state.overflowMenuItem.className = mergeClasses(\n      attachmentListClassNames.overflowMenuItem,\n      state.overflowMenuItem.className,\n    );\n  }\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useAttachmentListStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,oBAAoB;IACpBC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,WAAWN,OAAOO,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQZ,OAAOa,iBAAiB;AAClC;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAMC,oBAAoBX;IAC1BU,MAAMb,IAAI,CAACe,SAAS,GAAGlB,aAAaE,yBAAyBC,IAAI,EAAEc,mBAAmBD,MAAMb,IAAI,CAACe,SAAS;IAE1G,IAAIF,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACc,SAAS,GAAGlB,aACnCE,yBAAyBE,kBAAkB,EAC3CY,MAAMZ,kBAAkB,CAACc,SAAS;IAEtC;IAEA,IAAIF,MAAMX,gBAAgB,EAAE;QAC1BW,MAAMX,gBAAgB,CAACa,SAAS,GAAGlB,aACjCE,yBAAyBG,gBAAgB,EACzCW,MAAMX,gBAAgB,CAACa,SAAS;IAEpC;IACA,OAAOF;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuState } from '../AttachmentOverflowMenu';\n\nexport type AttachmentOverflowMenuButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n};\n\n/**\n * AttachmentOverflowMenuButton Props\n */\nexport type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>>;\n\n/**\n * State used in rendering AttachmentOverflowMenuButton\n */\nexport type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> &\n  Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WACuE"}
+{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuState } from '../AttachmentOverflowMenu';\n\nexport type AttachmentOverflowMenuButtonSlots = {\n  root: NonNullable<Slot<'button'>>;\n  progress: NonNullable<Slot<typeof ProgressBar>>;\n};\n\n/**\n * AttachmentOverflowMenuButton Props\n */\nexport type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>> & {\n  /**\n   * Toggle prop to indicate that there are Attachments in the overflow menu that's currently loading.\n   * Setting this to true will show an indeterminate progress bar on the button.\n   * @default false\n   */\n  isLoading?: boolean;\n  text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering AttachmentOverflowMenuButton\n */\nexport type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> &\n  Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'> &\n  Pick<AttachmentOverflowMenuButtonProps, 'isLoading'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAqBA;;CAEC,GACD,WAEuD"}

package/lib/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js

@@ -7,7 +7,7 @@ export const renderAttachmentOverflowMenuButton_unstable = state => {
   assertSlots(state);
   return state.isOverflowing ? /*#__PURE__*/_jsx(MenuTrigger, {
     children: /*#__PURE__*/_jsxs(state.root, {
-      children: [" +", state.overflowCount, " "]
+      children: [state.root.children, state.isLoading && /*#__PURE__*/_jsx(state.progress, {})]
     })
   }) : null;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentOverflowMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuTrigger, assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonState,\n  AttachmentOverflowMenuButtonSlots,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuButton\n */\nexport const renderAttachmentOverflowMenuButton_unstable = (state: AttachmentOverflowMenuButtonState) => {\n  assertSlots<AttachmentOverflowMenuButtonSlots>(state);\n\n  return state.isOverflowing ? (\n    <MenuTrigger>\n      <state.root> +{state.overflowCount} </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["MenuTrigger","assertSlots","renderAttachmentOverflowMenuButton_unstable","state","isOverflowing","root","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,WAAW,QAAQ,6BAA6B;AAMtE;;CAEC,GACD,OAAO,MAAMC,8CAA8C,CAACC;IAC1DF,YAA+CE;IAE/C,OAAOA,MAAMC,aAAa,iBACxB,KAACJ;kBACC,cAAA,MAACG,MAAME,IAAI;;gBAAC;gBAAGF,MAAMG,aAAa;gBAAC;;;SAEnC;AACN,EAAE"}
+{"version":3,"sources":["renderAttachmentOverflowMenuButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { MenuTrigger, assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonState,\n  AttachmentOverflowMenuButtonSlots,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuButton\n */\nexport const renderAttachmentOverflowMenuButton_unstable = (state: AttachmentOverflowMenuButtonState) => {\n  assertSlots<AttachmentOverflowMenuButtonSlots>(state);\n\n  return state.isOverflowing ? (\n    <MenuTrigger>\n      <state.root>\n        {state.root.children}\n        {state.isLoading && <state.progress />}\n      </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["MenuTrigger","assertSlots","renderAttachmentOverflowMenuButton_unstable","state","isOverflowing","root","children","isLoading","progress"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,EAAEC,WAAW,QAAQ,6BAA6B;AAMtE;;CAEC,GACD,OAAO,MAAMC,8CAA8C,CAACC;IAC1DF,YAA+CE;IAE/C,OAAOA,MAAMC,aAAa,iBACxB,KAACJ;kBACC,cAAA,MAACG,MAAME,IAAI;;gBACRF,MAAME,IAAI,CAACC,QAAQ;gBACnBH,MAAMI,SAAS,kBAAI,KAACJ,MAAMK,QAAQ;;;SAGrC;AACN,EAAE"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -1,4 +1,4 @@
-import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';
+import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';
 import { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';
 /**
  * Create the state required to render AttachmentOverflowMenuButton.
@@ -10,23 +10,43 @@ import { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attach
  * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton
  */
 export const useAttachmentOverflowMenuButton_unstable = (props, ref) => {
+  const {
+    children,
+    text
+  } = props;
   const {
     isOverflowing,
     overflowCount,
     overflowButtonRef
   } = useAttachmentOverflowMenuContext_unstable(context => context);
+  const isLoading = !!props.isLoading;
+  const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
   return {
     components: {
-      root: 'button'
+      root: 'button',
+      progress: ProgressBar
     },
     root: slot.always(getIntrinsicElementProps('button', {
       ref: useMergedRefs(ref, overflowButtonRef),
       ...props
     }), {
+      defaultProps: {
+        children: processedText !== null && processedText !== void 0 ? processedText : `+${overflowCount}`
+      },
       elementType: 'button'
     }),
+    progress: slot.always(props.progress, {
+      defaultProps: {
+        value: undefined,
+        shape: 'square',
+        thickness: 'large',
+        'aria-label': 'Loading'
+      },
+      elementType: ProgressBar
+    }),
     isOverflowing,
-    overflowCount
+    overflowCount,
+    isLoading
   };
 };
 //# sourceMappingURL=useAttachmentOverflowMenuButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n    isOverflowing,\n    overflowCount,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","isOverflowing","overflowCount","overflowButtonRef","context","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AAC3F,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGN,0CAC1DO,CAAAA,UAAWA;IAGb,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMX,KAAKY,MAAM,CACfb,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKG;YACxB,GAAGJ,KAAK;QACV,IACA;YAAES,aAAa;QAAS;QAE1BP;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuButton.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n  props: AttachmentOverflowMenuButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n  const { children, text } = props;\n  const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const isLoading = !!props.isLoading;\n\n  const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { defaultProps: { children: processedText ?? `+${overflowCount}` }, elementType: 'button' },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    isOverflowing,\n    overflowCount,\n    isLoading,\n  };\n};\n"],"names":["ProgressBar","getIntrinsicElementProps","slot","useMergedRefs","useAttachmentOverflowMenuContext_unstable","useAttachmentOverflowMenuButton_unstable","props","ref","children","text","isOverflowing","overflowCount","overflowButtonRef","context","isLoading","processedText","components","root","progress","always","defaultProps","elementType","value","undefined","shape","thickness"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,WAAW,EAAEC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,6BAA6B;AACxG,SAASC,yCAAyC,QAAQ,+CAA+C;AAMzG;;;;;;;;CAQC,GACD,OAAO,MAAMC,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAC3B,MAAM,EAAEI,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGR,0CAC1DS,CAAAA,UAAWA;IAEb,MAAMC,YAAY,CAAC,CAACR,MAAMQ,SAAS;IAEnC,MAAMC,gBAAgBP,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKE,iBAAiBF;IACtF,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAUlB;QACZ;QACAiB,MAAMf,KAAKiB,MAAM,CACflB,yBAAyB,UAAU;YACjCM,KAAKJ,cAAcI,KAAKK;YACxB,GAAGN,KAAK;QACV,IACA;YAAEc,cAAc;gBAAEZ,UAAUO,0BAAAA,2BAAAA,gBAAiB,CAAC,CAAC,EAAEJ,cAAc,CAAC;YAAC;YAAGU,aAAa;QAAS;QAE5FH,UAAUhB,KAAKiB,MAAM,CAACb,MAAMY,QAAQ,EAAE;YACpCE,cAAc;gBAAEE,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FJ,aAAarB;QACf;QACAU;QACAC;QACAG;IACF;AACF,EAAE"}

package/lib/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.js

@@ -1,17 +1,35 @@
-import { __resetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';
+import { __resetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles';
 export const attachmentOverflowMenuButtonClassNames = {
-  root: 'fai-AttachmentOverflowMenuButton'
+  root: 'fai-AttachmentOverflowMenuButton',
+  progress: 'fai-AttachmentOverflowMenuButton__progress'
 };
-const useRootBaseClassName = __resetStyles("rkv09vy", null, {
-  r: [".rkv09vy{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalS);vertical-align:middle;align-self:end;}", ".rkv09vy:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".rkv09vy:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
-  s: ["@media (forced-colors: active){.rkv09vy:hover{background-color:HighlightText;}.rkv09vy:active{background-color:HighlightText;}}"]
+const useRootBaseClassName = __resetStyles("r1opa2g9", null, {
+  r: [".r1opa2g9{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);justify-content:center;padding:var(--spacingVerticalS);vertical-align:middle;align-self:end;position:relative;}", ".r1opa2g9:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2Hover);}", ".r1opa2g9:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2Pressed);}"],
+  s: ["@media (forced-colors: active){.r1opa2g9:hover{background-color:HighlightText;}.r1opa2g9:active{background-color:HighlightText;}}"]
 });
 /**
  * Apply styling to the AttachmentOverflowMenuButton slots based on the state
  */
 export const useAttachmentOverflowMenuButtonStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
+  const progressBarStyles = useProgressBarStyles();
   state.root.className = mergeClasses(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
+    const bar = slot.optional(state.progress.bar, {
+      elementType: 'div',
+      renderByDefault: true
+    });
+    if (bar) {
+      if (state.progress.value === undefined) {
+        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+      } else {
+        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+      }
+      state.progress.bar = bar;
+    }
+  }
   return state;
 };
 //# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\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  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: tokens.spacingVerticalS,\n  verticalAlign: 'middle',\n  alignSelf: 'end',\n\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 * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","typographyStyles","attachmentOverflowMenuButtonClassNames","root","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAOrG,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,OAAOL,OAAOM,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBR,OAAOS,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEV,OAAOW,eAAe,CAAC,OAAO,EAAEX,OAAOY,mBAAmB,CAAC,CAAC;IACvEC,cAAcb,OAAOc,kBAAkB;IACvCC,WAAW;IACXC,WAAWhB,OAAOiB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYpB,iBAAiBqB,KAAK,CAACD,UAAU;IAC7CE,UAAUtB,iBAAiBqB,KAAK,CAACC,QAAQ;IACzCC,YAAYvB,iBAAiBqB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS1B,OAAO2B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IAEX,UAAU;QACRX,QAAQ;QACRV,iBAAiBR,OAAO8B,4BAA4B;QACpDzB,OAAOL,OAAO+B,4BAA4B;IAC5C;IACA,WAAW;QACTvB,iBAAiBR,OAAOgC,8BAA8B;QACtD3B,OAAOL,OAAOiC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACRzB,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AACA;;CAEC,GACD,OAAO,MAAM0B,iDAAiD,CAC5DC;IAEA,MAAMC,oBAAoBhC;IAE1B+B,MAAMhC,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,uCAAuCC,IAAI,EAC3CiC,mBACAD,MAAMhC,IAAI,CAACkC,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  fontFamily: typographyStyles.body1.fontFamily,\n  fontSize: typographyStyles.body1.fontSize,\n  fontWeight: typographyStyles.body1.fontWeight,\n  justifyContent: 'center',\n  padding: tokens.spacingVerticalS,\n  verticalAlign: 'middle',\n  alignSelf: 'end',\n  position: 'relative',\n\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/**\n * Apply styling to the AttachmentOverflowMenuButton slots based on the state\n */\nexport const useAttachmentOverflowMenuButtonStyles_unstable = (\n  state: AttachmentOverflowMenuButtonState,\n): AttachmentOverflowMenuButtonState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuButtonClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","slot","tokens","typographyStyles","useProgressBarStyles","attachmentOverflowMenuButtonClassNames","root","progress","useRootBaseClassName","color","colorNeutralForeground1","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","boxSizing","columnGap","spacingHorizontalSNudge","cursor","display","flexWrap","fontFamily","body1","fontSize","fontWeight","justifyContent","padding","spacingVerticalS","verticalAlign","alignSelf","position","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useAttachmentOverflowMenuButtonStyles_unstable","state","rootBaseClassName","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,IAAI,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAC3G,SAASC,oBAAoB,QAAQ,gCAAgC;AAOrE,OAAO,MAAMC,yCAA4F;IACvGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,OAAOP,OAAOQ,uBAAuB;IACrCC,YAAY;IACZC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IACvEC,cAAcf,OAAOgB,kBAAkB;IACvCC,WAAW;IACXC,WAAWlB,OAAOmB,uBAAuB;IACzCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,YAAYtB,iBAAiBuB,KAAK,CAACD,UAAU;IAC7CE,UAAUxB,iBAAiBuB,KAAK,CAACC,QAAQ;IACzCC,YAAYzB,iBAAiBuB,KAAK,CAACE,UAAU;IAC7CC,gBAAgB;IAChBC,SAAS5B,OAAO6B,gBAAgB;IAChCC,eAAe;IACfC,WAAW;IACXC,UAAU;IAEV,UAAU;QACRZ,QAAQ;QACRV,iBAAiBV,OAAOiC,4BAA4B;QACpD1B,OAAOP,OAAOkC,4BAA4B;IAC5C;IACA,WAAW;QACTxB,iBAAiBV,OAAOmC,8BAA8B;QACtD5B,OAAOP,OAAOoC,8BAA8B;IAC9C;IACA,kCAAkC;QAChC,UAAU;YACR1B,iBAAiB;QACnB;QACA,WAAW;YACTA,iBAAiB;QACnB;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAM2B,iDAAiD,CAC5DC;IAEA,MAAMC,oBAAoBjC;IAC1B,MAAMkC,oBAAoBtC;IAE1BoC,MAAMlC,IAAI,CAACqC,SAAS,GAAG3C,aACrBK,uCAAuCC,IAAI,EAC3CmC,mBACAD,MAAMlC,IAAI,CAACqC,SAAS;IAGtB,IAAIH,MAAMjC,QAAQ,EAAE;QAClBiC,MAAMjC,QAAQ,CAACoC,SAAS,GAAG3C,aACzBK,uCAAuCE,QAAQ,EAC/CmC,kBAAkBnC,QAAQ,EAC1BiC,MAAMjC,QAAQ,CAACoC,SAAS;QAG1B,MAAMC,MAAM3C,KAAK4C,QAAQ,CAACL,MAAMjC,QAAQ,CAACqC,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAMjC,QAAQ,CAACyC,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAG3C,aAAa0C,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAMjC,QAAQ,CAACqC,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\n\nexport type AttachmentOverflowMenuItemSlots = {\n  root: NonNullable<Slot<typeof MenuItem>>;\n};\n\n/**\n * AttachmentOverflowMenuItem Props\n */\nexport type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> &\n  Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;\n\n/**\n * State used in rendering AttachmentOverflowMenuItem\n */\nexport type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> &\n  Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {\n    isVisible: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAaA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["AttachmentOverflowMenuItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuItem, ProgressBar, Slot } from '@fluentui/react-components';\nimport type { AttachmentProps } from '../Attachment';\n\nexport type AttachmentOverflowMenuItemSlots = {\n  root: NonNullable<Slot<typeof MenuItem>>;\n  progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * AttachmentOverflowMenuItem Props\n */\nexport type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> &\n  Pick<AttachmentProps, 'id' | 'media' | 'imageOnly'>;\n\n/**\n * State used in rendering AttachmentOverflowMenuItem\n */\nexport type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> &\n  Pick<AttachmentOverflowMenuItemProps, 'imageOnly'> & {\n    isVisible: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAcA;;CAEC,GACD,WAGI"}

package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js

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

package/lib/components/AttachmentOverflowMenuItem/renderAttachmentOverflowMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentOverflowMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuItemState,\n  AttachmentOverflowMenuItemSlots,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuItem\n */\nexport const renderAttachmentOverflowMenuItem_unstable = (state: AttachmentOverflowMenuItemState) => {\n  assertSlots<AttachmentOverflowMenuItemSlots>(state);\n\n  return !state.isVisible ? <state.root /> : null;\n};\n"],"names":["assertSlots","renderAttachmentOverflowMenuItem_unstable","state","isVisible","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAMzD;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDF,YAA6CE;IAE7C,OAAO,CAACA,MAAMC,SAAS,iBAAG,KAACD,MAAME,IAAI,QAAM;AAC7C,EAAE"}
+{"version":3,"sources":["renderAttachmentOverflowMenuItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type {\n  AttachmentOverflowMenuItemState,\n  AttachmentOverflowMenuItemSlots,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Render the final JSX of AttachmentOverflowMenuItem\n */\nexport const renderAttachmentOverflowMenuItem_unstable = (state: AttachmentOverflowMenuItemState) => {\n  assertSlots<AttachmentOverflowMenuItemSlots>(state);\n\n  return !state.isVisible ? (\n    <state.root>\n      {state.root.children}\n      {state.progress && <state.progress />}\n    </state.root>\n  ) : null;\n};\n"],"names":["assertSlots","renderAttachmentOverflowMenuItem_unstable","state","isVisible","root","children","progress"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAMzD;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CAACC;IACxDF,YAA6CE;IAE7C,OAAO,CAACA,MAAMC,SAAS,iBACrB,MAACD,MAAME,IAAI;;YACRF,MAAME,IAAI,CAACC,QAAQ;YACnBH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;;SAElC;AACN,EAAE"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';
+import { MenuItem, ProgressBar, mergeCallbacks, slot, useId, useIsOverflowItemVisible } from '@fluentui/react-components';
 import { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';
+import { useOverflowContext } from '@fluentui/react-overflow';
 import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
  * Create the state required to render AttachmentOverflowMenuItem.
@@ -13,29 +14,51 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
  */
 export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
   const {
-    id,
     imageOnly,
     media
   } = props;
   const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
-  const isVisible = useIsOverflowItemVisible(id);
-  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
+  const menuItemId = useId('attachment-', props.id);
+  const isVisible = useIsOverflowItemVisible(menuItemId);
+  const {
+    onAttachmentDismiss,
+    shouldUseOverflow
+  } = useAttachmentListContext_unstable(context => context);
+  const attachmentsVisibilityStatus = useOverflowContext(context => context.itemVisibility);
   const root = slot.always({
     ref,
     icon: media,
     secondaryContent: /*#__PURE__*/React.createElement(DismissIcon, null),
-    ...props
+    ...props,
+    id: menuItemId
   }, {
     elementType: MenuItem
   });
-  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-    id
-  }));
+  root.onClick = mergeCallbacks(root.onClick, ev => {
+    onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+      content: props.children,
+      media,
+      id: menuItemId
+    });
+    if (shouldUseOverflow) {
+      delete attachmentsVisibilityStatus[menuItemId];
+    }
+  });
+  const progress = slot.optional(props.progress, {
+    defaultProps: {
+      shape: 'square',
+      thickness: 'large',
+      'aria-labelledby': props.id
+    },
+    elementType: ProgressBar
+  });
   return {
     components: {
-      root: MenuItem
+      root: MenuItem,
+      progress: ProgressBar
     },
     root,
+    progress,
     isVisible,
     imageOnly
   };

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, mergeCallbacks, slot, useIsOverflowItemVisible } from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { id, imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const isVisible = useIsOverflowItemVisible(id);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev =>\n    onAttachmentDismiss?.(ev, {\n      id,\n    }),\n  );\n\n  return {\n    components: {\n      root: MenuItem,\n    },\n    root,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["React","MenuItem","mergeCallbacks","slot","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","id","imageOnly","media","DismissIcon","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,EAAEC,cAAc,EAAEC,IAAI,EAAEC,wBAAwB,QAAQ,6BAA6B;AACtG,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IACjC,MAAMK,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,YAAYZ,yBAAyBQ;IAE3C,MAAMK,sBAAsBT,kCAAkCU,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOhB,KAAKiB,MAAM,CACtB;QAAET;QAAKU,MAAMP;QAAOQ,gCAAkB,oBAACP;QAAgB,GAAGL,KAAK;IAAC,GAChE;QAAEa,aAAatB;IAAS;IAE1BkB,KAAKK,OAAO,GAAGtB,eAAeiB,KAAKK,OAAO,EAAEC,CAAAA,KAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YACxBb;QACF;IAGF,OAAO;QACLc,YAAY;YACVP,MAAMlB;QACR;QACAkB;QACAH;QACAH;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuItem,\n  ProgressBar,\n  mergeCallbacks,\n  slot,\n  useId,\n  useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Filled, Dismiss20Regular, bundleIcon } from '@fluentui/react-icons';\nimport { useOverflowContext } from '@fluentui/react-overflow';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n  AttachmentOverflowMenuItemProps,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n  props: AttachmentOverflowMenuItemProps,\n  ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n  const { imageOnly, media } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  const menuItemId = useId('attachment-', props.id);\n  const isVisible = useIsOverflowItemVisible(menuItemId);\n  const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n\n  const attachmentsVisibilityStatus: Record<string, boolean> = useOverflowContext(context => context.itemVisibility);\n\n  const root = slot.always(\n    { ref, icon: media, secondaryContent: <DismissIcon />, ...props, id: menuItemId },\n    { elementType: MenuItem },\n  );\n  root.onClick = mergeCallbacks(root.onClick, ev => {\n    onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n    if (shouldUseOverflow) {\n      delete attachmentsVisibilityStatus[menuItemId];\n    }\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  return {\n    components: {\n      root: MenuItem,\n      progress: ProgressBar,\n    },\n    root,\n    progress,\n    isVisible,\n    imageOnly,\n  };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useId","useIsOverflowItemVisible","Dismiss20Filled","Dismiss20Regular","bundleIcon","useOverflowContext","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","DismissIcon","menuItemId","id","isVisible","onAttachmentDismiss","shouldUseOverflow","context","attachmentsVisibilityStatus","itemVisibility","root","always","icon","secondaryContent","elementType","onClick","ev","content","children","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,KAAK,EACLC,wBAAwB,QACnB,6BAA6B;AACpC,SAASC,eAAe,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IAC7B,MAAMI,cAAcR,WAAWF,iBAAiBC;IAChD,MAAMU,aAAab,MAAM,eAAeQ,MAAMM,EAAE;IAChD,MAAMC,YAAYd,yBAAyBY;IAC3C,MAAM,EAAEG,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGX,kCAAkCY,CAAAA,UAAWA;IAEhG,MAAMC,8BAAuDd,mBAAmBa,CAAAA,UAAWA,QAAQE,cAAc;IAEjH,MAAMC,OAAOtB,KAAKuB,MAAM,CACtB;QAAEb;QAAKc,MAAMZ;QAAOa,gCAAkB,oBAACZ;QAAgB,GAAGJ,KAAK;QAAEM,IAAID;IAAW,GAChF;QAAEY,aAAa7B;IAAS;IAE1ByB,KAAKK,OAAO,GAAG5B,eAAeuB,KAAKK,OAAO,EAAEC,CAAAA;QAC1CX,gCAAAA,0CAAAA,oBAAsBW,IAAI;YAAEC,SAASpB,MAAMqB,QAAQ;YAAElB;YAAOG,IAAID;QAAW;QAC3E,IAAII,mBAAmB;YACrB,OAAOE,2BAA2B,CAACN,WAAW;QAChD;IACF;IAEA,MAAMiB,WAAW/B,KAAKgC,QAAQ,CAACvB,MAAMsB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmB1B,MAAMM,EAAE;QAC7B;QACAW,aAAa5B;IACf;IAEA,OAAO;QACLsC,YAAY;YACVd,MAAMzB;YACNkC,UAAUjC;QACZ;QACAwB;QACAS;QACAf;QACAL;IACF;AACF,EAAE"}

package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItemStyles.js

@@ -1,8 +1,9 @@
-import { __resetStyles, __styles, mergeClasses } from '@fluentui/react-components';
+import { __styles, mergeClasses, slot } from '@fluentui/react-components';
+import { useProgressBarStyles } from '../utils/useProgressBarStyles';
 export const attachmentOverflowMenuItemClassNames = {
-  root: 'fai-AttachmentOverflowMenuItem'
+  root: 'fai-AttachmentOverflowMenuItem',
+  progress: 'fai-AttachmentOverflowMenuItem__progress'
 };
-const useRootBaseClassName = __resetStyles("r0", null, []);
 const useStyles = __styles({
   imageOnly: {
     Bt984gj: "f122n59"
@@ -17,9 +18,24 @@ export const useAttachmentOverflowMenuItemStyles_unstable = state => {
   const {
     imageOnly
   } = state;
-  const rootBaseClassName = useRootBaseClassName();
   const styles = useStyles();
-  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, rootBaseClassName, imageOnly && styles.imageOnly, state.root.className);
+  const progressBarStyles = useProgressBarStyles();
+  state.root.className = mergeClasses(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, state.root.className);
+  if (state.progress) {
+    state.progress.className = mergeClasses(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
+    const bar = slot.optional(state.progress.bar, {
+      elementType: 'div',
+      renderByDefault: true
+    });
+    if (bar) {
+      if (state.progress.value === undefined) {
+        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);
+      } else {
+        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);
+      }
+      state.progress.bar = bar;
+    }
+  }
   return state;
 };
 //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map

package/lib/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":["makeResetStyles","makeStyles","mergeClasses","attachmentOverflowMenuItemClassNames","root","useRootBaseClassName","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","rootBaseClassName","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AAOvF,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBL,gBAAgB,CAAC;AAC9C,MAAMM,YAAYL,WAAW;IAC3BM,WAAW;QACTC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,oBAAoBN;IAC1B,MAAMO,SAASN;IAEfI,MAAMN,IAAI,CAACS,SAAS,GAAGX,aACrBC,qCAAqCC,IAAI,EACzCO,mBACAJ,aAAaK,OAAOL,SAAS,EAC7BG,MAAMN,IAAI,CAACS,SAAS;IAGtB,OAAOH;AACT,EAAE"}
+{"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":["makeStyles","mergeClasses","slot","useProgressBarStyles","attachmentOverflowMenuItemClassNames","root","progress","useStyles","imageOnly","alignItems","useAttachmentOverflowMenuItemStyles_unstable","state","styles","progressBarStyles","className","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,6BAA6B;AAC5E,SAASC,oBAAoB,QAAQ,gCAAgC;AAOrE,OAAO,MAAMC,uCAAwF;IACnGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BQ,WAAW;QACTC,YAAY;IACd;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAC1DC;IAEA,MAAM,EAAEH,SAAS,EAAE,GAAGG;IACtB,MAAMC,SAASL;IACf,MAAMM,oBAAoBV;IAE1BQ,MAAMN,IAAI,CAACS,SAAS,GAAGb,aACrBG,qCAAqCC,IAAI,EACzCG,aAAaI,OAAOJ,SAAS,EAC7BG,MAAMN,IAAI,CAACS,SAAS;IAGtB,IAAIH,MAAML,QAAQ,EAAE;QAClBK,MAAML,QAAQ,CAACQ,SAAS,GAAGb,aACzBG,qCAAqCE,QAAQ,EAC7CO,kBAAkBP,QAAQ,EAC1BK,MAAML,QAAQ,CAACQ,SAAS;QAG1B,MAAMC,MAAMb,KAAKc,QAAQ,CAACL,MAAML,QAAQ,CAACS,GAAG,EAAE;YAAEE,aAAa;YAAOC,iBAAiB;QAAK;QAC1F,IAAIH,KAAK;YACP,IAAIJ,MAAML,QAAQ,CAACa,KAAK,KAAKC,WAAW;gBACtCL,IAAID,SAAS,GAAGb,aAAaY,kBAAkBQ,wBAAwB,EAAEN,IAAID,SAAS;YACxF,OAAO;gBACLC,IAAID,SAAS,GAAGb,aAAaY,kBAAkBS,kBAAkB,EAAEP,IAAID,SAAS;YAClF;YACAH,MAAML,QAAQ,CAACS,GAAG,GAAGA;QACvB;IACF;IAEA,OAAOJ;AACT,EAAE"}