@fluentui-copilot/react-reference 0.0.0-nightly-20251006-0406-b5da4f6a.1 → 0.0.0-nightly-20251010-0406-7df7c6d1.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/package.json +10 -10
- package/dist/index.d.ts +0 -381
- package/lib/Citation.js +0 -1
- package/lib/Citation.js.map +0 -1
- package/lib/Reference.js +0 -1
- package/lib/Reference.js.map +0 -1
- package/lib/ReferenceList.js +0 -1
- package/lib/ReferenceList.js.map +0 -1
- package/lib/ReferenceOverflowButton.js +0 -1
- package/lib/ReferenceOverflowButton.js.map +0 -1
- package/lib/components/Citation/Citation.js +0 -13
- package/lib/components/Citation/Citation.js.map +0 -1
- package/lib/components/Citation/Citation.types.js +0 -3
- package/lib/components/Citation/Citation.types.js.map +0 -1
- package/lib/components/Citation/index.js +0 -4
- package/lib/components/Citation/index.js.map +0 -1
- package/lib/components/Citation/renderCitation.js +0 -8
- package/lib/components/Citation/renderCitation.js.map +0 -1
- package/lib/components/Citation/useCitation.js +0 -34
- package/lib/components/Citation/useCitation.js.map +0 -1
- package/lib/components/Citation/useCitationStyles.styles.js +0 -59
- package/lib/components/Citation/useCitationStyles.styles.js.map +0 -1
- package/lib/components/Citation/useCitationStyles.styles.raw.js +0 -69
- package/lib/components/Citation/useCitationStyles.styles.raw.js.map +0 -1
- package/lib/components/Reference/Reference.js +0 -10
- package/lib/components/Reference/Reference.js.map +0 -1
- package/lib/components/Reference/Reference.types.js +0 -1
- package/lib/components/Reference/Reference.types.js.map +0 -1
- package/lib/components/Reference/index.js +0 -4
- package/lib/components/Reference/index.js.map +0 -1
- package/lib/components/Reference/renderReference.js +0 -22
- package/lib/components/Reference/renderReference.js.map +0 -1
- package/lib/components/Reference/useReference.js +0 -71
- package/lib/components/Reference/useReference.js.map +0 -1
- package/lib/components/Reference/useReferenceStyles.styles.js +0 -70
- package/lib/components/Reference/useReferenceStyles.styles.js.map +0 -1
- package/lib/components/Reference/useReferenceStyles.styles.raw.js +0 -110
- package/lib/components/Reference/useReferenceStyles.styles.raw.js.map +0 -1
- package/lib/components/ReferenceList/ReferenceList.js +0 -12
- package/lib/components/ReferenceList/ReferenceList.js.map +0 -1
- package/lib/components/ReferenceList/ReferenceList.types.js +0 -1
- package/lib/components/ReferenceList/ReferenceList.types.js.map +0 -1
- package/lib/components/ReferenceList/index.js +0 -4
- package/lib/components/ReferenceList/index.js.map +0 -1
- package/lib/components/ReferenceList/renderReferenceList.js +0 -22
- package/lib/components/ReferenceList/renderReferenceList.js.map +0 -1
- package/lib/components/ReferenceList/useReferenceList.js +0 -83
- package/lib/components/ReferenceList/useReferenceList.js.map +0 -1
- package/lib/components/ReferenceList/useReferenceListContextValues.js +0 -15
- package/lib/components/ReferenceList/useReferenceListContextValues.js.map +0 -1
- package/lib/components/ReferenceList/useReferenceListStyles.styles.js +0 -46
- package/lib/components/ReferenceList/useReferenceListStyles.styles.js.map +0 -1
- package/lib/components/ReferenceList/useReferenceListStyles.styles.raw.js +0 -47
- package/lib/components/ReferenceList/useReferenceListStyles.styles.raw.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/ReferenceOverflowButton.js +0 -11
- package/lib/components/ReferenceOverflowButton/ReferenceOverflowButton.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js +0 -3
- package/lib/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/index.js +0 -4
- package/lib/components/ReferenceOverflowButton/index.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/renderReferenceOverflowButton.js +0 -13
- package/lib/components/ReferenceOverflowButton/renderReferenceOverflowButton.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButton.js +0 -93
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButton.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +0 -37
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +0 -1
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js +0 -45
- package/lib/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map +0 -1
- package/lib/contexts/index.js +0 -1
- package/lib/contexts/index.js.map +0 -1
- package/lib/contexts/referenceListContext.js +0 -16
- package/lib/contexts/referenceListContext.js.map +0 -1
- package/lib/index.js +0 -21
- package/lib/index.js.map +0 -1
- package/lib/utilities/generateReferenceCitationPreview.js +0 -97
- package/lib/utilities/generateReferenceCitationPreview.js.map +0 -1
- package/lib/utilities/index.js +0 -2
- package/lib/utilities/index.js.map +0 -1
- package/lib/utilities/useReferenceCitationPreview.js +0 -18
- package/lib/utilities/useReferenceCitationPreview.js.map +0 -1
- package/lib-commonjs/Citation.js +0 -28
- package/lib-commonjs/Citation.js.map +0 -1
- package/lib-commonjs/Reference.js +0 -31
- package/lib-commonjs/Reference.js.map +0 -1
- package/lib-commonjs/ReferenceList.js +0 -28
- package/lib-commonjs/ReferenceList.js.map +0 -1
- package/lib-commonjs/ReferenceOverflowButton.js +0 -28
- package/lib-commonjs/ReferenceOverflowButton.js.map +0 -1
- package/lib-commonjs/components/Citation/Citation.js +0 -23
- package/lib-commonjs/components/Citation/Citation.js.map +0 -1
- package/lib-commonjs/components/Citation/Citation.types.js +0 -6
- package/lib-commonjs/components/Citation/Citation.types.js.map +0 -1
- package/lib-commonjs/components/Citation/index.js +0 -31
- package/lib-commonjs/components/Citation/index.js.map +0 -1
- package/lib-commonjs/components/Citation/renderCitation.js +0 -16
- package/lib-commonjs/components/Citation/renderCitation.js.map +0 -1
- package/lib-commonjs/components/Citation/useCitation.js +0 -36
- package/lib-commonjs/components/Citation/useCitation.js.map +0 -1
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js +0 -116
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Citation/useCitationStyles.styles.raw.js +0 -85
- package/lib-commonjs/components/Citation/useCitationStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/Reference/Reference.js +0 -21
- package/lib-commonjs/components/Reference/Reference.js.map +0 -1
- package/lib-commonjs/components/Reference/Reference.types.js +0 -4
- package/lib-commonjs/components/Reference/Reference.types.js.map +0 -1
- package/lib-commonjs/components/Reference/index.js +0 -34
- package/lib-commonjs/components/Reference/index.js.map +0 -1
- package/lib-commonjs/components/Reference/renderReference.js +0 -32
- package/lib-commonjs/components/Reference/renderReference.js.map +0 -1
- package/lib-commonjs/components/Reference/useReference.js +0 -73
- package/lib-commonjs/components/Reference/useReference.js.map +0 -1
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.js +0 -109
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.js.map +0 -1
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.raw.js +0 -132
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/ReferenceList.js +0 -23
- package/lib-commonjs/components/ReferenceList/ReferenceList.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/ReferenceList.types.js +0 -4
- package/lib-commonjs/components/ReferenceList/ReferenceList.types.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/index.js +0 -31
- package/lib-commonjs/components/ReferenceList/index.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/renderReferenceList.js +0 -30
- package/lib-commonjs/components/ReferenceList/renderReferenceList.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/useReferenceList.js +0 -86
- package/lib-commonjs/components/ReferenceList/useReferenceList.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListContextValues.js +0 -25
- package/lib-commonjs/components/ReferenceList/useReferenceListContextValues.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.js +0 -62
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.raw.js +0 -63
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.js +0 -21
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js +0 -6
- package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/index.js +0 -31
- package/lib-commonjs/components/ReferenceOverflowButton/index.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/renderReferenceOverflowButton.js +0 -21
- package/lib-commonjs/components/ReferenceOverflowButton/renderReferenceOverflowButton.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButton.js +0 -96
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButton.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js +0 -55
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +0 -1
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js +0 -61
- package/lib-commonjs/components/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/contexts/index.js +0 -22
- package/lib-commonjs/contexts/index.js.map +0 -1
- package/lib-commonjs/contexts/referenceListContext.js +0 -37
- package/lib-commonjs/contexts/referenceListContext.js.map +0 -1
- package/lib-commonjs/index.js +0 -144
- package/lib-commonjs/index.js.map +0 -1
- package/lib-commonjs/utilities/generateReferenceCitationPreview.js +0 -97
- package/lib-commonjs/utilities/generateReferenceCitationPreview.js.map +0 -1
- package/lib-commonjs/utilities/index.js +0 -20
- package/lib-commonjs/utilities/index.js.map +0 -1
- package/lib-commonjs/utilities/useReferenceCitationPreview.js +0 -18
- package/lib-commonjs/utilities/useReferenceCitationPreview.js.map +0 -1
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
ReferenceList: function() {
|
|
13
|
-
return _ReferenceList.ReferenceList;
|
|
14
|
-
},
|
|
15
|
-
referenceListClassNames: function() {
|
|
16
|
-
return _useReferenceListStylesstyles.referenceListClassNames;
|
|
17
|
-
},
|
|
18
|
-
renderReferenceList_unstable: function() {
|
|
19
|
-
return _renderReferenceList.renderReferenceList_unstable;
|
|
20
|
-
},
|
|
21
|
-
useReferenceListStyles_unstable: function() {
|
|
22
|
-
return _useReferenceListStylesstyles.useReferenceListStyles_unstable;
|
|
23
|
-
},
|
|
24
|
-
useReferenceList_unstable: function() {
|
|
25
|
-
return _useReferenceList.useReferenceList_unstable;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const _ReferenceList = require("./ReferenceList");
|
|
29
|
-
const _renderReferenceList = require("./renderReferenceList");
|
|
30
|
-
const _useReferenceList = require("./useReferenceList");
|
|
31
|
-
const _useReferenceListStylesstyles = require("./useReferenceListStyles.styles");
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { ReferenceList } from './ReferenceList';\nexport type { ReferenceListContextValues, ReferenceListProps, ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nexport { renderReferenceList_unstable } from './renderReferenceList';\nexport { useReferenceList_unstable } from './useReferenceList';\nexport { referenceListClassNames, useReferenceListStyles_unstable } from './useReferenceListStyles.styles';\n"],"names":["ReferenceList","referenceListClassNames","renderReferenceList_unstable","useReferenceListStyles_unstable","useReferenceList_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAIbC,uBAAuB;eAAvBA,qDAAuB;;IAFvBC,4BAA4B;eAA5BA,iDAA4B;;IAEHC,+BAA+B;eAA/BA,6DAA+B;;IADxDC,yBAAyB;eAAzBA,2CAAyB;;;+BAHJ;qCAEe;kCACH;8CAC+B"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "renderReferenceList_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return renderReferenceList_unstable;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
13
|
-
const _referenceListContext = require("../../contexts/referenceListContext");
|
|
14
|
-
const renderReferenceList_unstable = (state, contextValues)=>{
|
|
15
|
-
(0, _reactcomponents.assertSlots)(state);
|
|
16
|
-
const { minVisibleReferences } = state;
|
|
17
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_referenceListContext.ReferenceListContextProvider, {
|
|
18
|
-
value: contextValues.referenceList,
|
|
19
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.Overflow, {
|
|
20
|
-
minimumVisible: minVisibleReferences,
|
|
21
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
|
22
|
-
children: [
|
|
23
|
-
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.arrowableRegion, {}),
|
|
24
|
-
state.showMoreButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.showMoreButton, {}),
|
|
25
|
-
state.showLessButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.showLessButton, {})
|
|
26
|
-
]
|
|
27
|
-
})
|
|
28
|
-
})
|
|
29
|
-
});
|
|
30
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["renderReferenceList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Overflow, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceListState, ReferenceListSlots, ReferenceListContextValues } from './ReferenceList.types';\nimport { ReferenceListContextProvider } from '../../contexts/referenceListContext';\n\n/**\n * Render the final JSX of ReferenceList\n */\nexport const renderReferenceList_unstable = (state: ReferenceListState, contextValues: ReferenceListContextValues) => {\n assertSlots<ReferenceListSlots>(state);\n\n const { minVisibleReferences } = state;\n\n return (\n <ReferenceListContextProvider value={contextValues.referenceList}>\n <Overflow minimumVisible={minVisibleReferences}>\n <state.root>\n <state.arrowableRegion />\n {state.showMoreButton && <state.showMoreButton />}\n {state.showLessButton && <state.showLessButton />}\n </state.root>\n </Overflow>\n </ReferenceListContextProvider>\n );\n};\n"],"names":["renderReferenceList_unstable","state","contextValues","assertSlots","minVisibleReferences","_jsx","ReferenceListContextProvider","value","referenceList","Overflow","minimumVisible","_jsxs","root","arrowableRegion","showMoreButton","showLessButton"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;iCAEsC;sCAEO;AAKtC,MAAMA,+BAA+B,CAACC,OAA2BC;IACtEC,IAAAA,4BAAAA,EAAgCF;IAEhC,MAAM,EAAEG,oBAAoB,EAAE,GAAGH;IAEjC,OAAA,WAAA,GACEI,IAAAA,eAAA,EAACC,kDAAAA,EAAAA;QAA6BC,OAAOL,cAAcM,aAAa;kBAC9D,WAAA,GAAAH,IAAAA,eAAA,EAACI,yBAAAA,EAAAA;YAASC,gBAAgBN;sBACxB,WAAA,GAAAO,IAAAA,gBAAA,EAACV,MAAMW,IAAI,EAAA;;kCACTP,IAAAA,eAAA,EAACJ,MAAMY,eAAe,EAAA,CAAA;oBACrBZ,MAAMa,cAAc,IAAA,WAAA,GAAIT,IAAAA,eAAA,EAACJ,MAAMa,cAAc,EAAA,CAAA;oBAC7Cb,MAAMc,cAAc,IAAA,WAAA,GAAIV,IAAAA,eAAA,EAACJ,MAAMc,cAAc,EAAA,CAAA;;;;;AAKxD"}
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "useReferenceList_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return useReferenceList_unstable;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
14
|
-
const _reactutilities = require("@fluentui-copilot/react-utilities");
|
|
15
|
-
const _useReferenceStylesstyles = require("../Reference/useReferenceStyles.styles");
|
|
16
|
-
const useReferenceList_unstable = (props, ref)=>{
|
|
17
|
-
const { arrowableRegion, children, maxVisibleReferences, minVisibleReferences, showLessButton, showMoreButton, ...rest } = props;
|
|
18
|
-
const [areReferencesExpanded, setAreReferencesExpanded] = _react.useState(false);
|
|
19
|
-
const referenceListRef = _react.useRef(null);
|
|
20
|
-
const totalReferencesCount = _react.Children.count(children);
|
|
21
|
-
const styles = (0, _useReferenceStylesstyles.useRootStyles)();
|
|
22
|
-
const resolvedChildren = (0, _reactutilities.useOverflowMaxVisibleItems)({
|
|
23
|
-
additionalCondition: !areReferencesExpanded,
|
|
24
|
-
children,
|
|
25
|
-
maxVisibleItems: maxVisibleReferences,
|
|
26
|
-
minVisibleItems: minVisibleReferences,
|
|
27
|
-
overflowClassName: styles.overflow
|
|
28
|
-
});
|
|
29
|
-
// We keep track of whether we are interacting with the overflow button via keyboard or not.
|
|
30
|
-
const overflowButtonTriggeredViaKeyboard = _react.useRef(false);
|
|
31
|
-
const focusAttributes = (0, _reactcomponents.useArrowNavigationGroup)({
|
|
32
|
-
axis: 'both',
|
|
33
|
-
circular: true,
|
|
34
|
-
memorizeCurrent: true
|
|
35
|
-
});
|
|
36
|
-
const onShowMoreButtonClick = _react.useCallback(()=>{
|
|
37
|
-
setAreReferencesExpanded(true);
|
|
38
|
-
}, []);
|
|
39
|
-
const onShowLessButtonClick = _react.useCallback(()=>{
|
|
40
|
-
setAreReferencesExpanded(false);
|
|
41
|
-
}, []);
|
|
42
|
-
const shouldUseOverflow = (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) && maxVisibleReferences !== undefined && !areReferencesExpanded;
|
|
43
|
-
// Since the overflow button is an OverflowItem that's always visible, we need to account for it.
|
|
44
|
-
const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;
|
|
45
|
-
const state = {
|
|
46
|
-
areReferencesExpanded,
|
|
47
|
-
overflowButtonTriggeredViaKeyboard,
|
|
48
|
-
maxVisibleReferences,
|
|
49
|
-
minVisibleReferences: minVisibleOverflowItems,
|
|
50
|
-
referenceListRef,
|
|
51
|
-
shouldUseOverflow,
|
|
52
|
-
totalReferencesCount,
|
|
53
|
-
components: {
|
|
54
|
-
root: 'div',
|
|
55
|
-
arrowableRegion: 'div',
|
|
56
|
-
showMoreButton: 'span',
|
|
57
|
-
showLessButton: 'span'
|
|
58
|
-
},
|
|
59
|
-
root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('div', {
|
|
60
|
-
ref: (0, _reactcomponents.useMergedRefs)(ref, referenceListRef),
|
|
61
|
-
...rest
|
|
62
|
-
}), {
|
|
63
|
-
elementType: 'div'
|
|
64
|
-
}),
|
|
65
|
-
arrowableRegion: _reactcomponents.slot.always(arrowableRegion, {
|
|
66
|
-
defaultProps: {
|
|
67
|
-
...focusAttributes,
|
|
68
|
-
children: resolvedChildren
|
|
69
|
-
},
|
|
70
|
-
elementType: 'div'
|
|
71
|
-
}),
|
|
72
|
-
showMoreButton: shouldUseOverflow ? _reactcomponents.slot.optional(showMoreButton, {
|
|
73
|
-
elementType: 'span'
|
|
74
|
-
}) : undefined,
|
|
75
|
-
showLessButton: areReferencesExpanded ? _reactcomponents.slot.optional(showLessButton, {
|
|
76
|
-
elementType: 'span'
|
|
77
|
-
}) : undefined
|
|
78
|
-
};
|
|
79
|
-
if (state.showMoreButton) {
|
|
80
|
-
state.showMoreButton.onClick = (0, _reactcomponents.mergeCallbacks)(onShowMoreButtonClick, state.showMoreButton.onClick);
|
|
81
|
-
}
|
|
82
|
-
if (state.showLessButton) {
|
|
83
|
-
state.showLessButton.onClick = (0, _reactcomponents.mergeCallbacks)(onShowLessButtonClick, state.showLessButton.onClick);
|
|
84
|
-
}
|
|
85
|
-
return state;
|
|
86
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport { useOverflowMaxVisibleItems } from '@fluentui-copilot/react-utilities';\nimport { useRootStyles } from '../Reference/useReferenceStyles.styles';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\n\n/**\n * Create the state required to render ReferenceList.\n *\n * The returned state can be modified with hooks such as useReferenceListStyles_unstable,\n * before being passed to renderReferenceList_unstable.\n *\n * @param props - props from this instance of ReferenceList\n * @param ref - reference to root HTMLElement of ReferenceList\n */\nexport const useReferenceList_unstable = (\n props: ReferenceListProps,\n ref: React.Ref<HTMLDivElement>,\n): ReferenceListState => {\n const {\n arrowableRegion,\n children,\n maxVisibleReferences,\n minVisibleReferences,\n showLessButton,\n showMoreButton,\n ...rest\n } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const totalReferencesCount = React.Children.count(children);\n const styles = useRootStyles();\n const resolvedChildren = useOverflowMaxVisibleItems({\n additionalCondition: !areReferencesExpanded,\n children,\n maxVisibleItems: maxVisibleReferences,\n minVisibleItems: minVisibleReferences,\n overflowClassName: styles.overflow,\n });\n\n // We keep track of whether we are interacting with the overflow button via keyboard or not.\n const overflowButtonTriggeredViaKeyboard = React.useRef(false);\n\n const focusAttributes = useArrowNavigationGroup({\n axis: 'both',\n circular: true,\n memorizeCurrent: true,\n });\n\n const onShowMoreButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(true);\n }, []);\n\n const onShowLessButtonClick = React.useCallback<React.MouseEventHandler<HTMLButtonElement>>(() => {\n setAreReferencesExpanded(false);\n }, []);\n\n const shouldUseOverflow =\n (minVisibleReferences === undefined || minVisibleReferences < totalReferencesCount) &&\n maxVisibleReferences !== undefined &&\n !areReferencesExpanded;\n\n // Since the overflow button is an OverflowItem that's always visible, we need to account for it.\n const minVisibleOverflowItems = minVisibleReferences ? minVisibleReferences + 1 : 1;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n minVisibleReferences: minVisibleOverflowItems,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n arrowableRegion: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...rest,\n }),\n { elementType: 'div' },\n ),\n arrowableRegion: slot.always(arrowableRegion, {\n defaultProps: { ...focusAttributes, children: resolvedChildren },\n elementType: 'div',\n }),\n showMoreButton: shouldUseOverflow ? slot.optional(showMoreButton, { elementType: 'span' }) : undefined,\n showLessButton: areReferencesExpanded ? slot.optional(showLessButton, { elementType: 'span' }) : undefined,\n };\n\n if (state.showMoreButton) {\n state.showMoreButton.onClick = mergeCallbacks(onShowMoreButtonClick, state.showMoreButton.onClick);\n }\n\n if (state.showLessButton) {\n state.showLessButton.onClick = mergeCallbacks(onShowLessButtonClick, state.showLessButton.onClick);\n }\n\n return state;\n};\n"],"names":["useReferenceList_unstable","props","ref","arrowableRegion","children","maxVisibleReferences","minVisibleReferences","showLessButton","showMoreButton","rest","areReferencesExpanded","setAreReferencesExpanded","React","useState","referenceListRef","useRef","totalReferencesCount","Children","count","styles","useRootStyles","resolvedChildren","useOverflowMaxVisibleItems","additionalCondition","maxVisibleItems","minVisibleItems","overflowClassName","overflow","overflowButtonTriggeredViaKeyboard","focusAttributes","useArrowNavigationGroup","axis","circular","memorizeCurrent","onShowMoreButtonClick","useCallback","onShowLessButtonClick","shouldUseOverflow","undefined","minVisibleOverflowItems","state","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","defaultProps","optional","onClick","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqBaA;;;eAAAA;;;;iEArBU;iCAOhB;gCACoC;0CACb;AAYvB,MAAMA,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EACJC,eAAe,EACfC,QAAQ,EACRC,oBAAoB,EACpBC,oBAAoB,EACpBC,cAAc,EACdC,cAAc,EACd,GAAGC,MACJ,GAAGR;IAEJ,MAAM,CAACS,uBAAuBC,yBAAyB,GAAGC,OAAMC,QAAQ,CAAC;IACzE,MAAMC,mBAAmBF,OAAMG,MAAM,CAAiB;IAEtD,MAAMC,uBAAuBJ,OAAMK,QAAQ,CAACC,KAAK,CAACd;IAClD,MAAMe,SAASC,IAAAA,uCAAAA;IACf,MAAMC,mBAAmBC,IAAAA,0CAAAA,EAA2B;QAClDC,qBAAqB,CAACb;QACtBN;QACAoB,iBAAiBnB;QACjBoB,iBAAiBnB;QACjBoB,mBAAmBP,OAAOQ,QAAQ;IACpC;IAEA,4FAA4F;IAC5F,MAAMC,qCAAqChB,OAAMG,MAAM,CAAC;IAExD,MAAMc,kBAAkBC,IAAAA,wCAAAA,EAAwB;QAC9CC,MAAM;QACNC,UAAU;QACVC,iBAAiB;IACnB;IAEA,MAAMC,wBAAwBtB,OAAMuB,WAAW,CAA6C;QAC1FxB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAMyB,wBAAwBxB,OAAMuB,WAAW,CAA6C;QAC1FxB,yBAAyB;IAC3B,GAAG,EAAE;IAEL,MAAM0B,oBACJ,AAAC/B,CAAAA,yBAAyBgC,aAAahC,uBAAuBU,oBAAAA,KAC9DX,yBAAyBiC,aACzB,CAAC5B;IAEH,iGAAiG;IACjG,MAAM6B,0BAA0BjC,uBAAuBA,uBAAuB,IAAI;IAElF,MAAMkC,QAA4B;QAChC9B;QACAkB;QACAvB;QACAC,sBAAsBiC;QACtBzB;QACAuB;QACArB;QAEAyB,YAAY;YACVC,MAAM;YACNvC,iBAAiB;YACjBK,gBAAgB;YAChBD,gBAAgB;QAClB;QACAmC,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9B3C,KAAK4C,IAAAA,8BAAAA,EAAc5C,KAAKY;YACxB,GAAGL,IAAI;QACT,IACA;YAAEsC,aAAa;QAAM;QAEvB5C,iBAAiBwC,qBAAAA,CAAKC,MAAM,CAACzC,iBAAiB;YAC5C6C,cAAc;gBAAE,GAAGnB,eAAe;gBAAEzB,UAAUiB;YAAiB;YAC/D0B,aAAa;QACf;QACAvC,gBAAgB6B,oBAAoBM,qBAAAA,CAAKM,QAAQ,CAACzC,gBAAgB;YAAEuC,aAAa;QAAO,KAAKT;QAC7F/B,gBAAgBG,wBAAwBiC,qBAAAA,CAAKM,QAAQ,CAAC1C,gBAAgB;YAAEwC,aAAa;QAAO,KAAKT;IACnG;IAEA,IAAIE,MAAMhC,cAAc,EAAE;QACxBgC,MAAMhC,cAAc,CAAC0C,OAAO,GAAGC,IAAAA,+BAAAA,EAAejB,uBAAuBM,MAAMhC,cAAc,CAAC0C,OAAO;IACnG;IAEA,IAAIV,MAAMjC,cAAc,EAAE;QACxBiC,MAAMjC,cAAc,CAAC2C,OAAO,GAAGC,IAAAA,+BAAAA,EAAef,uBAAuBI,MAAMjC,cAAc,CAAC2C,OAAO;IACnG;IAEA,OAAOV;AACT"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "useReferenceListContextValues_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return useReferenceListContextValues_unstable;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
function useReferenceListContextValues_unstable(state) {
|
|
12
|
-
const { areReferencesExpanded, maxVisibleReferences, overflowButtonTriggeredViaKeyboard, referenceListRef, shouldUseOverflow, totalReferencesCount } = state;
|
|
13
|
-
// This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
|
|
14
|
-
const referenceList = {
|
|
15
|
-
areReferencesExpanded,
|
|
16
|
-
maxVisibleReferences,
|
|
17
|
-
overflowButtonTriggeredViaKeyboard,
|
|
18
|
-
referenceListRef,
|
|
19
|
-
shouldUseOverflow,
|
|
20
|
-
totalReferencesCount
|
|
21
|
-
};
|
|
22
|
-
return {
|
|
23
|
-
referenceList
|
|
24
|
-
};
|
|
25
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceListContextValues.ts"],"sourcesContent":["import type { ReferenceListState, ReferenceListContextValues } from './ReferenceList.types';\n\nexport function useReferenceListContextValues_unstable(state: ReferenceListState): ReferenceListContextValues {\n const {\n areReferencesExpanded,\n maxVisibleReferences,\n overflowButtonTriggeredViaKeyboard,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", there is no sense to memoize it\n const referenceList = {\n areReferencesExpanded,\n maxVisibleReferences,\n overflowButtonTriggeredViaKeyboard,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n };\n\n return { referenceList };\n}\n"],"names":["useReferenceListContextValues_unstable","state","areReferencesExpanded","maxVisibleReferences","overflowButtonTriggeredViaKeyboard","referenceListRef","shouldUseOverflow","totalReferencesCount","referenceList"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,uCAAuCC,KAAyB;IAC9E,MAAM,EACJC,qBAAqB,EACrBC,oBAAoB,EACpBC,kCAAkC,EAClCC,gBAAgB,EAChBC,iBAAiB,EACjBC,oBAAoB,EACrB,GAAGN;IAEJ,mGAAmG;IACnG,MAAMO,gBAAgB;QACpBN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,OAAO;QAAEC;IAAc;AACzB"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
referenceListClassNames: function() {
|
|
13
|
-
return referenceListClassNames;
|
|
14
|
-
},
|
|
15
|
-
useReferenceListStyles_unstable: function() {
|
|
16
|
-
return useReferenceListStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
-
const referenceListClassNames = {
|
|
21
|
-
root: 'fai-ReferenceList',
|
|
22
|
-
arrowableRegion: 'fai-ReferenceList__arrowableRegion',
|
|
23
|
-
showMoreButton: 'fai-ReferenceList__showMoreButton',
|
|
24
|
-
showLessButton: 'fai-ReferenceList__showLessButton'
|
|
25
|
-
};
|
|
26
|
-
/**
|
|
27
|
-
* Styles for the root slot
|
|
28
|
-
*/ const useRootBaseClassName = (0, _reactcomponents.__resetStyles)("rylvie1", null, [
|
|
29
|
-
".rylvie1{display:flex;flex-direction:row;gap:var(--spacingVerticalXS) var(--spacingHorizontalXS);}"
|
|
30
|
-
]);
|
|
31
|
-
const useRootStyles = (0, _reactcomponents.__styles)({
|
|
32
|
-
referencesExpanded: {
|
|
33
|
-
Eh141a: "fni485r"
|
|
34
|
-
}
|
|
35
|
-
}, {
|
|
36
|
-
d: [
|
|
37
|
-
".fni485r{flex-wrap:wrap;}"
|
|
38
|
-
]
|
|
39
|
-
});
|
|
40
|
-
const useArrowableRegionBaseClassName = (0, _reactcomponents.__resetStyles)("rhs5m2c", null, [
|
|
41
|
-
".rhs5m2c{display:contents;max-width:100%;}"
|
|
42
|
-
]);
|
|
43
|
-
const useOverflowButtonBaseClassName = (0, _reactcomponents.__resetStyles)("rulvm7g", null, [
|
|
44
|
-
".rulvm7g{display:inline-flex;flex-shrink:0;}"
|
|
45
|
-
]);
|
|
46
|
-
const useReferenceListStyles_unstable = (state)=>{
|
|
47
|
-
'use no memo';
|
|
48
|
-
const { areReferencesExpanded, shouldUseOverflow } = state;
|
|
49
|
-
const rootBaseClassName = useRootBaseClassName();
|
|
50
|
-
const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();
|
|
51
|
-
const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
|
|
52
|
-
const rootStyles = useRootStyles();
|
|
53
|
-
state.root.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
|
|
54
|
-
state.arrowableRegion.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.arrowableRegion, arrowableRegionBaseClassName, state.arrowableRegion.className);
|
|
55
|
-
if (state.showMoreButton) {
|
|
56
|
-
state.showMoreButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
|
|
57
|
-
}
|
|
58
|
-
if (state.showLessButton) {
|
|
59
|
-
state.showLessButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
|
|
60
|
-
}
|
|
61
|
-
return state;
|
|
62
|
-
}; //# sourceMappingURL=useReferenceListStyles.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n arrowableRegion: 'fai-ReferenceList__arrowableRegion',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useArrowableRegionBaseClassName = makeResetStyles({\n display: 'contents',\n maxWidth: '100%',\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n state.arrowableRegion.className = mergeClasses(\n referenceListClassNames.arrowableRegion,\n arrowableRegionBaseClassName,\n state.arrowableRegion.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["referenceListClassNames","useOverflowButtonBaseClassName","makeResetStyles","root","arrowableRegion","showMoreButton","showLessButton","display","__resetStyles","flexDirection","__styles","spacingVerticalXS","Eh141a","useArrowableRegionBaseClassName","areReferencesExpanded","state","rootBaseClassName","useRootBaseClassName","arrowableRegionBaseClassName","shouldUseOverflow","overflowButtonBaseClassName","rootStyles","useRootStyles","mergeClasses","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,uBAAAA;eAAAA;;IA2BPC,+BAAiCC;eAAjCD;;;iCAhC4C;AAK3C,MAAMD,0BAA8D;UACzEG;qBACAC;oBACAC;oBACAC;AACF;AAEA;;CAEC,SAECC,uBAASC,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;MACTC,gBAAeC,IAAAA,yBAAA,EAAA;wBACAC;QACjBC,QAAA;IAEA;;;;KAEc;;AAEd,MAAAC,kCAAAL,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAEA,MAAMK,iCAAAA,IAAAA,8BAAkCX,EAAAA,WAAgB,MAAA;IAAA;CAAA;AAKlDD,MAAAA,kCAAiCC,CAAAA;;IAGvC,MAAA,EAEAY,qBAAA,qBAEC,GACDC;UACEC,oBAAAC;UAEAC,+BAA+BC;UAE/BC,8BAA0BH;UAC1BI,aAAMH;UACNf,IAAMiB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,wBAA8BnB,IAAAA,EAAAA,mBAAAA,CAAAA,yBAAAA,CAAAA,iBAAAA,KAAAA,WAAAA,kBAAAA,EAAAA,MAAAA,IAAAA,CAAAA,SAAAA;UACpCG,eAAmBkB,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,wBAAAA,eAAAA,EAAAA,8BAAAA,MAAAA,eAAAA,CAAAA,SAAAA;QAEnBP,MAAMZ,cAAc,EAAGoB;QAOvBR,MAAMX,cAAAA,CAAeoB,SAACA,GAASD,IAAAA,6BAAGA,EAAAA,wBAChCvB,cAAwBI,EAAegB,6BACvCF,MACAH,cAAMX,CAAAA,SAAgBoB;;cAItBT,cAAMV,EAAc;QAKtBU,MAAAT,cAAA,CAAAkB,SAAA,GAAAD,IAAAA,6BAAA,EAAAvB,wBAAAM,cAAA,EAAAc,6BAAAL,MAAAT,cAAA,CAAAkB,SAAA;;WAGET;4DAOKA"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
referenceListClassNames: function() {
|
|
13
|
-
return referenceListClassNames;
|
|
14
|
-
},
|
|
15
|
-
useReferenceListStyles_unstable: function() {
|
|
16
|
-
return useReferenceListStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
-
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
-
const referenceListClassNames = {
|
|
22
|
-
root: 'fai-ReferenceList',
|
|
23
|
-
arrowableRegion: 'fai-ReferenceList__arrowableRegion',
|
|
24
|
-
showMoreButton: 'fai-ReferenceList__showMoreButton',
|
|
25
|
-
showLessButton: 'fai-ReferenceList__showLessButton'
|
|
26
|
-
};
|
|
27
|
-
/**
|
|
28
|
-
* Styles for the root slot
|
|
29
|
-
*/ const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
30
|
-
display: 'flex',
|
|
31
|
-
flexDirection: 'row',
|
|
32
|
-
gap: `${_tokens.tokens.spacingVerticalXS} ${_tokens.tokens.spacingHorizontalXS}`
|
|
33
|
-
});
|
|
34
|
-
const useRootStyles = (0, _reactcomponents.makeStyles)({
|
|
35
|
-
referencesExpanded: {
|
|
36
|
-
flexWrap: 'wrap'
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
const useArrowableRegionBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
40
|
-
display: 'contents',
|
|
41
|
-
maxWidth: '100%'
|
|
42
|
-
});
|
|
43
|
-
const useOverflowButtonBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
44
|
-
display: 'inline-flex',
|
|
45
|
-
flexShrink: 0
|
|
46
|
-
});
|
|
47
|
-
const useReferenceListStyles_unstable = (state)=>{
|
|
48
|
-
'use no memo';
|
|
49
|
-
const { areReferencesExpanded, shouldUseOverflow } = state;
|
|
50
|
-
const rootBaseClassName = useRootBaseClassName();
|
|
51
|
-
const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();
|
|
52
|
-
const overflowButtonBaseClassName = useOverflowButtonBaseClassName();
|
|
53
|
-
const rootStyles = useRootStyles();
|
|
54
|
-
state.root.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.root, rootBaseClassName, (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded, state.root.className);
|
|
55
|
-
state.arrowableRegion.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.arrowableRegion, arrowableRegionBaseClassName, state.arrowableRegion.className);
|
|
56
|
-
if (state.showMoreButton) {
|
|
57
|
-
state.showMoreButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showMoreButton, overflowButtonBaseClassName, state.showMoreButton.className);
|
|
58
|
-
}
|
|
59
|
-
if (state.showLessButton) {
|
|
60
|
-
state.showLessButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
|
|
61
|
-
}
|
|
62
|
-
return state;
|
|
63
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceListSlots, ReferenceListState } from './ReferenceList.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceListClassNames: SlotClassNames<ReferenceListSlots> = {\n root: 'fai-ReferenceList',\n arrowableRegion: 'fai-ReferenceList__arrowableRegion',\n showMoreButton: 'fai-ReferenceList__showMoreButton',\n showLessButton: 'fai-ReferenceList__showLessButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n gap: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n});\n\nconst useRootStyles = makeStyles({\n referencesExpanded: {\n flexWrap: 'wrap',\n },\n});\n\nconst useArrowableRegionBaseClassName = makeResetStyles({\n display: 'contents',\n maxWidth: '100%',\n});\n\nconst useOverflowButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n flexShrink: 0,\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n 'use no memo';\n\n const { areReferencesExpanded, shouldUseOverflow } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const arrowableRegionBaseClassName = useArrowableRegionBaseClassName();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.className,\n );\n\n state.arrowableRegion.className = mergeClasses(\n referenceListClassNames.arrowableRegion,\n arrowableRegionBaseClassName,\n state.arrowableRegion.className,\n );\n\n if (state.showMoreButton) {\n state.showMoreButton.className = mergeClasses(\n referenceListClassNames.showMoreButton,\n overflowButtonBaseClassName,\n state.showMoreButton.className,\n );\n }\n\n if (state.showLessButton) {\n state.showLessButton.className = mergeClasses(\n referenceListClassNames.showLessButton,\n overflowButtonBaseClassName,\n state.showLessButton.className,\n );\n }\n\n return state;\n};\n"],"names":["referenceListClassNames","useReferenceListStyles_unstable","root","arrowableRegion","showMoreButton","showLessButton","useRootBaseClassName","makeResetStyles","display","flexDirection","gap","tokens","spacingVerticalXS","spacingHorizontalXS","useRootStyles","makeStyles","referencesExpanded","flexWrap","useArrowableRegionBaseClassName","maxWidth","useOverflowButtonBaseClassName","flexShrink","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","arrowableRegionBaseClassName","overflowButtonBaseClassName","rootStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,uBAAAA;eAAAA;;IAmCAC,+BAAAA;eAAAA;;;iCAxC6C;wBACnC;AAIhB,MAAMD,0BAA8D;IACzEE,MAAM;IACNC,iBAAiB;IACjBC,gBAAgB;IAChBC,gBAAgB;AAClB;AAEA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;IAC3CC,SAAS;IACTC,eAAe;IACfC,KAAK,CAAC,EAAEC,cAAAA,CAAOC,iBAAiB,CAAC,CAAC,EAAED,cAAAA,CAAOE,mBAAmB,CAAC,CAAC;AAClE;AAEA,MAAMC,gBAAgBC,IAAAA,2BAAAA,EAAW;IAC/BC,oBAAoB;QAClBC,UAAU;IACZ;AACF;AAEA,MAAMC,kCAAkCX,IAAAA,gCAAAA,EAAgB;IACtDC,SAAS;IACTW,UAAU;AACZ;AAEA,MAAMC,iCAAiCb,IAAAA,gCAAAA,EAAgB;IACrDC,SAAS;IACTa,YAAY;AACd;AAKO,MAAMpB,kCAAkC,CAACqB;IAC9C;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,iBAAiB,EAAE,GAAGF;IAErD,MAAMG,oBAAoBnB;IAC1B,MAAMoB,+BAA+BR;IACrC,MAAMS,8BAA8BP;IACpC,MAAMQ,aAAad;IAEnBQ,MAAMpB,IAAI,CAAC2B,SAAS,GAAGC,IAAAA,6BAAAA,EACrB9B,wBAAwBE,IAAI,EAC5BuB,mBACA,AAACF,CAAAA,yBAAyB,CAACC,iBAAAA,KAAsBI,WAAWZ,kBAAkB,EAC9EM,MAAMpB,IAAI,CAAC2B,SAAS;IAGtBP,MAAMnB,eAAe,CAAC0B,SAAS,GAAGC,IAAAA,6BAAAA,EAChC9B,wBAAwBG,eAAe,EACvCuB,8BACAJ,MAAMnB,eAAe,CAAC0B,SAAS;IAGjC,IAAIP,MAAMlB,cAAc,EAAE;QACxBkB,MAAMlB,cAAc,CAACyB,SAAS,GAAGC,IAAAA,6BAAAA,EAC/B9B,wBAAwBI,cAAc,EACtCuB,6BACAL,MAAMlB,cAAc,CAACyB,SAAS;IAElC;IAEA,IAAIP,MAAMjB,cAAc,EAAE;QACxBiB,MAAMjB,cAAc,CAACwB,SAAS,GAAGC,IAAAA,6BAAAA,EAC/B9B,wBAAwBK,cAAc,EACtCsB,6BACAL,MAAMjB,cAAc,CAACwB,SAAS;IAElC;IAEA,OAAOP;AACT"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "ReferenceOverflowButton", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return ReferenceOverflowButton;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
-
const _useReferenceOverflowButton = require("./useReferenceOverflowButton");
|
|
14
|
-
const _renderReferenceOverflowButton = require("./renderReferenceOverflowButton");
|
|
15
|
-
const _useReferenceOverflowButtonStylesstyles = require("./useReferenceOverflowButtonStyles.styles");
|
|
16
|
-
const ReferenceOverflowButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
17
|
-
const state = (0, _useReferenceOverflowButton.useReferenceOverflowButton_unstable)(props, ref);
|
|
18
|
-
(0, _useReferenceOverflowButtonStylesstyles.useReferenceOverflowButtonStyles_unstable)(state);
|
|
19
|
-
return (0, _renderReferenceOverflowButton.renderReferenceOverflowButton_unstable)(state);
|
|
20
|
-
});
|
|
21
|
-
ReferenceOverflowButton.displayName = 'ReferenceOverflowButton';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceOverflowButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useReferenceOverflowButton_unstable } from './useReferenceOverflowButton';\nimport { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';\nimport { useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles.styles';\nimport type { ReferenceOverflowButtonProps } from './ReferenceOverflowButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\n// ReferenceOverflowButton component - TODO: add more docs\nexport const ReferenceOverflowButton: ForwardRefComponent<ReferenceOverflowButtonProps> = React.forwardRef(\n (props, ref) => {\n const state = useReferenceOverflowButton_unstable(props, ref);\n\n useReferenceOverflowButtonStyles_unstable(state);\n return renderReferenceOverflowButton_unstable(state);\n },\n);\n\nReferenceOverflowButton.displayName = 'ReferenceOverflowButton';\n"],"names":["ReferenceOverflowButton","React","forwardRef","props","ref","state","useReferenceOverflowButton_unstable","useReferenceOverflowButtonStyles_unstable","renderReferenceOverflowButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;4CAC6B;+CACG;wDACG;AAKnD,MAAMA,0BAAAA,WAAAA,GAA6EC,OAAMC,UAAU,CACxG,CAACC,OAAOC;IACN,MAAMC,QAAQC,IAAAA,+DAAAA,EAAoCH,OAAOC;IAEzDG,IAAAA,iFAAAA,EAA0CF;IAC1C,OAAOG,IAAAA,qEAAAA,EAAuCH;AAChD;AAGFL,wBAAwBS,WAAW,GAAG"}
|
package/lib-commonjs/components/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { DesignVersion } from '@fluentui-copilot/react-provider';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n /** The root of the component that renders the overflow button. */\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> &\n DesignVersion & {\n /**\n * The text that is displayed inside of the overflow button. This text is only displayed when `children` has not been passed to the component.\n * If a string is passed, that is what is rendered verbatim.\n * If a callback is passed, the callback is called with the number of items that are overflowing, and the result of the callback is rendered.\n */\n text?: string | ((overflowCount: number) => React.ReactNode);\n };\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> &\n Pick<Required<ReferenceOverflowButtonProps>, 'designVersion'> & {\n id: string;\n shouldRenderOverflowButton: boolean;\n };\n"],"names":[],"rangeMappings":";;","mappings":"AAqBA;;CAEC"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
ReferenceOverflowButton: function() {
|
|
13
|
-
return _ReferenceOverflowButton.ReferenceOverflowButton;
|
|
14
|
-
},
|
|
15
|
-
referenceOverflowButtonClassNames: function() {
|
|
16
|
-
return _useReferenceOverflowButtonStylesstyles.referenceOverflowButtonClassNames;
|
|
17
|
-
},
|
|
18
|
-
renderReferenceOverflowButton_unstable: function() {
|
|
19
|
-
return _renderReferenceOverflowButton.renderReferenceOverflowButton_unstable;
|
|
20
|
-
},
|
|
21
|
-
useReferenceOverflowButtonStyles_unstable: function() {
|
|
22
|
-
return _useReferenceOverflowButtonStylesstyles.useReferenceOverflowButtonStyles_unstable;
|
|
23
|
-
},
|
|
24
|
-
useReferenceOverflowButton_unstable: function() {
|
|
25
|
-
return _useReferenceOverflowButton.useReferenceOverflowButton_unstable;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
const _ReferenceOverflowButton = require("./ReferenceOverflowButton");
|
|
29
|
-
const _renderReferenceOverflowButton = require("./renderReferenceOverflowButton");
|
|
30
|
-
const _useReferenceOverflowButton = require("./useReferenceOverflowButton");
|
|
31
|
-
const _useReferenceOverflowButtonStylesstyles = require("./useReferenceOverflowButtonStyles.styles");
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { ReferenceOverflowButton } from './ReferenceOverflowButton';\nexport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nexport { renderReferenceOverflowButton_unstable } from './renderReferenceOverflowButton';\nexport { useReferenceOverflowButton_unstable } from './useReferenceOverflowButton';\nexport { referenceOverflowButtonClassNames, useReferenceOverflowButtonStyles_unstable } from './useReferenceOverflowButtonStyles.styles';\n"],"names":["ReferenceOverflowButton","referenceOverflowButtonClassNames","renderReferenceOverflowButton_unstable","useReferenceOverflowButtonStyles_unstable","useReferenceOverflowButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,uBAAuB;eAAvBA,gDAAuB;;IAIvBC,iCAAiC;eAAjCA,yEAAiC;;IAFjCC,sCAAsC;eAAtCA,qEAAsC;;IAEHC,yCAAyC;eAAzCA,iFAAyC;;IAD5EC,mCAAmC;eAAnCA,+DAAmC;;;yCAHJ;+CAEe;4CACH;wDACyC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "renderReferenceOverflowButton_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return renderReferenceOverflowButton_unstable;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
|
12
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
13
|
-
const renderReferenceOverflowButton_unstable = (state)=>{
|
|
14
|
-
(0, _reactcomponents.assertSlots)(state);
|
|
15
|
-
const { id, shouldRenderOverflowButton } = state;
|
|
16
|
-
return shouldRenderOverflowButton ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactcomponents.OverflowItem, {
|
|
17
|
-
id: id,
|
|
18
|
-
priority: 1,
|
|
19
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
|
|
20
|
-
}, id) : null;
|
|
21
|
-
};
|
package/lib-commonjs/components/ReferenceOverflowButton/renderReferenceOverflowButton.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["renderReferenceOverflowButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { OverflowItem, assertSlots } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonState, ReferenceOverflowButtonSlots } from './ReferenceOverflowButton.types';\n\n/**\n * Render the final JSX of ReferenceOverflowButton\n */\nexport const renderReferenceOverflowButton_unstable = (state: ReferenceOverflowButtonState) => {\n assertSlots<ReferenceOverflowButtonSlots>(state);\n const { id, shouldRenderOverflowButton } = state;\n\n return shouldRenderOverflowButton ? (\n <OverflowItem key={id} id={id} priority={1}>\n <state.root />\n </OverflowItem>\n ) : null;\n};\n"],"names":["renderReferenceOverflowButton_unstable","state","assertSlots","id","shouldRenderOverflowButton","_jsx","OverflowItem","priority","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE0C;AAMnC,MAAMA,yCAAyC,CAACC;IACrDC,IAAAA,4BAAAA,EAA0CD;IAC1C,MAAM,EAAEE,EAAE,EAAEC,0BAA0B,EAAE,GAAGH;IAE3C,OAAOG,6BAAAA,WAAAA,GACLC,IAAAA,eAAA,EAACC,6BAAAA,EAAAA;QAAsBH,IAAIA;QAAII,UAAU;kBACvC,WAAA,GAAAF,IAAAA,eAAA,EAACJ,MAAMO,IAAI,EAAA,CAAA;OADML,MAGjB;AACN"}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
Object.defineProperty(exports, "useReferenceOverflowButton_unstable", {
|
|
6
|
-
enumerable: true,
|
|
7
|
-
get: function() {
|
|
8
|
-
return useReferenceOverflowButton_unstable;
|
|
9
|
-
}
|
|
10
|
-
});
|
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
|
-
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
14
|
-
const _reactcomponents = require("@fluentui/react-components");
|
|
15
|
-
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
|
-
const _referenceListContext = require("../../contexts/referenceListContext");
|
|
17
|
-
const _reactprovider = require("@fluentui-copilot/react-provider");
|
|
18
|
-
const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
19
|
-
'use no memo';
|
|
20
|
-
const { children, id, text } = props;
|
|
21
|
-
const designVersion = (0, _reactprovider.useDesignVersion)(props.designVersion);
|
|
22
|
-
const rootRef = _react.useRef(null);
|
|
23
|
-
const [setTimeout] = (0, _reactutilities.useTimeout)();
|
|
24
|
-
const referenceOverflowButtonId = (0, _reactcomponents.useId)('reference-overflow-button-', id);
|
|
25
|
-
const areReferencesExpanded = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.areReferencesExpanded);
|
|
26
|
-
const maxVisibleReferences = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.maxVisibleReferences);
|
|
27
|
-
const referenceListRef = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.referenceListRef);
|
|
28
|
-
const totalReferencesCount = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.totalReferencesCount);
|
|
29
|
-
const triggeredViaKeyboard = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.overflowButtonTriggeredViaKeyboard);
|
|
30
|
-
const { isOverflowing, overflowCount } = (0, _reactcomponents.useOverflowMenu)();
|
|
31
|
-
const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
|
|
32
|
-
const { findFirstFocusable, findNextFocusable } = (0, _reactcomponents.useFocusFinders)();
|
|
33
|
-
const onKeyDown = _react.useCallback((ev)=>{
|
|
34
|
-
if (ev.key === _keyboardkeys.Enter || ev.key === _keyboardkeys.Space) {
|
|
35
|
-
triggeredViaKeyboard.current = true;
|
|
36
|
-
}
|
|
37
|
-
}, [
|
|
38
|
-
triggeredViaKeyboard
|
|
39
|
-
]);
|
|
40
|
-
// We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.
|
|
41
|
-
const previousOverflow = _react.useRef(0);
|
|
42
|
-
// When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.
|
|
43
|
-
_react.useEffect(()=>{
|
|
44
|
-
// We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.
|
|
45
|
-
if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {
|
|
46
|
-
let elementToFocus;
|
|
47
|
-
// If the references are collapsed, we move focus to the overflow button.
|
|
48
|
-
if (!areReferencesExpanded) {
|
|
49
|
-
elementToFocus = rootRef.current;
|
|
50
|
-
previousOverflow.current = overflowCount;
|
|
51
|
-
} else if (rootRef.current && referenceListRef.current) {
|
|
52
|
-
const positionToFocus = maxVisibleReferences < totalReferencesCount - previousOverflow.current ? maxVisibleReferences : totalReferencesCount - previousOverflow.current;
|
|
53
|
-
let currentElement = findFirstFocusable(referenceListRef.current);
|
|
54
|
-
for(let i = 0; i < positionToFocus && currentElement; i++){
|
|
55
|
-
currentElement = findNextFocusable(currentElement);
|
|
56
|
-
}
|
|
57
|
-
elementToFocus = currentElement;
|
|
58
|
-
}
|
|
59
|
-
// We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.
|
|
60
|
-
setTimeout(()=>{
|
|
61
|
-
elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.focus();
|
|
62
|
-
triggeredViaKeyboard.current = false;
|
|
63
|
-
}, 0);
|
|
64
|
-
}
|
|
65
|
-
}, [
|
|
66
|
-
areReferencesExpanded,
|
|
67
|
-
findFirstFocusable,
|
|
68
|
-
findNextFocusable,
|
|
69
|
-
isOverflowing,
|
|
70
|
-
maxVisibleReferences,
|
|
71
|
-
overflowCount,
|
|
72
|
-
referenceListRef,
|
|
73
|
-
setTimeout,
|
|
74
|
-
totalReferencesCount,
|
|
75
|
-
triggeredViaKeyboard
|
|
76
|
-
]);
|
|
77
|
-
const state = {
|
|
78
|
-
designVersion,
|
|
79
|
-
id: referenceOverflowButtonId,
|
|
80
|
-
shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
|
|
81
|
-
components: {
|
|
82
|
-
root: 'button'
|
|
83
|
-
},
|
|
84
|
-
root: _reactcomponents.slot.always((0, _reactcomponents.getIntrinsicElementProps)('button', {
|
|
85
|
-
ref: (0, _reactcomponents.useMergedRefs)(rootRef, ref),
|
|
86
|
-
...props
|
|
87
|
-
}), {
|
|
88
|
-
defaultProps: {
|
|
89
|
-
children: processedText
|
|
90
|
-
},
|
|
91
|
-
elementType: 'button'
|
|
92
|
-
})
|
|
93
|
-
};
|
|
94
|
-
state.root.onKeyDown = (0, _reactcomponents.mergeCallbacks)(onKeyDown, props.onKeyDown);
|
|
95
|
-
return state;
|
|
96
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceOverflowButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n slot,\n useFocusFinders,\n useId,\n useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../contexts/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport { useDesignVersion } from '@fluentui-copilot/react-provider';\n\n/**\n * Create the state required to render ReferenceOverflowButton.\n *\n * The returned state can be modified with hooks such as useReferenceOverflowButtonStyles_unstable,\n * before being passed to renderReferenceOverflowButton_unstable.\n *\n * @param props - props from this instance of ReferenceOverflowButton\n * @param ref - reference to root HTMLElement of ReferenceOverflowButton\n */\nexport const useReferenceOverflowButton_unstable = (\n props: ReferenceOverflowButtonProps,\n ref: React.Ref<HTMLButtonElement>,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const { children, id, text } = props;\n const designVersion = useDesignVersion(props.designVersion);\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const referenceOverflowButtonId = useId('reference-overflow-button-', id);\n\n const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);\n const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);\n const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);\n const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);\n const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);\n\n const { isOverflowing, overflowCount } = useOverflowMenu();\n\n const processedText = children ?? (typeof text === 'function' ? text(overflowCount) : text);\n\n const { findFirstFocusable, findNextFocusable } = useFocusFinders();\n const onKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLButtonElement>>(\n ev => {\n if (ev.key === Enter || ev.key === Space) {\n triggeredViaKeyboard.current = true;\n }\n },\n [triggeredViaKeyboard],\n );\n\n // We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.\n const previousOverflow = React.useRef(0);\n\n // When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.\n React.useEffect(() => {\n // We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.\n if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {\n let elementToFocus: HTMLElement | null | undefined;\n\n // If the references are collapsed, we move focus to the overflow button.\n if (!areReferencesExpanded) {\n elementToFocus = rootRef.current;\n previousOverflow.current = overflowCount;\n }\n // If the references are expanded, we move focus to the first reference that was hidden when they were collapsed.\n // We do this by moving focus according to the following heuristics:\n // - If maxVisibleReferences is what determines what overflows, focus is moved to the element that is in the maxVisibleReferences position of the ReferenceList's children.\n // - If the space available is what is determines what overflows, focus is moved to the element that is in the (totalReferencesCount - overflowCount) position of the ReferenceList's children.\n else if (rootRef.current && referenceListRef.current) {\n const positionToFocus =\n maxVisibleReferences < totalReferencesCount - previousOverflow.current\n ? maxVisibleReferences\n : totalReferencesCount - previousOverflow.current;\n\n let currentElement: HTMLElement | null | undefined = findFirstFocusable(referenceListRef.current);\n for (let i = 0; i < positionToFocus && currentElement; i++) {\n currentElement = findNextFocusable(currentElement);\n }\n\n elementToFocus = currentElement;\n }\n\n // We focus on the element and reset the triggeredViaKeyboard flag after a timeout to ensure that this is pushed at the end of the event queue.\n setTimeout(() => {\n elementToFocus?.focus();\n triggeredViaKeyboard.current = false;\n }, 0);\n }\n }, [\n areReferencesExpanded,\n findFirstFocusable,\n findNextFocusable,\n isOverflowing,\n maxVisibleReferences,\n overflowCount,\n referenceListRef,\n setTimeout,\n totalReferencesCount,\n triggeredViaKeyboard,\n ]);\n\n const state: ReferenceOverflowButtonState = {\n designVersion,\n id: referenceOverflowButtonId,\n shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,\n\n components: {\n root: 'button',\n },\n\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref: useMergedRefs(rootRef, ref),\n ...props,\n }),\n {\n defaultProps: {\n children: processedText,\n },\n elementType: 'button',\n },\n ),\n };\n\n state.root.onKeyDown = mergeCallbacks(onKeyDown, props.onKeyDown);\n\n return state;\n};\n"],"names":["useReferenceOverflowButton_unstable","props","ref","children","id","text","designVersion","useDesignVersion","rootRef","React","useRef","setTimeout","useTimeout","referenceOverflowButtonId","useId","areReferencesExpanded","useReferenceListContext_unstable","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","useOverflowMenu","processedText","findFirstFocusable","findNextFocusable","useFocusFinders","onKeyDown","useCallback","ev","key","Enter","Space","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","defaultProps","elementType","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBaA;;;eAAAA;;;;iEAzBU;8BACM;iCAStB;gCACoB;sCACsB;+BAEhB;AAW1B,MAAMA,sCAAsC,CACjDC,OACAC;IAEA;IAEA,MAAM,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,IAAI,EAAE,GAAGJ;IAC/B,MAAMK,gBAAgBC,IAAAA,+BAAAA,EAAiBN,MAAMK,aAAa;IAE1D,MAAME,UAAUC,OAAMC,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGC,IAAAA,0BAAAA;IAErB,MAAMC,4BAA4BC,IAAAA,sBAAAA,EAAM,8BAA8BV;IAEtE,MAAMW,wBAAwBC,IAAAA,sDAAAA,EAAiCC,CAAAA,MAAOA,IAAIF,qBAAqB;IAC/F,MAAMG,uBAAuBF,IAAAA,sDAAAA,EAAiCC,CAAAA,MAAOA,IAAIC,oBAAoB;IAC7F,MAAMC,mBAAmBH,IAAAA,sDAAAA,EAAiCC,CAAAA,MAAOA,IAAIE,gBAAgB;IACrF,MAAMC,uBAAuBJ,IAAAA,sDAAAA,EAAiCC,CAAAA,MAAOA,IAAIG,oBAAoB;IAC7F,MAAMC,uBAAuBL,IAAAA,sDAAAA,EAAiCC,CAAAA,MAAOA,IAAIK,kCAAkC;IAE3G,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGC,IAAAA,gCAAAA;IAEzC,MAAMC,gBAAgBvB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAa,OAAOE,SAAS,aAAaA,KAAKmB,iBAAiBnB;IAEtF,MAAM,EAAEsB,kBAAkB,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,gCAAAA;IAClD,MAAMC,YAAYrB,OAAMsB,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKC,mBAAAA,IAASF,GAAGC,GAAG,KAAKE,mBAAAA,EAAO;YACxCd,qBAAqBe,OAAO,GAAG;QACjC;IACF,GACA;QAACf;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMgB,mBAAmB5B,OAAMC,MAAM,CAAC;IAEtC,gHAAgH;IAChHD,OAAM6B,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIpB,yBAAyBqB,aAAalB,qBAAqBe,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACzB,uBAAuB;gBAC1ByB,iBAAiBhC,QAAQ4B,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGZ;YAC7B,OAKK,IAAIhB,QAAQ4B,OAAO,IAAIjB,iBAAiBiB,OAAO,EAAE;gBACpD,MAAMK,kBACJvB,uBAAuBE,uBAAuBiB,iBAAiBD,OAAO,GAClElB,uBACAE,uBAAuBiB,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDf,mBAAmBR,iBAAiBiB,OAAO;gBAChG,IAAK,IAAIO,IAAI,GAAGA,IAAIF,mBAAmBC,gBAAgBC,IAAK;oBAC1DD,iBAAiBd,kBAAkBc;gBACrC;gBAEAF,iBAAiBE;YACnB;YAEA,+IAA+I;YAC/I/B,WAAW;gBACT6B,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBI,KAAK;gBACrBvB,qBAAqBe,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDrB;QACAY;QACAC;QACAL;QACAL;QACAM;QACAL;QACAR;QACAS;QACAC;KACD;IAED,MAAMwB,QAAsC;QAC1CvC;QACAF,IAAIS;QACJiC,4BAA4BvB,iBAAiBR;QAE7CgC,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,UAAU;YACjCjD,KAAKkD,IAAAA,8BAAAA,EAAc5C,SAASN;YAC5B,GAAGD,KAAK;QACV,IACA;YACEoD,cAAc;gBACZlD,UAAUuB;YACZ;YACA4B,aAAa;QACf;IAEJ;IAEAT,MAAMG,IAAI,CAAClB,SAAS,GAAGyB,IAAAA,+BAAAA,EAAezB,WAAW7B,MAAM6B,SAAS;IAEhE,OAAOe;AACT"}
|