@fluentui-copilot/react-attachments 0.12.3 → 0.12.5-hotfix.1

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuList,\n  MenuPopover,\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 { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment/Attachment.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 { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const [setTimeout] = useTimeout();\n  const { targetDocument } = useFluent();\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\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 styles = useOverflowStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    children,\n    maxVisibleItems: maxVisibleAttachments,\n    overflowClassName: styles.overflow,\n  });\n\n  const attachmentOverflowMenuItems = React.useMemo(() => {\n    if (resolvedChildren && Array.isArray(resolvedChildren)) {\n      return resolvedChildren\n        .filter(child => React.isValidElement(child))\n        .map(child => (child as React.ReactElement).props)\n        .map((attachment: AttachmentProps) => {\n          const dismissButton = slot.optional(attachment.dismissButton, { elementType: 'button' });\n          return (\n            <AttachmentOverflowMenuItem\n              {...attachment}\n              key={attachment.id}\n              onClick={dismissButton?.onClick as AttachmentProps['onClick']}\n            />\n          );\n        });\n    }\n    return [];\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    designVersion,\n    onAttachmentDismiss: handleAttachmentDismiss,\n    shouldUseOverflow,\n    overflowMenuProps,\n    components: {\n      root: 'div',\n      menuList: MenuList,\n      menuPopover: MenuPopover,\n      overflowMenuButton: '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    menuList: slot.optional(props.menuList, {\n      defaultProps: { children: attachmentOverflowMenuItems },\n      elementType: MenuList,\n      renderByDefault: true,\n    }),\n    menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n    overflowMenuButton: slot.optional(props.overflowMenuButton, {\n      defaultProps: { children: <AttachmentOverflowMenuButton /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","designVersion","overflowMenuProps","findNextFocusable","innerRef","useDesignVersion","next","container","useEventCallback","e","data","findLastFocusable","current","_innerRef_current","contains","activeElement","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","attachmentOverflowMenuItems","resolvedChildren","child","React","isValidElement","attachment","onClick","useMemo","Array","isArray","filter","map","elementType","circular","createElement","AttachmentOverflowMenuItem","axis","memorizeCurrent","id","dismissButton","shouldUseOverflow","components","menuList","overflowMenuButton","undefined","handleAttachmentDismiss","arrowNavigationProps","MenuPopover","slot","defaultProps","MenuList","renderByDefault","menuPopover","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MenuList,\n  MenuPopover,\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 { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment/Attachment.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 { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const [setTimeout] = useTimeout();\n  const { targetDocument } = useFluent();\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\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 styles = useOverflowStyles();\n  const resolvedChildren = useOverflowMaxVisibleItems({\n    children,\n    maxVisibleItems: maxVisibleAttachments,\n    overflowClassName: styles.overflow,\n  });\n\n  const attachmentOverflowMenuItems = React.useMemo(() => {\n    if (resolvedChildren && Array.isArray(resolvedChildren)) {\n      return resolvedChildren\n        .filter(child => React.isValidElement(child))\n        .map(child => (child as React.ReactElement).props)\n        .map((attachment: AttachmentProps) => {\n          const dismissButton = slot.optional(attachment.dismissButton, { elementType: 'button' });\n          return (\n            <AttachmentOverflowMenuItem\n              {...attachment}\n              key={attachment.id}\n              onClick={dismissButton?.onClick as AttachmentProps['onClick']}\n            />\n          );\n        });\n    }\n    return [];\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    designVersion,\n    onAttachmentDismiss: handleAttachmentDismiss,\n    shouldUseOverflow,\n    numberOfAttachments: resolvedChildren.length,\n    overflowMenuProps,\n    components: {\n      root: 'div',\n      menuList: MenuList,\n      menuPopover: MenuPopover,\n      overflowMenuButton: '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    menuList: slot.optional(props.menuList, {\n      defaultProps: { children: attachmentOverflowMenuItems },\n      elementType: MenuList,\n      renderByDefault: true,\n    }),\n    menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n    overflowMenuButton: slot.optional(props.overflowMenuButton, {\n      defaultProps: { children: <AttachmentOverflowMenuButton /> },\n      elementType: 'span',\n      renderByDefault: true,\n    }),\n  };\n};\n"],"names":["useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","React","useRef","setTimeout","useTimeout","targetDocument","useFluent","designVersion","useDesignVersion","findNextFocusable","findPrevFocusable","findLastFocusable","useFocusFinders","handleAttachmentDismiss","useEventCallback","e","data","activeElement","current","contains","next","container","classList","attachmentOverflowMenuButtonClassNames","root","focus","prev","parentElement","styles","useOverflowStyles","resolvedChildren","useOverflowMaxVisibleItems","maxVisibleItems","overflowClassName","overflow","attachmentOverflowMenuItems","useMemo","Array","isArray","filter","child","isValidElement","map","attachment","dismissButton","slot","optional","elementType","createElement","AttachmentOverflowMenuItem","key","id","onClick","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","numberOfAttachments","length","components","menuList","MenuList","menuPopover","MenuPopover","overflowMenuButton","always","getIntrinsicElementProps","useMergedRefs","role","defaultProps","renderByDefault","AttachmentOverflowMenuButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -9,13 +9,14 @@ Object.defineProperty(exports, "useAttachmentListContextValues_unstable", {
     }
 });
 function useAttachmentListContextValues_unstable(state) {
-    const { onAttachmentDismiss, shouldUseOverflow } = state;
+    const { numberOfAttachments, onAttachmentDismiss, shouldUseOverflow } = state;
     // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
     const attachmentList = {
+        numberOfAttachments,
         onAttachmentDismiss,
         shouldUseOverflow
     };
     return {
         attachmentList
     };
-} //# sourceMappingURL=useAttachmentListContextValues.js.map
+}

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, 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"}
+{"version":3,"sources":["useAttachmentListContextValues.ts"],"sourcesContent":["import type { AttachmentListContextValues, AttachmentListState } from './AttachmentList.types';\n\nexport function useAttachmentListContextValues_unstable(state: AttachmentListState): AttachmentListContextValues {\n  const { numberOfAttachments, 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    numberOfAttachments,\n    onAttachmentDismiss,\n    shouldUseOverflow,\n  };\n\n  return { attachmentList };\n}\n"],"names":["useAttachmentListContextValues_unstable","state","numberOfAttachments","onAttachmentDismiss","shouldUseOverflow","attachmentList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,wCAAwCC,KAA0B;IAChF,MAAM,EAAEC,mBAAmB,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGH;IAExE,mGAAmG;IACnG,MAAMI,iBAAiB;QACrBH;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAe;AAC1B"}

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachmentListClassNames: function() {
+        return attachmentListClassNames;
+    },
+    useAttachmentListStyles_unstable: function() {
+        return useAttachmentListStyles_unstable;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
+const attachmentListClassNames = {
+    root: 'fai-AttachmentList',
+    menuList: 'fai-AttachmentList__menuList',
+    menuPopover: 'fai-AttachmentList__menuPopover',
+    overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
+};
+const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    columnGap: _tokens.tokens.spacingHorizontalSNudge,
+    display: 'flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    flexWrap: 'wrap',
+    rowGap: _tokens.tokens.spacingVerticalXS
+});
+const useOverflowMenuButtonBaseClassName = (0, _reactcomponents.makeResetStyles)({
+    display: 'inline-flex'
+});
+const useOverflowMenuPopoverNextStyles = (0, _reactcomponents.makeStyles)({
+    borderRadius: {
+        borderRadius: _tokens.tokens.borderRadius4XL
+    }
+});
+const useAttachmentListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+    const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+    const { designVersion } = state;
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+    if (state.menuList) {
+        state.menuList.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuList, state.menuList.className);
+    }
+    if (state.menuPopover) {
+        state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
+    }
+    if (state.overflowMenuButton) {
+        state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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  menuList: 'fai-AttachmentList__menuList',\n  menuPopover: 'fai-AttachmentList__menuPopover',\n  overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\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\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n});\n\nconst useOverflowMenuPopoverNextStyles = makeStyles({\n  borderRadius: {\n    borderRadius: tokens.borderRadius4XL,\n  },\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  const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n  const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();\n  const { designVersion } = state;\n\n  state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n  if (state.menuList) {\n    state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n  }\n  if (state.menuPopover) {\n    state.menuPopover.className = mergeClasses(\n      attachmentListClassNames.menuPopover,\n      designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius,\n      state.menuPopover.className,\n    );\n  }\n\n  if (state.overflowMenuButton) {\n    state.overflowMenuButton.className = mergeClasses(\n      attachmentListClassNames.overflowMenuButton,\n      overflowMenuButtonClassName,\n      state.overflowMenuButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["attachmentListClassNames","useAttachmentListStyles_unstable","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","tokens","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useOverflowMenuPopoverNextStyles","makeStyles","borderRadius","borderRadius4XL","state","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","designVersion","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IA6BAC,gCAAAA;eAAAA;;;iCAlC6C;wBACnC;AAIhB,MAAMD,2BAAgE;IAC3EE,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB;AAEA,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;IAC3CC,WAAWC,cAAAA,CAAOC,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQN,cAAAA,CAAOO,iBAAiB;AAClC;AAEA,MAAMC,qCAAqCV,IAAAA,gCAAAA,EAAgB;IACzDI,SAAS;AACX;AAEA,MAAMO,mCAAmCC,IAAAA,2BAAAA,EAAW;IAClDC,cAAc;QACZA,cAAcX,cAAAA,CAAOY,eAAe;IACtC;AACF;AAKO,MAAMpB,mCAAmC,CAACqB;IAC/C;IAEA,MAAMC,oBAAoBjB;IAC1B,MAAMkB,8BAA8BP;IACpC,MAAMQ,gCAAgCP;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGJ;IAE1BA,MAAMpB,IAAI,CAACyB,SAAS,GAAGC,IAAAA,6BAAAA,EAAa5B,yBAAyBE,IAAI,EAAEqB,mBAAmBD,MAAMpB,IAAI,CAACyB,SAAS;IAE1G,IAAIL,MAAMnB,QAAQ,EAAE;QAClBmB,MAAMnB,QAAQ,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EAAa5B,yBAAyBG,QAAQ,EAAEmB,MAAMnB,QAAQ,CAACwB,SAAS;IACrG;IACA,IAAIL,MAAMlB,WAAW,EAAE;QACrBkB,MAAMlB,WAAW,CAACuB,SAAS,GAAGC,IAAAA,6BAAAA,EAC5B5B,yBAAyBI,WAAW,EACpCsB,kBAAkB,UAAUD,8BAA8BL,YAAY,EACtEE,MAAMlB,WAAW,CAACuB,SAAS;IAE/B;IAEA,IAAIL,MAAMjB,kBAAkB,EAAE;QAC5BiB,MAAMjB,kBAAkB,CAACsB,SAAS,GAAGC,IAAAA,6BAAAA,EACnC5B,yBAAyBK,kBAAkB,EAC3CmB,6BACAF,MAAMjB,kBAAkB,CAACsB,SAAS;IAEtC;IAEA,OAAOL;AACT"}

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

@@ -21,4 +21,4 @@ const AttachmentOverflowMenu = (props)=>{
         attachmentOverflowMenuContextValues
     });
 };
-AttachmentOverflowMenu.displayName = 'AttachmentOverflowMenu'; //# sourceMappingURL=AttachmentOverflowMenu.js.map
+AttachmentOverflowMenu.displayName = 'AttachmentOverflowMenu';

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenu.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { useAttachmentOverflowMenu_unstable } from './useAttachmentOverflowMenu';\nimport { renderAttachmentOverflowMenu_unstable } from './renderAttachmentOverflowMenu';\nimport { useAttachmentOverflowMenuContextValues_unstable } from './useAttachmentOverflowMenuContextValues';\nimport { useMenuContextValues_unstable } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuProps } from './AttachmentOverflowMenu.types';\n\nexport const AttachmentOverflowMenu: React.FC<AttachmentOverflowMenuProps> = props => {\n  const state = useAttachmentOverflowMenu_unstable(props);\n  const menuContextValues = useMenuContextValues_unstable(state);\n  const attachmentOverflowMenuContextValues = useAttachmentOverflowMenuContextValues_unstable(state);\n\n  return renderAttachmentOverflowMenu_unstable(state, { menuContextValues, attachmentOverflowMenuContextValues });\n};\n\nAttachmentOverflowMenu.displayName = 'AttachmentOverflowMenu';\n"],"names":["AttachmentOverflowMenu","props","state","useAttachmentOverflowMenu_unstable","menuContextValues","useMenuContextValues_unstable","attachmentOverflowMenuContextValues","useAttachmentOverflowMenuContextValues_unstable","renderAttachmentOverflowMenu_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;2CANsC;8CACG;wDACU;iCAClB;AAGvC,MAAMA,yBAAgEC,CAAAA;UAC3EC,QAAMA,IAAAA,6DAAQC,EAAAA;UACdC,oBAAMA,IAAAA,8CAAoBC,EAAAA;UAC1BC,sCAAMA,IAAAA,uFAAsCC,EAAAA;WAE5CC,IAAAA,mEAAOA,EAAAA,OAAsCN;;;;AAC/C;AAEAF,uBAAuBS,WAAW,GAAG"}
+{"version":3,"sources":["AttachmentOverflowMenu.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { useAttachmentOverflowMenu_unstable } from './useAttachmentOverflowMenu';\nimport { renderAttachmentOverflowMenu_unstable } from './renderAttachmentOverflowMenu';\nimport { useAttachmentOverflowMenuContextValues_unstable } from './useAttachmentOverflowMenuContextValues';\nimport { useMenuContextValues_unstable } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuProps } from './AttachmentOverflowMenu.types';\n\nexport const AttachmentOverflowMenu: React.FC<AttachmentOverflowMenuProps> = props => {\n  const state = useAttachmentOverflowMenu_unstable(props);\n  const menuContextValues = useMenuContextValues_unstable(state);\n  const attachmentOverflowMenuContextValues = useAttachmentOverflowMenuContextValues_unstable(state);\n\n  return renderAttachmentOverflowMenu_unstable(state, { menuContextValues, attachmentOverflowMenuContextValues });\n};\n\nAttachmentOverflowMenu.displayName = 'AttachmentOverflowMenu';\n"],"names":["AttachmentOverflowMenu","props","state","useAttachmentOverflowMenu_unstable","menuContextValues","useMenuContextValues_unstable","attachmentOverflowMenuContextValues","useAttachmentOverflowMenuContextValues_unstable","renderAttachmentOverflowMenu_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;2CANsC;8CACG;wDACU;iCAClB;AAGvC,MAAMA,yBAAgEC,CAAAA;IAC3E,MAAMC,QAAQC,IAAAA,6DAAAA,EAAmCF;IACjD,MAAMG,oBAAoBC,IAAAA,8CAAAA,EAA8BH;IACxD,MAAMI,sCAAsCC,IAAAA,uFAAAA,EAAgDL;IAE5F,OAAOM,IAAAA,mEAAAA,EAAsCN,OAAO;QAAEE;QAAmBE;IAAoC;AAC/G;AAEAN,uBAAuBS,WAAW,GAAG"}

package/lib-commonjs/components/AttachmentOverflowMenu/AttachmentOverflowMenu.types.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=AttachmentOverflowMenu.types.js.map

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

@@ -26,4 +26,3 @@ const _AttachmentOverflowMenu = require("./AttachmentOverflowMenu");
 const _renderAttachmentOverflowMenu = require("./renderAttachmentOverflowMenu");
 const _useAttachmentOverflowMenu = require("./useAttachmentOverflowMenu");
 const _useAttachmentOverflowMenuContextValues = require("./useAttachmentOverflowMenuContextValues");
- //# sourceMappingURL=index.js.map

package/lib-commonjs/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js

@@ -18,4 +18,4 @@ const renderAttachmentOverflowMenu_unstable = (state, contextValues)=>{
         value: attachmentOverflowMenuContextValues.attachmentOverflowMenu,
         children: (0, _reactcomponents.renderMenu_unstable)(state, menuContextValues)
     }) : null;
-}; //# sourceMappingURL=renderAttachmentOverflowMenu.js.map
+};

