@fluentui-copilot/react-attachments 0.10.2 → 0.10.3

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 (14) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +11 -2
  3. package/dist/index.d.ts +7 -1
  4. package/lib/components/Attachment/Attachment.types.js.map +1 -1
  5. package/lib/components/Attachment/useAttachment.js +5 -3
  6. package/lib/components/Attachment/useAttachment.js.map +1 -1
  7. package/lib/components/Attachment/useAttachmentStyles.styles.js +52 -6
  8. package/lib/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
  9. package/lib-commonjs/components/Attachment/Attachment.types.js.map +1 -1
  10. package/lib-commonjs/components/Attachment/useAttachment.js +3 -2
  11. package/lib-commonjs/components/Attachment/useAttachment.js.map +1 -1
  12. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js +74 -6
  13. package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map +1 -1
  14. package/package.json +2 -2
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui-copilot/react-attachments",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 31 Oct 2024 17:39:46 GMT",
5
+ "date": "Tue, 10 Dec 2024 20:20:52 GMT",
6
+ "tag": "@fluentui-copilot/react-attachments_v0.10.3",
7
+ "version": "0.10.3",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "jiangemma@microsoft.com",
12
+ "package": "@fluentui-copilot/react-attachments",
13
+ "commit": "1510db365b4c9fca25b3222343f7835dd94cd439",
14
+ "comment": "feat: Add small variant"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 31 Oct 2024 17:41:08 GMT",
6
21
  "tag": "@fluentui-copilot/react-attachments_v0.10.2",
7
22
  "version": "0.10.2",
8
23
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui-copilot/react-attachments
2
2
 
3
- This log was last generated on Thu, 31 Oct 2024 17:39:46 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 10 Dec 2024 20:20:52 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.10.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.3)
8
+
9
+ Tue, 10 Dec 2024 20:20:52 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.2..@fluentui-copilot/react-attachments_v0.10.3)
11
+
12
+ ### Patches
13
+
14
+ - feat: Add small variant ([PR #2447](https://github.com/microsoft/fluentai/pull/2447) by jiangemma@microsoft.com)
15
+
7
16
  ## [0.10.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.2)
8
17
 
9
- Thu, 31 Oct 2024 17:39:46 GMT
18
+ Thu, 31 Oct 2024 17:41:08 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.0..@fluentui-copilot/react-attachments_v0.10.2)
11
20
 
12
21
  ### Patches
package/dist/index.d.ts CHANGED
@@ -157,6 +157,12 @@ export declare type AttachmentOverflowMenuState = MenuState & {
157
157
  */
158
158
  export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
159
159
  imageOnly?: boolean;
160
+ /**
161
+ * An attachment supports different sizes.
162
+ *
163
+ * @default 'medium'
164
+ */
165
+ size?: 'small' | 'medium';
160
166
  };
161
167
 
162
168
  export declare type AttachmentSlots = {
@@ -172,7 +178,7 @@ export declare type AttachmentSlots = {
172
178
  /**
173
179
  * State used in rendering Attachment
174
180
  */
175
- export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id'>> & Pick<AttachmentProps, 'imageOnly'> & {
181
+ export declare type AttachmentState = ComponentState<AttachmentSlots> & Required<Pick<AttachmentProps, 'id' | 'size'>> & Pick<AttachmentProps, 'imageOnly'> & {
176
182
  isLoading: boolean;
177
183
  shouldUseOverflow: boolean;
178
184
  };
package/lib/components/Attachment/Attachment.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button', 'span'>>;\n dismissButton: NonNullable<Slot<'button'>>;\n media?: Slot<'span'>;\n content: NonNullable<Slot<'span'>>;\n dismissIcon: NonNullable<Slot<'span'>>;\n progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n Required<Pick<AttachmentProps, 'id'>> &\n Pick<AttachmentProps, 'imageOnly'> & {\n isLoading: boolean;\n shouldUseOverflow: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC,GACD,WAKI"}
1
+ {"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button', 'span'>>;\n dismissButton: NonNullable<Slot<'button'>>;\n media?: Slot<'span'>;\n content: NonNullable<Slot<'span'>>;\n dismissIcon: NonNullable<Slot<'span'>>;\n progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n imageOnly?: boolean;\n\n /**\n * An attachment supports different sizes.\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n Required<Pick<AttachmentProps, 'id' | 'size'>> &\n Pick<AttachmentProps, 'imageOnly'> & {\n isLoading: boolean;\n shouldUseOverflow: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA0BA;;CAEC,GACD,WAKI"}
package/lib/components/Attachment/useAttachment.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';
3
- import { Dismiss20Regular } from '@fluentui/react-icons';
3
+ import { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';
4
4
  import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
5
5
  /**
6
6
  * Create the state required to render Attachment.
@@ -14,7 +14,8 @@ import { useAttachmentListContext_unstable } from '../../contexts/attachmentList
14
14
  export const useAttachment_unstable = (props, ref) => {
15
15
  const {
16
16
  children,
17
- imageOnly
17
+ imageOnly,
18
+ size = 'medium'
18
19
  } = props;
19
20
  const {
20
21
  onAttachmentDismiss,
@@ -56,7 +57,7 @@ export const useAttachment_unstable = (props, ref) => {
56
57
  });
57
58
  const dismissIcon = slot.always(props.dismissIcon, {
58
59
  defaultProps: {
59
- children: /*#__PURE__*/React.createElement(Dismiss20Regular, null)
60
+ children: size === 'small' ? /*#__PURE__*/React.createElement(Dismiss12Regular, null) : /*#__PURE__*/React.createElement(Dismiss20Regular, null)
60
61
  },
61
62
  elementType: 'span'
62
63
  });
@@ -70,6 +71,7 @@ export const useAttachment_unstable = (props, ref) => {
70
71
  });
