@dust-tt/sparkle 0.2.253 → 0.2.254-rc-2

package/src/components/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import { Menu, Transition } from "@headlessui/react";
+import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 import React, {
   ComponentType,
   forwardRef,
@@ -22,7 +23,7 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 import { Item as StandardItem, LinkProps } from "./Item";
-import { Tooltip, TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 
 const ButtonRefContext =
   React.createContext<MutableRefObject<HTMLButtonElement | null> | null>(null);
@@ -98,7 +99,7 @@ export interface DropdownButtonProps {
   type?: "menu" | "submenu" | "select";
   size?: "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: TooltipProps["position"];
+  tooltipPosition?: (typeof SIDE_OPTIONS)[number];
   icon?: ComponentType;
   className?: string;
   disabled?: boolean;
@@ -116,7 +117,7 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
       tooltip,
       icon,
       children,
-      tooltipPosition = "above",
+      tooltipPosition = "top",
       className = "",
       disabled = false,
       onClick,
@@ -178,9 +179,11 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
           onClick={(e) => e.stopPropagation()}
         >
           {tooltip ? (
-            <Tooltip position={tooltipPosition} label={tooltip}>
-              {children}
-            </Tooltip>
+            <Tooltip
+              trigger={children}
+              label={tooltip}
+              side={tooltipPosition}
+            />
           ) : (
             children
           )}
@@ -198,31 +201,39 @@ DropdownMenu.Button = forwardRef<HTMLButtonElement, DropdownButtonProps>(
     return (
       <>
         {tooltip ? (
-          <Tooltip label={tooltip} position={tooltipPosition}>
-            <Menu.Button
-              disabled={disabled}
-              ref={aggregatedRef}
-              className={classNames(
-                disabled ? "s-cursor-default" : "s-cursor-pointer",
-                className,
-                "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
-                label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
-              )}
-              onClick={(e) => {
-                e.stopPropagation();
-                if (onClick) {
-                  onClick();
-                }
-              }}
-            >
-              <Icon visual={icon} size={size} className={finalIconClasses} />
-              <Icon
-                visual={chevronIcon}
-                size={size === "sm" ? "xs" : "sm"}
-                className={finalChevronClasses}
-              />
-            </Menu.Button>
-          </Tooltip>
+          <Tooltip
+            trigger={
+              <Menu.Button
+                disabled={disabled}
+                ref={aggregatedRef}
+                className={classNames(
+                  disabled ? "s-cursor-default" : "s-cursor-pointer",
+                  className,
+                  "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+                  label
+                    ? size === "md"
+                      ? "s-gap-2"
+                      : "s-gap-1.5"
+                    : "s-gap-0.5"
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (onClick) {
+                    onClick();
+                  }
+                }}
+              >
+                <Icon visual={icon} size={size} className={finalIconClasses} />
+                <Icon
+                  visual={chevronIcon}
+                  size={size === "sm" ? "xs" : "sm"}
+                  className={finalChevronClasses}
+                />
+              </Menu.Button>
+            }
+            label={tooltip}
+            side={tooltipPosition}
+          />
         ) : (
           <Menu.Button
             disabled={disabled}

package/src/components/ElementDialog.tsx

@@ -17,6 +17,7 @@ export function ElementDialog<T>({
   closeDialogFn,
   onValidate,
   onCancel,
+  children,
   ...props
 }: ElementDialogProps<T>) {
   const [isClosingTransition, setIsClosingTransition] = useState(false);
@@ -33,6 +34,8 @@ export function ElementDialog<T>({
       onCancel={() => onCancel(transitionOnClose)}
       onValidate={() => onValidate(transitionOnClose)}
       {...props}
-    />
+    >
+      {children}
+    </Dialog>
   );
 }

package/src/components/IconButton.tsx

@@ -1,16 +1,17 @@
+import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 import React, { ComponentType, MouseEventHandler } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
-import { Tooltip, TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 
 type IconButtonProps = {
   variant?: "primary" | "warning" | "secondary" | "tertiary" | "white";
   onClick?: MouseEventHandler<HTMLButtonElement>;
   size?: "xs" | "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: TooltipProps["position"];
+  tooltipPosition?: (typeof SIDE_OPTIONS)[number];
   icon?: ComponentType;
   className?: string;
   disabled?: boolean;
@@ -87,7 +88,7 @@ export function IconButton({
   onClick,
   disabled = false,
   tooltip,
-  tooltipPosition = "above",
+  tooltipPosition = "top",
   icon,
   className = "",
   size = "sm",
@@ -117,9 +118,11 @@ export function IconButton({
   );
 
   return tooltip ? (
-    <Tooltip label={tooltip} position={tooltipPosition}>
-      {IconButtonContent}
-    </Tooltip>
+    <Tooltip
+      trigger={IconButtonContent}
+      label={tooltip}
+      side={tooltipPosition}
+    />
   ) : (
     IconButtonContent
   );

package/src/components/IconToggleButton.tsx

@@ -1,16 +1,17 @@
+import { SIDE_OPTIONS } from "@radix-ui/react-popper";
 import React, { ComponentType, MouseEventHandler } from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon, IconProps } from "./Icon";
-import { Tooltip, TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 
 type IconToggleButtonProps = {
   variant?: "secondary" | "tertiary";
   onClick?: MouseEventHandler<HTMLButtonElement>;
   size?: "xs" | "sm" | "md";
   tooltip?: string;
-  tooltipPosition?: TooltipProps["position"];
+  tooltipPosition?: (typeof SIDE_OPTIONS)[number];
   icon: ComponentType;
   iconSelected?: ComponentType;
   className?: string;
@@ -57,7 +58,7 @@ export function IconToggleButton({
   onClick,
   disabled = false,
   tooltip,
-  tooltipPosition = "above",
+  tooltipPosition = "top",
   icon,
   iconSelected,
   className = "",
@@ -105,9 +106,11 @@ export function IconToggleButton({
   );
 
   return tooltip ? (
-    <Tooltip label={tooltip} position={tooltipPosition}>
-      {IconButtonToggleContent}
-    </Tooltip>
+    <Tooltip
+      trigger={IconButtonToggleContent}
+      label={tooltip}
+      side={tooltipPosition}
+    />
   ) : (
     IconButtonToggleContent
   );

package/src/components/Input.tsx

@@ -92,4 +92,4 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   }
 );
 
-Input.displayName = "Input"
+Input.displayName = "Input";

package/src/components/Searchbar.tsx

@@ -26,11 +26,9 @@ type SearchbarProps = {
   size?: "xs" | "sm" | "md";
   disabled?: boolean;
   className?: string;
-}
+};
 
-export const Searchbar = forwardRef<
-  HTMLInputElement, SearchbarProps
->(
+export const Searchbar = forwardRef<HTMLInputElement, SearchbarProps>(
   (
     {
       placeholder,

package/src/components/Tab.tsx

@@ -199,7 +199,7 @@ export function Tab<E>({
         tab.label ? (
           <React.Fragment key={`tab-${i}`}>
             <div className={tabSizingClasses[tab.sizing ?? "hug"]}>
-              <Tooltip label={tab.label}>{content}</Tooltip>
+              <Tooltip trigger={content} label={tab.label} />
             </div>
             {tab.hasSeparator && (
               <div className="s-flex s-h-full s-grow" key={`sep-${i}`} />

package/src/components/Tooltip.tsx

@@ -1,86 +1,56 @@
-import React, { useEffect, useState } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
-export interface TooltipProps {
-  children: React.ReactNode;
-  label?: string;
-  position?: "above" | "below";
-  contentChildren?: React.ReactNode;
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipRoot = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {}
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={classNames(
+      "s-bg-primary-50 s-text-primary-700 s-z-50 s-max-w-xs s-overflow-hidden s-rounded-md s-border s-bg-white s-px-3 s-py-1.5 s-text-sm s-shadow-md",
+      "s-animate-in s-fade-in-0 s-zoom-in-95",
+      "data-[state=closed]:s-animate-out data-[state=closed]:s-fade-out-0 data-[state=closed]:s-zoom-out-95 data-[side=bottom]:s-slide-in-from-top-2 data-[side=left]:s-slide-in-from-right-2 data-[side=right]:s-slide-in-from-left-2 data-[side=top]:s-slide-in-from-bottom-2",
+      className || ""
+    )}
+    {...props}
+  />
+));
+
+interface TooltipProps extends TooltipContentProps {
+  trigger: React.ReactNode;
+  label: React.ReactNode;
 }
 
-export function Tooltip({
-  children,
-  label,
-  position = "above",
-  contentChildren,
-}: TooltipProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [timerId, setTimerId] = useState<number | null>(null);
-  const [isTouchDevice, setIsTouchDevice] = useState(false);
-
-  const handleMouseOver = () => {
-    const id = window.setTimeout(() => {
-      setIsHovered(true);
-    }, 600);
-    setTimerId(id);
-  };
-
-  const handleMouseLeave = () => {
-    if (timerId !== null) {
-      clearTimeout(timerId);
-    }
-    setIsHovered(false);
-  };
-
-  useEffect(() => {
-    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
-    return () => {
-      if (timerId) {
-        window.clearTimeout(timerId);
-      }
-    };
-  }, [timerId]);
-
-  if (isTouchDevice) {
-    return <>{children}</>;
-  }
-
-  const baseClasses = classNames(
-    "s-absolute s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform",
-    "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark"
-  );
-  const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none"; // Added s-pointer-events-none
-  const visibleClasses = "-s-translate-y-0 s-opacity-100";
-  const hiddenOnMobileClasses = "s-hidden sm:s-block";
-  const tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
-  const tooltipPositionClasses =
-    position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
-
-  // if tooltip text is too long we need to wrap it
-  const labelLength = label?.length || 0;
-  const labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
-
+function Tooltip({ trigger, label, ...props }: TooltipProps) {
   return (
-    <div
-      onMouseEnter={handleMouseOver}
-      onMouseLeave={handleMouseLeave}
-      className="s-relative s-inline-block"
-    >
-      {children}
-      <div
-        className={classNames(
-          `${isHovered ? visibleClasses : hiddenClasses}`,
-          baseClasses,
-          hiddenOnMobileClasses,
-          tooltipPositionClasses,
-          tooltipCenterClasses,
-          contentChildren ? "" : labelClasses
-        )}
-        onAnimationEnd={() => setIsHovered(false)}
-      >
-        {contentChildren || label}
-      </div>
-    </div>
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger>{trigger}</TooltipTrigger>
+        <TooltipContent {...props}>{label}</TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
   );
 }
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+};

package/src/components/index.ts

@@ -43,6 +43,12 @@ export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
 export { Tab } from "./Tab";
 export { TextArea } from "./TextArea";
-export { Tooltip } from "./Tooltip";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "./Tooltip";
 export { Tree } from "./Tree";
 export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";

package/src/stories/Button.stories.tsx

@@ -1,7 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { Button, Cog6ToothIcon } from "../index_with_tw_base";
+import {
+  Button,
+  Cog6ToothIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Button",
@@ -564,6 +572,41 @@ export const ButtonSelectExamples = () => (
   </div>
 );
 
+export const ButtonWithTooltipManualInstantiation = () => {
+  return (
+    <TooltipProvider>
+      <TooltipRoot>
+        <TooltipTrigger>
+          <Button
+            labelVisible={true}
+            label="New conversation"
+            icon={Cog6ToothIcon}
+            hasMagnifying={false}
+          />
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Hello</p>
+        </TooltipContent>
+      </TooltipRoot>
+  </TooltipProvider>
+)}
+
+export const ButtonWithTooltip = () => {
+  return (
+    <Tooltip
+      trigger={
+        <Button
+          labelVisible={true}
+          label="New conversation"
+          icon={Cog6ToothIcon}
+          hasMagnifying={false}
+        />
+      }
+      label={"Hello"}
+    />
+  )
+}
+
 export const Primary: Story = {
   args: {
     variant: "primary",
@@ -622,7 +665,7 @@ export const IconOnlyPlusTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
   },
 };
 
@@ -634,7 +677,7 @@ export const IconOnlyNoTooltip: Story = {
     labelVisible: false,
     icon: Cog6ToothIcon,
     disabled: false,
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     disabledTooltip: true,
   },
 };

package/src/stories/Citation.stories.tsx

@@ -133,7 +133,7 @@ export const CitationsExample = () => (
         type="google_drive"
         index="3"
         href="https://www.google.com"
-        description="Write a 120 character description of the citation here to be displayed in the citation list."
+        description="Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list. Write a 120 character description of the citation here to be displayed in the citation list."
         isBlinking={true}
       />
       <Citation

package/src/stories/DataTable.stories.tsx

@@ -161,7 +161,9 @@ const columns: ColumnDef<Data>[] = [
       width: "100px",
     },
     cell: (info) => (
-      <DataTable.CellContentWithCopy>{info.row.original.addedBy}</DataTable.CellContentWithCopy>
+      <DataTable.CellContentWithCopy>
+        {info.row.original.addedBy}
+      </DataTable.CellContentWithCopy>
     ),
   },
   {

package/src/stories/Dialog.stories.tsx

@@ -26,6 +26,7 @@ export const DialogExample = () => {
           cancelLabel="Cancel"
           onValidate={() => setisOpen1(false)}
           onCancel={() => setisOpen1(false)}
+          validateVariant="primary"
         >
           <div>I'm the modal content</div>
         </Dialog>

package/src/stories/DropdownMenu.stories.tsx

@@ -48,7 +48,10 @@ export const DropdownExample = () => {
       <div className="s-flex s-gap-6">
         <div className="s-text-sm">Action</div>
         <DropdownMenu>
-          <DropdownMenu.Button label="Action" onClick={() => console.log("CLICK")}/>
+          <DropdownMenu.Button
+            label="Action"
+            onClick={() => console.log("CLICK")}
+          />
           <DropdownMenu.Items width={220}>
             <DropdownMenu.SectionHeader label="Edition" />
             <DropdownMenu.Item
@@ -311,7 +314,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="below"
+            tooltipPosition="bottom"
           />
           <DropdownMenu.Items origin="topLeft" width={120}>
             <DropdownMenu.Item label="item 1 is longish" link={{ href: "#" }} />
@@ -355,7 +358,7 @@ export const DropdownExample = () => {
           <DropdownMenu.Button
             icon={ChatBubbleBottomCenterTextIcon}
             tooltip="Moonlab"
-            tooltipPosition="below"
+            tooltipPosition="bottom"
           />
           <DropdownMenu.Items origin="topLeft">
             <DropdownMenu.Item label="item 1" link={{ href: "#" }} />

package/src/stories/IconButton.stories.tsx

@@ -22,7 +22,7 @@ export const IconButtonWithTooltip: Story = {
   args: {
     variant: "primary",
     tooltip: "Your settings",
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
 };
@@ -31,7 +31,7 @@ export const IconButtonSecondary: Story = {
   args: {
     variant: "secondary",
     tooltip: "This a secondary IconButton",
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
 };
@@ -40,7 +40,7 @@ export const IconButtonTertiary: Story = {
   args: {
     variant: "tertiary",
     tooltip: "This a tertiary IconButton",
-    tooltipPosition: "below",
+    tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
 };

package/src/stories/TextArea.stories.tsx

@@ -23,8 +23,13 @@ export const TextAreaExample = () => {
         <TextArea
           placeholder="placeholder"
           onChange={(e) => {
-            console.log(e.target.value)
-            setTextValues([e.target.value, textValues[1], textValues[2], textValues[3]])
+            console.log(e.target.value);
+            setTextValues([
+              e.target.value,
+              textValues[1],
+              textValues[2],
+              textValues[3],
+            ]);
           }}
           minRows={2}
           defaultValue={textValues[0]}
@@ -34,7 +39,12 @@ export const TextAreaExample = () => {
           defaultValue={textValues[1]}
           error={"errored because blah"}
           onChange={(e) =>
-            setTextValues([textValues[0], e.target.value, textValues[2], textValues[3]])
+            setTextValues([
+              textValues[0],
+              e.target.value,
+              textValues[2],
+              textValues[3],
+            ])
           }
           showErrorLabel
         />
@@ -42,7 +52,12 @@ export const TextAreaExample = () => {
           placeholder="placeholder"
           defaultValue={textValues[2]}
           onChange={(e) =>
-            setTextValues([textValues[0], textValues[1], e.target.value, textValues[3]])
+            setTextValues([
+              textValues[0],
+              textValues[1],
+              e.target.value,
+              textValues[3],
+            ])
           }
           error={"errored because blah"}
         />