@fluentui-copilot/react-preview 0.8.2 → 0.8.4

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.
Files changed (119) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +11 -2
  3. package/lib/Preview.js +0 -1
  4. package/lib/PreviewContent.js +0 -1
  5. package/lib/PreviewHeader.js +0 -1
  6. package/lib/PreviewMetadata.js +0 -1
  7. package/lib/PreviewSurface.js +0 -1
  8. package/lib/PreviewTrigger.js +0 -1
  9. package/lib/components/Preview/Preview.js +3 -4
  10. package/lib/components/Preview/Preview.types.js +1 -2
  11. package/lib/components/Preview/index.js +0 -1
  12. package/lib/components/Preview/renderPreview.js +22 -41
  13. package/lib/components/Preview/usePreview.js +234 -239
  14. package/lib/components/PreviewContent/PreviewContent.js +4 -5
  15. package/lib/components/PreviewContent/PreviewContent.types.js +1 -2
  16. package/lib/components/PreviewContent/index.js +0 -1
  17. package/lib/components/PreviewContent/renderPreviewContent.js +4 -6
  18. package/lib/components/PreviewContent/usePreviewContent.js +12 -14
  19. package/lib/components/PreviewContent/usePreviewContentStyles.styles.raw.js +26 -0
  20. package/lib/components/PreviewContent/usePreviewContentStyles.styles.raw.js.map +1 -0
  21. package/lib/components/PreviewHeader/PreviewHeader.js +4 -5
  22. package/lib/components/PreviewHeader/PreviewHeader.types.js +1 -2
  23. package/lib/components/PreviewHeader/index.js +0 -1
  24. package/lib/components/PreviewHeader/renderPreviewHeader.js +11 -8
  25. package/lib/components/PreviewHeader/usePreviewHeader.js +48 -56
  26. package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js +110 -0
  27. package/lib/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js.map +1 -0
  28. package/lib/components/PreviewMetadata/PreviewMetadata.js +4 -5
  29. package/lib/components/PreviewMetadata/PreviewMetadata.types.js +1 -2
  30. package/lib/components/PreviewMetadata/index.js +0 -1
  31. package/lib/components/PreviewMetadata/renderPreviewMetadata.js +12 -8
  32. package/lib/components/PreviewMetadata/usePreviewMetadata.js +29 -36
  33. package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js +56 -0
  34. package/lib/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js.map +1 -0
  35. package/lib/components/PreviewSurface/PreviewSurface.js +4 -5
  36. package/lib/components/PreviewSurface/PreviewSurface.types.js +1 -2
  37. package/lib/components/PreviewSurface/index.js +0 -1
  38. package/lib/components/PreviewSurface/renderPreviewSurface.js +2 -4
  39. package/lib/components/PreviewSurface/usePreviewSurface.js +6 -8
  40. package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js +29 -0
  41. package/lib/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js.map +1 -0
  42. package/lib/components/PreviewTrigger/PreviewTrigger.js +3 -4
  43. package/lib/components/PreviewTrigger/PreviewTrigger.types.js +1 -2
  44. package/lib/components/PreviewTrigger/index.js +0 -1
  45. package/lib/components/PreviewTrigger/renderPreviewTrigger.js +2 -4
  46. package/lib/components/PreviewTrigger/usePreviewTrigger.js +2 -4
  47. package/lib/index.js +0 -1
  48. package/lib/previewContext.js +19 -20
  49. package/lib/utils/index.js +0 -1
  50. package/lib/utils/openedByHoverPreviewManager.js +14 -15
  51. package/lib-commonjs/Preview.js +0 -1
  52. package/lib-commonjs/PreviewContent.js +0 -1
  53. package/lib-commonjs/PreviewHeader.js +0 -1
  54. package/lib-commonjs/PreviewMetadata.js +0 -1
  55. package/lib-commonjs/PreviewSurface.js +0 -1
  56. package/lib-commonjs/PreviewTrigger.js +0 -1
  57. package/lib-commonjs/components/Preview/Preview.js +1 -1
  58. package/lib-commonjs/components/Preview/Preview.js.map +1 -1
  59. package/lib-commonjs/components/Preview/Preview.types.js +0 -1
  60. package/lib-commonjs/components/Preview/index.js +0 -1
  61. package/lib-commonjs/components/Preview/renderPreview.js +1 -1
  62. package/lib-commonjs/components/Preview/renderPreview.js.map +1 -1
  63. package/lib-commonjs/components/Preview/usePreview.js +1 -1
  64. package/lib-commonjs/components/Preview/usePreview.js.map +1 -1
  65. package/lib-commonjs/components/PreviewContent/PreviewContent.js +1 -1
  66. package/lib-commonjs/components/PreviewContent/PreviewContent.js.map +1 -1
  67. package/lib-commonjs/components/PreviewContent/PreviewContent.types.js +0 -1
  68. package/lib-commonjs/components/PreviewContent/index.js +0 -1
  69. package/lib-commonjs/components/PreviewContent/renderPreviewContent.js +1 -1
  70. package/lib-commonjs/components/PreviewContent/renderPreviewContent.js.map +1 -1
  71. package/lib-commonjs/components/PreviewContent/usePreviewContent.js +1 -1
  72. package/lib-commonjs/components/PreviewContent/usePreviewContent.js.map +1 -1
  73. package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.raw.js +42 -0
  74. package/lib-commonjs/components/PreviewContent/usePreviewContentStyles.styles.raw.js.map +1 -0
  75. package/lib-commonjs/components/PreviewHeader/PreviewHeader.js +1 -1
  76. package/lib-commonjs/components/PreviewHeader/PreviewHeader.js.map +1 -1
  77. package/lib-commonjs/components/PreviewHeader/PreviewHeader.types.js +0 -1
  78. package/lib-commonjs/components/PreviewHeader/index.js +0 -1
  79. package/lib-commonjs/components/PreviewHeader/renderPreviewHeader.js +1 -1
  80. package/lib-commonjs/components/PreviewHeader/renderPreviewHeader.js.map +1 -1
  81. package/lib-commonjs/components/PreviewHeader/usePreviewHeader.js +1 -1
  82. package/lib-commonjs/components/PreviewHeader/usePreviewHeader.js.map +1 -1
  83. package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js +129 -0
  84. package/lib-commonjs/components/PreviewHeader/usePreviewHeaderStyles.styles.raw.js.map +1 -0
  85. package/lib-commonjs/components/PreviewMetadata/PreviewMetadata.js +1 -1
  86. package/lib-commonjs/components/PreviewMetadata/PreviewMetadata.js.map +1 -1
  87. package/lib-commonjs/components/PreviewMetadata/PreviewMetadata.types.js +0 -1
  88. package/lib-commonjs/components/PreviewMetadata/index.js +0 -1
  89. package/lib-commonjs/components/PreviewMetadata/renderPreviewMetadata.js +1 -1
  90. package/lib-commonjs/components/PreviewMetadata/renderPreviewMetadata.js.map +1 -1
  91. package/lib-commonjs/components/PreviewMetadata/usePreviewMetadata.js +1 -1
  92. package/lib-commonjs/components/PreviewMetadata/usePreviewMetadata.js.map +1 -1
  93. package/lib-commonjs/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js +72 -0
  94. package/lib-commonjs/components/PreviewMetadata/usePreviewMetadataStyles.styles.raw.js.map +1 -0
  95. package/lib-commonjs/components/PreviewSurface/PreviewSurface.js +1 -1
  96. package/lib-commonjs/components/PreviewSurface/PreviewSurface.js.map +1 -1
  97. package/lib-commonjs/components/PreviewSurface/PreviewSurface.types.js +0 -1
  98. package/lib-commonjs/components/PreviewSurface/index.js +0 -1
  99. package/lib-commonjs/components/PreviewSurface/renderPreviewSurface.js +1 -1
  100. package/lib-commonjs/components/PreviewSurface/renderPreviewSurface.js.map +1 -1
  101. package/lib-commonjs/components/PreviewSurface/usePreviewSurface.js +1 -1
  102. package/lib-commonjs/components/PreviewSurface/usePreviewSurface.js.map +1 -1
  103. package/lib-commonjs/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js +45 -0
  104. package/lib-commonjs/components/PreviewSurface/usePreviewSurfaceStyles.styles.raw.js.map +1 -0
  105. package/lib-commonjs/components/PreviewTrigger/PreviewTrigger.js +1 -1
  106. package/lib-commonjs/components/PreviewTrigger/PreviewTrigger.js.map +1 -1
  107. package/lib-commonjs/components/PreviewTrigger/PreviewTrigger.types.js +0 -1
  108. package/lib-commonjs/components/PreviewTrigger/index.js +0 -1
  109. package/lib-commonjs/components/PreviewTrigger/renderPreviewTrigger.js +1 -1
  110. package/lib-commonjs/components/PreviewTrigger/renderPreviewTrigger.js.map +1 -1
  111. package/lib-commonjs/components/PreviewTrigger/usePreviewTrigger.js +1 -1
  112. package/lib-commonjs/components/PreviewTrigger/usePreviewTrigger.js.map +1 -1
  113. package/lib-commonjs/index.js +0 -1
  114. package/lib-commonjs/previewContext.js +1 -1
  115. package/lib-commonjs/previewContext.js.map +1 -1
  116. package/lib-commonjs/utils/index.js +0 -1
  117. package/lib-commonjs/utils/openedByHoverPreviewManager.js +1 -1
  118. package/lib-commonjs/utils/openedByHoverPreviewManager.js.map +1 -1
  119. package/package.json +3 -3
