npm - @fluentui-copilot/react-attachments - Versions diffs - 0.10.7 → 0.11.1 - Mend

@fluentui-copilot/react-attachments 0.10.7 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js CHANGED Viewed

@@ -20,6 +20,7 @@ _export(exports, {
     }
 });
 const _reactcomponents = require("@fluentui/react-components");
+const _tokens = require("@fluentui-copilot/tokens");
 const _useProgressBarStylesstyles = require("../utils/useProgressBarStyles.styles");
 const attachmentClassNames = {
     root: 'fai-Attachment',
@@ -38,18 +39,18 @@ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r16wonf3", nul
 ]);
 const buttonBaseStyles = {
     alignItems: 'center',
-    backgroundColor: _reactcomponents.tokens.colorSubtleBackground,
-    border: `${_reactcomponents.tokens.strokeWidthThin} solid ${_reactcomponents.tokens.colorNeutralStroke1}`,
-    borderRadius: _reactcomponents.tokens.borderRadiusMedium,
+    backgroundColor: _tokens.tokens.colorSubtleBackground,
+    border: `${_tokens.tokens.strokeWidthThin} solid ${_tokens.tokens.colorNeutralStroke1}`,
+    borderRadius: _tokens.tokens.borderRadiusMedium,
     boxSizing: 'border-box',
-    columnGap: _reactcomponents.tokens.spacingHorizontalSNudge,
-    color: _reactcomponents.tokens.colorNeutralForeground1,
+    columnGap: _tokens.tokens.spacingHorizontalSNudge,
+    color: _tokens.tokens.colorNeutralForeground1,
     cursor: 'pointer',
     display: 'inline-flex',
     flexWrap: 'nowrap',
     justifyContent: 'center',
     ...(0, _reactcomponents.createCustomFocusIndicatorStyle)({
-        outline: `${_reactcomponents.tokens.strokeWidthThick} solid ${_reactcomponents.tokens.colorStrokeFocus2}`,
+        outline: `${_tokens.tokens.strokeWidthThick} solid ${_tokens.tokens.colorStrokeFocus2}`,
         zIndex: 1
     }),
     verticalAlign: 'middle'
@@ -223,6 +224,82 @@ const useSmallStyles = (0, _reactcomponents.__styles)({
         ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"
     ]
 });
+const usePrimaryActionNextStyles = (0, _reactcomponents.__styles)({
+    root: {
+        Btl43ni: [
+            "f8yange",
+            "f1el4m67"
+        ],
+        Beyfa6y: [
+            "fc7yr5o",
+            "fnivh3a"
+        ]
+    },
+    canvas: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fpi12dx"
+    },
+    sidecar: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fgucwci"
+    }
+}, {
+    d: [
+        ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}",
+        ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}",
+        ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
+        ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
+        [
+            ".fpi12dx{padding:calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fgucwci{padding:calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS) calc(var(--spacingVerticalXS) - var(--strokeWidthThin)) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useDismissButtonNextStyles = (0, _reactcomponents.__styles)({
+    root: {
+        B7oj6ja: [
+            "f1el4m67",
+            "f8yange"
+        ],
+        Bbmb7ep: [
+            "fnivh3a",
+            "fc7yr5o"
+        ]
+    },
+    canvas: {
+        Bqenvij: "fbhnoac",
+        a9b677: "feqmc2u"
+    },
+    sidecar: {
+        Bqenvij: "f1d2rq10",
+        a9b677: "f1szoe96"
+    }
+}, {
+    d: [
+        ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}",
+        ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}",
+        ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}",
+        ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}",
+        ".fbhnoac{height:40px;}",
+        ".feqmc2u{width:40px;}",
+        ".f1d2rq10{height:32px;}",
+        ".f1szoe96{width:32px;}"
+    ]
+});
 const useAttachmentStyles_unstable = (state)=>{
     'use no memo';
     const rootBaseClassName = useRootBaseClassName();
@@ -235,10 +312,12 @@ const useAttachmentStyles_unstable = (state)=>{
     const primaryActionStyles = usePrimaryActionStyles();
     const imageOnlyStyles = useImageOnlyStyles();
     const smallStyles = useSmallStyles();
-    const { imageOnly, primaryAction, size } = state;
+    const primaryActionNextStyles = usePrimaryActionNextStyles();
+    const dismissButtonNextStyles = useDismissButtonNextStyles();
+    const { imageOnly, primaryAction, size, mode, designVersion } = state;
     state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
-    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
-    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, state.dismissButton.className);
+    state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, designVersion === 'next' && primaryActionNextStyles.root, designVersion === 'next' && primaryActionNextStyles[mode], state.primaryAction.className);
+    state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, designVersion === 'next' && dismissButtonNextStyles.root, designVersion === 'next' && dismissButtonNextStyles[mode], state.dismissButton.className);
     if (state.media) {
         state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
     }

