@fluentui-copilot/react-reference 0.0.0-nightly-20250716-0405-895dbbbf.1 → 0.0.0-nightly-20250717-0405-eecbae35.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 +3 -3
- package/CHANGELOG.md +4 -4
- package/lib/Citation.js +0 -1
- package/lib/Reference.js +0 -1
- package/lib/ReferenceList.js +0 -1
- package/lib/ReferenceOverflowButton.js +0 -1
- package/lib/components/Citation/Citation.js +5 -6
- package/lib/components/Citation/Citation.types.js +1 -2
- package/lib/components/Citation/index.js +0 -1
- package/lib/components/Citation/renderCitation.js +4 -6
- package/lib/components/Citation/useCitation.js +22 -28
- package/lib/components/Reference/Reference.js +4 -5
- package/lib/components/Reference/Reference.types.js +1 -2
- package/lib/components/Reference/index.js +0 -1
- package/lib/components/Reference/renderReference.js +20 -17
- package/lib/components/Reference/useReference.js +53 -59
- package/lib/components/ReferenceList/ReferenceList.js +5 -6
- package/lib/components/ReferenceList/ReferenceList.types.js +1 -2
- package/lib/components/ReferenceList/index.js +0 -1
- package/lib/components/ReferenceList/renderReferenceList.js +17 -17
- package/lib/components/ReferenceList/useReferenceList.js +70 -80
- package/lib/components/ReferenceList/useReferenceListContextValues.js +13 -21
- package/lib/components/ReferenceOverflowButton/ReferenceOverflowButton.js +4 -5
- package/lib/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js +1 -2
- package/lib/components/ReferenceOverflowButton/index.js +0 -1
- package/lib/components/ReferenceOverflowButton/renderReferenceOverflowButton.js +9 -14
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButton.js +77 -77
- package/lib/contexts/index.js +0 -1
- package/lib/contexts/referenceListContext.js +11 -12
- package/lib/index.js +12 -25
- package/lib/utilities/generateReferenceCitationPreview.js +75 -86
- package/lib/utilities/index.js +0 -1
- package/lib/utilities/useReferenceCitationPreview.js +5 -5
- package/lib-commonjs/Citation.js +0 -1
- package/lib-commonjs/Reference.js +0 -1
- package/lib-commonjs/ReferenceList.js +0 -1
- package/lib-commonjs/ReferenceOverflowButton.js +0 -1
- package/lib-commonjs/components/Citation/Citation.js +1 -1
- package/lib-commonjs/components/Citation/Citation.js.map +1 -1
- package/lib-commonjs/components/Citation/Citation.types.js +0 -1
- package/lib-commonjs/components/Citation/index.js +0 -1
- package/lib-commonjs/components/Citation/renderCitation.js +1 -1
- package/lib-commonjs/components/Citation/renderCitation.js.map +1 -1
- package/lib-commonjs/components/Citation/useCitation.js +1 -1
- package/lib-commonjs/components/Citation/useCitation.js.map +1 -1
- package/lib-commonjs/components/Reference/Reference.js +1 -1
- package/lib-commonjs/components/Reference/Reference.js.map +1 -1
- package/lib-commonjs/components/Reference/Reference.types.js +0 -1
- package/lib-commonjs/components/Reference/index.js +0 -1
- package/lib-commonjs/components/Reference/renderReference.js +1 -1
- package/lib-commonjs/components/Reference/renderReference.js.map +1 -1
- package/lib-commonjs/components/Reference/useReference.js +1 -1
- package/lib-commonjs/components/Reference/useReference.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/ReferenceList.js +1 -1
- package/lib-commonjs/components/ReferenceList/ReferenceList.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/ReferenceList.types.js +0 -1
- package/lib-commonjs/components/ReferenceList/index.js +0 -1
- package/lib-commonjs/components/ReferenceList/renderReferenceList.js +1 -1
- package/lib-commonjs/components/ReferenceList/renderReferenceList.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/useReferenceList.js +1 -1
- package/lib-commonjs/components/ReferenceList/useReferenceList.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListContextValues.js +1 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListContextValues.js.map +1 -1
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.js +1 -1
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/index.js +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/renderReferenceOverflowButton.js +1 -1
- package/lib-commonjs/components/ReferenceOverflowButton/renderReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButton.js +1 -1
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/contexts/index.js +0 -1
- package/lib-commonjs/contexts/referenceListContext.js +1 -1
- package/lib-commonjs/contexts/referenceListContext.js.map +1 -1
- package/lib-commonjs/index.js +0 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utilities/generateReferenceCitationPreview.js +1 -1
- package/lib-commonjs/utilities/generateReferenceCitationPreview.js.map +1 -1
- package/lib-commonjs/utilities/index.js +0 -1
- package/lib-commonjs/utilities/useReferenceCitationPreview.js +1 -1
- package/lib-commonjs/utilities/useReferenceCitationPreview.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 17 Jul 2025 04:13:01 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20250717-0405-eecbae35.1",
|
|
7
|
+
"version": "0.0.0-nightly-20250717-0405-eecbae35.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
package/CHANGELOG.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-reference
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 04:13:01 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-20250717-0405-eecbae35.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20250717-0405-eecbae35.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.16.2..@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
9
|
+
Thu, 17 Jul 2025 04:13:01 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.16.2..@fluentui-copilot/react-reference_v0.0.0-nightly-20250717-0405-eecbae35.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
package/lib/Citation.js
CHANGED
package/lib/Reference.js
CHANGED
package/lib/ReferenceList.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
1
|
export { ReferenceOverflowButton, referenceOverflowButtonClassNames, renderReferenceOverflowButton_unstable, useReferenceOverflowButtonStyles_unstable, useReferenceOverflowButton_unstable } from './components/ReferenceOverflowButton/index';
|
|
2
|
-
//# sourceMappingURL=ReferenceOverflowButton.js.map
|
|
@@ -4,11 +4,10 @@ import { renderCitation_unstable } from './renderCitation';
|
|
|
4
4
|
import { useCitationStyles_unstable } from './useCitationStyles.styles';
|
|
5
5
|
import { useCustomStyleHook } from '@fluentui-copilot/react-provider';
|
|
6
6
|
// Citation component - TODO: add more docs
|
|
7
|
-
export const Citation = /*#__PURE__*/React.forwardRef((props, ref)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
export const Citation = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
8
|
+
const state = useCitation_unstable(props, ref);
|
|
9
|
+
useCitationStyles_unstable(state);
|
|
10
|
+
useCustomStyleHook('useCitationStyles')(state);
|
|
11
|
+
return renderCitation_unstable(state);
|
|
12
12
|
});
|
|
13
13
|
Citation.displayName = 'Citation';
|
|
14
|
-
//# sourceMappingURL=Citation.js.map
|
|
@@ -2,4 +2,3 @@ export { Citation } from './Citation';
|
|
|
2
2
|
export { renderCitation_unstable } from './renderCitation';
|
|
3
3
|
export { useCitation_unstable } from './useCitation';
|
|
4
4
|
export { citationClassNames, useCitationStyles_unstable } from './useCitationStyles.styles';
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { assertSlots } from '@fluentui/react-components';
|
|
3
3
|
/**
|
|
4
4
|
* Render the final JSX of Citation
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
return /*#__PURE__*/_jsx(state.root, {});
|
|
5
|
+
*/ export const renderCitation_unstable = (state)=>{
|
|
6
|
+
assertSlots(state);
|
|
7
|
+
return /*#__PURE__*/ _jsx(state.root, {});
|
|
9
8
|
};
|
|
10
|
-
//# sourceMappingURL=renderCitation.js.map
|
|
@@ -9,32 +9,26 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
|
9
9
|
*
|
|
10
10
|
* @param props - props from this instance of Citation
|
|
11
11
|
* @param ref - reference to root HTMLElement of Citation
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}), {
|
|
35
|
-
elementType: 'a'
|
|
36
|
-
})
|
|
37
|
-
};
|
|
38
|
-
return state;
|
|
12
|
+
*/ export const useCitation_unstable = (props, ref)=>{
|
|
13
|
+
const { referenceHref, block = false, ...otherProps } = props;
|
|
14
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
15
|
+
const isPopoverLocked = usePreviewContext_unstable((ctx)=>ctx.isPreviewLocked) && props['aria-expanded'];
|
|
16
|
+
const state = {
|
|
17
|
+
block,
|
|
18
|
+
designVersion,
|
|
19
|
+
isPopoverLocked,
|
|
20
|
+
components: {
|
|
21
|
+
root: 'a'
|
|
22
|
+
},
|
|
23
|
+
root: slot.always(getIntrinsicElementProps('a', {
|
|
24
|
+
ref,
|
|
25
|
+
href: referenceHref,
|
|
26
|
+
role: undefined,
|
|
27
|
+
'aria-expanded': undefined,
|
|
28
|
+
...otherProps
|
|
29
|
+
}), {
|
|
30
|
+
elementType: 'a'
|
|
31
|
+
})
|
|
32
|
+
};
|
|
33
|
+
return state;
|
|
39
34
|
};
|
|
40
|
-
//# sourceMappingURL=useCitation.js.map
|
|
@@ -2,10 +2,9 @@ import * as React from 'react';
|
|
|
2
2
|
import { useReference_unstable } from './useReference';
|
|
3
3
|
import { renderReference_unstable } from './renderReference';
|
|
4
4
|
import { useReferenceStyles_unstable } from './useReferenceStyles.styles';
|
|
5
|
-
export const Reference = /*#__PURE__*/React.forwardRef((props, ref)
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
export const Reference = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
6
|
+
const state = useReference_unstable(props, ref);
|
|
7
|
+
useReferenceStyles_unstable(state);
|
|
8
|
+
return renderReference_unstable(state);
|
|
9
9
|
});
|
|
10
10
|
Reference.displayName = 'Reference';
|
|
11
|
-
//# sourceMappingURL=Reference.js.map
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
//# sourceMappingURL=Reference.types.js.map
|
|
1
|
+
export { };
|
|
@@ -2,4 +2,3 @@ export { Reference } from './Reference';
|
|
|
2
2
|
export { renderReference_unstable } from './renderReference';
|
|
3
3
|
export { useReference_unstable } from './useReference';
|
|
4
4
|
export { referenceClassNames, referenceExtraClassNames, useReferenceStyles_unstable } from './useReferenceStyles.styles';
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { OverflowItem, assertSlots } from '@fluentui/react-components';
|
|
3
|
-
export const renderReference_unstable = state
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
export const renderReference_unstable = (state)=>{
|
|
4
|
+
assertSlots(state);
|
|
5
|
+
const { id, shouldUseOverflow } = state;
|
|
6
|
+
const reference = /*#__PURE__*/ _jsxs(state.root, {
|
|
7
|
+
children: [
|
|
8
|
+
state.citation && /*#__PURE__*/ _jsx(state.citation, {}),
|
|
9
|
+
state.divider && /*#__PURE__*/ _jsx(state.divider, {}),
|
|
10
|
+
state.content && /*#__PURE__*/ _jsxs(state.content, {
|
|
11
|
+
children: [
|
|
12
|
+
state.graphic && /*#__PURE__*/ _jsx(state.graphic, {}),
|
|
13
|
+
state.root.children
|
|
14
|
+
]
|
|
15
|
+
})
|
|
16
|
+
]
|
|
17
|
+
});
|
|
18
|
+
return shouldUseOverflow ? /*#__PURE__*/ _jsx(OverflowItem, {
|
|
19
|
+
id: id,
|
|
20
|
+
children: reference
|
|
21
|
+
}, id) : reference;
|
|
18
22
|
};
|
|
19
|
-
//# sourceMappingURL=renderReference.js.map
|
|
@@ -11,64 +11,58 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
|
|
|
11
11
|
*
|
|
12
12
|
* @param props - props from this instance of Reference
|
|
13
13
|
* @param ref - reference to root HTMLElement of Reference
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
as: elementType,
|
|
29
|
-
id: referenceId
|
|
30
|
-
};
|
|
31
|
-
const citation = slot.optional(props.citation, {
|
|
32
|
-
elementType: 'span'
|
|
33
|
-
});
|
|
34
|
-
const graphic = slot.optional(props.graphic, {
|
|
35
|
-
elementType: 'span'
|
|
36
|
-
});
|
|
37
|
-
const content = slot.optional(props.content, {
|
|
38
|
-
elementType: 'span',
|
|
39
|
-
renderByDefault: graphic !== undefined || !!children
|
|
40
|
-
});
|
|
41
|
-
const divider = slot.optional(props.divider, {
|
|
42
|
-
elementType: 'span',
|
|
43
|
-
renderByDefault: citation !== undefined && content !== undefined
|
|
44
|
-
});
|
|
45
|
-
const state = {
|
|
46
|
-
designVersion,
|
|
47
|
-
id: referenceId,
|
|
48
|
-
shouldUseOverflow,
|
|
49
|
-
components: {
|
|
50
|
-
root: elementType,
|
|
51
|
-
citation: 'span',
|
|
52
|
-
divider: 'span',
|
|
53
|
-
graphic: 'span',
|
|
54
|
-
content: 'span'
|
|
55
|
-
},
|
|
56
|
-
root: slot.always(getIntrinsicElementProps(elementType, {
|
|
57
|
-
ref,
|
|
58
|
-
...propsWithAssignedAs
|
|
59
|
-
}), {
|
|
60
|
-
elementType
|
|
61
|
-
}),
|
|
62
|
-
citation,
|
|
63
|
-
divider,
|
|
64
|
-
content,
|
|
65
|
-
graphic
|
|
66
|
-
};
|
|
67
|
-
if (state.graphic && React.isValidElement(state.graphic.children)) {
|
|
68
|
-
state.graphic.children = React.cloneElement(state.graphic.children, {
|
|
69
|
-
className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild)
|
|
14
|
+
*/ export const useReference_unstable = (props, ref)=>{
|
|
15
|
+
const { as, children, id } = props;
|
|
16
|
+
const designVersion = useDesignVersion(props.designVersion);
|
|
17
|
+
const shouldUseOverflow = useReferenceListContext_unstable((ctx)=>ctx.shouldUseOverflow);
|
|
18
|
+
const referenceId = useId('reference-', id);
|
|
19
|
+
const elementType = as || (props.href ? 'a' : 'button');
|
|
20
|
+
const propsWithAssignedAs = {
|
|
21
|
+
type: elementType === 'button' ? 'button' : undefined,
|
|
22
|
+
...props,
|
|
23
|
+
as: elementType,
|
|
24
|
+
id: referenceId
|
|
25
|
+
};
|
|
26
|
+
const citation = slot.optional(props.citation, {
|
|
27
|
+
elementType: 'span'
|
|
70
28
|
});
|
|
71
|
-
|
|
72
|
-
|
|
29
|
+
const graphic = slot.optional(props.graphic, {
|
|
30
|
+
elementType: 'span'
|
|
31
|
+
});
|
|
32
|
+
const content = slot.optional(props.content, {
|
|
33
|
+
elementType: 'span',
|
|
34
|
+
renderByDefault: graphic !== undefined || !!children
|
|
35
|
+
});
|
|
36
|
+
const divider = slot.optional(props.divider, {
|
|
37
|
+
elementType: 'span',
|
|
38
|
+
renderByDefault: citation !== undefined && content !== undefined
|
|
39
|
+
});
|
|
40
|
+
const state = {
|
|
41
|
+
designVersion,
|
|
42
|
+
id: referenceId,
|
|
43
|
+
shouldUseOverflow,
|
|
44
|
+
components: {
|
|
45
|
+
root: elementType,
|
|
46
|
+
citation: 'span',
|
|
47
|
+
divider: 'span',
|
|
48
|
+
graphic: 'span',
|
|
49
|
+
content: 'span'
|
|
50
|
+
},
|
|
51
|
+
root: slot.always(getIntrinsicElementProps(elementType, {
|
|
52
|
+
ref,
|
|
53
|
+
...propsWithAssignedAs
|
|
54
|
+
}), {
|
|
55
|
+
elementType
|
|
56
|
+
}),
|
|
57
|
+
citation,
|
|
58
|
+
divider,
|
|
59
|
+
content,
|
|
60
|
+
graphic
|
|
61
|
+
};
|
|
62
|
+
if (state.graphic && React.isValidElement(state.graphic.children)) {
|
|
63
|
+
state.graphic.children = React.cloneElement(state.graphic.children, {
|
|
64
|
+
className: mergeClasses(state.graphic.children.props.className, referenceExtraClassNames.graphicChild)
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
return state;
|
|
73
68
|
};
|
|
74
|
-
//# sourceMappingURL=useReference.js.map
|
|
@@ -3,11 +3,10 @@ import { renderReferenceList_unstable } from './renderReferenceList';
|
|
|
3
3
|
import { useReferenceList_unstable } from './useReferenceList';
|
|
4
4
|
import { useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
|
|
5
5
|
import { useReferenceListContextValues_unstable } from './useReferenceListContextValues';
|
|
6
|
-
export const ReferenceList = /*#__PURE__*/React.forwardRef((props, ref)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
export const ReferenceList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
7
|
+
const state = useReferenceList_unstable(props, ref);
|
|
8
|
+
const referenceListContextValues = useReferenceListContextValues_unstable(state);
|
|
9
|
+
useReferenceListStyles_unstable(state);
|
|
10
|
+
return renderReferenceList_unstable(state, referenceListContextValues);
|
|
11
11
|
});
|
|
12
12
|
ReferenceList.displayName = 'ReferenceList';
|
|
13
|
-
//# sourceMappingURL=ReferenceList.js.map
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export {};
|
|
2
|
-
//# sourceMappingURL=ReferenceList.types.js.map
|
|
1
|
+
export { };
|
|
@@ -2,4 +2,3 @@ export { ReferenceList } from './ReferenceList';
|
|
|
2
2
|
export { renderReferenceList_unstable } from './renderReferenceList';
|
|
3
3
|
export { useReferenceList_unstable } from './useReferenceList';
|
|
4
4
|
export { referenceListClassNames, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';
|
|
5
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
2
|
import { Overflow, assertSlots } from '@fluentui/react-components';
|
|
3
3
|
import { ReferenceListContextProvider } from '../../contexts/referenceListContext';
|
|
4
4
|
/**
|
|
5
5
|
* Render the final JSX of ReferenceList
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
6
|
+
*/ export const renderReferenceList_unstable = (state, contextValues)=>{
|
|
7
|
+
assertSlots(state);
|
|
8
|
+
const { minVisibleReferences } = state;
|
|
9
|
+
return /*#__PURE__*/ _jsx(ReferenceListContextProvider, {
|
|
10
|
+
value: contextValues.referenceList,
|
|
11
|
+
children: /*#__PURE__*/ _jsx(Overflow, {
|
|
12
|
+
minimumVisible: minVisibleReferences,
|
|
13
|
+
children: /*#__PURE__*/ _jsxs(state.root, {
|
|
14
|
+
children: [
|
|
15
|
+
/*#__PURE__*/ _jsx(state.arrowableRegion, {}),
|
|
16
|
+
state.showMoreButton && /*#__PURE__*/ _jsx(state.showMoreButton, {}),
|
|
17
|
+
state.showLessButton && /*#__PURE__*/ _jsx(state.showLessButton, {})
|
|
18
|
+
]
|
|
19
|
+
})
|
|
20
|
+
})
|
|
21
|
+
});
|
|
21
22
|
};
|
|
22
|
-
//# sourceMappingURL=renderReferenceList.js.map
|
|
@@ -10,84 +10,74 @@ import { useRootStyles } from '../Reference/useReferenceStyles.styles';
|
|
|
10
10
|
*
|
|
11
11
|
* @param props - props from this instance of ReferenceList
|
|
12
12
|
* @param ref - reference to root HTMLElement of ReferenceList
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
children
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}) : undefined
|
|
84
|
-
};
|
|
85
|
-
if (state.showMoreButton) {
|
|
86
|
-
state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);
|
|
87
|
-
}
|
|
88
|
-
if (state.showLessButton) {
|
|
89
|
-
state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);
|
|
90
|
-
}
|
|
91
|
-
return state;
|
|
13
|
+
*/ export const useReferenceList_unstable = (props, ref)=>{
|
|
14
|
+
const { arrowableRegion, children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
|
|
15
|
+
const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);
|
|
16
|
+
const referenceListRef = React.useRef(null);
|
|
17
|
+
const totalReferencesCount = React.Children.count(children);
|
|
18
|
+
const styles = useRootStyles();
|
|
19
|
+
const resolvedChildren = useOverflowMaxVisibleItems({
|
|
20
|
+
additionalCondition: !areReferencesExpanded,
|
|
21
|
+
children,
|
|
22
|
+
maxVisibleItems: maxVisibleReferences,
|
|
23
|
+
minVisibleItems: minVisibleReferences,
|
|
24
|
+
overflowClassName: styles.overflow
|
|
25
|
+
});
|
|
26
|
+
// We keep track of whether we are interacting with the overflow button via keyboard or not.
|
|
27
|
+
const overflowButtonTriggeredViaKeyboard = React.useRef(false);
|
|
28
|
+
const focusAttributes = useArrowNavigationGroup({
|
|
29
|
+
axis: 'both',
|
|
30
|
+
circular: true,
|
|
31
|
+
memorizeCurrent: true
|
|
32
|
+
});
|
|
33
|
+
const onShowMoreButtonClick = React.useCallback(()=>{
|
|
34
|
+
setAreReferencesExpanded(true);
|
|
35
|
+
}, []);
|
|
36
|
+
const onShowLessButtonClick = React.useCallback(()=>{
|
|
37
|
+
setAreReferencesExpanded(false);
|
|
38
|
+
}, []);
|
|
39
|
+
const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
|
|
40
|
+
// Since the overflow button is an OverflowItem that's always visible, we need to account for it.
|
|
41
|
+
const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;
|
|
42
|
+
const state = {
|
|
43
|
+
areReferencesExpanded,
|
|
44
|
+
overflowButtonTriggeredViaKeyboard,
|
|
45
|
+
maxVisibleReferences,
|
|
46
|
+
minVisibleReferences: minVisibleOverflowItems,
|
|
47
|
+
referenceListRef,
|
|
48
|
+
shouldUseOverflow,
|
|
49
|
+
totalReferencesCount,
|
|
50
|
+
components: {
|
|
51
|
+
root: 'div',
|
|
52
|
+
arrowableRegion: 'div',
|
|
53
|
+
showMoreButton: 'span',
|
|
54
|
+
showLessButton: 'span'
|
|
55
|
+
},
|
|
56
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
57
|
+
ref: useMergedRefs(ref, referenceListRef),
|
|
58
|
+
...rest
|
|
59
|
+
}), {
|
|
60
|
+
elementType: 'div'
|
|
61
|
+
}),
|
|
62
|
+
arrowableRegion: slot.always(arrowableRegion, {
|
|
63
|
+
defaultProps: {
|
|
64
|
+
...focusAttributes,
|
|
65
|
+
children: resolvedChildren
|
|
66
|
+
},
|
|
67
|
+
elementType: 'div'
|
|
68
|
+
}),
|
|
69
|
+
showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, {
|
|
70
|
+
elementType: 'span'
|
|
71
|
+
}) : undefined,
|
|
72
|
+
showLessButton: areReferencesExpanded ? slot.optional(showLessButton, {
|
|
73
|
+
elementType: 'span'
|
|
74
|
+
}) : undefined
|
|
75
|
+
};
|
|
76
|
+
if (state.showMoreButton) {
|
|
77
|
+
state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);
|
|
78
|
+
}
|
|
79
|
+
if (state.showLessButton) {
|
|
80
|
+
state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);
|
|
81
|
+
}
|
|
82
|
+
return state;
|
|
92
83
|
};
|
|
93
|
-
//# sourceMappingURL=useReferenceList.js.map
|
|
@@ -1,23 +1,15 @@
|
|
|
1
1
|
export function useReferenceListContextValues_unstable(state) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
referenceListRef,
|
|
16
|
-
shouldUseOverflow,
|
|
17
|
-
totalReferencesCount
|
|
18
|
-
};
|
|
19
|
-
return {
|
|
20
|
-
referenceList
|
|
21
|
-
};
|
|
2
|
+
const { areReferencesExpanded, maxVisibleReferences, overflowButtonTriggeredViaKeyboard, referenceListRef, shouldUseOverflow, totalReferencesCount } = state;
|
|
3
|
+
// This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
|
|
4
|
+
const referenceList = {
|
|
5
|
+
areReferencesExpanded,
|
|
6
|
+
maxVisibleReferences,
|
|
7
|
+
overflowButtonTriggeredViaKeyboard,
|
|
8
|
+
referenceListRef,
|
|
9
|
+
shouldUseOverflow,
|
|
10
|
+
totalReferencesCount
|
|
11
|
+
};
|
|
12
|
+
return {
|
|
13
|
+
referenceList
|
|
14
|
+
};
|
|
22
15
|
}
|
|
23
|
-
//# sourceMappingURL=useReferenceListContextValues.js.map
|
|
@@ -3,10 +3,9 @@ import { useReferenceOverflowButton_unstable } from './useReferenceOverflowButto
|
|
|
3
3
|
import { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';
|
|
4
4
|
import { useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles.styles';
|
|
5
5
|
// ReferenceOverflowButton component - TODO: add more docs
|
|
6
|
-
export const ReferenceOverflowButton = /*#__PURE__*/React.forwardRef((props, ref)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
export const ReferenceOverflowButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
7
|
+
const state = useReferenceOverflowButton_unstable(props, ref);
|
|
8
|
+
useReferenceOverflowButtonStyles_unstable(state);
|
|
9
|
+
return renderReferenceOverflowButton_unstable(state);
|
|
10
10
|
});
|
|
11
11
|
ReferenceOverflowButton.displayName = 'ReferenceOverflowButton';
|
|
12
|
-
//# sourceMappingURL=ReferenceOverflowButton.js.map
|
|
@@ -2,4 +2,3 @@ export { ReferenceOverflowButton } from './ReferenceOverflowButton';
|
|
|
2
2
|
export { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';
|
|
3
3
|
export { useReferenceOverflowButton_unstable } from './useReferenceOverflowButton';
|
|
4
4
|
export { referenceOverflowButtonClassNames, useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles.styles';
|
|
5
|
-
//# sourceMappingURL=index.js.map
|