@fluentui-copilot/react-attachments 0.8.2 → 0.9.0

package/CHANGELOG.json

@@ -2,7 +2,69 @@
   "name": "@fluentui-copilot/react-attachments",
   "entries": [
     {
-      "date": "Wed, 03 Apr 2024 00:23:26 GMT",
+      "date": "Wed, 10 Apr 2024 23:06:59 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.9.0",
+      "version": "0.9.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "4e6e2a4e710f03067f5b3e5cac0137c42d35bf2f",
+            "comment": "feat: Implement AttachmentOverflowMenuButton."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "7fb364f96cb69368bcbeeb961f088885f064be80",
+            "comment": "feat: Implement AttachmentOverflowMenuItem."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "9453a2398ba32118a85c358b6de13799cf7d9949",
+            "comment": "feat: Implement AttachmentOverflowMenu."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "4fc60898effc3b41c3642f1dda4b93ade0280dd0",
+            "comment": "chore: deprecate AttachmentTag, AttachmentTagList and AttachmentTagItem."
+          }
+        ],
+        "minor": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "2afa98912cd99ed6f604c582caee4d49d1ba895d",
+            "comment": "fix: Replace usage of deprecated getNativeElementProps with getIntrinsicElementProps."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Apr 2024 22:27:34 GMT",
+      "tag": "@fluentui-copilot/react-attachments_v0.8.3",
+      "version": "0.8.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "db2c9191dc03bf477de894b8fb8a6c349147157b",
+            "comment": "fix: use getIntrinsicElementProps to replace deprecated getNativeElementProps."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui-copilot/react-attachments",
+            "commit": "6b759badcb2260ef4901988973ec37e9bed35a1f",
+            "comment": "feat: Implement AttachmentList component."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Apr 2024 00:23:41 GMT",
       "tag": "@fluentui-copilot/react-attachments_v0.8.2",
       "version": "0.8.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui-copilot/react-attachments
 