71
72
  const state = {
72
73
  id: attachmentId,
74
+ size,
73
75
  components: {
74
76
  root: 'div',
75
77
  primaryAction: 'button',
package/lib/components/Attachment/useAttachment.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n const { children, imageOnly } = props;\n const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n const attachmentId = useId('attachment-', props.id);\n const isLoading = !!props.progress;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n id: attachmentId,\n }),\n { elementType: 'div' },\n );\n\n const primaryAction = slot.always(props.primaryAction, {\n elementType: 'button',\n });\n\n const dismissButton = slot.always(props.dismissButton, {\n defaultProps: { 'aria-label': 'Dismiss' },\n elementType: 'button',\n });\n\n dismissButton.onClick = mergeCallbacks(\n dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n },\n );\n\n const media = slot.optional(props.media, { elementType: 'span' });\n\n const content = slot.always(props.content, {\n defaultProps: {\n children: props.children,\n },\n elementType: 'span',\n });\n\n const dismissIcon = slot.always(props.dismissIcon, {\n defaultProps: {\n children: <Dismiss20Regular />,\n },\n elementType: 'span',\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n const state: AttachmentState = {\n id: attachmentId,\n components: {\n root: 'div',\n primaryAction: 'button',\n dismissButton: 'button',\n media: 'span',\n content: 'span',\n dismissIcon: 'span',\n progress: ProgressBar,\n },\n\n root,\n primaryAction,\n dismissButton,\n media,\n content,\n dismissIcon,\n progress,\n imageOnly,\n isLoading,\n shouldUseOverflow,\n };\n\n if (state.primaryAction.as === 'span') {\n state.components.primaryAction = 'span';\n }\n\n return state;\n};\n"],"names":["React","ProgressBar","getIntrinsicElementProps","mergeCallbacks","slot","useId","Dismiss20Regular","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","children","imageOnly","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAChH,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAChC,MAAM,EAAEI,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGP,kCAAkCQ,CAAAA,UAAWA;IAChG,MAAMC,eAAeX,MAAM,eAAeI,MAAMQ,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACT,MAAMU,QAAQ;IAElC,MAAMC,OAAOhB,KAAKiB,MAAM,CACtBnB,yBAAyB,OAAO;QAC9BQ;QACA,GAAGD,KAAK;QACRQ,IAAID;IACN,IACA;QAAEM,aAAa;IAAM;IAGvB,MAAMC,gBAAgBnB,KAAKiB,MAAM,CAACZ,MAAMc,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBpB,KAAKiB,MAAM,CAACZ,MAAMe,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGvB,eACtBqB,cAAcE,OAAO,EACrB,CAACC;QACCd,gCAAAA,0CAAAA,oBAAsBc,IAAI;YAAEC,SAASjB;YAAUkB;YAAOZ,IAAID;QAAa;IACzE;IAGF,MAAMa,QAAQzB,KAAK0B,QAAQ,CAACrB,MAAMoB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAUxB,KAAKiB,MAAM,CAACZ,MAAMmB,OAAO,EAAE;QACzCH,cAAc;YACZd,UAAUF,MAAME,QAAQ;QAC1B;QACAW,aAAa;IACf;IAEA,MAAMS,cAAc3B,KAAKiB,MAAM,CAACZ,MAAMsB,WAAW,EAAE;QACjDN,cAAc;YACZd,wBAAU,oBAACL;QACb;QACAgB,aAAa;IACf;IAEA,MAAMH,WAAWf,KAAK0B,QAAQ,CAACrB,MAAMU,QAAQ,EAAE;QAC7CM,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmBxB,MAAMQ,EAAE;QAC7B;QACAK,aAAarB;IACf;IAEA,MAAMiC,QAAyB;QAC7BjB,IAAID;QACJmB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbZ,UAAUlB;QACZ;QAEAmB;QACAG;QACAC;QACAK;QACAD;QACAG;QACAZ;QACAP;QACAM;QACAJ;IACF;IAEA,IAAIoB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}
1
+ {"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n const { children, imageOnly, size = 'medium' } = props;\n const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n const attachmentId = useId('attachment-', props.id);\n const isLoading = !!props.progress;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n id: attachmentId,\n }),\n { elementType: 'div' },\n );\n\n const primaryAction = slot.always(props.primaryAction, {\n elementType: 'button',\n });\n\n const dismissButton = slot.always(props.dismissButton, {\n defaultProps: { 'aria-label': 'Dismiss' },\n elementType: 'button',\n });\n\n dismissButton.onClick = mergeCallbacks(\n dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n },\n );\n\n const media = slot.optional(props.media, { elementType: 'span' });\n\n const content = slot.always(props.content, {\n defaultProps: {\n children: props.children,\n },\n elementType: 'span',\n });\n\n const dismissIcon = slot.always(props.dismissIcon, {\n defaultProps: {\n children: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\n },\n elementType: 'span',\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n const state: AttachmentState = {\n id: attachmentId,\n size,\n components: {\n root: 'div',\n primaryAction: 'button',\n dismissButton: 'button',\n media: 'span',\n content: 'span',\n dismissIcon: 'span',\n progress: ProgressBar,\n },\n\n root,\n primaryAction,\n dismissButton,\n media,\n content,\n dismissIcon,\n progress,\n imageOnly,\n isLoading,\n shouldUseOverflow,\n };\n\n if (state.primaryAction.as === 'span') {\n state.components.primaryAction = 'span';\n }\n\n return state;\n};\n"],"names":["React","ProgressBar","getIntrinsicElementProps","mergeCallbacks","slot","useId","Dismiss12Regular","Dismiss20Regular","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","children","imageOnly","size","onAttachmentDismiss","shouldUseOverflow","context","attachmentId","id","isLoading","progress","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","media","optional","dismissIcon","shape","thickness","state","components","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,KAAK,QAAQ,6BAA6B;AAChH,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,wBAAwB;AAC3E,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGJ;IACjD,MAAM,EAAEK,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGR,kCAAkCS,CAAAA,UAAWA;IAChG,MAAMC,eAAeb,MAAM,eAAeK,MAAMS,EAAE;IAClD,MAAMC,YAAY,CAAC,CAACV,MAAMW,QAAQ;IAElC,MAAMC,OAAOlB,KAAKmB,MAAM,CACtBrB,yBAAyB,OAAO;QAC9BS;QACA,GAAGD,KAAK;QACRS,IAAID;IACN,IACA;QAAEM,aAAa;IAAM;IAGvB,MAAMC,gBAAgBrB,KAAKmB,MAAM,CAACb,MAAMe,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBtB,KAAKmB,MAAM,CAACb,MAAMgB,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGzB,eACtBuB,cAAcE,OAAO,EACrB,CAACC;QACCd,gCAAAA,0CAAAA,oBAAsBc,IAAI;YAAEC,SAASlB;YAAUmB;YAAOZ,IAAID;QAAa;IACzE;IAGF,MAAMa,QAAQ3B,KAAK4B,QAAQ,CAACtB,MAAMqB,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMM,UAAU1B,KAAKmB,MAAM,CAACb,MAAMoB,OAAO,EAAE;QACzCH,cAAc;YACZf,UAAUF,MAAME,QAAQ;QAC1B;QACAY,aAAa;IACf;IAEA,MAAMS,cAAc7B,KAAKmB,MAAM,CAACb,MAAMuB,WAAW,EAAE;QACjDN,cAAc;YACZf,UAAUE,SAAS,wBAAU,oBAACR,wCAAsB,oBAACC;QACvD;QACAiB,aAAa;IACf;IAEA,MAAMH,WAAWjB,KAAK4B,QAAQ,CAACtB,MAAMW,QAAQ,EAAE;QAC7CM,cAAc;YACZO,OAAO;YACPC,WAAW;YACX,mBAAmBzB,MAAMS,EAAE;QAC7B;QACAK,aAAavB;IACf;IAEA,MAAMmC,QAAyB;QAC7BjB,IAAID;QACJJ;QACAuB,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPD,SAAS;YACTG,aAAa;YACbZ,UAAUpB;QACZ;QAEAqB;QACAG;QACAC;QACAK;QACAD;QACAG;QACAZ;QACAR;QACAO;QACAJ;IACF;IAEA,IAAIoB,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}
package/lib/components/Attachment/useAttachmentStyles.styles.js CHANGED
@@ -10,6 +10,7 @@ export const attachmentClassNames = {
10
10
  progress: 'fai-Attachment__progress'
11
11
  };
12
12
  const ATTACHMENT_MAXWIDTH = '180px';
13
+ const SMALL_ATTACHMENT_SIZE = '16px';
13
14
  const ATTACHMENT_SIZE = '20px';
14
15
  const useRootBaseClassName = __resetStyles("r16wonf3", null, [".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"]);
15
16
  const buttonBaseStyles = {
@@ -81,6 +82,49 @@ export const useOverflowStyles = __styles({
81
82
  }, {
82
83
  d: [".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}"]
83
84
  });
85
+ const useSmallStyles = __styles({
86
+ primaryAction: {
87
+ B2u0y6b: "fyv37rf",
88
+ Byoj8tv: 0,
89
+ uwmqm3: 0,
90
+ z189sj: 0,
91
+ z8tnut: 0,
92
+ B0ocmuz: "f1o3rc9c"
93
+ },
94
+ media: {
95
+ Be2twd7: "f4ybsrx",
96
+ Bqenvij: "fd461yt",
97
+ Bg96gwp: "f104wqfl",
98
+ a9b677: "fjw5fx7"
99
+ },
100
+ content: {
101
+ Bahqtrf: "fk6fouc",
102
+ Be2twd7: "fy9rknc",
103
+ Bhrd7zp: "figsok6",
104
+ Bg96gwp: "fwrc4pm"
105
+ },
106
+ dismissButton: {
107
+ Byoj8tv: 0,
108
+ uwmqm3: 0,
109
+ z189sj: 0,
110
+ z8tnut: 0,
111
+ B0ocmuz: "fnsh2i4",
112
+ B2u0y6b: "fatynhj",
113
+ Bf4jedk: "fydhda"
114
+ },
115
+ dismissIcon: {
116
+ Be2twd7: "f4ybsrx",
117
+ Bqenvij: "fzi9ji0",
118
+ B2u0y6b: "f11qte0n",
119
+ Bf4jedk: "fy1a5sw"
120
+ }
121
+ }, {
122
+ d: [".fyv37rf{max-width:calc(180px - 16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));}", [".f1o3rc9c{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge) var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}", {
123
+ p: -1
124
+ }], ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f104wqfl{line-height:16px;}", ".fjw5fx7{width:16px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", [".fnsh2i4{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXXS);}", {
125
+ p: -1
126
+ }], ".fatynhj{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fydhda{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}", ".fzi9ji0{height:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));}", ".f11qte0n{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}", ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"]
127
+ });
84
128
  /**
85
129
  * Apply styling to the Attachment slots based on the state
86
130
  */
@@ -96,18 +140,20 @@ export const useAttachmentStyles_unstable = state => {
96
140
  const progressBarStyles = useProgressBarStyles();
97
141
  const primaryActionStyles = usePrimaryActionStyles();
98
142
  const imageOnlyStyles = useImageOnlyStyles();
143
+ const smallStyles = useSmallStyles();
99
144
  const {
100
145
  imageOnly,
101
- primaryAction
146
+ primaryAction,
147
+ size
102
148
  } = state;
103
149
  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
104
- state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
105
- state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
150
+ state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, size === 'small' && smallStyles.primaryAction, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
151
+ state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, state.dismissButton.className);
106
152
  if (state.media) {
107
- state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);
153
+ state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
108
154
  }
