@fluentui-copilot/react-attachments 0.13.2 → 0.13.4

package/lib/components/Attachment/useAttachmentStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  slot,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { useProgressBarStyles } from '../utils/useProgressBarStyles.styles';\nimport type { AttachmentSlots, AttachmentState } from './Attachment.types';\nimport type { GriffelResetStyle, SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentClassNames: SlotClassNames<AttachmentSlots> = {\n  root: 'fai-Attachment',\n  primaryAction: 'fai-Attachment__primaryAction',\n  dismissButton: 'fai-Attachment__dismissButton',\n  media: 'fai-Attachment__media',\n  content: 'fai-Attachment__content',\n  dismissIcon: 'fai-Attachment__dismissIcon',\n  progress: 'fai-Attachment__progress',\n};\n\nconst ATTACHMENT_MAXWIDTH = '180px';\nconst SMALL_ATTACHMENT_SIZE = '16px';\nconst ATTACHMENT_SIZE = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  verticalAlign: 'middle',\n  boxSizing: 'border-box',\n  width: 'fit-content',\n  alignSelf: 'end',\n  position: 'relative',\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorSubtleBackground,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  boxSizing: 'border-box',\n  columnGap: tokens.spacingHorizontalSNudge,\n  color: tokens.colorNeutralForeground1,\n  cursor: 'pointer',\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  justifyContent: 'center',\n  ...createCustomFocusIndicatorStyle({\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n    zIndex: 1,\n  }),\n  verticalAlign: 'middle',\n};\n\nconst usePrimaryActionBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n  borderTopRightRadius: tokens.borderRadiusNone,\n  borderBottomRightRadius: tokens.borderRadiusNone,\n  borderRightStyle: 'none',\n  maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n});\n\nconst usePrimaryActionStyles = makeStyles({\n  button: {\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.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});\n\nconst useDismissButtonBaseClassName = makeResetStyles({\n  ...buttonBaseStyles,\n\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n\n  // divider:\n  borderLeftColor: tokens.colorNeutralStroke1,\n  borderTopLeftRadius: tokens.borderRadiusNone,\n  borderBottomLeftRadius: tokens.borderRadiusNone,\n\n  borderTopRightRadius: tokens.borderRadiusMedium,\n  borderBottomRightRadius: tokens.borderRadiusMedium,\n\n  ':hover': {\n    cursor: 'pointer',\n    backgroundColor: tokens.colorSubtleBackgroundHover,\n    color: tokens.colorNeutralForeground2BrandHover,\n  },\n  ':active': {\n    backgroundColor: tokens.colorSubtleBackgroundPressed,\n    color: tokens.colorNeutralForeground2BrandPressed,\n  },\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'HighlightText',\n    },\n    ':active': {\n      backgroundColor: 'HighlightText',\n    },\n  },\n});\n\nconst useDismissButtonCurrentStyles = makeStyles({\n  root: {\n    ':hover': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorBrandForegroundLinkHover,\n      },\n    },\n  },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: ATTACHMENT_SIZE,\n  lineHeight: ATTACHMENT_SIZE,\n  width: ATTACHMENT_SIZE,\n});\n\nconst useContentBaseClassName = makeResetStyles({\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  ...typographyStyles.body1,\n});\n\nconst useDismissIconBaseClassName = makeResetStyles({\n  alignItems: 'center',\n  borderRadius: tokens.borderRadiusCircular,\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground1,\n  display: 'inline-flex',\n  fontSize: ATTACHMENT_SIZE,\n  height: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n  justifyContent: 'center',\n  maxWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  minWidth: `calc(${ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  padding: `calc(${tokens.spacingVerticalXXS} / 2) calc(${tokens.spacingHorizontalXXS} / 2)`,\n});\n\nconst useDismissIconNextStyles = makeStyles({\n  dismissOnly: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useImageOnlyStyles = makeStyles({\n  primaryAction: {\n    padding: 0,\n  },\n  content: {\n    lineHeight: 0,\n  },\n});\n\nexport const useOverflowStyles = makeStyles({\n  overflow: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n});\n\nconst useSmallStyles = makeStyles({\n  primaryAction: {\n    maxWidth: `calc(${ATTACHMENT_MAXWIDTH} - ${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS} - ${tokens.spacingHorizontalXS})`,\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge} ${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalSNudge}`,\n  },\n  media: {\n    fontSize: SMALL_ATTACHMENT_SIZE,\n    height: SMALL_ATTACHMENT_SIZE,\n    lineHeight: SMALL_ATTACHMENT_SIZE,\n    width: SMALL_ATTACHMENT_SIZE,\n  },\n  content: {\n    ...typographyStyles.caption1,\n  },\n  dismissButton: {\n    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,\n    maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n    minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS}) + ${tokens.spacingHorizontalXS}`,\n  },\n  dismissIcon: {\n    fontSize: SMALL_ATTACHMENT_SIZE,\n    height: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingVerticalXXS})`,\n    maxWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n    minWidth: `calc(${SMALL_ATTACHMENT_SIZE} + ${tokens.strokeWidthThin} * 2 + ${tokens.spacingHorizontalXXS})`,\n  },\n});\n\nconst usePrimaryActionNextStyles = makeStyles({\n  root: {\n    borderTopLeftRadius: tokens.borderRadiusXLarge,\n    borderBottomLeftRadius: tokens.borderRadiusXLarge,\n  },\n  canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '40px',\n  },\n\n  sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '32px',\n  },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n  root: {\n    borderTopRightRadius: tokens.borderRadiusXLarge,\n    borderBottomRightRadius: tokens.borderRadiusXLarge,\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderLeftWidth: tokens.strokeWidthThin,\n    borderLeftStyle: 'solid',\n  },\n  withPrimary: {\n    ':hover': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n    },\n    ':active': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  canvas: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalS}`,\n    minHeight: '40px',\n    width: '40px',\n  },\n  sidecar: {\n    padding: `${tokens.spacingVerticalNone} ${tokens.spacingHorizontalMNudge}`,\n    minHeight: '32px',\n    width: '32px',\n  },\n  dismissOnly: {\n    borderRadius: tokens.borderRadiusXLarge,\n    width: 'unset',\n    borderLeftColor: tokens.colorTransparentStroke,\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3,\n    },\n  },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n  sharedStyles: {\n    border: 'none',\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  sharedInteractiveStyles: {\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n  },\n});\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: tokens.borderRadiusNone,\n    borderBottomRightRadius: tokens.borderRadiusNone,\n  }),\n\n  dismissButton: createCustomFocusIndicatorStyle({\n    borderTopLeftRadius: tokens.borderRadiusNone,\n    borderBottomLeftRadius: tokens.borderRadiusNone,\n  }),\n});\n\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const primaryActionBaseClassName = usePrimaryActionBaseClassName();\n  const dismissButtonBaseClassName = useDismissButtonBaseClassName();\n  const dismissButtonCurrentStyles = useDismissButtonCurrentStyles();\n  const mediaBaseClassName = useMediaBaseClassName();\n  const contentBaseClassName = useContentBaseClassName();\n  const dismissIconBaseClassName = useDismissIconBaseClassName();\n  const dismissIconNextStyles = useDismissIconNextStyles();\n  const progressBarStyles = useProgressBarStyles();\n  const primaryActionStyles = usePrimaryActionStyles();\n  const imageOnlyStyles = useImageOnlyStyles();\n  const smallStyles = useSmallStyles();\n  const primaryActionNextStyles = usePrimaryActionNextStyles();\n  const dismissButtonNextStyles = useDismissButtonNextStyles();\n  const primaryDismissNextStyles = usePrimaryDismissNextStyles();\n  const rootNextStyles = useRootNextStyles();\n  const focusStyles = useFocusStyles();\n  const { imageOnly, primaryAction, size, mode, designVersion, dismissOnly } = state;\n\n  state.root.className = mergeClasses(\n    attachmentClassNames.root,\n    rootBaseClassName,\n    designVersion === 'next' && rootNextStyles.root,\n    state.root.className,\n  );\n  state.primaryAction.className = mergeClasses(\n    attachmentClassNames.primaryAction,\n    primaryActionBaseClassName,\n    size === 'small' && smallStyles.primaryAction,\n    primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button,\n    imageOnly && imageOnlyStyles.primaryAction,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' &&\n      primaryAction.as !== 'span' &&\n      !state.isLoading &&\n      primaryDismissNextStyles.sharedInteractiveStyles,\n    designVersion === 'next' && primaryActionNextStyles.root,\n    designVersion === 'next' && primaryActionNextStyles[mode],\n    focusStyles.primaryActionButton,\n    state.primaryAction.className,\n  );\n  state.dismissButton.className = mergeClasses(\n    attachmentClassNames.dismissButton,\n    dismissButtonBaseClassName,\n    designVersion === 'current' && dismissButtonCurrentStyles.root,\n    size === 'small' && smallStyles.dismissButton,\n    designVersion === 'next' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' && primaryDismissNextStyles.sharedInteractiveStyles,\n    designVersion === 'next' && dismissButtonNextStyles.root,\n    designVersion === 'next' && dismissButtonNextStyles[mode],\n    designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\n    designVersion === 'next' && !dismissOnly && dismissButtonNextStyles.withPrimary,\n    focusStyles.dismissButton,\n    state.dismissButton.className,\n  );\n  if (state.media) {\n    state.media.className = mergeClasses(\n      attachmentClassNames.media,\n      mediaBaseClassName,\n      size === 'small' && smallStyles.media,\n      state.media.className,\n    );\n  }\n  state.content.className = mergeClasses(\n    attachmentClassNames.content,\n    contentBaseClassName,\n    size === 'small' && smallStyles.content,\n    imageOnly && imageOnlyStyles.content,\n    state.content.className,\n  );\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    size === 'small' && smallStyles.dismissIcon,\n    designVersion === 'next' && dismissOnly && dismissIconNextStyles.dismissOnly,\n    state.dismissIcon.className,\n  );\n\n  if (state.progress) {\n    state.progress.className = mergeClasses(\n      attachmentClassNames.progress,\n      progressBarStyles.progress,\n      state.progress.className,\n    );\n\n    const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n    if (bar) {\n      if (state.progress.value === undefined) {\n        bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n      } else {\n        bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n      }\n      state.progress.bar = bar;\n    }\n  }\n\n  return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","typographyStyles","tokens","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","alignSelf","position","buttonBaseStyles","alignItems","backgroundColor","colorSubtleBackground","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useDismissButtonCurrentStyles","colorBrandForegroundLinkHover","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useDismissIconNextStyles","dismissOnly","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","withPrimary","spacingHorizontalMNudge","colorNeutralBackground3","usePrimaryDismissNextStyles","sharedStyles","sharedInteractiveStyles","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","useRootNextStyles","useFocusStyles","primaryActionButton","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","dismissButtonCurrentStyles","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","dismissIconNextStyles","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","focusStyles","imageOnly","size","mode","designVersion","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/AttachmentList/AttachmentList.js

@@ -4,12 +4,11 @@ import { renderAttachmentList_unstable } from './renderAttachmentList';
 import { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';
 import { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';
 import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
-export const AttachmentList = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useAttachmentList_unstable(props, ref);
-  const contextValues = useAttachmentListContextValues_unstable(state);
-  useAttachmentListStyles_unstable(state);
-  useCustomStyleHook('useAttachmentListStyles')(state);
-  return renderAttachmentList_unstable(state, contextValues);
+export const AttachmentList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAttachmentList_unstable(props, ref);
+    const contextValues = useAttachmentListContextValues_unstable(state);
+    useAttachmentListStyles_unstable(state);
+    useCustomStyleHook('useAttachmentListStyles')(state);
+    return renderAttachmentList_unstable(state, contextValues);
 });
 AttachmentList.displayName = 'AttachmentList';
-//# sourceMappingURL=AttachmentList.js.map

package/lib/components/AttachmentList/AttachmentList.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=AttachmentList.types.js.map
+export { };

package/lib/components/AttachmentList/index.js

@@ -2,4 +2,3 @@ export { AttachmentList } from './AttachmentList';
 export { renderAttachmentList_unstable } from './renderAttachmentList';
 export { useAttachmentList_unstable } from './useAttachmentList';
 export { attachmentListClassNames, useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/AttachmentList/renderAttachmentList.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { Overflow, assertSlots } from '@fluentui/react-components';
 import { AttachmentListProvider } from '../../contexts/attachmentListContext';
 import { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';
 /**
  * Render the final JSX of AttachmentList
- */
-export const renderAttachmentList_unstable = (state, contextValues) => {
-  assertSlots(state);
-  const {
-    overflowMenuProps,
-    root,
-    shouldUseOverflow
-  } = state;
-  return /*#__PURE__*/_jsx(AttachmentListProvider, {
-    value: contextValues.attachmentList,
-    children: shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? /*#__PURE__*/_jsx(Overflow, {
-      ref: root.ref,
-      children: /*#__PURE__*/_jsxs(state.root, {
-        children: [root.children, /*#__PURE__*/_jsxs(AttachmentOverflowMenu, {
-          positioning: 'above',
-          ...overflowMenuProps,
-          children: [/*#__PURE__*/_jsx(state.overflowMenuButton, {}), /*#__PURE__*/_jsx(state.menuPopover, {
-            children: /*#__PURE__*/_jsx(state.menuList, {})
-          })]
-        })]
-      })
-    }) : /*#__PURE__*/_jsx(state.root, {})
-  });
+ */ export const renderAttachmentList_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    const { overflowMenuProps, root, shouldUseOverflow } = state;
+    return /*#__PURE__*/ _jsx(AttachmentListProvider, {
+        value: contextValues.attachmentList,
+        children: shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? /*#__PURE__*/ _jsx(Overflow, {
+            ref: root.ref,
+            children: /*#__PURE__*/ _jsxs(state.root, {
+                children: [
+                    root.children,
+                    /*#__PURE__*/ _jsxs(AttachmentOverflowMenu, {
+                        positioning: 'above',
+                        ...overflowMenuProps,
+                        children: [
+                            /*#__PURE__*/ _jsx(state.overflowMenuButton, {}),
+                            /*#__PURE__*/ _jsx(state.menuPopover, {
+                                children: /*#__PURE__*/ _jsx(state.menuList, {})
+                            })
+                        ]
+                    })
+                ]
+            })
+        }) : /*#__PURE__*/ _jsx(state.root, {})
+    });
 };
-//# sourceMappingURL=renderAttachmentList.js.map

package/lib/components/AttachmentList/useAttachmentList.js

@@ -16,130 +16,119 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
  *
  * @param props - props from this instance of AttachmentList
  * @param ref - reference to root HTMLElement of AttachmentList
- */
-export const useAttachmentList_unstable = (props, ref) => {
-  const {
-    children,
-    maxVisibleAttachments,
-    onAttachmentDismiss,
-    overflowMenuProps
-  } = props;
-  const innerRef = React.useRef(null);
-  const [setTimeout] = useTimeout();
-  const {
-    targetDocument
-  } = useFluent();
-  const designVersion = useDesignVersion(props.designVersion);
-  const {
-    findNextFocusable,
-    findPrevFocusable,
-    findLastFocusable
-  } = useFocusFinders();
-  const handleAttachmentDismiss = useEventCallback((e, data) => {
-    var _innerRef_current;
-    if (!onAttachmentDismiss) {
-      return;
-    }
-    onAttachmentDismiss(e, data);
-    // 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)) {
-      // focus on next attachment only if the active element is within the current attachment list
-      const next = findNextFocusable(activeElement, {
-        container: innerRef.current
-      });
-      if (next) {
-        // focus on the overflow button if the next focusable element is the overflow button.
-        // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.
-        if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {
-          setTimeout(() => {
-            var _findLastFocusable;
-            (_findLastFocusable = findLastFocusable(innerRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
-          }, 0);
+ */ export const useAttachmentList_unstable = (props, ref)=>{
+    const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;
+    const innerRef = React.useRef(null);
+    const [setTimeout] = useTimeout();
+    const { targetDocument } = useFluent();
+    const designVersion = useDesignVersion(props.designVersion);
+    const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();
+    const handleAttachmentDismiss = useEventCallback((e, data)=>{
+        var _innerRef_current;
+        if (!onAttachmentDismiss) {
+            return;
+        }
+        onAttachmentDismiss(e, data);
+        // 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)) {
+            // focus on next attachment only if the active element is within the current attachment list
+            const next = findNextFocusable(activeElement, {
+                container: innerRef.current
+            });
+            if (next) {
+                // focus on the overflow button if the next focusable element is the overflow button.
+                // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.
+                if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {
+                    setTimeout(()=>{
+                        var _findLastFocusable;
+                        (_findLastFocusable = findLastFocusable(innerRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+                    }, 0);
+                } else {
+                    next.focus();
+                }
+            } else {
+                const prev = findPrevFocusable(activeElement === null || activeElement === void 0 ? void 0 : activeElement.parentElement, {
+                    container: innerRef.current
+                });
+                prev === null || prev === void 0 ? void 0 : prev.focus();
+            }
         } else {
-          next.focus();
+            // 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 styles = useOverflowStyles();
+    const resolvedChildren = useOverflowMaxVisibleItems({
+        children,
+        maxVisibleItems: maxVisibleAttachments,
+        overflowClassName: styles.overflow
+    });
+    const attachmentOverflowMenuItems = React.useMemo(()=>{
+        if (resolvedChildren && Array.isArray(resolvedChildren)) {
+            return resolvedChildren.filter((child)=>/*#__PURE__*/ React.isValidElement(child)).map((child)=>child.props).map((attachment)=>{
+                const dismissButton = slot.optional(attachment.dismissButton, {
+                    elementType: 'button'
+                });
+                return /*#__PURE__*/ React.createElement(AttachmentOverflowMenuItem, {
+                    ...attachment,
+                    key: attachment.id,
+                    onClick: dismissButton === null || dismissButton === void 0 ? void 0 : dismissButton.onClick
+                });
+            });
         }
-      } 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 styles = useOverflowStyles();
-  const resolvedChildren = useOverflowMaxVisibleItems({
-    children,
-    maxVisibleItems: maxVisibleAttachments,
-    overflowClassName: styles.overflow
-  });
-  const attachmentOverflowMenuItems = React.useMemo(() => {
-    if (resolvedChildren && Array.isArray(resolvedChildren)) {
-      return resolvedChildren.filter(child => /*#__PURE__*/React.isValidElement(child)).map(child => child.props).map(attachment => {
-        const dismissButton = slot.optional(attachment.dismissButton, {
-          elementType: 'button'
-        });
-        return /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, {
-          ...attachment,
-          key: attachment.id,
-          onClick: dismissButton === null || dismissButton === void 0 ? void 0 : dismissButton.onClick
-        });
-      });
-    }
-    return [];
-  }, [resolvedChildren]);
-  const arrowNavigationProps = useArrowNavigationGroup({
-    circular: true,
-    axis: 'both',
-    memorizeCurrent: true
-  });
-  const shouldUseOverflow = maxVisibleAttachments !== undefined;
-  return {
-    designVersion,
-    onAttachmentDismiss: handleAttachmentDismiss,
-    shouldUseOverflow,
-    numberOfAttachments: resolvedChildren.length,
-    overflowMenuProps,
-    components: {
-      root: 'div',
-      menuList: MenuList,
-      menuPopover: MenuPopover,
-      overflowMenuButton: 'span'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      'aria-label': 'Attachments',
-      ref: useMergedRefs(ref, innerRef),
-      role: 'toolbar',
-      ...arrowNavigationProps,
-      ...props,
-      children: resolvedChildren
-    }), {
-      elementType: 'div'
-    }),
-    menuList: slot.optional(props.menuList, {
-      defaultProps: {
-        children: attachmentOverflowMenuItems
-      },
-      elementType: MenuList,
-      renderByDefault: true
-    }),
-    menuPopover: slot.optional(props.menuPopover, {
-      elementType: MenuPopover,
-      renderByDefault: true
-    }),
-    overflowMenuButton: slot.optional(props.overflowMenuButton, {
-      defaultProps: {
-        children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuButton, null)
-      },
-      elementType: 'span',
-      renderByDefault: true
-    })
-  };
+        return [];
+    }, [
+        resolvedChildren
+    ]);
+    const arrowNavigationProps = useArrowNavigationGroup({
+        circular: true,
+        axis: 'both',
+        memorizeCurrent: true
+    });
+    const shouldUseOverflow = maxVisibleAttachments !== undefined;
+    return {
+        designVersion,
+        onAttachmentDismiss: handleAttachmentDismiss,
+        shouldUseOverflow,
+        numberOfAttachments: resolvedChildren.length,
+        overflowMenuProps,
+        components: {
+            root: 'div',
+            menuList: MenuList,
+            menuPopover: MenuPopover,
+            overflowMenuButton: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            'aria-label': 'Attachments',
+            ref: useMergedRefs(ref, innerRef),
+            role: 'toolbar',
+            ...arrowNavigationProps,
+            ...props,
+            children: resolvedChildren
+        }), {
+            elementType: 'div'
+        }),
+        menuList: slot.optional(props.menuList, {
+            defaultProps: {
+                children: attachmentOverflowMenuItems
+            },
+            elementType: MenuList,
+            renderByDefault: true
+        }),
+        menuPopover: slot.optional(props.menuPopover, {
+            elementType: MenuPopover,
+            renderByDefault: true
+        }),
+        overflowMenuButton: slot.optional(props.overflowMenuButton, {
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(AttachmentOverflowMenuButton, null)
+            },
+            elementType: 'span',
+            renderByDefault: true
+        })
+    };
 };
-//# sourceMappingURL=useAttachmentList.js.map

package/lib/components/AttachmentList/useAttachmentListContextValues.js

@@ -1,17 +1,12 @@
 export function useAttachmentListContextValues_unstable(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
-  };
+    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/components/AttachmentList/useAttachmentListStyles.styles.raw.js

@@ -0,0 +1,44 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+export const attachmentListClassNames = {
+    root: 'fai-AttachmentList',
+    menuList: 'fai-AttachmentList__menuList',
+    menuPopover: 'fai-AttachmentList__menuPopover',
+    overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
+};
+const useRootBaseClassName = makeResetStyles({
+    columnGap: tokens.spacingHorizontalSNudge,
+    display: 'flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    flexWrap: 'wrap',
+    rowGap: tokens.spacingVerticalXS
+});
+const useOverflowMenuButtonBaseClassName = makeResetStyles({
+    display: 'inline-flex'
+});
+const useOverflowMenuPopoverNextStyles = makeStyles({
+    borderRadius: {
+        borderRadius: tokens.borderRadius4XL
+    }
+});
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */ export const useAttachmentListStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
+    const overflowMenuPopoverNextStyles = useOverflowMenuPopoverNextStyles();
+    const { designVersion } = state;
+    state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
+    if (state.menuList) {
+        state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);
+    }
+    if (state.menuPopover) {
+        state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, designVersion === 'next' && overflowMenuPopoverNextStyles.borderRadius, state.menuPopover.className);
+    }
+    if (state.overflowMenuButton) {
+        state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
+    }
+    return state;
+};

package/lib/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":["makeResetStyles","makeStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useOverflowMenuPopoverNextStyles","borderRadius","borderRadius4XL","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","overflowMenuPopoverNextStyles","designVersion","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,6BAA6B;AACvF,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBT,gBAAgB;IAC3CU,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqClB,gBAAgB;IACzDY,SAAS;AACX;AAEA,MAAMO,mCAAmClB,WAAW;IAClDmB,cAAc;QACZA,cAAcjB,OAAOkB,eAAe;IACtC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBf;IAC1B,MAAMgB,8BAA8BP;IACpC,MAAMQ,gCAAgCP;IACtC,MAAM,EAAEQ,aAAa,EAAE,GAAGJ;IAE1BA,MAAMlB,IAAI,CAACuB,SAAS,GAAG1B,aAAaE,yBAAyBC,IAAI,EAAEmB,mBAAmBD,MAAMlB,IAAI,CAACuB,SAAS;IAE1G,IAAIL,MAAMjB,QAAQ,EAAE;QAClBiB,MAAMjB,QAAQ,CAACsB,SAAS,GAAG1B,aAAaE,yBAAyBE,QAAQ,EAAEiB,MAAMjB,QAAQ,CAACsB,SAAS;IACrG;IACA,IAAIL,MAAMhB,WAAW,EAAE;QACrBgB,MAAMhB,WAAW,CAACqB,SAAS,GAAG1B,aAC5BE,yBAAyBG,WAAW,EACpCoB,kBAAkB,UAAUD,8BAA8BN,YAAY,EACtEG,MAAMhB,WAAW,CAACqB,SAAS;IAE/B;IAEA,IAAIL,MAAMf,kBAAkB,EAAE;QAC5Be,MAAMf,kBAAkB,CAACoB,SAAS,GAAG1B,aACnCE,yBAAyBI,kBAAkB,EAC3CiB,6BACAF,MAAMf,kBAAkB,CAACoB,SAAS;IAEtC;IAEA,OAAOL;AACT,EAAE"}

package/lib/components/AttachmentOverflowMenu/AttachmentOverflowMenu.js

@@ -2,14 +2,13 @@ import { useAttachmentOverflowMenu_unstable } from './useAttachmentOverflowMenu'
 import { renderAttachmentOverflowMenu_unstable } from './renderAttachmentOverflowMenu';
 import { useAttachmentOverflowMenuContextValues_unstable } from './useAttachmentOverflowMenuContextValues';
 import { useMenuContextValues_unstable } from '@fluentui/react-components';
-export const AttachmentOverflowMenu = props => {
-  const state = useAttachmentOverflowMenu_unstable(props);
-  const menuContextValues = useMenuContextValues_unstable(state);
-  const attachmentOverflowMenuContextValues = useAttachmentOverflowMenuContextValues_unstable(state);
-  return renderAttachmentOverflowMenu_unstable(state, {
-    menuContextValues,
-    attachmentOverflowMenuContextValues
-  });
+export const AttachmentOverflowMenu = (props)=>{
+    const state = useAttachmentOverflowMenu_unstable(props);
+    const menuContextValues = useMenuContextValues_unstable(state);
+    const attachmentOverflowMenuContextValues = useAttachmentOverflowMenuContextValues_unstable(state);
+    return renderAttachmentOverflowMenu_unstable(state, {
+        menuContextValues,
+        attachmentOverflowMenuContextValues
+    });
 };
 AttachmentOverflowMenu.displayName = 'AttachmentOverflowMenu';
-//# sourceMappingURL=AttachmentOverflowMenu.js.map

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=AttachmentOverflowMenu.types.js.map
+export { };

package/lib/components/AttachmentOverflowMenu/index.js

@@ -2,4 +2,3 @@ export { AttachmentOverflowMenu } from './AttachmentOverflowMenu';
 export { renderAttachmentOverflowMenu_unstable } from './renderAttachmentOverflowMenu';
 export { useAttachmentOverflowMenu_unstable } from './useAttachmentOverflowMenu';
 export { useAttachmentOverflowMenuContextValues_unstable } from './useAttachmentOverflowMenuContextValues';
-//# sourceMappingURL=index.js.map

package/lib/components/AttachmentOverflowMenu/renderAttachmentOverflowMenu.js

@@ -1,18 +1,13 @@
-import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots, renderMenu_unstable } from '@fluentui/react-components';
 import { AttachmentOverflowMenuProvider } from '../../contexts/attachmentOverflowMenuContext';
 /**
  * Render the final JSX of AttachmentOverflowMenu
- */
-export const renderAttachmentOverflowMenu_unstable = (state, contextValues) => {
-  const {
-    menuContextValues,
-    attachmentOverflowMenuContextValues
-  } = contextValues;
-  assertSlots(state);
-  return state.isOverflowing ? /*#__PURE__*/_jsx(AttachmentOverflowMenuProvider, {
-    value: attachmentOverflowMenuContextValues.attachmentOverflowMenu,
-    children: renderMenu_unstable(state, menuContextValues)
-  }) : null;
+ */ export const renderAttachmentOverflowMenu_unstable = (state, contextValues)=>{
+    const { menuContextValues, attachmentOverflowMenuContextValues } = contextValues;
+    assertSlots(state);
+    return state.isOverflowing ? /*#__PURE__*/ _jsx(AttachmentOverflowMenuProvider, {
+        value: attachmentOverflowMenuContextValues.attachmentOverflowMenu,
+        children: renderMenu_unstable(state, menuContextValues)
+    }) : null;
 };
-//# sourceMappingURL=renderAttachmentOverflowMenu.js.map

package/lib/components/AttachmentOverflowMenu/useAttachmentOverflowMenu.js

@@ -6,19 +6,13 @@ import { useMenu_unstable, useOverflowMenu } from '@fluentui/react-components';
  * before being passed to renderAttachmentOverflowMenu_unstable.
  *
  * @param props - props from this instance of AttachmentOverflowMenu
- */
-export const useAttachmentOverflowMenu_unstable = props => {
-  const menuState = useMenu_unstable(props);
-  const {
-    isOverflowing,
-    ref: overflowButtonRef,
-    overflowCount
-  } = useOverflowMenu();
-  return {
-    ...menuState,
-    isOverflowing,
-    overflowButtonRef,
-    overflowCount
-  };
+ */ export const useAttachmentOverflowMenu_unstable = (props)=>{
+    const menuState = useMenu_unstable(props);
+    const { isOverflowing, ref: overflowButtonRef, overflowCount } = useOverflowMenu();
+    return {
+        ...menuState,
+        isOverflowing,
+        overflowButtonRef,
+        overflowCount
+    };
 };
-//# sourceMappingURL=useAttachmentOverflowMenu.js.map

package/lib/components/AttachmentOverflowMenu/useAttachmentOverflowMenuContextValues.js

@@ -1,17 +1,12 @@
 export function useAttachmentOverflowMenuContextValues_unstable(state) {
-  const {
-    isOverflowing,
-    overflowButtonRef,
-    overflowCount
-  } = state;
-  // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
-  const attachmentOverflowMenu = {
-    isOverflowing,
-    overflowButtonRef,
-    overflowCount
-  };
-  return {
-    attachmentOverflowMenu
-  };
+    const { isOverflowing, overflowButtonRef, overflowCount } = state;
+    // This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
+    const attachmentOverflowMenu = {
+        isOverflowing,
+        overflowButtonRef,
+        overflowCount
+    };
+    return {
+        attachmentOverflowMenu
+    };
 }
-//# sourceMappingURL=useAttachmentOverflowMenuContextValues.js.map