@purpurds/tooltip 7.6.0 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tooltip",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/tooltip.cjs.js",
   "types": "./dist/tooltip.d.ts",
@@ -17,11 +17,12 @@
   "dependencies": {
     "@radix-ui/react-tooltip": "~1.1.8",
     "classnames": "~2.5.0",
-    "@purpurds/paragraph": "7.6.0",
-    "@purpurds/action": "7.6.0",
-    "@purpurds/button": "7.6.0",
-    "@purpurds/icon": "7.6.0",
-    "@purpurds/tokens": "7.6.0"
+    "@purpurds/action": "7.7.0",
+    "@purpurds/button": "7.7.0",
+    "@purpurds/common-types": "7.7.0",
+    "@purpurds/icon": "7.7.0",
+    "@purpurds/paragraph": "7.7.0",
+    "@purpurds/tokens": "7.7.0"
   },
   "devDependencies": {
     "eslint": "9.24.0",

package/src/tooltip.stories.tsx

@@ -23,7 +23,7 @@ const meta = {
     align: "center",
     position: "top",
     triggerElement: undefined,
-    triggerAriaLabel: "Tooltip trigger",
+    triggerAriaLabel: "Tooltip about the text that is about to be shown",
     negative: false,
     children: "Some tooltip content",
   },

package/src/tooltip.tsx

@@ -1,13 +1,7 @@
-import React, {
-  Children,
-  type ForwardedRef,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-  useState,
-} from "react";
+import React, { Children, forwardRef, type ReactNode, useState } from "react";
 import { type Size } from "@purpurds/action";
 import { Button, BUTTON_VARIANT } from "@purpurds/button";
+import type { BaseProps } from "@purpurds/common-types";
 import { IconInfo } from "@purpurds/icon/info";
 import { Paragraph, ParagraphVariant } from "@purpurds/paragraph";
 import { purpurMotionDuration400 } from "@purpurds/tokens";
@@ -24,6 +18,7 @@ export const TOOLTIP_POSITION = {
   LEFT: "left",
   RIGHT: "right",
 } as const;
+
 export type TooltipPosition = (typeof TOOLTIP_POSITION)[keyof typeof TOOLTIP_POSITION];
 
 export const TOOLTIP_ALIGN = {
@@ -43,13 +38,12 @@ type WithoutTriggeElement = {
   triggerAriaLabel: string;
 };
 
-export type TooltipProps = HTMLAttributes<HTMLDivElement> & {
+export type TooltipProps = Omit<BaseProps, "children"> & {
   align?: TooltipAlign;
   buttonSize?: Size;
   children: ReactNode;
   negative?: boolean;
   position?: TooltipPosition;
-  ["data-testid"]?: string;
   triggerAriaLabel?: string;
   triggerElement?: ReactNode;
   contentClassName?: string;
@@ -57,7 +51,7 @@ export type TooltipProps = HTMLAttributes<HTMLDivElement> & {
 
 const rootClassName = "purpur-tooltip";
 
-export const Tooltip = forwardRef(
+export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
   (
     {
       ["data-testid"]: dataTestId,
@@ -71,19 +65,20 @@ export const Tooltip = forwardRef(
       triggerAriaLabel,
       triggerElement,
       ...props
-    }: TooltipProps,
-    ref: ForwardedRef<HTMLButtonElement>
+    },
+    ref
   ) => {
     const [isOpen, setIsOpen] = useState(false);
-    const classes = cx([
+    const classes = cx(
       className,
       rootClassName,
-      `${rootClassName}--primary${negative ? "-negative" : ""}`,
-    ]);
+      `${rootClassName}--primary${negative ? "-negative" : ""}`
+    );
     const tooltipButton = (
       <Button
         ref={ref}
         aria-label={triggerAriaLabel}
+        aria-expanded={isOpen}
         variant={BUTTON_VARIANT.TERTIARY_PURPLE}
         negative={negative}
         iconOnly
@@ -111,11 +106,11 @@ export const Tooltip = forwardRef(
               <RadixTooltip.Content
                 side={position}
                 align={align}
-                className={cx([
+                className={cx(
                   contentClassName,
                   `${rootClassName}__content`,
-                  `${rootClassName}__content--primary${negative ? "-negative" : ""}`,
-                ])}
+                  `${rootClassName}__content--primary${negative ? "-negative" : ""}`
+                )}
                 sideOffset={-5}
                 data-testid={`${dataTestId}-content`}
               >
@@ -131,10 +126,10 @@ export const Tooltip = forwardRef(
                   children
                 )}
                 <RadixTooltip.Arrow
-                  className={cx([
+                  className={cx(
                     `${rootClassName}__arrow`,
-                    `${rootClassName}__arrow--primary${negative ? "-negative" : ""}`,
-                  ])}
+                    `${rootClassName}__arrow--primary${negative ? "-negative" : ""}`
+                  )}
                 />
               </RadixTooltip.Content>
             </RadixTooltip.Portal>