@fluentui-copilot/react-attachments 0.8.0 → 0.8.2

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Wed, 13 Mar 2024 18:00:36 GMT",
+      "date": "Wed, 03 Apr 2024 00:23:26 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.8.2",
+      "version": "0.8.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "42907801f4b0eb4a808729ac00f86380b3e8a5bf",
+            "comment": "feat: implement Attachment component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Mar 2024 18:24:19 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.8.1",
+      "version": "0.8.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "14ce40ddbee4d35f3f4bcf03521d60715b03d59c",
+            "comment": "feat: implement AttachmentTagItem component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 13 Mar 2024 18:01:50 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.8.0",
       "version": "0.8.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Wed, 13 Mar 2024 18:00:36 GMT and should not be manually modified.
+This log was last generated on Wed, 03 Apr 2024 00:23:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.8.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.2)
+
+Wed, 03 Apr 2024 00:23:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.1..@fluentui-copilot/react-attachments_v0.8.2)
+
+### Patches
+
+- feat: implement Attachment component. ([PR #1466](https://github.com/microsoft/fluentai/pull/1466) by tristan.watanabe@gmail.com)
+
+## [0.8.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.1)
+
+Thu, 14 Mar 2024 18:24:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.0..@fluentui-copilot/react-attachments_v0.8.1)
+
+### Patches
+
+- feat: implement AttachmentTagItem component. ([PR #1435](https://github.com/microsoft/fluentai/pull/1435) by tristan.watanabe@gmail.com)
+
 ## [0.8.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.0)
 
-Wed, 13 Mar 2024 18:00:36 GMT 
+Wed, 13 Mar 2024 18:01:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentai/attachments_v0.7.1..@fluentui-copilot/react-attachments_v0.8.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -7,6 +7,29 @@ import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
 
+export declare const Attachment: ForwardRefComponent<AttachmentProps>;
+
+export declare const attachmentClassNames: SlotClassNames<AttachmentSlots>;
+
+/**
+ * Attachment Props
+ */
+export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {};
+
+export declare type AttachmentSlots = {
+    root: NonNullable<Slot<'div'>>;
+    primaryAction: NonNullable<Slot<'button', 'span'>>;
+    dismissButton: NonNullable<Slot<'button'>>;
+    media?: Slot<'span'>;
+    content: NonNullable<Slot<'span'>>;
+    dismissIcon: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering Attachment
+ */
+export declare type AttachmentState = ComponentState<AttachmentSlots>;
+
 export declare const AttachmentTag: ForwardRefComponent<AttachmentTagProps>;
 
 export declare const attachmentTagClassNames: SlotClassNames<AttachmentTagSlots>;
@@ -16,6 +39,27 @@ export declare type AttachmentTagDismissedData = {
     media?: AttachmentTagProps['media'];
 };
 
+export declare const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps>;
+
+export declare const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots>;
+
+/**
+ * AttachmentTagItem Props
+ */
+export declare type AttachmentTagItemProps = ComponentProps<Partial<AttachmentTagItemSlots>>;
+
+export declare type AttachmentTagItemSlots = {
+    root: NonNullable<Slot<'div'>>;
+    media?: Slot<'span'>;
+    content: NonNullable<Slot<'span'>>;
+    icon: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering AttachmentTagItem
+ */
+export declare type AttachmentTagItemState = ComponentState<AttachmentTagItemSlots>;
+
 export declare const AttachmentTagList: ForwardRefComponent<AttachmentTagListProps>;
 
 export declare const attachmentTagListClassNames: SlotClassNames<AttachmentTagListSlots>;
@@ -62,16 +106,42 @@ export declare type AttachmentTagSlots = {
  */
 export declare type AttachmentTagState = ComponentState<AttachmentTagSlots>;
 
+/**
+ * Render the final JSX of Attachment
+ */
+export declare const renderAttachment_unstable: (state: AttachmentState) => JSX.Element;
+
 /**
  * Render the final JSX of AttachmentTag
  */
 export declare const renderAttachmentTag_unstable: (state: AttachmentTagState) => JSX.Element;
 
+/**
+ * Render the final JSX of AttachmentTagItem
+ */
+export declare const renderAttachmentTagItem_unstable: (state: AttachmentTagItemState) => JSX.Element;
+
 /**
  * Render the final JSX of AttachmentTagList
  */
 export declare const renderAttachmentTagList_unstable: (state: AttachmentTagListState, contextValues: AttachmentTagListContextValues) => JSX.Element;
 
+/**
+ * Create the state required to render Attachment.
+ *
+ * The returned state can be modified with hooks such as useAttachmentStyles_unstable,
+ * before being passed to renderAttachment_unstable.
+ *
+ * @param props - props from this instance of Attachment
+ * @param ref - reference to root HTMLElement of Attachment
+ */
+export declare const useAttachment_unstable: (props: AttachmentProps, ref: React_2.Ref<HTMLElement>) => AttachmentState;
+
+/**
+ * Apply styling to the Attachment slots based on the state
+ */
+export declare const useAttachmentStyles_unstable: (state: AttachmentState) => AttachmentState;
+
 /**
  * Create the state required to render AttachmentTag.
  *
@@ -83,6 +153,22 @@ export declare const renderAttachmentTagList_unstable: (state: AttachmentTagList
  */
 export declare const useAttachmentTag_unstable: (props: AttachmentTagProps, ref: React_2.Ref<HTMLElement>) => AttachmentTagState;
 
+/**
+ * Create the state required to render AttachmentTagItem.
+ *
+ * The returned state can be modified with hooks such as useAttachmentTagItemStyles_unstable,
+ * before being passed to renderAttachmentTagItem_unstable.
+ *
+ * @param props - props from this instance of AttachmentTagItem
+ * @param ref - reference to root HTMLElement of AttachmentTagItem
+ */
+export declare const useAttachmentTagItem_unstable: (props: AttachmentTagItemProps, ref: React_2.Ref<HTMLElement>) => AttachmentTagItemState;
+
+/**
+ * Apply styling to the AttachmentTagItem slots based on the state
+ */
+export declare const useAttachmentTagItemStyles_unstable: (state: AttachmentTagItemState) => AttachmentTagItemState;
+
 /**
  * Create the state required to render AttachmentTagList.
  *

package/lib/Attachment.js

@@ -0,0 +1,2 @@
+export * from './components/Attachment/index';
+//# sourceMappingURL=Attachment.js.map

package/lib/Attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Attachment.ts"],"sourcesContent":["export * from './components/Attachment/index';\n"],"names":[],"mappings":"AAAA,cAAc,gCAAgC"}

package/lib/components/Attachment/Attachment.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useAttachment_unstable } from './useAttachment';
+import { renderAttachment_unstable } from './renderAttachment';
+import { useAttachmentStyles_unstable } from './useAttachmentStyles';
+// Attachment component - TODO: add more docs
+export const Attachment = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAttachment_unstable(props, ref);
+  useAttachmentStyles_unstable(state);
+  return renderAttachment_unstable(state);
+});
+Attachment.displayName = 'Attachment';
+//# sourceMappingURL=Attachment.js.map

package/lib/components/Attachment/Attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Attachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachment_unstable } from './useAttachment';\nimport { renderAttachment_unstable } from './renderAttachment';\nimport { useAttachmentStyles_unstable } from './useAttachmentStyles';\nimport type { AttachmentProps } from './Attachment.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// Attachment component - TODO: add more docs\nexport const Attachment: ForwardRefComponent<AttachmentProps> = React.forwardRef((props, ref) => {\n  const state = useAttachment_unstable(props, ref);\n\n  useAttachmentStyles_unstable(state);\n  return renderAttachment_unstable(state);\n});\n\nAttachment.displayName = 'Attachment';\n"],"names":["React","useAttachment_unstable","renderAttachment_unstable","useAttachmentStyles_unstable","Attachment","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AAIrE,6CAA6C;AAC7C,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

package/lib/components/Attachment/Attachment.types.js

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

package/lib/components/Attachment/Attachment.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Attachment.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, 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};\n\n/**\n * Attachment Props\n */\nexport type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots>;\n"],"names":[],"mappings":"AAAA,WAmB8D"}

package/lib/components/Attachment/index.js

@@ -0,0 +1,6 @@
+export * from './Attachment';
+export * from './Attachment.types';
+export * from './renderAttachment';
+export * from './useAttachment';
+export * from './useAttachmentStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/Attachment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Attachment';\nexport * from './Attachment.types';\nexport * from './renderAttachment';\nexport * from './useAttachment';\nexport * from './useAttachmentStyles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,wBAAwB"}

package/lib/components/Attachment/renderAttachment.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-components';
+/**
+ * Render the final JSX of Attachment
+ */
+export const renderAttachment_unstable = state => {
+  assertSlots(state);
+  return /*#__PURE__*/_jsxs(state.root, {
+    children: [/*#__PURE__*/_jsxs(state.primaryAction, {
+      children: [state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.content, {})]
+    }), /*#__PURE__*/_jsx(state.dismissButton, {
+      children: /*#__PURE__*/_jsx(state.dismissIcon, {})
+    })]
+  });
+};
+//# sourceMappingURL=renderAttachment.js.map

package/lib/components/Attachment/renderAttachment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderAttachment.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { AttachmentState, AttachmentSlots } from './Attachment.types';\n\n/**\n * Render the final JSX of Attachment\n */\nexport const renderAttachment_unstable = (state: AttachmentState) => {\n  assertSlots<AttachmentSlots>(state);\n\n  return (\n    <state.root>\n      <state.primaryAction>\n        {state.media && <state.media />}\n        <state.content />\n      </state.primaryAction>\n      <state.dismissButton>\n        <state.dismissIcon />\n      </state.dismissButton>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAttachment_unstable","state","root","primaryAction","media","content","dismissButton","dismissIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,6BAA6B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,aAAa;;oBACjBF,MAAMG,KAAK,kBAAI,KAACH,MAAMG,KAAK;kCAC5B,KAACH,MAAMI,OAAO;;;0BAEhB,KAACJ,MAAMK,aAAa;0BAClB,cAAA,KAACL,MAAMM,WAAW;;;;AAI1B,EAAE"}

package/lib/components/Attachment/useAttachment.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
+import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
+import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';
+/**
+ * Create the state required to render Attachment.
+ *
+ * The returned state can be modified with hooks such as useAttachmentStyles_unstable,
+ * before being passed to renderAttachment_unstable.
+ *
+ * @param props - props from this instance of Attachment
+ * @param ref - reference to root HTMLElement of Attachment
+ */
+export const useAttachment_unstable = (props, ref) => {
+  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
+  //TODO: replace with context from to be created AttachmentList component
+  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);
+  const root = slot.always(getNativeElementProps('div', {
+    ref,
+    ...props
+  }), {
+    elementType: 'div'
+  });
+  const primaryAction = slot.always(props.primaryAction, {
+    elementType: 'button'
+  });
+  const dismissButton = slot.always(props.dismissButton, {
+    defaultProps: {
+      'aria-label': 'Dismiss'
+    },
+    elementType: 'button'
+  });
+  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
+    content: props.children,
+    media: props.media
+  }));
+  const media = slot.optional(props.media, {
+    elementType: 'span'
+  });
+  const content = slot.always(props.content, {
+    defaultProps: {
+      children: props.children
+    },
+    elementType: 'span'
+  });
+  const dismissIcon = slot.always(props.dismissIcon, {
+    defaultProps: {
+      children: /*#__PURE__*/React.createElement(DismissIcon, null)
+    },
+    elementType: 'span'
+  });
+  const state = {
+    components: {
+      root: 'div',
+      primaryAction: 'button',
+      dismissButton: 'button',
+      media: 'span',
+      content: 'span',
+      dismissIcon: 'span'
+    },
+    root,
+    primaryAction,
+    dismissButton,
+    media,
+    content,
+    dismissIcon
+  };
+  if (state.primaryAction.as === 'span') {
+    state.components.primaryAction = 'span';
+  }
+  return state;
+};
+//# sourceMappingURL=useAttachment.js.map

package/lib/components/Attachment/useAttachment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\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<HTMLElement>): AttachmentState => {\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n  //TODO: replace with context from to be created AttachmentList component\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n\n  const root = slot.always(\n    getNativeElementProps('div', {\n      ref,\n      ...props,\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      onAttachmentTagDismiss?.(ev, { content: props.children, media: props.media }),\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: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  const state: AttachmentState = {\n    components: {\n      root: 'div',\n      primaryAction: 'button',\n      dismissButton: 'button',\n      media: 'span',\n      content: 'span',\n      dismissIcon: 'span',\n    },\n\n    root,\n    primaryAction,\n    dismissButton,\n    media,\n    content,\n    dismissIcon,\n  };\n\n  if (state.primaryAction.as === 'span') {\n    state.components.primaryAction = 'span';\n  }\n\n  return state;\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentTagListContext_unstable","useAttachment_unstable","props","ref","DismissIcon","onAttachmentTagDismiss","context","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","content","children","media","optional","dismissIcon","state","components","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AACzF,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,oCAAoC,QAAQ,0CAA0C;AAG/F;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAMC,cAAcL,WAAWD,iBAAiBD;IAChD,wEAAwE;IACxE,MAAMQ,yBAAyBL,qCAAqCM,CAAAA,UAAWA,QAAQD,sBAAsB;IAE7G,MAAME,OAAOX,KAAKY,MAAM,CACtBd,sBAAsB,OAAO;QAC3BS;QACA,GAAGD,KAAK;IACV,IACA;QAAEO,aAAa;IAAM;IAGvB,MAAMC,gBAAgBd,KAAKY,MAAM,CAACN,MAAMQ,aAAa,EAAE;QACrDD,aAAa;IACf;IAEA,MAAME,gBAAgBf,KAAKY,MAAM,CAACN,MAAMS,aAAa,EAAE;QACrDC,cAAc;YAAE,cAAc;QAAU;QACxCH,aAAa;IACf;IAEAE,cAAcE,OAAO,GAAGlB,eACtBgB,cAAcE,OAAO,EACrB,CAACC,KACCT,mCAAAA,6CAAAA,uBAAyBS,IAAI;YAAEC,SAASb,MAAMc,QAAQ;YAAEC,OAAOf,MAAMe,KAAK;QAAC;IAG/E,MAAMA,QAAQrB,KAAKsB,QAAQ,CAAChB,MAAMe,KAAK,EAAE;QAAER,aAAa;IAAO;IAE/D,MAAMM,UAAUnB,KAAKY,MAAM,CAACN,MAAMa,OAAO,EAAE;QACzCH,cAAc;YACZI,UAAUd,MAAMc,QAAQ;QAC1B;QACAP,aAAa;IACf;IAEA,MAAMU,cAAcvB,KAAKY,MAAM,CAACN,MAAMiB,WAAW,EAAE;QACjDP,cAAc;YACZI,wBAAU,oBAACZ;QACb;QACAK,aAAa;IACf;IAEA,MAAMW,QAAyB;QAC7BC,YAAY;YACVd,MAAM;YACNG,eAAe;YACfC,eAAe;YACfM,OAAO;YACPF,SAAS;YACTI,aAAa;QACf;QAEAZ;QACAG;QACAC;QACAM;QACAF;QACAI;IACF;IAEA,IAAIC,MAAMV,aAAa,CAACY,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACX,aAAa,GAAG;IACnC;IAEA,OAAOU;AACT,EAAE"}

package/lib/components/Attachment/useAttachmentStyles.js

@@ -0,0 +1,82 @@
+import { createCustomFocusIndicatorStyle, __resetStyles, __styles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';
+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'
+};
+const ATTACHMENT_MAXWIDTH = '180px';
+const ATTACHMENT_SIZE = '20px';
+const useRootBaseClassName = __resetStyles("r1u26nio", null, [".r1u26nio{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;max-width:180px;}"]);
+const buttonBaseStyles = {
+  alignItems: 'center',
+  backgroundColor: tokens.colorNeutralBackground1,
+  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({
+    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    zIndex: 1
+  }),
+  verticalAlign: 'middle'
+};
+const usePrimaryActionBaseClassName = __resetStyles("rftb5h9", "rofiitm", [".rftb5h9{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-right-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".rftb5h9[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".rofiitm{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-left-style:none;max-width:calc(180px - 20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS) - var(--spacingHorizontalXS));padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalS);}", ".rofiitm[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}"]);
+const usePrimaryActionStyles = __styles({
+  button: {
+    eoavqd: "f8491dx",
+    Jwef8y: "f1h648pw",
+    Bi91k9c: "fnwyq0v",
+    ecr2s2: "fwdzr64",
+    lj723h: "flvvhsy",
+    Bqrx1nm: "fq7113v",
+    kx9iu6: "fp3oj7s"
+  }
+}, {
+  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}"],
+  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}"],
+  m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useDismissButtonBaseClassName = __resetStyles("r1cf2ehf", "rhq1520", {
+  r: [".r1cf2ehf{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);border-top-right-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);}", ".r1cf2ehf[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".r1cf2ehf:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}", ".r1cf2ehf:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".r1cf2ehf:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}", ".r1cf2ehf:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}", ".rhq1520{align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);color:var(--colorNeutralForeground1);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;vertical-align:middle;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalXS);max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS))+var(--spacingHorizontalXS);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);border-top-left-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);}", ".rhq1520[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);outline-style:solid;outline-color:var(--colorStrokeFocus2);z-index:1;}", ".rhq1520:hover{cursor:pointer;background-color:var(--colorNeutralBackground3Hover);color:var(--colorNeutralForeground2BrandHover);}", ".rhq1520:hover .fai-Attachment__dismissIcon{color:var(--colorBrandForegroundLinkHover);}", ".rhq1520:active{background-color:var(--colorNeutralBackground3Pressed);color:var(--colorNeutralForeground2BrandPressed);}", ".rhq1520:focus .fai-Attachment__dismissIcon{color:var(--colorNeutralForeground2BrandHover);}"],
+  s: ["@media (forced-colors: active){.r1cf2ehf:hover{background-color:HighlightText;}.r1cf2ehf:active{background-color:HighlightText;}}", "@media (forced-colors: active){.rhq1520:hover{background-color:HighlightText;}.rhq1520:active{background-color:HighlightText;}}"]
+});
+const useMediaBaseClassName = __resetStyles("r19jnv3a", null, [".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"]);
+const useContentBaseClassName = __resetStyles("rmt99gk", null, [".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+const useDismissIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"]);
+/**
+ * Apply styling to the Attachment slots based on the state
+ */
+export const useAttachmentStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const primaryActionBaseClassName = usePrimaryActionBaseClassName();
+  const dismissButtonBaseClassName = useDismissButtonBaseClassName();
+  const mediaBaseClassName = useMediaBaseClassName();
+  const contentBaseClassName = useContentBaseClassName();
+  const dismissIconBaseClassName = useDismissIconBaseClassName();
+  const primaryActionStyles = usePrimaryActionStyles();
+  const {
+    primaryAction
+  } = state;
+  state.root.className = mergeClasses(attachmentClassNames.root, rootBaseClassName, state.root.className);
+  state.primaryAction.className = mergeClasses(attachmentClassNames.primaryAction, primaryActionBaseClassName, primaryAction.as !== 'span' && primaryActionStyles.button, state.primaryAction.className);
+  state.dismissButton.className = mergeClasses(attachmentClassNames.dismissButton, dismissButtonBaseClassName, state.dismissButton.className);
+  if (state.media) {
+    state.media.className = mergeClasses(attachmentClassNames.media, mediaBaseClassName, state.media.className);
+  }
+  state.content.className = mergeClasses(attachmentClassNames.content, contentBaseClassName, state.content.className);
+  state.dismissIcon.className = mergeClasses(attachmentClassNames.dismissIcon, dismissIconBaseClassName, state.dismissIcon.className);
+  return state;
+};
+//# sourceMappingURL=useAttachmentStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["useAttachmentStyles.ts"],"sourcesContent":["import {\n  createCustomFocusIndicatorStyle,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  tokens,\n  typographyStyles,\n} from '@fluentui/react-components';\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};\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  maxWidth: ATTACHMENT_MAXWIDTH,\n});\n\nconst buttonBaseStyles: GriffelResetStyle = {\n  alignItems: 'center',\n  backgroundColor: tokens.colorNeutralBackground1,\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    ...shorthands.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.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\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.colorNeutralBackground3Hover,\n    color: tokens.colorNeutralForeground2BrandHover,\n    [`& .${attachmentClassNames.dismissIcon}`]: {\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n  },\n  ':active': {\n    backgroundColor: tokens.colorNeutralBackground3Pressed,\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  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\n/**\n * Apply styling to the Attachment slots based on the state\n */\nexport const useAttachmentStyles_unstable = (state: AttachmentState): AttachmentState => {\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 primaryActionStyles = usePrimaryActionStyles();\n  const { 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' && primaryActionStyles.button,\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(attachmentClassNames.content, contentBaseClassName, state.content.className);\n  state.dismissIcon.className = mergeClasses(\n    attachmentClassNames.dismissIcon,\n    dismissIconBaseClassName,\n    state.dismissIcon.className,\n  );\n\n  return state;\n};\n"],"names":["createCustomFocusIndicatorStyle","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","attachmentClassNames","root","primaryAction","dismissButton","media","content","dismissIcon","ATTACHMENT_MAXWIDTH","ATTACHMENT_SIZE","useRootBaseClassName","display","flexWrap","verticalAlign","boxSizing","width","maxWidth","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","columnGap","spacingHorizontalSNudge","color","colorNeutralForeground1","cursor","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","zIndex","usePrimaryActionBaseClassName","borderTopRightRadius","borderRadiusNone","borderBottomRightRadius","borderRightStyle","spacingHorizontalXXS","spacingHorizontalXS","padding","spacingVerticalXS","spacingHorizontalS","usePrimaryActionStyles","button","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","useDismissButtonBaseClassName","minWidth","borderLeftColor","borderTopLeftRadius","borderBottomLeftRadius","colorNeutralForeground2BrandHover","colorBrandForegroundLinkHover","colorNeutralForeground2BrandPressed","useMediaBaseClassName","fontSize","height","lineHeight","useContentBaseClassName","overflowX","textOverflow","whiteSpace","body1","useDismissIconBaseClassName","borderRadiusCircular","colorTransparentStroke","spacingVerticalXXS","useAttachmentStyles_unstable","state","rootBaseClassName","primaryActionBaseClassName","dismissButtonBaseClassName","mediaBaseClassName","contentBaseClassName","dismissIconBaseClassName","primaryActionStyles","className","as"],"mappings":"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"}

package/lib/components/AttachmentTag/useAttachmentTag.js

@@ -1,9 +1,4 @@
-import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
-import { useHasParentContext } from '@fluentui/react-context-selector';
-import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
-import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';
-import { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';
+import { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';
 /**
  * Create the state required to render AttachmentTag.
  *
@@ -14,51 +9,13 @@ import { AttachmentTagListContext } from '../../contexts/attachmentTagListContex
  * @param ref - reference to root HTMLElement of AttachmentTag
  */
 export const useAttachmentTag_unstable = (props, ref) => {
-  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);
-  const {
-    children,
-    role
-  } = props;
-  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
-  const hasParentContext = useHasParentContext(AttachmentTagListContext);
-  const rootRole = role !== null && role !== void 0 ? role : hasParentContext ? 'menuitem' : undefined;
-  const root = slot.always(getNativeElementProps('button', {
-    ref,
-    ...props,
-    role: rootRole
-  }), {
-    elementType: 'button'
-  });
-  root.onClick = mergeCallbacks(root.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
-    content: children,
-    media
-  }));
-  const media = slot.optional(props.media, {
-    elementType: 'span'
-  });
-  const content = slot.always(props.content, {
-    defaultProps: {
-      children
-    },
-    elementType: 'span'
-  });
-  const icon = slot.always(props.icon, {
-    defaultProps: {
-      children: /*#__PURE__*/React.createElement(DismissIcon, null)
-    },
-    elementType: 'span'
-  });
-  return {
-    components: {
+  return useAttachmentTagSlots(props, ref, {
+    elementType: {
       root: 'button',
       media: 'span',
       content: 'span',
       icon: 'span'
-    },
-    root,
-    media,
-    content,
-    icon
-  };
+    }
+  });
 };
 //# sourceMappingURL=useAttachmentTag.js.map

package/lib/components/AttachmentTag/useAttachmentTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAttachmentTag.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';\n\nimport { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';\n\nimport { AttachmentTagListContext } from '../../contexts/attachmentTagListContext';\nimport type { AttachmentTagProps, AttachmentTagState } from './AttachmentTag.types';\n\n/**\n * Create the state required to render AttachmentTag.\n *\n * The returned state can be modified with hooks such as useAttachmentTagStyles_unstable,\n * before being passed to renderAttachmentTag_unstable.\n *\n * @param props - props from this instance of AttachmentTag\n * @param ref - reference to root HTMLElement of AttachmentTag\n */\nexport const useAttachmentTag_unstable = (\n  props: AttachmentTagProps,\n  ref: React.Ref<HTMLElement>,\n): AttachmentTagState => {\n  const onAttachmentTagDismiss = useAttachmentTagListContext_unstable(context => context.onAttachmentTagDismiss);\n\n  const { children, role } = props;\n  const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const hasParentContext = useHasParentContext(AttachmentTagListContext);\n  const rootRole = role ?? (hasParentContext ? 'menuitem' : undefined);\n\n  const root = slot.always(\n    getNativeElementProps('button', {\n      ref,\n      ...props,\n      role: rootRole,\n    }),\n    { elementType: 'button' },\n  );\n  root.onClick = mergeCallbacks(\n    root.onClick as React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>,\n    (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n      onAttachmentTagDismiss?.(ev, { content: children, media }),\n  );\n\n  const media = slot.optional(props.media, { elementType: 'span' });\n\n  const content = slot.always(props.content, {\n    defaultProps: {\n      children,\n    },\n    elementType: 'span',\n  });\n\n  const icon = slot.always(props.icon, {\n    defaultProps: {\n      children: <DismissIcon />,\n    },\n    elementType: 'span',\n  });\n\n  return {\n    components: {\n      root: 'button',\n      media: 'span',\n      content: 'span',\n      icon: 'span',\n    },\n\n    root,\n    media,\n    content,\n    icon,\n  };\n};\n"],"names":["React","getNativeElementProps","mergeCallbacks","slot","useHasParentContext","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentTagListContext_unstable","AttachmentTagListContext","useAttachmentTag_unstable","props","ref","onAttachmentTagDismiss","context","children","role","DismissIcon","hasParentContext","rootRole","undefined","root","always","elementType","onClick","ev","content","media","optional","defaultProps","icon","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AACzF,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AAEtF,SAASC,oCAAoC,QAAQ,0CAA0C;AAE/F,SAASC,wBAAwB,QAAQ,0CAA0C;AAGnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,yBAAyBL,qCAAqCM,CAAAA,UAAWA,QAAQD,sBAAsB;IAE7G,MAAM,EAAEE,QAAQ,EAAEC,IAAI,EAAE,GAAGL;IAC3B,MAAMM,cAAcV,WAAWD,iBAAiBD;IAEhD,MAAMa,mBAAmBd,oBAAoBK;IAC7C,MAAMU,WAAWH,iBAAAA,kBAAAA,OAASE,mBAAmB,aAAaE;IAE1D,MAAMC,OAAOlB,KAAKmB,MAAM,CACtBrB,sBAAsB,UAAU;QAC9BW;QACA,GAAGD,KAAK;QACRK,MAAMG;IACR,IACA;QAAEI,aAAa;IAAS;IAE1BF,KAAKG,OAAO,GAAGtB,eACbmB,KAAKG,OAAO,EACZ,CAACC,KACCZ,mCAAAA,6CAAAA,uBAAyBY,IAAI;YAAEC,SAASX;YAAUY;QAAM;IAG5D,MAAMA,QAAQxB,KAAKyB,QAAQ,CAACjB,MAAMgB,KAAK,EAAE;QAAEJ,aAAa;IAAO;IAE/D,MAAMG,UAAUvB,KAAKmB,MAAM,CAACX,MAAMe,OAAO,EAAE;QACzCG,cAAc;YACZd;QACF;QACAQ,aAAa;IACf;IAEA,MAAMO,OAAO3B,KAAKmB,MAAM,CAACX,MAAMmB,IAAI,EAAE;QACnCD,cAAc;YACZd,wBAAU,oBAACE;QACb;QACAM,aAAa;IACf;IAEA,OAAO;QACLQ,YAAY;YACVV,MAAM;YACNM,OAAO;YACPD,SAAS;YACTI,MAAM;QACR;QAEAT;QACAM;QACAD;QACAI;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAttachmentTag.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { useAttachmentTagSlots } from '../utils/useAttachmentTagSlots';\nimport type { AttachmentTagProps, AttachmentTagState } from './AttachmentTag.types';\n\n/**\n * Create the state required to render AttachmentTag.\n *\n * The returned state can be modified with hooks such as useAttachmentTagStyles_unstable,\n * before being passed to renderAttachmentTag_unstable.\n *\n * @param props - props from this instance of AttachmentTag\n * @param ref - reference to root HTMLElement of AttachmentTag\n */\nexport const useAttachmentTag_unstable = (\n  props: AttachmentTagProps,\n  ref: React.Ref<HTMLElement>,\n): AttachmentTagState => {\n  return useAttachmentTagSlots(props, ref, {\n    elementType: { root: 'button', media: 'span', content: 'span', icon: 'span' },\n  });\n};\n"],"names":["useAttachmentTagSlots","useAttachmentTag_unstable","props","ref","elementType","root","media","content","icon"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,iCAAiC;AAGvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,OAAOH,sBAAsBE,OAAOC,KAAK;QACvCC,aAAa;YAAEC,MAAM;YAAUC,OAAO;YAAQC,SAAS;YAAQC,MAAM;QAAO;IAC9E;AACF,EAAE"}

package/lib/components/AttachmentTag/useAttachmentTagStyles.js

@@ -5,12 +5,24 @@ export const attachmentTagClassNames = {
   content: 'fai-AttachmentTag__content',
   icon: 'fai-AttachmentTag__icon'
 };
-const ATTACHMENTTAG_MAXWIDTH = '180px';
+/**
+ * @internal
+ */
+export const ATTACHMENTTAG_MAXWIDTH = '180px';
 const ATTACHMENTTAG_SIZE = '20px';
 const useRootBaseClassName = __resetStyles("r1km3emv", "r21ecva", [".r1km3emv{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalXS) var(--spacingVerticalXS) var(--spacingHorizontalS);vertical-align:middle;}", ".r1km3emv:hover{border-color:var(--colorNeutralStroke1Hover);}", ".r1km3emv:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}", ".r1km3emv:hover:active{border-color:var(--colorNeutralStroke1Pressed);}", ".r1km3emv:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".r1km3emv:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}", ".r1km3emv:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".r21ecva{color:var(--colorNeutralForeground1);align-items:center;background-color:var(--colorNeutralBackground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);box-sizing:border-box;column-gap:var(--spacingHorizontalSNudge);cursor:pointer;display:inline-flex;flex-wrap:nowrap;justify-content:center;max-width:180px;padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalXS);vertical-align:middle;}", ".r21ecva:hover{border-color:var(--colorNeutralStroke1Hover);}", ".r21ecva:hover .fai-AttachmentTag__icon{color:var(--colorBrandForegroundLinkHover);}", ".r21ecva:hover:active{border-color:var(--colorNeutralStroke1Pressed);}", ".r21ecva:hover:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".r21ecva:focus .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandHover);}", ".r21ecva:focus:active .fai-AttachmentTag__icon{color:var(--colorNeutralForeground2BrandPressed);}"]);
-const useMediaBaseClassName = __resetStyles("r19jnv3a", null, [".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"]);
-const useContentBaseClassName = __resetStyles("rmt99gk", null, [".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
-const useIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"]);
+/**
+ * @internal
+ */
+export const useMediaBaseClassName = __resetStyles("r19jnv3a", null, [".r19jnv3a{font-size:20px;height:20px;line-height:20px;width:20px;}"]);
+/**
+ * @internal
+ */
+export const useContentBaseClassName = __resetStyles("rmt99gk", null, [".rmt99gk{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+/**
+ * @internal
+ */
+export const useIconBaseClassName = __resetStyles("r176grtk", null, [".r176grtk{align-items:center;border-radius:var(--borderRadiusCircular);border:var(--strokeWidthThin) solid var(--colorTransparentStroke);box-sizing:border-box;color:var(--colorNeutralForeground1);display:inline-flex;font-size:20px;height:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingVerticalXXS));justify-content:center;max-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));min-width:calc(20px + var(--strokeWidthThin) * 2 + var(--spacingHorizontalXXS));padding:calc(var(--spacingVerticalXXS) / 2) calc(var(--spacingHorizontalXXS) / 2);}"]);
 /**
  * Apply styling to the AttachmentTag slots based on the state
  */