-This log was last generated on Wed, 03 Apr 2024 00:23:26 GMT and should not be manually modified.
+This log was last generated on Wed, 10 Apr 2024 23:06:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.9.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.0)
+
+Wed, 10 Apr 2024 23:06:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.3..@fluentui-copilot/react-attachments_v0.9.0)
+
+### Minor changes
+
+- fix: Replace usage of deprecated getNativeElementProps with getIntrinsicElementProps. ([PR #1512](https://github.com/microsoft/fluentai/pull/1512) by Humberto.Morimoto@microsoft.com)
+
+### Patches
+
+- feat: Implement AttachmentOverflowMenuButton. ([PR #1515](https://github.com/microsoft/fluentai/pull/1515) by tristan.watanabe@gmail.com)
+- feat: Implement AttachmentOverflowMenuItem. ([PR #1517](https://github.com/microsoft/fluentai/pull/1517) by tristan.watanabe@gmail.com)
+- feat: Implement AttachmentOverflowMenu. ([PR #1504](https://github.com/microsoft/fluentai/pull/1504) by tristan.watanabe@gmail.com)
+- chore: deprecate AttachmentTag, AttachmentTagList and AttachmentTagItem. ([PR #1529](https://github.com/microsoft/fluentai/pull/1529) by tristan.watanabe@gmail.com)
+
+## [0.8.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.3)
+
+Wed, 03 Apr 2024 22:27:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.2..@fluentui-copilot/react-attachments_v0.8.3)
+
+### Patches
+
+- fix: use getIntrinsicElementProps to replace deprecated getNativeElementProps. ([PR #1509](https://github.com/microsoft/fluentai/pull/1509) by tristan.watanabe@gmail.com)
+- feat: Implement AttachmentList component. ([PR #1488](https://github.com/microsoft/fluentai/pull/1488) by tristan.watanabe@gmail.com)
+
 ## [0.8.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.8.2)
 
-Wed, 03 Apr 2024 00:23:26 GMT 
+Wed, 03 Apr 2024 00:23:41 GMT 
 [Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.8.1..@fluentui-copilot/react-attachments_v0.8.2)
 
 ### Patches

package/dist/index.d.ts

@@ -2,7 +2,17 @@
 
 import type { ComponentProps } from '@fluentui/react-components';
 import type { ComponentState } from '@fluentui/react-components';
+import type { Context } from '@fluentui/react-context-selector';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { MenuContextValues } from '@fluentui/react-components';
+import type { MenuItem } from '@fluentui/react-components';
+import type { MenuProps } from '@fluentui/react-components';
+import type { MenuSlots } from '@fluentui/react-components';
+import type { MenuState } from '@fluentui/react-components';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-components';
 import type { SlotClassNames } from '@fluentui/react-components';
@@ -11,10 +21,118 @@ export declare const Attachment: ForwardRefComponent<AttachmentProps>;
 
 export declare const attachmentClassNames: SlotClassNames<AttachmentSlots>;
 
+declare type AttachmentDismissedData = {
+    id: string;
+};
+
+export declare const AttachmentList: ForwardRefComponent<AttachmentListProps>;
+
+export declare const attachmentListClassNames: SlotClassNames<AttachmentListSlots>;
+
+export declare const AttachmentListContext: Context<AttachmentListContextValue>;
+
+/**
+ * Context shared between AttachmentList and its children components
+ */
+export declare type AttachmentListContextValue = Pick<AttachmentListProps, 'onAttachmentDismiss'>;
+
+declare type AttachmentListContextValues = {
+    attachmentList: AttachmentListContextValue;
+};
+
+/**
+ * AttachmentList Props
+ */
+export declare type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {
+    onAttachmentDismiss?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>, data: AttachmentDismissedData) => void;
+};
+
+export declare const AttachmentListProvider: Provider<AttachmentListContextValue> & FC<ProviderProps<AttachmentListContextValue>>;
+
+export declare type AttachmentListSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering AttachmentList
+ */
+export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss'>;
+
+export declare const AttachmentOverflowMenu: React_2.FC<AttachmentOverflowMenuProps>;
+
+export declare const AttachmentOverflowMenuButton: ForwardRefComponent<AttachmentOverflowMenuButtonProps>;
+
+export declare const attachmentOverflowMenuButtonClassNames: SlotClassNames<AttachmentOverflowMenuButtonSlots>;
+
+/**
+ * AttachmentOverflowMenuButton Props
+ */
+export declare type AttachmentOverflowMenuButtonProps = ComponentProps<Partial<AttachmentOverflowMenuButtonSlots>>;
+
+export declare type AttachmentOverflowMenuButtonSlots = {
+    root: NonNullable<Slot<'button'>>;
+};
+
+/**
+ * State used in rendering AttachmentOverflowMenuButton
+ */
+export declare type AttachmentOverflowMenuButtonState = ComponentState<AttachmentOverflowMenuButtonSlots> & Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowCount'>;
+
+export declare const AttachmentOverflowMenuContext: Context<AttachmentOverflowMenuContextValue>;
+
+/**
+ * Context shared between AttachmentOverflowMenu and its children components
+ */
+export declare type AttachmentOverflowMenuContextValue = Pick<AttachmentOverflowMenuState, 'isOverflowing' | 'overflowButtonRef' | 'overflowCount'>;
+
+declare type AttachmentOverflowMenuContextValues = {
+    attachmentOverflowMenu: AttachmentOverflowMenuContextValue;
+};
+
+export declare const AttachmentOverflowMenuItem: ForwardRefComponent<AttachmentOverflowMenuItemProps>;
+
+export declare const attachmentOverflowMenuItemClassNames: SlotClassNames<AttachmentOverflowMenuItemSlots>;
+
+/**
+ * AttachmentOverflowMenuItem Props
+ */
+export declare type AttachmentOverflowMenuItemProps = ComponentProps<Partial<AttachmentOverflowMenuItemSlots>> & Pick<AttachmentProps, 'id' | 'media'>;
+
+export declare type AttachmentOverflowMenuItemSlots = {
+    root: NonNullable<Slot<typeof MenuItem>>;
+};
+
+/**
+ * State used in rendering AttachmentOverflowMenuItem
+ */
+export declare type AttachmentOverflowMenuItemState = ComponentState<AttachmentOverflowMenuItemSlots> & {
+    isVisible: boolean;
+};
+
+/**
+ * AttachmentOverflowMenu Props
+ */
+export declare type AttachmentOverflowMenuProps = MenuProps;
+
+export declare const AttachmentOverflowMenuProvider: Provider<AttachmentOverflowMenuContextValue> & FC<ProviderProps<AttachmentOverflowMenuContextValue>>;
+
+export declare type AttachmentOverflowMenuSlots = MenuSlots;
+
+/**
+ * State used in rendering AttachmentOverflowMenu
+ */
+export declare type AttachmentOverflowMenuState = MenuState & {
+    isOverflowing: boolean;
+    overflowButtonRef?: React.RefObject<HTMLButtonElement>;
+    overflowCount: number;
+};
+
 /**
  * Attachment Props
  */
-export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {};
+export declare type AttachmentProps = ComponentProps<Partial<AttachmentSlots>> & {
+    id: string;
+};
 
 export declare type AttachmentSlots = {
     root: NonNullable<Slot<'div'>>;
@@ -30,6 +148,10 @@ export declare type AttachmentSlots = {
  */
 export declare type AttachmentState = ComponentState<AttachmentSlots>;
 
+/**
+ * @deprecated use new Attachment component exported from @fluentui-copilot/react-attachments package instead.
+ * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).
+ */
 export declare const AttachmentTag: ForwardRefComponent<AttachmentTagProps>;
 
 export declare const attachmentTagClassNames: SlotClassNames<AttachmentTagSlots>;
@@ -39,6 +161,10 @@ export declare type AttachmentTagDismissedData = {
     media?: AttachmentTagProps['media'];
 };
 
+/**
+ * @deprecated use new AttachmentOverflowMenuItem component exported from @fluentui-copilot/react-attachments package instead.
+ * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).
+ */
 export declare const AttachmentTagItem: ForwardRefComponent<AttachmentTagItemProps>;
 
 export declare const attachmentTagItemClassNames: SlotClassNames<AttachmentTagItemSlots>;
@@ -60,6 +186,10 @@ export declare type AttachmentTagItemSlots = {
  */
 export declare type AttachmentTagItemState = ComponentState<AttachmentTagItemSlots>;
 
+/**
+ * @deprecated use new AttachmentList component exported from @fluentui-copilot/react-attachments package instead.
+ * Deprecated on 4/9/2024. Will be removed in the next minor release (0.15.0).
+ */
 export declare const AttachmentTagList: ForwardRefComponent<AttachmentTagListProps>;
 
 export declare const attachmentTagListClassNames: SlotClassNames<AttachmentTagListSlots>;
@@ -111,6 +241,29 @@ export declare type AttachmentTagState = ComponentState<AttachmentTagSlots>;
  */
 export declare const renderAttachment_unstable: (state: AttachmentState) => JSX.Element;
 
+/**
+ * Render the final JSX of AttachmentList
+ */
+export declare const renderAttachmentList_unstable: (state: AttachmentListState, contextValues: AttachmentListContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of AttachmentOverflowMenu
+ */
+export declare const renderAttachmentOverflowMenu_unstable: (state: AttachmentOverflowMenuState, contextValues: {
+    menuContextValues: MenuContextValues;
+    attachmentOverflowMenuContextValues: AttachmentOverflowMenuContextValues;
+}) => JSX.Element | null;
+
+/**
+ * Render the final JSX of AttachmentOverflowMenuButton
+ */
+export declare const renderAttachmentOverflowMenuButton_unstable: (state: AttachmentOverflowMenuButtonState) => JSX.Element | null;
+
+/**
+ * Render the final JSX of AttachmentOverflowMenuItem
+ */
+export declare const renderAttachmentOverflowMenuItem_unstable: (state: AttachmentOverflowMenuItemState) => JSX.Element | null;
+
 /**
  * Render the final JSX of AttachmentTag
  */
@@ -135,7 +288,69 @@ export declare const renderAttachmentTagList_unstable: (state: AttachmentTagList
  * @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;
+export declare const useAttachment_unstable: (props: AttachmentProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentState;
+
+/**
+ * Create the state required to render AttachmentList.
+ *
+ * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,
+ * before being passed to renderAttachmentList_unstable.
+ *
+ * @param props - props from this instance of AttachmentList
+ * @param ref - reference to root HTMLElement of AttachmentList
+ */
+export declare const useAttachmentList_unstable: (props: AttachmentListProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentListState;
+
+export declare const useAttachmentListContext_unstable: <T>(selector: ContextSelector<AttachmentListContextValue, T>) => T;
+
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */
+export declare const useAttachmentListStyles_unstable: (state: AttachmentListState) => AttachmentListState;
+
+/**
+ * Create the state required to render AttachmentOverflowMenu.
+ *
+ * The returned state can be modified with hooks such as useAttachmentOverflowMenuStyles_unstable,
+ * before being passed to renderAttachmentOverflowMenu_unstable.
+ *
+ * @param props - props from this instance of AttachmentOverflowMenu
+ */
+export declare const useAttachmentOverflowMenu_unstable: (props: AttachmentOverflowMenuProps) => AttachmentOverflowMenuState;
+
+/**
+ * Create the state required to render AttachmentOverflowMenuButton.
+ *
+ * The returned state can be modified with hooks such as useAttachmentOverflowMenuButtonStyles_unstable,
+ * before being passed to renderAttachmentOverflowMenuButton_unstable.
+ *
+ * @param props - props from this instance of AttachmentOverflowMenuButton
+ * @param ref - reference to root HTMLElement of AttachmentOverflowMenuButton
+ */
+export declare const useAttachmentOverflowMenuButton_unstable: (props: AttachmentOverflowMenuButtonProps, ref: React.Ref<HTMLButtonElement>) => AttachmentOverflowMenuButtonState;
+
+/**
+ * Apply styling to the AttachmentOverflowMenuButton slots based on the state
+ */
+export declare const useAttachmentOverflowMenuButtonStyles_unstable: (state: AttachmentOverflowMenuButtonState) => AttachmentOverflowMenuButtonState;
+
+export declare const useAttachmentOverflowMenuContext_unstable: <T>(selector: ContextSelector<AttachmentOverflowMenuContextValue, T>) => T;
+
+/**
+ * Create the state required to render AttachmentOverflowMenuItem.
+ *
+ * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,
+ * before being passed to renderAttachmentOverflowMenuItem_unstable.
+ *
+ * @param props - props from this instance of AttachmentOverflowMenuItem
+ * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem
+ */
+export declare const useAttachmentOverflowMenuItem_unstable: (props: AttachmentOverflowMenuItemProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentOverflowMenuItemState;
+
+/**
+ * Apply styling to the AttachmentList slots based on the state
+ */
+export declare const useAttachmentOverflowMenuItemStyles_unstable: (state: AttachmentOverflowMenuItemState) => AttachmentOverflowMenuItemState;
 
 /**
  * Apply styling to the Attachment slots based on the state
@@ -151,7 +366,7 @@ export declare const useAttachmentStyles_unstable: (state: AttachmentState) => A
  * @param props - props from this instance of AttachmentTag
  * @param ref - reference to root HTMLElement of AttachmentTag
  */
-export declare const useAttachmentTag_unstable: (props: AttachmentTagProps, ref: React_2.Ref<HTMLElement>) => AttachmentTagState;
+export declare const useAttachmentTag_unstable: (props: AttachmentTagProps, ref: React_2.Ref<HTMLButtonElement>) => AttachmentTagState;
 
 /**
  * Create the state required to render AttachmentTagItem.
@@ -162,7 +377,7 @@ export declare const useAttachmentTag_unstable: (props: AttachmentTagProps, ref:
  * @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;
+export declare const useAttachmentTagItem_unstable: (props: AttachmentTagItemProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentTagItemState;
 
 /**
  * Apply styling to the AttachmentTagItem slots based on the state
@@ -178,7 +393,7 @@ export declare const useAttachmentTagItemStyles_unstable: (state: AttachmentTagI
  * @param props - props from this instance of AttachmentTagList
  * @param ref - reference to root HTMLElement of AttachmentTagList
  */
-export declare const useAttachmentTagList_unstable: (props: AttachmentTagListProps, ref: React_2.Ref<HTMLElement>) => AttachmentTagListState;
+export declare const useAttachmentTagList_unstable: (props: AttachmentTagListProps, ref: React_2.Ref<HTMLDivElement>) => AttachmentTagListState;
 
 /**
  * Apply styling to the AttachmentTagList slots based on the state

package/lib/AttachmentList.js

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

package/lib/AttachmentList.js.map

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

package/lib/AttachmentOverflowMenu.js

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

package/lib/AttachmentOverflowMenu.js.map

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

package/lib/AttachmentOverflowMenuButton.js

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

package/lib/AttachmentOverflowMenuButton.js.map

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

package/lib/AttachmentOverflowMenuItem.js

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

package/lib/AttachmentOverflowMenuItem.js.map

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

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

@@ -1 +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"}
+{"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  id: string;\n};\n\n/**\n * State used in rendering Attachment\n */\nexport type AttachmentState = ComponentState<AttachmentSlots>;\n"],"names":[],"mappings":"AAAA,WAqB8D"}

package/lib/components/Attachment/useAttachment.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';
 import { Dismiss20Regular, Dismiss20Filled, bundleIcon } from '@fluentui/react-icons';
-import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentTagListContext';
+import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
 /**
  * Create the state required to render Attachment.
  *
@@ -13,9 +13,8 @@ import { useAttachmentTagListContext_unstable } from '../../contexts/attachmentT
  */
 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', {
+  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);
+  const root = slot.always(getIntrinsicElementProps('div', {
     ref,
     ...props
   }), {
@@ -30,9 +29,8 @@ export const useAttachment_unstable = (props, ref) => {
     },
     elementType: 'button'
   });
-  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentTagDismiss === null || onAttachmentTagDismiss === void 0 ? void 0 : onAttachmentTagDismiss(ev, {
-    content: props.children,
-    media: props.media
+  dismissButton.onClick = mergeCallbacks(dismissButton.onClick, ev => onAttachmentDismiss === null || onAttachmentDismiss === void 0 ? void 0 : onAttachmentDismiss(ev, {
+    id: props.id
   }));
   const media = slot.optional(props.media, {
     elementType: 'span'

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

@@ -1 +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"}
+{"version":3,"sources":["useAttachment.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-components';\nimport { Dismiss20Regular, Dismiss20Filled, bundleIcon } 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 DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);\n\n  const onAttachmentDismiss = useAttachmentListContext_unstable(context => context.onAttachmentDismiss);\n\n  const root = slot.always(\n    getIntrinsicElementProps('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>) => onAttachmentDismiss?.(ev, { id: props.id }),\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","getIntrinsicElementProps","mergeCallbacks","slot","Dismiss20Regular","Dismiss20Filled","bundleIcon","useAttachmentListContext_unstable","useAttachment_unstable","props","ref","DismissIcon","onAttachmentDismiss","context","root","always","elementType","primaryAction","dismissButton","defaultProps","onClick","ev","id","media","optional","content","children","dismissIcon","state","components","as"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,QAAQ,6BAA6B;AAC5F,SAASC,gBAAgB,EAAEC,eAAe,EAAEC,UAAU,QAAQ,wBAAwB;AACtF,SAASC,iCAAiC,QAAQ,uCAAuC;AAGzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAMC,cAAcL,WAAWD,iBAAiBD;IAEhD,MAAMQ,sBAAsBL,kCAAkCM,CAAAA,UAAWA,QAAQD,mBAAmB;IAEpG,MAAME,OAAOX,KAAKY,MAAM,CACtBd,yBAAyB,OAAO;QAC9BS;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,KAAgET,gCAAAA,0CAAAA,oBAAsBS,IAAI;YAAEC,IAAIb,MAAMa,EAAE;QAAC;IAG5G,MAAMC,QAAQpB,KAAKqB,QAAQ,CAACf,MAAMc,KAAK,EAAE;QAAEP,aAAa;IAAO;IAE/D,MAAMS,UAAUtB,KAAKY,MAAM,CAACN,MAAMgB,OAAO,EAAE;QACzCN,cAAc;YACZO,UAAUjB,MAAMiB,QAAQ;QAC1B;QACAV,aAAa;IACf;IAEA,MAAMW,cAAcxB,KAAKY,MAAM,CAACN,MAAMkB,WAAW,EAAE;QACjDR,cAAc;YACZO,wBAAU,oBAACf;QACb;QACAK,aAAa;IACf;IAEA,MAAMY,QAAyB;QAC7BC,YAAY;YACVf,MAAM;YACNG,eAAe;YACfC,eAAe;YACfK,OAAO;YACPE,SAAS;YACTE,aAAa;QACf;QAEAb;QACAG;QACAC;QACAK;QACAE;QACAE;IACF;IAEA,IAAIC,MAAMX,aAAa,CAACa,EAAE,KAAK,QAAQ;QACrCF,MAAMC,UAAU,CAACZ,aAAa,GAAG;IACnC;IAEA,OAAOW;AACT,EAAE"}

package/lib/components/Attachment/useAttachmentStyles.js

@@ -9,7 +9,7 @@ export const attachmentClassNames = {
 };
 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 useRootBaseClassName = __resetStyles("rj3sqpg", null, [".rj3sqpg{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;box-sizing:border-box;width:fit-content;}"]);
 const buttonBaseStyles = {
   alignItems: 'center',
   backgroundColor: tokens.colorNeutralBackground1,
@@ -52,7 +52,7 @@ 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 useMediaBaseClassName = __resetStyles("rz1lum2", null, [".rz1lum2{display:inline-flex;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);}"]);
 /**

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

@@ -1 +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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"}
+{"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});\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  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\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","buttonBaseStyles","alignItems","backgroundColor","colorNeutralBackground1","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","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/AttachmentList/AttachmentList.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useAttachmentList_unstable } from './useAttachmentList';
+import { renderAttachmentList_unstable } from './renderAttachmentList';
+import { useAttachmentListStyles_unstable } from './useAttachmentListStyles';
+import { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';
+export const AttachmentList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useAttachmentList_unstable(props, ref);
+  const contextValues = useAttachmentListContextValues_unstable(state);
+  useAttachmentListStyles_unstable(state);
+  return renderAttachmentList_unstable(state, contextValues);
+});
+AttachmentList.displayName = 'AttachmentList';
+//# sourceMappingURL=AttachmentList.js.map

package/lib/components/AttachmentList/AttachmentList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAttachmentList_unstable } from './useAttachmentList';\nimport { renderAttachmentList_unstable } from './renderAttachmentList';\nimport { useAttachmentListStyles_unstable } from './useAttachmentListStyles';\nimport { useAttachmentListContextValues_unstable } from './useAttachmentListContextValues';\nimport type { AttachmentListProps } from './AttachmentList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const AttachmentList: ForwardRefComponent<AttachmentListProps> = React.forwardRef((props, ref) => {\n  const state = useAttachmentList_unstable(props, ref);\n  const contextValues = useAttachmentListContextValues_unstable(state);\n\n  useAttachmentListStyles_unstable(state);\n\n  return renderAttachmentList_unstable(state, contextValues);\n});\n\nAttachmentList.displayName = 'AttachmentList';\n"],"names":["React","useAttachmentList_unstable","renderAttachmentList_unstable","useAttachmentListStyles_unstable","useAttachmentListContextValues_unstable","AttachmentList","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,uCAAuC,QAAQ,mCAAmC;AAI3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAChD,MAAME,gBAAgBN,wCAAwCK;IAE9DN,iCAAiCM;IAEjC,OAAOP,8BAA8BO,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\n\nexport type AttachmentListSlots = {\n  root: Slot<'div'>;\n};\n\nexport type AttachmentDismissedData = {\n  id: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n  onAttachmentDismiss?: (\n    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n    data: AttachmentDismissedData,\n  ) => void;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n  Pick<AttachmentListProps, 'onAttachmentDismiss'>;\n\nexport type AttachmentListContextValues = {\n  attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"mappings":"AAAA,WA6BE"}