package/lib-commonjs/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAttachmentOverflowMenu.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, renderMenu_unstable } from '@fluentui/react-components';\nimport { AttachmentOverflowMenuProvider } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuState,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuContextValues,\n} from './AttachmentOverflowMenu.types';\nimport type { MenuContextValues } from '@fluentui/react-components';\n\n/**\n * Render the final JSX of AttachmentOverflowMenu\n */\nexport const renderAttachmentOverflowMenu_unstable = (\n  state: AttachmentOverflowMenuState,\n  contextValues: {\n    menuContextValues: MenuContextValues;\n    attachmentOverflowMenuContextValues: AttachmentOverflowMenuContextValues;\n  },\n) => {\n  const { menuContextValues, attachmentOverflowMenuContextValues } = contextValues;\n  assertSlots<AttachmentOverflowMenuSlots>(state);\n\n  return state.isOverflowing ? (\n    <AttachmentOverflowMenuProvider value={attachmentOverflowMenuContextValues.attachmentOverflowMenu}>\n      {renderMenu_unstable(state, menuContextValues)}\n    </AttachmentOverflowMenuProvider>\n  ) : null;\n};\n"],"names":["menuContextValues","attachmentOverflowMenuContextValues","assertSlots","isOverflowing","state","_jsx","AttachmentOverflowMenuProvider"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAsBUA;;;eAAAA;;;4BAtBgB;iCAGuB;+CACF;AAkB7C,MAAQA,wCAAmBC,CAAAA,OAAAA;UAC3BC,EAEAF,iBAAaG,qCAC4BF;oCAGrC,EAAAG;IACJ,OAAAA,MAAAD,aAAA,GAAA,WAAA,GAAAE,IAAAA,eAAA,EAAAC,6DAAA,EAAA"}
+{"version":3,"sources":["renderAttachmentOverflowMenu.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots, renderMenu_unstable } from '@fluentui/react-components';\nimport { AttachmentOverflowMenuProvider } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuState,\n  AttachmentOverflowMenuSlots,\n  AttachmentOverflowMenuContextValues,\n} from './AttachmentOverflowMenu.types';\nimport type { MenuContextValues } from '@fluentui/react-components';\n\n/**\n * Render the final JSX of AttachmentOverflowMenu\n */\nexport const renderAttachmentOverflowMenu_unstable = (\n  state: AttachmentOverflowMenuState,\n  contextValues: {\n    menuContextValues: MenuContextValues;\n    attachmentOverflowMenuContextValues: AttachmentOverflowMenuContextValues;\n  },\n) => {\n  const { menuContextValues, attachmentOverflowMenuContextValues } = contextValues;\n  assertSlots<AttachmentOverflowMenuSlots>(state);\n\n  return state.isOverflowing ? (\n    <AttachmentOverflowMenuProvider value={attachmentOverflowMenuContextValues.attachmentOverflowMenu}>\n      {renderMenu_unstable(state, menuContextValues)}\n    </AttachmentOverflowMenuProvider>\n  ) : null;\n};\n"],"names":["renderAttachmentOverflowMenu_unstable","state","contextValues","menuContextValues","attachmentOverflowMenuContextValues","assertSlots","isOverflowing","_jsx","AttachmentOverflowMenuProvider","value","attachmentOverflowMenu","renderMenu_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;4BAdb;iCAEiD;+CACF;AAWxC,MAAMA,wCAAwC,CACnDC,OACAC;IAKA,MAAM,EAAEC,iBAAiB,EAAEC,mCAAmC,EAAE,GAAGF;IACnEG,IAAAA,4BAAAA,EAAyCJ;IAEzC,OAAOA,MAAMK,aAAa,GAAA,WAAA,GACxBC,IAAAA,eAAA,EAACC,6DAAAA,EAAAA;QAA+BC,OAAOL,oCAAoCM,sBAAsB;kBAC9FC,IAAAA,oCAAAA,EAAoBV,OAAOE;SAE5B;AACN"}

package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js

@@ -18,4 +18,4 @@ const useAttachmentOverflowMenu_unstable = (props)=>{
         overflowButtonRef,
         overflowCount
     };
-}; //# sourceMappingURL=useAttachmentOverflowMenu.js.map
+};

