@fluentui-copilot/react-attachments 0.9.3 → 0.9.5

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 _useAttachmentOverflowMenuButtonStylesstyles = require("../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles");
 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(_useAttachmentOverflowMenuButtonStylesstyles.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

package/lib-commonjs/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":["onAttachmentDismiss","props","React","attachmentsVisibilityStatus","findPrevFocusable","useFocusFinders","innerRef","handleAttachmentDismiss","useEventCallback","e","data","_innerRef_current","container","id","targetDocument","activeElement","current","contains","next","focus","arrowNavigationProps","circular","parentElement","axis","memorizeCurrent","prev","useArrowNavigationGroup","root","slot","always","getIntrinsicElementProps","ref","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BUA;;;eAAAA;;;;iEA1Ba;iCAQhB;qCACyC;+BACb;AAgBjC,MAAQA,6BAAwBC,CAAAA,OAAAA;UAEhC,EAEAD,mBAAiBE,KACjBD;UACAE,8BAA2BC,IAAAA,iCAAsBC,EAAAA,CAAAA,UAAAA,QAAAA,cAAAA;UAEjDC,WAAMC,OAAAA,MAAAA,CAAAA;0BACCP,gDACH;UACF,mBAEAA,mBAEA,yCACOG;UAEPI,0BAAAC,IAAAA,iCAAqC,EAAA,CAAAC,GAAAC;YACrCC;YACA,CAAAX,qBAAIM;;;4BAE6DM,GAAWN;kDAAiB;wCAEjF,QAAAH,gCAAA,KAAA,IAAA,OAAA,OAAAA,2BAAA,CAAAO,KAAAG,EAAA,CAAA;6CACE;8BACVC,mBAAA,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAC,aAAA;iCACKT,SAAAU,OAAA,MAAA,QAAAL,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAM,QAAA,CAAAF,gBAAA;wGAC0BA;2CAA0DT,eAAgB;2BAACA,SAAAU,OAAA;;sBAE5G;gBACFE,KAAAC,KAAA;gBACF;YAEA,OAAMC;gBACJC,MAAAA,OAAUjB,kBAAAW,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAO,aAAA,EAAA;oBACVC,WAAMjB,SAAAU,OAAA;gBACNQ;gBACFC,SAAA,QAAAA,SAAA,KAAA,IAAA,KAAA,IAAAA,KAAAN,KAAA;YAEA;;;iCAGUO,IAAAA,wCAAA,EAAA;kBACR;cACAC;yBAEI;;;6BAGGP;oBACAnB;kBAEL;;cAAqB2B,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,OAAA;YAEzB,cAAA;YACAC,KAAAC,IAAAA,8BAAA,EAAAD,KAAAzB"}
+{"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.styles';\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":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","findNextFocusable","overflowMenuProps","attachments","innerRef","activeElement","next","container","current","useState","useEventCallback","e","data","findLastFocusable","_innerRef_current","contains","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","attachmentOverflowClassName","undefined","React","isValidElement","useAttachmentOverflowStyles","overflow","useMemo","child","childrenArray","Children","toArray","index","results","useEffect","resolvedChildren","useArrowNavigationGroup","circular","axis","Array","isArray","memorizeCurrent","map","shouldUseOverflow","arrowNavigationProps","components","overflowMenuItem","ref","elementType","overflowMenuButton","slot","defaultProps","optional","createElement","AttachmentOverflowMenuButton","AttachmentOverflowMenuItem"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgCUA;;;eAAAA;;;;iEAhCa;iCAShB;qCACyC;gCACrB;4BACsC;8CACpB;4CACF;6DACY;AAiBrD,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EACRF,mBAAQG,EACRC,iBAAOC,KACPN;qBASMO,OAAAA,MAAAA,CAAAA;UARJ,CAAAL,WAAKD,GAAAA,IAAAA,0BAAAA;0BAEL,gDAEAA;UAEA,mBACMO,mBACFD,mBACF,yCACME;wBAAyDC,eAAoBC,GAAAA,OAAOC,QAAA,CAAA,EAAA;oCAACC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEb,GAAAA;6CACEc;8BAAAA,mBAAAA,QAAAA,mBAAkBT,KAASI,IAAO,KAAA,IAAAR,eAAlCa,aAAAA;iCACCT,SAAAI,OAAA,MAAA,QAAAM,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAV,gBAAA;wGACE;2CACKA,eAAA;2BACZD,SAAAI,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GQ,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAL,kBAAAT,SAAAI,OAAA,CAAA,MAAA,QAAAU,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEc;;mBAEJ;gBACF,MAAAG,OAAAI,kBAAAf,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAgB,aAAA,EAAA;oBAEMC,WAAAA,SAAAA,OAAAA;gBACN;gBACEN,SAAIpB,QAAAA,SAAAA,KAA0B2B,IAAAA,KAAAA,IAAWP,KAAAG,KAAA;;;2JAGoB;uBACzD;;sCAEavB,kBAAAA,SAAAA,OAAAA,CAAAA,MAAyB4B,QAAMC,uBAA4B,KAAA,IAAA,KAAA,IAAAP,mBAAAC,KAAA;;;;wCAKpEO,IAAAA,6BAAA,IAAAC,QAAA;6BAEGH,OAAAI,OAAA,CAAA;sCACQC,WAAAA;4BACf,EAAA;kBACFC,gBAAAN,OAAAO,QAAA,CAAAC,OAAA,CAAArC;oBAEAsC,QAAOC,GAAAA,QAAAA,cAAAA,MAAAA,EAAAA,QAAAA;gBACT,MAAAL,QAAAC,aAAA,CAAAG,MAAA;gBACA,8DAAOtC;gBACN,IAAAsC,SAAArC,yBAAA,WAAA,GAAA4B,OAAAC,cAAA,CAAAI,QAAA;oBAACP,QAAAA,IAAAA,CAAAA,WAAAA,GAAAA,OAAAA,YAAAA,CAAAA,OAAAA;wBAA6B3B,GAAAA,MAAAA,KAAAA;wBAAUC,WAAAA,IAAAA,6BAAAA,EAAAA,MAAAA,KAAAA,CAAAA,SAAAA,EAAAA;oBAAsB;gBAEjE4B,OAAMW;oBACJD,QAAIE,IAAAA,CAAAA;;;YAGN,OAAGF;;eAAkBvC;OAErB;QAAA2B;QAA6Be;QAAAA;KAAwB;WACnDC,SAAAA,CAAU;YACVC,oBAAMC,MAAAC,OAAA,CAAAL,mBAAA;2BACNM,iBAAiBC,GAAA,CAAAd,CAAAA,QAAAA,MAAAhC,KAAA;QACnB;OAEA;QAAAuC;KAAMQ;UAENC,uBAAOR,IAAAA,wCAAA,EAAA;kBACLlC;cACAL;yBACA8C;;UAEAE,oBAAYlD,0BAAA2B;;;6BAGVwB;;;oBAIE;kBACAC;gCACM;8BACHH;;mCAEHlD,CAAAA,MAAAA,CAAUyC,IAAAA,yCAAAA,EAAAA,OAAAA;0BAEZ;mDAAEa,EAAaD,KAAA5C;kBAAM;eAEvB8C,oBAAoBC;oBAClBC;sBAAgBzD;;yBAChBsD;;4BAEFE,qBAAA,CAAAE,QAAA,CAAAxD,MAAAqD,kBAAA,EAAA;0BACAH;0BACEK,WAAc,GAAA5B,OAAA8B,aAAA,CAAAC,0DAAA,EAAA;;yBAA2C;6BACzDN;;0BAEFE,qBAAA,CAAAE,QAAA,CAAAxD,MAAAkD,gBAAA,EAAA;YACFK,cAAA;gBACAzD,UAAA,WAAA,GAAA6B,OAAA8B,aAAA,CAAAE,sDAAA,EAAA"}

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

@@ -9,10 +9,11 @@ Object.defineProperty(exports, "useAttachmentListContextValues_unstable", {
     }
 });
 function useAttachmentListContextValues_unstable(state) {
-    const { onAttachmentDismiss } = state;
+    const { 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-commonjs/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":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,wCAAwCC,KAA0B;UAChF,EAEAC,mBAAA,KACAD;uGACEC;UACFC,iBAAA;QAEAD;;WAAwB;QAC1BC"}
+{"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":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,wCAAwCC,KAA0B;UAChF,EAEAC,mBAAA,EACAC,iBAAMC;uGAEJD;UACFC,iBAAA;QAEAF;;;IACF,OAAA"}

package/lib-commonjs/components/AttachmentList/{useAttachmentListStyles.js → useAttachmentListStyles.styles.js}

@@ -18,13 +18,22 @@ _export(exports, {
 });
 const _reactcomponents = require("@fluentui/react-components");
 const attachmentListClassNames = {
-    root: 'fai-AttachmentList'
+    root: 'fai-AttachmentList',
+    overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',
+    overflowMenuItem: 'fai-AttachmentList__overflowMenuItem'
 };
 const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", null, [
     ".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"
 ]);
 const useAttachmentListStyles_unstable = (state)=>{
+    'use no memo';
     const rootBaseClassName = useRootBaseClassName();
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+    if (state.overflowMenuButton) {
+        state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, state.overflowMenuButton.className);
+    }
+    if (state.overflowMenuItem) {
+        state.overflowMenuItem.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
+    }
     return state;