@@ -1,12 +1,15 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
2
  import { assertSlots } from '@fluentui/react-components';
3
3
  /**
4
4
  * Render the final JSX of PreviewHeader
5
- */
6
- export const renderPreviewHeader_unstable = state => {
7
- assertSlots(state);
8
- return /*#__PURE__*/_jsxs(state.root, {
9
- children: [state.citation && /*#__PURE__*/_jsx(state.citation, {}), state.media && /*#__PURE__*/_jsx(state.media, {}), /*#__PURE__*/_jsx(state.label, {}), state.actions && /*#__PURE__*/_jsx(state.actions, {})]
10
- });
5
+ */ export const renderPreviewHeader_unstable = (state)=>{
6
+ assertSlots(state);
7
+ return /*#__PURE__*/ _jsxs(state.root, {
8
+ children: [
9
+ state.citation && /*#__PURE__*/ _jsx(state.citation, {}),
10
+ state.media && /*#__PURE__*/ _jsx(state.media, {}),
11
+ /*#__PURE__*/ _jsx(state.label, {}),
12
+ state.actions && /*#__PURE__*/ _jsx(state.actions, {})
13
+ ]
14
+ });
11
15
  };
12
- //# sourceMappingURL=renderPreviewHeader.js.map
@@ -9,60 +9,52 @@ import { previewHeaderExtraClassNames } from './usePreviewHeaderStyles.styles';
9
9
  *
10
10
  * @param props - props from this instance of PreviewHeader
11
11
  * @param ref - reference to root HTMLElement of PreviewHeader
12
- */
13
- export const usePreviewHeader_unstable = (props, ref) => {
14
- var _state_media;
15
- const {
16
- actions,
17
- children,
18
- citation,
19
- label,
20
- media
21
- } = props;
22
- const mediaId = useId('media');
23
- const state = {
24
- components: {
25
- root: 'div',
26
- actions: 'div',
27
- citation: 'span',
28
- label: 'span',
29
- media: 'div'
30
- },
31
- root: slot.always(getIntrinsicElementProps('div', {
32
- ref,
33
- ...props
34
- }), {
35
- elementType: 'div'
36
- }),
37
- actions: slot.optional(actions, {
38
- elementType: 'div'
39
- }),
40
- citation: slot.optional(citation, {
41
- elementType: 'span'
42
- }),
43
- label: slot.always(label, {
44
- defaultProps: {
45
- children
46
- },
47
- elementType: 'span'
48
- }),
49
- media: slot.optional(media, {
50
- defaultProps: {
51
- id: mediaId
52
- },
53
- elementType: 'div'
54
- })
55
- };
56
- if ((_state_media = state.media) === null || _state_media === void 0 ? void 0 : _state_media.id) {
57
- var _state_label_ariadescribedby;
58
- var _state_label_ariadescribedby_concat;
59
- state.label['aria-describedby'] = (_state_label_ariadescribedby_concat = (_state_label_ariadescribedby = state.label['aria-describedby']) === null || _state_label_ariadescribedby === void 0 ? void 0 : _state_label_ariadescribedby.concat(state.media.id)) !== null && _state_label_ariadescribedby_concat !== void 0 ? _state_label_ariadescribedby_concat : state.media.id;
60
- }
61
- if (state.media && React.isValidElement(state.media.children)) {
62
- state.media.children = React.cloneElement(state.media.children, {
63
- className: mergeClasses(state.media.children.props.className, previewHeaderExtraClassNames.mediaChild)
64
- });
65
- }
66
- return state;
12
+ */ export const usePreviewHeader_unstable = (props, ref)=>{
13
+ var _state_media;
14
+ const { actions, children, citation, label, media } = props;
15
+ const mediaId = useId('media');
16
+ const state = {
17
+ components: {
18
+ root: 'div',
19
+ actions: 'div',
20
+ citation: 'span',
21
+ label: 'span',
22
+ media: 'div'
23
+ },
24
+ root: slot.always(getIntrinsicElementProps('div', {
25
+ ref,
26
+ ...props
27
+ }), {
28
+ elementType: 'div'
29
+ }),
30
+ actions: slot.optional(actions, {
31
+ elementType: 'div'
32
+ }),
33
+ citation: slot.optional(citation, {
34
+ elementType: 'span'
35
+ }),
36
+ label: slot.always(label, {
37
+ defaultProps: {
38
+ children
39
+ },
40
+ elementType: 'span'
41
+ }),
42
+ media: slot.optional(media, {
43
+ defaultProps: {
44
+ id: mediaId
45
+ },
46
+ elementType: 'div'
47
+ })
48
+ };
49
+ if ((_state_media = state.media) === null || _state_media === void 0 ? void 0 : _state_media.id) {
50
+ var _state_label_ariadescribedby;
51
+ var _state_label_ariadescribedby_concat;
52
+ state.label['aria-describedby'] = (_state_label_ariadescribedby_concat = (_state_label_ariadescribedby = state.label['aria-describedby']) === null || _state_label_ariadescribedby === void 0 ? void 0 : _state_label_ariadescribedby.concat(state.media.id)) !== null && _state_label_ariadescribedby_concat !== void 0 ? _state_label_ariadescribedby_concat : state.media.id;
53
+ }
54
+ if (state.media && React.isValidElement(state.media.children)) {
55
+ state.media.children = React.cloneElement(state.media.children, {
56
+ className: mergeClasses(state.media.children.props.className, previewHeaderExtraClassNames.mediaChild)
57
+ });
58
+ }
59
+ return state;
67
60
  };
68
- //# sourceMappingURL=usePreviewHeader.js.map
@@ -0,0 +1,110 @@
1
+ import { linkClassNames, makeResetStyles, makeStyles, mergeClasses, typographyStyles } from '@fluentui/react-components';
2
+ import { tokens } from '@fluentui-copilot/tokens';
3
+ export const previewHeaderClassNames = {
4
+ root: 'fai-PreviewHeader',
5
+ actions: 'fai-PreviewHeader__actions',
6
+ citation: 'fai-PreviewHeader__citation',
7
+ label: 'fai-PreviewHeader__label',
8
+ media: 'fai-PreviewHeader__media'
9
+ };
10
+ export const previewHeaderExtraClassNames = {
11
+ mediaChild: 'fai-PreviewHeader__mediaChild'
12
+ };
13
+ const labelFontSize = typographyStyles.caption1Strong.fontSize;
14
+ const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
15
+ const useActionsBaseClassName = makeResetStyles({
16
+ gridRow: 1,
17
+ justifySelf: 'end'
18
+ });
19
+ const useCitationBaseClassName = makeResetStyles({
20
+ gridRow: 1
21
+ });
22
+ const useLabelBaseClassName = makeResetStyles({
23
+ alignSelf: 'start',
24
+ display: '-webkit-box',
25
+ gridRow: '1 / 3',
26
+ overflowY: 'hidden',
27
+ // 16px is the height of the tallest element within the preview header
28
+ paddingTop: `calc((16px / 2) - (${labelLineHeight} - ${labelFontSize}))`,
29
+ wordBreak: 'break-word',
30
+ '-webkit-box-orient': 'vertical',
31
+ '-webkit-line-clamp': '2',
32
+ ...typographyStyles.caption1Strong,
33
+ [`& .${linkClassNames.root}`]: {
34
+ ...typographyStyles.caption1Strong,
35
+ color: tokens.colorNeutralForeground3,
36
+ ':hover': {
37
+ color: tokens.colorNeutralForeground3Hover
38
+ },
39
+ ':hover:active': {
40
+ color: tokens.colorNeutralForeground3Pressed
41
+ }
42
+ }
43
+ });
44
+ const useMediaBaseClassName = makeResetStyles({
45
+ gridRow: 1,
46
+ height: '16px',
47
+ lineHeight: 0,
48
+ width: '16px',
49
+ [`> .${previewHeaderExtraClassNames.mediaChild}`]: {
50
+ height: '16px',
51
+ width: '16px'
52
+ }
53
+ });
54
+ const useRootBaseClassName = makeResetStyles({
55
+ alignItems: 'center',
56
+ columnGap: tokens.spacingHorizontalXS,
57
+ display: 'grid',
58
+ gridTemplateRows: '24px'
59
+ });
60
+ // Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions
61
+ // based on the slots present, we need to conditionally set the grid template columns based on the slots present.
62
+ const useRootStyles = makeStyles({
63
+ onlyLabel: {
64
+ gridTemplateColumns: '1fr'
65
+ },
66
+ previousAndLabel: {
67
+ gridTemplateColumns: 'min-content 1fr'
68
+ },
69
+ labelAndActions: {
70
+ gridTemplateColumns: '1fr min-content'
71
+ },
72
+ citationMediaLabel: {
73
+ gridTemplateColumns: 'min-content min-content 1fr'
74
+ },
75
+ previousLabelActions: {
76
+ gridTemplateColumns: 'min-content 1fr min-content'
77
+ },
78
+ all: {
79
+ gridTemplateColumns: 'min-content min-content 1fr min-content'
80
+ }
81
+ });
82
+ /**
83
+ * Apply styling to the PreviewHeader slots based on the state
84
+ */ export const usePreviewHeaderStyles_unstable = (state)=>{
85
+ 'use no memo';
86
+ const actionsBaseClassName = useActionsBaseClassName();
87
+ const citationBaseClassName = useCitationBaseClassName();
88
+ const labelBaseClassName = useLabelBaseClassName();
89
+ const mediaBaseClassName = useMediaBaseClassName();
90
+ const rootBaseClassName = useRootBaseClassName();
91
+ const rootStyles = useRootStyles();
92
+ let actionsPresent = false;
93
+ if (state.actions) {
94
+ actionsPresent = true;
95
+ state.actions.className = mergeClasses(previewHeaderClassNames.actions, actionsBaseClassName, state.actions.className);
96
+ }
97
+ let citationPresent = false;
98
+ if (state.citation) {
99
+ citationPresent = true;
100
+ state.citation.className = mergeClasses(previewHeaderClassNames.citation, citationBaseClassName, state.citation.className);
101
+ }
102
+ state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);
103
+ let mediaPresent = false;
104
+ if (state.media) {
105
+ mediaPresent = true;
106
+ state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);
107
+ }
108
+ state.root.className = mergeClasses(previewHeaderClassNames.root, rootBaseClassName, !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && !actionsPresent && rootStyles.previousAndLabel, !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions, citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel, (citationPresent && !mediaPresent || mediaPresent && !citationPresent) && actionsPresent && rootStyles.previousLabelActions, citationPresent && mediaPresent && actionsPresent && rootStyles.all, state.root.className);
109
+ return state;
110
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["usePreviewHeaderStyles.styles.ts"],"sourcesContent":["import {\n linkClassNames,\n makeResetStyles,\n makeStyles,\n mergeClasses,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PreviewHeaderSlots, PreviewHeaderState } from './PreviewHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewHeaderClassNames: SlotClassNames<PreviewHeaderSlots> = {\n root: 'fai-PreviewHeader',\n actions: 'fai-PreviewHeader__actions',\n citation: 'fai-PreviewHeader__citation',\n label: 'fai-PreviewHeader__label',\n media: 'fai-PreviewHeader__media',\n};\n\nexport const previewHeaderExtraClassNames = {\n mediaChild: 'fai-PreviewHeader__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst useActionsBaseClassName = makeResetStyles({\n gridRow: 1,\n justifySelf: 'end',\n});\n\nconst useCitationBaseClassName = makeResetStyles({\n gridRow: 1,\n});\n\nconst useLabelBaseClassName = makeResetStyles({\n alignSelf: 'start',\n display: '-webkit-box',\n gridRow: '1 / 3',\n overflowY: 'hidden',\n // 16px is the height of the tallest element within the preview header\n paddingTop: `calc((16px / 2) - (${labelLineHeight} - ${labelFontSize}))`,\n wordBreak: 'break-word',\n\n '-webkit-box-orient': 'vertical',\n '-webkit-line-clamp': '2',\n\n ...typographyStyles.caption1Strong,\n\n [`& .${linkClassNames.root}`]: {\n ...typographyStyles.caption1Strong,\n color: tokens.colorNeutralForeground3,\n\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':hover:active': {\n color: tokens.colorNeutralForeground3Pressed,\n },\n },\n});\n\nconst useMediaBaseClassName = makeResetStyles({\n gridRow: 1,\n height: '16px',\n lineHeight: 0,\n width: '16px',\n\n [`> .${previewHeaderExtraClassNames.mediaChild}`]: {\n height: '16px',\n width: '16px',\n },\n});\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n columnGap: tokens.spacingHorizontalXS,\n display: 'grid',\n gridTemplateRows: '24px',\n});\n\n// Since the grid track that needs to grow is not always guaranteed to be the first or the last, but can change positions\n// based on the slots present, we need to conditionally set the grid template columns based on the slots present.\nconst useRootStyles = makeStyles({\n onlyLabel: {\n gridTemplateColumns: '1fr',\n },\n previousAndLabel: {\n gridTemplateColumns: 'min-content 1fr',\n },\n labelAndActions: {\n gridTemplateColumns: '1fr min-content',\n },\n citationMediaLabel: {\n gridTemplateColumns: 'min-content min-content 1fr',\n },\n previousLabelActions: {\n gridTemplateColumns: 'min-content 1fr min-content',\n },\n all: {\n gridTemplateColumns: 'min-content min-content 1fr min-content',\n },\n});\n\n/**\n * Apply styling to the PreviewHeader slots based on the state\n */\nexport const usePreviewHeaderStyles_unstable = (state: PreviewHeaderState): PreviewHeaderState => {\n 'use no memo';\n\n const actionsBaseClassName = useActionsBaseClassName();\n const citationBaseClassName = useCitationBaseClassName();\n const labelBaseClassName = useLabelBaseClassName();\n const mediaBaseClassName = useMediaBaseClassName();\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n\n let actionsPresent = false;\n if (state.actions) {\n actionsPresent = true;\n state.actions.className = mergeClasses(\n previewHeaderClassNames.actions,\n actionsBaseClassName,\n state.actions.className,\n );\n }\n\n let citationPresent = false;\n if (state.citation) {\n citationPresent = true;\n state.citation.className = mergeClasses(\n previewHeaderClassNames.citation,\n citationBaseClassName,\n state.citation.className,\n );\n }\n\n state.label.className = mergeClasses(previewHeaderClassNames.label, labelBaseClassName, state.label.className);\n\n let mediaPresent = false;\n if (state.media) {\n mediaPresent = true;\n state.media.className = mergeClasses(previewHeaderClassNames.media, mediaBaseClassName, state.media.className);\n }\n\n state.root.className = mergeClasses(\n previewHeaderClassNames.root,\n rootBaseClassName,\n !citationPresent && !mediaPresent && !actionsPresent && rootStyles.onlyLabel,\n ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n !actionsPresent &&\n rootStyles.previousAndLabel,\n !citationPresent && !mediaPresent && actionsPresent && rootStyles.labelAndActions,\n citationPresent && mediaPresent && !actionsPresent && rootStyles.citationMediaLabel,\n ((citationPresent && !mediaPresent) || (mediaPresent && !citationPresent)) &&\n actionsPresent &&\n rootStyles.previousLabelActions,\n citationPresent && mediaPresent && actionsPresent && rootStyles.all,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["linkClassNames","makeResetStyles","makeStyles","mergeClasses","typographyStyles","tokens","previewHeaderClassNames","root","actions","citation","label","media","previewHeaderExtraClassNames","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","useActionsBaseClassName","gridRow","justifySelf","useCitationBaseClassName","useLabelBaseClassName","alignSelf","display","overflowY","paddingTop","wordBreak","color","colorNeutralForeground3","colorNeutralForeground3Hover","colorNeutralForeground3Pressed","useMediaBaseClassName","height","width","useRootBaseClassName","alignItems","columnGap","spacingHorizontalXS","gridTemplateRows","useRootStyles","onlyLabel","gridTemplateColumns","previousAndLabel","labelAndActions","citationMediaLabel","previousLabelActions","all","usePreviewHeaderStyles_unstable","state","actionsBaseClassName","citationBaseClassName","labelBaseClassName","mediaBaseClassName","rootBaseClassName","rootStyles","actionsPresent","className","citationPresent","mediaPresent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -2,10 +2,9 @@ import * as React from 'react';
2
2
  import { usePreviewMetadata_unstable } from './usePreviewMetadata';
3
3
  import { renderPreviewMetadata_unstable } from './renderPreviewMetadata';
4
4
  import { usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';
5
- export const PreviewMetadata = /*#__PURE__*/React.forwardRef((props, ref) => {
6
- const state = usePreviewMetadata_unstable(props, ref);
7
- usePreviewMetadataStyles_unstable(state);
8
- return renderPreviewMetadata_unstable(state);
5
+ export const PreviewMetadata = /*#__PURE__*/ React.forwardRef((props, ref)=>{
6
+ const state = usePreviewMetadata_unstable(props, ref);
7
+ usePreviewMetadataStyles_unstable(state);
8
+ return renderPreviewMetadata_unstable(state);
9
9
  });
10
10
  PreviewMetadata.displayName = 'PreviewMetadata';
11
- //# sourceMappingURL=PreviewMetadata.js.map
@@ -1,4 +1,3 @@
1
1
  /**
2
2
  * State used in rendering PreviewMetadata
3
- */export {};
4
- //# sourceMappingURL=PreviewMetadata.types.js.map
3
+ */ export { };
@@ -2,4 +2,3 @@ export { PreviewMetadata } from './PreviewMetadata';
2
2
  export { renderPreviewMetadata_unstable } from './renderPreviewMetadata';
3
3
  export { usePreviewMetadata_unstable } from './usePreviewMetadata';
4
4
  export { previewMetadataClassNames, usePreviewMetadataStyles_unstable } from './usePreviewMetadataStyles.styles';
5
- //# sourceMappingURL=index.js.map
@@ -1,12 +1,16 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
2
2
  import { assertSlots } from '@fluentui/react-components';
3
3
  /**
4
4
  * Render the final JSX of PreviewMetadata
5
- */
6
- export const renderPreviewMetadata_unstable = state => {
7
- assertSlots(state);
8
- return /*#__PURE__*/_jsxs(state.root, {
9
- children: [state.primaryText && /*#__PURE__*/_jsx(state.primaryText, {}), state.secondaryText && /*#__PURE__*/_jsx(state.secondaryText, {}), state.tertiaryText && /*#__PURE__*/_jsx(state.tertiaryText, {}), state.icon && /*#__PURE__*/_jsx(state.icon, {}), state.root.children]
10
- });
5
+ */ export const renderPreviewMetadata_unstable = (state)=>{
6
+ assertSlots(state);
7
+ return /*#__PURE__*/ _jsxs(state.root, {
8
+ children: [
9
+ state.primaryText && /*#__PURE__*/ _jsx(state.primaryText, {}),
10
+ state.secondaryText && /*#__PURE__*/ _jsx(state.secondaryText, {}),
11
+ state.tertiaryText && /*#__PURE__*/ _jsx(state.tertiaryText, {}),
12
+ state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
13
+ state.root.children
14
+ ]
15
+ });
11
16
  };
12
- //# sourceMappingURL=renderPreviewMetadata.js.map
@@ -7,40 +7,33 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-components';
7
7
  *
8
8
  * @param props - props from this instance of PreviewMetadata
9
9
  * @param ref - reference to root HTMLElement of PreviewMetadata
10
- */
11
- export const usePreviewMetadata_unstable = (props, ref) => {
12
- const {
13
- icon,
14
- primaryText,
15
- secondaryText,
16
- tertiaryText
17
- } = props;
18
- return {
19
- components: {
20
- root: 'div',
21
- icon: 'span',
22
- primaryText: 'span',
23
- secondaryText: 'span',
24
- tertiaryText: 'span'
25
- },
26
- root: slot.always(getIntrinsicElementProps('div', {
27
- ref,
28
- ...props
29
- }), {
30
- elementType: 'div'
31
- }),
32
- icon: slot.optional(icon, {
33
- elementType: 'span'
34
- }),
35
- primaryText: slot.optional(primaryText, {
36
- elementType: 'span'
37
- }),
38
- secondaryText: slot.optional(secondaryText, {
39
- elementType: 'span'
40
- }),
41
- tertiaryText: slot.optional(tertiaryText, {
42
- elementType: 'span'
43
- })
44
- };
10
+ */ export const usePreviewMetadata_unstable = (props, ref)=>{
11
+ const { icon, primaryText, secondaryText, tertiaryText } = props;
12
+ return {
13
+ components: {
14
+ root: 'div',
15
+ icon: 'span',
16
+ primaryText: 'span',
17
+ secondaryText: 'span',
18
+ tertiaryText: 'span'
19
+ },
20
+ root: slot.always(getIntrinsicElementProps('div', {
21
+ ref,
22
+ ...props
23
+ }), {
24
+ elementType: 'div'
25
+ }),
26
+ icon: slot.optional(icon, {
27
+ elementType: 'span'
28
+ }),
29
+ primaryText: slot.optional(primaryText, {
30
+ elementType: 'span'
31
+ }),
32
+ secondaryText: slot.optional(secondaryText, {
33
+ elementType: 'span'
34
+ }),
35
+ tertiaryText: slot.optional(tertiaryText, {
36
+ elementType: 'span'
37
+ })
38
+ };
45
39
  };
46
- //# sourceMappingURL=usePreviewMetadata.js.map
@@ -0,0 +1,56 @@
1
+ import { makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
2
+ import { tokens } from '@fluentui-copilot/tokens';
3
+ export const previewMetadataClassNames = {
4
+ root: 'fai-PreviewMetadata',
5
+ icon: 'fai-PreviewMetadata__icon',
6
+ primaryText: 'fai-PreviewMetadata__primaryText',
7
+ secondaryText: 'fai-PreviewMetadata__secondaryText',
8
+ tertiaryText: 'fai-PreviewMetadata__tertiaryText'
9
+ };
10
+ const useRootBaseClassName = makeResetStyles({
11
+ ...typographyStyles.caption2
12
+ });
13
+ const useIconBaseClassName = makeResetStyles({
14
+ marginLeft: tokens.spacingHorizontalSNudge,
15
+ verticalAlign: 'middle'
16
+ });
17
+ const useTextStyles = makeStyles({
18
+ subsequentText: {
19
+ marginLeft: `calc(${tokens.spacingHorizontalSNudge} * 2)`,
20
+ position: 'relative',
21
+ '&::before': {
22
+ ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),
23
+ content: '""',
24
+ display: 'block',
25
+ height: typographyStyles.caption2.fontSize,
26
+ left: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,
27
+ position: 'absolute',
28
+ top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`
29
+ }
30
+ }
31
+ });
32
+ /**
33
+ * Apply styling to the PreviewMetadata slots based on the state
34
+ */ export const usePreviewMetadataStyles_unstable = (state)=>{
35
+ 'use no memo';
36
+ const rootBaseClassName = useRootBaseClassName();
37
+ const iconBaseClassName = useIconBaseClassName();
38
+ const textStyles = useTextStyles();
39
+ state.root.className = mergeClasses(previewMetadataClassNames.root, rootBaseClassName, state.root.className);
40
+ if (state.icon) {
41
+ state.icon.className = mergeClasses(previewMetadataClassNames.icon, iconBaseClassName, state.icon.className);
42
+ }
43
+ let isSubsequentAfterText = false;
44
+ if (state.primaryText) {
45
+ state.primaryText.className = mergeClasses(previewMetadataClassNames.primaryText, state.primaryText.className);
46
+ isSubsequentAfterText = true;
47
+ }
48
+ if (state.secondaryText) {
49
+ state.secondaryText.className = mergeClasses(previewMetadataClassNames.secondaryText, isSubsequentAfterText && textStyles.subsequentText, state.secondaryText.className);
50
+ isSubsequentAfterText = true;
51
+ }
52
+ if (state.tertiaryText) {
53
+ state.tertiaryText.className = mergeClasses(previewMetadataClassNames.tertiaryText, isSubsequentAfterText && textStyles.subsequentText, state.tertiaryText.className);
54
+ }
55
+ return state;
56
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["usePreviewMetadataStyles.styles.ts"],"sourcesContent":["import {\n makeResetStyles,\n makeStyles,\n mergeClasses,\n shorthands,\n typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { PreviewMetadataSlots, PreviewMetadataState } from './PreviewMetadata.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const previewMetadataClassNames: SlotClassNames<PreviewMetadataSlots> = {\n root: 'fai-PreviewMetadata',\n icon: 'fai-PreviewMetadata__icon',\n primaryText: 'fai-PreviewMetadata__primaryText',\n secondaryText: 'fai-PreviewMetadata__secondaryText',\n tertiaryText: 'fai-PreviewMetadata__tertiaryText',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n ...typographyStyles.caption2,\n});\n\nconst useIconBaseClassName = makeResetStyles({\n marginLeft: tokens.spacingHorizontalSNudge,\n verticalAlign: 'middle',\n});\n\nconst useTextStyles = makeStyles({\n subsequentText: {\n marginLeft: `calc(${tokens.spacingHorizontalSNudge} * 2)`,\n position: 'relative',\n\n '&::before': {\n ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n content: '\"\"',\n display: 'block',\n height: typographyStyles.caption2.fontSize,\n left: `calc(-1 * ${tokens.spacingHorizontalSNudge})`,\n position: 'absolute',\n top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n },\n },\n});\n\n/**\n * Apply styling to the PreviewMetadata slots based on the state\n */\nexport const usePreviewMetadataStyles_unstable = (state: PreviewMetadataState): PreviewMetadataState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n const textStyles = useTextStyles();\n\n state.root.className = mergeClasses(previewMetadataClassNames.root, rootBaseClassName, state.root.className);\n\n if (state.icon) {\n state.icon.className = mergeClasses(previewMetadataClassNames.icon, iconBaseClassName, state.icon.className);\n }\n\n let isSubsequentAfterText = false;\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(previewMetadataClassNames.primaryText, state.primaryText.className);\n isSubsequentAfterText = true;\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n previewMetadataClassNames.secondaryText,\n isSubsequentAfterText && textStyles.subsequentText,\n state.secondaryText.className,\n );\n isSubsequentAfterText = true;\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n previewMetadataClassNames.tertiaryText,\n isSubsequentAfterText && textStyles.subsequentText,\n state.tertiaryText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","previewMetadataClassNames","root","icon","primaryText","secondaryText","tertiaryText","useRootBaseClassName","caption2","useIconBaseClassName","marginLeft","spacingHorizontalSNudge","verticalAlign","useTextStyles","subsequentText","position","borderLeft","strokeWidthThin","colorNeutralStroke2","content","display","height","fontSize","left","top","lineHeight","usePreviewMetadataStyles_unstable","state","rootBaseClassName","iconBaseClassName","textStyles","className","isSubsequentAfterText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,eAAe,EACfC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,gBAAgB,QACX,6BAA6B;AACpC,SAASC,MAAM,QAAQ,2BAA2B;AAIlD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,MAAM;IACNC,aAAa;IACbC,eAAe;IACfC,cAAc;AAChB,EAAE;AAEF,MAAMC,uBAAuBZ,gBAAgB;IAC3C,GAAGI,iBAAiBS,QAAQ;AAC9B;AAEA,MAAMC,uBAAuBd,gBAAgB;IAC3Ce,YAAYV,OAAOW,uBAAuB;IAC1CC,eAAe;AACjB;AAEA,MAAMC,gBAAgBjB,WAAW;IAC/BkB,gBAAgB;QACdJ,YAAY,CAAC,KAAK,EAAEV,OAAOW,uBAAuB,CAAC,KAAK,CAAC;QACzDI,UAAU;QAEV,aAAa;YACX,GAAGjB,WAAWkB,UAAU,CAAChB,OAAOiB,eAAe,EAAE,SAASjB,OAAOkB,mBAAmB,CAAC;YACrFC,SAAS;YACTC,SAAS;YACTC,QAAQtB,iBAAiBS,QAAQ,CAACc,QAAQ;YAC1CC,MAAM,CAAC,UAAU,EAAEvB,OAAOW,uBAAuB,CAAC,CAAC,CAAC;YACpDI,UAAU;YACVS,KAAK,CAAC,MAAM,EAAEzB,iBAAiBS,QAAQ,CAACiB,UAAU,CAAC,GAAG,EAAE1B,iBAAiBS,QAAQ,CAACc,QAAQ,CAAC,MAAM,CAAC;QACpG;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,oCAAoC,CAACC;IAChD;IAEA,MAAMC,oBAAoBrB;IAC1B,MAAMsB,oBAAoBpB;IAC1B,MAAMqB,aAAajB;IAEnBc,MAAMzB,IAAI,CAAC6B,SAAS,GAAGlC,aAAaI,0BAA0BC,IAAI,EAAE0B,mBAAmBD,MAAMzB,IAAI,CAAC6B,SAAS;IAE3G,IAAIJ,MAAMxB,IAAI,EAAE;QACdwB,MAAMxB,IAAI,CAAC4B,SAAS,GAAGlC,aAAaI,0BAA0BE,IAAI,EAAE0B,mBAAmBF,MAAMxB,IAAI,CAAC4B,SAAS;IAC7G;IAEA,IAAIC,wBAAwB;IAE5B,IAAIL,MAAMvB,WAAW,EAAE;QACrBuB,MAAMvB,WAAW,CAAC2B,SAAS,GAAGlC,aAAaI,0BAA0BG,WAAW,EAAEuB,MAAMvB,WAAW,CAAC2B,SAAS;QAC7GC,wBAAwB;IAC1B;IAEA,IAAIL,MAAMtB,aAAa,EAAE;QACvBsB,MAAMtB,aAAa,CAAC0B,SAAS,GAAGlC,aAC9BI,0BAA0BI,aAAa,EACvC2B,yBAAyBF,WAAWhB,cAAc,EAClDa,MAAMtB,aAAa,CAAC0B,SAAS;QAE/BC,wBAAwB;IAC1B;IAEA,IAAIL,MAAMrB,YAAY,EAAE;QACtBqB,MAAMrB,YAAY,CAACyB,SAAS,GAAGlC,aAC7BI,0BAA0BK,YAAY,EACtC0B,yBAAyBF,WAAWhB,cAAc,EAClDa,MAAMrB,YAAY,CAACyB,SAAS;IAEhC;IAEA,OAAOJ;AACT,EAAE"}
@@ -2,10 +2,9 @@ import * as React from 'react';
2
2
  import { usePreviewSurface_unstable } from './usePreviewSurface';
3
3
  import { renderPreviewSurface_unstable } from './renderPreviewSurface';
4
4
  import { usePreviewSurfaceStyles_unstable } from './usePreviewSurfaceStyles.styles';
5
- export const PreviewSurface = /*#__PURE__*/React.forwardRef((props, ref) => {
6
- const state = usePreviewSurface_unstable(props, ref);
7
- usePreviewSurfaceStyles_unstable(state);
8
- return renderPreviewSurface_unstable(state);
5
+ export const PreviewSurface = /*#__PURE__*/ React.forwardRef((props, ref)=>{
6
+ const state = usePreviewSurface_unstable(props, ref);
7
+ usePreviewSurfaceStyles_unstable(state);
8
+ return renderPreviewSurface_unstable(state);
9
9
  });
10
10
  PreviewSurface.displayName = 'PreviewSurface';
11
- //# sourceMappingURL=PreviewSurface.js.map
@@ -1,4 +1,3 @@
1
1
  /**
2
2
  * State used in rendering PreviewSurface
3
- */export {};
4
- //# sourceMappingURL=PreviewSurface.types.js.map
3
+ */ export { };
@@ -2,4 +2,3 @@ export { PreviewSurface } from './PreviewSurface';
2
2
  export { renderPreviewSurface_unstable } from './renderPreviewSurface';
3
3
  export { usePreviewSurface_unstable } from './usePreviewSurface';
4
4
  export { previewSurfaceClassNames, usePreviewSurfaceStyles_unstable } from './usePreviewSurfaceStyles.styles';
5
- //# sourceMappingURL=index.js.map
@@ -1,8 +1,6 @@
1
1
  import { renderPopoverSurface_unstable } from '@fluentui/react-components';
2
2
  /**
3
3
  * Render the final JSX of PreviewSurface
4
- */
5
- export const renderPreviewSurface_unstable = state => {
6
- return renderPopoverSurface_unstable(state);
4
+ */ export const renderPreviewSurface_unstable = (state)=>{
5
+ return renderPopoverSurface_unstable(state);
7
6
  };
8
- //# sourceMappingURL=renderPreviewSurface.js.map
@@ -9,12 +9,10 @@ import { useDesignVersion } from '@fluentui-copilot/react-provider';
9
9
  *
10
10
  * @param props - props from this instance of PreviewSurface
11
11
  * @param ref - reference to root HTMLElement of PreviewSurface
12
- */
13
- export const usePreviewSurface_unstable = (props, ref) => {
14
- const designVersion = useDesignVersion(props.designVersion);
15
- return {
16
- designVersion,
17
- ...usePopoverSurface_unstable(props, ref)
18
- };
12
+ */ export const usePreviewSurface_unstable = (props, ref)=>{
13
+ const designVersion = useDesignVersion(props.designVersion);
14
+ return {
15
+ designVersion,
16
+ ...usePopoverSurface_unstable(props, ref)
17
+ };
19
18
  };
20
- //# sourceMappingURL=usePreviewSurface.js.map
@@ -0,0 +1,29 @@
1
+ import { makeStyles, mergeClasses, usePopoverSurfaceStyles_unstable } from '@fluentui/react-components';
2
+ import { tokens } from '@fluentui-copilot/tokens';
3
+ export const previewSurfaceClassNames = {
4
+ root: 'fai-PreviewSurface'
5
+ };
6
+ /**
7
+ * Styles for the root slot
8
+ */ const useRootStyles = makeStyles({
9
+ base: {
10
+ padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalXS}`,
11
+ boxSizing: 'border-box'
12
+ }
13
+ });
14
+ const useNextStyles = makeStyles({
15
+ root: {
16
+ borderRadius: tokens.borderRadiusXLarge
17
+ }
18
+ });
19
+ /**
20
+ * Apply styling to the PreviewSurface slots based on the state
21
+ */ export const usePreviewSurfaceStyles_unstable = (state)=>{
22
+ 'use no memo';
23
+ const { designVersion } = state;
24
+ const rootStyles = useRootStyles();
25
+ const nextStyles = useNextStyles();
26
+ state.root.className = mergeClasses(previewSurfaceClassNames.root, rootStyles.base, designVersion === 'next' && nextStyles.root, state.root.className);
27
+ usePopoverSurfaceStyles_unstable(state);
28
+ return state;
29
+ };
@@ -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
- const state = usePreviewTrigger_unstable(props);
5
- return renderPreviewTrigger_unstable(state);
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,4 +1,3 @@
1
1
  /**
2
2
  * Props that are passed to the child of the PreviewTrigger when cloned to ensure correct behavior for the Preview.
3
- */export {};
4
- //# sourceMappingURL=PreviewTrigger.types.js.map
3
+ */ export { };
@@ -1,4 +1,3 @@
1
1
  export { PreviewTrigger } from './PreviewTrigger';
2
2
  export { renderPreviewTrigger_unstable } from './renderPreviewTrigger';
3
3
  export { usePreviewTrigger_unstable } from './usePreviewTrigger';
4
- //# sourceMappingURL=index.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
- export const renderPreviewTrigger_unstable = state => {
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
- export const usePreviewTrigger_unstable = props => {
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