package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenu.ts"],"sourcesContent":["import { useMenu_unstable, useOverflowMenu } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuProps, AttachmentOverflowMenuState } from './AttachmentOverflowMenu.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenu.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuStyles_unstable,\n * before being passed to renderAttachmentOverflowMenu_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenu\n */\nexport const useAttachmentOverflowMenu_unstable = (props: AttachmentOverflowMenuProps): AttachmentOverflowMenuState => {\n  const menuState = useMenu_unstable(props);\n  const { isOverflowing, ref: overflowButtonRef, overflowCount } = useOverflowMenu<HTMLButtonElement>();\n\n  return {\n    ...menuState,\n    isOverflowing,\n    overflowButtonRef,\n    overflowCount,\n  };\n};\n"],"names":["menuState","props","isOverflowing","overflowButtonRef","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BAYQA;;;eAAAA;;;iCAZ0C;AAYhD,MAAMA,qCAA6BC,CAAAA;UACnCD,YAAQE,IAAAA,iCAAoBC,EAAAA;UAE5B,eACKH,OACHE,iBAAAA,eACAC,yCACAC;WACF;QACA,GAAAJ,SAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenu.ts"],"sourcesContent":["import { useMenu_unstable, useOverflowMenu } from '@fluentui/react-components';\nimport type { AttachmentOverflowMenuProps, AttachmentOverflowMenuState } from './AttachmentOverflowMenu.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenu.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuStyles_unstable,\n * before being passed to renderAttachmentOverflowMenu_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenu\n */\nexport const useAttachmentOverflowMenu_unstable = (props: AttachmentOverflowMenuProps): AttachmentOverflowMenuState => {\n  const menuState = useMenu_unstable(props);\n  const { isOverflowing, ref: overflowButtonRef, overflowCount } = useOverflowMenu<HTMLButtonElement>();\n\n  return {\n    ...menuState,\n    isOverflowing,\n    overflowButtonRef,\n    overflowCount,\n  };\n};\n"],"names":["useAttachmentOverflowMenu_unstable","props","menuState","useMenu_unstable","isOverflowing","ref","overflowButtonRef","overflowCount","useOverflowMenu"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;iCAXqC;AAW3C,MAAMA,qCAAqC,CAACC;IACjD,MAAMC,YAAYC,IAAAA,iCAAAA,EAAiBF;IACnC,MAAM,EAAEG,aAAa,EAAEC,KAAKC,iBAAiB,EAAEC,aAAa,EAAE,GAAGC,IAAAA,gCAAAA;IAEjE,OAAO;QACL,GAAGN,SAAS;QACZE;QACAE;QACAC;IACF;AACF"}