-}; //# sourceMappingURL=useAttachmentListStyles.js.map
+}; //# sourceMappingURL=useAttachmentListStyles.styles.js.map

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListStyles.styles.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  'use no memo';\n\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":["attachmentListClassNames","flexShrink","root","overflowMenuButton","overflowMenuItem","useRootBaseClassName","makeResetStyles","state","rootBaseClassName","className","mergeClasses","useAttachmentListStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAUXC,gCAAY;eAAZA;;;iCAd4C;AAIvC,MAAMD,2BAAgE;UAC3EE;wBACAC;sBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;AAI3CL,MAAAA,mCAAYM,CAAAA;;IAGd,MAAAC,oBAAAH;IAEAE,MAAAL,IAAA,CAAAO,SAAA,GAAAC,IAAAA,6BAAA,EAAAV,yBAAAE,IAAA,EAAAM,mBAAAD,MAAAL,IAAA,CAAAO,SAAA;;QAGAF,MAAAJ,kBAAaQ,CAAAA,SAAAA,GAAAA,IAAAA,6BAAoCJ,EAAAA,yBAAAA,kBAAAA,EAAAA,MAAAA,kBAAAA,CAAAA,SAAAA;;QAG/CA,MAAMC,gBAAAA,EAAoBH;QAC1BE,MAAML,gBAAc,CAAGQ,SAAAA,GAAAA,IAAAA,6BAAaV,EAAAA,yBAA+BQ,gBAAmBD,EAAAA,MAAWE,gBAAS,CAAAA,SAAA;;WAGxGF;6DAM0B"}

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

