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

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

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

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    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: `${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      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    ':focus': {\n      [`& .${attachmentClassNames.dismissIcon}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    borderLeftColor: tokens.colorNeutralStroke1,\n    borderLeftWidth: tokens.strokeWidthThin,\n    borderLeftStyle: 'solid',\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  },\n});\n\nconst usePrimaryDismissNextStyles = makeStyles({\n  sharedStyles: {\n    border: 'none',\n    backgroundColor: tokens.colorNeutralBackground3,\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n    },\n    ':focus-visible': {\n      borderRadius: tokens.borderRadiusLarge,\n    },\n  },\n});\n\nconst useRootNextStyles = makeStyles({\n  root: {\n    outline: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\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 primaryDismissNextStyles = usePrimaryDismissNextStyles();\n  const rootNextStyles = useRootNextStyles();\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' && 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' && primaryDismissNextStyles.sharedStyles,\n    designVersion === 'next' && dismissButtonNextStyles.root,\n    designVersion === 'next' && dismissButtonNextStyles[mode],\n    designVersion === 'next' && dismissOnly && dismissButtonNextStyles.dismissOnly,\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":["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","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","maxWidth","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useImageOnlyStyles","useOverflowStyles","overflow","useSmallStyles","caption1","usePrimaryActionNextStyles","borderRadiusXLarge","canvas","spacingVerticalNone","minHeight","sidecar","useDismissButtonNextStyles","colorNeutralForeground2","borderLeftWidth","borderLeftStyle","spacingHorizontalMNudge","dismissOnly","usePrimaryDismissNextStyles","sharedStyles","colorNeutralBackground3","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","borderRadiusLarge","useRootNextStyles","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","primaryActionNextStyles","dismissButtonNextStyles","primaryDismissNextStyles","rootNextStyles","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