package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js

@@ -19,4 +19,4 @@ function useAttachmentOverflowMenuContextValues_unstable(state) {
     return {
         attachmentOverflowMenu
     };
-} //# sourceMappingURL=useAttachmentOverflowMenuContextValues.js.map
+}

package/lib-commonjs/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuContextValues.ts"],"sourcesContent":["import type { AttachmentOverflowMenuContextValues, AttachmentOverflowMenuState } from './AttachmentOverflowMenu.types';\n\nexport function useAttachmentOverflowMenuContextValues_unstable(\n  state: AttachmentOverflowMenuState,\n): AttachmentOverflowMenuContextValues {\n  const { isOverflowing, overflowButtonRef, overflowCount } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentOverflowMenu = {\n    isOverflowing,\n    overflowButtonRef,\n    overflowCount,\n  };\n\n  return { attachmentOverflowMenu };\n}\n"],"names":["useAttachmentOverflowMenuContextValues_unstable","state","isOverflowing","overflowButtonRef","attachmentOverflowMenu","overflowCount"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,gDACdC,KAAkC;UAElC,EAEAC,aAAA,EACAC,iBAAMC,eACJF;uGAEAG;UACFD,yBAAA;QAEAF;;QAAgCG;IAClC"}
+{"version":3,"sources":["useAttachmentOverflowMenuContextValues.ts"],"sourcesContent":["import type { AttachmentOverflowMenuContextValues, AttachmentOverflowMenuState } from './AttachmentOverflowMenu.types';\n\nexport function useAttachmentOverflowMenuContextValues_unstable(\n  state: AttachmentOverflowMenuState,\n): AttachmentOverflowMenuContextValues {\n  const { isOverflowing, overflowButtonRef, overflowCount } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n  const attachmentOverflowMenu = {\n    isOverflowing,\n    overflowButtonRef,\n    overflowCount,\n  };\n\n  return { attachmentOverflowMenu };\n}\n"],"names":["useAttachmentOverflowMenuContextValues_unstable","state","isOverflowing","overflowButtonRef","overflowCount","attachmentOverflowMenu"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,gDACdC,KAAkC;IAElC,MAAM,EAAEC,aAAa,EAAEC,iBAAiB,EAAEC,aAAa,EAAE,GAAGH;IAE5D,mGAAmG;IACnG,MAAMI,yBAAyB;QAC7BH;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAuB;AAClC"}

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

@@ -20,4 +20,4 @@ const AttachmentOverflowMenuButton = /*#__PURE__*/ _react.forwardRef((props, ref
     (0, _reactprovider.useCustomStyleHook)('useAttachmentOverflowMenuButtonStyles')(state);
     return (0, _renderAttachmentOverflowMenuButton.renderAttachmentOverflowMenuButton_unstable)(state);
 });
-AttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton'; //# sourceMappingURL=AttachmentOverflowMenuButton.js.map
+AttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton';

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.styles';\nimport type { AttachmentOverflowMenuButtonProps } from './AttachmentOverflowMenuButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\nexport const AttachmentOverflowMenuButton: ForwardRefComponent<AttachmentOverflowMenuButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useAttachmentOverflowMenuButton_unstable(props, ref);\n\n    useAttachmentOverflowMenuButtonStyles_unstable(state);\n    useCustomStyleHook('useAttachmentOverflowMenuButtonStyles')(state);\n\n    return renderAttachmentOverflowMenuButton_unstable(state);\n  },\n);\n\nAttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton';\n"],"names":["AttachmentOverflowMenuButton","React","forwardRef","props","state","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useCustomStyleHook","renderAttachmentOverflowMenuButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;iDACkC;oDACG;6DACG;+BAG5B;AAE5B,MAAMA,+BAAAA,WAAAA,GAAAA,OAAuFC,UAAMC,CAAU,CAClHC,OAACA;UACCC,QAAMA,IAAAA,yEAAQC,EAAAA,OAAyCF;mGAEvDG,EAAAA;yCACAC,EAAAA,yCAAmBH;WAEnBI,IAAAA,+EAAOA,EAAAA;AACT;AAGFR,6BAA6BS,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';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\nexport const AttachmentOverflowMenuButton: ForwardRefComponent<AttachmentOverflowMenuButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useAttachmentOverflowMenuButton_unstable(props, ref);\n\n    useAttachmentOverflowMenuButtonStyles_unstable(state);\n    useCustomStyleHook('useAttachmentOverflowMenuButtonStyles')(state);\n\n    return renderAttachmentOverflowMenuButton_unstable(state);\n  },\n);\n\nAttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton';\n"],"names":["AttachmentOverflowMenuButton","React","forwardRef","props","ref","state","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","useCustomStyleHook","renderAttachmentOverflowMenuButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;iDACkC;oDACG;6DACG;+BAG5B;AAE5B,MAAMA,+BAAAA,WAAAA,GAAuFC,OAAMC,UAAU,CAClH,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,yEAAAA,EAAyCH,OAAOC;IAE9DG,IAAAA,2FAAAA,EAA+CF;IAC/CG,IAAAA,iCAAAA,EAAmB,yCAAyCH;IAE5D,OAAOI,IAAAA,+EAAAA,EAA4CJ;AACrD;AAGFL,6BAA6BU,WAAW,GAAG"}

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