@@ -12,10 +12,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useAttachmentOverflowMenuButton = require("./useAttachmentOverflowMenuButton");
 const _renderAttachmentOverflowMenuButton = require("./renderAttachmentOverflowMenuButton");
-const _useAttachmentOverflowMenuButtonStyles = require("./useAttachmentOverflowMenuButtonStyles");
+const _useAttachmentOverflowMenuButtonStylesstyles = require("./useAttachmentOverflowMenuButtonStyles.styles");
 const AttachmentOverflowMenuButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useAttachmentOverflowMenuButton.useAttachmentOverflowMenuButton_unstable)(props, ref);
-    (0, _useAttachmentOverflowMenuButtonStyles.useAttachmentOverflowMenuButtonStyles_unstable)(state);
+    (0, _useAttachmentOverflowMenuButtonStylesstyles.useAttachmentOverflowMenuButtonStyles_unstable)(state);
     return (0, _renderAttachmentOverflowMenuButton.renderAttachmentOverflowMenuButton_unstable)(state);
 });
 AttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton'; //# sourceMappingURL=AttachmentOverflowMenuButton.js.map

package/lib-commonjs/components/AttachmentOverflowMenuButton/AttachmentOverflowMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentOverflowMenuButton_unstable } from './useAttachmentOverflowMenuButton';\nimport { renderAttachmentOverflowMenuButton_unstable } from './renderAttachmentOverflowMenuButton';\nimport { useAttachmentOverflowMenuButtonStyles_unstable } from './useAttachmentOverflowMenuButtonStyles';\nimport type { AttachmentOverflowMenuButtonProps } from './AttachmentOverflowMenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentOverflowMenuButton: ForwardRefComponent<AttachmentOverflowMenuButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useAttachmentOverflowMenuButton_unstable(props, ref);\n\n    useAttachmentOverflowMenuButtonStyles_unstable(state);\n    return renderAttachmentOverflowMenuButton_unstable(state);\n  },\n);\n\nAttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton';\n"],"names":["AttachmentOverflowMenuButton","React","forwardRef","props","state","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","renderAttachmentOverflowMenuButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;iDACkC;oDACG;uDACG;AAIxD,MAAMA,+BAAAA,WAAAA,GAAAA,OAAuFC,UAAMC,CAAU,CAClHC,OAACA;UACCC,QAAMA,IAAAA,yEAAQC,EAAAA,OAAyCF;6FAEvDG,EAAAA;WACAC,IAAAA,+EAAOA,EAAAA;AACT;AAGFP,6BAA6BQ,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentOverflowMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentOverflowMenuButton_unstable } from './useAttachmentOverflowMenuButton';\nimport { renderAttachmentOverflowMenuButton_unstable } from './renderAttachmentOverflowMenuButton';\nimport { useAttachmentOverflowMenuButtonStyles_unstable } from './useAttachmentOverflowMenuButtonStyles.styles';\nimport type { AttachmentOverflowMenuButtonProps } from './AttachmentOverflowMenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentOverflowMenuButton: ForwardRefComponent<AttachmentOverflowMenuButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useAttachmentOverflowMenuButton_unstable(props, ref);\n\n    useAttachmentOverflowMenuButtonStyles_unstable(state);\n    return renderAttachmentOverflowMenuButton_unstable(state);\n  },\n);\n\nAttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton';\n"],"names":["AttachmentOverflowMenuButton","React","forwardRef","props","state","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","renderAttachmentOverflowMenuButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;iDACkC;oDACG;6DACG;AAIxD,MAAMA,+BAAAA,WAAAA,GAAAA,OAAuFC,UAAMC,CAAU,CAClHC,OAACA;UACCC,QAAMA,IAAAA,yEAAQC,EAAAA,OAAyCF;mGAEvDG,EAAAA;WACAC,IAAAA,+EAAOA,EAAAA;AACT;AAGFP,6BAA6BQ,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"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};\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":"AAoBA;;CAEC"}
+{"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"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/index.js

@@ -7,5 +7,5 @@ _export_star._(require("./AttachmentOverflowMenuButton"), exports);
 _export_star._(require("./AttachmentOverflowMenuButton.types"), exports);
 _export_star._(require("./renderAttachmentOverflowMenuButton"), exports);
 _export_star._(require("./useAttachmentOverflowMenuButton"), exports);
-_export_star._(require("./useAttachmentOverflowMenuButtonStyles"), exports);
+_export_star._(require("./useAttachmentOverflowMenuButtonStyles.styles"), exports);
  //# sourceMappingURL=index.js.map

package/lib-commonjs/components/AttachmentOverflowMenuButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentOverflowMenuButton';\nexport * from './AttachmentOverflowMenuButton.types';\nexport * from './renderAttachmentOverflowMenuButton';\nexport * from './useAttachmentOverflowMenuButton';\nexport * from './useAttachmentOverflowMenuButtonStyles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentOverflowMenuButton';\nexport * from './AttachmentOverflowMenuButton.types';\nexport * from './renderAttachmentOverflowMenuButton';\nexport * from './useAttachmentOverflowMenuButton';\nexport * from './useAttachmentOverflowMenuButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/renderAttachmentOverflowMenuButton.js

@@ -15,8 +15,7 @@ const renderAttachmentOverflowMenuButton_unstable = (state)=>{
     return state.isOverflowing ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.MenuTrigger, {
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
             children: [
-                "+",
-                state.overflowCount,
+                state.root.children,
                 state.isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.progress, {})
             ]
         })

