@fluentui-copilot/react-attachments 0.0.0-nightly-20240812-0407-f0d7d2a8.1 → 0.0.0-nightly-20240816-0407-4f31c87a.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 +0 -1
- package/lib/components/AttachmentList/AttachmentList.types.js.map +1 -1
- package/lib/components/AttachmentList/useAttachmentList.js +1 -10
- package/lib/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js +1 -5
- package/lib/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +2 -3
- package/lib/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/AttachmentList.types.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js +1 -10
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js +1 -5
- package/lib-commonjs/components/AttachmentList/useAttachmentListStyles.styles.js.map +1 -1
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js +1 -2
- package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map +1 -1
- package/package.json +5 -5
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": "Fri, 16 Aug 2024 04:14:15 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-attachments_v0.0.0-nightly-20240816-0407-4f31c87a.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240816-0407-4f31c87a.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-20240816-0407-4f31c87a.1",
|
|
20
|
+
"commit": "52bc7571c6ef0aff09d0e248505c586bc311a06d"
|
|
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-20240816-0407-4f31c87a.1",
|
|
26
|
+
"commit": "52bc7571c6ef0aff09d0e248505c586bc311a06d"
|
|
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-20240816-0407-4f31c87a.1",
|
|
32
|
+
"commit": "52bc7571c6ef0aff09d0e248505c586bc311a06d"
|
|
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 Fri, 16 Aug 2024 04:14:15 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-20240816-0407-4f31c87a.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.0.0-nightly-20240816-0407-4f31c87a.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.7..@fluentui-copilot/react-attachments_v0.0.0-nightly-
|
|
9
|
+
Fri, 16 Aug 2024 04:14:15 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.9.7..@fluentui-copilot/react-attachments_v0.0.0-nightly-20240816-0407-4f31c87a.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-20240816-0407-4f31c87a.1 ([commit](https://github.com/microsoft/fluentai/commit/52bc7571c6ef0aff09d0e248505c586bc311a06d) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240816-0407-4f31c87a.1 ([commit](https://github.com/microsoft/fluentai/commit/52bc7571c6ef0aff09d0e248505c586bc311a06d) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/tokens to v0.0.0-nightly-20240816-0407-4f31c87a.1 ([commit](https://github.com/microsoft/fluentai/commit/52bc7571c6ef0aff09d0e248505c586bc311a06d) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.9.7](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.9.7)
|
|
20
20
|
|
package/dist/index.d.ts
CHANGED
|
@@ -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 overflowMenuButton: Slot<'span'>;\n
|
|
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 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 onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\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 attachments: AttachmentProps[];\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA2CA,WAEE"}
|
|
@@ -5,7 +5,6 @@ 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
|
-
import { AttachmentOverflowMenuItem } from '../AttachmentOverflowMenuItem';
|
|
9
8
|
import { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';
|
|
10
9
|
/**
|
|
11
10
|
* Create the state required to render AttachmentList.
|
|
@@ -96,8 +95,7 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
96
95
|
overflowMenuProps,
|
|
97
96
|
components: {
|
|
98
97
|
root: 'div',
|
|
99
|
-
overflowMenuButton: 'span'
|
|
100
|
-
overflowMenuItem: 'span'
|
|
98
|
+
overflowMenuButton: 'span'
|
|
101
99
|
},
|
|
102
100
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
103
101
|
'aria-label': 'Attachments',
|
|
@@ -115,13 +113,6 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
115
113
|
},
|
|
116
114
|
elementType: 'span',
|
|
117
115
|
renderByDefault: true
|
|
118
|
-
}),
|
|
119
|
-
overflowMenuItem: slot.optional(props.overflowMenuItem, {
|
|
120
|
-
defaultProps: {
|
|
121
|
-
children: /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, null)
|
|
122
|
-
},
|
|
123
|
-
elementType: 'span',
|
|
124
|
-
renderByDefault: true
|
|
125
116
|
})
|
|
126
117
|
};
|
|
127
118
|
};
|
|
@@ -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, type AttachmentProps } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport {
|
|
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, type AttachmentProps } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\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 [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\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 React.useEffect(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n setAttachments(\n resolvedChildren.filter(child => React.isValidElement(child)).map(child => (child as React.ReactElement).props),\n );\n }\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 attachments,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\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 overflowMenuButton: slot.optional(props.overflowMenuButton, {\n defaultProps: { children: <AttachmentOverflowMenuButton /> },\n elementType: 'span',\n renderByDefault: true,\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useArrowNavigationGroup","useEventCallback","useFocusFinders","useMergedRefs","useFluent_unstable","useFluent","useTimeout","useOverflowMaxVisibleItems","useOverflowStyles","AttachmentOverflowMenuButton","attachmentOverflowMenuButtonClassNames","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","findNextFocusable","findPrevFocusable","findLastFocusable","attachments","setAttachments","useState","handleAttachmentDismiss","e","data","activeElement","current","contains","next","container","classList","root","focus","prev","parentElement","styles","resolvedChildren","maxVisibleItems","overflowClassName","overflow","useEffect","Array","isArray","filter","child","isValidElement","map","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","overflowMenuButton","always","role","elementType","optional","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,IAAI,EACJC,uBAAuB,EACvBC,gBAAgB,EAChBC,eAAe,EACfC,aAAa,QACR,6BAA6B;AACpC,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,0BAA0B,QAAQ,oCAAoC;AAC/E,SAASC,iBAAiB,QAA8B,gBAAgB;AACxE,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,sCAAsC,QAAQ,+EAA+E;AAGtI;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,qBAAqB,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAE,GAAGL;IACpF,MAAMM,WAAWrB,MAAMsB,MAAM,CAAiB;IAC9C,MAAM,CAACC,WAAW,GAAGd;IACrB,MAAM,EAAEe,cAAc,EAAE,GAAGhB;IAC3B,MAAM,EAAEiB,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAE,GAAGtB;IACpE,MAAM,CAACuB,aAAaC,eAAe,GAAG7B,MAAM8B,QAAQ,CAAoB,EAAE;IAC1E,MAAMC,0BAAsE3B,iBAAiB,CAAC4B,GAAGC;YAS3FZ;QARJ,IAAI,CAACF,qBAAqB;YACxB;QACF;QAEAA,oBAAoBa,GAAGC;QAEvB,qCAAqC;QACrC,MAAMC,gBAAgBV,2BAAAA,qCAAAA,eAAgBU,aAAa;QACnD,KAAIb,oBAAAA,SAASc,OAAO,cAAhBd,wCAAAA,kBAAkBe,QAAQ,CAACF,gBAA+B;YAC5D,4FAA4F;YAC5F,MAAMG,OAAOZ,kBAAkBS,eAA8B;gBAAEI,WAAWjB,SAASc,OAAO;YAAC;YAC3F,IAAIE,MAAM;gBACR,qFAAqF;gBACrF,0GAA0G;gBAC1G,IAAIA,KAAKE,SAAS,CAACH,QAAQ,CAACvB,uCAAuC2B,IAAI,GAAG;oBACxEjB,WAAW;4BACTI;yBAAAA,qBAAAA,kBAAkBN,SAASc,OAAO,eAAlCR,yCAAAA,mBAAoDc,KAAK;oBAC3D,GAAG;gBACL,OAAO;oBACLJ,KAAKI,KAAK;gBACZ;YACF,OAAO;gBACL,MAAMC,OAAOhB,kBAAkBQ,0BAAAA,oCAAAA,cAAeS,aAAa,EAAiB;oBAAEL,WAAWjB,SAASc,OAAO;gBAAC;gBAC1GO,iBAAAA,2BAAAA,KAAMD,KAAK;YACb;QACF,OAAO;YACL,+IAA+I;YAC/IlB,WAAW;oBACTI;iBAAAA,qBAAAA,kBAAkBN,SAASc,OAAO,eAAlCR,yCAAAA,mBAAoDc,KAAK;YAC3D,GAAG;QACL;IACF;IAEA,MAAMG,SAASjC;IACf,MAAMkC,mBAAmBnC,2BAA2B;QAClDO;QACA6B,iBAAiB5B;QACjB6B,mBAAmBH,OAAOI,QAAQ;IACpC;IAEAhD,MAAMiD,SAAS,CAAC;QACd,IAAIJ,oBAAoBK,MAAMC,OAAO,CAACN,mBAAmB;YACvDhB,eACEgB,iBAAiBO,MAAM,CAACC,CAAAA,sBAASrD,MAAMsD,cAAc,CAACD,QAAQE,GAAG,CAACF,CAAAA,QAAS,AAACA,MAA6BtC,KAAK;QAElH;IACF,GAAG;QAAC8B;KAAiB;IAErB,MAAMW,uBAAuBrD,wBAAwB;QACnDsD,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;IAEA,MAAMC,oBAAoB1C,0BAA0B2C;IAEpD,OAAO;QACLjC;QACAT,qBAAqBY;QACrB6B;QACAxC;QACA0C,YAAY;YACVtB,MAAM;YACNuB,oBAAoB;QACtB;QACAvB,MAAMtC,KAAK8D,MAAM,CACf/D,yBAAyB,OAAO;YAC9B,cAAc;YACde,KAAKV,cAAcU,KAAKK;YACxB4C,MAAM;YACN,GAAGT,oBAAoB;YACvB,GAAGzC,KAAK;YACRE,UAAU4B;QACZ,IACA;YAAEqB,aAAa;QAAM;QAEvBH,oBAAoB7D,KAAKiE,QAAQ,CAACpD,MAAMgD,kBAAkB,EAAE;YAC1DK,cAAc;gBAAEnD,wBAAU,oBAACL;YAAgC;YAC3DsD,aAAa;YACbG,iBAAiB;QACnB;IACF;AACF,EAAE"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __resetStyles, mergeClasses, tokens } from '@fluentui/react-components';
|
|
2
2
|
export const attachmentListClassNames = {
|
|
3
3
|
root: 'fai-AttachmentList',
|
|
4
|
-
overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
|
|
5
|
-
overflowMenuItem: 'fai-AttachmentList__overflowMenuItem'
|
|
4
|
+
overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
|
|
6
5
|
};
|
|
7
6
|
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);}"]);
|
|
8
7
|
const useOverflowMenuButtonBaseClassName = __resetStyles("rvxcmzt", null, [".rvxcmzt{display:inline-flex;}"]);
|
|
@@ -18,9 +17,6 @@ export const useAttachmentListStyles_unstable = state => {
|
|
|
18
17
|
if (state.overflowMenuButton) {
|
|
19
18
|
state.overflowMenuButton.className = mergeClasses(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
|
|
20
19
|
}
|
|
21
|
-
if (state.overflowMenuItem) {
|
|
22
|
-
state.overflowMenuItem.className = mergeClasses(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
|
|
23
|
-
}
|
|
24
20
|
return state;
|
|
25
21
|
};
|
|
26
22
|
//# sourceMappingURL=useAttachmentListStyles.styles.js.map
|
|
@@ -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
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,WAAWL,OAAOM,uBAAuB;IACzCC,SAAS;IACTC,eAAe;IACfC,YAAY;IACZC,UAAU;IACVC,QAAQX,OAAOY,iBAAiB;AAClC;AAEA,MAAMC,qCAAqCf,gBAAgB;IACzDS,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,MAAMO,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBZ;IAC1B,MAAMa,8BAA8BJ;IAEpCE,MAAMb,IAAI,CAACgB,SAAS,GAAGnB,aAAaE,yBAAyBC,IAAI,EAAEc,mBAAmBD,MAAMb,IAAI,CAACgB,SAAS;IAE1G,IAAIH,MAAMZ,kBAAkB,EAAE;QAC5BY,MAAMZ,kBAAkB,CAACe,SAAS,GAAGnB,aACnCE,yBAAyBE,kBAAkB,EAC3Cc,6BACAF,MAAMZ,kBAAkB,CAACe,SAAS;IAEtC;IAEA,OAAOH;AACT,EAAE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { MenuItem, ProgressBar, mergeCallbacks, slot, useId, useIsOverflowItemVisible } from '@fluentui/react-components';
|
|
3
|
-
import {
|
|
3
|
+
import { Dismiss20Regular } from '@fluentui/react-icons';
|
|
4
4
|
import { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';
|
|
5
5
|
/**
|
|
6
6
|
* Create the state required to render AttachmentOverflowMenuItem.
|
|
@@ -18,7 +18,6 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
|
|
|
18
18
|
imageOnly,
|
|
19
19
|
media
|
|
20
20
|
} = props;
|
|
21
|
-
const DismissIcon = bundleIcon(Dismiss20Filled, Dismiss20Regular);
|
|
22
21
|
const menuItemId = useId('attachment-', props.id);
|
|
23
22
|
const isVisible = useIsOverflowItemVisible(menuItemId);
|
|
24
23
|
const {
|
|
@@ -27,7 +26,7 @@ export const useAttachmentOverflowMenuItem_unstable = (props, ref) => {
|
|
|
27
26
|
const root = slot.always({
|
|
28
27
|
ref,
|
|
29
28
|
icon: media,
|
|
30
|
-
secondaryContent: /*#__PURE__*/React.createElement(
|
|
29
|
+
secondaryContent: /*#__PURE__*/React.createElement(Dismiss20Regular, null),
|
|
31
30
|
...props,
|
|
32
31
|
id: menuItemId
|
|
33
32
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport {
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, media } = props;\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <Dismiss20Regular />, ...props, id: menuItemId },\n { elementType: MenuItem },\n );\n root.onClick = mergeCallbacks(root.onClick, ev => {\n onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n return {\n components: {\n root: MenuItem,\n progress: ProgressBar,\n },\n root,\n progress,\n isVisible,\n imageOnly,\n };\n};\n"],"names":["React","MenuItem","ProgressBar","mergeCallbacks","slot","useId","useIsOverflowItemVisible","Dismiss20Regular","useAttachmentListContext_unstable","useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","media","menuItemId","id","isVisible","onAttachmentDismiss","context","root","always","icon","secondaryContent","elementType","onClick","ev","content","children","progress","optional","defaultProps","shape","thickness","components"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,IAAI,EACJC,KAAK,EACLC,wBAAwB,QACnB,6BAA6B;AACpC,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,iCAAiC,QAAQ,uCAAuC;AAMzF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yCAAyC,CACpDC,OACAC;IAEA;IAEA,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGH;IAC7B,MAAMI,aAAaT,MAAM,eAAeK,MAAMK,EAAE;IAChD,MAAMC,YAAYV,yBAAyBQ;IAC3C,MAAM,EAAEG,mBAAmB,EAAE,GAAGT,kCAAkCU,CAAAA,UAAWA;IAE7E,MAAMC,OAAOf,KAAKgB,MAAM,CACtB;QAAET;QAAKU,MAAMR;QAAOS,gCAAkB,oBAACf;QAAqB,GAAGG,KAAK;QAAEK,IAAID;IAAW,GACrF;QAAES,aAAatB;IAAS;IAE1BkB,KAAKK,OAAO,GAAGrB,eAAegB,KAAKK,OAAO,EAAEC,CAAAA;QAC1CR,gCAAAA,0CAAAA,oBAAsBQ,IAAI;YAAEC,SAAShB,MAAMiB,QAAQ;YAAEd;YAAOE,IAAID;QAAW;IAC7E;IAEA,MAAMc,WAAWxB,KAAKyB,QAAQ,CAACnB,MAAMkB,QAAQ,EAAE;QAC7CE,cAAc;YACZC,OAAO;YACPC,WAAW;YACX,mBAAmBtB,MAAMK,EAAE;QAC7B;QACAQ,aAAarB;IACf;IAEA,OAAO;QACL+B,YAAY;YACVd,MAAMlB;YACN2B,UAAU1B;QACZ;QACAiB;QACAS;QACAZ;QACAJ;IACF;AACF,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 overflowMenuButton: Slot<'span'>;\n
|
|
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 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 onAttachmentDismiss?: (\n e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>,\n data: AttachmentDismissedData,\n ) => void;\n overflowMenuProps?: Omit<AttachmentOverflowMenuProps, 'children'>;\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 attachments: AttachmentProps[];\n shouldUseOverflow: boolean;\n };\n\nexport type AttachmentListContextValues = {\n attachmentList: AttachmentListContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -16,7 +16,6 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
16
16
|
const _reactutilities1 = require("@fluentui-copilot/react-utilities");
|
|
17
17
|
const _Attachment = require("../Attachment");
|
|
18
18
|
const _AttachmentOverflowMenuButton = require("../AttachmentOverflowMenuButton");
|
|
19
|
-
const _AttachmentOverflowMenuItem = require("../AttachmentOverflowMenuItem");
|
|
20
19
|
const _useAttachmentOverflowMenuButtonStylesstyles = require("../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles");
|
|
21
20
|
const useAttachmentList_unstable = (props, ref)=>{
|
|
22
21
|
const { children, maxVisibleAttachments, onAttachmentDismiss, overflowMenuProps } = props;
|
|
@@ -89,8 +88,7 @@ const useAttachmentList_unstable = (props, ref)=>{
|
|
|
89
88
|
overflowMenuProps,
|
|
90
89
|
components: {
|
|
91
90
|
root: 'div',
|
|
92
|
-
overflowMenuButton: 'span'
|
|
93
|
-
overflowMenuItem: 'span'
|
|
91
|
+
overflowMenuButton: 'span'
|
|
94
92
|
},
|
|
95
93
|
root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
|
|
96
94
|
'aria-label': 'Attachments',
|
|
@@ -108,13 +106,6 @@ const useAttachmentList_unstable = (props, ref)=>{
|
|
|
108
106
|
},
|
|
109
107
|
elementType: 'span',
|
|
110
108
|
renderByDefault: true
|
|
111
|
-
}),
|
|
112
|
-
overflowMenuItem: _reactcomponents.slot.optional(props.overflowMenuItem, {
|
|
113
|
-
defaultProps: {
|
|
114
|
-
children: /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, null)
|
|
115
|
-
},
|
|
116
|
-
elementType: 'span',
|
|
117
|
-
renderByDefault: true
|
|
118
109
|
})
|
|
119
110
|
};
|
|
120
111
|
}; //# sourceMappingURL=useAttachmentList.js.map
|
|
@@ -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, type AttachmentProps } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport {
|
|
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, type AttachmentProps } from '../Attachment';\nimport { AttachmentOverflowMenuButton } from '../AttachmentOverflowMenuButton';\nimport { attachmentOverflowMenuButtonClassNames } from '../AttachmentOverflowMenuButton/useAttachmentOverflowMenuButtonStyles.styles';\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 [attachments, setAttachments] = React.useState<AttachmentProps[]>([]);\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 React.useEffect(() => {\n if (resolvedChildren && Array.isArray(resolvedChildren)) {\n setAttachments(\n resolvedChildren.filter(child => React.isValidElement(child)).map(child => (child as React.ReactElement).props),\n );\n }\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 attachments,\n onAttachmentDismiss: handleAttachmentDismiss,\n shouldUseOverflow,\n overflowMenuProps,\n components: {\n root: 'div',\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 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","attachments","innerRef","activeElement","next","container","current","useState","useEventCallback","e","data","findLastFocusable","_innerRef_current","contains","prev","root","_findLastFocusable","focus","findPrevFocusable","parentElement","styles","useOverflowStyles","overflowClassName","React","useEffect","resolvedChildren","filter","child","arrowNavigationProps","useArrowNavigationGroup","memorizeCurrent","overflow","shouldUseOverflow","Array","isArray","components","overflowMenuButton","getIntrinsicElementProps","undefined","handleAttachmentDismiss","defaultProps","renderByDefault","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BUA;;;eAAAA;;;;iEA9Ba;iCAQhB;qCACyC;gCACrB;iCACgB;4BACa;8CACX;6DACU;AAgBrD,MAAQA,6BAAUC,CAAqBC,OAAEC;UACzC,EACAH,QAAOI,EACPH,qBAAQI,EACRF,mBAAQG,EACRC,iBAAOC,KACPN;qBASMO,OAAAA,MAAAA,CAAAA;UARJ,CAAAL,WAAKD,GAAAA,IAAAA,0BAAAA;0BAEL,gDAEAA;UAEA,mBACMO,mBACFD,mBACF,yCACME;wBAAyDC,eAAoBC,GAAAA,OAAOC,QAAA,CAAA,EAAA;oCAACC,IAAAA,iCAAA,EAAA,CAAAC,GAAAC;;kCAEzF;;;4BAGEb,GAAAA;6CACEc;8BAAAA,mBAAAA,QAAAA,mBAAkBT,KAASI,IAAO,KAAA,IAAAR,eAAlCa,aAAAA;iCACCT,SAAAI,OAAA,MAAA,QAAAM,sBAAA,KAAA,IAAA,KAAA,IAAAA,kBAAAC,QAAA,CAAAV,gBAAA;wGACE;2CACKA,eAAA;2BACZD,SAAAI,OAAA;;sBAEA;qGAAyG;0HAAC;yBAC1GQ,SAAAA,CAAAA,QAAAA,CAAAA,mFAAW,CAAAC,IAAA,GAAA;+BACb;wBACF,IAAOC;wBACLA,CAAAA,qBAAAL,kBAAAT,SAAAI,OAAA,CAAA,MAAA,QAAAU,uBAAA,KAAA,IAAA,KAAA,IAAAA,mBAAAC,KAAA;uBACApB;;8BACEc;;mBAEJ;gBACF,MAAAG,OAAAI,kBAAAf,kBAAA,QAAAA,kBAAA,KAAA,IAAA,KAAA,IAAAA,cAAAgB,aAAA,EAAA;oBAEMC,WAASC,SAAAA,OAAAA;gBACf;gBACE5B,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,KAAAA,IAAAA,KAAAA,KAAAA;;eAEA6B;YACF,+IAAA;YAEAC,WAAMC;gBACJ,IAAIC;sCAEAA,kBAAiBC,SAAOC,OAAAA,CAAAA,MAAAA,QAASJ,uBAAqBI,KAAYA,IAAAA,KAAS,IAACA,mBAAkCV,KAAA;eAElH;QACF;;UAAqBG,SAAAC,IAAAA,6BAAA;UAErBI,mBAAMG,IAAAA,2CAAuBC,EAAAA;;yBAErBnC;2BACNoC,OAAiBC,QAAA;;WAGnBP,SAAMQ,CAAAA;QAEN,IAAAP,oBAAOQ,MAAAC,OAAA,CAAAT,mBAAA;2BACLxB,iBAAAA,MAAAA,CAAAA,CAAAA,QAAAA,WAAAA,GAAAA,OAAAA,cAAAA,CAAAA,QAAAA,GAAAA,CAAAA,CAAAA,QAAAA,MAAAA,KAAAA;;;;KAEA+B;UACAhC,uBAAAA,IAAAA,wCAAAA,EAAAA;kBACAmC;;yBAEEC;;UAEFrB,oBACEsB,0BAAyBC;;;6BAGjBC;;;oBAGN9C;kBAEF;gCAAe;;cAEjB2C,qBAAAA,CAAAA,MAAAA,CAAAA,IAAAA,yCAAkCzC,EAAAA,OAAMyC;0BACtCI;mDAAgB/C,EAAAA,KAAAA;kBAA2C;mCAC9C;oBACbgD;sBACFhB;QACF,IAAA;YACAiB,aAAA"}
|
|
@@ -19,8 +19,7 @@ _export(exports, {
|
|
|
19
19
|
const _reactcomponents = require("@fluentui/react-components");
|
|
20
20
|
const attachmentListClassNames = {
|
|
21
21
|
root: 'fai-AttachmentList',
|
|
22
|
-
overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
|
|
23
|
-
overflowMenuItem: 'fai-AttachmentList__overflowMenuItem'
|
|
22
|
+
overflowMenuButton: 'fai-AttachmentList__overflowMenuButton'
|
|
24
23
|
};
|
|
25
24
|
const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("r168fwfa", null, [
|
|
26
25
|
".r168fwfa{column-gap:var(--spacingHorizontalSNudge);display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;row-gap:var(--spacingVerticalXS);}"
|
|
@@ -36,8 +35,5 @@ const useAttachmentListStyles_unstable = (state)=>{
|
|
|
36
35
|
if (state.overflowMenuButton) {
|
|
37
36
|
state.overflowMenuButton.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuButton, overflowMenuButtonClassName, state.overflowMenuButton.className);
|
|
38
37
|
}
|
|
39
|
-
if (state.overflowMenuItem) {
|
|
40
|
-
state.overflowMenuItem.className = (0, _reactcomponents.mergeClasses)(attachmentListClassNames.overflowMenuItem, state.overflowMenuItem.className);
|
|
41
|
-
}
|
|
42
38
|
return state;
|
|
43
39
|
}; //# sourceMappingURL=useAttachmentListStyles.styles.js.map
|
|
@@ -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
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,wBAAAA;eAAAA;;IAUXC,gCAAU;eAAVA;;;iCAd4C;AAIvC,MAAMD,2BAAgE;UAC3EE;wBACAC;AACF;AAEA,MAAMC,uBAAuBC,IAAAA,8BAAAA,EAAAA,YAAgB,MAAA;IAAA;CAAA;MAC3CC,qCAAkBC,IAAAA,8BAAuB,EAAA,WAAA,MAAA;IAAA;CAAA;AAIzCN,MAAAA,mCAAUO,CAAAA;;IAIZ,MAAMC,oBAAAA;UACJC,8BAASD;IACXD,MAAAN,IAAA,CAAAS,SAAA,GAAAC,IAAAA,6BAAA,EAAAZ,yBAAAE,IAAA,EAAAW,mBAAAL,MAAAN,IAAA,CAAAS,SAAA;IAEA,IAAAH,MAAAL,kBAAA,EAAA;;IAEC;WAECK;6DAGoCC"}
|
|
@@ -16,14 +16,13 @@ const _attachmentListContext = require("../../contexts/attachmentListContext");
|
|
|
16
16
|
const useAttachmentOverflowMenuItem_unstable = (props, ref)=>{
|
|
17
17
|
'use no memo';
|
|
18
18
|
const { imageOnly, media } = props;
|
|
19
|
-
const DismissIcon = (0, _reacticons.bundleIcon)(_reacticons.Dismiss20Filled, _reacticons.Dismiss20Regular);
|
|
20
19
|
const menuItemId = (0, _reactcomponents.useId)('attachment-', props.id);
|
|
21
20
|
const isVisible = (0, _reactcomponents.useIsOverflowItemVisible)(menuItemId);
|
|
22
21
|
const { onAttachmentDismiss } = (0, _attachmentListContext.useAttachmentListContext_unstable)((context)=>context);
|
|
23
22
|
const root = _reactcomponents.slot.always({
|
|
24
23
|
ref,
|
|
25
24
|
icon: media,
|
|
26
|
-
secondaryContent: /*#__PURE__*/ _react.createElement(
|
|
25
|
+
secondaryContent: /*#__PURE__*/ _react.createElement(_reacticons.Dismiss20Regular, null),
|
|
27
26
|
...props,
|
|
28
27
|
id: menuItemId
|
|
29
28
|
}, {
|
package/lib-commonjs/components/AttachmentOverflowMenuItem/useAttachmentOverflowMenuItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport {
|
|
1
|
+
{"version":3,"sources":["useAttachmentOverflowMenuItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n MenuItem,\n ProgressBar,\n mergeCallbacks,\n slot,\n useId,\n useIsOverflowItemVisible,\n} from '@fluentui/react-components';\nimport { Dismiss20Regular } from '@fluentui/react-icons';\nimport { useAttachmentListContext_unstable } from '../../contexts/attachmentListContext';\nimport type {\n AttachmentOverflowMenuItemProps,\n AttachmentOverflowMenuItemState,\n} from './AttachmentOverflowMenuItem.types';\n\n/**\n * Create the state required to render AttachmentOverflowMenuItem.\n *\n * The returned state can be modified with hooks such as useAttachmentOverflowMenuItemStyles_unstable,\n * before being passed to renderAttachmentOverflowMenuItem_unstable.\n *\n * @param props - props from this instance of AttachmentOverflowMenuItem\n * @param ref - reference to root HTMLElement of AttachmentOverflowMenuItem\n */\nexport const useAttachmentOverflowMenuItem_unstable = (\n props: AttachmentOverflowMenuItemProps,\n ref: React.Ref<HTMLDivElement>,\n): AttachmentOverflowMenuItemState => {\n 'use no memo';\n\n const { imageOnly, media } = props;\n const menuItemId = useId('attachment-', props.id);\n const isVisible = useIsOverflowItemVisible(menuItemId);\n const { onAttachmentDismiss } = useAttachmentListContext_unstable(context => context);\n\n const root = slot.always(\n { ref, icon: media, secondaryContent: <Dismiss20Regular />, ...props, id: menuItemId },\n { elementType: MenuItem },\n );\n root.onClick = mergeCallbacks(root.onClick, ev => {\n onAttachmentDismiss?.(ev, { content: props.children, media, id: menuItemId });\n });\n\n const progress = slot.optional(props.progress, {\n defaultProps: {\n shape: 'square',\n thickness: 'large',\n 'aria-labelledby': props.id,\n },\n elementType: ProgressBar,\n });\n\n return {\n components: {\n root: MenuItem,\n progress: ProgressBar,\n },\n root,\n progress,\n isVisible,\n imageOnly,\n };\n};\n"],"names":["useAttachmentOverflowMenuItem_unstable","props","ref","imageOnly","onAttachmentDismiss","media","icon","secondaryContent","menuItemId","useAttachmentListContext_unstable","context","elementType","MenuItem","root","onClick","content","progress","optional","ev","shape","children","slot","defaultProps","components","ProgressBar","isVisible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BEA;;;eAAAA;;;;iEA7BqB;iCAQhB;4BAC0B;uCACiB;AAmBhD,MAAAA,yCAAA,CAAAC,OAAAC;;UAIA,EACAC,SAAQC,EAERC,KAAA;UACSC,aAAMD,IAAAA,sBAAAA,EAAAA,eAAAA,MAAAA,EAAAA;UAAOE,YAAAA,IAAAA,yCAAkB,EAAAC;UAAsB,qBAAcA,KAAWC,IAAAA,wDACrF,EAAAC,CAAAA,UAAAA;UAAEC,OAAAA,qBAAAA,CAAAA,MAAaC,CAAAA;QAASV;QAE1BW,MAAKC;0BACHV,WAAAA,GAAAA,OAAAA,aAAAA,CAAAA,4BAAAA,EAAAA;gBAA4BW;;;qBAA+CH,yBAAA;;SAG7EE,OAAME,GAAAA,IAAAA,+BAAgBC,EAAAA,KAAShB,OAAMe,EAAAA,CAAAA;gCACrB,QAAAZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAc,IAAA;qBACZC,MAAOC,QAAA;;;;;UAKXJ,WAAAK,qBAAA,CAAAJ,QAAA,CAAAhB,MAAAe,QAAA,EAAA;QAEAM,cAAO;mBACLC;uBACEV;+BACUW,MAAAA,EAAAA;;qBAEZX,4BAAAA;;WAEAY;oBACAtB;YACFU,MAAAD,yBAAA;YACAI,UAAAQ,4BAAA"}
|
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-20240816-0407-4f31c87a.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,14 +12,14 @@
|
|
|
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-20240816-0407-4f31c87a.1",
|
|
16
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20240816-0407-4f31c87a.1",
|
|
17
|
+
"@fluentui-copilot/tokens": "0.0.0-nightly-20240816-0407-4f31c87a.1",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
|
|
22
|
-
"@fluentui/react-components": ">=9.54.
|
|
22
|
+
"@fluentui/react-components": ">=9.54.10 <10.0.0",
|
|
23
23
|
"@fluentui/react-context-selector": ">=9.1.65 <10.0.0",
|
|
24
24
|
"@fluentui/react-icons": ">=2.0.247 <3.0.0",
|
|
25
25
|
"@fluentui/react-jsx-runtime": ">=9.0.42 <10.0.0",
|