@@ -4,4 +4,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
- //# sourceMappingURL=AttachmentOverflowMenuButton.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport 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  CopilotMode &\n  DesignVersion & {\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  Pick<Required<AttachmentOverflowMenuButtonProps>, 'designVersion' | 'mode'>;\n"],"names":[],"rangeMappings":";;","mappings":"AAwBA;;CAEC"}
+{"version":3,"sources":["AttachmentOverflowMenuButton.types.ts"],"sourcesContent":["import type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport 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  CopilotMode &\n  DesignVersion & {\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  Pick<Required<AttachmentOverflowMenuButtonProps>, 'designVersion' | 'mode'> & {\n    /**\n     * True when all attachments are overflowed into the overflow menu.\n     */\n    fullyOverflowed: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAwBA;;CAEC"}

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

@@ -29,4 +29,3 @@ const _AttachmentOverflowMenuButton = require("./AttachmentOverflowMenuButton");
 const _renderAttachmentOverflowMenuButton = require("./renderAttachmentOverflowMenuButton");
 const _useAttachmentOverflowMenuButton = require("./useAttachmentOverflowMenuButton");
 const _useAttachmentOverflowMenuButtonStylesstyles = require("./useAttachmentOverflowMenuButtonStyles.styles");
- //# sourceMappingURL=index.js.map

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

@@ -20,4 +20,4 @@ const renderAttachmentOverflowMenuButton_unstable = (state)=>{
             ]
         })
     }) : null;
-}; //# sourceMappingURL=renderAttachmentOverflowMenuButton.js.map
+};

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.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"}
+{"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":["renderAttachmentOverflowMenuButton_unstable","state","assertSlots","isOverflowing","_jsx","MenuTrigger","_jsxs","root","children","isLoading","progress"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;4BAXb;iCAEyC;AASlC,MAAMA,8CAA8C,CAACC;IAC1DC,IAAAA,4BAAAA,EAA+CD;IAE/C,OAAOA,MAAME,aAAa,GAAA,WAAA,GACxBC,IAAAA,eAAA,EAACC,4BAAAA,EAAAA;kBACC,WAAA,GAAAC,IAAAA,gBAAA,EAACL,MAAMM,IAAI,EAAA;;gBACRN,MAAMM,IAAI,CAACC,QAAQ;gBACnBP,MAAMQ,SAAS,IAAA,WAAA,GAAIL,IAAAA,eAAA,EAACH,MAAMS,QAAQ,EAAA,CAAA;;;SAGrC;AACN"}

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

@@ -8,16 +8,21 @@ Object.defineProperty(exports, "useAttachmentOverflowMenuButton_unstable", {
         return useAttachmentOverflowMenuButton_unstable;
     }
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactprovider = require("@fluentui-copilot/react-provider");
 const _reactcomponents = require("@fluentui/react-components");
 const _attachmentOverflowMenuContext = require("../../contexts/attachmentOverflowMenuContext");
+const _reacticons = require("@fluentui/react-icons");
+const _attachmentListContext = require("../../contexts/attachmentListContext");
 const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
-    const { children, text } = props;
     const { isOverflowing, overflowCount, overflowButtonRef } = (0, _attachmentOverflowMenuContext.useAttachmentOverflowMenuContext_unstable)((context)=>context);
+    const { numberOfAttachments } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
+    const fullyOverflowed = overflowCount >= numberOfAttachments;
     const isLoading = !!props.isLoading;
     const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
     const mode = (0, _reactprovider.useCopilotMode)(props.mode);
-    const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
+    const buttonText = defaultButtonText(props, overflowCount, designVersion, mode, fullyOverflowed);
     return {
         components: {
             root: 'button',
@@ -28,7 +33,7 @@ const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
             ...props
         }), {
             defaultProps: {
-                children: processedText !== null && processedText !== void 0 ? processedText : `+${overflowCount}`
+                children: buttonText
             },
             elementType: 'button'
         }),
@@ -41,10 +46,27 @@ const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
             },
             elementType: _reactcomponents.ProgressBar
         }),
+        fullyOverflowed,
         isOverflowing,
         overflowCount,
         isLoading,
         designVersion,
         mode
     };