package/lib-commonjs/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>\n        +{state.overflowCount}\n        {state.isLoading && <state.progress />}\n      </state.root>\n    </MenuTrigger>\n  ) : null;\n};\n"],"names":["assertSlots","state","root","MenuTrigger","overflowCount","isLoading","_jsx","progress"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaEA;;;eAAAA;;;4BAZF;iCAEyC;AAUvCA,MAAAA,8CAA+CC,CAAAA;oCAExCA,EAAAA;8BAEH,GAAA,WAACA,GAAMC,IAAAA,eAAI,EAAAC,4BAAA,EAAA;;sBAAC;gBAAA;gBAAAF,MAAAG,aAAA;gBAAAH,MAAAI,SAAA,IAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAL,MAAAM,QAAA,EAAA,CAAA;aAAA"}
+{"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":["assertSlots","state","root","MenuTrigger","children","isLoading","_jsx","progress"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaEA;;;eAAAA;;;4BAZF;iCAEyC;AAUvCA,MAAAA,8CAA+CC,CAAAA;oCAExCA,EAAAA;8BAEH,GAAA,WAACA,GAAMC,IAAAA,eAAI,EAAAC,4BAAA,EAAA;;sBACRF;gBAAAA,MAAMC,IAAKE,CAAAA,QAAQ;gBAAAH,MAAAI,SAAA,IAAA,WAAA,GAAAC,IAAAA,eAAA,EAAAL,MAAAM,QAAA,EAAA,CAAA;aAAA;;;iEAItB"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/useAttachmentOverflowMenuButton.js

@@ -11,8 +11,10 @@ Object.defineProperty(exports, "useAttachmentOverflowMenuButton_unstable", {
 const _reactcomponents = require("@fluentui/react-components");
 const _attachmentOverflowMenuContext = require("../../contexts/attachmentOverflowMenuContext");
 const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
+    const { children, text } = props;
     const { isOverflowing, overflowCount, overflowButtonRef } = (0, _attachmentOverflowMenuContext.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',
@@ -22,6 +24,9 @@ const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
             ref: (0, _reactcomponents.useMergedRefs)(ref, overflowButtonRef),
             ...props
         }), {
+            defaultProps: {
+                children: processedText !== null && processedText !== void 0 ? processedText : `+${overflowCount}`
+            },
             elementType: 'button'
         }),
         progress: _reactcomponents.slot.always(props.progress, {

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

@@ -1 +1 @@
-{"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 { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n    context => context,\n  );\n  const isLoading = !!props.isLoading;\n\n  return {\n    components: {\n      root: 'button',\n      progress: ProgressBar,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref: useMergedRefs(ref, overflowButtonRef),\n        ...props,\n      }),\n      { 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":["isOverflowing","overflowButtonRef","useAttachmentOverflowMenuContext_unstable","components","ProgressBar","isLoading","props","root","ref","slot","always","getIntrinsicElementProps","progress","defaultProps","shape","elementType","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;iCApBiE;+CACjB;AAmBxD,MAAQA,2CAA8BC,CAAAA,OAAsBC;UAG5D,EAEAF,aAAO,eACLG,mBACQ,iFACIC,EAAAA,CAAAA,UAAAA;UACZC,YAAA,CAAA,CAAAC,MAAAD,SAAA;WACAE;oBAEIC;kBACA;sBAEFJ,4BAAA;;cAAwBK,qBAAA,CAAAC,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBAE1BC,IAAAA,8BAAeF,EAAAA,KAAOJ;oBACpBO;;yBAAkCC;;uCAAqC,CAAAJ,MAAA,CAAAJ,MAAcM,QAAA,EAAA;0BAAU;uBAC/FG;gBACFD,OAAA;gBACAd,WAAAA;gBACAgB,cAAAA;;YAEFD,aAAAX,4BAAA;QACA"}
+{"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":["children","props","isLoading","text","components","root","progress","getIntrinsicElementProps","context","useMergedRefs","overflowButtonRef","overflowCount","defaultProps","ProgressBar","slot","always","shape","thickness","processedText","isOverflowing"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBUA;;;eAAAA;;;iCApBiE;+CACjB;AAmBxD,MAAQA,2CAAmBC,CAAAA,OAAAA;UAC3B,EAGAD,QAAME,EAENC,IAAA,KACAF;UACEG,eACEC,eACAC,mBACF,iFAEEC,EAAAA,CAAAA,UAAyBC;sBAClBC,CAAAA,CAAAA,MAAAA,SAAmBC;0BAChBV,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAG,SAAA,aAAAA,KAAAQ,iBAAAR;WACV;oBACES;;sBAA+DC,4BAAA;;cAAyBC,qBAAA,CAAAC,MAAA,CAAAR,IAAAA,yCAAA,EAAA,UAAA;iBAE5FD,IAAAA,8BAAeS,EAAAA,KAAOd;oBACpBW;;0BAAkCI;0BAAiBC,kBAAW,QAAAC,kBAAA,KAAA,IAAAA,gBAAA,CAAA,CAAA,EAAAP,cAAA,CAAA;;yBAAiC;;kBAEjGG,qBAAA,CAAAC,MAAA,CAAAd,MAAAK,QAAA,EAAA;0BACAa;gBACAR,OAAAA;gBACAT,OAAAA;gBACFe,WAAA;gBACA,cAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuButton/{useAttachmentOverflowMenuButtonStyles.js → useAttachmentOverflowMenuButtonStyles.styles.js}

@@ -17,7 +17,7 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
-const _useProgressBarStyles = require("../utils/useProgressBarStyles");
+const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
 const attachmentOverflowMenuButtonClassNames = {
     root: 'fai-AttachmentOverflowMenuButton',
     progress: 'fai-AttachmentOverflowMenuButton__progress'
@@ -33,8 +33,9 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r1opa2g9", nul
     ]
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
+    'use no memo';
     const rootBaseClassName = useRootBaseClassName();
-    const progressBarStyles = (0, _useProgressBarStyles.useProgressBarStyles)();
+    const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, state.root.className);
     if (state.progress) {
         state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
@@ -52,4 +53,4 @@ const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
         }
     }
     return state;
-}; //# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.js.map
+}; //# sourceMappingURL=useAttachmentOverflowMenuButtonStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, slot, tokens, typographyStyles } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuButtonSlots,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots> = {\n  root: 'fai-AttachmentOverflowMenuButton',\n  progress: 'fai-AttachmentOverflowMenuButton__progress',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  alignItems: 'center',\n  backgroundColor: tokens.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  'use no memo';\n\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":["attachmentOverflowMenuButtonClassNames","columnGap","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","state","flexWrap","fontFamily","typographyStyles","fontSize","rootBaseClassName","className","fontWeight","justifyContent","mergeClasses","progressBarStyles","padding","tokens","spacingVerticalS","bar","verticalAlign","alignSelf","position","cursor","value","undefined","backgroundColor","colorNeutralBackground3Hover","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,sCAAAA;eAAAA;;IAYXC,8CAAyC;eAAzCA;;;iCApBoE;4CACjC;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;AAKZN,MAAAA,iDAAyCO,CAAAA;;UAGzCC,oBAAUL;UACVM,oBAAYC,IAAAA,gDAAuBD;UACnCE,IAAAA,CAAAA,SAAUD,GAAAA,IAAAA,6BAAuBC,EAAAA,uCAAQV,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAY,SAAA;QACzCC,MAAAA,QAAYJ,EAAAA;QACZK,MAAAA,QAAAA,CAAAA,SAAgB,GAAAC,IAAAA,6BAAA,EAAAjB,uCAAAG,QAAA,EAAAe,kBAAAf,QAAA,EAAAK,MAAAL,QAAA,CAAAW,SAAA;QAChBK,MAAAA,MAASC,qBAAOC,CAAAA,QAAAA,CAAAA,MAAgBlB,QAAA,CAAAmB,GAAA,EAAA;YAChCC,aAAe;YACfC,iBAAW;QACXC;QAEA,IAAAH,KAAA;gBACEI,MAAQvB,QAAA,CAAAwB,KAAA,KAAAC,WAAA;gBACRC,IAAAA,SAAAA,GAAAA,IAAAA,6BAAwBC,EAAAA,kBAAAA,wBAA4B,EAAAR,IAAAR,SAAA;mBACpDR;gBACFgB,IAAAR,SAAA,GAAAG,IAAAA,6BAAA,EAAAC,kBAAAa,kBAAA,EAAAT,IAAAR,SAAA;YACA;kBACEe,QAAAA,CAAAA,GAAAA,GAAiBT;;;WAGnBZ;2EAEqB"}

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

@@ -12,10 +12,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useAttachmentOverflowMenuItem = require("./useAttachmentOverflowMenuItem");
 const _renderAttachmentOverflowMenuItem = require("./renderAttachmentOverflowMenuItem");
-const _useAttachmentOverflowMenuItemStyles = require("./useAttachmentOverflowMenuItemStyles");
+const _useAttachmentOverflowMenuItemStylesstyles = require("./useAttachmentOverflowMenuItemStyles.styles");
 const AttachmentOverflowMenuItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useAttachmentOverflowMenuItem.useAttachmentOverflowMenuItem_unstable)(props, ref);
-    (0, _useAttachmentOverflowMenuItemStyles.useAttachmentOverflowMenuItemStyles_unstable)(state);
+    (0, _useAttachmentOverflowMenuItemStylesstyles.useAttachmentOverflowMenuItemStyles_unstable)(state);
     return (0, _renderAttachmentOverflowMenuItem.renderAttachmentOverflowMenuItem_unstable)(state);
 });
 AttachmentOverflowMenuItem.displayName = 'AttachmentOverflowMenuItem'; //# sourceMappingURL=AttachmentOverflowMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';\nimport { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';\nimport type { AttachmentOverflowMenuItemProps } from './AttachmentOverflowMenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles';\nexport const AttachmentOverflowMenuItem: ForwardRefComponent<AttachmentOverflowMenuItemProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useAttachmentOverflowMenuItem_unstable(props, ref);\n    useAttachmentOverflowMenuItemStyles_unstable(state);\n\n    return renderAttachmentOverflowMenuItem_unstable(state);\n  },\n);\n\nAttachmentOverflowMenuItem.displayName = 'AttachmentOverflowMenuItem';\n"],"names":["AttachmentOverflowMenuItem","React","forwardRef","props","state","useAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenuItemStyles_unstable","renderAttachmentOverflowMenuItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;+CACgC;kDACG;qDAGG;AACtD,MAAMA,6BAAAA,WAAAA,GAAAA,OAAmFC,UAAMC,CAAU,CAC9GC,OAACA;UACCC,QAAMA,IAAAA,qEAAQC,EAAAA,OAAuCF;yFACrDG,EAAAA;WAEAC,IAAAA,2EAAOA,EAAAA;AACT;AAGFP,2BAA2BQ,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentOverflowMenuItem_unstable } from './useAttachmentOverflowMenuItem';\nimport { renderAttachmentOverflowMenuItem_unstable } from './renderAttachmentOverflowMenuItem';\nimport type { AttachmentOverflowMenuItemProps } from './AttachmentOverflowMenuItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuItemStyles_unstable } from './useAttachmentOverflowMenuItemStyles.styles';\nexport const AttachmentOverflowMenuItem: ForwardRefComponent<AttachmentOverflowMenuItemProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useAttachmentOverflowMenuItem_unstable(props, ref);\n    useAttachmentOverflowMenuItemStyles_unstable(state);\n\n    return renderAttachmentOverflowMenuItem_unstable(state);\n  },\n);\n\nAttachmentOverflowMenuItem.displayName = 'AttachmentOverflowMenuItem';\n"],"names":["AttachmentOverflowMenuItem","React","forwardRef","props","state","useAttachmentOverflowMenuItem_unstable","useAttachmentOverflowMenuItemStyles_unstable","renderAttachmentOverflowMenuItem_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;+CACgC;kDACG;2DAGG;AACtD,MAAMA,6BAAAA,WAAAA,GAAAA,OAAmFC,UAAMC,CAAU,CAC9GC,OAACA;UACCC,QAAMA,IAAAA,qEAAQC,EAAAA,OAAuCF;+FACrDG,EAAAA;WAEAC,IAAAA,2EAAOA,EAAAA;AACT;AAGFP,2BAA2BQ,WAAW,GAAG"}

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