109
- state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
110
- state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
155
+ state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, size === 'small' && smallStyles.content, imageOnly && imageOnlyStyles.content, state.content.className);
156
+ state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, size === 'small' && smallStyles.dismissIcon, state.dismissIcon.className);
111
157
  if (state.progress) {
112
158
  state.progress.className = mergeClasses(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
113
159
  const bar = slot.optional(state.progress.bar, {
package/lib/components/Attachment/useAttachmentStyles.styles.js.map CHANGED
@@ -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 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\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 { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\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 state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\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","tokens","typographyStyles","useProgressBarStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","progress","ATTACHMENT_MAXWIDTH","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","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","imageOnly","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"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 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":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","slot","tokens","typographyStyles","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","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","progressBarStyles","primaryActionStyles","imageOnlyStyles","smallStyles","imageOnly","size","className","as","isLoading","bar","optional","elementType","renderByDefault","value","undefined","indeterminateProgressBar","regularProgressBar"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib-commonjs/components/Attachment/Attachment.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button', 'span'>>;\n dismissButton: NonNullable<Slot<'button'>>;\n media?: Slot<'span'>;\n content: NonNullable<Slot<'span'>>;\n dismissIcon: NonNullable<Slot<'span'>>;\n progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n imageOnly?: boolean;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n Required<Pick<AttachmentProps, 'id'>> &\n Pick<AttachmentProps, 'imageOnly'> & {\n isLoading: boolean;\n shouldUseOverflow: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAmBA;;CAEC"}
1
+ {"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ProgressBar, Slot } from '@fluentui/react-components';\n\nexport type AttachmentSlots = {\n root: NonNullable<Slot<'div'>>;\n primaryAction: NonNullable<Slot<'button', 'span'>>;\n dismissButton: NonNullable<Slot<'button'>>;\n media?: Slot<'span'>;\n content: NonNullable<Slot<'span'>>;\n dismissIcon: NonNullable<Slot<'span'>>;\n progress?: Slot<typeof ProgressBar>;\n};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {\n imageOnly?: boolean;\n\n /**\n * An attachment supports different sizes.\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots> &\n Required<Pick<AttachmentProps, 'id' | 'size'>> &\n Pick<AttachmentProps, 'imageOnly'> & {\n isLoading: boolean;\n shouldUseOverflow: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AA0BA;;CAEC"}
package/lib-commonjs/components/Attachment/useAttachment.js CHANGED
@@ -14,7 +14,7 @@ const _reactcomponents = require("@fluentui/react-components");
14
14
  const _reacticons = require("@fluentui/react-icons");
15
15
  const _attachmentListContext = require("../../contexts/attachmentListContext");
16
16
  const useAttachment_unstable = (props, ref)=>{
17
- const { children, imageOnly } = props;
17
+ const { children, imageOnly, size = 'medium' } = props;
18
18
  const { onAttachmentDismiss, shouldUseOverflow } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
19
19
  const attachmentId = (0, _reactcomponents.useId)('attachment-', props.id);
20
20
  const isLoading = !!props.progress;
@@ -52,7 +52,7 @@ const useAttachment_unstable = (props, ref)=>{
52
52
  });
53
53
  const dismissIcon = _reactcomponents.slot.always(props.dismissIcon, {
54
54
  defaultProps: {
55
- children: /*#__PURE__*/ _react.createElement(_reacticons.Dismiss20Regular, null)
55
+ children: size === 'small' ? /*#__PURE__*/ _react.createElement(_reacticons.Dismiss12Regular, null) : /*#__PURE__*/ _react.createElement(_reacticons.Dismiss20Regular, null)
56
56
  },
57
57
  elementType: 'span'
58
58
  });
@@ -66,6 +66,7 @@ const useAttachment_unstable = (props, ref)=>{
66
66
  });
67
67
  const state = {
68
68
  id: attachmentId,
69
+ size,
69
70
  components: {
70
71
  root: 'div',
71
72
  primaryAction: 'button',
package/lib-commonjs/components/Attachment/useAttachment.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n const { children, imageOnly } = props;\n const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n const attachmentId = useId('attachment-', props.id);\n const isLoading = !!props.progress;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n id: attachmentId,\n }),\n { elementType: 'div' },\n );\n\n const primaryAction = slot.always(props.primaryAction, {\n elementType: 'button',\n });\n\n const dismissButton = slot.always(props.dismissButton, {\n defaultProps: { 'aria-label': 'Dismiss' },\n elementType: 'button',\n });\n\n dismissButton.onClick = mergeCallbacks(\n dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n },\n );\n\n const media = slot.optional(props.media, { elementType: 'span' });\n\n const content = slot.always(props.content, {\n defaultProps: {\n children: props.children,\n },\n elementType: 'span',\n });\n\n const dismissIcon = slot.always(props.dismissIcon, {\n defaultProps: {\n children: <Dismiss20Regular />,\n },\n elementType: 'span',\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n const state: AttachmentState = {\n id: attachmentId,\n components: {\n root: 'div',\n primaryAction: 'button',\n dismissButton: 'button',\n media: 'span',\n content: 'span',\n dismissIcon: 'span',\n progress: ProgressBar,\n },\n\n root,\n primaryAction,\n dismissButton,\n media,\n content,\n dismissIcon,\n progress,\n imageOnly,\n isLoading,\n shouldUseOverflow,\n };\n\n if (state.primaryAction.as === 'span') {\n state.components.primaryAction = 'span';\n }\n\n return state;\n};\n"],"names":["children","props","attachmentId","imageOnly","isLoading","ref","useAttachmentListContext_unstable","context","elementType","useId","id","progress","root","primaryAction","slot","always","onAttachmentDismiss","content","media","optional","onClick","ev","defaultProps","dismissIcon","shape","thickness","React","createElement","Dismiss20Regular","components","dismissButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC4D;4BAClD;uCACiB;AAahD,MAAQA,yBAAwBC,CAAAA,OAAAA;UAChC,EACAD,QAAME,EACNC,SAAMC,KAENH;UAEII,qBACQ,mBACJH,KACNI,IAAAA,wDACA,EAAAC,CAAAA,UAAAA;UAAEC,eAAaC,IAAAA,sBAAA,EAAA,eAAAR,MAAAS,EAAA;UAAMN,YAAA,CAAA,CAAAH,MAAAU,QAAA;UAGvBC,OAAMC,qBAAAA,CAAAA,MAAgBC,CAAAA,IAAAA,yCAAkBD,EAAAA,OAAe;;QAEvD,GAAAZ,KAAA;QAEAS,IAAAR;;qBACkB;;UAChBM,gBAAaM,qBAAA,CAAAC,MAAA,CAAAd,MAAAY,aAAA,EAAA;QACfL,aAAA;;UAKIQ,gBAAAA,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAA4BC;0BAAmBC;;qBAAwB;;kBAIrEA,OAAaC,GAAAA,IAAAA,+BAAeD,EAAAA,cAAOE,OAAA,EAAAC,CAAAA;gCAAe,QAAAL,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAK,IAAA;YAAOJ,SAAAjB;YAE/DkB;gBACEI;;;UAGAd,QAAAA,qBAAAA,CAAaW,QAAA,CAAAlB,MAAAiB,KAAA,EAAA;QACfV,aAAA;;UAGEc,UAAAA,qBAAc,CAAAP,MAAA,CAAAd,MAAAgB,OAAA,EAAA;sBACZjB;sBACFC,MAAAD,QAAA;;QAEFQ,aAAA;;UAGEc,cAAcR,qBAAA,CAAAC,MAAA,CAAAd,MAAAsB,WAAA,EAAA;sBACZC;sBACAC,WAAW,GAAAC,OAAAC,aAAA,CAAAC,4BAAA,EAAA;;qBAEb;;UAEFjB,WAAAG,qBAAA,CAAAK,QAAA,CAAAlB,MAAAU,QAAA,EAAA;QAEAW,cAA+B;mBACzBpB;uBACJ2B;+BACQ5B,MAAAS,EAAA;;qBAENoB,4BAAe;;kBAEfb;;oBAEAN;kBACF;2BAEAC;2BACAC;mBACAiB;qBACAZ;yBACAD;sBACAM,4BAAAA;;;;;QAKFL;QAEAD;;QAEAN;QAEAR;QACAC"}
1
+ {"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ProgressBar, getIntrinsicElementProps, mergeCallbacks, slot, useId } from '@fluentui/react-components';\nimport { Dismiss12Regular, Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps, AttachmentState } from './Attachment.types';\n\n/**\n * Create the state required to render Attachment.\n *\n * The returned state can be modified with hooks such as useAttachmentStyles_unstable,\n * before being passed to renderAttachment_unstable.\n *\n * @param props - props from this instance of Attachment\n * @param ref - reference to root HTMLElement of Attachment\n */\nexport const useAttachment_unstable = (props: AttachmentProps, ref: React.Ref<HTMLDivElement>): AttachmentState => {\n const { children, imageOnly, size = 'medium' } = props;\n const { onAttachmentDismiss, shouldUseOverflow } = useAttachmentListContext_unstable(context => context);\n const attachmentId = useId('attachment-', props.id);\n const isLoading = !!props.progress;\n\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n id: attachmentId,\n }),\n { elementType: 'div' },\n );\n\n const primaryAction = slot.always(props.primaryAction, {\n elementType: 'button',\n });\n\n const dismissButton = slot.always(props.dismissButton, {\n defaultProps: { 'aria-label': 'Dismiss' },\n elementType: 'button',\n });\n\n dismissButton.onClick = mergeCallbacks(\n dismissButton.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n onAttachmentDismiss?.(ev, { content: children, media, id: attachmentId });\n },\n );\n\n const media = slot.optional(props.media, { elementType: 'span' });\n\n const content = slot.always(props.content, {\n defaultProps: {\n children: props.children,\n },\n elementType: 'span',\n });\n\n const dismissIcon = slot.always(props.dismissIcon, {\n defaultProps: {\n children: size === 'small' ? <Dismiss12Regular /> : <Dismiss20Regular />,\n },\n elementType: 'span',\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n const state: AttachmentState = {\n id: attachmentId,\n size,\n components: {\n root: 'div',\n primaryAction: 'button',\n dismissButton: 'button',\n media: 'span',\n content: 'span',\n dismissIcon: 'span',\n progress: ProgressBar,\n },\n\n root,\n primaryAction,\n dismissButton,\n media,\n content,\n dismissIcon,\n progress,\n imageOnly,\n isLoading,\n shouldUseOverflow,\n };\n\n if (state.primaryAction.as === 'span') {\n state.components.primaryAction = 'span';\n }\n\n return state;\n};\n"],"names":["children","size","ref","attachmentId","imageOnly","isLoading","root","slot","shouldUseOverflow","context","useId","props","id","primaryAction","always","elementType","getIntrinsicElementProps","dismissButton","defaultProps","media","mergeCallbacks","onClick","ev","onAttachmentDismiss","content","optional","dismissIcon","progress","thickness","React","createElement","Dismiss12Regular","Dismiss20Regular","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBUA;;;eAAAA;;;;iEAhBa;iCAC4D;4BAChC;uCACD;AAahD,MAAQA,yBAAqBC,CAAAA,OAAOC;UACpC,EACAF,QAAMG,EACNC,SAAMC,EAENJ,OAAMK,QAAOC;UAGT,qBACIJ,EACNK,iBACA,iEAAe,EAAAC,CAAAA,UAAAA;UAAMN,eAAAO,IAAAA,sBAAA,EAAA,eAAAC,MAAAC,EAAA;UAGvBP,YAAMQ,CAAAA,CAAAA,MAAgBN,QAAKO;UACzBC,OAAAA,qBAAAA,CAAAA,MAAa,CAAAC,IAAAA,yCAAA,EAAA,OAAA;QACfd;QAEA,GAAAS,KAAMM;YACJC;;qBAAwC;;UAE1CL,gBAAAN,qBAAA,CAAAO,MAAA,CAAAH,MAAAE,aAAA,EAAA;QAEAI,aAAAA;;0BAGyCjB,qBAAAA,CAAAA,MAAAA,CAAAA,MAAAA,aAAAA,EAAAA;sBAAUmB;0BAAWhB;;QAC5DY,aAAA;;kBAGyCA,OAAa,GAAAK,IAAAA,+BAAA,EAAAH,cAAAI,OAAA,EAAAC,CAAAA;QAAOC,wBAAA,QAAAA,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAD,IAAA;YAE/DE,SAAMA;;;;;UAKNL,QAAAZ,qBAAA,CAAAkB,QAAA,CAAAd,MAAAQ,KAAA,EAAA;QAEAJ,aAAMW;;oBAEF1B,qBAAUC,CAAAA,MAAAA,CAAAA,MAASuB,OAAA,EAAA;sBACrB;sBACAT,MAAaf,QAAA;QACf;QAEAe,aAAMY;;wBAEKpB,qBAAA,CAAAO,MAAA,CAAAH,MAAAe,WAAA,EAAA;sBACPE;sBACA3B,SAAA,UAAmBU,WAAQ,GAAAkB,OAAAC,aAAA,CAAAC,4BAAA,EAAA,QAAA,WAAA,GAAAF,OAAAC,aAAA,CAAAE,4BAAA,EAAA;;qBAE7BjB;;UAGFY,WAA+BpB,qBAAA,CAAAkB,QAAA,CAAAd,MAAAgB,QAAA,EAAA;sBACzBxB;mBACJF;uBACAgC;+BACQtB,MAAAC,EAAA;;qBAENK,4BAAe;;kBAEfO;;;oBAGF;kBAEAlB;2BACAO;2BACAI;mBACAE;qBACAK;yBACAE;sBACAC,4BAAAA;;;;QAIFV;QAEAE;;QAEAO;QAEAC;QACAvB"}
package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js CHANGED
@@ -31,6 +31,7 @@ const attachmentClassNames = {
31
31
  progress: 'fai-Attachment__progress'
32
32
  };
33
33
  const ATTACHMENT_MAXWIDTH = '180px';
34
+ const SMALL_ATTACHMENT_SIZE = '16px';
34
35
  const ATTACHMENT_SIZE = '20px';
35
36
  const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r16wonf3", null, [
36
37
  ".r16wonf3{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;align-self:end;position:relative;}"
@@ -156,6 +157,72 @@ const useOverflowStyles = (0, _reactcomponents.__styles)({
156
157
  ".fly5x3f{width:100%;}"
157
158
  ]
158
159
  });
160
+ const useSmallStyles = (0, _reactcomponents.__styles)({
161
+ primaryAction: {
162
+ B2u0y6b: "fyv37rf",
163
+ Byoj8tv: 0,
164
+ uwmqm3: 0,
165
+ z189sj: 0,
166
+ z8tnut: 0,
167
+ B0ocmuz: "f1o3rc9c"
168
+ },
169
+ media: {
170
+ Be2twd7: "f4ybsrx",
171
+ Bqenvij: "fd461yt",
172
+ Bg96gwp: "f104wqfl",
173
+ a9b677: "fjw5fx7"
174
+ },
175
+ content: {
176
+ Bahqtrf: "fk6fouc",
177
+ Be2twd7: "fy9rknc",
178
+ Bhrd7zp: "figsok6",
179
+ Bg96gwp: "fwrc4pm"
180
+ },
181
+ dismissButton: {
182
+ Byoj8tv: 0,
183
+ uwmqm3: 0,
184
+ z189sj: 0,
185
+ z8tnut: 0,
186
+ B0ocmuz: "fnsh2i4",
187
+ B2u0y6b: "fatynhj",
188
+ Bf4jedk: "fydhda"
189
+ },
190
+ dismissIcon: {
191
+ Be2twd7: "f4ybsrx",
192
+ Bqenvij: "fzi9ji0",
193
+ B2u0y6b: "f11qte0n",
194
+ Bf4jedk: "fy1a5sw"
195
+ }
196
+ }, {
197
+ d: [
198
+ ".fyv37rf{max-width:calc(180px - 16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));}",
199
+ [
200
+ ".f1o3rc9c{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge) var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}",
201
+ {
202
+ p: -1
203
+ }
204
+ ],
205
+ ".f4ybsrx{font-size:16px;}",
206
+ ".fd461yt{height:16px;}",
207
+ ".f104wqfl{line-height:16px;}",
208
+ ".fjw5fx7{width:16px;}",
209
+ ".fk6fouc{font-family:var(--fontFamilyBase);}",
210
+ ".fy9rknc{font-size:var(--fontSizeBase200);}",
211
+ ".figsok6{font-weight:var(--fontWeightRegular);}",
212
+ ".fwrc4pm{line-height:var(--lineHeightBase200);}",
213
+ [
214
+ ".fnsh2i4{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXXS);}",
215
+ {
216
+ p: -1
217
+ }
218
+ ],
219
+ ".fatynhj{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}",
220
+ ".fydhda{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);}",
221
+ ".fzi9ji0{height:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));}",
222
+ ".f11qte0n{max-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}",
223
+ ".fy1a5sw{min-width:calc(16px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));}"
224
+ ]
225
+ });
159
226
  const useAttachmentStyles_unstable = (state)=>{
160
227
  'use no memo';
161
228
  const rootBaseClassName = useRootBaseClassName();
@@ -167,15 +234,16 @@ const useAttachmentStyles_unstable = (state)=>{
167
234
  const progressBarStyles = (0, _useProgressBarStylesstyles.useProgressBarStyles)();
168
235
  const primaryActionStyles = usePrimaryActionStyles();
169
236
  const imageOnlyStyles = useImageOnlyStyles();
170
- const { imageOnly, primaryAction } = state;
237
+ const smallStyles = useSmallStyles();
238
+ const { imageOnly, primaryAction, size } = state;
171
239
  state.root.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.root, rootBaseClassName, state.root.className);
172
- state.primaryAction.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && !state.isLoading && primaryActionStyles.button, imageOnly && imageOnlyStyles.primaryAction, state.primaryAction.className);
173
- state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
240
+ 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);
241
+ state.dismissButton.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissButton, dismissButtonBaseClassName, size === 'small' && smallStyles.dismissButton, state.dismissButton.className);
174
242
  if (state.media) {
175
- state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, state.media.className);
243
+ state.media.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.media, mediaBaseClassName, size === 'small' && smallStyles.media, state.media.className);
176
244
  }