-}; //# sourceMappingURL=useAttachmentOverflowMenuButton.js.map
+};
+function defaultButtonText(props, overflowCount, designVersion, copilotMode, fullyOverflowed) {
+    if (props.children) {
+        return props.children;
+    }
+    if (props.text) {
+        if (typeof props.text === 'function') {
+            return props.text(overflowCount);
+        } else {
+            return props.text;
+        }
+    }
+    if (designVersion === 'next' && fullyOverflowed) {
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, copilotMode === 'canvas' ? /*#__PURE__*/ _react.createElement(_reacticons.Attach24Regular, null) : /*#__PURE__*/ _react.createElement(_reacticons.Attach20Regular, null), overflowCount);
+    }
+    return `+${overflowCount}`;
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { 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 designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\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    designVersion,\n    mode,\n  };\n};\n"],"names":["children","props","isLoading","text","isOverflowing","components","ProgressBar","root","always","getIntrinsicElementProps","ref","useMergedRefs","overflowButtonRef","overflowCount","defaultProps","slot","progress","shape","thickness","processedText","designVersion","mode","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBUA;;;eAAAA;;;+BArBuC;iCAC0B;+CACjB;AAmBxD,MAAQA,2CAAmBC,CAAAA,OAAAA;UAC3B,EAGAD,QAAME,EAENC,IAAA,KACAF;UAEA,EACAG,aAAO,eACLC,mBACQ,iFACIC,EAAAA,CAAAA,UAAAA;UACZJ,YAAA,CAAA,CAAAD,MAAAC,SAAA;UACAK,gBAAWC,IAAAA,+BACTC,EAAAA,MAAAA,aAAyB;iBACvBC,IAAAA,6BAAKC,EAAAA,MAAmBC,IAAAA;0BAChBZ,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAG,SAAA,aAAAA,KAAAU,iBAAAV;WACV;oBACEW;;sBAA+DR,4BAAA;;cAAyBS,qBAAA,CAAAP,MAAA,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBAE5FO,IAAAA,8BAAeR,EAAAA,KAAOP;oBACpBa;;0BAAkCG;0BAAiBC,kBAAW,QAAAC,kBAAA,KAAA,IAAAA,gBAAA,CAAA,CAAA,EAAAN,cAAA,CAAA;;yBAAiC;;kBAEjGE,qBAAA,CAAAP,MAAA,CAAAP,MAAAe,QAAA,EAAA;0BACAZ;gBACAS,OAAAA;gBACAX,OAAAA;gBACAkB,WAAAA;gBACAC,cAAAA;YACF;YACAC,aAAAhB,4BAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenuButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { CopilotMode, DesignVersion } from '@fluentui-copilot/react-provider';\nimport { useCopilotMode, useDesignVersion } from '@fluentui-copilot/react-provider';\nimport { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n  AttachmentOverflowMenuButtonProps,\n  AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\nimport { Attach20Regular, Attach24Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\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 { numberOfAttachments } = useAttachmentListContext_unstable(context => context);\n\n  const fullyOverflowed = overflowCount >= numberOfAttachments;\n  const isLoading = !!props.isLoading;\n\n  const designVersion = useDesignVersion(props.designVersion);\n  const mode = useCopilotMode(props.mode);\n\n  const buttonText = defaultButtonText(props, overflowCount, designVersion, mode, fullyOverflowed);\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      {\n        defaultProps: {\n          children: buttonText,\n        },\n        elementType: 'button',\n      },\n    ),\n    progress: slot.always(props.progress, {\n      defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n      elementType: ProgressBar,\n    }),\n    fullyOverflowed,\n    isOverflowing,\n    overflowCount,\n    isLoading,\n    designVersion,\n    mode,\n  };\n};\n\nfunction defaultButtonText(\n  props: AttachmentOverflowMenuButtonProps,\n  overflowCount: number,\n  designVersion: DesignVersion['designVersion'],\n  copilotMode: CopilotMode['mode'],\n  fullyOverflowed: boolean,\n) {\n  if (props.children) {\n    return props.children;\n  }\n\n  if (props.text) {\n    if (typeof props.text === 'function') {\n      return props.text(overflowCount);\n    } else {\n      return props.text;\n    }\n  }\n\n  if (designVersion === 'next' && fullyOverflowed) {\n    return (\n      <>\n        {copilotMode === 'canvas' ? <Attach24Regular /> : <Attach20Regular />}\n        {overflowCount}\n      </>\n    );\n  }\n\n  return `+${overflowCount}`;\n}\n"],"names":["useAttachmentOverflowMenuButton_unstable","props","ref","isOverflowing","overflowCount","overflowButtonRef","useAttachmentOverflowMenuContext_unstable","context","numberOfAttachments","useAttachmentListContext_unstable","fullyOverflowed","isLoading","designVersion","useDesignVersion","mode","useCopilotMode","buttonText","defaultButtonText","components","root","progress","ProgressBar","slot","always","getIntrinsicElementProps","useMergedRefs","defaultProps","children","elementType","value","undefined","shape","thickness","copilotMode","text","React","createElement","Fragment","Attach24Regular","Attach20Regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBaA;;;eAAAA;;;;iEArBU;+BAE0B;iCAC0B;+CACjB;4BAKT;uCACC;AAW3C,MAAMA,2CAA2C,CACtDC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,wEAAAA,EAC1DC,CAAAA,UAAWA;IAEb,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,IAAAA,wDAAAA,EAAkCF,CAAAA,UAAWA;IAE7E,MAAMG,kBAAkBN,iBAAiBI;IACzC,MAAMG,YAAY,CAAC,CAACV,MAAMU,SAAS;IAEnC,MAAMC,gBAAgBC,IAAAA,+BAAAA,EAAiBZ,MAAMW,aAAa;IAC1D,MAAME,OAAOC,IAAAA,6BAAAA,EAAed,MAAMa,IAAI;IAEtC,MAAME,aAAaC,kBAAkBhB,OAAOG,eAAeQ,eAAeE,MAAMJ;IAEhF,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,UAAUC,4BAAAA;QACZ;QACAF,MAAMG,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,UAAU;YACjCtB,KAAKuB,IAAAA,8BAAAA,EAAcvB,KAAKG;YACxB,GAAGJ,KAAK;QACV,IACA;YACEyB,cAAc;gBACZC,UAAUX;YACZ;YACAY,aAAa;QACf;QAEFR,UAAUE,qBAAAA,CAAKC,MAAM,CAACtB,MAAMmB,QAAQ,EAAE;YACpCM,cAAc;gBAAEG,OAAOC;gBAAWC,OAAO;gBAAUC,WAAW;gBAAS,cAAc;YAAU;YAC/FJ,aAAaP,4BAAAA;QACf;QACAX;QACAP;QACAC;QACAO;QACAC;QACAE;IACF;AACF;AAEA,SAASG,kBACPhB,KAAwC,EACxCG,aAAqB,EACrBQ,aAA6C,EAC7CqB,WAAgC,EAChCvB,eAAwB;IAExB,IAAIT,MAAM0B,QAAQ,EAAE;QAClB,OAAO1B,MAAM0B,QAAQ;IACvB;IAEA,IAAI1B,MAAMiC,IAAI,EAAE;QACd,IAAI,OAAOjC,MAAMiC,IAAI,KAAK,YAAY;YACpC,OAAOjC,MAAMiC,IAAI,CAAC9B;QACpB,OAAO;YACL,OAAOH,MAAMiC,IAAI;QACnB;IACF;IAEA,IAAItB,kBAAkB,UAAUF,iBAAiB;QAC/C,OAAA,WAAA,GACEyB,OAAAC,aAAA,CAAAD,OAAAE,QAAA,EAAA,MACGJ,gBAAgB,WAAA,WAAA,GAAWE,OAAAC,aAAA,CAACE,2BAAAA,EAAAA,QAAAA,WAAAA,GAAqBH,OAAAC,aAAA,CAACG,2BAAAA,EAAAA,OAClDnC;IAGP;IAEA,OAAO,CAAC,CAAC,EAAEA,cAAc,CAAC;AAC5B"}

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