@@ -7,5 +7,5 @@ _export_star._(require("./AttachmentOverflowMenuItem"), exports);
 _export_star._(require("./AttachmentOverflowMenuItem.types"), exports);
 _export_star._(require("./renderAttachmentOverflowMenuItem"), exports);
 _export_star._(require("./useAttachmentOverflowMenuItem"), exports);
-_export_star._(require("./useAttachmentOverflowMenuItemStyles"), exports);
+_export_star._(require("./useAttachmentOverflowMenuItemStyles.styles"), exports);
  //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentOverflowMenuItem';\nexport * from './AttachmentOverflowMenuItem.types';\nexport * from './renderAttachmentOverflowMenuItem';\nexport * from './useAttachmentOverflowMenuItem';\nexport * from './useAttachmentOverflowMenuItemStyles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './AttachmentOverflowMenuItem';\nexport * from './AttachmentOverflowMenuItem.types';\nexport * from './renderAttachmentOverflowMenuItem';\nexport * from './useAttachmentOverflowMenuItem';\nexport * from './useAttachmentOverflowMenuItemStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -14,21 +14,28 @@ const _reactcomponents = require("@fluentui/react-components");
 const _reacticons = require("@fluentui/react-icons");
 const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
-    const { id, imageOnly, media } = props;
+    'use no memo';
+    const { imageOnly, media } = props;
     const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
