@bearmenu/ui 0.8.53 → 0.8.54

package/src/components/menu-item.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { MessageSquareQuote, Star } from "lucide-react";
+import { MessageSquareQuote, Star, ThumbsUp } from "lucide-react";
 import { cn } from "../lib/utils";
 import { SignatureChip } from "./signature-chip";
 import type { MenuItemPreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
@@ -71,6 +71,19 @@ export type MenuItemLabels = {
   externalRating?: (score: string) => string;
 };
 
+/**
+ * What the count beside the row counts.
+ *
+ * - `"mentions"`: every review that named the item, complaints included. Drawn
+ *   with the quote glyph.
+ * - `"praise"`: only the reviews that praised it. Drawn with a thumbs-up.
+ *
+ * The caller decides, because only the caller knows which number it passed in
+ * `item.mentions`. A thumbs-up must never sit on a count that includes
+ * complaints, so `"mentions"` is the default.
+ */
+export type MenuItemCountKind = "praise" | "mentions";
+
 export type MenuItemProps = {
   item: MenuItemPreview;
   labels: MenuItemLabels;
@@ -92,6 +105,12 @@ export type MenuItemProps = {
   onSignatureEvidence?: () => void;
   /** Opens the reviews behind the mention count. */
   onMentions?: () => void;
+  /**
+   * Whether the count is praise or every mention. Sets the glyph before the
+   * numeral: a thumbs-up for `"praise"`, the quote glyph for `"mentions"`.
+   * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
+   */
+  countKind?: MenuItemCountKind;
   /**
    * An outside aggregate score for the item (a wine's Vivino rating, a beer's
    * Untappd one), shown as a star and the score beside the mention count.
@@ -136,7 +155,9 @@ export type MenuItemProps = {
 };
 
 /**
- * The mention count: a filled quote glyph and the numeral, pinned right.
+ * The mention count: a glyph and the numeral, pinned right. The glyph is the
+ * quote glyph for every mention, or a thumbs-up when the count is praise only
+ * (see `MenuItemCountKind`).
  *
  * Deliberately NOT a badge — a chip would add a filled shape to a row that has
  * none, and would read as a status label the venue was given rather than a
@@ -147,18 +168,22 @@ export function MentionSignal({
   count,
   onMentions,
   formatCount = String,
+  countKind = "mentions",
 }: {
   label: string;
   count: number;
   onMentions?: () => void;
   formatCount?: (value: number) => string;
+  countKind?: MenuItemCountKind;
 }) {
   /* The glyph and the numeral have to read as ONE object: `gap-0.5` instead of
      4, and the glyph lighter and a step smaller than the numeral so it reads as
-     a prefix mark qualifying the value rather than a peer competing with it. */
+     a prefix mark qualifying the value rather than a peer competing with it.
+     Both glyphs take the same slot, so switching the kind moves nothing. */
+  const Glyph = countKind === "praise" ? ThumbsUp : MessageSquareQuote;
   const content = (
     <span className="inline-flex items-center gap-0.5">
-      <MessageSquareQuote className="h-3.5 w-3.5 opacity-60" aria-hidden />
+      <Glyph className="h-3.5 w-3.5 opacity-60" aria-hidden />
       <span className="tabular-nums">{formatCount(count)}</span>
     </span>
   );
@@ -233,6 +258,7 @@ export const MenuItem = memo(function MenuItem({
   signatureTier = "strong",
   onSignatureEvidence,
   onMentions,
+  countKind = "mentions",
   externalRating,
   formatRating = (score) => score.toFixed(1),
   markGradient,
@@ -455,6 +481,7 @@ export const MenuItem = memo(function MenuItem({
                     count={mentionCount}
                     onMentions={onMentions}
                     formatCount={formatCount}
+                    countKind={countKind}
                   />
                 )}
               </div>

package/src/components/popover.tsx

@@ -27,7 +27,9 @@ const PopoverContent = React.forwardRef<
       // than escape.
       collisionPadding={collisionPadding}
       className={cn(
-        "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+        // Drawers and sheets use layer 1000. A body-portalled popover must
+        // clear that layer or its visible actions cannot receive a pointer.
+        "z-[1010] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
         "max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className