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

package/lib/components/Reference/useReference.js

@@ -15,181 +15,180 @@ 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'
+ */
+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 && /*#__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
-        })
+  }
+  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();
     };
-    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);
-        }
+    return layout === 'popover' ? {
+      referenceHref: '#',
+      tabIndex: -1,
+      'aria-label': `Close Reference ${index}`,
+      onClick: onPopoverCloseClick
+    } : {
+      referenceHref: citationHref
     };
-    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);
+  }, [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);
     }
-    return !isExpanded ? /*#__PURE__*/ React.createElement(ChevronDown24Regular, null) : /*#__PURE__*/ React.createElement(ChevronUp24Regular, null);
+  };
+  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);
 };
+//# sourceMappingURL=useReference.js.map