@gperezmz/bb-plugin-thread-glance 0.1.2

package/components/ui/context-menu.tsx

@@ -0,0 +1,355 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+
+import { cn } from "../../lib/utils";
+import { usePortalScopeProps } from "../../lib/portal-scope";
+import { COARSE_POINTER_CHECK_SLOT_CLASS } from "./coarse-pointer-sizing.js";
+import {
+  MENU_ITEM_LAST_HOVERED_CLASS,
+  MenuHoverProvider,
+  useMenuItemHover,
+} from "./menu-item-hover.js";
+import { LIST_HOVER_TRANSITION } from "./motion.js";
+import { Icon } from "../../components/ui/icon.js";
+
+type ContextMenuSubTriggerElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.SubTrigger
+>;
+type ContextMenuSubTriggerProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean;
+};
+
+type ContextMenuSubContentElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.SubContent
+>;
+type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.SubContent
+>;
+
+type ContextMenuContentElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.Content
+>;
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Content
+>;
+
+type ContextMenuItemElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.Item
+>;
+type ContextMenuItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Item
+> & {
+  inset?: boolean;
+};
+
+type ContextMenuCheckboxItemElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.CheckboxItem
+>;
+type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.CheckboxItem
+>;
+
+type ContextMenuRadioItemElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.RadioItem
+>;
+type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.RadioItem
+>;
+
+type ContextMenuLabelElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.Label
+>;
+type ContextMenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Label
+> & {
+  inset?: boolean;
+};
+
+type ContextMenuSeparatorElement = React.ComponentRef<
+  typeof ContextMenuPrimitive.Separator
+>;
+type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof ContextMenuPrimitive.Separator
+>;
+
+type ContextMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
+
+const CONTEXT_MENU_LAYER_CLASS = "z-[70]";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  ContextMenuSubTriggerElement,
+  ContextMenuSubTriggerProps
+>(
+  (
+    {
+      className,
+      inset,
+      children,
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const { hoverProps } = useMenuItemHover({
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+    });
+
+    return (
+      <ContextMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+          "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-[0.3125rem] text-xs outline-none focus:bg-state-hover focus:text-foreground data-[state=open]:bg-state-active data-[state=open]:text-foreground [&_[data-icon-root]]:pointer-events-none [&_[data-icon-root]]:size-4 [&_[data-icon-root]]:shrink-0",
+          LIST_HOVER_TRANSITION,
+          MENU_ITEM_LAST_HOVERED_CLASS,
+          inset && "pl-8",
+          className,
+        )}
+        {...props}
+        {...hoverProps}
+      >
+        {children}
+        <Icon name="ChevronRight" className="ml-auto" />
+      </ContextMenuPrimitive.SubTrigger>
+    );
+  },
+);
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  ContextMenuSubContentElement,
+  ContextMenuSubContentProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    {...usePortalScopeProps()}
+    className={cn(
+      CONTEXT_MENU_LAYER_CLASS,
+      "min-w-28 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[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,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  ContextMenuContentElement,
+  ContextMenuContentProps
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      {...usePortalScopeProps()}
+      className={cn(
+        CONTEXT_MENU_LAYER_CLASS,
+        "min-w-28 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[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,
+      )}
+      {...props}
+    >
+      <MenuHoverProvider>{children}</MenuHoverProvider>
+    </ContextMenuPrimitive.Content>
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  ContextMenuItemElement,
+  ContextMenuItemProps
+>(
+  (
+    {
+      className,
+      inset,
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const { hoverProps } = useMenuItemHover({
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+    });
+
+    return (
+      <ContextMenuPrimitive.Item
+        ref={ref}
+        className={cn(
+          "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-[0.3125rem] text-xs outline-none focus:bg-state-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>[data-icon-root]]:size-4 [&>[data-icon-root]]:shrink-0",
+          LIST_HOVER_TRANSITION,
+          MENU_ITEM_LAST_HOVERED_CLASS,
+          inset && "pl-8",
+          className,
+        )}
+        {...props}
+        {...hoverProps}
+      />
+    );
+  },
+);
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  ContextMenuCheckboxItemElement,
+  ContextMenuCheckboxItemProps
+>(
+  (
+    {
+      className,
+      children,
+      checked,
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const { hoverProps } = useMenuItemHover({
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+    });
+
+    return (
+      <ContextMenuPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(
+          "relative flex cursor-default select-none items-center rounded-sm py-[0.3125rem] pl-2 pr-8 text-xs outline-none focus:bg-state-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          LIST_HOVER_TRANSITION,
+          MENU_ITEM_LAST_HOVERED_CLASS,
+          className,
+        )}
+        checked={checked}
+        {...props}
+        {...hoverProps}
+      >
+        <span
+          className={cn(
+            "absolute right-2 flex items-center justify-center",
+            COARSE_POINTER_CHECK_SLOT_CLASS,
+          )}
+        >
+          <ContextMenuPrimitive.ItemIndicator>
+            <Icon name="Check" className={COARSE_POINTER_CHECK_SLOT_CLASS} />
+          </ContextMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+      </ContextMenuPrimitive.CheckboxItem>
+    );
+  },
+);
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  ContextMenuRadioItemElement,
+  ContextMenuRadioItemProps
+>(
+  (
+    {
+      className,
+      children,
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const { hoverProps } = useMenuItemHover({
+      onPointerEnter: callerPointerEnter,
+      onKeyDown: callerKeyDown,
+    });
+
+    return (
+      <ContextMenuPrimitive.RadioItem
+        ref={ref}
+        className={cn(
+          "relative flex cursor-default select-none items-center rounded-sm py-[0.3125rem] pl-8 pr-2 text-xs outline-none focus:bg-state-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          LIST_HOVER_TRANSITION,
+          MENU_ITEM_LAST_HOVERED_CLASS,
+          className,
+        )}
+        {...props}
+        {...hoverProps}
+      >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <ContextMenuPrimitive.ItemIndicator>
+            <Icon name="Circle" className="h-2 w-2 fill-current" />
+          </ContextMenuPrimitive.ItemIndicator>
+        </span>
+        {children}
+      </ContextMenuPrimitive.RadioItem>
+    );
+  },
+);
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  ContextMenuLabelElement,
+  ContextMenuLabelProps
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-[0.3125rem] text-xs font-medium text-muted-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  ContextMenuSeparatorElement,
+  ContextMenuSeparatorProps
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: ContextMenuShortcutProps) {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};