@fluentui-copilot/react-reference 0.15.3 → 0.15.5-hotfix.1

package/lib/components/Reference/useReference.js

@@ -15,180 +15,181 @@ import { useCopilotMode } from '@fluentui-copilot/react-provider';
  * @param ref - reference to root HTMLElement of Reference
  *
  * deprecated Use ReferenceV2 component, hooks and types instead.
- */
-export const useReference_unstable = (props, ref) => {
-  const {
-    index,
-    referenceId,
-    citationHref,
-    excerpt,
-    layout = 'inline'
-  } = props;
-  const mode = useCopilotMode(props.mode);
-  const labelId = useId();
-  const mediaId = useId();
-  const [isExpanded, setIsExpanded] = React.useState(layout === 'popover' ? true : false);
-  const setPopoverOpen = usePopoverContext(context => context.setOpen);
-  const onExpandClick = _e => {
-    setIsExpanded(!isExpanded);
-  };
-  const label = slot.always(props.label, {
-    defaultProps: {
-      id: labelId
-    },
-    elementType: 'div'
-  });
-  const media = slot.optional(props.media, {
-    defaultProps: {
-      id: mediaId
-    },
-    elementType: 'div'
-  });
-  if (media && /*#__PURE__*/React.isValidElement(media.children)) {
-    media.children = /*#__PURE__*/React.cloneElement(media.children, {
-      className: mergeClasses(media.children.props.className, referenceExtraClassNames.mediaChild)
-    });
-  }
-  if (media === null || media === void 0 ? void 0 : media.id) {
-    var _label_ariadescribedby;
-    var _label_ariadescribedby_concat;
-    label['aria-describedby'] = (_label_ariadescribedby_concat = (_label_ariadescribedby = label['aria-describedby']) === null || _label_ariadescribedby === void 0 ? void 0 : _label_ariadescribedby.concat(media.id)) !== null && _label_ariadescribedby_concat !== void 0 ? _label_ariadescribedby_concat : media.id;
-  }
-  const ariaLabelledByProp = props['aria-labelledby'];
-  const groupSemantics = React.useMemo(() => {
-    return layout === 'inline' ? {
-      role: 'group',
-      'aria-labelledby': `${ariaLabelledByProp !== null && ariaLabelledByProp !== void 0 ? ariaLabelledByProp : ''} ${label.id}`,
-      tabIndex: -1
-    } : {};
-  }, [layout, ariaLabelledByProp, label.id]);
-  // Within a popup, a citation should function as a close button
-  const citationProps = React.useMemo(() => {
-    const onPopoverCloseClick = e => {
-      setPopoverOpen(e, false);
-      // don't navigate
-      e.preventDefault();
+ */ export const useReference_unstable = (props, ref)=>{
+    const { index, referenceId, citationHref, excerpt, layout = 'inline' } = props;
+    const mode = useCopilotMode(props.mode);
+    const labelId = useId();
+    const mediaId = useId();
+    const [isExpanded, setIsExpanded] = React.useState(layout === 'popover' ? true : false);
+    const setPopoverOpen = usePopoverContext((context)=>context.setOpen);
+    const onExpandClick = (_e)=>{
+        setIsExpanded(!isExpanded);
     };
-    return layout === 'popover' ? {
-      referenceHref: '#',
-      tabIndex: -1,
-      'aria-label': `Close Reference ${index}`,
-      onClick: onPopoverCloseClick
-    } : {
-      referenceHref: citationHref
+    const label = slot.always(props.label, {
+        defaultProps: {
+            id: labelId
+        },
+        elementType: 'div'
+    });
+    const media = slot.optional(props.media, {
+        defaultProps: {
+            id: mediaId
+        },
+        elementType: 'div'
+    });
+    if (media && /*#__PURE__*/ React.isValidElement(media.children)) {
+        media.children = /*#__PURE__*/ React.cloneElement(media.children, {
+            className: mergeClasses(media.children.props.className, referenceExtraClassNames.mediaChild)
+        });
+    }
+    if (media === null || media === void 0 ? void 0 : media.id) {
+        var _label_ariadescribedby;
+        var _label_ariadescribedby_concat;
+        label['aria-describedby'] = (_label_ariadescribedby_concat = (_label_ariadescribedby = label['aria-describedby']) === null || _label_ariadescribedby === void 0 ? void 0 : _label_ariadescribedby.concat(media.id)) !== null && _label_ariadescribedby_concat !== void 0 ? _label_ariadescribedby_concat : media.id;
+    }
+    const ariaLabelledByProp = props['aria-labelledby'];
+    const groupSemantics = React.useMemo(()=>{
+        return layout === 'inline' ? {
+            role: 'group',
+            'aria-labelledby': `${ariaLabelledByProp !== null && ariaLabelledByProp !== void 0 ? ariaLabelledByProp : ''} ${label.id}`,
+            tabIndex: -1
+        } : {};
+    }, [
+        layout,
+        ariaLabelledByProp,
+        label.id
+    ]);
+    // Within a popup, a citation should function as a close button
+    const citationProps = React.useMemo(()=>{
+        const onPopoverCloseClick = (e)=>{
+            setPopoverOpen(e, false);
+            // don't navigate
+            e.preventDefault();
+        };
+        return layout === 'popover' ? {
+            referenceHref: '#',
+            tabIndex: -1,
+            'aria-label': `Close Reference ${index}`,
+            onClick: onPopoverCloseClick
+        } : {
+            referenceHref: citationHref
+        };
+    }, [
+        layout,
+        citationHref,
+        index,
+        setPopoverOpen
+    ]);
+    const state = {
+        isExpanded,
+        mode: layout === 'popover' ? 'sidecar' : mode,
+        layout,
+        index,
+        components: {
+            root: 'div',
+            citation: 'div',
+            media: 'div',
+            actions: 'div',
+            label: 'div',
+            sensitivity: 'span',
+            metadata: 'div',
+            content: 'div',
+            primaryText: 'span',
+            secondaryText: 'span',
+            tertiaryText: 'span',
+            icon: 'span',
+            detailsButton: Button
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            id: referenceId,
+            ...groupSemantics,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        citation: slot.optional(props.citation, {
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(Citation, {
+                    block: true,
+                    ...citationProps
+                }, index)
+            },
+            renderByDefault: true,
+            elementType: 'div'
+        }),
+        media,
+        actions: slot.optional(layout === 'inline' ? props.actions : null, {
+            renderByDefault: true,
+            elementType: 'div'
+        }),
+        label,
+        sensitivity: slot.optional(props.sensitivity, {
+            elementType: 'span'
+        }),
+        metadata: slot.always(props.metadata, {
+            elementType: 'div'
+        }),
+        primaryText: slot.optional(props.primaryText, {
+            defaultProps: {
+                hidden: !isExpanded
+            },
+            elementType: 'span'
+        }),
+        secondaryText: slot.optional(props.secondaryText, {
+            defaultProps: {
+                hidden: !isExpanded
+            },
+            elementType: 'span'
+        }),
+        tertiaryText: slot.optional(props.tertiaryText, {
+            defaultProps: {
+                hidden: !isExpanded
+            },
+            elementType: 'span'
+        }),
+        icon: slot.optional(props.icon, {
+            elementType: 'span'
+        }),
+        content: slot.always(props.content, {
+            defaultProps: {
+                children: excerpt && /*#__PURE__*/ React.createElement(Caption1, null, excerpt)
+            },
+            elementType: 'div'
+        }),
+        detailsButton: slot.optional(layout === 'inline' ? props.detailsButton : null, {
+            defaultProps: {
+                appearance: 'transparent',
+                'aria-expanded': isExpanded,
+                'aria-label': 'show details',
+                size: mode === 'sidecar' ? 'small' : 'medium',
+                icon: {
+                    children: getIcon(isExpanded, mode)
+                }
+            },
+            renderByDefault: true,
+            elementType: Button
+        })
     };
-  }, [layout, citationHref, index, setPopoverOpen]);
-  const state = {
-    isExpanded,
-    mode: layout === 'popover' ? 'sidecar' : mode,
-    layout,
-    index,
-    components: {
-      root: 'div',
-      citation: 'div',
-      media: 'div',
-      actions: 'div',
-      label: 'div',
-      sensitivity: 'span',
-      metadata: 'div',
-      content: 'div',
-      primaryText: 'span',
-      secondaryText: 'span',
-      tertiaryText: 'span',
-      icon: 'span',
-      detailsButton: Button
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref,
-      id: referenceId,
-      ...groupSemantics,
-      ...props
-    }), {
-      elementType: 'div'
-    }),
-    citation: slot.optional(props.citation, {
-      defaultProps: {
-        children: /*#__PURE__*/React.createElement(Citation, {
-          block: true,
-          ...citationProps
-        }, index)
-      },
-      renderByDefault: true,
-      elementType: 'div'
-    }),
-    media,
-    actions: slot.optional(layout === 'inline' ? props.actions : null, {
-      renderByDefault: true,
-      elementType: 'div'
-    }),
-    label,
-    sensitivity: slot.optional(props.sensitivity, {
-      elementType: 'span'
-    }),
-    metadata: slot.always(props.metadata, {
-      elementType: 'div'
-    }),
-    primaryText: slot.optional(props.primaryText, {
-      defaultProps: {
-        hidden: !isExpanded
-      },
-      elementType: 'span'
-    }),
-    secondaryText: slot.optional(props.secondaryText, {
-      defaultProps: {
-        hidden: !isExpanded
-      },
-      elementType: 'span'
-    }),
-    tertiaryText: slot.optional(props.tertiaryText, {
-      defaultProps: {
-        hidden: !isExpanded
-      },
-      elementType: 'span'
-    }),
-    icon: slot.optional(props.icon, {
-      elementType: 'span'
-    }),
-    content: slot.always(props.content, {
-      defaultProps: {
-        children: excerpt && /*#__PURE__*/React.createElement(Caption1, null, excerpt)
-      },
-      elementType: 'div'
-    }),
-    detailsButton: slot.optional(layout === 'inline' ? props.detailsButton : null, {
-      defaultProps: {
-        appearance: 'transparent',
-        'aria-expanded': isExpanded,
-        'aria-label': 'show details',
-        size: mode === 'sidecar' ? 'small' : 'medium',
-        icon: {
-          children: getIcon(isExpanded, mode)
-        }
-      },
-      renderByDefault: true,
-      elementType: Button
-    })
-  };
-  if (state.detailsButton) {
-    const onClick = state.detailsButton.onClick;
-    state.detailsButton.onClick = mergeCallbacks(onClick, onExpandClick);
-  }
-  const referenceGroupSetOpen = useReferenceGroupSetOpen();
-  const onTargettedByCitation = e => {
-    var _e_relatedTarget;
-    const relatedTargetHash = (_e_relatedTarget = e.relatedTarget) === null || _e_relatedTarget === void 0 ? void 0 : _e_relatedTarget.hash;
-    if (relatedTargetHash && relatedTargetHash.substring(1) === referenceId) {
-      referenceGroupSetOpen();
-      setIsExpanded(true);
+    if (state.detailsButton) {
+        const onClick = state.detailsButton.onClick;
+        state.detailsButton.onClick = mergeCallbacks(onClick, onExpandClick);
     }
-  };
-  state.root.onFocus = mergeCallbacks(state.root.onFocus, onTargettedByCitation);
-  return state;
+    const referenceGroupSetOpen = useReferenceGroupSetOpen();
+    const onTargettedByCitation = (e)=>{
+        var _e_relatedTarget;
+        const relatedTargetHash = (_e_relatedTarget = e.relatedTarget) === null || _e_relatedTarget === void 0 ? void 0 : _e_relatedTarget.hash;
+        if (relatedTargetHash && relatedTargetHash.substring(1) === referenceId) {
+            referenceGroupSetOpen();
+            setIsExpanded(true);
+        }
+    };
+    state.root.onFocus = mergeCallbacks(state.root.onFocus, onTargettedByCitation);
+    return state;
 };
-const getIcon = (isExpanded, mode) => {
-  if (mode === 'sidecar') {
-    return !isExpanded ? /*#__PURE__*/React.createElement(ChevronDown16Regular, null) : /*#__PURE__*/React.createElement(ChevronUp16Regular, null);
-  }
-  return !isExpanded ? /*#__PURE__*/React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/React.createElement(ChevronUp24Regular, null);
+const getIcon = (isExpanded, mode)=>{
+    if (mode === 'sidecar') {
+        return !isExpanded ? /*#__PURE__*/ React.createElement(ChevronDown16Regular, null) : /*#__PURE__*/ React.createElement(ChevronUp16Regular, null);
+    }
+    return !isExpanded ? /*#__PURE__*/ React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/ React.createElement(ChevronUp24Regular, null);
 };
-//# sourceMappingURL=useReference.js.map

package/lib/components/Reference/useReferenceStyles.styles.raw.js

@@ -0,0 +1,197 @@
+import { buttonClassNames, makeResetStyles, makeStyles, mergeClasses, shorthands, typographyStyles } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+/** deprecated Use ReferenceV2 component, hooks and types instead. */ export const referenceClassNames = {
+    root: 'fai-Reference',
+    citation: 'fai-Reference__citation',
+    media: 'fai-Reference__media',
+    actions: 'fai-Reference__actions',
+    sensitivity: 'fai-Reference__sensitivity',
+    metadata: 'fai-Reference__metadata',
+    primaryText: 'fai-Reference__primaryText',
+    secondaryText: 'fai-Reference__secondaryText',
+    tertiaryText: 'fai-Reference__tertiaryText',
+    icon: 'fai-Reference__icon',
+    label: 'fai-Reference__label',
+    content: 'fai-Reference__content',
+    detailsButton: 'fai-Reference__detailsButton'
+};
+/** deprecated Use ReferenceV2 component, hooks and types instead. */ export const referenceExtraClassNames = {
+    text: 'fai-Reference__text',
+    mediaChild: 'fai-Reference__mediaChild'
+};
+const labelFontSize = typographyStyles.caption1Strong.fontSize;
+const labelLineHeight = typographyStyles.caption1Strong.lineHeight;
+const maxPopoverWidth = '256px';
+const useReferenceClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    width: '100%',
+    display: 'grid',
+    gridTemplateAreas: `
+      "citation         media            title            actions"
+      ".                .                title            ."
+      "sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel"
+      "metadata         metadata         metadata         metadata"
+      "content          content          content          content"
+    `,
+    gridTemplateColumns: 'min-content min-content 1fr min-content',
+    gridTemplateRows: '32px auto auto auto auto',
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,
+    boxShadow: 'none',
+    columnGap: tokens.spacingHorizontalXS,
+    alignItems: 'center'
+});
+const useStyles = makeStyles({
+    canvas: {},
+    sidecar: {
+        gridTemplateRows: '24px auto auto auto',
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`
+    },
+    inline: {},
+    popover: {
+        ...shorthands.borderWidth('0px'),
+        width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,
+        padding: '0px'
+    },
+    closed: {
+        rowGap: 0
+    },
+    citation: {
+        gridArea: 'citation'
+    },
+    media: {
+        gridArea: 'media',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    mediaPopover: {
+        width: '16px',
+        height: '16px',
+        [`> .${referenceExtraClassNames.mediaChild}`]: {
+            width: '16px',
+            height: '16px'
+        }
+    },
+    actions: {
+        gridArea: 'actions',
+        justifySelf: 'end',
+        display: 'flex',
+        gridRowStart: 1
+    },
+    detailsButton: {
+        [`> ${buttonClassNames.icon}`]: {
+            color: tokens.colorNeutralForeground3
+        }
+    },
+    sensitivity: {
+        gridArea: 'sensitivityLabel',
+        justifySelf: 'start'
+    },
+    metadata: {
+        marginTop: tokens.spacingVerticalXS,
+        gridArea: 'metadata',
+        ...typographyStyles.caption2
+    },
+    metadataSubsequentText: {
+        position: 'relative',
+        marginLeft: tokens.spacingHorizontalS,
+        '&::before': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: `calc(${tokens.spacingHorizontalS} / -2)`,
+            top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,
+            height: typographyStyles.caption2.fontSize,
+            ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)
+        }
+    },
+    icon: {
+        ...typographyStyles.caption2,
+        verticalAlign: 'middle'
+    },
+    content: {
+        marginTop: tokens.spacingVerticalXS,
+        gridArea: 'content',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: tokens.spacingVerticalS,
+        color: tokens.colorNeutralForeground3,
+        wordBreak: 'break-word'
+    },
+    hidden: {
+        display: 'none'
+    }
+});
+const useLabelStyles = makeStyles({
+    root: {
+        gridArea: 'title',
+        alignSelf: 'start',
+        ...typographyStyles.caption1Strong,
+        wordBreak: 'break-word',
+        '-webkit-box-orient': 'vertical',
+        '-webkit-line-clamp': '2',
+        display: '-webkit-box',
+        overflowY: 'hidden'
+    },
+    canvas: {
+        // 24px is the height of the tallest element within the reference
+        paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`
+    },
+    sidecar: {
+        // 16px is the height of the tallest element within the reference
+        paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`
+    },
+    closed: {
+        maxWidth: '100%',
+        '-webkit-line-clamp': '1'
+    }
+});
+/**
+ * Apply styling to the Reference slots based on the state
+ *
+ * deprecated Use ReferenceV2 component, hooks and types instead.
+ */ export const useReferenceStyles_unstable = (state)=>{
+    'use no memo';
+    const { isExpanded, mode, layout } = state;
+    const rootClassName = useReferenceClassName();
+    const styles = useStyles();
+    const labelStyles = useLabelStyles();
+    state.root.className = mergeClasses(referenceClassNames.root, rootClassName, styles[mode], styles[layout], !isExpanded && styles.closed, state.root.className);
+    if (state.citation) {
+        state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);
+    }
+    if (state.media) {
+        state.media.className = mergeClasses(referenceClassNames.media, styles.media, layout === 'popover' && styles.mediaPopover, state.media.className);
+    }
+    if (state.actions) {
+        state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);
+    }
+    state.label.className = mergeClasses(referenceClassNames.label, labelStyles.root, labelStyles[mode], !isExpanded && labelStyles.closed, state.label.className);
+    if (state.sensitivity) {
+        state.sensitivity.className = mergeClasses(referenceClassNames.sensitivity, styles.sensitivity, !isExpanded && styles.hidden, state.sensitivity.className);
+    }
+    state.metadata.className = mergeClasses(referenceClassNames.metadata, styles.metadata, !isExpanded && styles.hidden, state.metadata.className);
+    let isSubsequentText = false;
+    if (state.primaryText) {
+        state.primaryText.className = mergeClasses(referenceClassNames.primaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.primaryText.className);
+        isSubsequentText = true;
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = mergeClasses(referenceClassNames.secondaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.secondaryText.className);
+        isSubsequentText = true;
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = mergeClasses(referenceClassNames.tertiaryText, referenceExtraClassNames.text, isSubsequentText && styles.metadataSubsequentText, state.tertiaryText.className);
+        isSubsequentText = true;
+    }
+    if (state.icon) {
+        state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);
+    }
+    state.content.className = mergeClasses(referenceClassNames.content, styles.content, !isExpanded && styles.hidden, state.content.className);
+    if (state.detailsButton) {
+        state.detailsButton.className = mergeClasses(referenceClassNames.detailsButton, styles.detailsButton, state.detailsButton.className);
+    }
+    return state;
+};

package/lib/components/Reference/useReferenceStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useReferenceStyles.styles.ts"],"sourcesContent":["import {\n  buttonClassNames,\n  makeResetStyles,\n  makeStyles,\n  mergeClasses,\n  shorthands,\n  typographyStyles,\n} from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport type { ReferenceSlots, ReferenceState } from './Reference.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceClassNames: SlotClassNames<ReferenceSlots> = {\n  root: 'fai-Reference',\n  citation: 'fai-Reference__citation',\n  media: 'fai-Reference__media',\n  actions: 'fai-Reference__actions',\n  sensitivity: 'fai-Reference__sensitivity',\n  metadata: 'fai-Reference__metadata',\n  primaryText: 'fai-Reference__primaryText',\n  secondaryText: 'fai-Reference__secondaryText',\n  tertiaryText: 'fai-Reference__tertiaryText',\n  icon: 'fai-Reference__icon',\n  label: 'fai-Reference__label',\n  content: 'fai-Reference__content',\n  detailsButton: 'fai-Reference__detailsButton',\n};\n\n/** deprecated Use ReferenceV2 component, hooks and types instead. */\nexport const referenceExtraClassNames = {\n  text: 'fai-Reference__text',\n  mediaChild: 'fai-Reference__mediaChild',\n};\n\nconst labelFontSize = typographyStyles.caption1Strong.fontSize;\nconst labelLineHeight = typographyStyles.caption1Strong.lineHeight;\n\nconst maxPopoverWidth = '256px';\n\nconst useReferenceClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  width: '100%',\n  display: 'grid',\n  gridTemplateAreas: `\n      \"citation         media            title            actions\"\n      \".                .                title            .\"\n      \"sensitivityLabel sensitivityLabel sensitivityLabel sensitivityLabel\"\n      \"metadata         metadata         metadata         metadata\"\n      \"content          content          content          content\"\n    `,\n  gridTemplateColumns: 'min-content min-content 1fr min-content',\n  gridTemplateRows: '32px auto auto auto auto',\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n  borderRadius: tokens.borderRadiusMedium,\n  padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  boxShadow: 'none',\n  columnGap: tokens.spacingHorizontalXS,\n  alignItems: 'center',\n});\n\nconst useStyles = makeStyles({\n  canvas: {},\n  sidecar: {\n    gridTemplateRows: '24px auto auto auto',\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,\n  },\n  inline: {},\n  popover: {\n    ...shorthands.borderWidth('0px'),\n    width: `calc(${maxPopoverWidth} - (${tokens.spacingHorizontalM} * 2))`,\n    padding: '0px',\n  },\n  closed: {\n    rowGap: 0,\n  },\n  citation: {\n    gridArea: 'citation',\n  },\n  media: {\n    gridArea: 'media',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  mediaPopover: {\n    width: '16px',\n    height: '16px',\n\n    [`> .${referenceExtraClassNames.mediaChild}`]: {\n      width: '16px',\n      height: '16px',\n    },\n  },\n  actions: {\n    gridArea: 'actions',\n    justifySelf: 'end',\n    display: 'flex',\n    gridRowStart: 1,\n  },\n  detailsButton: {\n    [`> ${buttonClassNames.icon}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n  },\n  sensitivity: {\n    gridArea: 'sensitivityLabel',\n    justifySelf: 'start',\n  },\n  metadata: {\n    marginTop: tokens.spacingVerticalXS,\n\n    gridArea: 'metadata',\n    ...typographyStyles.caption2,\n  },\n  metadataSubsequentText: {\n    position: 'relative',\n    marginLeft: tokens.spacingHorizontalS,\n\n    '&::before': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      left: `calc(${tokens.spacingHorizontalS} / -2)`,\n      top: `calc((${typographyStyles.caption2.lineHeight} - ${typographyStyles.caption2.fontSize}) / 2)`,\n      height: typographyStyles.caption2.fontSize,\n      ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n    },\n  },\n  icon: {\n    ...typographyStyles.caption2,\n    verticalAlign: 'middle',\n  },\n  content: {\n    marginTop: tokens.spacingVerticalXS,\n    gridArea: 'content',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalS,\n    color: tokens.colorNeutralForeground3,\n    wordBreak: 'break-word',\n  },\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  root: {\n    gridArea: 'title',\n    alignSelf: 'start',\n    ...typographyStyles.caption1Strong,\n    wordBreak: 'break-word',\n    '-webkit-box-orient': 'vertical',\n    '-webkit-line-clamp': '2',\n    display: '-webkit-box',\n    overflowY: 'hidden',\n  },\n\n  canvas: {\n    // 24px is the height of the tallest element within the reference\n    paddingTop: `calc((24px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  sidecar: {\n    // 16px is the height of the tallest element within the reference\n    paddingTop: `calc((16px / 2 ) - (${labelLineHeight} - ${labelFontSize}))`,\n  },\n\n  closed: {\n    maxWidth: '100%',\n    '-webkit-line-clamp': '1',\n  },\n});\n\n/**\n * Apply styling to the Reference slots based on the state\n *\n * deprecated Use ReferenceV2 component, hooks and types instead.\n */\nexport const useReferenceStyles_unstable = (state: ReferenceState): ReferenceState => {\n  'use no memo';\n\n  const { isExpanded, mode, layout } = state;\n\n  const rootClassName = useReferenceClassName();\n  const styles = useStyles();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(\n    referenceClassNames.root,\n    rootClassName,\n    styles[mode],\n    styles[layout],\n    !isExpanded && styles.closed,\n    state.root.className,\n  );\n\n  if (state.citation) {\n    state.citation.className = mergeClasses(referenceClassNames.citation, styles.citation, state.citation.className);\n  }\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      referenceClassNames.media,\n      styles.media,\n      layout === 'popover' && styles.mediaPopover,\n      state.media.className,\n    );\n  }\n\n  if (state.actions) {\n    state.actions.className = mergeClasses(referenceClassNames.actions, styles.actions, state.actions.className);\n  }\n\n  state.label.className = mergeClasses(\n    referenceClassNames.label,\n    labelStyles.root,\n    labelStyles[mode],\n    !isExpanded && labelStyles.closed,\n    state.label.className,\n  );\n\n  if (state.sensitivity) {\n    state.sensitivity.className = mergeClasses(\n      referenceClassNames.sensitivity,\n      styles.sensitivity,\n      !isExpanded && styles.hidden,\n      state.sensitivity.className,\n    );\n  }\n\n  state.metadata.className = mergeClasses(\n    referenceClassNames.metadata,\n    styles.metadata,\n    !isExpanded && styles.hidden,\n    state.metadata.className,\n  );\n\n  let isSubsequentText = false;\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      referenceClassNames.primaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.primaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      referenceClassNames.secondaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.secondaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.tertiaryText) {\n    state.tertiaryText.className = mergeClasses(\n      referenceClassNames.tertiaryText,\n      referenceExtraClassNames.text,\n      isSubsequentText && styles.metadataSubsequentText,\n      state.tertiaryText.className,\n    );\n    isSubsequentText = true;\n  }\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(referenceClassNames.icon, styles.icon, state.icon.className);\n  }\n  state.content.className = mergeClasses(\n    referenceClassNames.content,\n    styles.content,\n    !isExpanded && styles.hidden,\n    state.content.className,\n  );\n\n  if (state.detailsButton) {\n    state.detailsButton.className = mergeClasses(\n      referenceClassNames.detailsButton,\n      styles.detailsButton,\n      state.detailsButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["buttonClassNames","makeResetStyles","makeStyles","mergeClasses","shorthands","typographyStyles","tokens","referenceClassNames","root","citation","media","actions","sensitivity","metadata","primaryText","secondaryText","tertiaryText","icon","label","content","detailsButton","referenceExtraClassNames","text","mediaChild","labelFontSize","caption1Strong","fontSize","labelLineHeight","lineHeight","maxPopoverWidth","useReferenceClassName","boxSizing","width","display","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","border","strokeWidthThin","colorNeutralStroke1","borderRadius","borderRadiusMedium","padding","spacingVerticalS","spacingHorizontalS","boxShadow","columnGap","spacingHorizontalXS","alignItems","useStyles","canvas","sidecar","spacingVerticalXS","inline","popover","borderWidth","spacingHorizontalM","closed","rowGap","gridArea","justifyContent","mediaPopover","height","justifySelf","gridRowStart","color","colorNeutralForeground3","marginTop","caption2","metadataSubsequentText","position","marginLeft","left","top","borderLeft","colorNeutralStroke2","verticalAlign","flexDirection","wordBreak","hidden","useLabelStyles","alignSelf","overflowY","paddingTop","maxWidth","useReferenceStyles_unstable","state","isExpanded","mode","layout","rootClassName","styles","labelStyles","className","isSubsequentText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.js

@@ -2,11 +2,9 @@ import * as React from 'react';
 import { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';
 import { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';
 import { useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles.styles';
-/** deprecated The ReferenceGroup pattern is deprecated and will be removed in a future release. */
-export const ReferenceGroupToggle = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useReferenceGroupToggle_unstable(props, ref);
-  useReferenceGroupToggleStyles_unstable(state);
-  return renderReferenceGroupToggle_unstable(state);
+/** deprecated The ReferenceGroup pattern is deprecated and will be removed in a future release. */ export const ReferenceGroupToggle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useReferenceGroupToggle_unstable(props, ref);
+    useReferenceGroupToggleStyles_unstable(state);
+    return renderReferenceGroupToggle_unstable(state);
 });
 ReferenceGroupToggle.displayName = 'ReferenceGroupToggle';
-//# sourceMappingURL=ReferenceGroupToggle.js.map

package/lib/components/ReferenceGroupToggle/ReferenceGroupToggle.types.js

@@ -1,4 +1,3 @@
 /**
  * State used in rendering ReferenceGroupToggle
- */export {};
-//# sourceMappingURL=ReferenceGroupToggle.types.js.map
+ */ export { };

package/lib/components/ReferenceGroupToggle/index.js

@@ -2,4 +2,3 @@ export { ReferenceGroupToggle } from './ReferenceGroupToggle';
 export { renderReferenceGroupToggle_unstable } from './renderReferenceGroupToggle';
 export { useReferenceGroupToggle_unstable } from './useReferenceGroupToggle';
 export { referenceGroupToggleClassNames, useReferenceGroupToggleStyles_unstable } from './useReferenceGroupToggleStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/ReferenceGroupToggle/renderReferenceGroupToggle.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-components';
 /**
  * Render the final JSX of ReferenceGroupToggle
- */
-export const renderReferenceGroupToggle_unstable = state => {
-  assertSlots(state);
-  return /*#__PURE__*/_jsxs(state.root, {
-    children: [state.root.children, state.icon && /*#__PURE__*/_jsx(state.icon, {})]
-  });
+ */ export const renderReferenceGroupToggle_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {})
+        ]
+    });
 };
-//# sourceMappingURL=renderReferenceGroupToggle.js.map