@fluentui-copilot/react-attachments 0.0.0-nightly-20250228-0406-ff15ce53.1 → 0.0.0-nightly-20250304-0405-5635daa8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +9 -9
- package/CHANGELOG.md +7 -7
- package/dist/index.d.ts +4 -1
- package/lib/components/AttachmentList/AttachmentList.types.js.map +1 -1
- package/lib/components/AttachmentList/renderAttachmentList.js +4 -14
- package/lib/components/AttachmentList/renderAttachmentList.js.map +1 -1
- package/lib/components/AttachmentList/useAttachmentList.js +23 -5
- package/lib/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js +8 -0
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/AttachmentList.types.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/renderAttachmentList.js +4 -13
- package/lib-commonjs/components/AttachmentList/renderAttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js +22 -4
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js +8 -0
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 04 Mar 2025 04:14:20 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
7
|
+
"version": "0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-attachments",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
20
|
+
"commit": "05af28f039695a5b0e7dcafb37fc67b5977c398d"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-attachments",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
26
|
+
"commit": "05af28f039695a5b0e7dcafb37fc67b5977c398d"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-attachments",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/tokens to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/tokens to v0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
32
|
+
"commit": "05af28f039695a5b0e7dcafb37fc67b5977c398d"
|
|
33
33
|
}
|
|
34
34
|
]
|
|
35
35
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-attachments
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 04 Mar 2025 04:14:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250304-0405-5635daa8.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20250304-0405-5635daa8.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.6..@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
9
|
+
Tue, 04 Mar 2025 04:14:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.10.6..@fluentui-copilot/react-attachments_v0.0.0-nightly-20250304-0405-5635daa8.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20250304-0405-5635daa8.1 ([commit](https://github.com/microsoft/fluentai/commit/05af28f039695a5b0e7dcafb37fc67b5977c398d) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20250304-0405-5635daa8.1 ([commit](https://github.com/microsoft/fluentai/commit/05af28f039695a5b0e7dcafb37fc67b5977c398d) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-20250304-0405-5635daa8.1 ([commit](https://github.com/microsoft/fluentai/commit/05af28f039695a5b0e7dcafb37fc67b5977c398d) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.10.6](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.10.6)
|
|
20
20
|
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ import { FC } from 'react';
|
|
|
8
8
|
import type { ForwardRefComponent } from '@fluentui/react-components';
|
|
9
9
|
import type { MenuContextValues } from '@fluentui/react-components';
|
|
10
10
|
import type { MenuItem } from '@fluentui/react-components';
|
|
11
|
+
import type { MenuList } from '@fluentui/react-components';
|
|
12
|
+
import type { MenuPopover } from '@fluentui/react-components';
|
|
11
13
|
import type { MenuProps } from '@fluentui/react-components';
|
|
12
14
|
import type { MenuSlots } from '@fluentui/react-components';
|
|
13
15
|
import type { MenuState } from '@fluentui/react-components';
|
|
@@ -68,6 +70,8 @@ export declare const AttachmentListProvider: Provider<AttachmentListContextValue
|
|
|
68
70
|
|
|
69
71
|
export declare type AttachmentListSlots = {
|
|
70
72
|
root: Slot<'div'>;
|
|
73
|
+
menuList?: Slot<typeof MenuList>;
|
|
74
|
+
menuPopover?: Slot<typeof MenuPopover>;
|
|
71
75
|
/**
|
|
72
76
|
* An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.
|
|
73
77
|
* Adding a custom button for the overflow menu is supported.
|
|
@@ -79,7 +83,6 @@ export declare type AttachmentListSlots = {
|
|
|
79
83
|
* State used in rendering AttachmentList
|
|
80
84
|
*/
|
|
81
85
|
export declare type AttachmentListState = ComponentState<AttachmentListSlots> & Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {
|
|
82
|
-
attachments: AttachmentProps[];
|
|
83
86
|
shouldUseOverflow: boolean;
|
|
84
87
|
};
|
|
85
88
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n\n /**\n * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n */\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n /**\n * Callback fired when an attachment is dismissed.\n */\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /**\n * Props that will be passed to the overflow menu.\n */\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /**\n * The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n
|
|
1
|
+
{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuList, MenuPopover, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n menuList?: Slot<typeof MenuList>;\n menuPopover?: Slot<typeof MenuPopover>;\n\n /**\n * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n */\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n /**\n * Callback fired when an attachment is dismissed.\n */\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /**\n * Props that will be passed to the overflow menu.\n */\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /**\n * The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAyDA,WAEE"}
|
|
@@ -1,37 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { MenuList, MenuPopover, Overflow, assertSlots } from '@fluentui/react-components';
|
|
2
|
+
import { Overflow, assertSlots } from '@fluentui/react-components';
|
|
4
3
|
import { AttachmentListProvider } from '../../contexts/attachmentListContext';
|
|
5
4
|
import { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';
|
|
6
|
-
import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
|
|
7
5
|
/**
|
|
8
6
|
* Render the final JSX of AttachmentList
|
|
9
7
|
*/
|
|
10
8
|
export const renderAttachmentList_unstable = (state, contextValues) => {
|
|
11
9
|
assertSlots(state);
|
|
12
10
|
const {
|
|
13
|
-
attachments,
|
|
14
11
|
overflowMenuProps,
|
|
15
12
|
root,
|
|
16
13
|
shouldUseOverflow
|
|
17
14
|
} = state;
|
|
18
15
|
return /*#__PURE__*/_jsx(AttachmentListProvider, {
|
|
19
16
|
value: contextValues.attachmentList,
|
|
20
|
-
children: shouldUseOverflow && state.overflowMenuButton ? /*#__PURE__*/_jsx(Overflow, {
|
|
17
|
+
children: shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? /*#__PURE__*/_jsx(Overflow, {
|
|
21
18
|
ref: root.ref,
|
|
22
19
|
children: /*#__PURE__*/_jsxs(state.root, {
|
|
23
20
|
children: [root.children, /*#__PURE__*/_jsxs(AttachmentOverflowMenu, {
|
|
24
21
|
positioning: 'above',
|
|
25
22
|
...overflowMenuProps,
|
|
26
|
-
children: [/*#__PURE__*/_jsx(state.overflowMenuButton, {}), /*#__PURE__*/_jsx(
|
|
27
|
-
children: /*#__PURE__*/_jsx(
|
|
28
|
-
children: attachments.map(attachment => {
|
|
29
|
-
return /*#__PURE__*/_createElement(AttachmentOverflowMenuItem, {
|
|
30
|
-
...attachment,
|
|
31
|
-
key: attachment.id
|
|
32
|
-
});
|
|
33
|
-
})
|
|
34
|
-
})
|
|
23
|
+
children: [/*#__PURE__*/_jsx(state.overflowMenuButton, {}), /*#__PURE__*/_jsx(state.menuPopover, {
|
|
24
|
+
children: /*#__PURE__*/_jsx(state.menuList, {})
|
|
35
25
|
})]
|
|
36
26
|
})]
|
|
37
27
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport {
|
|
1
|
+
{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n state: AttachmentListState,\n contextValues: AttachmentListContextValues,\n) => {\n assertSlots<AttachmentListSlots>(state);\n const { overflowMenuProps, root, shouldUseOverflow } = state;\n\n return (\n <AttachmentListProvider value={contextValues.attachmentList}>\n {shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? (\n <Overflow ref={root.ref}>\n <state.root>\n {root.children}\n <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n <state.overflowMenuButton />\n <state.menuPopover>\n <state.menuList />\n </state.menuPopover>\n </AttachmentOverflowMenu>\n </state.root>\n </Overflow>\n ) : (\n <state.root />\n )}\n </AttachmentListProvider>\n );\n};\n"],"names":["Overflow","assertSlots","AttachmentListProvider","AttachmentOverflowMenu","renderAttachmentList_unstable","state","contextValues","overflowMenuProps","root","shouldUseOverflow","value","attachmentList","overflowMenuButton","menuList","menuPopover","ref","children","positioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,QAAQ,EAAEC,WAAW,QAAQ,6BAA6B;AACnE,SAASC,sBAAsB,QAAQ,uCAAuC;AAC9E,SAASC,sBAAsB,QAAQ,4BAA4B;AAGnE;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAL,YAAiCI;IACjC,MAAM,EAAEE,iBAAiB,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGJ;IAEvD,qBACE,KAACH;QAAuBQ,OAAOJ,cAAcK,cAAc;kBACxDF,qBAAqBJ,MAAMO,kBAAkB,IAAIP,MAAMQ,QAAQ,IAAIR,MAAMS,WAAW,iBACnF,KAACd;YAASe,KAAKP,KAAKO,GAAG;sBACrB,cAAA,MAACV,MAAMG,IAAI;;oBACRA,KAAKQ,QAAQ;kCACd,MAACb;wBAAuBc,aAAa;wBAAU,GAAGV,iBAAiB;;0CACjE,KAACF,MAAMO,kBAAkB;0CACzB,KAACP,MAAMS,WAAW;0CAChB,cAAA,KAACT,MAAMQ,QAAQ;;;;;;2BAMvB,KAACR,MAAMG,IAAI;;AAInB,EAAE"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
|
|
2
|
+
import { MenuList, MenuPopover, getIntrinsicElementProps, slot, useArrowNavigationGroup, useEventCallback, useFocusFinders, useMergedRefs } from '@fluentui/react-components';
|
|
3
3
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
4
|
import { useTimeout } from '@fluentui/react-utilities';
|
|
5
5
|
import { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';
|
|
6
6
|
import { useOverflowStyles } from '../Attachment';
|
|
7
7
|
import { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';
|
|
8
8
|
import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';
|
|
9
|
+
import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
|
|
9
10
|
/**
|
|
10
11
|
* Create the state required to render AttachmentList.
|
|
11
12
|
*
|
|
@@ -32,7 +33,6 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
32
33
|
findPrevFocusable,
|
|
33
34
|
findLastFocusable
|
|
34
35
|
} = useFocusFinders();
|
|
35
|
-
const [attachments, setAttachments] = React.useState([]);
|
|
36
36
|
const handleAttachmentDismiss = useEventCallback((e, data) => {
|
|
37
37
|
var _innerRef_current;
|
|
38
38
|
if (!onAttachmentDismiss) {
|
|
@@ -77,10 +77,16 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
77
77
|
maxVisibleItems: maxVisibleAttachments,
|
|
78
78
|
overflowClassName: styles.overflow
|
|
79
79
|
});
|
|
80
|
-
React.
|
|
80
|
+
const attachmentOverflowMenuItems = React.useMemo(() => {
|
|
81
81
|
if (resolvedChildren && Array.isArray(resolvedChildren)) {
|
|
82
|
-
|
|
82
|
+
return resolvedChildren.filter(child => /*#__PURE__*/React.isValidElement(child)).map(child => child.props).map(attachment => {
|
|
83
|
+
return /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, {
|
|
84
|
+
...attachment,
|
|
85
|
+
key: attachment.id
|
|
86
|
+
});
|
|
87
|
+
});
|
|
83
88
|
}
|
|
89
|
+
return [];
|
|
84
90
|
}, [resolvedChildren]);
|
|
85
91
|
const arrowNavigationProps = useArrowNavigationGroup({
|
|
86
92
|
circular: true,
|
|
@@ -89,12 +95,13 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
89
95
|
});
|
|
90
96
|
const shouldUseOverflow = maxVisibleAttachments !== undefined;
|
|
91
97
|
return {
|
|
92
|
-
attachments,
|
|
93
98
|
onAttachmentDismiss: handleAttachmentDismiss,
|
|
94
99
|
shouldUseOverflow,
|
|
95
100
|
overflowMenuProps,
|
|
96
101
|
components: {
|
|
97
102
|
root: 'div',
|
|
103
|
+
menuList: MenuList,
|
|
104
|
+
menuPopover: MenuPopover,
|
|
98
105
|
overflowMenuButton: 'span'
|
|
99
106
|
},
|
|
100
107
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
@@ -107,6 +114,17 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
107
114
|
}), {
|
|
108
115
|
elementType: 'div'
|
|
109
116
|
}),
|
|
117
|
+
menuList: slot.optional(props.menuList, {
|
|
118
|
+
defaultProps: {
|
|
119
|
+
children: attachmentOverflowMenuItems
|
|
120
|
+
},
|
|
121
|
+
elementType: MenuList,
|
|
122
|
+
renderByDefault: true
|
|
123
|
+
}),
|
|
124
|
+
menuPopover: slot.optional(props.menuPopover, {
|
|
125
|
+
elementType: MenuPopover,
|
|
126
|
+
renderByDefault: true
|
|
127
|
+
}),
|
|
110
128
|
overflowMenuButton: slot.optional(props.overflowMenuButton, {
|
|
111
129
|
defaultProps: {
|
|
112
130
|
children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuButton, null)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles
|
|
1
|
+
{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuList,\n MenuPopover,\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n const attachmentOverflowMenuItems = React.useMemo(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n return resolvedChildren\n .filter(child => React.isValidElement(child))\n .map(child => (child as React.ReactElement).props)\n .map(attachment => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n });\n }\n return [];\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n menuList: MenuList,\n menuPopover: MenuPopover,\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n menuList: slot.optional(props.menuList, {\n defaultProps: { children: attachmentOverflowMenuItems },\n elementType: MenuList,\n renderByDefault: true,\n }),\n menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["React","MenuList","MenuPopover","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","AttachmentOverflowMenuItem","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","attachmentOverflowMenuItems","useMemo","Array","isArray","filter","child","isValidElement","map","attachment","key","id","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","menuList","menuPopover","overflowMenuButton","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
|
|
2
2
|
export const attachmentListClassNames = {
|
|
3
3
|
root: 'fai-AttachmentList',
|
|
4
|
+
menuList: 'fai-AttachmentList__menuList',
|
|
5
|
+
menuPopover: 'fai-AttachmentList__menuPopover',
|
|
4
6
|
overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
|
|
5
7
|
};
|
|
6
8
|
const useRootBaseClassName = __resetStyles("r168fwfa", null, [".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"]);
|
|
@@ -14,6 +16,12 @@ export const useAttachmentListStyles_unstable = state => {
|
|
|
14
16
|
const rootBaseClassName = useRootBaseClassName();
|
|
15
17
|
const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
|
|
16
18
|
state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);
|
|
19
|
+
if (state.menuList) {
|
|
20
|
+
state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);
|
|
21
|
+
}
|
|
22
|
+
if (state.menuPopover) {
|
|
23
|
+
state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);
|
|
24
|
+
}
|
|
17
25
|
if (state.overflowMenuButton) {
|
|
18
26
|
state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
|
|
19
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","className"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","attachmentListClassNames","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","columnGap","spacingHorizontalSNudge","display","flexDirection","flexShrink","flexWrap","rowGap","spacingVerticalXS","useOverflowMenuButtonBaseClassName","useAttachmentListStyles_unstable","state","rootBaseClassName","overflowMenuButtonClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,UAAU;IACVC,aAAa;IACbC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBR,gBAAgB;IAC3CS,WAAWP,OAAOQ,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQb,OAAOc,iBAAiB;AAClC;AAEA,MAAMC,qCAAqCjB,gBAAgB;IACzDW,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,MAAMO,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBZ;IAC1B,MAAMa,8BAA8BJ;IAEpCE,MAAMf,IAAI,CAACkB,SAAS,GAAGrB,aAAaE,yBAAyBC,IAAI,EAAEgB,mBAAmBD,MAAMf,IAAI,CAACkB,SAAS;IAE1G,IAAIH,MAAMd,QAAQ,EAAE;QAClBc,MAAMd,QAAQ,CAACiB,SAAS,GAAGrB,aAAaE,yBAAyBE,QAAQ,EAAEc,MAAMd,QAAQ,CAACiB,SAAS;IACrG;IACA,IAAIH,MAAMb,WAAW,EAAE;QACrBa,MAAMb,WAAW,CAACgB,SAAS,GAAGrB,aAAaE,yBAAyBG,WAAW,EAAEa,MAAMb,WAAW,CAACgB,SAAS;IAC9G;IAEA,IAAIH,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACe,SAAS,GAAGrB,aACnCE,yBAAyBI,kBAAkB,EAC3Cc,6BACAF,MAAMZ,kBAAkB,CAACe,SAAS;IAEtC;IAEA,OAAOH;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n\n /**\n * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n */\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n /**\n * Callback fired when an attachment is dismissed.\n */\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /**\n * Props that will be passed to the overflow menu.\n */\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /**\n * The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n
|
|
1
|
+
{"version":3,"sources":["AttachmentList.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, MenuList, MenuPopover, Slot } from '@fluentui/react-components';\nimport type { AttachmentListContextValue } from '../../contexts/attachmentListContext';\nimport type { AttachmentProps } from '../Attachment';\nimport type { AttachmentOverflowMenuProps } from '../AttachmentOverflowMenu';\n\nexport type AttachmentListSlots = {\n root: Slot<'div'>;\n menuList?: Slot<typeof MenuList>;\n menuPopover?: Slot<typeof MenuPopover>;\n\n /**\n * An AttachmentList has an overflow menu when `maxVisibleAttachments` is exceeded.\n * Adding a custom button for the overflow menu is supported.\n */\n overflowMenuButton: Slot<'span'>;\n};\n\nexport type AttachmentDismissedData = {\n content?: AttachmentProps['children'];\n media?: AttachmentProps['media'];\n id?: string;\n};\n\n/**\n * AttachmentList Props\n */\nexport type AttachmentListProps = ComponentProps<Partial<AttachmentListSlots>> & {\n /**\n * Callback fired when an attachment is dismissed.\n */\n onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n\n /**\n * Props that will be passed to the overflow menu.\n */\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\n\n /**\n * The maximum number of attachments to display before the overflow button is shown even if there is\n * enough space available to show more.\n * If not set, the overflow functionality will be disabled.\n * @default undefined\n */\n maxVisibleAttachments?: number;\n};\n\n/**\n * State used in rendering AttachmentList\n */\nexport type AttachmentListState = ComponentState<AttachmentListSlots> &\n Pick<AttachmentListProps, 'onAttachmentDismiss' | 'overflowMenuProps'> & {\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -9,17 +9,15 @@ Object.defineProperty(exports, "renderAttachmentList_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
|
-
const _reactjsxruntime = require("@fluentui/react-jsx-runtime");
|
|
13
12
|
const _reactcomponents = require("@fluentui/react-components");
|
|
14
13
|
const _attachmentListContext = require("../../contexts/attachmentListContext");
|
|
15
14
|
const _AttachmentOverflowMenu = require("../AttachmentOverflowMenu");
|
|
16
|
-
const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
|
|
17
15
|
const renderAttachmentList_unstable = (state, contextValues)=>{
|
|
18
16
|
(0, _reactcomponents.assertSlots)(state);
|
|
19
|
-
const {
|
|
17
|
+
const { overflowMenuProps, root, shouldUseOverflow } = state;
|
|
20
18
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_attachmentListContext.AttachmentListProvider, {
|
|
21
19
|
value: contextValues.attachmentList,
|
|
22
|
-
children: shouldUseOverflow && state.overflowMenuButton ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
|
|
20
|
+
children: shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
|
|
23
21
|
ref: root.ref,
|
|
24
22
|
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
|
25
23
|
children: [
|
|
@@ -29,15 +27,8 @@ const renderAttachmentList_unstable = (state, contextValues)=>{
|
|
|
29
27
|
...overflowMenuProps,
|
|
30
28
|
children: [
|
|
31
29
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.overflowMenuButton, {}),
|
|
32
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
33
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
34
|
-
children: attachments.map((attachment)=>{
|
|
35
|
-
return /*#__PURE__*/ (0, _reactjsxruntime.createElement)(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, {
|
|
36
|
-
...attachment,
|
|
37
|
-
key: attachment.id
|
|
38
|
-
});
|
|
39
|
-
})
|
|
40
|
-
})
|
|
30
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuPopover, {
|
|
31
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.menuList, {})
|
|
41
32
|
})
|
|
42
33
|
]
|
|
43
34
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport {
|
|
1
|
+
{"version":3,"sources":["renderAttachmentList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport { AttachmentListProvider } from '../../contexts/attachmentListContext';\nimport { AttachmentOverflowMenu } from '../AttachmentOverflowMenu';\nimport type { AttachmentListState, AttachmentListSlots, AttachmentListContextValues } from './AttachmentList.types';\n\n/**\n * Render the final JSX of AttachmentList\n */\nexport const renderAttachmentList_unstable = (\n state: AttachmentListState,\n contextValues: AttachmentListContextValues,\n) => {\n assertSlots<AttachmentListSlots>(state);\n const { overflowMenuProps, root, shouldUseOverflow } = state;\n\n return (\n <AttachmentListProvider value={contextValues.attachmentList}>\n {shouldUseOverflow && state.overflowMenuButton && state.menuList && state.menuPopover ? (\n <Overflow ref={root.ref}>\n <state.root>\n {root.children}\n <AttachmentOverflowMenu positioning={'above'} {...overflowMenuProps}>\n <state.overflowMenuButton />\n <state.menuPopover>\n <state.menuList />\n </state.menuPopover>\n </AttachmentOverflowMenu>\n </state.root>\n </Overflow>\n ) : (\n <state.root />\n )}\n </AttachmentListProvider>\n );\n};\n"],"names":["assertSlots","state","overflowMenuProps","contextValues","root","children","AttachmentOverflowMenu","overflowMenuButton","menuList","_jsx","menuPopover"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeEA;;;eAAAA;;;4BAdF;iCAEsC;uCACC;wCACA;AAUrCA,MAAAA,gCAAiCC,CAAAA,OAAAA;oCACzBC,EAAAA;UAER,mBACiCC,yBAEZC;;6BAELC,cAAQ;uCACdJ,MAACK,kBAAAA,IAAAA,MAAAA,QAAAA,IAAAA,MAAAA,WAAAA,GAAAA,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,yBAAAA,EAAAA;;iCAAiDJ,GAAAA,IAAAA,gBAAAA,EAAAA,MAAAA,IAAiB,EAAA;;;;;;;qEAG/DK,kBAACN,EAAAA,CAAAA;4BAAMO,WAAQ,GAAAC,IAAAA,eAAA,EAAAR,MAAAS,WAAA,EAAA;;;;;;;;;GAU/B,gDAAE"}
|
|
@@ -17,13 +17,13 @@ const _reactutilities1 = require("@fluentui-copilot/react-utilities");
|
|
|
17
17
|
const _Attachment = require("../Attachment");
|
|
18
18
|
const _AttachmentOverflowMenuButton = require("../AttachmentOverflowMenuButton");
|
|
19
19
|
const _useAttachmentOverflowMenuButtonStylesstyles = require("../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles");
|
|
20
|
+
const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
|
|
20
21
|
const useAttachmentList_unstable = (props, ref)=>{
|
|
21
22
|
const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;
|
|
22
23
|
const innerRef = _react.useRef(null);
|
|
23
24
|
const [setTimeout] = (0, _reactutilities.useTimeout)();
|
|
24
25
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
25
26
|
const { findNextFocusable, findPrevFocusable, findLastFocusable } = (0, _reactcomponents.useFocusFinders)();
|
|
26
|
-
const [attachments, setAttachments] = _react.useState([]);
|
|
27
27
|
const handleAttachmentDismiss = (0, _reactcomponents.useEventCallback)((e, data)=>{
|
|
28
28
|
var _innerRef_current;
|
|
29
29
|
if (!onAttachmentDismiss) {
|
|
@@ -68,10 +68,16 @@ const useAttachmentList_unstable = (props, ref)=>{
|
|
|
68
68
|
maxVisibleItems: maxVisibleAttachments,
|
|
69
69
|
overflowClassName: styles.overflow
|
|
70
70
|
});
|
|
71
|
-
_react.
|
|
71
|
+
const attachmentOverflowMenuItems = _react.useMemo(()=>{
|
|
72
72
|
if (resolvedChildren && Array.isArray(resolvedChildren)) {
|
|
73
|
-
|
|
73
|
+
return resolvedChildren.filter((child)=>/*#__PURE__*/ _react.isValidElement(child)).map((child)=>child.props).map((attachment)=>{
|
|
74
|
+
return /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, {
|
|
75
|
+
...attachment,
|
|
76
|
+
key: attachment.id
|
|
77
|
+
});
|
|
78
|
+
});
|
|
74
79
|
}
|
|
80
|
+
return [];
|
|
75
81
|
}, [
|
|
76
82
|
resolvedChildren
|
|
77
83
|
]);
|
|
@@ -82,12 +88,13 @@ const useAttachmentList_unstable = (props, ref)=>{
|
|
|
82
88
|
});
|
|
83
89
|
const shouldUseOverflow = maxVisibleAttachments !== undefined;
|
|
84
90
|
return {
|
|
85
|
-
attachments,
|
|
86
91
|
onAttachmentDismiss: handleAttachmentDismiss,
|
|
87
92
|
shouldUseOverflow,
|
|
88
93
|
overflowMenuProps,
|
|
89
94
|
components: {
|
|
90
95
|
root: 'div',
|
|
96
|
+
menuList: _reactcomponents.MenuList,
|
|
97
|
+
menuPopover: _reactcomponents.MenuPopover,
|
|
91
98
|
overflowMenuButton: 'span'
|
|
92
99
|
},
|
|
93
100
|
root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
|
|
@@ -100,6 +107,17 @@ const useAttachmentList_unstable = (props, ref)=>{
|
|
|
100
107
|
}), {
|
|
101
108
|
elementType: 'div'
|
|
102
109
|
}),
|
|
110
|
+
menuList: _reactcomponents.slot.optional(props.menuList, {
|
|
111
|
+
defaultProps: {
|
|
112
|
+
children: attachmentOverflowMenuItems
|
|
113
|
+
},
|
|
114
|
+
elementType: _reactcomponents.MenuList,
|
|
115
|
+
renderByDefault: true
|
|
116
|
+
}),
|
|
117
|
+
menuPopover: _reactcomponents.slot.optional(props.menuPopover, {
|
|
118
|
+
elementType: _reactcomponents.MenuPopover,
|
|
119
|
+
renderByDefault: true
|
|
120
|
+
}),
|
|
103
121
|
overflowMenuButton: _reactcomponents.slot.optional(props.overflowMenuButton, {
|
|
104
122
|
defaultProps: {
|
|
105
123
|
children: /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuButton.AttachmentOverflowMenuButton, null)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles
|
|
1
|
+
{"version":3,"sources":["useAttachmentList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuList,\n MenuPopover,\n getIntrinsicElementProps,\n slot,\n useArrowNavigationGroup,\n useEventCallback,\n useFocusFinders,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useOverflowStyles } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\nimport { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\n\n/**\n * Create the state required to render AttachmentList.\n *\n * The returned state can be modified with hooks such as useAttachmentListStyles_unstable,\n * before being passed to renderAttachmentList_unstable.\n *\n * @param props - props from this instance of AttachmentList\n * @param ref - reference to root HTMLElement of AttachmentList\n */\nexport const useAttachmentList_unstable = (\n props: AttachmentListProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentListState => {\n const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;\n const innerRef = React.useRef<HTMLDivElement>(null);\n const [setTimeout] = useTimeout();\n const { targetDocument } = useFluent();\n const { findNextFocusable, findPrevFocusable, findLastFocusable } = useFocusFinders();\n const handleAttachmentDismiss: AttachmentListState['onAttachmentDismiss'] = useEventCallback((e, data) => {\n if (!onAttachmentDismiss) {\n return;\n }\n\n onAttachmentDismiss(e, data);\n\n // set focus after attachment dismiss\n const activeElement = targetDocument?.activeElement;\n if (innerRef.current?.contains(activeElement as HTMLElement)) {\n // focus on next attachment only if the active element is within the current attachment list\n const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n if (next) {\n // focus on the overflow button if the next focusable element is the overflow button.\n // if overflow button is removed from the DOM, focus on the last focusable element in the attachment list.\n if (next.classList.contains(attachmentOverflowMenuButtonClassNames.root)) {\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n } else {\n next.focus();\n }\n } else {\n const prev = findPrevFocusable(activeElement?.parentElement as HTMLElement, { container: innerRef.current });\n prev?.focus();\n }\n } else {\n // Handles keyboard focus when attachment removed is in the overflow menu. Also handles focus when the overflow button is removed from the DOM.\n setTimeout(() => {\n findLastFocusable(innerRef.current as HTMLElement)?.focus();\n }, 0);\n }\n });\n\n const styles = useOverflowStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n children,\n maxVisibleItems: maxVisibleAttachments,\n overflowClassName: styles.overflow,\n });\n\n const attachmentOverflowMenuItems = React.useMemo(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n return resolvedChildren\n .filter(child => React.isValidElement(child))\n .map(child => (child as React.ReactElement).props)\n .map(attachment => {\n return <AttachmentOverflowMenuItem {...attachment} key={attachment.id} />;\n });\n }\n return [];\n }, [resolvedChildren]);\n\n const arrowNavigationProps = useArrowNavigationGroup({\n circular: true,\n axis: 'both',\n memorizeCurrent: true,\n });\n\n const shouldUseOverflow = maxVisibleAttachments !== undefined;\n\n return {\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\n menuList: MenuList,\n menuPopover: MenuPopover,\n overflowMenuButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n 'aria-label': 'Attachments',\n ref: useMergedRefs(ref, innerRef),\n role: 'toolbar',\n ...arrowNavigationProps,\n ...props,\n children: resolvedChildren,\n }),\n { elementType: 'div' },\n ),\n menuList: slot.optional(props.menuList, {\n defaultProps: { children: attachmentOverflowMenuItems },\n elementType: MenuList,\n renderByDefault: true,\n }),\n menuPopover: slot.optional(props.menuPopover, { elementType: MenuPopover, renderByDefault: true }),\n overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["children","maxVisibleAttachments","props","onAttachmentDismiss","setTimeout","targetDocument","findNextFocusable","overflowMenuProps","handleAttachmentDismiss","innerRef","useTimeout","next","container","useEventCallback","e","data","findLastFocusable","current","_innerRef_current","contains","activeElement","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","attachmentOverflowMenuItems","resolvedChildren","child","React","isValidElement","attachment","useOverflowMaxVisibleItems","overflow","useMemo","arrowNavigationProps","useArrowNavigationGroup","circular","filter","map","axis","createElement","AttachmentOverflowMenuItem","memorizeCurrent","key","id","shouldUseOverflow","components","menuPopover","undefined","MenuPopover","menuList","slot","defaultProps","MenuList","renderByDefault","elementType","optional","overflowMenuButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiCUA;;;eAAAA;;;;iEAjCa;iCAUhB;qCACyC;gCACrB;iCACgB;4BACT;8CACW;6DACU;4CACZ;AAgBzC,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EACRF,mBAAQG,EACRC,iBAAMC;UACJC,WAAKN,OAAAA,MAAAA,CAAAA;sBACH,GAAAO,IAAAA,0BAAA;UACF,gBAEAP,gDAEA;UACA,mBACIM,mBACF,mBACME,yCAAyDC;oCAA4BC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEX,GAAAA;6CACEY;8BAAAA,mBAAAA,QAAAA,mBAAkBP,KAASQ,IAAO,KAAA,IAAAZ,eAAlCW,aAAAA;iCACCP,SAAAQ,OAAA,MAAA,QAAAC,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAC,gBAAA;wGACE;2CACKA,eAAA;2BACZX,SAAAQ,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GI,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAP,kBAAAP,SAAAQ,OAAA,CAAA,MAAA,QAAAM,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEY;;mBAEJ;gBACF,MAAAK,OAAAI,kBAAAL,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAM,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAzB,WAAM0B;gBACJ,IAAIC;sCACKA,kBACGC,SAAAA,OAAAA,CAAAA,MAASC,QAAMC,uBAClBF,KAAAA,IAAUA,KAA6B9B,IAAKqB,mBAC5CY,KAAAA;;;;;6BAELC,IAAAA,2CAAA,EAAA;;yBAEKnC;QACX4B,mBAAGF,OAAAU,QAAA;;UAAkBP,8BAAAG,OAAAK,OAAA,CAAA;QAErB,IAAAP,oBAAMQ,MAAuBC,OAAAA,CAAAA,mBAAwB;mBACnDC,iBAAUC,MAAA,CAAAV,CAAAA,QAAA,WAAA,GAAAC,OAAAC,cAAA,CAAAF,QAAAW,GAAA,CAAAX,CAAAA,QAAAA,MAAA9B,KAAA,EAAAyC,GAAA,CAAAR,CAAAA;gBACVS,OAAM,WAAA,GAAAX,OAAAY,aAAA,CAAAC,sDAAA,EAAA;oBACNC,GAAAA,UAAAA;oBACFC,KAAAb,WAAAc,EAAA;gBAEA;YAEA;;eAEEC,EAAAA;;;KACA3C;UACA4C,uBAAYX,IAAAA,wCAAA,EAAA;kBACVlB;;yBAEA8B;;UAEFF,oBAAAjD,0BAAAoD;WACA/B;6BAEId;;;oBAGG+B;kBACH;sBACAvC,yBAAU+B;yBAEZuB,4BAAA;gCAAe;;cAEjBC,qBAAAA,CAAAA,MAAUC,CAAAA,IAAAA,yCAA4B,EAAA,OAAE;0BACtCC;mDAAgBzD,EAAAA,KAAU8B;kBAA4B;mCACzC4B;oBACbC;sBACF5B;YACAqB;yBAAgDQ;;kBAAgDJ,qBAAA,CAAAK,QAAA,CAAA3D,MAAAqD,QAAA,EAAA;0BAChGO;0BACEL;;yBAA2DC,yBAAA;6BAC3DE;;qBAEFJ,qBAAA,CAAAK,QAAA,CAAA3D,MAAAkD,WAAA,EAAA;YACFQ,aAAAN,4BAAA;YACAK,iBAAA"}
|
|
@@ -19,6 +19,8 @@ _export(exports, {
|
|
|
19
19
|
const _reactcomponents = require("@fluentui/react-components");
|
|
20
20
|
const attachmentListClassNames = {
|
|
21
21
|
root: 'fai-AttachmentList',
|
|
22
|
+
menuList: 'fai-AttachmentList__menuList',
|
|
23
|
+
menuPopover: 'fai-AttachmentList__menuPopover',
|
|
22
24
|
overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
|
|
23
25
|
};
|
|
24
26
|
const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", null, [
|
|
@@ -32,6 +34,12 @@ const useAttachmentListStyles_unstable = (state)=>{
|
|
|
32
34
|
const rootBaseClassName = useRootBaseClassName();
|
|
33
35
|
const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();
|
|
34
36
|
state.root.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.root, rootBaseClassName, state.root.className);
|
|
37
|
+
if (state.menuList) {
|
|
38
|
+
state.menuList.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuList, state.menuList.className);
|
|
39
|
+
}
|
|
40
|
+
if (state.menuPopover) {
|
|
41
|
+
state.menuPopover.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.menuPopover, state.menuPopover.className);
|
|
42
|
+
}
|
|
35
43
|
if (state.overflowMenuButton) {
|
|
36
44
|
state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
|
|
37
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["attachmentListClassNames","flexWrap","root","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["useAttachmentListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\nimport type { AttachmentListSlots, AttachmentListState } from './AttachmentList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const attachmentListClassNames: SlotClassNames<AttachmentListSlots> = {\n root: 'fai-AttachmentList',\n menuList: 'fai-AttachmentList__menuList',\n menuPopover: 'fai-AttachmentList__menuPopover',\n overflowMenuButton: 'fai-AttachmentList__overflowMenuButton',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n columnGap: tokens.spacingHorizontalSNudge,\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'wrap',\n rowGap: tokens.spacingVerticalXS,\n});\n\nconst useOverflowMenuButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n});\n\n/**\n * Apply styling to the AttachmentList slots based on the state\n */\nexport const useAttachmentListStyles_unstable = (state: AttachmentListState): AttachmentListState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const overflowMenuButtonClassName = useOverflowMenuButtonBaseClassName();\n\n state.root.className = mergeClasses(attachmentListClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.menuList) {\n state.menuList.className = mergeClasses(attachmentListClassNames.menuList, state.menuList.className);\n }\n if (state.menuPopover) {\n state.menuPopover.className = mergeClasses(attachmentListClassNames.menuPopover, state.menuPopover.className);\n }\n\n if (state.overflowMenuButton) {\n state.overflowMenuButton.className = mergeClasses(\n attachmentListClassNames.overflowMenuButton,\n overflowMenuButtonClassName,\n state.overflowMenuButton.className,\n );\n }\n\n return state;\n};\n"],"names":["attachmentListClassNames","flexWrap","root","menuList","menuPopover","overflowMenuButton","useRootBaseClassName","makeResetStyles","columnGap","spacingHorizontalSNudge","state","useOverflowMenuButtonBaseClassName","display","className","mergeClasses","rootBaseClassName","overflowMenuButtonClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAYXC,gCAAU;eAAVA;;;iCAhB4C;AAIvC,MAAMD,2BAAgE;UAC3EE;cACAC;iBACAC;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;AAIzCR,MAAAA,mCAAUS,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,MAAAR,IAAA,CAAAW,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAE,IAAA,EAAAa,mBAAAL,MAAAR,IAAA,CAAAW,SAAA;IAEA,IAAAH,MAAAP,QAAA,EAAA;;IAEC;QAECO,MAAAN,WAAA,EAAA;QAEAM,MAAMK,WAAAA,CAAAA,SAAoBT,GAAAA,IAAAA,6BAAAA,EAAAA,yBAAAA,WAAAA,EAAAA,MAAAA,WAAAA,CAAAA,SAAAA;;QAG1BI,MAAMR,kBAAiBY,EAAAA;QAEvBJ,MAAIA,kBAAgB,CAAAG,SAAA,GAAAC,IAAAA,6BAAA,EAAAd,yBAAAK,kBAAA,EAAAW,6BAAAN,MAAAL,kBAAA,CAAAQ,SAAA;;WAEpBH;6DAE6CV"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
4
4
|
"description": "A set of components related to attaching files in Copilot experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-utilities": "0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/tokens": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
16
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
17
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20250304-0405-5635daa8.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|