@@ -39,23 +39,16 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         Btl43ni: 0,
         B7oj6ja: 0,
         Dimara: "f1kijzfu",
-        Bgfg5da: 0,
-        B9xav0g: 0,
-        oivjwe: 0,
-        Bn0qgzm: 0,
-        B4g9neb: 0,
-        zhjwy3: 0,
-        wvpqe5: 0,
-        ibv6hh: 0,
-        u1mtju: 0,
-        h3c5rm: 0,
-        vrafjx: 0,
-        Bekrc4i: 0,
-        i8vvqc: 0,
-        g2u3we: 0,
-        icvyot: 0,
-        B4j52fo: 0,
-        irswps: "f3bhgqh",
+        g2u3we: "fghlq4f",
+        h3c5rm: [
+            "f1gn591s",
+            "fjscplz"
+        ],
+        B9xav0g: "fb073pr",
+        zhjwy3: [
+            "fjscplz",
+            "f1gn591s"
+        ],
         sj55zd: "fkfq4zb",
         De3pzq: "f16xq7d1",
         eoavqd: "f8491dx",
@@ -79,6 +72,28 @@ const useNextStyles = (0, _reactcomponents.__styles)({
         z189sj: 0,
         z8tnut: 0,
         B0ocmuz: "f1nm7172"
+    },
+    fullyOverflowed_canvas: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fuva4e2",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "f1anucx2"
+    },
+    fullyOverflowed_sidecar: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "ffysxzw",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "f1i3iumi"
     }
 }, {
     d: [
@@ -88,12 +103,10 @@ const useNextStyles = (0, _reactcomponents.__styles)({
                 p: -1
             }
         ],
-        [
-            ".f3bhgqh{border:none;}",
-            {
-                p: -2
-            }
-        ],
+        ".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
+        ".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
+        ".fjscplz{border-left-color:var(--colorTransparentStroke);}",
+        ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
         ".fkfq4zb{color:var(--colorNeutralForeground2);}",
         ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
         ".f1w5jphr{min-height:40px;}",
@@ -109,7 +122,25 @@ const useNextStyles = (0, _reactcomponents.__styles)({
             {
                 p: -1
             }
-        ]
+        ],
+        [
+            ".fuva4e2{padding:var(--spacingVerticalNone) var(--spacingHorizontalL);}",
+            {
+                p: -1
+            }
+        ],
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".f1anucx2{line-height:var(--lineHeightBase450);}",
+        [
+            ".ffysxzw{padding:var(--spacingVerticalNone) var(--spacingHorizontalM);}",
+            {
+                p: -1
+            }
+        ],
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}"
     ],
     h: [
         ".f8491dx:hover{cursor:pointer;}",
@@ -123,11 +154,11 @@ const useNextStyles = (0, _reactcomponents.__styles)({
 });
 const useAttachmentOverflowMenuButtonStyles_unstable = (state)=>{
     'use no memo';
-    const { designVersion, mode } = state;
+    const { designVersion, mode, fullyOverflowed } = state;
     const rootBaseClassName = useRootBaseClassName();
     const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
     const nextStyles = useNextStyles();
-    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], state.root.className);
+    state.root.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.root, rootBaseClassName, designVersion === 'next' && nextStyles.root, designVersion === 'next' && nextStyles[mode], designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`], state.root.className);
     if (state.progress) {
         state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentOverflowMenuButtonClassNames.progress, progressBarStyles.progress, state.progress.className);
         const bar = _reactcomponents.slot.optional(state.progress.bar, {

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

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, slot, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\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.colorSubtleBackground,\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.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\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\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    border: 'none',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\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 { designVersion, mode } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\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","nextStyles","useNextStyles","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","borderRadius","boxSizing","columnGap","cursor","display","flexWrap","fontFamily","fontSize","fontWeight","justifyContent","padding","verticalAlign","position","ibv6hh","backgroundColor","Bekrc4i","i8vvqc","B4j52fo","irswps","ecr2s2","canvas","sidecar","p","a","state","bar","rootBaseClassName","progressBarStyles","useProgressBarStyles","className","mergeClasses","indeterminateProgressBar","designVersion","mode","slot","optional","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAiFLC,8CAAaC;eAAbD;;;iCA1FkE;4CAErC;AAO9B,MAAMD,yCAA4F;UACvGG;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;QACAC,SAAAA;QACAC,SAAAA;QACAC,QAAAA;QACAC,SAAAA;QACAC,SAAS;QACTC,QAAAA;QACAC,QAAAA;QAEAC,QAAA;gBACEV;gBACAW;gBACAlB;QACFmB,SAAA;QACAC,QAAA;gBACEF;gBACAlB;QACFqB,SAAA;QACAC,QAAA;gBACE;gBACEJ;gBACF;iBACA;gBACEA;gBACF;QACFK,QAAA;IACF;IAEAC,QAAM7B;QACJC,QAAM;iBACJQ;gBACAF;gBACAF;gBACAkB;iBACA;;;gBAGEA;iBACF;gBACA;gBACElB;gBACAkB;iBACF;;;;;;YAGW;oBACXJ;;SACF;QAAA;YAAA;YAAA;gBACAW,GAAAA,CAAAA;;;;QACa;QAAA;QAAA;YAAA;YAAA;oBACXX;;SACF;QAAA;QAAA;YAAA;YAAA;gBACFY,GAAA,CAAA;YAEA;SAAA;KAAA;;;;;;IAECC,GACD;QAAA;QACEC;KAAAA;;AAQA,MAAMlC,iDAAaC,CAAAA;;UAWjBiC,eAMMC;UAAoFC,oBAAAhC;UAC1FiC,oBAASC,IAAAA,gDAAA;uBACHJ;wBACEK,GAAAA,IAAAA,6BAAYC,EAAAA,uCAA+BC,IAAAA,EAAAA,mBAAuCC,kBAAA,UAAA1C,WAAAE,IAAA,EAAAwC,kBAAA,UAAA1C,UAAA,CAAA2C,KAAA,EAAAT,MAAAhC,IAAA,CAAAqC,SAAA;cACxFpC,QAAO,EAAA;sBACLgC,CAAAA,SAAII,GAASC,IAAAA,6BAAGA,EAAAA,uCAAmDL,QAAII,EAAAA,kBAASpC,QAAA,EAAA+B,MAAA/B,QAAA,CAAAoC,SAAA;oBAClFK,qBAAA,CAAAC,QAAA,CAAAX,MAAA/B,QAAA,CAAAgC,GAAA,EAAA;yBACMhC;6BACR;QACF;QAEA,IAAAgC,KAAOD;YACP,IAAAA,MAAA/B,QAAA,CAAA2C,KAAA,KAAAC,WAAA"}
+{"version":3,"sources":["useAttachmentOverflowMenuButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands, slot } from '@fluentui/react-components';\nimport { tokens, typographyStyles } from '@fluentui-copilot/tokens';\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.colorSubtleBackground,\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.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  verticalAlign: 'middle',\n  position: 'relative',\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2Hover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\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\nconst useNextStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusXLarge,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground2Hover,\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n  canvas: {\n    minHeight: '40px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  sidecar: {\n    minHeight: '32px',\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n  },\n  fullyOverflowed_canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalL}`,\n    ...typographyStyles.subtitle2,\n  },\n  fullyOverflowed_sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalM}`,\n    ...typographyStyles.body1Strong,\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 { designVersion, mode, fullyOverflowed } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const progressBarStyles = useProgressBarStyles();\n  const nextStyles = useNextStyles();\n\n  state.root.className = mergeClasses(\n    attachmentOverflowMenuButtonClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && nextStyles.root,\n    designVersion === 'next' && nextStyles[mode],\n    designVersion === 'next' && fullyOverflowed && nextStyles[`fullyOverflowed_${mode}`],\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","state","root","progress","useRootBaseClassName","makeResetStyles","color","alignItems","border","strokeWidthThin","borderRadius","boxSizing","columnGap","cursor","display","flexWrap","fontFamily","fontSize","typographyStyles","body1","fontWeight","justifyContent","padding","verticalAlign","position","Bi91k9c","backgroundColor","uwmqm3","z189sj","z8tnut","useNextStyles","borderColor","Byoj8tv","canvas","minHeight","B0ocmuz","sidecar","Bg96gwp","p","fullyOverflowed_sidecar","body1Strong","fullyOverflowed","className","progressBarStyles","bar","mergeClasses","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,sCAAAA;eAAAA;;IAqGTC,8CACED;eADFC;;;iCA9GgE;4CAE/B;AAO9B,MAAMD,yCAA4F;UACvGE;cACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;OAC3CC;QAAAA;QAAqC;QAAA;KAAA;OACrCC;QAAAA;KAAY;;MAEZC,gBAAkBC,IAAAA,yBAAAA,EAAAA;UAClBC;QACAC,SAAAA;QACAC,SAAAA;QACAC,SAAQ;QACRC,SAAS;QACTC,QAAAA;QACAC,QAAAA;QACAC,QAAAA;YAAAA;YAAUC;SAAiBC;QAC3BC,SAAAA;QACAC,QAAAA;YAAAA;YAAgB;SAAA;QAChBC,QAAAA;QACAC,QAAAA;QACAC,QAAAA;QAEAC,SAAA;gBACEZ;gBACAa;gBACApB;;YAEF;gBACEoB;iBACApB;QACFqB,QAAA;QACAC,QAAA;gBACE;iBACEF;;aAEF;gBACEA;iBACF;QACFC,QAAA;QACFC,QAAA;QAEAC,QAAMC;QACJ5B,SAAM;;4BAEU6B;iBACdzB;gBACAoB;gBACA;gBACEb;iBACAP;iBACAoB;iBACF;iBACA;iBACEpB;;6BAEF;QACF0B,SAAA;QACAC,QAAQ;gBACNC;gBACAZ;QACFa,SAAA;QACAC,SAAS;iBACPF;iBACAZ;QACFe,SAAA;;;;;;YAG+B;gBAC/BC,GAAA,CAAA;;SACAC;QAAAA;QAAyB;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;oBACvBjB;;;;QACoBkB;YAAAA;YAAW;gBACjCF,GAAA,CAAA;YACF;SAAA;QAAA;YAAA;YAAA;gBAEAA,GAAA,CAAA;;;;;;;;;;gBAGAA,GAAA,CAAA;;SAGE;QAAA;QAAA;KAAA;OAEA;QAAA;QAA6BG;QAAoBxC;KAAAA;OAEjD;QAAA;QAA0BG;KAAAA;;MAcxBH,iDACED,CAAAA;;yBAKwF,MAC1F,iBACMC;8BAEGG;8BACDsC,IAAAA,gDAAyBC;uBAC/Bb;cACA7B,CAAAA,SAAME,GAAAA,IAAAA,6BAAeyC,EAAAA,uCAAAA,IAAAA,EAAAA,mBAAAA,kBAAAA,UAAAA,WAAAA,IAAAA,EAAAA,kBAAAA,UAAAA,UAAAA,CAAAA,KAAAA,EAAAA,kBAAAA,UAAAA,mBAAAA,UAAAA,CAAAA,CAAAA,gBAAAA,EAAAA,KAAAA,CAAAA,CAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;cACvBzC,QAAA,EAAA;QACFF,MAAAE,QAAA,CAAAuC,SAAA,GAAAG,IAAAA,6BAAA,EAAA7C,uCAAAG,QAAA,EAAAwC,kBAAAxC,QAAA,EAAAF,MAAAE,QAAA,CAAAuC,SAAA;QAEA,MAAAE,MAAO3C,qBAAAA,CAAAA,QAAAA,CAAAA,MAAAA,QAAAA,CAAAA,GAAAA,EAAAA;YACP6C,aAAA"}