@fluentui-copilot/react-reference 0.11.2 → 0.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +52 -1
- package/CHANGELOG.md +17 -2
- package/dist/index.d.ts +13 -28
- package/lib/components/Citation/Citation.js +1 -1
- package/lib/components/Citation/Citation.js.map +1 -1
- package/lib/components/Citation/index.js +1 -1
- package/lib/components/Citation/index.js.map +1 -1
- package/lib/components/Citation/{useCitationStyles.js → useCitationStyles.styles.js} +3 -1
- package/lib/components/Citation/useCitationStyles.styles.js.map +1 -0
- package/lib/components/Reference/Reference.js +1 -1
- package/lib/components/Reference/Reference.js.map +1 -1
- package/lib/components/Reference/index.js +1 -1
- package/lib/components/Reference/index.js.map +1 -1
- package/lib/components/Reference/useReference.js +1 -1
- package/lib/components/Reference/useReference.js.map +1 -1
- package/lib/components/Reference/{useReferenceStyles.js → useReferenceStyles.styles.js} +3 -1
- package/lib/components/Reference/useReferenceStyles.styles.js.map +1 -0
- package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.js +1 -1
- package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.js.map +1 -1
- package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js.map +1 -1
- package/lib/components/ReferenceGroupToggle/index.js +1 -1
- package/lib/components/ReferenceGroupToggle/index.js.map +1 -1
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggle.js +3 -0
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggle.js.map +1 -1
- package/lib/components/ReferenceGroupToggle/{useReferenceGroupToggleStyles.js → useReferenceGroupToggleStyles.styles.js} +25 -3
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map +1 -0
- package/lib/components/ReferenceList/ReferenceList.js +1 -1
- package/lib/components/ReferenceList/ReferenceList.js.map +1 -1
- package/lib/components/ReferenceList/index.js +1 -1
- package/lib/components/ReferenceList/index.js.map +1 -1
- package/lib/components/ReferenceList/useReferenceList.js +1 -1
- package/lib/components/ReferenceList/useReferenceList.js.map +1 -1
- package/lib/components/ReferenceList/{useReferenceListStyles.js → useReferenceListStyles.styles.js} +3 -1
- package/lib/components/ReferenceList/useReferenceListStyles.styles.js.map +1 -0
- package/lib/components/reference-v2/Reference/Reference.js +1 -1
- package/lib/components/reference-v2/Reference/Reference.js.map +1 -1
- package/lib/components/reference-v2/Reference/Reference.types.js.map +1 -1
- package/lib/components/reference-v2/Reference/index.js +1 -1
- package/lib/components/reference-v2/Reference/index.js.map +1 -1
- package/lib/components/reference-v2/Reference/renderReference.js +1 -1
- package/lib/components/reference-v2/Reference/renderReference.js.map +1 -1
- package/lib/components/reference-v2/Reference/useReference.js +9 -17
- package/lib/components/reference-v2/Reference/useReference.js.map +1 -1
- package/lib/components/reference-v2/Reference/{useReferenceStyles.js → useReferenceStyles.styles.js} +14 -34
- package/lib/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -0
- package/lib/components/reference-v2/ReferenceList/ReferenceList.js +1 -1
- package/lib/components/reference-v2/ReferenceList/ReferenceList.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/ReferenceList.types.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/index.js +1 -1
- package/lib/components/reference-v2/ReferenceList/index.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceList.js +10 -10
- package/lib/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceListContextValues.js +8 -6
- package/lib/components/reference-v2/ReferenceList/useReferenceListContextValues.js.map +1 -1
- package/lib/components/reference-v2/ReferenceList/{useReferenceListStyles.js → useReferenceListStyles.styles.js} +3 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.styles.js.map +1 -0
- package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.js +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/index.js +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/index.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +23 -19
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/{useReferenceOverflowButtonStyles.js → useReferenceOverflowButtonStyles.styles.js} +5 -21
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -0
- package/lib/contexts/reference-v2/referenceListContext.js +5 -4
- package/lib/contexts/reference-v2/referenceListContext.js.map +1 -1
- package/lib/hooks/reference-v2/useReferenceCitationPreview.js +8 -5
- package/lib/hooks/reference-v2/useReferenceCitationPreview.js.map +1 -1
- package/lib-commonjs/components/Citation/Citation.js +2 -2
- package/lib-commonjs/components/Citation/Citation.js.map +1 -1
- package/lib-commonjs/components/Citation/index.js +1 -1
- package/lib-commonjs/components/Citation/index.js.map +1 -1
- package/lib-commonjs/components/Citation/{useCitationStyles.js → useCitationStyles.styles.js} +2 -1
- package/lib-commonjs/components/Citation/useCitationStyles.styles.js.map +1 -0
- package/lib-commonjs/components/Reference/Reference.js +2 -2
- package/lib-commonjs/components/Reference/Reference.js.map +1 -1
- package/lib-commonjs/components/Reference/index.js +1 -1
- package/lib-commonjs/components/Reference/index.js.map +1 -1
- package/lib-commonjs/components/Reference/useReference.js +2 -2
- package/lib-commonjs/components/Reference/useReference.js.map +1 -1
- package/lib-commonjs/components/Reference/{useReferenceStyles.js → useReferenceStyles.styles.js} +2 -1
- package/lib-commonjs/components/Reference/useReferenceStyles.styles.js.map +1 -0
- package/lib-commonjs/components/ReferenceGroupToggle/ReferenceGroupToggle.js +2 -2
- package/lib-commonjs/components/ReferenceGroupToggle/ReferenceGroupToggle.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/index.js +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/index.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js +3 -0
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggle.js.map +1 -1
- package/lib-commonjs/components/ReferenceGroupToggle/{useReferenceGroupToggleStyles.js → useReferenceGroupToggleStyles.styles.js} +28 -2
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.styles.js.map +1 -0
- package/lib-commonjs/components/ReferenceList/ReferenceList.js +2 -2
- package/lib-commonjs/components/ReferenceList/ReferenceList.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/index.js +1 -1
- package/lib-commonjs/components/ReferenceList/index.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/useReferenceList.js +2 -2
- package/lib-commonjs/components/ReferenceList/useReferenceList.js.map +1 -1
- package/lib-commonjs/components/ReferenceList/{useReferenceListStyles.js → useReferenceListStyles.styles.js} +2 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.styles.js.map +1 -0
- package/lib-commonjs/components/reference-v2/Reference/Reference.js +2 -2
- package/lib-commonjs/components/reference-v2/Reference/Reference.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/Reference.types.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/index.js +4 -4
- package/lib-commonjs/components/reference-v2/Reference/index.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/renderReference.js +1 -1
- package/lib-commonjs/components/reference-v2/Reference/renderReference.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/useReference.js +9 -14
- package/lib-commonjs/components/reference-v2/Reference/useReference.js.map +1 -1
- package/lib-commonjs/components/reference-v2/Reference/{useReferenceStyles.js → useReferenceStyles.styles.js} +13 -48
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.styles.js.map +1 -0
- package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.js +2 -2
- package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/ReferenceList.types.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/index.js +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/index.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js +11 -9
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceList.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListContextValues.js +5 -4
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListContextValues.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/{useReferenceListStyles.js → useReferenceListStyles.styles.js} +2 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.styles.js.map +1 -0
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.js +2 -2
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.types.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/index.js +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/index.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js +26 -17
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js.map +1 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/{useReferenceOverflowButtonStyles.js → useReferenceOverflowButtonStyles.styles.js} +3 -33
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.styles.js.map +1 -0
- package/lib-commonjs/contexts/reference-v2/referenceListContext.js +5 -4
- package/lib-commonjs/contexts/reference-v2/referenceListContext.js.map +1 -1
- package/lib-commonjs/hooks/reference-v2/useReferenceCitationPreview.js +8 -5
- package/lib-commonjs/hooks/reference-v2/useReferenceCitationPreview.js.map +1 -1
- package/package.json +10 -10
- package/lib/components/Citation/useCitationStyles.js.map +0 -1
- package/lib/components/Reference/useReferenceStyles.js.map +0 -1
- package/lib/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.js.map +0 -1
- package/lib/components/ReferenceList/useReferenceListStyles.js.map +0 -1
- package/lib/components/reference-v2/Reference/useReferenceStyles.js.map +0 -1
- package/lib/components/reference-v2/ReferenceList/useReferenceListStyles.js.map +0 -1
- package/lib/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.js.map +0 -1
- package/lib-commonjs/components/Citation/useCitationStyles.js.map +0 -1
- package/lib-commonjs/components/Reference/useReferenceStyles.js.map +0 -1
- package/lib-commonjs/components/ReferenceGroupToggle/useReferenceGroupToggleStyles.js.map +0 -1
- package/lib-commonjs/components/ReferenceList/useReferenceListStyles.js.map +0 -1
- package/lib-commonjs/components/reference-v2/Reference/useReferenceStyles.js.map +0 -1
- package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.js.map +0 -1
- package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButtonStyles.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n mergeClasses,\n slot,\n useArrowNavigationGroup,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles';\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 {
|
|
1
|
+
{"version":3,"sources":["useReferenceList.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n mergeClasses,\n slot,\n useArrowNavigationGroup,\n useMergedRefs,\n} from '@fluentui/react-components';\nimport type { ReferenceListProps, ReferenceListState } from './ReferenceList.types';\nimport { useRootStyles as useReferenceStyles } from '../Reference/useReferenceStyles.styles';\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 { children, maxVisibleReferences, showLessButton, showMoreButton, ...rest } = props;\n\n const [areReferencesExpanded, setAreReferencesExpanded] = React.useState(false);\n const referenceListRef = React.useRef<HTMLDivElement>(null);\n\n const referenceInOverflowClassName = useReferenceStyles().overflow;\n\n const childrenArray = React.Children.toArray(children);\n const totalReferencesCount = childrenArray.length;\n const resolvedChildren = React.useMemo(() => {\n if (maxVisibleReferences !== undefined && !areReferencesExpanded) {\n const results = [];\n for (let index = 0; index < childrenArray.length; index++) {\n const child = childrenArray[index] as React.ReactElement;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (index >= maxVisibleReferences && React.isValidElement<any>(child)) {\n results.push(\n React.cloneElement(child, {\n ...child.props,\n className: mergeClasses(child.props.className, referenceInOverflowClassName),\n }),\n );\n } else {\n results.push(child);\n }\n }\n return results;\n }\n return children;\n }, [areReferencesExpanded, children, childrenArray, maxVisibleReferences, referenceInOverflowClassName]);\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 = maxVisibleReferences !== undefined && !areReferencesExpanded;\n\n const state: ReferenceListState = {\n areReferencesExpanded,\n overflowButtonTriggeredViaKeyboard,\n maxVisibleReferences,\n referenceListRef,\n shouldUseOverflow,\n totalReferencesCount,\n\n components: {\n root: 'div',\n showMoreButton: 'span',\n showLessButton: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: useMergedRefs(ref, referenceListRef),\n ...focusAttributes,\n ...rest,\n children: resolvedChildren,\n }),\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":["children","maxVisibleReferences","props","showLessButton","referenceListRef","referenceInOverflowClassName","childrenArray","showMoreButton","totalReferencesCount","rest","setAreReferencesExpanded","React","useState","index","overflow","Children","toArray","results","cloneElement","areReferencesExpanded","className","length","child","isValidElement","push","mergeClasses","overflowButtonTriggeredViaKeyboard","useArrowNavigationGroup","axis","circular","memorizeCurrent","useCallback","shouldUseOverflow","undefined","root","ref","useMergedRefs","focusAttributes","resolvedChildren","elementType","slot","optional","state","onClick","mergeCallbacks","onShowMoreButtonClick","onShowLessButtonClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyBUA;;;eAAAA;;;;iEAzBa;iCAQhB;0CAE6C;AAelD,MAAQA,4BAAUC,CAAoBC,OAAEC;UAExC,EACAH,QAAMI,EAENH,oBAAMI,EAENF,cAAMG,EACNC,cAAMC,EACN,GAAAC;kCAEsBC,yBAAA,GAAAC,OAAAC,QAAA,CAAA;6BACTC,OAAWA,MAAQP,CAAAA;yCACZA,IAAAA,uCAAoB,IAAAQ,QAAA;0BAClCH,OAAAI,QAAA,CAAAC,OAAA,CAAAhB;iCACaC,cAAAA,MAAAA;6BACXgB,OACEN,OAAMO,CAAAA;qCACKhB,aAAK,CAAAiB,uBAAA;8BACdC;4BACF,GAAAP,QAAAP,cAAAe,MAAA,EAAAR,QAAA;8BAEJP,aAAO,CAAAO,MAAA;8EACQS;6BACfrB,sCAAAU,OAAAY,cAAA,CAAAD,QAAA;4BACFE,IAAA,eAAAb,OAAAO,YAAA,CAAAI,OAAA;wBACA,GAAAA,MAAOL,KAAAA;wBACTG,WAAAK,IAAAA,6BAAA,EAAAH,MAAApB,KAAA,CAAAkB,SAAA,EAAAf;oBACA;gBACC,OAAA;oBAACc,QAAAA,IAAAA,CAAAA;gBAAuBnB;;mBAAyBC;;eAAmDD;OAEvG;QAAAmB;QAAAnB;QAAAM;QAAAL;QAAAI;KAA4F;gGACpC;UAExDqB,qCAAwBC,OAAAA,MAAwB,CAAA;UAC9CC,kBAAMD,IAAAA,wCAAA,EAAA;cACNE;kBACAC;QACFA,iBAAA;;UAGEpB,wBAAAA,OAAyBqB,WAAA,CAAA;QAC3BrB,yBAAK;OAEL,EAAA;UACEA,wBAAAA,OAAyBqB,WAAA,CAAA;QAC3BrB,yBAAK;OAEL,EAAA;UAEAsB,oBAAkC/B,yBAAAgC,aAAA,CAAAd;UAChCA,QAAAA;;;;;;;oBAQEe;kBACA3B;4BACAJ;4BACF;;mCAGIgC,CAAAA,MAAKC,CAAAA,IAAAA,yCAAmBhC,EAAAA,OAAAA;mDACrBiC,EAAAA,KAAejC;8BACX;mBACPJ;sBAEFsC;;yBAAqB;;wBAE6CC,oBAAaC,qBAAA,CAAAC,QAAA,CAAAlC,gBAAA;yBAAY0B;aAC7F9B;wBAAwEoC,wBAAaC,qBAAA,CAAAC,QAAA,CAAAtC,gBAAA;yBAAY8B;QACnG,KAAAA;;cAGES,cAAMnC,EAAc;QACtBmC,MAAAnC,cAAA,CAAAoC,OAAA,GAAAC,IAAAA,+BAAA,EAAAC,uBAAAH,MAAAnC,cAAA,CAAAoC,OAAA;;cAGED,cAAMvC,EAAc;QACtBuC,MAAAvC,cAAA,CAAAwC,OAAA,GAAAC,IAAAA,+BAAA,EAAAE,uBAAAJ,MAAAvC,cAAA,CAAAwC,OAAA;;IAGA,OAAAD"}
|
|
@@ -9,14 +9,15 @@ Object.defineProperty(exports, "useReferenceListContextValues_unstable", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
function useReferenceListContextValues_unstable(state) {
|
|
12
|
-
const {
|
|
12
|
+
const { areReferencesExpanded, maxVisibleReferences, overflowButtonTriggeredViaKeyboard, referenceListRef, shouldUseOverflow, totalReferencesCount } = state;
|
|
13
13
|
// This context is created with "@fluentui/react-context-selector", there is no sense to memoize it
|
|
14
14
|
const referenceList = {
|
|
15
|
-
appearance,
|
|
16
15
|
areReferencesExpanded,
|
|
16
|
+
maxVisibleReferences,
|
|
17
17
|
overflowButtonTriggeredViaKeyboard,
|
|
18
|
-
|
|
19
|
-
shouldUseOverflow
|
|
18
|
+
referenceListRef,
|
|
19
|
+
shouldUseOverflow,
|
|
20
|
+
totalReferencesCount
|
|
20
21
|
};
|
|
21
22
|
return {
|
|
22
23
|
referenceList
|
package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListContextValues.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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","referenceList","overflowButtonTriggeredViaKeyboard","referenceListRef","totalReferencesCount"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,uCAAuCC,KAAyB;UAC9E,EASAC,qBAAA,EACAC,oBAAMC,oCACJF,kBACAC,mBACAE,sBACAC;uGAEAC;UACFH,gBAAA;QAEAF;;QAAuBG;QACzBC"}
|
|
@@ -40,6 +40,7 @@ const useOverflowButtonBaseClassName = (0, _reactcomponents.__resetStyles)("r6su
|
|
|
40
40
|
".r6su6fj{flex-shrink:0;}"
|
|
41
41
|
]);
|
|
42
42
|
const useReferenceListStyles_unstable = (state)=>{
|
|
43
|
+
'use no memo';
|
|
43
44
|
const { areReferencesExpanded, shouldUseOverflow } = state;
|
|
44
45
|
const rootBaseClassName = useRootBaseClassName();
|
|
45
46
|
const rootStyles = useRootStyles();
|
|
@@ -52,4 +53,4 @@ const useReferenceListStyles_unstable = (state)=>{
|
|
|
52
53
|
state.showLessButton.className = (0, _reactcomponents.mergeClasses)(referenceListClassNames.showLessButton, overflowButtonBaseClassName, state.showLessButton.className);
|
|
53
54
|
}
|
|
54
55
|
return state;
|
|
55
|
-
}; //# sourceMappingURL=useReferenceListStyles.js.map
|
|
56
|
+
}; //# sourceMappingURL=useReferenceListStyles.styles.js.map
|
package/lib-commonjs/components/reference-v2/ReferenceList/useReferenceListStyles.styles.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceListStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';\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 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 useOverflowButtonBaseClassName = makeResetStyles({\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 rootStyles = useRootStyles();\n const overflowButtonBaseClassName = useOverflowButtonBaseClassName();\n\n state.root.className = mergeClasses(\n referenceListClassNames.root,\n rootBaseClassName,\n (areReferencesExpanded || !shouldUseOverflow) && rootStyles.referencesExpanded,\n state.root.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","showMoreButton","showLessButton","display","__resetStyles","flexDirection","__styles","spacingVerticalXS","Eh141a","useOverflowButtonBaseClassName","state","areReferencesExpanded","shouldUseOverflow","rootBaseClassName","overflowButtonBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,uBAAAA;eAAAA;;IAyBbC,+BAAA;eAAAA;;;iCA7B0D;AAInD,MAAMD,0BAA8D;UACzEE;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,iCAAAL,IAAAA,8BAAA,EAAA,WAAA,MAAA;IAAA;CAAA;AAMA,MAAAL,kCAAAW,CAAAA;;UAIE,EAEAC,qBAAQA,EAERC,iBAAMC,KACNH;UACAG,oBAAMC;UAENJ,aAAWK;UAOPL,8BAAsBD;UACxBC,IAAAA,CAAAA,SAAMT,GAAAA,IAAAA,6BAAec,EAASjB,wBAC5BA,IAAAA,EAAAA,mBAAwBG,CAAAA,yBACxBa,CAAAA,iBACMb,KAAAA,WAAec,kBAAS,EAAAL,MAAAV,IAAA,CAAAe,SAAA;QAElCL,MAAAT,cAAA,EAAA;QAEAS,MAAIA,cAAMR,CAAAA,SAAgB,GAAAc,IAAAA,6BAAA,EAAAlB,wBAAAG,cAAA,EAAAa,6BAAAJ,MAAAT,cAAA,CAAAc,SAAA;;QAM1BL,MAAAR,cAAA,EAAA;QAEAQ,MAAAR,cAAOQ,CAAAA,SAAAA,GAAAA,IAAAA,6BAAAA,EAAAA,wBAAAA,cAAAA,EAAAA,6BAAAA,MAAAA,cAAAA,CAAAA,SAAAA;IACP"}
|
package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.js
CHANGED
|
@@ -12,10 +12,10 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _useReferenceOverflowButton = require("./useReferenceOverflowButton");
|
|
14
14
|
const _renderReferenceOverflowButton = require("./renderReferenceOverflowButton");
|
|
15
|
-
const
|
|
15
|
+
const _useReferenceOverflowButtonStylesstyles = require("./useReferenceOverflowButtonStyles.styles");
|
|
16
16
|
const ReferenceOverflowButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
17
17
|
const state = (0, _useReferenceOverflowButton.useReferenceOverflowButton_unstable)(props, ref);
|
|
18
|
-
(0,
|
|
18
|
+
(0, _useReferenceOverflowButtonStylesstyles.useReferenceOverflowButtonStyles_unstable)(state);
|
|
19
19
|
return (0, _renderReferenceOverflowButton.renderReferenceOverflowButton_unstable)(state);
|
|
20
20
|
});
|
|
21
21
|
ReferenceOverflowButton.displayName = 'ReferenceOverflowButton'; //# sourceMappingURL=ReferenceOverflowButton.js.map
|
package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/ReferenceOverflowButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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';\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","state","useReferenceOverflowButton_unstable","useReferenceOverflowButtonStyles_unstable","renderReferenceOverflowButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;4CAC6B;+CACG;
|
|
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","state","useReferenceOverflowButton_unstable","useReferenceOverflowButtonStyles_unstable","renderReferenceOverflowButton_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;4CAC6B;+CACG;wDACG;AAKnD,MAAMA,0BAAAA,WAAAA,GAAAA,OAA6EC,UAAMC,CAAU,CACxGC,OAACA;UACCC,QAAMA,IAAAA,+DAAQC,EAAAA,OAAoCF;yFAElDG,EAAAA;WACAC,IAAAA,qEAAOA,EAAAA;AACT;AAGFP,wBAAwBQ,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n
|
|
1
|
+
{"version":3,"sources":["ReferenceOverflowButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-components';\n\nexport type ReferenceOverflowButtonSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * ReferenceOverflowButton Props\n */\nexport type ReferenceOverflowButtonProps = ComponentProps<ReferenceOverflowButtonSlots> & {\n text?: string | ((overflowCount: number) => React.ReactNode);\n};\n\n/**\n * State used in rendering ReferenceOverflowButton\n */\nexport type ReferenceOverflowButtonState = ComponentState<ReferenceOverflowButtonSlots> & {\n shouldRenderOverflowButton: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAaA;;CAEC"}
|
|
@@ -7,5 +7,5 @@ _export_star._(require("./ReferenceOverflowButton"), exports);
|
|
|
7
7
|
_export_star._(require("./ReferenceOverflowButton.types"), exports);
|
|
8
8
|
_export_star._(require("./renderReferenceOverflowButton"), exports);
|
|
9
9
|
_export_star._(require("./useReferenceOverflowButton"), exports);
|
|
10
|
-
_export_star._(require("./useReferenceOverflowButtonStyles"), exports);
|
|
10
|
+
_export_star._(require("./useReferenceOverflowButtonStyles.styles"), exports);
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceOverflowButton';\nexport * from './ReferenceOverflowButton.types';\nexport * from './renderReferenceOverflowButton';\nexport * from './useReferenceOverflowButton';\nexport * from './useReferenceOverflowButtonStyles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ReferenceOverflowButton';\nexport * from './ReferenceOverflowButton.types';\nexport * from './renderReferenceOverflowButton';\nexport * from './useReferenceOverflowButton';\nexport * from './useReferenceOverflowButtonStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
package/lib-commonjs/components/reference-v2/ReferenceOverflowButton/useReferenceOverflowButton.js
CHANGED
|
@@ -15,19 +15,20 @@ const _reactcomponents = require("@fluentui/react-components");
|
|
|
15
15
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
16
16
|
const _referenceListContext = require("../../../contexts/reference-v2/referenceListContext");
|
|
17
17
|
const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
18
|
+
'use no memo';
|
|
18
19
|
const { children, text } = props;
|
|
19
20
|
const rootRef = _react.useRef(null);
|
|
20
21
|
const [setTimeout] = (0, _reactutilities.useTimeout)();
|
|
21
|
-
const { areReferencesExpanded,
|
|
22
|
-
ctxAppearance: ctx.appearance,
|
|
22
|
+
const { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } = (0, _referenceListContext.useReferenceListContext_unstable)((ctx)=>({
|
|
23
23
|
areReferencesExpanded: ctx.areReferencesExpanded,
|
|
24
|
-
|
|
24
|
+
maxVisibleReferences: ctx.maxVisibleReferences,
|
|
25
|
+
referenceListRef: ctx.referenceListRef,
|
|
26
|
+
totalReferencesCount: ctx.totalReferencesCount,
|
|
25
27
|
triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard
|
|
26
28
|
}));
|
|
27
|
-
const appearance = props.appearance || ctxAppearance;
|
|
28
29
|
const { isOverflowing, overflowCount } = (0, _reactcomponents.useOverflowMenu)();
|
|
29
30
|
const processedText = children !== null && children !== void 0 ? children : typeof text === 'function' ? text(overflowCount) : text;
|
|
30
|
-
const {
|
|
31
|
+
const { findFirstFocusable, findNextFocusable } = (0, _reactcomponents.useFocusFinders)();
|
|
31
32
|
const onKeyDown = _react.useCallback((ev)=>{
|
|
32
33
|
if (ev.key === _keyboardkeys.Enter || ev.key === _keyboardkeys.Space) {
|
|
33
34
|
triggeredViaKeyboard.current = true;
|
|
@@ -35,17 +36,22 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
|
35
36
|
}, [
|
|
36
37
|
triggeredViaKeyboard
|
|
37
38
|
]);
|
|
38
|
-
//
|
|
39
|
+
// We keep track of the previous overflow count to help determine the element to move focus to when expanding the references via keyboard.
|
|
40
|
+
const previousOverflow = _react.useRef(0);
|
|
41
|
+
// When the references are expanded or collapsed via keyboard, we need to move focus to the appropriate element.
|
|
39
42
|
_react.useEffect(()=>{
|
|
40
|
-
if
|
|
43
|
+
// We only try to move focus if maxVisibleReferences is set and the overflow button was triggered via keyboard.
|
|
44
|
+
if (maxVisibleReferences !== undefined && triggeredViaKeyboard.current) {
|
|
41
45
|
let elementToFocus;
|
|
42
|
-
// If the references are
|
|
46
|
+
// If the references are collapsed, we move focus to the overflow button.
|
|
43
47
|
if (!areReferencesExpanded) {
|
|
44
48
|
elementToFocus = rootRef.current;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
previousOverflow.current = overflowCount;
|
|
50
|
+
} else if (rootRef.current && referenceListRef.current) {
|
|
51
|
+
const positionToFocus = maxVisibleReferences < totalReferencesCount - previousOverflow.current ? maxVisibleReferences : totalReferencesCount - previousOverflow.current;
|
|
52
|
+
let currentElement = findFirstFocusable(referenceListRef.current);
|
|
53
|
+
for(let i = 0; i < positionToFocus && currentElement; i++){
|
|
54
|
+
currentElement = findNextFocusable(currentElement);
|
|
49
55
|
}
|
|
50
56
|
elementToFocus = currentElement;
|
|
51
57
|
}
|
|
@@ -55,16 +61,19 @@ const useReferenceOverflowButton_unstable = (props, ref)=>{
|
|
|
55
61
|
triggeredViaKeyboard.current = false;
|
|
56
62
|
}, 0);
|
|
57
63
|
}
|
|
58
|
-
|
|
59
|
-
previousOverflowCount.current = areReferencesExpanded ? 0 : overflowCount;
|
|
60
|
-
}, // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
|
-
[
|
|
64
|
+
}, [
|
|
62
65
|
areReferencesExpanded,
|
|
66
|
+
findFirstFocusable,
|
|
67
|
+
findNextFocusable,
|
|
63
68
|
isOverflowing,
|
|
69
|
+
maxVisibleReferences,
|
|
70
|
+
overflowCount,
|
|
71
|
+
referenceListRef,
|
|
72
|
+
setTimeout,
|
|
73
|
+
totalReferencesCount,
|
|
64
74
|
triggeredViaKeyboard
|
|
65
75
|
]);
|
|
66
76
|
const state = {
|
|
67
|
-
appearance,
|
|
68
77
|
shouldRenderOverflowButton: isOverflowing || areReferencesExpanded,
|
|
69
78
|
components: {
|
|
70
79
|
root: 'button'
|
|
@@ -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 const { children, text } = props;\n\n const rootRef = React.useRef<HTMLButtonElement>(null);\n\n const [setTimeout] = useTimeout();\n\n const { areReferencesExpanded,
|
|
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 { areReferencesExpanded, maxVisibleReferences, referenceListRef, totalReferencesCount, triggeredViaKeyboard } =\n useReferenceListContext_unstable(ctx => ({\n areReferencesExpanded: ctx.areReferencesExpanded,\n maxVisibleReferences: ctx.maxVisibleReferences,\n referenceListRef: ctx.referenceListRef,\n totalReferencesCount: ctx.totalReferencesCount,\n triggeredViaKeyboard: ctx.overflowButtonTriggeredViaKeyboard,\n }));\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","referenceListRef","ctx","totalReferencesCount","maxVisibleReferences","isOverflowing","processedText","findFirstFocusable","triggeredViaKeyboard","React","Space","overflowButtonTriggeredViaKeyboard","useEffect","undefined","text","overflowCount","elementToFocus","previousOverflow","current","Enter","rootRef","positionToFocus","i","currentElement","useRef","findNextFocusable","focus","shouldRenderOverflowButton","setTimeout","state","getIntrinsicElementProps","defaultProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BEA;;;eAAAA;;;;iEA3BqB;8BACM;iCAQtB;gCACoB;sCACsB;AAgB/C,MAAAA,sCAAA,CAAAC,OAAAC;;UAMA,EAEAC,QAAQC;oBAIJC,OAAAA,MAAkBC,CAAAA;sBAClBC,GAAAA,IAAAA,0BAAAA;iCAEF,EAEFC,oBAAQC,EAERJ,gBAAMK,EAENH,oBAAQI,EACRC,oBAAkBC,+DAEgB,EAAAP,CAAAA,MAAKQ,CAAAA;mCACjCF,IAAAA,qBAA+B;kCACjCN,IAAAE,oBAAA;YACFH,kBACAC,IAAAD,gBAAA;kCAACO,IAAAA,oBAAAA;kCAAqBN,IAAAS,kCAAA;;UAIxB,EAEAN,aAAA,EACAI,aAAMG,yCACJ;UACAN,gBAAIF,aAAyBS,QAAAA,aAAaL,KAAAA,IAAAA,WAA4B,OAAEM,SAAA,aAAAA,KAAAC,iBAAAD;8BAGtE,mBACKd,yCACHgB;sBACAC,OAAAA,WAAiBC,CAAAA,CAAAA;kBACnB,KAKKC,mBAAIC,IAAAA,GAAQF,GAAAA,KAAOR,mBAAIT,EAAAA;iCACpBoB,OAAAA,GAAAA;;;;KAMGC;8IAC4BC;6BACrCd,OAAAe,MAAA,CAAA;oHAEiBD;oBACnB,CAAA;uHAEA;qCACWV,aAAAL,qBAAAU,OAAA,EAAA;;qFAEsB;wCAC9B;gBACLF,iBAAAI,QAAAF,OAAA;gBACCD,iBAAAC,OAAA,GAAAH;mBACDf,IAAAA,QAAAA,OAAAA,IAAAA,iBAAAA,OAAAA,EAAAA;gBACAO,MAAAA,kBAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA,GAAAA,uBAAAA,uBAAAA,iBAAAA,OAAAA;gBACAkB,IAAAA,iBAAAA,mBAAAA,iBAAAA,OAAAA;gBACApB,IAAAA,IAAAA,IAAAA,GAAAA,IAAAA,mBAAAA,gBAAAA,IAAAA;oBACAD,iBAAAA,kBAAAA;gBACAW;gBACAd,iBAAAA;;2JAEAE;uBACAK;gBACDQ,mBAAA,QAAAA,mBAAA,KAAA,IAAA,KAAA,IAAAA,eAAAU,KAAA;gBAEDlB,qBAA4CU,OAAA,GAAA;eAC1CS;;;;QAGQpB;QAAAkB;QAAApB;QAAAD;QAAAW;QAAAd;QAAA2B;QAAAzB;QAAAK;KAAA;UACRqB,QAAA;oCAGEC,iBAAAA;oBACEhC;kBACA;;mCAGAiC,CAAAA,MAAAA,CAAAA,IAAAA,yCAAc,EAAA,UAAA;mDACZhC,EAAAA,SAAUO;oBACZ;;0BAEF;gBAEJP,UAAAO;YAEAuB;YAEAG,aAAOH;QACP"}
|
|
@@ -27,39 +27,9 @@ const referenceOverflowButtonClassNames = {
|
|
|
27
27
|
".rbsq19a:hover{background-color:var(--colorNeutralBackground3Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground2Hover);}",
|
|
28
28
|
".rbsq19a:hover:active{background-color:var(--colorNeutralBackground3Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground2Pressed);}"
|
|
29
29
|
]);
|
|
30
|
-
const useRootStyles = (0, _reactcomponents.__styles)({
|
|
31
|
-
darker: {
|
|
32
|
-
De3pzq: "f3vzo32",
|
|
33
|
-
g2u3we: "fj3muxo",
|
|
34
|
-
h3c5rm: [
|
|
35
|
-
"f1akhkt",
|
|
36
|
-
"f1lxtadh"
|
|
37
|
-
],
|
|
38
|
-
B9xav0g: "f1aperda",
|
|
39
|
-
zhjwy3: [
|
|
40
|
-
"f1lxtadh",
|
|
41
|
-
"f1akhkt"
|
|
42
|
-
],
|
|
43
|
-
Jwef8y: "f14vf7cg",
|
|
44
|
-
iro3zm: "fho4vwd"
|
|
45
|
-
}
|
|
46
|
-
}, {
|
|
47
|
-
d: [
|
|
48
|
-
".f3vzo32{background-color:var(--colorNeutralBackground5);}",
|
|
49
|
-
".fj3muxo{border-top-color:var(--colorNeutralStroke1);}",
|
|
50
|
-
".f1akhkt{border-right-color:var(--colorNeutralStroke1);}",
|
|
51
|
-
".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}",
|
|
52
|
-
".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}"
|
|
53
|
-
],
|
|
54
|
-
h: [
|
|
55
|
-
".f14vf7cg:hover{background-color:var(--colorNeutralBackground5Hover);}",
|
|
56
|
-
".fho4vwd:hover:active{background-color:var(--colorNeutralBackground5Pressed);}"
|
|
57
|
-
]
|
|
58
|
-
});
|
|
59
30
|
const useReferenceOverflowButtonStyles_unstable = (state)=>{
|
|
60
|
-
|
|
31
|
+
'use no memo';
|
|
61
32
|
const rootBaseClassName = useRootBaseClassName();
|
|
62
|
-
|
|
63
|
-
state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, appearance === 'darker' && rootStyles.darker, state.root.className);
|
|
33
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);
|
|
64
34
|
return state;
|
|
65
|
-
}; //# sourceMappingURL=useReferenceOverflowButtonStyles.js.map
|
|
35
|
+
}; //# sourceMappingURL=useReferenceOverflowButtonStyles.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useReferenceOverflowButtonStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceOverflowButtonSlots, ReferenceOverflowButtonState } from './ReferenceOverflowButton.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceOverflowButtonClassNames: SlotClassNames<ReferenceOverflowButtonSlots> = {\n root: 'fai-ReferenceOverflowButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralBackground3,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground2,\n display: 'inline-flex',\n padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,\n ...typographyStyles.caption1,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground3Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground2Pressed,\n },\n});\n\n/**\n * Apply styling to the ReferenceOverflowButton slots based on the state\n */\nexport const useReferenceOverflowButtonStyles_unstable = (\n state: ReferenceOverflowButtonState,\n): ReferenceOverflowButtonState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(referenceOverflowButtonClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["referenceOverflowButtonClassNames","useReferenceOverflowButtonStyles_unstable","root","backgroundColor","colorNeutralBackground3","display","state","rootBaseClassName","useRootBaseClassName","tokens","colorNeutralBackground3Hover","className","borderColor"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIaA,iCAAAA;eAAAA;;IAYFC,yCAAA;eAAAA;;;iCAhBqD;AAIzD,MAAMD,oCAAkF;UAC7FE;AACF;AAEA;;CAEC,SAECC,uBAAwBC,IAAAA,8BAAAA,EAAAA,WAAuB,MAAA;IAAA;IAAA;IAAA;CAAA;AAI/CC,MAASJ,4CAAAK,CAAAA;;UAITC,oBAAUC;UACRL,IAAAA,CAAAA,SAAAA,GAAiBM,IAAAA,6BAAOC,EAAAA,kCAA4BR,IAAA,EAAAK,mBAAAD,MAAAJ,IAAA,CAAAS,SAAA;WACpDC;sEAEF"}
|
|
@@ -22,15 +22,16 @@ _export(exports, {
|
|
|
22
22
|
const _reactcontextselector = require("@fluentui/react-context-selector");
|
|
23
23
|
const ReferenceListContext = (0, _reactcontextselector.createContext)(undefined);
|
|
24
24
|
const referenceListContextDefaultValue = {
|
|
25
|
-
appearance: 'lighter',
|
|
26
25
|
areReferencesExpanded: false,
|
|
26
|
+
maxVisibleReferences: undefined,
|
|
27
27
|
overflowButtonTriggeredViaKeyboard: {
|
|
28
28
|
current: false
|
|
29
29
|
},
|
|
30
|
-
|
|
31
|
-
current:
|
|
30
|
+
referenceListRef: {
|
|
31
|
+
current: null
|
|
32
32
|
},
|
|
33
|
-
shouldUseOverflow: false
|
|
33
|
+
shouldUseOverflow: false,
|
|
34
|
+
totalReferencesCount: 0
|
|
34
35
|
};
|
|
35
36
|
const ReferenceListContextProvider = ReferenceListContext.Provider;
|
|
36
37
|
const useReferenceListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ReferenceListContext, (ctx = referenceListContextDefaultValue)=>selector(ctx)); //# sourceMappingURL=referenceListContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n ReferenceListState,\n | '
|
|
1
|
+
{"version":3,"sources":["referenceListContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport type { ReferenceListState } from '../../ReferenceListV2';\n\n/**\n * Context shared between ReferenceList and its children components\n */\nexport type ReferenceListContextValue = Pick<\n ReferenceListState,\n | 'areReferencesExpanded'\n | 'maxVisibleReferences'\n | 'overflowButtonTriggeredViaKeyboard'\n | 'referenceListRef'\n | 'shouldUseOverflow'\n | 'totalReferencesCount'\n>;\n\nexport const ReferenceListContext: Context<ReferenceListContextValue> = createContext<\n ReferenceListContextValue | undefined\n>(undefined) as Context<ReferenceListContextValue>;\n\nconst referenceListContextDefaultValue: ReferenceListContextValue = {\n areReferencesExpanded: false,\n maxVisibleReferences: undefined,\n overflowButtonTriggeredViaKeyboard: { current: false },\n referenceListRef: { current: null },\n shouldUseOverflow: false,\n totalReferencesCount: 0,\n};\n\nexport const ReferenceListContextProvider = ReferenceListContext.Provider;\n\nexport const useReferenceListContext_unstable = <T>(selector: ContextSelector<ReferenceListContextValue, T>) =>\n useContextSelector(ReferenceListContext, (ctx = referenceListContextDefaultValue) => selector(ctx));\n"],"names":["ReferenceListContext","ReferenceListContextProvider","useReferenceListContext_unstable","createContext","undefined","referenceListContextDefaultValue","areReferencesExpanded","maxVisibleReferences","overflowButtonTriggeredViaKeyboard","current","referenceListRef","shouldUseOverflow","totalReferencesCount","Provider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiBaA,oBAAAA;eAAAA;;IAaAC,4BAAAA;eAAAA;;IAEAC,gCAAAA;eAAAA;;;sCAhCqC;AAiB3C,MAAMF,uBAA2DG,IAAAA,mCAAAA,EAEtEC;AAEF,MAAMC,mCAA8D;2BAClEC;0BACAC;wCACAC;iBAAsCC;;sBACtCC;iBAAoBD;;uBACpBE;0BACAC;AACF;AAEO,MAAMX,+BAA+BD,qBAAqBa,QAAQ;AAElE,MAAMX,mCAAmCY,CAAAA,WAC9CC,IAAAA,wCAAAA,EAAmBf,sBAAsB,CAACgB,MAAMX,gCAAgC,GAAKS,SAASE"}
|
|
@@ -63,7 +63,7 @@ const useReferenceCitationPreview = (props)=>{
|
|
|
63
63
|
tabIndex: -1,
|
|
64
64
|
children: index
|
|
65
65
|
}),
|
|
66
|
-
media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.
|
|
66
|
+
media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
|
|
67
67
|
children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
|
|
68
68
|
}),
|
|
69
69
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {
|
|
@@ -83,6 +83,11 @@ const useReferenceCitationPreview = (props)=>{
|
|
|
83
83
|
});
|
|
84
84
|
};
|
|
85
85
|
const referenceWithPreview = (props)=>{
|
|
86
|
+
const mergedReferenceProps = {
|
|
87
|
+
citation: index,
|
|
88
|
+
...referenceProps,
|
|
89
|
+
...props
|
|
90
|
+
};
|
|
86
91
|
var _previewContentProps_content;
|
|
87
92
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactpreview.Preview, {
|
|
88
93
|
closeOnScroll: true,
|
|
@@ -94,9 +99,7 @@ const useReferenceCitationPreview = (props)=>{
|
|
|
94
99
|
children: [
|
|
95
100
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewTrigger, {
|
|
96
101
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ReferenceV2.Reference, {
|
|
97
|
-
|
|
98
|
-
...referenceProps,
|
|
99
|
-
...props
|
|
102
|
+
...mergedReferenceProps
|
|
100
103
|
})
|
|
101
104
|
}),
|
|
102
105
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewSurface, {
|
|
@@ -110,7 +113,7 @@ const useReferenceCitationPreview = (props)=>{
|
|
|
110
113
|
tabIndex: -1,
|
|
111
114
|
children: index
|
|
112
115
|
}),
|
|
113
|
-
media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.
|
|
116
|
+
media: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.graphic,
|
|
114
117
|
children: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.children
|
|
115
118
|
}),
|
|
116
119
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactpreview.PreviewMetadata, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n Preview,\n PreviewContent,\n PreviewHeader,\n PreviewMetadata,\n PreviewSurface,\n PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n PreviewHeaderProps,\n PreviewMetadataProps,\n PreviewProps,\n PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n PreviewMetadataProps,\n 'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n citationPreviewProps?: PreviewProps;\n citationPreviewSurfaceProps?: PreviewSurfaceProps;\n citationProps?: CitationProps;\n index: number;\n previewContentProps?: PackagedPreviewContentProps;\n referencePreviewProps?: PreviewProps;\n referencePreviewSurfaceProps?: PreviewSurfaceProps;\n referenceProps?: ReferenceProps;\n sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n Citation: PackagedCitation;\n Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n ev => {\n setPopoverOpen(ev, false);\n\n // Don't navigate\n ev.preventDefault();\n },\n [setPopoverOpen],\n );\n\n const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n const {\n citationPreviewProps,\n citationPreviewSurfaceProps,\n citationProps,\n index,\n previewContentProps,\n referencePreviewProps,\n referencePreviewSurfaceProps,\n referenceProps,\n sensitivityLabelProps,\n } = props;\n\n const components = React.useMemo(() => {\n const citationWithPreview: PackagedCitation = props => {\n return (\n <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n <PreviewTrigger>\n <Citation {...citationProps} {...props}>\n {index}\n </Citation>\n </PreviewTrigger>\n <PreviewSurface {...citationPreviewSurfaceProps}>\n <PreviewContent>\n <PreviewHeader\n citation={\n <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n {index}\n </CitationCloseButton>\n }\n media={referenceProps?.
|
|
1
|
+
{"version":3,"sources":["useReferenceCitationPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { mergeCallbacks, usePopoverContext_unstable } from '@fluentui/react-components';\n\nimport {\n Preview,\n PreviewContent,\n PreviewHeader,\n PreviewMetadata,\n PreviewSurface,\n PreviewTrigger,\n} from '@fluentui-copilot/react-preview';\nimport { SensitivityLabel } from '@fluentui-copilot/react-sensitivity-label';\nimport type {\n PreviewHeaderProps,\n PreviewMetadataProps,\n PreviewProps,\n PreviewSurfaceProps,\n} from '@fluentui-copilot/react-preview';\nimport type { SensitivityLabelProps } from '@fluentui-copilot/react-sensitivity-label';\n\nimport { Citation } from '../../Citation';\nimport { Reference } from '../../ReferenceV2';\nimport type { CitationProps } from '../../Citation';\nimport type { ReferenceProps } from '../../ReferenceV2';\n\nexport type PackagedCitation = React.FC<CitationProps>;\n\nexport type PackagedReference = React.FC<ReferenceProps>;\n\nexport type PackagedPreviewContentProps = Pick<\n PreviewMetadataProps,\n 'icon' | 'primaryText' | 'secondaryText' | 'tertiaryText'\n> & {\n content?: React.ReactNode;\n};\n\nexport type UseReferenceCitationPreviewProps = {\n citationPreviewProps?: PreviewProps;\n citationPreviewSurfaceProps?: PreviewSurfaceProps;\n citationProps?: CitationProps;\n index: number;\n previewContentProps?: PackagedPreviewContentProps;\n referencePreviewProps?: PreviewProps;\n referencePreviewSurfaceProps?: PreviewSurfaceProps;\n referenceProps?: ReferenceProps;\n sensitivityLabelProps?: SensitivityLabelProps;\n};\n\nexport type UseReferenceCitationPreview = (props: UseReferenceCitationPreviewProps) => {\n Citation: PackagedCitation;\n Reference: PackagedReference;\n};\n\n// Abstract the citation that serves as the close button of the Preview into its own component so that we have access to the popover context.\nconst CitationCloseButton = (citationCloseButtonProps: CitationProps) => {\n const setPopoverOpen = usePopoverContext_unstable(context => context.setOpen);\n\n const onPopoverCloseClick = React.useCallback<NonNullable<CitationProps['onClick']>>(\n ev => {\n setPopoverOpen(ev, false);\n\n // Don't navigate\n ev.preventDefault();\n },\n [setPopoverOpen],\n );\n\n const onCitationCloseButtonClick = mergeCallbacks(onPopoverCloseClick, citationCloseButtonProps.onClick);\n\n return <Citation {...citationCloseButtonProps} onClick={onCitationCloseButtonClick} />;\n};\n\nexport const useReferenceCitationPreview: UseReferenceCitationPreview = props => {\n const {\n citationPreviewProps,\n citationPreviewSurfaceProps,\n citationProps,\n index,\n previewContentProps,\n referencePreviewProps,\n referencePreviewSurfaceProps,\n referenceProps,\n sensitivityLabelProps,\n } = props;\n\n const components = React.useMemo(() => {\n const citationWithPreview: PackagedCitation = props => {\n return (\n <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...citationPreviewProps}>\n <PreviewTrigger>\n <Citation {...citationProps} {...props}>\n {index}\n </Citation>\n </PreviewTrigger>\n <PreviewSurface {...citationPreviewSurfaceProps}>\n <PreviewContent>\n <PreviewHeader\n citation={\n <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n {index}\n </CitationCloseButton>\n }\n media={referenceProps?.graphic as PreviewHeaderProps['media']}\n >\n {referenceProps?.children}\n </PreviewHeader>\n <PreviewMetadata\n icon={previewContentProps?.icon}\n primaryText={previewContentProps?.primaryText}\n secondaryText={previewContentProps?.secondaryText}\n tertiaryText={previewContentProps?.tertiaryText}\n />\n {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n {previewContentProps?.content ?? citationPreviewProps?.children}\n </PreviewContent>\n </PreviewSurface>\n </Preview>\n );\n };\n\n const referenceWithPreview: PackagedReference = props => {\n const mergedReferenceProps = {\n citation: index,\n ...referenceProps,\n ...props,\n } as ReferenceProps;\n\n return (\n <Preview closeOnScroll positioning=\"below\" size=\"small\" trapFocus withArrow {...referencePreviewProps}>\n <PreviewTrigger>\n <Reference {...mergedReferenceProps} />\n </PreviewTrigger>\n <PreviewSurface {...referencePreviewSurfaceProps}>\n <PreviewContent>\n <PreviewHeader\n citation={\n <CitationCloseButton aria-label={`Reference ${index}, close`} referenceHref=\"#\" tabIndex={-1}>\n {index}\n </CitationCloseButton>\n }\n media={referenceProps?.graphic as PreviewHeaderProps['media']}\n >\n {referenceProps?.children}\n </PreviewHeader>\n <PreviewMetadata\n icon={previewContentProps?.icon}\n primaryText={previewContentProps?.primaryText}\n secondaryText={previewContentProps?.secondaryText}\n tertiaryText={previewContentProps?.tertiaryText}\n />\n {sensitivityLabelProps && <SensitivityLabel {...sensitivityLabelProps} />}\n {previewContentProps?.content ?? referencePreviewProps?.children}\n </PreviewContent>\n </PreviewSurface>\n </Preview>\n );\n };\n\n return {\n Citation: citationWithPreview,\n Reference: referenceWithPreview,\n };\n }, [\n citationPreviewProps,\n citationPreviewSurfaceProps,\n citationProps,\n index,\n referencePreviewProps,\n referencePreviewSurfaceProps,\n referenceProps,\n previewContentProps,\n sensitivityLabelProps,\n ]);\n\n return components;\n};\n"],"names":["CitationCloseButton","citationCloseButtonProps","setPopoverOpen","usePopoverContext_unstable","context","setOpen","onPopoverCloseClick","React","useCallback","ev","preventDefault","_jsx","Citation","onCitationCloseButtonClick","onClick","citationPreviewProps","useReferenceCitationPreview","citationPreviewSurfaceProps","citationProps","components","previewContentProps","positioning","withArrow","useMemo","PreviewTrigger","PreviewSurface","aria-label","referenceHref","index","referenceProps","primaryText","secondaryText","sensitivityLabelProps","SensitivityLabel","referenceWithPreview","mergedReferenceProps","citation","_jsxs","Preview","closeOnScroll","trapFocus","referencePreviewProps","Reference","referencePreviewSurfaceProps","PreviewContent","tabIndex","graphic","children","PreviewMetadata","_previewContentProps_content"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;4BACA;iEAEuB;iCAEoC;8BASpD;uCAC0B;0BASR;6BACC;AAgC1B,6IAA6I;AAC7I,MAAMA,sBAAsBC,CAAAA;UAC1BC,iBAAMA,IAAAA,2CAAiBC,EAAAA,CAAAA,UAA2BC,QAAWA,OAAQC;UAErEC,sBAAMA,OAAsBC,WAAMC,CAAAA,CAAAA;uBAE9BN,IAAeO;yBAEf;yBACGC;OACL;QAAAR;KACA;UAACA,6BAAAA,IAAAA,+BAAAA,EAAAA,qBAAAA,yBAAAA,OAAAA;WAAe,WAAA,GAAAS,IAAAA,eAAA,EAAAC,kBAAA,EAAA;QAGlB,GAAAX,wBAAMY;QAENC,SAAAD;;;;IACF,MAAA,EAEAE,oBAAaC,EACXC,2BACEF,EAWFG,aAAMC,OACJ,qBA2BWC,uBA1BT,8BACwB,gBAACC,uBAAyB;uBAAkBC,OAASC,OAAA,CAAA;oCAAKR,CAAAA;;4EAC7ES,EAAAA;;;;;;;;qDAKD,EAAAA,4BAACC,EAAAA;6CAAmBR,GAAAA,IAAAA,eAAAA,EAAAA,kBAAAA,EAAAA;;;;;;mFAISS,EAAAA;sDAAyCC;kGAA6B,EAAA;;8FACxFC,EAAAA;;iEAGA,EAAEC,MAAAA,OAAAA,CAAAA;;;;;8DAMPC,QAAWD,mBAAET,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,OAAAA;iEACbW,QAAeX,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;gGACH,EAAEA;;yEAEfY,QAAAA,wBAA0BC,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAAA;2EAAqBD,QAAqBZ,wBAAA,KAAA,IAAA,KAAA,IAAAA,oBAAAW,aAAA;;;yDACpEX,WAAAA,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;;;;;;;;;;cAOXc,uBAAMA,CAAAA;kBACJC,uBAAMA;0BACJC;iCACGP;wBACH;;;mBAGF,WAAA,GAAAQ,IAAAA,gBAAA,EAAAC,qBACGA,EAAAA;+BAAQC;6BAAclB;;2BAAiCmB;2BAAUlB;wCAAcmB;;;mEAC9E,EAAAC,sBAAClB,EAAAA;mDACC;;;;;oEAEF,EAACC,4BAAAA,EAAAA;;2CAAmBkB,GAAAA,IAAAA,eAAAA,EAAAA,2BAAAA,EAA4B;yDAC9C,GAAAhC,IAAAA,eAAA,EAAAX,qBAAC4C;;;;;;8DAGqFC,QAAAA,mBAAW,KAAA,IAAA,KAAA,IAAAhB,eAAAiB,OAAA;yEACxFlB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,QAAAA;;;kEAGEC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,IAAAA;yEAENA,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,WAAgBkB;;0EAElBC,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,YAAAA;;yDACK,WAAE5B,GAAAA,IAAAA,eAAAA,EAAAA,uCAAAA,EAAAA;4DACNU;;gEACAC,wBAAeX,QAAAA,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAAA,OAAqBW,MAAAA,QAAakB,iCAAA,KAAA,IAAAA,+BAAAR,0BAAA,QAAAA,0BAAA,KAAA,IAAA,KAAA,IAAAA,sBAAAM,QAAA;6BAAA;;;;;;;;;;;;;;;;;;;;;;0DAS7D"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-copilot/react-reference",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.3",
|
|
4
4
|
"description": "Fluent AI controls for citations and references",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -12,19 +12,19 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui-copilot/react-preview": "^0.4.
|
|
16
|
-
"@fluentui-copilot/react-provider": "^0.8.
|
|
17
|
-
"@fluentui-copilot/react-sensitivity-label": "^0.4.
|
|
15
|
+
"@fluentui-copilot/react-preview": "^0.4.3",
|
|
16
|
+
"@fluentui-copilot/react-provider": "^0.8.3",
|
|
17
|
+
"@fluentui-copilot/react-sensitivity-label": "^0.4.3",
|
|
18
18
|
"@swc/helpers": "^0.5.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"@fluentui/keyboard-keys": ">=9.0.7 <10.0.0",
|
|
22
|
-
"@fluentui/react-components": ">=9.
|
|
23
|
-
"@fluentui/react-context-selector": ">=9.1.
|
|
24
|
-
"@fluentui/react-icons": ">=2.0.
|
|
25
|
-
"@fluentui/react-jsx-runtime": ">=9.0.
|
|
26
|
-
"@fluentui/react-shared-contexts": ">=9.
|
|
27
|
-
"@fluentui/react-utilities": ">=9.18.
|
|
22
|
+
"@fluentui/react-components": ">=9.52.0 <10.0.0",
|
|
23
|
+
"@fluentui/react-context-selector": ">=9.1.60 <10.0.0",
|
|
24
|
+
"@fluentui/react-icons": ">=2.0.240 <3.0.0",
|
|
25
|
+
"@fluentui/react-jsx-runtime": ">=9.0.38 <10.0.0",
|
|
26
|
+
"@fluentui/react-shared-contexts": ">=9.19.0 <10.0.0",
|
|
27
|
+
"@fluentui/react-utilities": ">=9.18.9 <10.0.0",
|
|
28
28
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
29
29
|
"@types/react-dom": ">=16.9.8 <19.0.0",
|
|
30
30
|
"react": ">=16.14.0 <19.0.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useCitationStyles.ts"],"sourcesContent":["import {\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport type { CitationSlots, CitationState } from './Citation.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const citationClassNames: SlotClassNames<CitationSlots> = {\n root: 'fai-Citation',\n};\n\nconst useCitationBaseClassName = makeResetStyles({\n display: 'inline-flex',\n justifyContent: 'center',\n boxSizing: 'border-box',\n alignItems: 'center',\n ...typographyStyles.caption2Strong,\n\n color: tokens.colorNeutralForeground2,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n\n minWidth: '14px',\n height: '14px',\n verticalAlign: `calc((${typographyStyles.caption2Strong.lineHeight} - ${typographyStyles.caption2Strong.fontSize}) / 2)`,\n\n borderRadius: tokens.borderRadiusMedium,\n\n textDecoration: 'none',\n\n marginLeft: tokens.spacingHorizontalXXS,\n marginRight: tokens.spacingHorizontalXXS,\n\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Hover,\n borderColor: tokens.colorBrandStroke2Hover,\n backgroundColor: tokens.colorBrandBackground2Hover,\n },\n\n ':hover:active': {\n cursor: 'pointer',\n color: tokens.colorBrandForeground2Pressed,\n borderColor: tokens.colorBrandStroke2Pressed,\n backgroundColor: tokens.colorBrandBackground2Pressed,\n },\n});\n\nconst useCitationRootStyles = makeStyles({\n isBlock: {\n display: 'flex',\n marginLeft: 0,\n marginRight: 0,\n },\n isPopoverLocked: {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n ':hover': {\n color: tokens.colorBrandForeground2Pressed,\n ...shorthands.borderColor(tokens.colorBrandStroke2Pressed),\n backgroundColor: tokens.colorBrandBackground2,\n },\n },\n});\n\n/**\n * Apply styling to the Citation slots based on the state\n */\nexport const useCitationStyles_unstable = (state: CitationState): CitationState => {\n const rootBaseClassName = useCitationBaseClassName();\n const rootStyles = useCitationRootStyles();\n\n state.root.className = mergeClasses(\n citationClassNames.root,\n state.isPopoverLocked && rootStyles.isPopoverLocked,\n state.block && rootStyles.isBlock,\n rootBaseClassName,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","citationClassNames","root","useCitationBaseClassName","display","justifyContent","boxSizing","alignItems","caption2Strong","color","colorNeutralForeground2","border","strokeWidthThin","colorNeutralStroke2","minWidth","height","verticalAlign","lineHeight","fontSize","borderRadius","borderRadiusMedium","textDecoration","marginLeft","spacingHorizontalXXS","marginRight","cursor","colorBrandForeground2Hover","borderColor","colorBrandStroke2Hover","backgroundColor","colorBrandBackground2Hover","colorBrandForeground2Pressed","colorBrandStroke2Pressed","colorBrandBackground2Pressed","useCitationRootStyles","isBlock","isPopoverLocked","colorBrandBackground2","useCitationStyles_unstable","state","rootBaseClassName","rootStyles","className","block"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,2BAA2BR,gBAAgB;IAC/CS,SAAS;IACTC,gBAAgB;IAChBC,WAAW;IACXC,YAAY;IACZ,GAAGP,iBAAiBQ,cAAc;IAElCC,OAAOV,OAAOW,uBAAuB;IACrCC,QAAQ,CAAC,EAAEZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,CAAC,CAAC;IAEvEC,UAAU;IACVC,QAAQ;IACRC,eAAe,CAAC,MAAM,EAAEhB,iBAAiBQ,cAAc,CAACS,UAAU,CAAC,GAAG,EAAEjB,iBAAiBQ,cAAc,CAACU,QAAQ,CAAC,MAAM,CAAC;IAExHC,cAAcpB,OAAOqB,kBAAkB;IAEvCC,gBAAgB;IAEhBC,YAAYvB,OAAOwB,oBAAoB;IACvCC,aAAazB,OAAOwB,oBAAoB;IAExC,UAAU;QACRE,QAAQ;QACRhB,OAAOV,OAAO2B,0BAA0B;QACxCC,aAAa5B,OAAO6B,sBAAsB;QAC1CC,iBAAiB9B,OAAO+B,0BAA0B;IACpD;IAEA,iBAAiB;QACfL,QAAQ;QACRhB,OAAOV,OAAOgC,4BAA4B;QAC1CJ,aAAa5B,OAAOiC,wBAAwB;QAC5CH,iBAAiB9B,OAAOkC,4BAA4B;IACtD;AACF;AAEA,MAAMC,wBAAwBtC,WAAW;IACvCuC,SAAS;QACP/B,SAAS;QACTkB,YAAY;QACZE,aAAa;IACf;IACAY,iBAAiB;QACf3B,OAAOV,OAAOgC,4BAA4B;QAC1C,GAAGjC,WAAW6B,WAAW,CAAC5B,OAAOiC,wBAAwB,CAAC;QAC1DH,iBAAiB9B,OAAOsC,qBAAqB;QAC7C,UAAU;YACR5B,OAAOV,OAAOgC,4BAA4B;YAC1C,GAAGjC,WAAW6B,WAAW,CAAC5B,OAAOiC,wBAAwB,CAAC;YAC1DH,iBAAiB9B,OAAOsC,qBAAqB;QAC/C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,oBAAoBrC;IAC1B,MAAMsC,aAAaP;IAEnBK,MAAMrC,IAAI,CAACwC,SAAS,GAAG7C,aACrBI,mBAAmBC,IAAI,EACvBqC,MAAMH,eAAe,IAAIK,WAAWL,eAAe,EACnDG,MAAMI,KAAK,IAAIF,WAAWN,OAAO,EACjCK,mBACAD,MAAMrC,IAAI,CAACwC,SAAS;IAGtB,OAAOH;AACT,EAAE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceStyles.ts"],"sourcesContent":["import {\n buttonClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n tokens,\n typographyStyles,\n} from '@fluentui/react-components';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n root: 'fai-Reference',\n citation: 'fai-Reference__citation',\n media: 'fai-Reference__media',\n actions: 'fai-Reference__actions',\n sensitivity: 'fai-Reference__sensitivity',\n metadata: 'fai-Reference__metadata',\n primaryText: 'fai-Reference__primaryText',\n secondaryText: 'fai-Reference__secondaryText',\n tertiaryText: 'fai-Reference__tertiaryText',\n icon: 'fai-Reference__icon',\n label: 'fai-Reference__label',\n content: 'fai-Reference__content',\n detailsButton: 'fai-Reference__detailsButton',\n};\n\nexport const referenceExtraClassNames = {\n text: 'fai-Reference__text',\n mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n boxSizing: 'border-box',\n width: '100%',\n display: 'grid',\n gridTemplateAreas: `\n \"citation media title actions\"\n \". . title .\"\n \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n \"metadata metadata metadata metadata\"\n \"content content content content\"\n `,\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n gridTemplateRows: '32px auto auto auto auto',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderRadius: tokens.borderRadiusMedium,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n boxShadow: 'none',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n canvas: {},\n sidecar: {\n gridTemplateRows: '24px auto auto auto',\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),\n },\n inline: {},\n popover: {\n ...shorthands.borderWidth('0px'),\n width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n ...shorthands.padding('0px'),\n },\n closed: {\n rowGap: 0,\n },\n citation: {\n ...shorthands.gridArea('citation'),\n },\n media: {\n ...shorthands.gridArea('media'),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n mediaPopover: {\n width: '16px',\n height: '16px',\n\n [`> .${referenceExtraClassNames.mediaChild}`]: {\n width: '16px',\n height: '16px',\n },\n },\n actions: {\n ...shorthands.gridArea('actions'),\n justifySelf: 'end',\n display: 'flex',\n gridRowStart: 1,\n },\n detailsButton: {\n [`> ${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground3,\n },\n },\n sensitivity: {\n ...shorthands.gridArea('sensitivityLabel'),\n justifySelf: 'start',\n },\n metadata: {\n marginTop: tokens.spacingVerticalXS,\n\n ...shorthands.gridArea('metadata'),\n ...typographyStyles.caption2,\n },\n metadataSubsequentText: {\n position: 'relative',\n marginLeft: tokens.spacingHorizontalS,\n\n '&::before': {\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n left: `calc(${tokens.spacingHorizontalS} / -2)`,\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n height: typographyStyles.caption2.fontSize,\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n },\n icon: {\n ...typographyStyles.caption2,\n verticalAlign: 'middle',\n },\n content: {\n marginTop: tokens.spacingVerticalXS,\n ...shorthands.gridArea('content'),\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalS,\n color: tokens.colorNeutralForeground3,\n wordBreak: 'break-word',\n },\n hidden: {\n display: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n root: {\n ...shorthands.gridArea('title'),\n alignSelf: 'start',\n ...typographyStyles.caption1Strong,\n wordBreak: 'break-word',\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n display: '-webkit-box',\n overflowY: 'hidden',\n },\n\n canvas: {\n // 24px is the height of the tallest element within the reference\n paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n sidecar: {\n // 16px is the height of the tallest element within the reference\n paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n },\n\n closed: {\n maxWidth: '100%',\n '-webkit-line-clamp': '1',\n },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n const { isExpanded, mode, layout } = state;\n\n const rootClassName = useReferenceClassName();\n const styles = useStyles();\n const labelStyles = useLabelStyles();\n state.root.className = mergeClasses(\n referenceClassNames.root,\n rootClassName,\n styles[mode],\n styles[layout],\n !isExpanded && styles.closed,\n state.root.className,\n );\n\n if (state.citation) {\n state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n }\n\n if (state.media) {\n state.media.className = mergeClasses(\n referenceClassNames.media,\n styles.media,\n layout === 'popover' && styles.mediaPopover,\n state.media.className,\n );\n }\n\n if (state.actions) {\n state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n }\n\n state.label.className = mergeClasses(\n referenceClassNames.label,\n labelStyles.root,\n labelStyles[mode],\n !isExpanded && labelStyles.closed,\n state.label.className,\n );\n\n if (state.sensitivity) {\n state.sensitivity.className = mergeClasses(\n referenceClassNames.sensitivity,\n styles.sensitivity,\n !isExpanded && styles.hidden,\n state.sensitivity.className,\n );\n }\n\n state.metadata.className = mergeClasses(\n referenceClassNames.metadata,\n styles.metadata,\n !isExpanded && styles.hidden,\n state.metadata.className,\n );\n\n let isSubsequentText = false;\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n referenceClassNames.primaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.primaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n referenceClassNames.secondaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.secondaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n referenceClassNames.tertiaryText,\n referenceExtraClassNames.text,\n isSubsequentText && styles.metadataSubsequentText,\n state.tertiaryText.className,\n );\n isSubsequentText = true;\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n }\n state.content.className = mergeClasses(\n referenceClassNames.content,\n styles.content,\n !isExpanded && styles.hidden,\n state.content.className,\n );\n\n if (state.detailsButton) {\n state.detailsButton.className = mergeClasses(\n referenceClassNames.detailsButton,\n styles.detailsButton,\n state.detailsButton.className,\n );\n }\n\n return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,gBAAgB,EAChBC,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,MAAM,EACNC,gBAAgB,QACX,6BAA6B;AAIpC,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;IACNC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,UAAU;IACVC,aAAa;IACbC,eAAe;IACfC,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,2BAA2B;IACtCC,MAAM;IACNC,YAAY;AACd,EAAE;AAEF,MAAMC,gBAAgBlB,iBAAiBmB,cAAc,CAACC,QAAQ;AAC9D,MAAMC,kBAAkBrB,iBAAiBmB,cAAc,CAACG,UAAU;AAElE,MAAMC,kBAAkB;AAExB,MAAMC,wBAAwB7B,gBAAgB;IAC5C8B,WAAW;IACXC,OAAO;IACPC,SAAS;IACTC,mBAAmB,CAAC;;;;;;IAMlB,CAAC;IACHC,qBAAqB;IACrBC,kBAAkB;IAClBC,QAAQ,CAAC,EAAEhC,OAAOiC,eAAe,CAAC,OAAO,EAAEjC,OAAOkC,mBAAmB,CAAC,CAAC;IACvEC,cAAcnC,OAAOoC,kBAAkB;IACvCC,SAAS,CAAC,EAAErC,OAAOsC,gBAAgB,CAAC,CAAC,EAAEtC,OAAOuC,kBAAkB,CAAC,CAAC;IAClEC,WAAW;IACXC,WAAWzC,OAAO0C,mBAAmB;IACrCC,YAAY;AACd;AAEA,MAAMC,YAAY/C,WAAW;IAC3BgD,QAAQ,CAAC;IACTC,SAAS;QACPf,kBAAkB;QAClB,GAAGhC,WAAWsC,OAAO,CAACrC,OAAO+C,iBAAiB,EAAE/C,OAAOuC,kBAAkB,CAAC;IAC5E;IACAS,QAAQ,CAAC;IACTC,SAAS;QACP,GAAGlD,WAAWmD,WAAW,CAAC,MAAM;QAChCvB,OAAO,CAAC,KAAK,EAAEH,gBAAgB,IAAI,EAAExB,OAAOmD,kBAAkB,CAAC,MAAM,CAAC;QACtE,GAAGpD,WAAWsC,OAAO,CAAC,MAAM;IAC9B;IACAe,QAAQ;QACNC,QAAQ;IACV;IACAjD,UAAU;QACR,GAAGL,WAAWuD,QAAQ,CAAC,WAAW;IACpC;IACAjD,OAAO;QACL,GAAGN,WAAWuD,QAAQ,CAAC,QAAQ;QAC/B1B,SAAS;QACTe,YAAY;QACZY,gBAAgB;IAClB;IACAC,cAAc;QACZ7B,OAAO;QACP8B,QAAQ;QAER,CAAC,CAAC,GAAG,EAAEzC,yBAAyBE,UAAU,CAAC,CAAC,CAAC,EAAE;YAC7CS,OAAO;YACP8B,QAAQ;QACV;IACF;IACAnD,SAAS;QACP,GAAGP,WAAWuD,QAAQ,CAAC,UAAU;QACjCI,aAAa;QACb9B,SAAS;QACT+B,cAAc;IAChB;IACA5C,eAAe;QACb,CAAC,CAAC,EAAE,EAAEpB,iBAAiBiB,IAAI,CAAC,CAAC,CAAC,EAAE;YAC9BgD,OAAO5D,OAAO6D,uBAAuB;QACvC;IACF;IACAtD,aAAa;QACX,GAAGR,WAAWuD,QAAQ,CAAC,mBAAmB;QAC1CI,aAAa;IACf;IACAlD,UAAU;QACRsD,WAAW9D,OAAO+C,iBAAiB;QAEnC,GAAGhD,WAAWuD,QAAQ,CAAC,WAAW;QAClC,GAAGrD,iBAAiB8D,QAAQ;IAC9B;IACAC,wBAAwB;QACtBC,UAAU;QACVC,YAAYlE,OAAOuC,kBAAkB;QAErC,aAAa;YACXzB,SAAS;YACTc,SAAS;YACTqC,UAAU;YACVE,MAAM,CAAC,KAAK,EAAEnE,OAAOuC,kBAAkB,CAAC,MAAM,CAAC;YAC/C6B,KAAK,CAAC,MAAM,EAAEnE,iBAAiB8D,QAAQ,CAACxC,UAAU,CAAC,GAAG,EAAEtB,iBAAiB8D,QAAQ,CAAC1C,QAAQ,CAAC,MAAM,CAAC;YAClGoC,QAAQxD,iBAAiB8D,QAAQ,CAAC1C,QAAQ;YAC1C,GAAGtB,WAAWsE,UAAU,CAACrE,OAAOiC,eAAe,EAAE,SAASjC,OAAOsE,mBAAmB,CAAC;QACvF;IACF;IACA1D,MAAM;QACJ,GAAGX,iBAAiB8D,QAAQ;QAC5BQ,eAAe;IACjB;IACAzD,SAAS;QACPgD,WAAW9D,OAAO+C,iBAAiB;QACnC,GAAGhD,WAAWuD,QAAQ,CAAC,UAAU;QACjC1B,SAAS;QACT4C,eAAe;QACfnB,QAAQrD,OAAOsC,gBAAgB;QAC/BsB,OAAO5D,OAAO6D,uBAAuB;QACrCY,WAAW;IACb;IACAC,QAAQ;QACN9C,SAAS;IACX;AACF;AAEA,MAAM+C,iBAAiB9E,WAAW;IAChCM,MAAM;QACJ,GAAGJ,WAAWuD,QAAQ,CAAC,QAAQ;QAC/BsB,WAAW;QACX,GAAG3E,iBAAiBmB,cAAc;QAClCqD,WAAW;QACX,sBAAsB;QACtB,sBAAsB;QACtB7C,SAAS;QACTiD,WAAW;IACb;IAEAhC,QAAQ;QACN,iEAAiE;QACjEiC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEA2B,SAAS;QACP,iEAAiE;QACjEgC,YAAY,CAAC,oBAAoB,EAAExD,gBAAgB,GAAG,EAAEH,cAAc,EAAE,CAAC;IAC3E;IAEAiC,QAAQ;QACN2B,UAAU;QACV,sBAAsB;IACxB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,MAAM,EAAE,GAAGH;IAErC,MAAMI,gBAAgB5D;IACtB,MAAM6D,SAAS1C;IACf,MAAM2C,cAAcZ;IACpBM,MAAM9E,IAAI,CAACqF,SAAS,GAAG1F,aACrBI,oBAAoBC,IAAI,EACxBkF,eACAC,MAAM,CAACH,KAAK,EACZG,MAAM,CAACF,OAAO,EACd,CAACF,cAAcI,OAAOlC,MAAM,EAC5B6B,MAAM9E,IAAI,CAACqF,SAAS;IAGtB,IAAIP,MAAM7E,QAAQ,EAAE;QAClB6E,MAAM7E,QAAQ,CAACoF,SAAS,GAAG1F,aAAaI,oBAAoBE,QAAQ,EAAEkF,OAAOlF,QAAQ,EAAE6E,MAAM7E,QAAQ,CAACoF,SAAS;IACjH;IAEA,IAAIP,MAAM5E,KAAK,EAAE;QACf4E,MAAM5E,KAAK,CAACmF,SAAS,GAAG1F,aACtBI,oBAAoBG,KAAK,EACzBiF,OAAOjF,KAAK,EACZ+E,WAAW,aAAaE,OAAO9B,YAAY,EAC3CyB,MAAM5E,KAAK,CAACmF,SAAS;IAEzB;IAEA,IAAIP,MAAM3E,OAAO,EAAE;QACjB2E,MAAM3E,OAAO,CAACkF,SAAS,GAAG1F,aAAaI,oBAAoBI,OAAO,EAAEgF,OAAOhF,OAAO,EAAE2E,MAAM3E,OAAO,CAACkF,SAAS;IAC7G;IAEAP,MAAMpE,KAAK,CAAC2E,SAAS,GAAG1F,aACtBI,oBAAoBW,KAAK,EACzB0E,YAAYpF,IAAI,EAChBoF,WAAW,CAACJ,KAAK,EACjB,CAACD,cAAcK,YAAYnC,MAAM,EACjC6B,MAAMpE,KAAK,CAAC2E,SAAS;IAGvB,IAAIP,MAAM1E,WAAW,EAAE;QACrB0E,MAAM1E,WAAW,CAACiF,SAAS,GAAG1F,aAC5BI,oBAAoBK,WAAW,EAC/B+E,OAAO/E,WAAW,EAClB,CAAC2E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAM1E,WAAW,CAACiF,SAAS;IAE/B;IAEAP,MAAMzE,QAAQ,CAACgF,SAAS,GAAG1F,aACzBI,oBAAoBM,QAAQ,EAC5B8E,OAAO9E,QAAQ,EACf,CAAC0E,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMzE,QAAQ,CAACgF,SAAS;IAG1B,IAAIC,mBAAmB;IACvB,IAAIR,MAAMxE,WAAW,EAAE;QACrBwE,MAAMxE,WAAW,CAAC+E,SAAS,GAAG1F,aAC5BI,oBAAoBO,WAAW,EAC/BO,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMxE,WAAW,CAAC+E,SAAS;QAE7BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMvE,aAAa,EAAE;QACvBuE,MAAMvE,aAAa,CAAC8E,SAAS,GAAG1F,aAC9BI,oBAAoBQ,aAAa,EACjCM,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMvE,aAAa,CAAC8E,SAAS;QAE/BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMtE,YAAY,EAAE;QACtBsE,MAAMtE,YAAY,CAAC6E,SAAS,GAAG1F,aAC7BI,oBAAoBS,YAAY,EAChCK,yBAAyBC,IAAI,EAC7BwE,oBAAoBH,OAAOtB,sBAAsB,EACjDiB,MAAMtE,YAAY,CAAC6E,SAAS;QAE9BC,mBAAmB;IACrB;IAEA,IAAIR,MAAMrE,IAAI,EAAE;QACdqE,MAAMrE,IAAI,CAAC4E,SAAS,GAAG1F,aAAaI,oBAAoBU,IAAI,EAAE0E,OAAO1E,IAAI,EAAEqE,MAAMrE,IAAI,CAAC4E,SAAS;IACjG;IACAP,MAAMnE,OAAO,CAAC0E,SAAS,GAAG1F,aACxBI,oBAAoBY,OAAO,EAC3BwE,OAAOxE,OAAO,EACd,CAACoE,cAAcI,OAAOZ,MAAM,EAC5BO,MAAMnE,OAAO,CAAC0E,SAAS;IAGzB,IAAIP,MAAMlE,aAAa,EAAE;QACvBkE,MAAMlE,aAAa,CAACyE,SAAS,GAAG1F,aAC9BI,oBAAoBa,aAAa,EACjCuE,OAAOvE,aAAa,EACpBkE,MAAMlE,aAAa,CAACyE,SAAS;IAEjC;IAEA,OAAOP;AACT,EAAE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceGroupToggleStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, shorthands, tokens, typographyStyles } from '@fluentui/react-components';\nimport type { ReferenceGroupToggleSlots, ReferenceGroupToggleState } from './ReferenceGroupToggle.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const referenceGroupToggleClassNames: SlotClassNames<ReferenceGroupToggleSlots> = {\n root: 'fai-ReferenceGroupToggle',\n icon: 'fai-ReferenceGroupToggle__icon',\n};\n\nconst useButtonBaseClassName = makeResetStyles({\n display: 'inline-flex',\n columnGap: tokens.spacingHorizontalSNudge,\n alignItems: 'center',\n ...typographyStyles.caption1,\n border: 0,\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorNeutralForeground3,\n cursor: 'pointer',\n width: 'max-content',\n ...shorthands.padding(tokens.spacingVerticalXS, 0),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n});\n\n/**\n * Apply styling to the ReferenceGroupToggle slots based on the state\n */\nexport const useReferenceGroupToggleStyles_unstable = (state: ReferenceGroupToggleState): ReferenceGroupToggleState => {\n const iconBaseClassName = useIconBaseClassName();\n const buttonBaseClassName = useButtonBaseClassName();\n state.root.className = mergeClasses(referenceGroupToggleClassNames.root, buttonBaseClassName, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(referenceGroupToggleClassNames.icon, iconBaseClassName, state.icon.className);\n }\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","shorthands","tokens","typographyStyles","referenceGroupToggleClassNames","root","icon","useButtonBaseClassName","display","columnGap","spacingHorizontalSNudge","alignItems","caption1","border","backgroundColor","colorTransparentBackground","color","colorNeutralForeground3","cursor","width","padding","spacingVerticalXS","useIconBaseClassName","useReferenceGroupToggleStyles_unstable","state","iconBaseClassName","buttonBaseClassName","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,EAAEC,MAAM,EAAEC,gBAAgB,QAAQ,6BAA6B;AAIjH,OAAO,MAAMC,iCAA4E;IACvFC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,yBAAyBR,gBAAgB;IAC7CS,SAAS;IACTC,WAAWP,OAAOQ,uBAAuB;IACzCC,YAAY;IACZ,GAAGR,iBAAiBS,QAAQ;IAC5BC,QAAQ;IACRC,iBAAiBZ,OAAOa,0BAA0B;IAClDC,OAAOd,OAAOe,uBAAuB;IACrCC,QAAQ;IACRC,OAAO;IACP,GAAGlB,WAAWmB,OAAO,CAAClB,OAAOmB,iBAAiB,EAAE,EAAE;AACpD;AAEA,MAAMC,uBAAuBvB,gBAAgB;IAC3CS,SAAS;IACTG,YAAY;AACd;AAEA;;CAEC,GACD,OAAO,MAAMY,yCAAyC,CAACC;IACrD,MAAMC,oBAAoBH;IAC1B,MAAMI,sBAAsBnB;IAC5BiB,MAAMnB,IAAI,CAACsB,SAAS,GAAG3B,aAAaI,+BAA+BC,IAAI,EAAEqB,qBAAqBF,MAAMnB,IAAI,CAACsB,SAAS;IAElH,IAAIH,MAAMlB,IAAI,EAAE;QACdkB,MAAMlB,IAAI,CAACqB,SAAS,GAAG3B,aAAaI,+BAA+BE,IAAI,EAAEmB,mBAAmBD,MAAMlB,IAAI,CAACqB,SAAS;IAClH;IAEA,OAAOH;AACT,EAAE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useReferenceListStyles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, tokens } from '@fluentui/react-components';\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};\n\nexport const referenceListItemClassName = 'fai-ReferenceList__item';\n\n/**\n * Styles for the root slot\n */\nconst useRootClassName = makeResetStyles({\n padding: 0,\n margin: 0,\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalS,\n\n [`> .${referenceListItemClassName}`]: {\n listStyleType: 'none',\n },\n});\n\n/**\n * Apply styling to the ReferenceList slots based on the state\n */\nexport const useReferenceListStyles_unstable = (state: ReferenceListState): ReferenceListState => {\n state.root.className = mergeClasses(referenceListClassNames.root, useRootClassName(), state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","referenceListClassNames","root","referenceListItemClassName","useRootClassName","padding","margin","display","flexDirection","gap","spacingVerticalS","listStyleType","useReferenceListStyles_unstable","state","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,EAAEC,MAAM,QAAQ,6BAA6B;AAInF,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,6BAA6B,0BAA0B;AAEpE;;CAEC,GACD,MAAMC,mBAAmBN,gBAAgB;IACvCO,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,eAAe;IACfC,KAAKT,OAAOU,gBAAgB;IAE5B,CAAC,CAAC,GAAG,EAAEP,2BAA2B,CAAC,CAAC,EAAE;QACpCQ,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9CA,MAAMX,IAAI,CAACY,SAAS,GAAGf,aAAaE,wBAAwBC,IAAI,EAAEE,oBAAoBS,MAAMX,IAAI,CAACY,SAAS;IAE1G,OAAOD;AACT,EAAE"}
|