-    const isVisible = (0, _reactcomponents.useIsOverflowItemVisible)(id);
-    const onAttachmentDismiss = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context.onAttachmentDismiss);
+    const menuItemId = (0, _reactcomponents.useId)('attachment-', props.id);
+    const isVisible = (0, _reactcomponents.useIsOverflowItemVisible)(menuItemId);
+    const { onAttachmentDismiss } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
     const root = _reactcomponents.slot.always({
         ref,
         icon: media,
         secondaryContent: /*#__PURE__*/ _react.createElement(DismissIcon, null),
-        ...props
+        ...props,
+        id: menuItemId
     }, {
         elementType: _reactcomponents.MenuItem
     });
-    root.onClick = (0, _reactcomponents.mergeCallbacks)(root.onClick, (ev)=>onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
-            id
-        }));
+    root.onClick = (0, _reactcomponents.mergeCallbacks)(root.onClick, (ev)=>{
+        onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+            content: props.children,
+            media,
+            id: menuItemId
+        });
+    });
     const progress = _reactcomponents.slot.optional(props.progress, {
         defaultProps: {
             shape: 'square',

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MenuItem, ProgressBar, 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  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":["id","props","imageOnly","onAttachmentDismiss","media","icon","secondaryContent","useAttachmentListContext_unstable","context","root","slot","always","mergeCallbacks","onClick","elementType","progress","shape","ev","optional","thickness","ProgressBar","isVisible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsBUA;;;eAAAA;;;;iEAtBa;iCAC+D;4BACxB;uCACZ;AAmBhD,MAAQA,yCAAyBC,CAAAA,OAAAA;UACjC,EACAD,EAAA,EAEAE,SAAMC,EAENC,KAAA;UACSC,cAAMD,IAAAA,sBAAAA,EAAAA,2BAAAA,EAAAA,4BAAAA;UAAOE,YAAAA,IAAAA,yCAAkB,EAAAN;UAAiBG,sBAAQI,IAAAA,wDAAA,EAAAC,CAAAA,UAAAA,QAAAL,mBAAA;UAC/DM,OAAAC,qBAAA,CAAAC,MAAA,CAAA;;QAAwBN,MAAAD;QAE1BK,kBAAeG,WAAAA,GAAeH,OAAKI,aACjCV,CAAAA,aAAAA;gBACEH;;QAIJc,aAAMC,yBAAWL;;gBAEbM,GAAAA,IAAAA,+BAAO,EAAAP,KAAAI,OAAA,EAAAI,CAAAA,KAAAd,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAc,IAAA;;;UAGTF,WAAAL,qBAAA,CAAAQ,QAAA,CAAAjB,MAAAc,QAAA,EAAA;sBACAD;YACFE,OAAA;YAEAG,WAAO;+BACOlB,MAAAD,EAAA;;qBAEVe,4BAAUK;;WAEZX;oBACAM;kBACAM,yBAAAA;sBACAnB,4BAAAA;QACF;QACAO"}
+{"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 { 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  'use no memo';\n\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 } = useAttachmentListContext_unstable(context => context);\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  });\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":["useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","isVisible","media","icon","secondaryContent","menuItemId","useAttachmentListContext_unstable","context","elementType","MenuItem","root","onClick","onAttachmentDismiss","content","progress","optional","ev","shape","children","slot","defaultProps","components","ProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BEA;;;eAAAA;;;;iEA7BqB;iCAQhB;4BACuD;uCACZ;AAmBhD,MAAAA,yCAAA,CAAAC,OAAAC;;UAIA,EACAC,SAAMC,EACNC,KAAA,KAEAJ;UACIC,cAAAA,IAAAA,sBAAAA,EAAAA,2BAAAA,EAAAA,4BAAAA;UAAKI,aAAMD,IAAAA,sBAAAA,EAAAA,eAAAA,MAAAA,EAAAA;UAAOE,YAAAA,IAAAA,yCAAkB,EAAAC;UAAiB,qBAAcA,KAAWC,IAAAA,wDAChF,EAAAC,CAAAA,UAAAA;UAAEC,OAAAA,qBAAAA,CAAAA,MAAaC,CAAAA;QAASV;QAE1BW,MAAKC;0BACHC,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,aAAAA;gBAA4BC;;;qBAA+CJ,yBAAA;;SAG7EE,OAAMG,GAAAA,IAAAA,+BAAgBC,EAAAA,KAASjB,OAAMgB,EAAAA,CAAAA;gCACrB,QAAAF,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAI,IAAA;qBACZC,MAAOC,QAAA;;;;;UAKXJ,WAAAK,qBAAA,CAAAJ,QAAA,CAAAjB,MAAAgB,QAAA,EAAA;QAEAM,cAAO;mBACLC;uBACEX;+BACUY,MAAAA,EAAAA;;qBAEZZ,4BAAAA;;WAEAT;oBACAD;YACFU,MAAAD,yBAAA;YACAK,UAAAQ,4BAAA"}

package/lib-commonjs/components/AttachmentOverflowMenuItem/{useAttachmentOverflowMenuItemStyles.js → useAttachmentOverflowMenuItemStyles.styles.js}

@@ -17,7 +17,7 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
-const _useProgressBarStyles = require("../utils/useProgressBarStyles");
+const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
 const attachmentOverflowMenuItemClassNames = {
     root: 'fai-AttachmentOverflowMenuItem',
     progress: 'fai-AttachmentOverflowMenuItem__progress'
@@ -32,9 +32,10 @@ const useStyles = (0, _reactcomponents.__styles)({
     ]
 });
 const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
+    'use no memo';
     const { imageOnly } = state;
     const styles = useStyles();
-    const progressBarStyles = (0, _useProgressBarStyles.useProgressBarStyles)();
+    const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.root, imageOnly && styles.imageOnly, state.root.className);
     if (state.progress) {
         state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuItemClassNames.progress, progressBarStyles.progress, state.progress.className);
@@ -52,4 +53,4 @@ const useAttachmentOverflowMenuItemStyles_unstable = (state)=>{
         }
     }
     return state;
-}; //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.js.map
+}; //# sourceMappingURL=useAttachmentOverflowMenuItemStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentOverflowMenuItemStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, slot } from '@fluentui/react-components';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type {\n  AttachmentOverflowMenuItemSlots,\n  AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots> = {\n  root: 'fai-AttachmentOverflowMenuItem',\n  progress: 'fai-AttachmentOverflowMenuItem__progress',\n};\n\nconst 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  'use no memo';\n\n  const { imageOnly } = state;\n  const styles = useStyles();\n  const progressBarStyles = useProgressBarStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuItemClassNames.root,\n    imageOnly && styles.imageOnly,\n    state.root.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentOverflowMenuItemClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["attachmentOverflowMenuItemClassNames","styles","useStyles","root","progress","makeStyles","imageOnly","alignItems","d","state","elementType","renderByDefault","className","mergeClasses","bar","value","undefined","progressBarStyles","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,oCAAAA;eAAAA;;IAoBLC,4CAASC;eAATD;;;iCA5B+B;4CACF;AAO9B,MAAMD,uCAAwF;UACnGG;cACAC;AACF;AAEA,MAAMF,YAAYG,IAAAA,yBAAAA,EAAAA;eAChBC;iBACEC;;AAEJ,GAAA;IAEAC,GAAA;QAAA;KAAA;;AASE,MAAMP,+CAASC,CAAAA;;UASXO,WACFA;mBAMgDC;8BAAoBC,IAAAA,gDAAiB;UAAKR,IAAA,CAAAS,SAAA,GAAAC,IAAAA,6BAAA,EAAAb,qCAAAG,IAAA,EAAAG,aAAAL,OAAAK,SAAA,EAAAG,MAAAN,IAAA,CAAAS,SAAA;cACtFE,QAAK,EAAA;sBACHL,CAAAA,SAAML,GAASW,IAAAA,6BAAUC,EAAAA,qCAAWZ,QAAA,EAAAa,kBAAAb,QAAA,EAAAK,MAAAL,QAAA,CAAAQ,SAAA;oBACtCE,qBAAIF,CAAAA,QAAS,CAAAH,MAAGI,QAAAA,CAAaI,GAAAA,EAAAA;yBACxB;6BACDL;;iBAENH;gBACFA,MAAAL,QAAA,CAAAW,KAAA,KAAAC,WAAA;gBACFF,IAAAF,SAAA,GAAAC,IAAAA,6BAAA,EAAAI,kBAAAC,wBAAA,EAAAJ,IAAAF,SAAA;YAEA,OAAOH;gBACPK,IAAAF,SAAA,GAAAC,IAAAA,6BAAA,EAAAI,kBAAAE,kBAAA,EAAAL,IAAAF,SAAA"}