@fluentui-copilot/react-reference 0.0.0-nightly-20240705-0406-0382d8c9.1 → 0.0.0-nightly-20240710-0407-04ba6d57.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 +11 -11
- package/CHANGELOG.md +8 -8
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +5 -13
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +5 -7
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/package.json +10 -10
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": "Wed, 10 Jul 2024 04:13:30 GMT",
|
|
6
|
+
"tag": "@fluentui-copilot/react-reference_v0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
7
|
+
"version": "0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,26 +16,26 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui-copilot/react-reference",
|
|
19
|
-
"comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
20
|
+
"commit": "bbb1724b07eefd0dd01b36fa761e4228e665e9a9"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui-copilot/react-reference",
|
|
25
|
-
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
26
|
+
"commit": "bbb1724b07eefd0dd01b36fa761e4228e665e9a9"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui-copilot/react-reference",
|
|
31
|
-
"comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
32
|
+
"commit": "bbb1724b07eefd0dd01b36fa761e4228e665e9a9"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui-copilot/react-reference",
|
|
37
|
-
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
38
|
+
"commit": "bbb1724b07eefd0dd01b36fa761e4228e665e9a9"
|
|
39
39
|
}
|
|
40
40
|
]
|
|
41
41
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui-copilot/react-reference
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 10 Jul 2024 04:13:30 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-20240710-0407-04ba6d57.1](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.0.0-nightly-20240710-0407-04ba6d57.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.0..@fluentui-copilot/react-reference_v0.0.0-nightly-
|
|
9
|
+
Wed, 10 Jul 2024 04:13:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentai/compare/@fluentui-copilot/react-reference_v0.12.0..@fluentui-copilot/react-reference_v0.0.0-nightly-20240710-0407-04ba6d57.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly ([commit](https://github.com/microsoft/fluentai/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui-copilot/react-preview to v0.0.0-nightly-20240710-0407-04ba6d57.1 ([commit](https://github.com/microsoft/fluentai/commit/bbb1724b07eefd0dd01b36fa761e4228e665e9a9) by beachball)
|
|
16
|
+
- Bump @fluentui-copilot/react-provider to v0.0.0-nightly-20240710-0407-04ba6d57.1 ([commit](https://github.com/microsoft/fluentai/commit/bbb1724b07eefd0dd01b36fa761e4228e665e9a9) by beachball)
|
|
17
|
+
- Bump @fluentui-copilot/react-sensitivity-label to v0.0.0-nightly-20240710-0407-04ba6d57.1 ([commit](https://github.com/microsoft/fluentai/commit/bbb1724b07eefd0dd01b36fa761e4228e665e9a9) by beachball)
|
|
18
|
+
- Bump @fluentui-copilot/react-utilities to v0.0.0-nightly-20240710-0407-04ba6d57.1 ([commit](https://github.com/microsoft/fluentai/commit/bbb1724b07eefd0dd01b36fa761e4228e665e9a9) by beachball)
|
|
19
19
|
|
|
20
20
|
## [0.12.0](https://github.com/microsoft/fluentai/tree/@fluentui-copilot/react-reference_v0.12.0)
|
|
21
21
|
|
|
@@ -21,19 +21,11 @@ export const useReferenceOverflowButton_unstable = (props, ref) => {
|
|
|
21
21
|
} = props;
|
|
22
22
|
const rootRef = React.useRef(null);
|
|
23
23
|
const [setTimeout] = useTimeout();
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
triggeredViaKeyboard
|
|
30
|
-
} = useReferenceListContext_unstable(ctx => ({
|
|
31
|
-
areReferencesExpanded: ctx.areReferencesExpanded,
|
|
32
|
-
maxVisibleReferences: ctx.maxVisibleReferences,
|
|
33
|
-
referenceListRef: ctx.referenceListRef,
|
|
34
|
-
totalReferencesCount: ctx.totalReferencesCount,
|
|
35
|
-
triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
|
|
36
|
-
}));
|
|
24
|
+
const areReferencesExpanded = useReferenceListContext_unstable(ctx => ctx.areReferencesExpanded);
|
|
25
|
+
const maxVisibleReferences = useReferenceListContext_unstable(ctx => ctx.maxVisibleReferences);
|
|
26
|
+
const referenceListRef = useReferenceListContext_unstable(ctx => ctx.referenceListRef);
|
|
27
|
+
const totalReferencesCount = useReferenceListContext_unstable(ctx => ctx.totalReferencesCount);
|
|
28
|
+
const triggeredViaKeyboard = useReferenceListContext_unstable(ctx => ctx.overflowButtonTriggeredViaKeyboard);
|
|
37
29
|
const {
|
|
38
30
|
isOverflowing,
|
|
39
31
|
overflowCount
|
package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\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, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const
|
|
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 useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\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, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\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 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":["React","Enter","Space","getIntrinsicElementProps","mergeCallbacks","slot","useFocusFinders","useMergedRefs","useOverflowMenu","useTimeout","useReferenceListContext_unstable","useReferenceOverflowButton_unstable","props","ref","children","text","rootRef","useRef","setTimeout","areReferencesExpanded","ctx","maxVisibleReferences","referenceListRef","totalReferencesCount","triggeredViaKeyboard","overflowButtonTriggeredViaKeyboard","isOverflowing","overflowCount","processedText","findFirstFocusable","findNextFocusable","onKeyDown","useCallback","ev","key","current","previousOverflow","useEffect","undefined","elementToFocus","positionToFocus","currentElement","i","focus","state","shouldRenderOverflowButton","components","root","always","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,wBAAwB,EACxBC,cAAc,EACdC,IAAI,EACJC,eAAe,EACfC,aAAa,EACbC,eAAe,QACV,6BAA6B;AACpC,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,gCAAgC,QAAQ,sDAAsD;AAGvG;;;;;;;;CAQC,GACD,OAAO,MAAMC,sCAAsC,CACjDC,OACAC;IAEA;IAEA,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGH;IAE3B,MAAMI,UAAUhB,MAAMiB,MAAM,CAAoB;IAEhD,MAAM,CAACC,WAAW,GAAGT;IAGrB,MAAMU,wBAAwBT,iCAAiCU,CAAAA,MAAOA,IAAID,qBAAqB;IAC/F,MAAME,uBAAuBX,iCAAiCU,CAAAA,MAAOA,IAAIC,oBAAoB;IAC7F,MAAMC,mBAAmBZ,iCAAiCU,CAAAA,MAAOA,IAAIE,gBAAgB;IACrF,MAAMC,uBAAuBb,iCAAiCU,CAAAA,MAAOA,IAAIG,oBAAoB;IAC7F,MAAMC,uBAAuBd,iCAAiCU,CAAAA,MAAOA,IAAIK,kCAAkC;IAE3G,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAGnB;IAEzC,MAAMoB,gBAAgBd,qBAAAA,sBAAAA,WAAa,OAAOC,SAAS,aAAaA,KAAKY,iBAAiBZ;IAEtF,MAAM,EAAEc,kBAAkB,EAAEC,iBAAiB,EAAE,GAAGxB;IAClD,MAAMyB,YAAY/B,MAAMgC,WAAW,CACjCC,CAAAA;QACE,IAAIA,GAAGC,GAAG,KAAKjC,SAASgC,GAAGC,GAAG,KAAKhC,OAAO;YACxCsB,qBAAqBW,OAAO,GAAG;QACjC;IACF,GACA;QAACX;KAAqB;IAGxB,0IAA0I;IAC1I,MAAMY,mBAAmBpC,MAAMiB,MAAM,CAAC;IAEtC,gHAAgH;IAChHjB,MAAMqC,SAAS,CAAC;QACd,+GAA+G;QAC/G,IAAIhB,yBAAyBiB,aAAad,qBAAqBW,OAAO,EAAE;YACtE,IAAII;YAEJ,yEAAyE;YACzE,IAAI,CAACpB,uBAAuB;gBAC1BoB,iBAAiBvB,QAAQmB,OAAO;gBAChCC,iBAAiBD,OAAO,GAAGR;YAC7B,OAKK,IAAIX,QAAQmB,OAAO,IAAIb,iBAAiBa,OAAO,EAAE;gBACpD,MAAMK,kBACJnB,uBAAuBE,uBAAuBa,iBAAiBD,OAAO,GAClEd,uBACAE,uBAAuBa,iBAAiBD,OAAO;gBAErD,IAAIM,iBAAiDZ,mBAAmBP,iBAAiBa,OAAO;gBAChG,IAAK,IAAIO,IAAI,GAAGA,IAAIF,mBAAmBC,gBAAgBC,IAAK;oBAC1DD,iBAAiBX,kBAAkBW;gBACrC;gBAEAF,iBAAiBE;YACnB;YAEA,+IAA+I;YAC/IvB,WAAW;gBACTqB,2BAAAA,qCAAAA,eAAgBI,KAAK;gBACrBnB,qBAAqBW,OAAO,GAAG;YACjC,GAAG;QACL;IACF,GAAG;QACDhB;QACAU;QACAC;QACAJ;QACAL;QACAM;QACAL;QACAJ;QACAK;QACAC;KACD;IAED,MAAMoB,QAAsC;QAC1CC,4BAA4BnB,iBAAiBP;QAE7C2B,YAAY;YACVC,MAAM;QACR;QAEAA,MAAM1C,KAAK2C,MAAM,CACf7C,yBAAyB,UAAU;YACjCU,KAAKN,cAAcS,SAASH;YAC5B,GAAGD,KAAK;QACV,IACA;YACEqC,cAAc;gBACZnC,UAAUc;YACZ;YACAsB,aAAa;QACf;IAEJ;IAEAN,MAAMG,IAAI,CAAChB,SAAS,GAAG3B,eAAe2B,WAAWnB,MAAMmB,SAAS;IAEhE,OAAOa;AACT,EAAE"}
|
package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js
CHANGED
|
@@ -19,13 +19,11 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
|
19
19
|
const { children, text } = props;
|
|
20
20
|
const rootRef = _react.useRef(null);
|
|
21
21
|
const [setTimeout] = (0, _reactutilities.useTimeout)();
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
|
|
28
|
-
}));
|
|
22
|
+
const areReferencesExpanded = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.areReferencesExpanded);
|
|
23
|
+
const maxVisibleReferences = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.maxVisibleReferences);
|
|
24
|
+
const referenceListRef = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.referenceListRef);
|
|
25
|
+
const totalReferencesCount = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.totalReferencesCount);
|
|
26
|
+
const triggeredViaKeyboard = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>ctx.overflowButtonTriggeredViaKeyboard);
|
|
29
27
|
const { isOverflowing, overflowCount } = (0, _reactcomponents.useOverflowMenu)();
|
|
30
28
|
const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
|
|
31
29
|
const { findFirstFocusable, findNextFocusable } = (0, _reactcomponents.useFocusFinders)();
|
|
@@ -1 +1 @@
|
|
|
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 useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\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, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const
|
|
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 useMergedRefs,\n useOverflowMenu,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useReferenceListContext_unstable } from '../../../contexts/reference-v2/referenceListContext';\nimport type { ReferenceOverflowButtonProps, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\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, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\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 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","areReferencesExpanded","text","rootRef","totalReferencesCount","setTimeout","triggeredViaKeyboard","useReferenceListContext_unstable","overflowCount","useOverflowMenu","maxVisibleReferences","referenceListRef","findFirstFocusable","useFocusFinders","useCallback","ev","Enter","ctx","overflowButtonTriggeredViaKeyboard","processedText","previousOverflow","findNextFocusable","React","onKeyDown","key","undefined","elementToFocus","current","i","positionToFocus","currentElement","focus","isOverflowing","components","state","shouldRenderOverflowButton","root","getIntrinsicElementProps","useMergedRefs","slot","mergeCallbacks"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAGAC,QAAMC,EACNC,IAAA,KACAJ;UACAK,UAAMC,OAAAA,MAAAA,CAAAA;UACN,CAAAC,WAAMC,GAAAA,IAAAA,0BAAuBC;UAE7BN,wBAAuBO,IAAAA,sDAAkBC,EAAAA,CAAAA,MAAAA,IAAAA,qBAAAA;UAEzCC,uBAAsBV,IAAAA,sDAAAA,EAAAA,CAAAA,MAAAA,IAAAA,oBAAoBE;UAE1CS,mBAAQC,IAAAA,sDAA0CC,EAAAA,CAAAA,MAAAA,IAAAA,gBAAAA;UAClDT,uBAAwBU,IAAAA,sDACtBC,EAAAA,CAAAA,MAAAA,IAAAA,oBAAAA;UACET,uBAAeU,IAAAA,sDAA2B,EAAAC,CAAAA,MAAAA,IAAAC,kCAAA;yBAE1C,EACFV,aACA,yCAACF;UAAqBa,gBAAAnB,aAAA,QAAAA,aAAA,KAAA,IAAAA,WAAA,OAAAE,SAAA,aAAAA,KAAAM,iBAAAN;UAGxB,EACAU,kBAAMQ,EAENC,iBAAA,KACAC,IAAAA,gCAAgB;UACdC,YAAAD,OAAAR,WAAA,CAAAC,CAAAA;YACAA,GAAAS,GAAId,KAAAA,mBAAAA,IAAAA,GAAAA,GAAAA,KAAyBe,mBAAAA,EAAAA;iCACvBC,OAAAA,GAAAA;;;;KAGCzB;8IAC6B;6BAChCmB,OAAiBO,MAAAA,CAAO;oHAM4B;oBACpD,CAAA;uHAKgG;qCAChFC,aAAIC,qBAAmBC,OAAqB,EAAA;;qFAE5D;wCAEiBA;iCACnB3B,QAAAwB,OAAA;iCAEAA,OAAA,GAAAnB;mBACAH,IAAAA,QAAWsB,OAAA,IAAAhB,iBAAAgB,OAAA,EAAA;wCACTD,uBAAAA,uBAAAA,iBAAgBK,OAAK,GAAArB,uBAAAN,uBAAAgB,iBAAAO,OAAA;qCACrBrB,mBAA+BK,iBAAAgB,OAAA;oBACjC,IAAGC,IAAA,GAAAA,IAAAC,mBAAAC,gBAAAF,IAAA;oBACLE,iBAAAT,kBAAAS;gBACC;gBACD7B,iBAAAA;;2JAEAoB;uBACAW;gBACAtB,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,KAAAA;gBACAF,qBAAAA,OAAAA,GAAAA;eACAG;;;;QAEAP;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;QAAAA;KAAAA;UACAE,QAAAA;oCACD0B,iBAAA/B;QAEDgC,YAAMC;kBACJC;;mCAGEC,CAAAA,MAAM,CAAAC,IAAAA,yCAAA,EAAA,UAAA;iBACRC,IAAAA,8BAAA,EAAAnC,SAAAJ;eAEAqC,KAAMG;;0BAGM;gBACVvC,UACAmB;;yBAEInB;;;UAGJoC,IAAA,CAAAb,SAAA,GAAAiB,IAAAA,+BAAA,EAAAjB,WAAAzB,MAAAyB,SAAA;WAEJW;yDAIOA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
4
4
|
"description": "Fluent AI controls for citations and references",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,20 +12,20 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-preview": "0.0.0-nightly-
|
|
16
|
-
"@fluentui-copilot/react-provider": "0.0.0-nightly-
|
|
17
|
-
"@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-
|
|
18
|
-
"@fluentui-copilot/react-utilities": "0.0.0-nightly-
|
|
15
|
+
"@fluentui-copilot/react-preview": "0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
16
|
+
"@fluentui-copilot/react-provider": "0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
17
|
+
"@fluentui-copilot/react-sensitivity-label": "0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
18
|
+
"@fluentui-copilot/react-utilities": "0.0.0-nightly-20240710-0407-04ba6d57.1",
|
|
19
19
|
"@swc/helpers": "^0.5.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
|
|
23
|
-
"@fluentui/react-components": ">=9.
|
|
24
|
-
"@fluentui/react-context-selector": ">=9.1.
|
|
25
|
-
"@fluentui/react-icons": ">=2.0.
|
|
26
|
-
"@fluentui/react-jsx-runtime": ">=9.0.
|
|
23
|
+
"@fluentui/react-components": ">=9.54.4 <10.0.0",
|
|
24
|
+
"@fluentui/react-context-selector": ">=9.1.63 <10.0.0",
|
|
25
|
+
"@fluentui/react-icons": ">=2.0.247 <3.0.0",
|
|
26
|
+
"@fluentui/react-jsx-runtime": ">=9.0.40 <10.0.0",
|
|
27
27
|
"@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
|
|
28
|
-
"@fluentui/react-utilities": ">=9.18.
|
|
28
|
+
"@fluentui/react-utilities": ">=9.18.11 <10.0.0",
|
|
29
29
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
30
30
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
31
31
|
"react": ">=16.14.0 <19.0.0",
|