@fluentui-copilot/react-attachments 0.12.2 → 0.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +30 -1
- package/CHANGELOG.md +12 -2
- package/lib/components/AttachmentList/useAttachmentList.js +5 -1
- package/lib/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js +5 -1
- package/lib-commonjs/components/AttachmentList/useAttachmentList.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,36 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 30 Apr 2025 01:46:02 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-attachments_v0.12.3",
|
|
7
|
+
"version": "0.12.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
|
12
|
+
"package": "@fluentui-copilot/react-attachments",
|
|
13
|
+
"commit": "374dac276c54a98db00b46eb98e6f529592393c8",
|
|
14
|
+
"comment": "fix: overflowing Attachments within AttachmentList now receive the onClick handler."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "owcampbe@microsoft.com",
|
|
18
|
+
"package": "@fluentui-copilot/react-attachments",
|
|
19
|
+
"commit": "5a9efb11481fbe2c9bd25c8825ec4a9b991050ab",
|
|
20
|
+
"comment": "chore: Bump @fluentui/react-components to 9.58.3."
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"none": [
|
|
24
|
+
{
|
|
25
|
+
"author": "tristan.watanabe@gmail.com",
|
|
26
|
+
"package": "@fluentui-copilot/react-attachments",
|
|
27
|
+
"commit": "1391e0a7243d050db30fcc27547fd3e91df0162c",
|
|
28
|
+
"comment": "chore: update tsconfig to remove allowSyntheticDefaultImports to enforce named imports."
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Thu, 24 Apr 2025 00:19:01 GMT",
|
|
6
35
|
"tag": "@fluentui-copilot/react-attachments_v0.12.2",
|
|
7
36
|
"version": "0.12.2",
|
|
8
37
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-attachments
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 30 Apr 2025 01:46:02 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.12.3](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.12.3)
|
|
8
|
+
|
|
9
|
+
Wed, 30 Apr 2025 01:46:02 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.12.2..@fluentui-copilot/react-attachments_v0.12.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: overflowing Attachments within AttachmentList now receive the onClick handler. ([PR #2964](https://github.com/microsoft/fluentai/pull/2964) by tristan.watanabe@gmail.com)
|
|
15
|
+
- chore: Bump @fluentui/react-components to 9.58.3. ([PR #2963](https://github.com/microsoft/fluentai/pull/2963) by owcampbe@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [0.12.2](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-attachments_v0.12.2)
|
|
8
18
|
|
|
9
|
-
Thu, 24 Apr 2025 00:
|
|
19
|
+
Thu, 24 Apr 2025 00:19:01 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-attachments_v0.12.1..@fluentui-copilot/react-attachments_v0.12.2)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -82,9 +82,13 @@ export const useAttachmentList_unstable = (props, ref) => {
|
|
|
82
82
|
const attachmentOverflowMenuItems = React.useMemo(() => {
|
|
83
83
|
if (resolvedChildren && Array.isArray(resolvedChildren)) {
|
|
84
84
|
return resolvedChildren.filter(child => /*#__PURE__*/React.isValidElement(child)).map(child => child.props).map(attachment => {
|
|
85
|
+
const dismissButton = slot.optional(attachment.dismissButton, {
|
|
86
|
+
elementType: 'button'
|
|
87
|
+
});
|
|
85
88
|
return /*#__PURE__*/React.createElement(AttachmentOverflowMenuItem, {
|
|
86
89
|
...attachment,
|
|
87
|
-
key: attachment.id
|
|
90
|
+
key: attachment.id,
|
|
91
|
+
onClick: dismissButton === null || dismissButton === void 0 ? void 0 : dismissButton.onClick
|
|
88
92
|
});
|
|
89
93
|
});
|
|
90
94
|
}
|
|
@@ -1 +1 @@
|
|
|
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';\nimport {
|
|
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 { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment/Attachment.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\n const designVersion = useDesignVersion(props.designVersion);\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: AttachmentProps) => {\n const dismissButton = slot.optional(attachment.dismissButton, { elementType: 'button' });\n return (\n <AttachmentOverflowMenuItem\n {...attachment}\n key={attachment.id}\n onClick={dismissButton?.onClick as AttachmentProps['onClick']}\n />\n );\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 designVersion,\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","useDesignVersion","useAttachmentList_unstable","props","ref","children","maxVisibleAttachments","onAttachmentDismiss","overflowMenuProps","innerRef","useRef","setTimeout","targetDocument","designVersion","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","dismissButton","optional","elementType","key","id","onClick","arrowNavigationProps","circular","axis","memorizeCurrent","shouldUseOverflow","undefined","components","menuList","menuPopover","overflowMenuButton","always","role","defaultProps","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -73,9 +73,13 @@ const useAttachmentList_unstable = (props, ref)=>{
|
|
|
73
73
|
const attachmentOverflowMenuItems = _react.useMemo(()=>{
|
|
74
74
|
if (resolvedChildren && Array.isArray(resolvedChildren)) {
|
|
75
75
|
return resolvedChildren.filter((child)=>/*#__PURE__*/ _react.isValidElement(child)).map((child)=>child.props).map((attachment)=>{
|
|
76
|
+
const dismissButton = _reactcomponents.slot.optional(attachment.dismissButton, {
|
|
77
|
+
elementType: 'button'
|
|
78
|
+
});
|
|
76
79
|
return /*#__PURE__*/ _react.createElement(_AttachmentOverflowMenuItem.AttachmentOverflowMenuItem, {
|
|
77
80
|
...attachment,
|
|
78
|
-
key: attachment.id
|
|
81
|
+
key: attachment.id,
|
|
82
|
+
onClick: dismissButton === null || dismissButton === void 0 ? void 0 : dismissButton.onClick
|
|
79
83
|
});
|
|
80
84
|
});
|
|
81
85
|
}
|
|
@@ -1 +1 @@
|
|
|
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';\nimport {
|
|
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 { useDesignVersion } from '@fluentui-copilot/react-provider';\nimport type { AttachmentListProps, AttachmentListState } from './AttachmentList.types';\nimport type { AttachmentProps } from '../Attachment/Attachment.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\n const designVersion = useDesignVersion(props.designVersion);\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: AttachmentProps) => {\n const dismissButton = slot.optional(attachment.dismissButton, { elementType: 'button' });\n return (\n <AttachmentOverflowMenuItem\n {...attachment}\n key={attachment.id}\n onClick={dismissButton?.onClick as AttachmentProps['onClick']}\n />\n );\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 designVersion,\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","designVersion","overflowMenuProps","findNextFocusable","innerRef","useDesignVersion","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","onClick","useMemo","Array","isArray","filter","map","elementType","circular","createElement","AttachmentOverflowMenuItem","axis","memorizeCurrent","id","dismissButton","shouldUseOverflow","components","menuList","overflowMenuButton","undefined","handleAttachmentDismiss","arrowNavigationProps","MenuPopover","slot","defaultProps","MenuList","renderByDefault","menuPopover","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-attachments",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.3",
|
|
4
4
|
"description": "A set of components related to attaching files in Copilot experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,19 +12,19 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-provider": "^0.11.
|
|
16
|
-
"@fluentui-copilot/react-utilities": "^0.0.
|
|
17
|
-
"@fluentui-copilot/tokens": "^0.3.
|
|
15
|
+
"@fluentui-copilot/react-provider": "^0.11.2",
|
|
16
|
+
"@fluentui-copilot/react-utilities": "^0.0.7",
|
|
17
|
+
"@fluentui-copilot/tokens": "^0.3.10",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@fluentui/keyboard-keys": ">=9.0.
|
|
22
|
-
"@fluentui/react-components": ">=9.
|
|
23
|
-
"@fluentui/react-context-selector": ">=9.1.
|
|
21
|
+
"@fluentui/keyboard-keys": ">=9.0.8 <10.0.0",
|
|
22
|
+
"@fluentui/react-components": ">=9.58.3 <10.0.0",
|
|
23
|
+
"@fluentui/react-context-selector": ">=9.1.76 <10.0.0",
|
|
24
24
|
"@fluentui/react-icons": ">=2.0.260 <3.0.0",
|
|
25
|
-
"@fluentui/react-jsx-runtime": ">=9.0.
|
|
26
|
-
"@fluentui/react-shared-contexts": ">=9.
|
|
27
|
-
"@fluentui/react-utilities": ">=9.
|
|
25
|
+
"@fluentui/react-jsx-runtime": ">=9.0.50 <10.0.0",
|
|
26
|
+
"@fluentui/react-shared-contexts": ">=9.23.1 <10.0.0",
|
|
27
|
+
"@fluentui/react-utilities": ">=9.19.0 <10.0.0",
|
|
28
28
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
29
29
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
30
30
|
"react": ">=16.14.0 <19.0.0",
|