@dust-tt/sparkle 0.5.13 → 0.5.15

package/src/components/Dropdown.tsx

@@ -1,4 +1,5 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useRef } from "react";
@@ -242,9 +243,8 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<
-  typeof DropdownMenuPrimitive.Content
-> {
+interface DropdownMenuContentProps
+  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
   dropdownHeaders?: React.ReactNode;
@@ -487,10 +487,8 @@ const DropdownMenuRadioItem = React.forwardRef<
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-interface DropdownMenuTagItemProps extends Omit<
-  DropdownMenuItemProps,
-  "label" | "icon" | "onClick"
-> {
+interface DropdownMenuTagItemProps
+  extends Omit<DropdownMenuItemProps, "label" | "icon" | "onClick"> {
   label: string;
   size?: React.ComponentProps<typeof Chip>["size"];
   color?: React.ComponentProps<typeof Chip>["color"];
@@ -727,6 +725,104 @@ const DropdownMenuFilters = React.forwardRef<
 
 DropdownMenuFilters.displayName = "DropdownMenuFilters";
 
+// DropdownTooltip: Simple tooltip with consistent layout: optional media at top, description below.
+export interface DropdownTooltipProps {
+  description: string;
+  media?: React.ReactNode;
+}
+
+const DropdownTooltip = ({ description, media }: DropdownTooltipProps) => (
+  <div className="s-space-y-4">
+    {/* Media at top */}
+    {media && <div className="s-rounded-sm">{media}</div>}
+
+    {/* Description */}
+    <p className="text-foreground dark:text-foreground-night s-text-sm s-font-normal">
+      {description}
+    </p>
+  </div>
+);
+
+DropdownTooltip.displayName = "DropdownTooltip";
+
+export interface DropdownTooltipTriggerProps {
+  children: React.ReactElement;
+  className?: string;
+  description: string;
+  media?: React.ReactNode;
+  mountPortal?: boolean;
+  mountPortalContainer?: HTMLElement;
+  onVisibilityChange?: (visible: boolean) => void;
+  side?: "left" | "right" | "top" | "bottom";
+  sideOffset?: number;
+}
+
+const DropdownTooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Trigger>,
+  DropdownTooltipTriggerProps
+>(
+  (
+    {
+      children,
+      className,
+      description,
+      media,
+      mountPortal = true,
+      mountPortalContainer,
+      onVisibilityChange,
+      side = "right",
+      sideOffset = 8,
+    },
+    ref
+  ) => {
+    const tooltipContent = (
+      <TooltipPrimitive.Content
+        side={side}
+        sideOffset={sideOffset}
+        className={cn(
+          menuStyleClasses.container,
+          "s-w-48 s-max-w-sm s-p-2 s-shadow-lg"
+        )}
+      >
+        <DropdownTooltip description={description} media={media} />
+      </TooltipPrimitive.Content>
+    );
+
+    const [container, setContainer] = React.useState<Element | undefined>(
+      mountPortalContainer
+    );
+
+    React.useEffect(() => {
+      if (mountPortal && !container) {
+        const dialogElements = document.querySelectorAll(
+          ".s-sheet[role=dialog][data-state=open]"
+        );
+        const defaultContainer = dialogElements[dialogElements.length - 1];
+        setContainer(defaultContainer);
+      }
+    }, [mountPortal, container]);
+
+    return (
+      <TooltipPrimitive.Provider delayDuration={300}>
+        <TooltipPrimitive.Root onOpenChange={onVisibilityChange}>
+          <TooltipPrimitive.Trigger asChild className={className} ref={ref}>
+            {children}
+          </TooltipPrimitive.Trigger>
+          {mountPortal ? (
+            <TooltipPrimitive.Portal container={container}>
+              {tooltipContent}
+            </TooltipPrimitive.Portal>
+          ) : (
+            tooltipContent
+          )}
+        </TooltipPrimitive.Root>
+      </TooltipPrimitive.Provider>
+    );
+  }
+);
+
+DropdownTooltipTrigger.displayName = "DropdownTooltipTrigger";
+
 interface DropdownMenuStaticItemProps {
   label: string;
   value?: string;
@@ -783,4 +879,5 @@ export {
   DropdownMenuTagItem,
   DropdownMenuTagList,
   DropdownMenuTrigger,
+  DropdownTooltipTrigger,
 };

package/src/components/index.ts

@@ -79,6 +79,8 @@ export {
 export type {
   DropdownMenuFilterOption,
   DropdownMenuItemProps,
+  DropdownTooltipProps,
+  DropdownTooltipTriggerProps,
 } from "./Dropdown";
 export {
   DropdownMenu,
@@ -100,6 +102,7 @@ export {
   DropdownMenuTagItem,
   DropdownMenuTagList,
   DropdownMenuTrigger,
+  DropdownTooltipTrigger,
 } from "./Dropdown";
 export { default as DropzoneOverlay } from "./DropzoneOverlay";
 export type { EmojiMartData } from "./EmojiPicker";

package/src/stories/AttachmentChip.stories.tsx

@@ -106,6 +106,7 @@ export const WithDoubleIconAndLink: Story = {
     },
     href: "https://notion.so",
     target: "_blank",
+    onRemove: () => console.log("Ciao"),
   },
   decorators: [
     (Story) => (

package/src/stories/Chip.stories.tsx

@@ -91,6 +91,7 @@ export const RemovableChip: Story = {
         size="mini"
         color="golden"
         label="Remove me"
+        href="https://notion.so"
         onRemove={() => alert("Removed")}
       />
       <Chip

package/src/stories/Dropdown.stories.tsx

@@ -23,6 +23,7 @@ import {
   DropdownMenuTagItem,
   DropdownMenuTagList,
   DropdownMenuTrigger,
+  DropdownTooltipTrigger,
 } from "@sparkle/components/Dropdown";
 import {
   AnthropicLogo,
@@ -927,3 +928,114 @@ export const WithFilters: Story = {
     );
   },
 };
+
+export const WithTooltips: Story = {
+  render: () => {
+    return (
+      <div className="s-flex s-flex-col s-gap-8 s-p-8">
+        <h3 className="s-text-lg s-font-semibold">
+          Dropdown with Rich Tooltips
+        </h3>
+
+        <div className="s-flex s-gap-4">
+          {/* Knowledge Attachment Example */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button label="Skill Builder Actions" variant="outline" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="s-w-64">
+              <DropdownMenuItem label="Configure Settings" />
+              <DropdownTooltipTrigger
+                description="Use company knowledge for context."
+                media={
+                  <img
+                    src="/static/landing/product/Knowledge_Tooltips.jpg"
+                    alt="Knowledge Search Interface"
+                    className="s-aspect-[4/3] s-w-full s-rounded s-object-cover"
+                  />
+                }
+                side="right"
+                sideOffset={8}
+              >
+                <DropdownMenuItem icon={AttachmentIcon} label="Add Knowledge" />
+              </DropdownTooltipTrigger>
+              <DropdownMenuItem label="Save Draft" />
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Data Export Example */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button label="Data Actions" variant="outline" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="s-w-64">
+              <DropdownMenuItem label="View Report" />
+              <DropdownTooltipTrigger
+                description="Export your data in various formats. Choose from CSV, JSON, or PDF depending on your needs."
+                media={
+                  <div className="s-flex s-items-center s-gap-3">
+                    <div className="s-flex s-h-10 s-w-10 s-items-center s-justify-center s-rounded-full s-bg-green-100">
+                      <CloudArrowDownIcon className="s-h-5 s-w-5 s-text-green-600" />
+                    </div>
+                    <div>
+                      <h4 className="s-text-sm s-font-medium s-text-green-800">
+                        Export Status
+                      </h4>
+                      <p className="s-text-xs s-text-green-600">
+                        Ready to export
+                      </p>
+                    </div>
+                  </div>
+                }
+                side="right"
+                sideOffset={8}
+              >
+                <DropdownMenuItem
+                  icon={CloudArrowDownIcon}
+                  label="Export Data"
+                />
+              </DropdownTooltipTrigger>
+              <DropdownMenuItem label="Share Report" />
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Left-side tooltip example */}
+          <div className="s-ml-auto">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button label="Right Side Menu" variant="outline" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="s-w-56">
+                <DropdownMenuItem label="Regular Item" />
+                <DropdownTooltipTrigger
+                  description="This tooltip appears on the left side when the dropdown is positioned on the right side of the screen."
+                  media={
+                    <div className="s-text-center">
+                      <div className="s-mb-2 s-text-2xl">⬅️</div>
+                      <p className="s-text-sm s-font-medium s-text-orange-800">
+                        Positioned Left
+                      </p>
+                      <p className="s-mt-1 s-text-xs s-text-orange-600">
+                        Perfect for right-side menus
+                      </p>
+                    </div>
+                  }
+                  side="left"
+                  sideOffset={8}
+                >
+                  <DropdownMenuItem icon={MagicIcon} label="Help Item" />
+                </DropdownTooltipTrigger>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <p className="s-max-w-lg s-text-sm s-text-gray-600">
+          Hover over menu items with icons to see rich tooltips that provide
+          contextual information and step-by-step instructions. The tooltip
+          positioning automatically adapts based on available space.
+        </p>
+      </div>
+    );
+  },
+};