177
- state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, imageOnly && imageOnlyStyles.content, state.content.className);
178
- state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
245
+ state.content.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.content, contentBaseClassName, size === 'small' && smallStyles.content, imageOnly && imageOnlyStyles.content, state.content.className);
246
+ state.dismissIcon.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.dismissIcon, dismissIconBaseClassName, size === 'small' && smallStyles.dismissIcon, state.dismissIcon.className);
179
247
  if (state.progress) {
180
248
  state.progress.className = (0, _reactcomponents.mergeClasses)(attachmentClassNames.progress, progressBarStyles.progress, state.progress.className);
181
249
  const bar = _reactcomponents.slot.optional(state.progress.bar, {
package/lib-commonjs/components/Attachment/useAttachmentStyles.styles.js.map CHANGED
@@ -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 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\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 { imageOnly, primaryAction } = state;\n\n state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);\n state.primaryAction.className = mergeClasses(\n attachmentClassNames.primaryAction,\n primaryActionBaseClassName,\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 state.dismissButton.className,\n );\n if (state.media) {\n state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);\n }\n state.content.className = mergeClasses(\n attachmentClassNames.content,\n contentBaseClassName,\n imageOnly && imageOnlyStyles.content,\n state.content.className,\n );\n state.dismissIcon.className = mergeClasses(\n attachmentClassNames.dismissIcon,\n dismissIconBaseClassName,\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","useAttachmentStyles_unstable","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","minWidth","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","state","colorNeutralForeground2BrandPressed","dismissButtonBaseClassName","useDismissButtonBaseClassName","mediaBaseClassName","useMediaBaseClassName","contentBaseClassName","colorNeutralForeground2BrandHover","progressBarStyles","useProgressBarStyles","primaryActionStyles","imageOnlyStyles","useImageOnlyStyles","rootBaseClassName","className","mergeClasses","primaryActionBaseClassName","as","isLoading","imageOnly","fontSize","height","lineHeight","width","elementType","useContentBaseClassName","overflowX","textOverflow","whiteSpace","value","undefined","typographyStyles","body1","indeterminateProgressBar","bar","useDismissIconBaseClassName","regularProgressBar","borderRadiusCircular","border"],"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 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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-copilot/react-attachments",
3
- "version": "0.10.2",
3
+ "version": "0.10.3",
4
4
  "description": "A set of components related to attaching files in Copilot experiences.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -12,7 +12,7 @@
12
12
  },
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@fluentui-copilot/react-provider": "^0.9.2",
15
+ "@fluentui-copilot/react-provider": "^0.9.3",
16
16
  "@fluentui-copilot/react-utilities": "^0.0.4",
17
17
  "@fluentui-copilot/tokens": "^0.3.3",
18
18
  "@swc/helpers": "^0.5.1"