@fluentui-copilot/react-preview 0.7.3 → 0.7.4-hotfix.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +39 -1
- package/CHANGELOG.md +20 -2
- package/lib/Preview.js +0 -1
- package/lib/PreviewContent.js +0 -1
- package/lib/PreviewHeader.js +0 -1
- package/lib/PreviewMetadata.js +0 -1
- package/lib/PreviewSurface.js +0 -1
- package/lib/PreviewTrigger.js +0 -1
- package/lib/components/Preview/Preview.js +3 -4
- package/lib/components/Preview/Preview.types.js +1 -2
- package/lib/components/Preview/index.js +0 -1
- package/lib/components/Preview/renderPreview.js +22 -41
- package/lib/components/Preview/usePreview.js +234 -239
- package/lib/components/PreviewContent/PreviewContent.js +4 -5
- package/lib/components/PreviewContent/PreviewContent.types.js +1 -2
- package/lib/components/PreviewContent/index.js +0 -1
- package/lib/components/PreviewContent/renderPreviewContent.js +4 -6
- package/lib/components/PreviewContent/usePreviewContent.js +12 -14
- package/lib/components/PreviewContent/usePreviewContentStyles.styles.raw.js +26 -0
- package/lib/components/PreviewContent/usePreviewContentStyles.styles.raw.js.map +1 -0
- package/lib/components/PreviewHeader/PreviewHeader.js +4 -5
- package/lib/components/PreviewHeader/PreviewHeader.types.js +1 -2
- package/lib/components/PreviewHeader/index.js +0 -1
- package/lib/components/PreviewHeader/renderPreviewHeader.js +11 -8
- package/lib/components/PreviewHeader/usePreviewHeader.js +48 -56
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js +2 -2
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js +110 -0
- package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js.map +1 -0
- package/lib/components/PreviewMetadata/PreviewMetadata.js +4 -5
- package/lib/components/PreviewMetadata/PreviewMetadata.types.js +1 -2
- package/lib/components/PreviewMetadata/index.js +0 -1
- package/lib/components/PreviewMetadata/renderPreviewMetadata.js +12 -8
- package/lib/components/PreviewMetadata/usePreviewMetadata.js +29 -36
- package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js +56 -0
- package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js.map +1 -0
- package/lib/components/PreviewSurface/PreviewSurface.js +4 -5
- package/lib/components/PreviewSurface/PreviewSurface.types.js +1 -2
- package/lib/components/PreviewSurface/index.js +0 -1
- package/lib/components/PreviewSurface/renderPreviewSurface.js +2 -4
- package/lib/components/PreviewSurface/usePreviewSurface.js +6 -8
- package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js +29 -0
- package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js.map +1 -0
- package/lib/components/PreviewTrigger/PreviewTrigger.js +3 -4
- package/lib/components/PreviewTrigger/PreviewTrigger.types.js +1 -2
- package/lib/components/PreviewTrigger/index.js +0 -1
- package/lib/components/PreviewTrigger/renderPreviewTrigger.js +2 -4
- package/lib/components/PreviewTrigger/usePreviewTrigger.js +2 -4
- package/lib/index.js +0 -1
- package/lib/previewContext.js +19 -20
- package/lib/utils/index.js +0 -1
- package/lib/utils/openedByHoverPreviewManager.js +14 -15
- package/lib-commonjs/Preview.js +0 -1
- package/lib-commonjs/PreviewContent.js +0 -1
- package/lib-commonjs/PreviewHeader.js +0 -1
- package/lib-commonjs/PreviewMetadata.js +0 -1
- package/lib-commonjs/PreviewSurface.js +0 -1
- package/lib-commonjs/PreviewTrigger.js +0 -1
- package/lib-commonjs/components/Preview/Preview.js +1 -1
- package/lib-commonjs/components/Preview/Preview.js.map +1 -1
- package/lib-commonjs/components/Preview/Preview.types.js +0 -1
- package/lib-commonjs/components/Preview/index.js +0 -1
- package/lib-commonjs/components/Preview/renderPreview.js +1 -1
- package/lib-commonjs/components/Preview/renderPreview.js.map +1 -1
- package/lib-commonjs/components/Preview/usePreview.js +1 -1
- package/lib-commonjs/components/Preview/usePreview.js.map +1 -1
- package/lib-commonjs/components/PreviewContent/PreviewContent.js +1 -1
- package/lib-commonjs/components/PreviewContent/PreviewContent.js.map +1 -1
- package/lib-commonjs/components/PreviewContent/PreviewContent.types.js +0 -1
- package/lib-commonjs/components/PreviewContent/index.js +0 -1
- package/lib-commonjs/components/PreviewContent/renderPreviewContent.js +1 -1
- package/lib-commonjs/components/PreviewContent/renderPreviewContent.js.map +1 -1
- package/lib-commonjs/components/PreviewContent/usePreviewContent.js +1 -1
- package/lib-commonjs/components/PreviewContent/usePreviewContent.js.map +1 -1
- package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.raw.js +42 -0
- package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/PreviewHeader/PreviewHeader.js +1 -1
- package/lib-commonjs/components/PreviewHeader/PreviewHeader.js.map +1 -1
- package/lib-commonjs/components/PreviewHeader/PreviewHeader.types.js +0 -1
- package/lib-commonjs/components/PreviewHeader/index.js +0 -1
- package/lib-commonjs/components/PreviewHeader/renderPreviewHeader.js +1 -1
- package/lib-commonjs/components/PreviewHeader/renderPreviewHeader.js.map +1 -1
- package/lib-commonjs/components/PreviewHeader/usePreviewHeader.js +1 -1
- package/lib-commonjs/components/PreviewHeader/usePreviewHeader.js.map +1 -1
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.js +5 -2
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js +129 -0
- package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/PreviewMetadata/PreviewMetadata.js +1 -1
- package/lib-commonjs/components/PreviewMetadata/PreviewMetadata.js.map +1 -1
- package/lib-commonjs/components/PreviewMetadata/PreviewMetadata.types.js +0 -1
- package/lib-commonjs/components/PreviewMetadata/index.js +0 -1
- package/lib-commonjs/components/PreviewMetadata/renderPreviewMetadata.js +1 -1
- package/lib-commonjs/components/PreviewMetadata/renderPreviewMetadata.js.map +1 -1
- package/lib-commonjs/components/PreviewMetadata/usePreviewMetadata.js +1 -1
- package/lib-commonjs/components/PreviewMetadata/usePreviewMetadata.js.map +1 -1
- package/lib-commonjs/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js +72 -0
- package/lib-commonjs/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/PreviewSurface/PreviewSurface.js +1 -1
- package/lib-commonjs/components/PreviewSurface/PreviewSurface.js.map +1 -1
- package/lib-commonjs/components/PreviewSurface/PreviewSurface.types.js +0 -1
- package/lib-commonjs/components/PreviewSurface/index.js +0 -1
- package/lib-commonjs/components/PreviewSurface/renderPreviewSurface.js +1 -1
- package/lib-commonjs/components/PreviewSurface/renderPreviewSurface.js.map +1 -1
- package/lib-commonjs/components/PreviewSurface/usePreviewSurface.js +1 -1
- package/lib-commonjs/components/PreviewSurface/usePreviewSurface.js.map +1 -1
- package/lib-commonjs/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js +45 -0
- package/lib-commonjs/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/PreviewTrigger/PreviewTrigger.js +1 -1
- package/lib-commonjs/components/PreviewTrigger/PreviewTrigger.js.map +1 -1
- package/lib-commonjs/components/PreviewTrigger/PreviewTrigger.types.js +0 -1
- package/lib-commonjs/components/PreviewTrigger/index.js +0 -1
- package/lib-commonjs/components/PreviewTrigger/renderPreviewTrigger.js +1 -1
- package/lib-commonjs/components/PreviewTrigger/renderPreviewTrigger.js.map +1 -1
- package/lib-commonjs/components/PreviewTrigger/usePreviewTrigger.js +1 -1
- package/lib-commonjs/components/PreviewTrigger/usePreviewTrigger.js.map +1 -1
- package/lib-commonjs/index.js +0 -1
- package/lib-commonjs/previewContext.js +1 -1
- package/lib-commonjs/previewContext.js.map +1 -1
- package/lib-commonjs/utils/index.js +0 -1
- package/lib-commonjs/utils/openedByHoverPreviewManager.js +1 -1
- package/lib-commonjs/utils/openedByHoverPreviewManager.js.map +1 -1
- package/package.json +4 -8
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePreviewSurfaceStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PreviewSurfaceSlots, PreviewSurfaceState } from './PreviewSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewSurfaceClassNames: SlotClassNames<PreviewSurfaceSlots> = {\n root: 'fai-PreviewSurface',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,\n boxSizing: 'border-box',\n },\n});\n\nconst useNextStyles = makeStyles({\n root: {\n borderRadius: tokens.borderRadiusXLarge,\n },\n});\n\n/**\n * Apply styling to the PreviewSurface slots based on the state\n */\nexport const usePreviewSurfaceStyles_unstable = (state: PreviewSurfaceState): PreviewSurfaceState => {\n 'use no memo';\n\n const { designVersion } = state;\n\n const rootStyles = useRootStyles();\n const nextStyles = useNextStyles();\n\n state.root.className = mergeClasses(\n previewSurfaceClassNames.root,\n rootStyles.base,\n designVersion === 'next' && nextStyles.root,\n state.root.className,\n );\n\n usePopoverSurfaceStyles_unstable(state);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","previewSurfaceClassNames","root","useRootStyles","base","padding","spacingVerticalXS","spacingHorizontalXS","boxSizing","useNextStyles","borderRadius","borderRadiusXLarge","usePreviewSurfaceStyles_unstable","state","designVersion","rootStyles","nextStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,gCAAgC,QAAQ,6BAA6B;AACxG,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAgBN,WAAW;IAC/BO,MAAM;QACJC,SAAS,CAAC,EAAEL,OAAOM,iBAAiB,CAAC,CAAC,EAAEN,OAAOO,mBAAmB,CAAC,CAAC;QACpEC,WAAW;IACb;AACF;AAEA,MAAMC,gBAAgBZ,WAAW;IAC/BK,MAAM;QACJQ,cAAcV,OAAOW,kBAAkB;IACzC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,MAAME,aAAaZ;IACnB,MAAMa,aAAaP;IAEnBI,MAAMX,IAAI,CAACe,SAAS,GAAGnB,aACrBG,yBAAyBC,IAAI,EAC7Ba,WAAWX,IAAI,EACfU,kBAAkB,UAAUE,WAAWd,IAAI,EAC3CW,MAAMX,IAAI,CAACe,SAAS;IAGtBlB,iCAAiCc;IAEjC,OAAOA;AACT,EAAE"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { usePreviewTrigger_unstable } from './usePreviewTrigger';
|
|
2
2
|
import { renderPreviewTrigger_unstable } from './renderPreviewTrigger';
|
|
3
|
-
export const PreviewTrigger = props
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export const PreviewTrigger = (props)=>{
|
|
4
|
+
const state = usePreviewTrigger_unstable(props);
|
|
5
|
+
return renderPreviewTrigger_unstable(state);
|
|
6
6
|
};
|
|
7
7
|
PreviewTrigger.displayName = 'PreviewTrigger';
|
|
8
|
-
//# sourceMappingURL=PreviewTrigger.js.map
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { renderPopoverTrigger_unstable } from '@fluentui/react-components';
|
|
2
2
|
/**
|
|
3
3
|
* Render the final JSX of PreviewTrigger
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
return renderPopoverTrigger_unstable(state);
|
|
4
|
+
*/ export const renderPreviewTrigger_unstable = (state)=>{
|
|
5
|
+
return renderPopoverTrigger_unstable(state);
|
|
7
6
|
};
|
|
8
|
-
//# sourceMappingURL=renderPreviewTrigger.js.map
|
|
@@ -8,8 +8,6 @@ import { usePopoverTrigger_unstable } from '@fluentui/react-components';
|
|
|
8
8
|
*
|
|
9
9
|
* @param props - props from this instance of PreviewTrigger
|
|
10
10
|
* @param ref - reference to root HTMLElement of PreviewTrigger
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
return usePopoverTrigger_unstable(props);
|
|
11
|
+
*/ export const usePreviewTrigger_unstable = (props)=>{
|
|
12
|
+
return usePopoverTrigger_unstable(props);
|
|
14
13
|
};
|
|
15
|
-
//# sourceMappingURL=usePreviewTrigger.js.map
|
package/lib/index.js
CHANGED
|
@@ -5,4 +5,3 @@ export { PreviewSurface, previewSurfaceClassNames, renderPreviewSurface_unstable
|
|
|
5
5
|
export { PreviewTrigger, renderPreviewTrigger_unstable, usePreviewTrigger_unstable } from './PreviewTrigger';
|
|
6
6
|
export { PreviewContent, previewContentClassNames, renderPreviewContent_unstable, usePreviewContentStyles_unstable, usePreviewContent_unstable } from './PreviewContent';
|
|
7
7
|
export { PreviewContext, PreviewContextProvider, usePreviewContext_unstable } from './previewContext';
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
package/lib/previewContext.js
CHANGED
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
2
|
export const PreviewContext = createContext(undefined);
|
|
3
3
|
const previewContextDefaultValue = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
4
|
+
open: false,
|
|
5
|
+
setOpen: ()=>null,
|
|
6
|
+
toggleOpen: ()=>null,
|
|
7
|
+
triggerRef: {
|
|
8
|
+
current: null
|
|
9
|
+
},
|
|
10
|
+
contentRef: {
|
|
11
|
+
current: null
|
|
12
|
+
},
|
|
13
|
+
arrowRef: {
|
|
14
|
+
current: null
|
|
15
|
+
},
|
|
16
|
+
openOnContext: false,
|
|
17
|
+
openOnHover: false,
|
|
18
|
+
size: 'medium',
|
|
19
|
+
trapFocus: false,
|
|
20
|
+
inline: false,
|
|
21
|
+
isPreviewLocked: false
|
|
22
22
|
};
|
|
23
23
|
export const PreviewContextProvider = PreviewContext.Provider;
|
|
24
|
-
export const usePreviewContext_unstable = selector
|
|
25
|
-
//# sourceMappingURL=previewContext.js.map
|
|
24
|
+
export const usePreviewContext_unstable = (selector)=>useContextSelector(PreviewContext, (ctx = previewContextDefaultValue)=>selector(ctx));
|
package/lib/utils/index.js
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
const openedByHoverPreviewManager = [];
|
|
2
2
|
export function addOpenedByHoverPreview(id, closeCallback) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
openedByHoverPreviewManager.push({
|
|
4
|
+
id,
|
|
5
|
+
closeCallback
|
|
6
|
+
});
|
|
7
7
|
}
|
|
8
8
|
export function removeOpenedByHoverPreview(id) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
let index = openedByHoverPreviewManager.findIndex((preview)=>preview.id === id);
|
|
10
|
+
while(index !== -1){
|
|
11
|
+
openedByHoverPreviewManager.splice(index, 1);
|
|
12
|
+
index = openedByHoverPreviewManager.findIndex((preview)=>preview.id === id);
|
|
13
|
+
}
|
|
14
14
|
}
|
|
15
15
|
export function closeAllOpenedByHoverPreviews(id) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
for (const openedPreview of openedByHoverPreviewManager){
|
|
17
|
+
if (openedPreview.id !== id) {
|
|
18
|
+
openedPreview.closeCallback();
|
|
19
|
+
}
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
-
openedByHoverPreviewManager.length = 0;
|
|
21
|
+
openedByHoverPreviewManager.length = 0;
|
|
22
22
|
}
|
|
23
|
-
//# sourceMappingURL=openedByHoverPreviewManager.js.map
|
package/lib-commonjs/Preview.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Preview.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { usePreview_unstable } from './usePreview';\nimport { renderPreview_unstable } from './renderPreview';\nimport type { PreviewProps } from './Preview.types';\n\nexport const Preview: React.FC<PreviewProps> = props => {\n const state = usePreview_unstable(props);\n\n return renderPreview_unstable(state);\n};\n\nPreview.displayName = 'Preview';\n"],"names":["Preview","props","state","usePreview_unstable","renderPreview_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BAJuB;+BACG;AAGhC,MAAMA,UAAkCC,CAAAA;
|
|
1
|
+
{"version":3,"sources":["Preview.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { usePreview_unstable } from './usePreview';\nimport { renderPreview_unstable } from './renderPreview';\nimport type { PreviewProps } from './Preview.types';\n\nexport const Preview: React.FC<PreviewProps> = props => {\n const state = usePreview_unstable(props);\n\n return renderPreview_unstable(state);\n};\n\nPreview.displayName = 'Preview';\n"],"names":["Preview","props","state","usePreview_unstable","renderPreview_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BAJuB;+BACG;AAGhC,MAAMA,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBF;IAElC,OAAOG,IAAAA,qCAAAA,EAAuBF;AAChC;AAEAF,QAAQK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderPopover_unstable } from '@fluentui/react-components';\n\nimport { PreviewContextProvider } from '../../previewContext';\nimport type { PreviewState } from './Preview.types';\n\n/**\n * Render the final JSX of Preview\n */\nexport const renderPreview_unstable = (state: PreviewState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inertTrapFocus,\n inline,\n isPreviewLocked,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n } = state;\n\n return (\n <PreviewContextProvider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inertTrapFocus,\n inline,\n isPreviewLocked,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n }}\n >\n {renderPopover_unstable(state)}\n </PreviewContextProvider>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["renderPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { renderPopover_unstable } from '@fluentui/react-components';\n\nimport { PreviewContextProvider } from '../../previewContext';\nimport type { PreviewState } from './Preview.types';\n\n/**\n * Render the final JSX of Preview\n */\nexport const renderPreview_unstable = (state: PreviewState) => {\n const {\n appearance,\n arrowRef,\n contentRef,\n inertTrapFocus,\n inline,\n isPreviewLocked,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n } = state;\n\n return (\n <PreviewContextProvider\n value={{\n appearance,\n arrowRef,\n contentRef,\n inertTrapFocus,\n inline,\n isPreviewLocked,\n mountNode,\n open,\n openOnContext,\n openOnHover,\n setOpen,\n size,\n toggleOpen,\n trapFocus,\n triggerRef,\n withArrow,\n }}\n >\n {renderPopover_unstable(state)}\n </PreviewContextProvider>\n );\n};\n"],"names":["renderPreview_unstable","state","appearance","arrowRef","contentRef","inertTrapFocus","inline","isPreviewLocked","mountNode","open","openOnContext","openOnHover","setOpen","size","toggleOpen","trapFocus","triggerRef","withArrow","React","createElement","PreviewContextProvider","value","renderPopover_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;iCAEgB;gCAEA;AAMhC,MAAMA,yBAAyB,CAACC;IACrC,MAAM,EACJC,UAAU,EACVC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,SAAS,EACTC,IAAI,EACJC,aAAa,EACbC,WAAW,EACXC,OAAO,EACPC,IAAI,EACJC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,SAAS,EACV,GAAGhB;IAEJ,OAAA,WAAA,GACEiB,OAAAC,aAAA,CAACC,sCAAAA,EAAAA;QACCC,OAAO;YACLnB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;OAECK,IAAAA,uCAAAA,EAAuBrB;AAG9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n mergeCallbacks,\n resolvePositioningShorthand,\n useFluent,\n useId,\n useIsomorphicLayoutEffect,\n usePopover_unstable,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-components';\n\nimport { addOpenedByHoverPreview, closeAllOpenedByHoverPreviews, removeOpenedByHoverPreview } from '../../utils';\nimport type { PreviewProps, PreviewState } from './Preview.types';\n\ntype PreviewInternalState = {\n openByClick: boolean;\n openByHoverOverTrigger: boolean;\n openByHoverOverPopover: boolean;\n openByKeyboard: boolean;\n};\n\nconst POPOVER_MOUSE_DELAY = 250;\nconst POPOVER_KEYBOARD_HIDE_DELAY = 0;\n\nconst getDelay = (type: string, popoverMouseHideDelay: number): number => {\n if (type === 'focus' || type === 'blur') {\n return POPOVER_KEYBOARD_HIDE_DELAY;\n }\n\n return popoverMouseHideDelay;\n};\n\ntype TargetEvent<T> = React.MouseEvent<T> | React.FocusEvent<T>;\n\n/**\n * Create the state required to render Preview.\n *\n * The returned state can be modified with hooks such as usePreviewStyles_unstable,\n * before being passed to renderPreview_unstable.\n *\n * @param props - props from this instance of Preview\n * @param ref - reference to root HTMLElement of Preview\n */\nexport const usePreview_unstable = (props: PreviewProps): PreviewState => {\n const {\n hideDelay = POPOVER_MOUSE_DELAY,\n onOpenChange,\n open,\n positioning,\n showDelay = POPOVER_MOUSE_DELAY,\n unstable_disableAutoFocus,\n } = props;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n const { targetDocument } = useFluent();\n const [setEnterTimeout, clearEnterTimeout] = useTimeout();\n const [setLeaveTimeout, clearLeaveTimeout] = useTimeout();\n\n const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);\n\n const { current: previewInternalState } = React.useRef<PreviewInternalState>({\n openByClick: false,\n openByHoverOverTrigger: false,\n openByHoverOverPopover: false,\n openByKeyboard: false,\n });\n const triggerMousedOver = React.useRef(false);\n\n const isOpen = () => {\n return (\n previewInternalState.openByClick ||\n previewInternalState.openByHoverOverTrigger ||\n previewInternalState.openByHoverOverPopover ||\n previewInternalState.openByKeyboard\n );\n };\n\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n const preventDefaultClose = React.useRef(false);\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const popoverSurfaceId = useId('preview-surface', popoverSurface?.props.id);\n\n const closeCallback = () => {\n previewInternalState.openByClick = false;\n previewInternalState.openByHoverOverTrigger = false;\n previewInternalState.openByHoverOverPopover = false;\n previewInternalState.openByKeyboard = false;\n setIsPopoverOpen(isOpen());\n clearEnterTimeout();\n };\n\n React.useEffect(() => {\n return () => {\n // Remove all instances of the current popover from the openedByHoverPreviewManager when the component is unmounted.\n removeOpenedByHoverPreview(popoverSurfaceId);\n };\n }, [popoverSurfaceId]);\n\n if (popoverSurface && popoverTrigger) {\n const handleTriggerTargetEnter = (e: TargetEvent<HTMLSpanElement>): void => {\n previewInternalState.openByHoverOverTrigger = true;\n triggerMousedOver.current = true;\n\n // We want to disable auto focus only if the popover is being opened by hovering over the trigger\n if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen) {\n setDisableAutoFocus(true);\n closeAllOpenedByHoverPreviews(popoverSurfaceId);\n }\n\n setEnterTimeout(() => {\n if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen && isOpen()) {\n onOpenChange?.(e, { open: true });\n addOpenedByHoverPreview(popoverSurfaceId, closeCallback);\n }\n setIsPopoverOpen(isOpen());\n }, showDelay);\n };\n\n const handleTriggerTargetLeave = (e: TargetEvent<HTMLSpanElement>): void => {\n previewInternalState.openByHoverOverTrigger = false;\n triggerMousedOver.current = false;\n\n setLeaveTimeout(() => {\n setIsPopoverOpen(isOpen());\n\n // We want to call onOpenChange only if the popover is actually closing when leaving the trigger\n if (\n !previewInternalState.openByClick &&\n !previewInternalState.openByKeyboard &&\n !previewInternalState.openByHoverOverPopover &&\n isPopoverOpen\n ) {\n onOpenChange?.(e, { open: false });\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n }, getDelay(e.type, hideDelay));\n };\n\n const handleTriggerClick = (e: TargetEvent<HTMLSpanElement>): void => {\n // Setting preventDefaultClose so that onPopoverOpenChange does not apply its logic when click is on the trigger as we want to control that behavior.\n preventDefaultClose.current = true;\n\n // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.\n setDisableAutoFocus(false);\n\n const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;\n\n // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.\n previewInternalState.openByClick = previewInternalState.openByKeyboard\n ? false\n : !previewInternalState.openByClick;\n previewInternalState.openByHoverOverTrigger = false;\n previewInternalState.openByHoverOverPopover = false;\n previewInternalState.openByKeyboard = false;\n\n // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.\n if (triggerMousedOver.current) {\n previewInternalState.openByClick = false;\n triggerMousedOver.current = false;\n }\n // If it was not moused over, we want to prevent the default click action from opening a link, so the preview can open first\n else {\n e.preventDefault();\n }\n\n if (!tmpOpenByHoverOverTrigger) {\n onOpenChange?.(e, { open: previewInternalState.openByClick });\n }\n\n if (!isOpen()) {\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n\n setIsPopoverOpen(isOpen());\n };\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n if (e.key === Enter) {\n clearLeaveTimeout();\n\n // Setting default prevented so that Enter key does not trigger a click event or onPopoverOpenChange.\n e.preventDefault();\n\n // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via keyboard.\n setDisableAutoFocus(false);\n\n const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;\n\n // If openByClick is true, then the popover was already opened via click and we always want to close it.\n previewInternalState.openByKeyboard = previewInternalState.openByClick\n ? false\n : !previewInternalState.openByKeyboard;\n previewInternalState.openByClick = false;\n previewInternalState.openByHoverOverTrigger = false;\n previewInternalState.openByHoverOverPopover = false;\n\n if (!tmpOpenByHoverOverTrigger) {\n onOpenChange?.(e, { open: previewInternalState.openByKeyboard });\n }\n\n if (!isOpen()) {\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n\n setIsPopoverOpen(isOpen());\n }\n };\n\n const handlePopoverTargetEnter = (e: TargetEvent<HTMLDivElement>): void => {\n previewInternalState.openByHoverOverPopover = true;\n setIsPopoverOpen(isOpen());\n };\n\n const handlePopoverTargetLeave = (e: TargetEvent<HTMLDivElement>): void => {\n previewInternalState.openByHoverOverPopover = false;\n setLeaveTimeout(() => {\n setIsPopoverOpen(isOpen());\n\n // We want to call onOpenChange only if the popover is actually closing when leaving the popover\n if (\n !previewInternalState.openByClick &&\n !previewInternalState.openByKeyboard &&\n !previewInternalState.openByHoverOverTrigger\n ) {\n onOpenChange?.(e, { open: false });\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n }, getDelay(e.type, hideDelay));\n };\n\n popoverTrigger = React.cloneElement(popoverTrigger, {\n ...popoverTrigger.props,\n children: React.cloneElement(popoverTrigger.props.children as React.ReactElement, {\n ...popoverTrigger.props.children.props,\n onBlur: mergeCallbacks(popoverTrigger.props.children.props.onBlur, handleTriggerTargetLeave),\n onClick: mergeCallbacks(popoverTrigger.props.children.props.onClick, handleTriggerClick),\n onKeyDown: mergeCallbacks(popoverTrigger.props.children.props.onKeyDown, handleTriggerKeyDown),\n onMouseEnter: mergeCallbacks(popoverTrigger.props.children.props.onMouseEnter, handleTriggerTargetEnter),\n onMouseLeave: mergeCallbacks(popoverTrigger.props.children.props.onMouseLeave, handleTriggerTargetLeave),\n }),\n });\n\n popoverSurface = React.cloneElement(popoverSurface, {\n ...popoverSurface.props,\n 'aria-labelledby':\n popoverSurface.props['aria-labelledby'] ?? (popoverSurface.props['aria-label'] ? undefined : popoverSurfaceId),\n id: popoverSurfaceId,\n onMouseEnter: mergeCallbacks(popoverSurface.props.onMouseEnter, handlePopoverTargetEnter),\n onMouseLeave: mergeCallbacks(popoverSurface.props.onMouseLeave, handlePopoverTargetLeave),\n onFocus: mergeCallbacks(popoverSurface.props.onFocus, handlePopoverTargetEnter),\n });\n }\n\n // Hitting Escape key should close the popover if it was opened by hover.\n // This is necessary to attach to the document because focus is likely not within the trigger or popover.\n useIsomorphicLayoutEffect(() => {\n if (isPopoverOpen) {\n const onDocumentKeyDown = (e: KeyboardEvent) => {\n const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;\n\n if (openedByHover && e.key === Escape) {\n clearLeaveTimeout();\n\n // We set state back to its default if the Escape key has been pressed\n setDisableAutoFocus(true);\n closeCallback();\n removeOpenedByHoverPreview(popoverSurfaceId);\n\n onOpenChange?.(e as unknown as OpenPopoverEvents, { open: false });\n\n e.stopPropagation();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, { capture: true });\n\n return () => {\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [targetDocument, isPopoverOpen]);\n\n const onPopoverOpenChange = (e: OpenPopoverEvents, data: OnOpenChangeData): void => {\n if (!preventDefaultClose.current) {\n // We set all open state to false if preventDefaultClose was not set to true and the popover is closing.\n if (!data.open) {\n clearLeaveTimeout();\n closeCallback();\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n\n onOpenChange?.(e, data);\n }\n\n preventDefaultClose.current = false;\n };\n\n let resolvedChildren = children as [JSX.Element, JSX.Element] | JSX.Element;\n if (popoverSurface) {\n if (popoverTrigger) {\n resolvedChildren = [popoverTrigger, popoverSurface];\n } else {\n resolvedChildren = popoverSurface;\n }\n }\n\n const popoverState = usePopover_unstable({\n ...props,\n children: resolvedChildren,\n onOpenChange: onPopoverOpenChange,\n open: open ?? isPopoverOpen,\n positioning:\n typeof positioning === 'string'\n ? { autoSize: true, ...resolvePositioningShorthand(positioning) }\n : { autoSize: true, ...positioning },\n unstable_disableAutoFocus: unstable_disableAutoFocus ?? disableAutoFocus,\n });\n\n return {\n ...popoverState,\n isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard,\n };\n};\n"],"names":["hideDelay","POPOVER_MOUSE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","popoverMouseHideDelay","targetDocument","useFluent","onOpenChange","setEnterTimeout","open","positioning","disableAutoFocus","showDelay","current","previewInternalState","openByHoverOverPopover","toArray","props","children","openByKeyboard","triggerMousedOver","clearEnterTimeout","useTimeout","setLeaveTimeout","openByClick","setDisableAutoFocus","React","useState","preventDefaultClose","popoverTrigger","popoverSurface","openByHoverOverTrigger","useRef","isOpen","popoverSurfaceId","useId","setIsPopoverOpen","useEffect","length","removeOpenedByHoverPreview","closeCallback","handleTriggerTargetEnter","closeAllOpenedByHoverPreviews","isPopoverOpen","handleTriggerTargetLeave","e","handleTriggerClick","tmpOpenByHoverOverTrigger","clearLeaveTimeout","handlePopoverTargetEnter","handlePopoverTargetLeave","cloneElement","onBlur","mergeCallbacks","onMouseLeave","onMouseEnter","onFocus","_popoverSurface_props_arialabelledby","useIsomorphicLayoutEffect","undefined","openedByHover","Escape","stopPropagation","key","onPopoverOpenChange","removeEventListener","onDocumentKeyDown","data","resolvedChildren","popoverState","autoSize","resolvePositioningShorthand","unstable_disableAutoFocus"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["usePreview.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { Enter, Escape } from '@fluentui/keyboard-keys';\nimport {\n mergeCallbacks,\n resolvePositioningShorthand,\n useFluent,\n useId,\n useIsomorphicLayoutEffect,\n usePopover_unstable,\n} from '@fluentui/react-components';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport type { OnOpenChangeData, OpenPopoverEvents } from '@fluentui/react-components';\n\nimport { addOpenedByHoverPreview, closeAllOpenedByHoverPreviews, removeOpenedByHoverPreview } from '../../utils';\nimport type { PreviewProps, PreviewState } from './Preview.types';\n\ntype PreviewInternalState = {\n openByClick: boolean;\n openByHoverOverTrigger: boolean;\n openByHoverOverPopover: boolean;\n openByKeyboard: boolean;\n};\n\nconst POPOVER_MOUSE_DELAY = 250;\nconst POPOVER_KEYBOARD_HIDE_DELAY = 0;\n\nconst getDelay = (type: string, popoverMouseHideDelay: number): number => {\n if (type === 'focus' || type === 'blur') {\n return POPOVER_KEYBOARD_HIDE_DELAY;\n }\n\n return popoverMouseHideDelay;\n};\n\ntype TargetEvent<T> = React.MouseEvent<T> | React.FocusEvent<T>;\n\n/**\n * Create the state required to render Preview.\n *\n * The returned state can be modified with hooks such as usePreviewStyles_unstable,\n * before being passed to renderPreview_unstable.\n *\n * @param props - props from this instance of Preview\n * @param ref - reference to root HTMLElement of Preview\n */\nexport const usePreview_unstable = (props: PreviewProps): PreviewState => {\n const {\n hideDelay = POPOVER_MOUSE_DELAY,\n onOpenChange,\n open,\n positioning,\n showDelay = POPOVER_MOUSE_DELAY,\n unstable_disableAutoFocus,\n } = props;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n const { targetDocument } = useFluent();\n const [setEnterTimeout, clearEnterTimeout] = useTimeout();\n const [setLeaveTimeout, clearLeaveTimeout] = useTimeout();\n\n const [disableAutoFocus, setDisableAutoFocus] = React.useState(true);\n\n const { current: previewInternalState } = React.useRef<PreviewInternalState>({\n openByClick: false,\n openByHoverOverTrigger: false,\n openByHoverOverPopover: false,\n openByKeyboard: false,\n });\n const triggerMousedOver = React.useRef(false);\n\n const isOpen = () => {\n return (\n previewInternalState.openByClick ||\n previewInternalState.openByHoverOverTrigger ||\n previewInternalState.openByHoverOverPopover ||\n previewInternalState.openByKeyboard\n );\n };\n\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n const preventDefaultClose = React.useRef(false);\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const popoverSurfaceId = useId('preview-surface', popoverSurface?.props.id);\n\n const closeCallback = () => {\n previewInternalState.openByClick = false;\n previewInternalState.openByHoverOverTrigger = false;\n previewInternalState.openByHoverOverPopover = false;\n previewInternalState.openByKeyboard = false;\n setIsPopoverOpen(isOpen());\n clearEnterTimeout();\n };\n\n React.useEffect(() => {\n return () => {\n // Remove all instances of the current popover from the openedByHoverPreviewManager when the component is unmounted.\n removeOpenedByHoverPreview(popoverSurfaceId);\n };\n }, [popoverSurfaceId]);\n\n if (popoverSurface && popoverTrigger) {\n const handleTriggerTargetEnter = (e: TargetEvent<HTMLSpanElement>): void => {\n previewInternalState.openByHoverOverTrigger = true;\n triggerMousedOver.current = true;\n\n // We want to disable auto focus only if the popover is being opened by hovering over the trigger\n if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen) {\n setDisableAutoFocus(true);\n closeAllOpenedByHoverPreviews(popoverSurfaceId);\n }\n\n setEnterTimeout(() => {\n if (!previewInternalState.openByClick && !previewInternalState.openByKeyboard && !isPopoverOpen && isOpen()) {\n onOpenChange?.(e, { open: true });\n addOpenedByHoverPreview(popoverSurfaceId, closeCallback);\n }\n setIsPopoverOpen(isOpen());\n }, showDelay);\n };\n\n const handleTriggerTargetLeave = (e: TargetEvent<HTMLSpanElement>): void => {\n previewInternalState.openByHoverOverTrigger = false;\n triggerMousedOver.current = false;\n\n setLeaveTimeout(() => {\n setIsPopoverOpen(isOpen());\n\n // We want to call onOpenChange only if the popover is actually closing when leaving the trigger\n if (\n !previewInternalState.openByClick &&\n !previewInternalState.openByKeyboard &&\n !previewInternalState.openByHoverOverPopover &&\n isPopoverOpen\n ) {\n onOpenChange?.(e, { open: false });\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n }, getDelay(e.type, hideDelay));\n };\n\n const handleTriggerClick = (e: TargetEvent<HTMLSpanElement>): void => {\n // Setting preventDefaultClose so that onPopoverOpenChange does not apply its logic when click is on the trigger as we want to control that behavior.\n preventDefaultClose.current = true;\n\n // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via click.\n setDisableAutoFocus(false);\n\n const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;\n\n // If openByKeyboard is true, then the popover was already opened via keyboard and we always want to close it.\n previewInternalState.openByClick = previewInternalState.openByKeyboard\n ? false\n : !previewInternalState.openByClick;\n previewInternalState.openByHoverOverTrigger = false;\n previewInternalState.openByHoverOverPopover = false;\n previewInternalState.openByKeyboard = false;\n\n // We set triggerMousedOver to false when clicking, since we just interacted with the trigger via click, and not hover.\n if (triggerMousedOver.current) {\n previewInternalState.openByClick = false;\n triggerMousedOver.current = false;\n }\n // If it was not moused over, we want to prevent the default click action from opening a link, so the preview can open first\n else {\n e.preventDefault();\n }\n\n if (!tmpOpenByHoverOverTrigger) {\n onOpenChange?.(e, { open: previewInternalState.openByClick });\n }\n\n if (!isOpen()) {\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n\n setIsPopoverOpen(isOpen());\n };\n\n const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n if (e.key === Enter) {\n clearLeaveTimeout();\n\n // Setting default prevented so that Enter key does not trigger a click event or onPopoverOpenChange.\n e.preventDefault();\n\n // We set disableAutoFocus to false so that interactive elements within popover can be focused when it opens via keyboard.\n setDisableAutoFocus(false);\n\n const tmpOpenByHoverOverTrigger = previewInternalState.openByHoverOverTrigger;\n\n // If openByClick is true, then the popover was already opened via click and we always want to close it.\n previewInternalState.openByKeyboard = previewInternalState.openByClick\n ? false\n : !previewInternalState.openByKeyboard;\n previewInternalState.openByClick = false;\n previewInternalState.openByHoverOverTrigger = false;\n previewInternalState.openByHoverOverPopover = false;\n\n if (!tmpOpenByHoverOverTrigger) {\n onOpenChange?.(e, { open: previewInternalState.openByKeyboard });\n }\n\n if (!isOpen()) {\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n\n setIsPopoverOpen(isOpen());\n }\n };\n\n const handlePopoverTargetEnter = (e: TargetEvent<HTMLDivElement>): void => {\n previewInternalState.openByHoverOverPopover = true;\n setIsPopoverOpen(isOpen());\n };\n\n const handlePopoverTargetLeave = (e: TargetEvent<HTMLDivElement>): void => {\n previewInternalState.openByHoverOverPopover = false;\n setLeaveTimeout(() => {\n setIsPopoverOpen(isOpen());\n\n // We want to call onOpenChange only if the popover is actually closing when leaving the popover\n if (\n !previewInternalState.openByClick &&\n !previewInternalState.openByKeyboard &&\n !previewInternalState.openByHoverOverTrigger\n ) {\n onOpenChange?.(e, { open: false });\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n }, getDelay(e.type, hideDelay));\n };\n\n popoverTrigger = React.cloneElement(popoverTrigger, {\n ...popoverTrigger.props,\n children: React.cloneElement(popoverTrigger.props.children as React.ReactElement, {\n ...popoverTrigger.props.children.props,\n onBlur: mergeCallbacks(popoverTrigger.props.children.props.onBlur, handleTriggerTargetLeave),\n onClick: mergeCallbacks(popoverTrigger.props.children.props.onClick, handleTriggerClick),\n onKeyDown: mergeCallbacks(popoverTrigger.props.children.props.onKeyDown, handleTriggerKeyDown),\n onMouseEnter: mergeCallbacks(popoverTrigger.props.children.props.onMouseEnter, handleTriggerTargetEnter),\n onMouseLeave: mergeCallbacks(popoverTrigger.props.children.props.onMouseLeave, handleTriggerTargetLeave),\n }),\n });\n\n popoverSurface = React.cloneElement(popoverSurface, {\n ...popoverSurface.props,\n 'aria-labelledby':\n popoverSurface.props['aria-labelledby'] ?? (popoverSurface.props['aria-label'] ? undefined : popoverSurfaceId),\n id: popoverSurfaceId,\n onMouseEnter: mergeCallbacks(popoverSurface.props.onMouseEnter, handlePopoverTargetEnter),\n onMouseLeave: mergeCallbacks(popoverSurface.props.onMouseLeave, handlePopoverTargetLeave),\n onFocus: mergeCallbacks(popoverSurface.props.onFocus, handlePopoverTargetEnter),\n });\n }\n\n // Hitting Escape key should close the popover if it was opened by hover.\n // This is necessary to attach to the document because focus is likely not within the trigger or popover.\n useIsomorphicLayoutEffect(() => {\n if (isPopoverOpen) {\n const onDocumentKeyDown = (e: KeyboardEvent) => {\n const openedByHover = !previewInternalState.openByClick && !previewInternalState.openByKeyboard;\n\n if (openedByHover && e.key === Escape) {\n clearLeaveTimeout();\n\n // We set state back to its default if the Escape key has been pressed\n setDisableAutoFocus(true);\n closeCallback();\n removeOpenedByHoverPreview(popoverSurfaceId);\n\n onOpenChange?.(e as unknown as OpenPopoverEvents, { open: false });\n\n e.stopPropagation();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, { capture: true });\n\n return () => {\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [targetDocument, isPopoverOpen]);\n\n const onPopoverOpenChange = (e: OpenPopoverEvents, data: OnOpenChangeData): void => {\n if (!preventDefaultClose.current) {\n // We set all open state to false if preventDefaultClose was not set to true and the popover is closing.\n if (!data.open) {\n clearLeaveTimeout();\n closeCallback();\n removeOpenedByHoverPreview(popoverSurfaceId);\n }\n\n onOpenChange?.(e, data);\n }\n\n preventDefaultClose.current = false;\n };\n\n let resolvedChildren = children as [JSX.Element, JSX.Element] | JSX.Element;\n if (popoverSurface) {\n if (popoverTrigger) {\n resolvedChildren = [popoverTrigger, popoverSurface];\n } else {\n resolvedChildren = popoverSurface;\n }\n }\n\n const popoverState = usePopover_unstable({\n ...props,\n children: resolvedChildren,\n onOpenChange: onPopoverOpenChange,\n open: open ?? isPopoverOpen,\n positioning:\n typeof positioning === 'string'\n ? { autoSize: true, ...resolvePositioningShorthand(positioning) }\n : { autoSize: true, ...positioning },\n unstable_disableAutoFocus: unstable_disableAutoFocus ?? disableAutoFocus,\n });\n\n return {\n ...popoverState,\n isPreviewLocked: previewInternalState.openByClick || previewInternalState.openByKeyboard,\n };\n};\n"],"names":["usePreview_unstable","POPOVER_MOUSE_DELAY","POPOVER_KEYBOARD_HIDE_DELAY","getDelay","type","popoverMouseHideDelay","props","hideDelay","onOpenChange","open","positioning","showDelay","unstable_disableAutoFocus","children","React","Children","toArray","targetDocument","useFluent","setEnterTimeout","clearEnterTimeout","useTimeout","setLeaveTimeout","clearLeaveTimeout","disableAutoFocus","setDisableAutoFocus","useState","current","previewInternalState","useRef","openByClick","openByHoverOverTrigger","openByHoverOverPopover","openByKeyboard","triggerMousedOver","isOpen","isPopoverOpen","setIsPopoverOpen","preventDefaultClose","popoverTrigger","undefined","popoverSurface","length","popoverSurfaceId","useId","id","closeCallback","useEffect","removeOpenedByHoverPreview","handleTriggerTargetEnter","e","closeAllOpenedByHoverPreviews","addOpenedByHoverPreview","handleTriggerTargetLeave","handleTriggerClick","tmpOpenByHoverOverTrigger","preventDefault","handleTriggerKeyDown","key","Enter","handlePopoverTargetEnter","handlePopoverTargetLeave","cloneElement","onBlur","mergeCallbacks","onClick","onKeyDown","onMouseEnter","onMouseLeave","onFocus","useIsomorphicLayoutEffect","onDocumentKeyDown","openedByHover","Escape","stopPropagation","addEventListener","capture","removeEventListener","onPopoverOpenChange","data","resolvedChildren","popoverState","usePopover_unstable","autoSize","resolvePositioningShorthand","isPreviewLocked"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8CaA;;;eAAAA;;;;iEA9CU;8BAEO;iCAQvB;gCACoB;uBAGwE;AAUnG,MAAMC,sBAAsB;AAC5B,MAAMC,8BAA8B;AAEpC,MAAMC,WAAW,CAACC,MAAcC;IAC9B,IAAID,SAAS,WAAWA,SAAS,QAAQ;QACvC,OAAOF;IACT;IAEA,OAAOG;AACT;AAaO,MAAML,sBAAsB,CAACM;IAClC,MAAM,EACJC,YAAYN,mBAAmB,EAC/BO,YAAY,EACZC,IAAI,EACJC,WAAW,EACXC,YAAYV,mBAAmB,EAC/BW,yBAAyB,EAC1B,GAAGN;IAEJ,MAAMO,WAAWC,OAAMC,QAAQ,CAACC,OAAO,CAACV,MAAMO,QAAQ;IAEtD,MAAM,EAAEI,cAAc,EAAE,GAAGC,IAAAA,0BAAAA;IAC3B,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGC,IAAAA,0BAAAA;IAC7C,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGF,IAAAA,0BAAAA;IAE7C,MAAM,CAACG,kBAAkBC,oBAAoB,GAAGX,OAAMY,QAAQ,CAAC;IAE/D,MAAM,EAAEC,SAASC,oBAAoB,EAAE,GAAGd,OAAMe,MAAM,CAAuB;QAC3EC,aAAa;QACbC,wBAAwB;QACxBC,wBAAwB;QACxBC,gBAAgB;IAClB;IACA,MAAMC,oBAAoBpB,OAAMe,MAAM,CAAC;IAEvC,MAAMM,SAAS;QACb,OACEP,qBAAqBE,WAAW,IAChCF,qBAAqBG,sBAAsB,IAC3CH,qBAAqBI,sBAAsB,IAC3CJ,qBAAqBK,cAAc;IAEvC;IAEA,MAAM,CAACG,eAAeC,iBAAiB,GAAGvB,OAAMY,QAAQ,CAAC;IACzD,MAAMY,sBAAsBxB,OAAMe,MAAM,CAAC;IAEzC,IAAIU,iBAAiDC;IACrD,IAAIC,iBAAiDD;IACrD,IAAI3B,SAAS6B,MAAM,KAAK,GAAG;QACzBH,iBAAiB1B,QAAQ,CAAC,EAAE;QAC5B4B,iBAAiB5B,QAAQ,CAAC,EAAE;IAC9B,OAAO,IAAIA,SAAS6B,MAAM,KAAK,GAAG;QAChCD,iBAAiB5B,QAAQ,CAAC,EAAE;IAC9B;IAEA,MAAM8B,mBAAmBC,IAAAA,sBAAAA,EAAM,mBAAmBH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBnC,KAAK,CAACuC,EAAE;IAE1E,MAAMC,gBAAgB;QACpBlB,qBAAqBE,WAAW,GAAG;QACnCF,qBAAqBG,sBAAsB,GAAG;QAC9CH,qBAAqBI,sBAAsB,GAAG;QAC9CJ,qBAAqBK,cAAc,GAAG;QACtCI,iBAAiBF;QACjBf;IACF;IAEAN,OAAMiC,SAAS,CAAC;QACd,OAAO;YACL,oHAAoH;YACpHC,IAAAA,iCAAAA,EAA2BL;QAC7B;IACF,GAAG;QAACA;KAAiB;IAErB,IAAIF,kBAAkBF,gBAAgB;QACpC,MAAMU,2BAA2B,CAACC;YAChCtB,qBAAqBG,sBAAsB,GAAG;YAC9CG,kBAAkBP,OAAO,GAAG;YAE5B,iGAAiG;YACjG,IAAI,CAACC,qBAAqBE,WAAW,IAAI,CAACF,qBAAqBK,cAAc,IAAI,CAACG,eAAe;gBAC/FX,oBAAoB;gBACpB0B,IAAAA,oCAAAA,EAA8BR;YAChC;YAEAxB,gBAAgB;gBACd,IAAI,CAACS,qBAAqBE,WAAW,IAAI,CAACF,qBAAqBK,cAAc,IAAI,CAACG,iBAAiBD,UAAU;oBAC3G3B,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAG;wBAAEzC,MAAM;oBAAK;oBAC/B2C,IAAAA,8BAAAA,EAAwBT,kBAAkBG;gBAC5C;gBACAT,iBAAiBF;YACnB,GAAGxB;QACL;QAEA,MAAM0C,2BAA2B,CAACH;YAChCtB,qBAAqBG,sBAAsB,GAAG;YAC9CG,kBAAkBP,OAAO,GAAG;YAE5BL,gBAAgB;gBACde,iBAAiBF;gBAEjB,gGAAgG;gBAChG,IACE,CAACP,qBAAqBE,WAAW,IACjC,CAACF,qBAAqBK,cAAc,IACpC,CAACL,qBAAqBI,sBAAsB,IAC5CI,eACA;oBACA5B,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAG;wBAAEzC,MAAM;oBAAM;oBAChCuC,IAAAA,iCAAAA,EAA2BL;gBAC7B;YACF,GAAGxC,SAAS+C,EAAE9C,IAAI,EAAEG;QACtB;QAEA,MAAM+C,qBAAqB,CAACJ;YAC1B,qJAAqJ;YACrJZ,oBAAoBX,OAAO,GAAG;YAE9B,uHAAuH;YACvHF,oBAAoB;YAEpB,MAAM8B,4BAA4B3B,qBAAqBG,sBAAsB;YAE7E,8GAA8G;YAC9GH,qBAAqBE,WAAW,GAAGF,qBAAqBK,cAAc,GAClE,QACA,CAACL,qBAAqBE,WAAW;YACrCF,qBAAqBG,sBAAsB,GAAG;YAC9CH,qBAAqBI,sBAAsB,GAAG;YAC9CJ,qBAAqBK,cAAc,GAAG;YAEtC,uHAAuH;YACvH,IAAIC,kBAAkBP,OAAO,EAAE;gBAC7BC,qBAAqBE,WAAW,GAAG;gBACnCI,kBAAkBP,OAAO,GAAG;YAC9B,OAEK;gBACHuB,EAAEM,cAAc;YAClB;YAEA,IAAI,CAACD,2BAA2B;gBAC9B/C,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAG;oBAAEzC,MAAMmB,qBAAqBE,WAAW;gBAAC;YAC7D;YAEA,IAAI,CAACK,UAAU;gBACba,IAAAA,iCAAAA,EAA2BL;YAC7B;YAEAN,iBAAiBF;QACnB;QAEA,MAAMsB,uBAAuB,CAACP;YAC5B,IAAIA,EAAEQ,GAAG,KAAKC,mBAAAA,EAAO;gBACnBpC;gBAEA,qGAAqG;gBACrG2B,EAAEM,cAAc;gBAEhB,0HAA0H;gBAC1H/B,oBAAoB;gBAEpB,MAAM8B,4BAA4B3B,qBAAqBG,sBAAsB;gBAE7E,wGAAwG;gBACxGH,qBAAqBK,cAAc,GAAGL,qBAAqBE,WAAW,GAClE,QACA,CAACF,qBAAqBK,cAAc;gBACxCL,qBAAqBE,WAAW,GAAG;gBACnCF,qBAAqBG,sBAAsB,GAAG;gBAC9CH,qBAAqBI,sBAAsB,GAAG;gBAE9C,IAAI,CAACuB,2BAA2B;oBAC9B/C,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAG;wBAAEzC,MAAMmB,qBAAqBK,cAAc;oBAAC;gBAChE;gBAEA,IAAI,CAACE,UAAU;oBACba,IAAAA,iCAAAA,EAA2BL;gBAC7B;gBAEAN,iBAAiBF;YACnB;QACF;QAEA,MAAMyB,2BAA2B,CAACV;YAChCtB,qBAAqBI,sBAAsB,GAAG;YAC9CK,iBAAiBF;QACnB;QAEA,MAAM0B,2BAA2B,CAACX;YAChCtB,qBAAqBI,sBAAsB,GAAG;YAC9CV,gBAAgB;gBACde,iBAAiBF;gBAEjB,gGAAgG;gBAChG,IACE,CAACP,qBAAqBE,WAAW,IACjC,CAACF,qBAAqBK,cAAc,IACpC,CAACL,qBAAqBG,sBAAsB,EAC5C;oBACAvB,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAG;wBAAEzC,MAAM;oBAAM;oBAChCuC,IAAAA,iCAAAA,EAA2BL;gBAC7B;YACF,GAAGxC,SAAS+C,EAAE9C,IAAI,EAAEG;QACtB;QAEAgC,+BAAiBzB,OAAMgD,YAAY,CAACvB,gBAAgB;YAClD,GAAGA,eAAejC,KAAK;YACvBO,wBAAUC,OAAMgD,YAAY,CAACvB,eAAejC,KAAK,CAACO,QAAQ,EAAwB;gBAChF,GAAG0B,eAAejC,KAAK,CAACO,QAAQ,CAACP,KAAK;gBACtCyD,QAAQC,IAAAA,+BAAAA,EAAezB,eAAejC,KAAK,CAACO,QAAQ,CAACP,KAAK,CAACyD,MAAM,EAAEV;gBACnEY,SAASD,IAAAA,+BAAAA,EAAezB,eAAejC,KAAK,CAACO,QAAQ,CAACP,KAAK,CAAC2D,OAAO,EAAEX;gBACrEY,WAAWF,IAAAA,+BAAAA,EAAezB,eAAejC,KAAK,CAACO,QAAQ,CAACP,KAAK,CAAC4D,SAAS,EAAET;gBACzEU,cAAcH,IAAAA,+BAAAA,EAAezB,eAAejC,KAAK,CAACO,QAAQ,CAACP,KAAK,CAAC6D,YAAY,EAAElB;gBAC/EmB,cAAcJ,IAAAA,+BAAAA,EAAezB,eAAejC,KAAK,CAACO,QAAQ,CAACP,KAAK,CAAC8D,YAAY,EAAEf;YACjF;QACF;YAKIZ;QAHJA,+BAAiB3B,OAAMgD,YAAY,CAACrB,gBAAgB;YAClD,GAAGA,eAAenC,KAAK;YACvB,mBACEmC,CAAAA,uCAAAA,eAAenC,KAAK,CAAC,kBAAkB,AAAlB,MAAkB,QAAvCmC,yCAAAA,KAAAA,IAAAA,uCAA4CA,eAAenC,KAAK,CAAC,aAAa,GAAGkC,YAAYG;YAC/FE,IAAIF;YACJwB,cAAcH,IAAAA,+BAAAA,EAAevB,eAAenC,KAAK,CAAC6D,YAAY,EAAEP;YAChEQ,cAAcJ,IAAAA,+BAAAA,EAAevB,eAAenC,KAAK,CAAC8D,YAAY,EAAEP;YAChEQ,SAASL,IAAAA,+BAAAA,EAAevB,eAAenC,KAAK,CAAC+D,OAAO,EAAET;QACxD;IACF;IAEA,yEAAyE;IACzE,yGAAyG;IACzGU,IAAAA,0CAAAA,EAA0B;QACxB,IAAIlC,eAAe;YACjB,MAAMmC,oBAAoB,CAACrB;gBACzB,MAAMsB,gBAAgB,CAAC5C,qBAAqBE,WAAW,IAAI,CAACF,qBAAqBK,cAAc;gBAE/F,IAAIuC,iBAAiBtB,EAAEQ,GAAG,KAAKe,oBAAAA,EAAQ;oBACrClD;oBAEA,sEAAsE;oBACtEE,oBAAoB;oBACpBqB;oBACAE,IAAAA,iCAAAA,EAA2BL;oBAE3BnC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAmC;wBAAEzC,MAAM;oBAAM;oBAEhEyC,EAAEwB,eAAe;gBACnB;YACF;YAEAzD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB0D,gBAAgB,CAAC,WAAWJ,mBAAmB;gBAAEK,SAAS;YAAK;YAE/E,OAAO;gBACL3D,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgB4D,mBAAmB,CAAC,WAAWN,mBAAmB;oBAAEK,SAAS;gBAAK;YACpF;QACF;IACF,GAAG;QAAC3D;QAAgBmB;KAAc;IAElC,MAAM0C,sBAAsB,CAAC5B,GAAsB6B;QACjD,IAAI,CAACzC,oBAAoBX,OAAO,EAAE;YAChC,wGAAwG;YACxG,IAAI,CAACoD,KAAKtE,IAAI,EAAE;gBACdc;gBACAuB;gBACAE,IAAAA,iCAAAA,EAA2BL;YAC7B;YAEAnC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAe0C,GAAG6B;QACpB;QAEAzC,oBAAoBX,OAAO,GAAG;IAChC;IAEA,IAAIqD,mBAAmBnE;IACvB,IAAI4B,gBAAgB;QAClB,IAAIF,gBAAgB;YAClByC,mBAAmB;gBAACzC;gBAAgBE;aAAe;QACrD,OAAO;YACLuC,mBAAmBvC;QACrB;IACF;IAEA,MAAMwC,eAAeC,IAAAA,oCAAAA,EAAoB;QACvC,GAAG5E,KAAK;QACRO,UAAUmE;QACVxE,cAAcsE;QACdrE,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQ2B;QACd1B,aACE,OAAOA,gBAAgB,WACnB;YAAEyE,UAAU;YAAM,GAAGC,IAAAA,4CAAAA,EAA4B1E,YAAY;QAAC,IAC9D;YAAEyE,UAAU;YAAM,GAAGzE,WAAW;QAAC;QACvCE,2BAA2BA,8BAAAA,QAAAA,8BAAAA,KAAAA,IAAAA,4BAA6BY;IAC1D;IAEA,OAAO;QACL,GAAGyD,YAAY;QACfI,iBAAiBzD,qBAAqBE,WAAW,IAAIF,qBAAqBK,cAAc;IAC1F;AACF"}
|
|
@@ -18,4 +18,4 @@ const PreviewContent = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
18
18
|
(0, _usePreviewContentStylesstyles.usePreviewContentStyles_unstable)(state);
|
|
19
19
|
return (0, _renderPreviewContent.renderPreviewContent_unstable)(state);
|
|
20
20
|
});
|
|
21
|
-
PreviewContent.displayName = 'PreviewContent';
|
|
21
|
+
PreviewContent.displayName = 'PreviewContent';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PreviewContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewContent_unstable } from './usePreviewContent';\nimport { renderPreviewContent_unstable } from './renderPreviewContent';\nimport { usePreviewContentStyles_unstable } from './usePreviewContentStyles.styles';\nimport type { PreviewContentProps } from './PreviewContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewContent: ForwardRefComponent<PreviewContentProps> = React.forwardRef((props, ref) => {\n const state = usePreviewContent_unstable(props, ref);\n\n usePreviewContentStyles_unstable(state);\n return renderPreviewContent_unstable(state);\n});\n\nPreviewContent.displayName = 'PreviewContent';\n"],"names":["PreviewContent","React","forwardRef","props","state","usePreviewContent_unstable","usePreviewContentStyles_unstable","renderPreviewContent_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;mCACoB;sCACG;+CACG;AAI1C,MAAMA,iBAAAA,WAAAA,
|
|
1
|
+
{"version":3,"sources":["PreviewContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewContent_unstable } from './usePreviewContent';\nimport { renderPreviewContent_unstable } from './renderPreviewContent';\nimport { usePreviewContentStyles_unstable } from './usePreviewContentStyles.styles';\nimport type { PreviewContentProps } from './PreviewContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewContent: ForwardRefComponent<PreviewContentProps> = React.forwardRef((props, ref) => {\n const state = usePreviewContent_unstable(props, ref);\n\n usePreviewContentStyles_unstable(state);\n return renderPreviewContent_unstable(state);\n});\n\nPreviewContent.displayName = 'PreviewContent';\n"],"names":["PreviewContent","React","forwardRef","props","ref","state","usePreviewContent_unstable","usePreviewContentStyles_unstable","renderPreviewContent_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;mCACoB;sCACG;+CACG;AAI1C,MAAMA,iBAAAA,WAAAA,GAA2DC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQC,IAAAA,6CAAAA,EAA2BH,OAAOC;IAEhDG,IAAAA,+DAAAA,EAAiCF;IACjC,OAAOG,IAAAA,mDAAAA,EAA8BH;AACvC;AAEAL,eAAeS,WAAW,GAAG"}
|
|
@@ -29,4 +29,3 @@ const _PreviewContent = require("./PreviewContent");
|
|
|
29
29
|
const _renderPreviewContent = require("./renderPreviewContent");
|
|
30
30
|
const _usePreviewContent = require("./usePreviewContent");
|
|
31
31
|
const _usePreviewContentStylesstyles = require("./usePreviewContentStyles.styles");
|
|
32
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -13,4 +13,4 @@ const _reactcomponents = require("@fluentui/react-components");
|
|
|
13
13
|
const renderPreviewContent_unstable = (state)=>{
|
|
14
14
|
(0, _reactcomponents.assertSlots)(state);
|
|
15
15
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
|
|
16
|
-
};
|
|
16
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPreviewContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PreviewContentState, PreviewContentSlots } from './PreviewContent.types';\n\n/**\n * Render the final JSX of PreviewContent\n */\nexport const renderPreviewContent_unstable = (state: PreviewContentState) => {\n assertSlots<PreviewContentSlots>(state);\n\n return <state.root />;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["renderPreviewContent.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PreviewContentState, PreviewContentSlots } from './PreviewContent.types';\n\n/**\n * Render the final JSX of PreviewContent\n */\nexport const renderPreviewContent_unstable = (state: PreviewContentState) => {\n assertSlots<PreviewContentSlots>(state);\n\n return <state.root />;\n};\n"],"names":["renderPreviewContent_unstable","state","assertSlots","_jsx","root"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE4B;AAMrB,MAAMA,gCAAgC,CAACC;IAC5CC,IAAAA,4BAAAA,EAAiCD;IAEjC,OAAA,WAAA,GAAOE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewContent.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { PreviewContentProps, PreviewContentState } from './PreviewContent.types';\n\n/**\n * Create the state required to render PreviewContent.\n *\n * The returned state can be modified with hooks such as usePreviewContentStyles_unstable,\n * before being passed to renderPreviewContent_unstable.\n *\n * @param props - props from this instance of PreviewContent\n * @param ref - reference to root HTMLElement of PreviewContent\n */\nexport const usePreviewContent_unstable = (\n props: PreviewContentProps,\n ref: React.Ref<HTMLDivElement>,\n): PreviewContentState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["usePreviewContent_unstable","props","ref","components","root"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["usePreviewContent.ts"],"sourcesContent":["import type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-components';\nimport type { PreviewContentProps, PreviewContentState } from './PreviewContent.types';\n\n/**\n * Create the state required to render PreviewContent.\n *\n * The returned state can be modified with hooks such as usePreviewContentStyles_unstable,\n * before being passed to renderPreviewContent_unstable.\n *\n * @param props - props from this instance of PreviewContent\n * @param ref - reference to root HTMLElement of PreviewContent\n */\nexport const usePreviewContent_unstable = (\n props: PreviewContentProps,\n ref: React.Ref<HTMLDivElement>,\n): PreviewContentState => {\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["usePreviewContent_unstable","props","ref","components","root","slot","always","getIntrinsicElementProps","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;iCAZkC;AAYxC,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9BL;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
previewContentClassNames: function() {
|
|
13
|
+
return previewContentClassNames;
|
|
14
|
+
},
|
|
15
|
+
usePreviewContentStyles_unstable: function() {
|
|
16
|
+
return usePreviewContentStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _reactcomponents = require("@fluentui/react-components");
|
|
20
|
+
const _tokens = require("@fluentui-copilot/tokens");
|
|
21
|
+
const previewContentClassNames = {
|
|
22
|
+
root: 'fai-PreviewContent'
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Styles for the root slot
|
|
26
|
+
*/ const useRootBaseClassName = (0, _reactcomponents.makeResetStyles)({
|
|
27
|
+
color: _tokens.tokens.colorNeutralForeground3,
|
|
28
|
+
display: 'flex',
|
|
29
|
+
flexDirection: 'column',
|
|
30
|
+
maxWidth: `calc(256px - ${_tokens.tokens.spacingHorizontalXS} * 2)`,
|
|
31
|
+
padding: `${_tokens.tokens.spacingVerticalS} ${_tokens.tokens.spacingHorizontalS}`,
|
|
32
|
+
rowGap: _tokens.tokens.spacingVerticalXS,
|
|
33
|
+
wordBreak: 'break-word',
|
|
34
|
+
boxSizing: 'border-box',
|
|
35
|
+
..._reactcomponents.typographyStyles.caption1
|
|
36
|
+
});
|
|
37
|
+
const usePreviewContentStyles_unstable = (state)=>{
|
|
38
|
+
'use no memo';
|
|
39
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
40
|
+
state.root.className = (0, _reactcomponents.mergeClasses)(previewContentClassNames.root, rootBaseClassName, state.root.className);
|
|
41
|
+
return state;
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["usePreviewContentStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PreviewContentSlots, PreviewContentState } from './PreviewContent.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewContentClassNames: SlotClassNames<PreviewContentSlots> = {\n root: 'fai-PreviewContent',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n flexDirection: 'column',\n maxWidth: `calc(256px - ${tokens.spacingHorizontalXS} * 2)`,\n padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n rowGap: tokens.spacingVerticalXS,\n wordBreak: 'break-word',\n boxSizing: 'border-box',\n ...typographyStyles.caption1,\n});\n\n/**\n * Apply styling to the PreviewContent slots based on the state\n */\nexport const usePreviewContentStyles_unstable = (state: PreviewContentState): PreviewContentState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n\n state.root.className = mergeClasses(previewContentClassNames.root, rootBaseClassName, state.root.className);\n\n return state;\n};\n"],"names":["previewContentClassNames","usePreviewContentStyles_unstable","root","useRootBaseClassName","makeResetStyles","color","tokens","colorNeutralForeground3","display","flexDirection","maxWidth","spacingHorizontalXS","padding","spacingVerticalS","spacingHorizontalS","rowGap","spacingVerticalXS","wordBreak","boxSizing","typographyStyles","caption1","state","rootBaseClassName","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,wBAAAA;eAAAA;;IAsBAC,gCAAAA;eAAAA;;;iCA3BmD;wBACzC;AAIhB,MAAMD,2BAAgE;IAC3EE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,uBAAuBC,IAAAA,gCAAAA,EAAgB;IAC3CC,OAAOC,cAAAA,CAAOC,uBAAuB;IACrCC,SAAS;IACTC,eAAe;IACfC,UAAU,CAAC,aAAa,EAAEJ,cAAAA,CAAOK,mBAAmB,CAAC,KAAK,CAAC;IAC3DC,SAAS,CAAC,EAAEN,cAAAA,CAAOO,gBAAgB,CAAC,CAAC,EAAEP,cAAAA,CAAOQ,kBAAkB,CAAC,CAAC;IAClEC,QAAQT,cAAAA,CAAOU,iBAAiB;IAChCC,WAAW;IACXC,WAAW;IACX,GAAGC,iCAAAA,CAAiBC,QAAQ;AAC9B;AAKO,MAAMnB,mCAAmC,CAACoB;IAC/C;IAEA,MAAMC,oBAAoBnB;IAE1BkB,MAAMnB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,6BAAAA,EAAaxB,yBAAyBE,IAAI,EAAEoB,mBAAmBD,MAAMnB,IAAI,CAACqB,SAAS;IAE1G,OAAOF;AACT"}
|
|
@@ -18,4 +18,4 @@ const PreviewHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
18
18
|
(0, _usePreviewHeaderStylesstyles.usePreviewHeaderStyles_unstable)(state);
|
|
19
19
|
return (0, _renderPreviewHeader.renderPreviewHeader_unstable)(state);
|
|
20
20
|
});
|
|
21
|
-
PreviewHeader.displayName = 'PreviewHeader';
|
|
21
|
+
PreviewHeader.displayName = 'PreviewHeader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["PreviewHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewHeader_unstable } from './usePreviewHeader';\nimport { renderPreviewHeader_unstable } from './renderPreviewHeader';\nimport { usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles.styles';\nimport type { PreviewHeaderProps } from './PreviewHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewHeader: ForwardRefComponent<PreviewHeaderProps> = React.forwardRef((props, ref) => {\n const state = usePreviewHeader_unstable(props, ref);\n\n usePreviewHeaderStyles_unstable(state);\n return renderPreviewHeader_unstable(state);\n});\n\nPreviewHeader.displayName = 'PreviewHeader';\n"],"names":["PreviewHeader","React","forwardRef","props","state","usePreviewHeader_unstable","usePreviewHeaderStyles_unstable","renderPreviewHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;kCACmB;qCACG;8CACG;AAIzC,MAAMA,gBAAAA,WAAAA,
|
|
1
|
+
{"version":3,"sources":["PreviewHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePreviewHeader_unstable } from './usePreviewHeader';\nimport { renderPreviewHeader_unstable } from './renderPreviewHeader';\nimport { usePreviewHeaderStyles_unstable } from './usePreviewHeaderStyles.styles';\nimport type { PreviewHeaderProps } from './PreviewHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-components';\n\nexport const PreviewHeader: ForwardRefComponent<PreviewHeaderProps> = React.forwardRef((props, ref) => {\n const state = usePreviewHeader_unstable(props, ref);\n\n usePreviewHeaderStyles_unstable(state);\n return renderPreviewHeader_unstable(state);\n});\n\nPreviewHeader.displayName = 'PreviewHeader';\n"],"names":["PreviewHeader","React","forwardRef","props","ref","state","usePreviewHeader_unstable","usePreviewHeaderStyles_unstable","renderPreviewHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;kCACmB;qCACG;8CACG;AAIzC,MAAMA,gBAAAA,WAAAA,GAAyDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQC,IAAAA,2CAAAA,EAA0BH,OAAOC;IAE/CG,IAAAA,6DAAAA,EAAgCF;IAChC,OAAOG,IAAAA,iDAAAA,EAA6BH;AACtC;AAEAL,cAAcS,WAAW,GAAG"}
|
|
@@ -32,4 +32,3 @@ const _PreviewHeader = require("./PreviewHeader");
|
|
|
32
32
|
const _renderPreviewHeader = require("./renderPreviewHeader");
|
|
33
33
|
const _usePreviewHeader = require("./usePreviewHeader");
|
|
34
34
|
const _usePreviewHeaderStylesstyles = require("./usePreviewHeaderStyles.styles");
|
|
35
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["renderPreviewHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PreviewHeaderState, PreviewHeaderSlots } from './PreviewHeader.types';\n\n/**\n * Render the final JSX of PreviewHeader\n */\nexport const renderPreviewHeader_unstable = (state: PreviewHeaderState) => {\n assertSlots<PreviewHeaderSlots>(state);\n\n return (\n <state.root>\n {state.citation && <state.citation />}\n {state.media && <state.media />}\n <state.label />\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["renderPreviewHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-components';\nimport type { PreviewHeaderState, PreviewHeaderSlots } from './PreviewHeader.types';\n\n/**\n * Render the final JSX of PreviewHeader\n */\nexport const renderPreviewHeader_unstable = (state: PreviewHeaderState) => {\n assertSlots<PreviewHeaderSlots>(state);\n\n return (\n <state.root>\n {state.citation && <state.citation />}\n {state.media && <state.media />}\n <state.label />\n {state.actions && <state.actions />}\n </state.root>\n );\n};\n"],"names":["renderPreviewHeader_unstable","state","assertSlots","_jsxs","root","citation","_jsx","media","label","actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;iCAE4B;AAMrB,MAAMA,+BAA+B,CAACC;IAC3CC,IAAAA,4BAAAA,EAAgCD;IAEhC,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,QAAQ,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,QAAQ,EAAA,CAAA;YACjCJ,MAAMM,KAAK,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,KAAK,EAAA,CAAA;0BAC5BD,IAAAA,eAAA,EAACL,MAAMO,KAAK,EAAA,CAAA;YACXP,MAAMQ,OAAO,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,OAAO,EAAA,CAAA;;;AAGtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePreviewHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { previewHeaderExtraClassNames } from './usePreviewHeaderStyles.styles';\nimport type { PreviewHeaderProps, PreviewHeaderState } from './PreviewHeader.types';\n\n/**\n * Create the state required to render PreviewHeader.\n *\n * The returned state can be modified with hooks such as usePreviewHeaderStyles_unstable,\n * before being passed to renderPreviewHeader_unstable.\n *\n * @param props - props from this instance of PreviewHeader\n * @param ref - reference to root HTMLElement of PreviewHeader\n */\nexport const usePreviewHeader_unstable = (\n props: PreviewHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): PreviewHeaderState => {\n const { actions, children, citation, label, media } = props;\n\n const mediaId = useId('media');\n\n const state: PreviewHeaderState = {\n components: {\n root: 'div',\n actions: 'div',\n citation: 'span',\n label: 'span',\n media: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n actions: slot.optional(actions, { elementType: 'div' }),\n citation: slot.optional(citation, { elementType: 'span' }),\n label: slot.always(label, {\n defaultProps: {\n children,\n },\n elementType: 'span',\n }),\n media: slot.optional(media, {\n defaultProps: {\n id: mediaId,\n },\n elementType: 'div',\n }),\n };\n\n if (state.media?.id) {\n state.label['aria-describedby'] = state.label['aria-describedby']?.concat(state.media.id) ?? state.media.id;\n }\n\n if (state.media && React.isValidElement<HTMLElement>(state.media.children)) {\n state.media.children = React.cloneElement(state.media.children, {\n className: mergeClasses(state.media.children.props.className, previewHeaderExtraClassNames.mediaChild),\n });\n }\n\n return state;\n};\n"],"names":["
|
|
1
|
+
{"version":3,"sources":["usePreviewHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, mergeClasses, slot, useId } from '@fluentui/react-components';\nimport { previewHeaderExtraClassNames } from './usePreviewHeaderStyles.styles';\nimport type { PreviewHeaderProps, PreviewHeaderState } from './PreviewHeader.types';\n\n/**\n * Create the state required to render PreviewHeader.\n *\n * The returned state can be modified with hooks such as usePreviewHeaderStyles_unstable,\n * before being passed to renderPreviewHeader_unstable.\n *\n * @param props - props from this instance of PreviewHeader\n * @param ref - reference to root HTMLElement of PreviewHeader\n */\nexport const usePreviewHeader_unstable = (\n props: PreviewHeaderProps,\n ref: React.Ref<HTMLDivElement>,\n): PreviewHeaderState => {\n const { actions, children, citation, label, media } = props;\n\n const mediaId = useId('media');\n\n const state: PreviewHeaderState = {\n components: {\n root: 'div',\n actions: 'div',\n citation: 'span',\n label: 'span',\n media: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n actions: slot.optional(actions, { elementType: 'div' }),\n citation: slot.optional(citation, { elementType: 'span' }),\n label: slot.always(label, {\n defaultProps: {\n children,\n },\n elementType: 'span',\n }),\n media: slot.optional(media, {\n defaultProps: {\n id: mediaId,\n },\n elementType: 'div',\n }),\n };\n\n if (state.media?.id) {\n state.label['aria-describedby'] = state.label['aria-describedby']?.concat(state.media.id) ?? state.media.id;\n }\n\n if (state.media && React.isValidElement<HTMLElement>(state.media.children)) {\n state.media.children = React.cloneElement(state.media.children, {\n className: mergeClasses(state.media.children.props.className, previewHeaderExtraClassNames.mediaChild),\n });\n }\n\n return state;\n};\n"],"names":["usePreviewHeader_unstable","props","ref","state","actions","children","citation","label","media","mediaId","useId","components","root","slot","always","getIntrinsicElementProps","elementType","optional","defaultProps","id","concat","React","isValidElement","cloneElement","className","mergeClasses","previewHeaderExtraClassNames","mediaChild"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;iCAC6C;8CACvB;AAYtC,MAAMA,4BAA4B,CACvCC,OACAC;QAqCIC;IAnCJ,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGP;IAEtD,MAAMQ,UAAUC,IAAAA,sBAAAA,EAAM;IAEtB,MAAMP,QAA4B;QAChCQ,YAAY;YACVC,MAAM;YACNR,SAAS;YACTE,UAAU;YACVC,OAAO;YACPC,OAAO;QACT;QACAI,MAAMC,qBAAAA,CAAKC,MAAM,CACfC,IAAAA,yCAAAA,EAAyB,OAAO;YAC9Bb;YACA,GAAGD,KAAK;QACV,IACA;YAAEe,aAAa;QAAM;QAEvBZ,SAASS,qBAAAA,CAAKI,QAAQ,CAACb,SAAS;YAAEY,aAAa;QAAM;QACrDV,UAAUO,qBAAAA,CAAKI,QAAQ,CAACX,UAAU;YAAEU,aAAa;QAAO;QACxDT,OAAOM,qBAAAA,CAAKC,MAAM,CAACP,OAAO;YACxBW,cAAc;gBACZb;YACF;YACAW,aAAa;QACf;QACAR,OAAOK,qBAAAA,CAAKI,QAAQ,CAACT,OAAO;YAC1BU,cAAc;gBACZC,IAAIV;YACN;YACAO,aAAa;QACf;IACF;IAEA,IAAA,AAAIb,CAAAA,eAAAA,MAAMK,KAAK,AAALA,MAAK,QAAXL,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAagB,EAAE,EAAE;YACehB;YAAAA;QAAlCA,MAAMI,KAAK,CAAC,mBAAmB,GAAGJ,CAAAA,sCAAAA,CAAAA,+BAAAA,MAAMI,KAAK,CAAC,mBAAmB,AAAnB,MAAmB,QAA/BJ,iCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,6BAAiCiB,MAAM,CAACjB,MAAMK,KAAK,CAACW,EAAE,CAAA,MAAA,QAAtDhB,wCAAAA,KAAAA,IAAAA,sCAA2DA,MAAMK,KAAK,CAACW,EAAE;IAC7G;IAEA,IAAIhB,MAAMK,KAAK,kBAAIa,OAAMC,cAAc,CAAcnB,MAAMK,KAAK,CAACH,QAAQ,GAAG;QAC1EF,MAAMK,KAAK,CAACH,QAAQ,iBAAGgB,OAAME,YAAY,CAACpB,MAAMK,KAAK,CAACH,QAAQ,EAAE;YAC9DmB,WAAWC,IAAAA,6BAAAA,EAAatB,MAAMK,KAAK,CAACH,QAAQ,CAACJ,KAAK,CAACuB,SAAS,EAAEE,0DAAAA,CAA6BC,UAAU;QACvG;IACF;IAEA,OAAOxB;AACT"}
|
|
@@ -38,8 +38,11 @@ const useActionsBaseClassName = (0, _reactcomponents.__resetStyles)("ry18yy9", n
|
|
|
38
38
|
const useCitationBaseClassName = (0, _reactcomponents.__resetStyles)("ry1eqmj", null, [
|
|
39
39
|
".ry1eqmj{grid-row:1;}"
|
|
40
40
|
]);
|
|
41
|
-
const useLabelBaseClassName = (0, _reactcomponents.__resetStyles)("
|
|
42
|
-
".
|
|
41
|
+
const useLabelBaseClassName = (0, _reactcomponents.__resetStyles)("rattnj5", null, [
|
|
42
|
+
".rattnj5{align-self:start;display:-webkit-box;grid-row:1/3;overflow-y:hidden;padding-top:calc((16px / 2) - (var(--lineHeightBase200) - var(--fontSizeBase200)));word-break:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);}",
|
|
43
|
+
".rattnj5 .fui-Link{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground3);}",
|
|
44
|
+
".rattnj5 .fui-Link:hover{color:var(--colorNeutralForeground3Hover);}",
|
|
45
|
+
".rattnj5 .fui-Link:hover:active{color:var(--colorNeutralForeground3Pressed);}"
|
|
43
46
|
]);
|
|
44
47
|
const useMediaBaseClassName = (0, _reactcomponents.__resetStyles)("rcisese", null, [
|
|
45
48
|
".rcisese{grid-row:1;height:16px;line-height:0;width:16px;}",
|