package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentStyles.styles.ts"],"sourcesContent":["import {\n createCustomFocusIndicatorStyle,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n slot,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\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 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 [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n 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 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\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 mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\n const progressBarStyles = useProgressBarStyles();\n const primaryActionStyles = usePrimaryActionStyles();\n const imageOnlyStyles = useImageOnlyStyles();\n const smallStyles = useSmallStyles();\n const { imageOnly, primaryAction, size } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\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 state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.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 state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","justifyContent","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","SMALL_ATTACHMENT_SIZE","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","state","spacingVerticalXXS","primaryActionBaseClassName","useImageOnlyStyles","makeStyles","dismissIconBaseClassName","useProgressBarStyles","imageOnlyStyles","smallStyles","useSmallStyles","overflow","width","className","mergeClasses","rootBaseClassName","size","as","isLoading","primaryActionStyles","imageOnly","dismissButtonBaseClassName","contentBaseClassName","elementType","bar","value","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 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 [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorBrandForegroundLinkHover,\n },\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n ':focus': {\n [`& .${attachmentClassNames.dismissIcon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n 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 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: `calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS} calc(${tokens.spacingVerticalS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n },\n\n sidecar: {\n padding: `calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS} calc(${tokens.spacingVerticalXS} - ${tokens.strokeWidthThin}) ${tokens.spacingHorizontalS}`,\n },\n});\n\nconst useDismissButtonNextStyles = makeStyles({\n root: {\n borderTopRightRadius: tokens.borderRadiusXLarge,\n borderBottomRightRadius: tokens.borderRadiusXLarge,\n },\n canvas: {\n height: '40px',\n width: '40px',\n },\n sidecar: {\n height: '32px',\n width: '32px',\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 mediaBaseClassName = useMediaBaseClassName();\n const contentBaseClassName = useContentBaseClassName();\n const dismissIconBaseClassName = useDismissIconBaseClassName();\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 { imageOnly, primaryAction, size, mode, designVersion } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\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' && primaryActionNextStyles.root,\n designVersion === 'next' && primaryActionNextStyles[mode],\n state.primaryAction.className,\n );\n state.dismissButton.className = mergeClasses(\n attachmentClassNames.dismissButton,\n dismissButtonBaseClassName,\n size === 'small' && smallStyles.dismissButton,\n designVersion === 'next' && dismissButtonNextStyles.root,\n designVersion === 'next' && dismissButtonNextStyles[mode],\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 state.dismissIcon.className,\n );\n\n if (state.progress) {\n state.progress.className = mergeClasses(\n attachmentClassNames.progress,\n progressBarStyles.progress,\n state.progress.className,\n );\n\n const bar = slot.optional(state.progress.bar, { elementType: 'div', renderByDefault: true });\n if (bar) {\n if (state.progress.value === undefined) {\n bar.className = mergeClasses(progressBarStyles.indeterminateProgressBar, bar.className);\n } else {\n bar.className = mergeClasses(progressBarStyles.regularProgressBar, bar.className);\n }\n state.progress.bar = bar;\n }\n }\n\n return state;\n};\n"],"names":["attachmentClassNames","minWidth","SMALL_ATTACHMENT_SIZE","borderLeftColor","colorNeutralStroke1","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","makeResetStyles","display","tokens","colorSubtleBackground","boxSizing","strokeWidthThin","borderRadiusMedium","alignSelf","position","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","buttonBaseStyles","alignItems","backgroundColor","borderRadius","strokeWidthThick","colorStrokeFocus2","columnGap","flexWrap","__resetStyles","justifyContent","__styles","createCustomFocusIndicatorStyle","outline","zIndex","Bi91k9c","verticalAlign","lj723h","Bbkh6qg","usePrimaryActionBaseClassName","Cnge2b","borderRightStyle","maxWidth","spacingHorizontalXS","padding","spacingVerticalXS","m","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","Bg96gwp","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","colorNeutralForeground2BrandHover","uwmqm3","z189sj","a9b677","Byoj8tv","useMediaBaseClassName","fontSize","height","lineHeight","Be2twd7","useContentBaseClassName","overflowX","textOverflow","whiteSpace","d","useDismissIconBaseClassName","borderRadiusCircular","border","useImageOnlyStyles","z8tnut","overflow","p","useSmallStyles","useDismissButtonNextStyles","width","Bqenvij","usePrimaryActionNextStyles","borderRadiusXLarge","contentBaseClassName","canvas","primaryActionStyles","sidecar","primaryActionNextStyles","dismissButtonNextStyles","borderBottomRightRadius","mode","mergeClasses","rootBaseClassName","state","className","primaryActionBaseClassName","size","smallStyles","as","isLoading","imageOnly","imageOnlyStyles","designVersion","dismissButtonBaseClassName","mediaBaseClassName","dismissIconBaseClassName","useAttachmentStyles_unstable","bar","slot","optional","elementType","renderByDefault","progressBarStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/AttachmentList/AttachmentList.js CHANGED Viewed

@@ -14,10 +14,12 @@ const _useAttachmentList = require("./useAttachmentList");
 const _renderAttachmentList = require("./renderAttachmentList");
 const _useAttachmentListStylesstyles = require("./useAttachmentListStyles.styles");
 const _useAttachmentListContextValues = require("./useAttachmentListContextValues");
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const AttachmentList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useAttachmentList.useAttachmentList_unstable)(props, ref);
     const contextValues = (0, _useAttachmentListContextValues.useAttachmentListContextValues_unstable)(state);
     (0, _useAttachmentListStylesstyles.useAttachmentListStyles_unstable)(state);
+    (0, _reactprovider.useCustomStyleHook)('useAttachmentListStyles')(state);
     return (0, _renderAttachmentList.renderAttachmentList_unstable)(state, contextValues);
 });
 AttachmentList.displayName = 'AttachmentList'; //# sourceMappingURL=AttachmentList.js.map

package/lib-commonjs/components/AttachmentList/AttachmentList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["AttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nimport type { AttachmentListProps } from './AttachmentList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentList: ForwardRefComponent<AttachmentListProps> = React.forwardRef((props, ref) => {\n const state = useAttachmentList_unstable(props, ref);\n const contextValues = useAttachmentListContextValues_unstable(state);\n\n useAttachmentListStyles_unstable(state);\n\n return renderAttachmentList_unstable(state, contextValues);\n});\n\nAttachmentList.displayName = 'AttachmentList';\n"],"names":["AttachmentList","React","forwardRef","props","state","useAttachmentList_unstable","contextValues","useAttachmentListContextValues_unstable","useAttachmentListStyles_unstable","renderAttachmentList_unstable","displayName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAQaA~~;;;eAAAA;;;;~~iEARU~~;mCACoB;sCACG;+CACG;gDACO;~~AAIjD~~,MAAMA,iBAAAA,WAAAA,GAAAA,OAA2DC,UAAMC,CAAU,CAACC,OAACA;UACxFC,QAAMA,IAAAA,6CAAQC,EAAAA,OAA2BF;UACzCG,gBAAMA,IAAAA,uEAAgBC,EAAAA;uEAEtBC,EAAAA;~~WAEAC~~,IAAAA,mDAAOA,EAAAA,~~OAA8BL~~;AACvC;AAEAJ,~~eAAeU~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["AttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles.styles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nimport type { AttachmentListProps } from './AttachmentList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\nimport { useCustomStyleHook } from '@fluentui-copilot/react-provider';\n\nexport const AttachmentList: ForwardRefComponent<AttachmentListProps> = React.forwardRef((props, ref) => {\n const state = useAttachmentList_unstable(props, ref);\n const contextValues = useAttachmentListContextValues_unstable(state);\n\n useAttachmentListStyles_unstable(state);\n useCustomStyleHook('useAttachmentListStyles')(state);\n\n return renderAttachmentList_unstable(state, contextValues);\n});\n\nAttachmentList.displayName = 'AttachmentList';\n"],"names":["AttachmentList","React","forwardRef","props","state","useAttachmentList_unstable","contextValues","useAttachmentListContextValues_unstable","useAttachmentListStyles_unstable","useCustomStyleHook","renderAttachmentList_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;mCACoB;sCACG;+CACG;gDACO;+BAGrB;AAE5B,MAAMA,iBAAAA,WAAAA,GAAAA,OAA2DC,UAAMC,CAAU,CAACC,OAACA;UACxFC,QAAMA,IAAAA,6CAAQC,EAAAA,OAA2BF;UACzCG,gBAAMA,IAAAA,uEAAgBC,EAAAA;uEAEtBC,EAAAA;yCACAC,EAAAA,2BAAmBL;WAEnBM,IAAAA,mDAAOA,EAAAA,OAA8BN;AACvC;AAEAJ,eAAeW,WAAW,GAAG"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { ~~MenuList, MenuPopover,~~ Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport ~~{ AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport~~ type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/\n Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n state: AttachmentListState,\n contextValues: AttachmentListContextValues,\n) => {\n assertSlots<AttachmentListSlots>(state);\n const { ~~attachments,~~ overflowMenuProps, root, shouldUseOverflow } = state;\n\n return (\n <AttachmentListProvider value={contextValues.attachmentList}>\n {shouldUseOverflow && state.overflowMenuButton ? (\n <Overflow ref={root.ref}>\n <state.root>\n {root.children}\n <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n <state.overflowMenuButton />\n <~~MenuPopover~~>\n <~~MenuList>\n {attachments~~.~~map(attachment~~ ~~=> {\~~n ~~return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n })}\n </MenuList>\n~~ </~~MenuPopover~~>\n </AttachmentOverflowMenu>\n </state.root>\n </Overflow>\n ) : (\n <state.root />\n )}\n </AttachmentListProvider>\n );\n};\n"],"names":["assertSlots","state","~~attachments~~","contextValues","~~shouldUseOverflow","~~root","children","~~positioning~~","overflowMenuButton","~~_jsx~~","~~Overflow~~","~~attachment~~"~~,"MenuList"~~],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAgBEA~~;;;eAAAA;;;~~4BAfF;;iCAE6D~~;~~uCACtB~~;wCACA;~~4CACI;AAUzCA~~,MAAAA,gCAAiCC,CAAAA,OAAAA;oCACzBC,EAAAA;UAER,~~aACiCC~~,~~mBAC5BC~~;~~sBAGMC~~,~~GAAAA~~,IAAAA,~~eAAKC~~,~~EAAAA~~,~~6CAAQ~~,~~EAAA;2CACd;uCAAwBC~~,~~MAAaC~~,~~kBAAA~~,~~GAAA~~,~~WAAA~~,~~GAAAC,~~IAAAA,~~eAAA~~,~~EAAAC~~,~~yBAAA~~,~~EAAA;;;;;+BACnC~~,~~GAACT~~,IAAAA,gBAAAA,~~EAAMO~~,~~8CAAkB~~,EAAA~~;;;;uFAGJG~~,EAAAA,CAAAA;~~4BAAAA~~,~~WAAAA~~,~~GAAAA~~,IAAAA,~~eAAAA~~,~~EAAAA~~,~~4BAAAA~~,~~EAAAA;6EACfC~~,~~yBAAA,~~EAAA~~;;+FAAwDD,EAAAA,sDAAa,EAAA;;8DACvE~~;;;;;;;;;~~gDAOVV~~,~~MAACA,IAAAA,EAAMI,CAAAA;;AAIf~~"}
1	+ {"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/\n Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n state: AttachmentListState,\n contextValues: AttachmentListContextValues,\n) => {\n assertSlots<AttachmentListSlots>(state);\n const { overflowMenuProps, root, shouldUseOverflow } = state;\n\n return (\n <AttachmentListProvider value={contextValues.attachmentList}>\n {shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? (\n <Overflow ref={root.ref}>\n <state.root>\n {root.children}\n <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n <state.overflowMenuButton />\n <state.menuPopover>\n <state.menuList />\n </state.menuPopover>\n </AttachmentOverflowMenu>\n </state.root>\n </Overflow>\n ) : (\n <state.root />\n )}\n </AttachmentListProvider>\n );\n};\n"],"names":["assertSlots","state","overflowMenuProps","contextValues","root","children","AttachmentOverflowMenu","overflowMenuButton","menuList","_jsx","menuPopover"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeEA;;;eAAAA;;;4BAdF;iCAEsC;uCACC;wCACA;AAUrCA,MAAAA,gCAAiCC,CAAAA,OAAAA;oCACzBC,EAAAA;UAER,mBACiCC,yBAEZC;;6BAELC,cAAQ;uCACdJ,MAACK,kBAAAA,IAAAA,MAAAA,QAAAA,IAAAA,MAAAA,WAAAA,GAAAA,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,yBAAAA,EAAAA;;iCAAiDJ,GAAAA,IAAAA,gBAAAA,EAAAA,MAAAA,IAAiB,EAAA;;;;;;;qEAG/DK,kBAACN,EAAAA,CAAAA;4BAAMO,WAAQ,GAAAC,IAAAA,eAAA,EAAAR,MAAAS,WAAA,EAAA;;;;;;;;;GAU/B,gDAAE"}

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

@@ -17,13 +17,13 @@ const _reactutilities1 = require("@fluentui-copilot/react-utilities");
 const _Attachment = require("../Attachment");
 const _AttachmentOverflowMenuButton = require("../AttachmentOverflowMenuButton");
 const _useAttachmentOverflowMenuButtonStylesstyles = require("../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles");
+const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
 const useAttachmentList_unstable = (props, ref)=>{
     const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;
     const innerRef = _react.useRef(null);
     const [setTimeout] = (0, _reactutilities.useTimeout)();
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const { findNextFocusable, findPrevFocusable, findLastFocusable } = (0, _reactcomponents.useFocusFinders)();
-    const [attachments, setAttachments] = _react.useState([]);
     const handleAttachmentDismiss = (0, _reactcomponents.useEventCallback)((e, data)=>{
         var _innerRef_current;
         if (!onAttachmentDismiss) {
@@ -68,10 +68,16 @@ const useAttachmentList_unstable = (props, ref)=>{
         maxVisibleItems: maxVisibleAttachments,
         overflowClassName: styles.overflow
     });
-    _react.useEffect(()=>{
+    const attachmentOverflowMenuItems = _react.useMemo(()=>{
         if (resolvedChildren && Array.isArray(resolvedChildren)) {
-            setAttachments(resolvedChildren.filter((child)=>/*#__PURE__*/ _react.isValidElement(child)).map((child)=>child.props));
+            return resolvedChildren.filter((child)=>/*#__PURE__*/ _react.isValidElement(child)).map((child)=>child.props).map((attachment)=>{
+                return /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, {
+                    ...attachment,
+                    key: attachment.id
+                });
+            });
         }
+        return [];
     }, [
         resolvedChildren
     ]);
@@ -82,12 +88,13 @@ const useAttachmentList_unstable = (props, ref)=>{
     });
     const shouldUseOverflow = maxVisibleAttachments !== undefined;
     return {
-        attachments,
         onAttachmentDismiss: handleAttachmentDismiss,
         shouldUseOverflow,
         overflowMenuProps,
         components: {
             root: 'div',
+            menuList: _reactcomponents.MenuList,
+            menuPopover: _reactcomponents.MenuPopover,
             overflowMenuButton: 'span'
         },
         root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
@@ -100,6 +107,17 @@ const useAttachmentList_unstable = (props, ref)=>{
         }), {
             elementType: 'div'
         }),
+        menuList: _reactcomponents.slot.optional(props.menuList, {
+            defaultProps: {
+                children: attachmentOverflowMenuItems
+            },
+            elementType: _reactcomponents.MenuList,
+            renderByDefault: true
+        }),
+        menuPopover: _reactcomponents.slot.optional(props.menuPopover, {
+            elementType: _reactcomponents.MenuPopover,
+            renderByDefault: true
+        }),
         overflowMenuButton: _reactcomponents.slot.optional(props.overflowMenuButton, {
             defaultProps: {
                 children: /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuButton.AttachmentOverflowMenuButton, null)

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles, ~~type AttachmentProps~~ } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/*\n Create the state required to render AttachmentList.\n \n The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n \n @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const ~~[attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\n const~~ handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n React.~~useEffect~~(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n ~~setAttachments(~~\n ~~resolvedChildren~~.filter(child => React.isValidElement(child)).map(child => (child as React.ReactElement).props),\n );\n }\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n ~~attachments,\n~~ onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","findNextFocusable","overflowMenuProps","~~attachments~~","innerRef","~~activeElement~~","next","container","~~current","useState","~~useEventCallback","e","data","findLastFocusable","_innerRef_current","contains","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","React","~~useEffect~~","~~resolvedChildren~~","~~filter~~","~~child~~","arrowNavigationProps","useArrowNavigationGroup","~~memorizeCurrent~~","~~overflow~~","~~shouldUseOverflow~~","~~Array~~","~~isArray~~","~~components~~","~~overflowMenuButton~~","~~getIntrinsicElementProps~~","undefined","~~handleAttachmentDismiss~~","defaultProps","renderByDefault","elementType"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BA8BUA~~;;;eAAAA;;;;~~iEA9Ba~~;~~iCAQhB~~;qCACyC;gCACrB;iCACgB;~~4BACa~~;~~8CACX~~;6DACU;~~AAgBrD~~,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EACRF,mBAAQG,EACRC,~~iBAAOC,KACPN~~;~~qBASMO~~,OAAAA,MAAAA,CAAAA;~~UARJ~~,~~CAAAL~~,~~WAAKD,GAAAA,~~IAAAA,~~0BAAAA~~;~~0BAEL~~,~~gDAEAA~~;~~UAEA~~,~~mBACMO~~,~~mBACFD,~~mBACF,~~yCACME;wBAAyDC~~,~~eAAoBC,GAAAA,OAAOC,QAAA,CAAA,EAAA~~;~~oCAACC~~,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;~~4BAGEb~~,GAAAA;~~6CACEc~~;8BAAAA,mBAAAA,QAAAA,~~mBAAkBT~~,~~KAASI~~,IAAO,KAAA,~~IAAAR~~,~~eAAlCa~~,aAAAA;~~iCACCT~~,~~SAAAI~~,OAAA,MAAA,~~QAAAM~~,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,~~CAAAV~~,gBAAA;wGACE;2CACKA,eAAA;~~2BACZD~~,~~SAAAI~~,OAAA;;sBAEA;qGAAyG;0HAAC;~~yBAC1GQ~~,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,~~qBAAAL~~,~~kBAAAT~~,~~SAAAI~~,OAAA,CAAA,MAAA,~~QAAAU~~,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;~~8BACEc~~;;mBAEJ;gBACF,~~MAAAG~~,OAAAI,~~kBAAAf~~,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,~~cAAAgB~~,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;~~YAEAC~~,~~WAAMC~~;gBACJ,IAAIC;~~sCAEAA~~,~~kBAAiBC~~,~~SAAOC~~,OAAAA,CAAAA,~~MAAAA~~,~~QAASJ~~,~~uBAAqBI~~,~~KAAYA~~,~~IAAAA~~,~~KAAS~~,~~IAACA~~,~~mBAAkCV~~,~~KAAA;eAElH;QACF;;UAAqBG~~,~~SAAAC,~~IAAAA,~~6BAAA;UAErBI~~,~~mBAAMG,IAAAA,2CAAuBC,EAAAA~~;;~~yBAErBnC~~;~~2BACNoC~~,~~OAAiBC~~,QAAA;;~~WAGnBP~~,~~SAAMQ~~,~~CAAAA~~;~~QAEN~~,IAAAP,~~oBAAOQ~~,~~MAAAC~~,~~OAAA~~,~~CAAAT~~,~~mBAAA~~;~~2BACLxB~~,~~iBAAAA~~,~~MAAAA~~,CAAAA,CAAAA,QAAAA,~~WAAAA~~,~~GAAAA~~,~~OAAAA~~,~~cAAAA~~,CAAAA,~~QAAAA~~,GAAAA,~~CAAAA~~,~~CAAAA~~,~~QAAAA~~,~~MAAAA~~,~~KAAAA;;;;KAEA+B~~;~~UACAhC~~,~~uBAAAA~~,IAAAA,~~wCAAAA~~,~~EAAAA~~;~~kBACAmC~~;;~~yBAEEC~~;;~~UAEFrB~~,~~oBACEsB~~,~~0BAAyBC~~;;;~~6BAGjBC;;;oBAGN9C~~;~~kBAEF~~;gCAAe;;~~cAEjB2C~~,qBAAAA,CAAAA,~~MAAAA~~,CAAAA,IAAAA,~~yCAAkCzC~~,~~EAAAA~~,~~OAAMyC~~;~~0BACtCI~~;~~mDAAgB/C~~,EAAAA,~~KAAAA~~;~~kBAA2C~~;~~mCAC9C~~;~~oBACbgD~~;~~sBACFhB~~;~~QACF~~,~~IAAA~~;~~YACAiB~~,~~aAAA~~"}
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 type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/*\n Create the state required to render AttachmentList.\n \n The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n \n @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const 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 => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\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 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","findNextFocusable","overflowMenuProps","handleAttachmentDismiss","innerRef","useTimeout","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","useOverflowMaxVisibleItems","overflow","useMemo","arrowNavigationProps","useArrowNavigationGroup","circular","filter","map","axis","createElement","AttachmentOverflowMenuItem","memorizeCurrent","key","id","shouldUseOverflow","components","menuPopover","undefined","MenuPopover","menuList","slot","defaultProps","MenuList","renderByDefault","elementType","optional","overflowMenuButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiCUA;;;eAAAA;;;;iEAjCa;iCAUhB;qCACyC;gCACrB;iCACgB;4BACT;8CACW;6DACU;4CACZ;AAgBzC,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EACRF,mBAAQG,EACRC,iBAAMC;UACJC,WAAKN,OAAAA,MAAAA,CAAAA;sBACH,GAAAO,IAAAA,0BAAA;UACF,gBAEAP,gDAEA;UACA,mBACIM,mBACF,mBACME,yCAAyDC;oCAA4BC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEX,GAAAA;6CACEY;8BAAAA,mBAAAA,QAAAA,mBAAkBP,KAASQ,IAAO,KAAA,IAAAZ,eAAlCW,aAAAA;iCACCP,SAAAQ,OAAA,MAAA,QAAAC,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAC,gBAAA;wGACE;2CACKA,eAAA;2BACZX,SAAAQ,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GI,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAP,kBAAAP,SAAAQ,OAAA,CAAA,MAAA,QAAAM,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEY;;mBAEJ;gBACF,MAAAK,OAAAI,kBAAAL,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAM,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAzB,WAAM0B;gBACJ,IAAIC;sCACKA,kBACGC,SAAAA,OAAAA,CAAAA,MAASC,QAAMC,uBAClBF,KAAAA,IAAUA,KAA6B9B,IAAKqB,mBAC5CY,KAAAA;;;;;6BAELC,IAAAA,2CAAA,EAAA;;yBAEKnC;QACX4B,mBAAGF,OAAAU,QAAA;;UAAkBP,8BAAAG,OAAAK,OAAA,CAAA;QAErB,IAAAP,oBAAMQ,MAAuBC,OAAAA,CAAAA,mBAAwB;mBACnDC,iBAAUC,MAAA,CAAAV,CAAAA,QAAA,WAAA,GAAAC,OAAAC,cAAA,CAAAF,QAAAW,GAAA,CAAAX,CAAAA,QAAAA,MAAA9B,KAAA,EAAAyC,GAAA,CAAAR,CAAAA;gBACVS,OAAM,WAAA,GAAAX,OAAAY,aAAA,CAAAC,sDAAA,EAAA;oBACNC,GAAAA,UAAAA;oBACFC,KAAAb,WAAAc,EAAA;gBAEA;YAEA;;eAEEC,EAAAA;;;KACA3C;UACA4C,uBAAYX,IAAAA,wCAAA,EAAA;kBACVlB;;yBAEA8B;;UAEFF,oBAAAjD,0BAAAoD;WACA/B;6BAEId;;;oBAGG+B;kBACH;sBACAvC,yBAAU+B;yBAEZuB,4BAAA;gCAAe;;cAEjBC,qBAAAA,CAAAA,MAAUC,CAAAA,IAAAA,yCAA4B,EAAA,OAAE;0BACtCC;mDAAgBzD,EAAAA,KAAU8B;kBAA4B;mCACzC4B;oBACbC;sBACF5B;YACAqB;yBAAgDQ;;kBAAgDJ,qBAAA,CAAAK,QAAA,CAAA3D,MAAAqD,QAAA,EAAA;0BAChGO;0BACEL;;yBAA2DC,yBAAA;6BAC3DE;;qBAEFJ,qBAAA,CAAAK,QAAA,CAAA3D,MAAAkD,WAAA,EAAA;YACFQ,aAAAN,4BAAA;YACAK,iBAAA"}

package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js CHANGED Viewed

@@ -19,6 +19,8 @@ _export(exports, {
 const _reactcomponents = require("@fluentui/react-components");
 const attachmentListClassNames = {
     root: 'fai-AttachmentList',
+    menuList: 'fai-AttachmentList__menuList',
+    menuPopover: 'fai-AttachmentList__menuPopover',
     overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
 };
 const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", null, [
@@ -32,6 +34,12 @@ const useAttachmentListStyles_unstable = (state)=>{
     const rootBaseClassName = useRootBaseClassName();
     const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
     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, state.menuPopover.className);
+    }
     if (state.overflowMenuButton) {
         state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
     }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, ~~tokens~~ } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\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\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\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["attachmentListClassNames","flexWrap","root","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;;;;;;;;~~IAIaA~~,wBAAAA;eAAAA;;~~IAUXC~~,gCAAU;eAAVA;;;~~iCAd4C~~;~~AAIvC~~,MAAMD,2BAAgE;UAC3EE;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;~~AAIzCN~~,MAAAA,~~mCAAUO~~,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,~~MAAAN~~,IAAA,~~CAAAS~~,SAAA,GAAAC,IAAAA,6BAAA,~~EAAAZ~~,yBAAAE,IAAA,~~EAAAW~~,mBAAAL,~~MAAAN~~,IAAA,~~CAAAS~~,SAAA;IAEA,IAAAH,~~MAAAL~~,~~kBAAA~~,EAAA;;IAEC;~~WAECK~~;~~6DAGoCC~~"}
1	+ {"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, 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\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\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(attachmentListClassNames.menuPopover, state.menuPopover.className);\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","flexWrap","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName","overflowMenuButtonClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAYXC,gCAAU;eAAVA;;;iCAjBoC;AAK/B,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;AAIzCR,MAAAA,mCAAUS,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,MAAAR,IAAA,CAAAW,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAE,IAAA,EAAAa,mBAAAL,MAAAR,IAAA,CAAAW,SAAA;IAEA,IAAAH,MAAAP,QAAA,EAAA;;IAEC;QAECO,MAAAN,WAAA,EAAA;QAEAM,MAAMK,WAAAA,CAAAA,SAAoBT,GAAAA,IAAAA,6BAAAA,EAAAA,yBAAAA,WAAAA,EAAAA,MAAAA,WAAAA,CAAAA,SAAAA;;QAG1BI,MAAMR,kBAAiBY,EAAAA;QAEvBJ,MAAIA,kBAAgB,CAAAG,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAK,kBAAA,EAAAW,6BAAAN,MAAAL,kBAAA,CAAAQ,SAAA;;WAEpBH;6DAE6CV"}

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

@@ -13,9 +13,11 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _useAttachmentOverflowMenuButton = require("./useAttachmentOverflowMenuButton");
 const _renderAttachmentOverflowMenuButton = require("./renderAttachmentOverflowMenuButton");
 const _useAttachmentOverflowMenuButtonStylesstyles = require("./useAttachmentOverflowMenuButtonStyles.styles");
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const AttachmentOverflowMenuButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useAttachmentOverflowMenuButton.useAttachmentOverflowMenuButton_unstable)(props, ref);
     (0, _useAttachmentOverflowMenuButtonStylesstyles.useAttachmentOverflowMenuButtonStyles_unstable)(state);
+    (0, _reactprovider.useCustomStyleHook)('useAttachmentOverflowMenuButtonStyles')(state);
     return (0, _renderAttachmentOverflowMenuButton.renderAttachmentOverflowMenuButton_unstable)(state);
 });
 AttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton'; //# sourceMappingURL=AttachmentOverflowMenuButton.js.map

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

	@@ -1 +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';\n\nexport const AttachmentOverflowMenuButton: ForwardRefComponent<AttachmentOverflowMenuButtonProps> = React.forwardRef(\n (props, ref) => {\n const state = useAttachmentOverflowMenuButton_unstable(props, ref);\n\n useAttachmentOverflowMenuButtonStyles_unstable(state);\n return renderAttachmentOverflowMenuButton_unstable(state);\n },\n);\n\nAttachmentOverflowMenuButton.displayName = 'AttachmentOverflowMenuButton';\n"],"names":["AttachmentOverflowMenuButton","React","forwardRef","props","state","useAttachmentOverflowMenuButton_unstable","useAttachmentOverflowMenuButtonStyles_unstable","renderAttachmentOverflowMenuButton_unstable","displayName"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAOaA~~;;;eAAAA;;;;~~iEAPU~~;iDACkC;oDACG;6DACG;~~AAIxD~~,MAAMA,+BAAAA,WAAAA,GAAAA,OAAuFC,UAAMC,CAAU,CAClHC,OAACA;UACCC,QAAMA,IAAAA,yEAAQC,EAAAA,OAAyCF;mGAEvDG,EAAAA;~~WACAC~~,IAAAA,+EAAOA,EAAAA;AACT;~~AAGFP~~,~~6BAA6BQ~~,WAAW,GAAG"}
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"}

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

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

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

@@ -8,12 +8,15 @@ Object.defineProperty(exports, "useAttachmentOverflowMenuButton_unstable", {
         return useAttachmentOverflowMenuButton_unstable;
     }
 });
+const _reactprovider = require("@fluentui-copilot/react-provider");
 const _reactcomponents = require("@fluentui/react-components");
 const _attachmentOverflowMenuContext = require("../../contexts/attachmentOverflowMenuContext");
 const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
     const { children, text } = props;
     const { isOverflowing, overflowCount, overflowButtonRef } = (0, _attachmentOverflowMenuContext.useAttachmentOverflowMenuContext_unstable)((context)=>context);
     const isLoading = !!props.isLoading;
+    const 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;
     return {
         components: {
@@ -40,6 +43,8 @@ const useAttachmentOverflowMenuButton_unstable = (props, ref)=>{
         }),
         isOverflowing,
         overflowCount,
-        isLoading
+        isLoading,
+        designVersion,
+        mode
     };
 }; //# sourceMappingURL=useAttachmentOverflowMenuButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useAttachmentOverflowMenuButton.ts"],"sourcesContent":["import { ProgressBar, getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-components';\nimport { useAttachmentOverflowMenuContext_unstable } from '../../contexts/attachmentOverflowMenuContext';\nimport type {\n AttachmentOverflowMenuButtonProps,\n AttachmentOverflowMenuButtonState,\n} from './AttachmentOverflowMenuButton.types';\n\n/*\n Create the state required to render AttachmentOverflowMenuButton.\n \n The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuButton_unstable.\n \n @param props - props from this instance of AttachmentOverflowMenuButton\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton\n */\nexport const useAttachmentOverflowMenuButton_unstable = (\n props: AttachmentOverflowMenuButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): AttachmentOverflowMenuButtonState => {\n const { children, text } = props;\n const { isOverflowing, overflowCount, overflowButtonRef } = useAttachmentOverflowMenuContext_unstable(\n context => context,\n );\n const isLoading = !!props.isLoading;\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n return {\n components: {\n root: 'button',\n progress: ProgressBar,\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(ref, overflowButtonRef),\n ...props,\n }),\n { defaultProps: { children: processedText ?? `+${overflowCount}` }, elementType: 'button' },\n ),\n progress: slot.always(props.progress, {\n defaultProps: { value: undefined, shape: 'square', thickness: 'large', 'aria-label': 'Loading' },\n elementType: ProgressBar,\n }),\n isOverflowing,\n overflowCount,\n isLoading,\n };\n};\n"],"names":["children","props","isLoading","text","components","root","~~progress~~","getIntrinsicElementProps","~~context~~","useMergedRefs","overflowButtonRef","overflowCount","defaultProps","~~ProgressBar","~~slot","~~always~~","shape","thickness","processedText","~~isOverflowing~~"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+~~BAoBUA~~;;;eAAAA~~;;;iCApBiE~~;+CACjB;AAmBxD,MAAQA,2CAAmBC,CAAAA,OAAAA;UAC3B,EAGAD,QAAME,EAENC,IAAA,KACAF;~~UACEG~~,~~eACEC~~,~~eACAC~~,~~mBACF~~,~~iFAEEC~~,EAAAA,CAAAA,~~UAAyBC~~;~~sBAClBC~~,~~CAAAA~~,~~CAAAA~~,MAAAA,~~SAAmBC~~;~~0BAChBV~~,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAG,SAAA,aAAAA,~~KAAAQ~~,~~iBAAAR~~;WACV;~~oBACES~~;;sBAA+DC,4BAAA;;~~cAAyBC~~,qBAAA,~~CAAAC~~,MAAA,~~CAAAR~~,IAAAA,yCAAA,EAAA,UAAA;~~iBAE5FD~~,IAAAA,~~8BAAeS~~,EAAAA,~~KAAOd~~;~~oBACpBW~~;;~~0BAAkCI~~;0BAAiBC,kBAAW,QAAAC,kBAAA,KAAA,IAAAA,gBAAA,CAAA,CAAA,~~EAAAP~~,cAAA,CAAA;;yBAAiC;;~~kBAEjGG~~,qBAAA,~~CAAAC~~,MAAA,~~CAAAd~~,~~MAAAK~~,QAAA,EAAA;~~0BACAa~~;~~gBACAR~~,OAAAA;~~gBACAT~~,OAAAA;~~gBACFe~~,~~WAAA~~;~~gBACA~~,~~cAAA~~"}
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"}