@autoguru/overdrive 4.60.0 → 4.61.0

package/dist/components/Button/Button.d.ts

@@ -6,7 +6,7 @@ declare const LOCALE_TEXT_DEFAULT: {
     readonly loading: "loading";
 };
 type LocaleText = Partial<Record<keyof typeof LOCALE_TEXT_DEFAULT, string>>;
-export interface ButtonProps extends Pick<ButtonPrimitive, 'children' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>, StyledButtonProps, TestIdProp {
+export interface ButtonProps extends Pick<ButtonPrimitive, 'children' | 'id' | 'onBlur' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label' | 'aria-controls' | 'aria-describedby' | 'aria-expanded' | 'aria-haspopup'>, StyledButtonProps, TestIdProp {
     /**
      * Disabling the button will prevent it from receiving keyboard focus or click events
      */

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACd,YAAY,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,CAClE,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFAsIlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EASb,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAIhB,KAAK,YAAY,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAM9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,KAAK,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAOhD,QAAA,MAAM,mBAAmB;;CAEf,CAAC;AAEX,KAAK,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,OAAO,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,MAAM,WAAW,WAChB,SAAQ,IAAI,CACV,eAAe,EACb,UAAU,GACV,IAAI,GACJ,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,cAAc,GACd,cAAc,GACd,MAAM,GACN,WAAW,CACb,EACD,IAAI,CACH,cAAc,EACZ,YAAY,GACZ,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,eAAe,CACjB,EACD,iBAAiB,EACjB,UAAU;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACxB;AAcD,eAAO,MAAM,YAAY,GAAI,MAAM,WAAW,CAAC,MAAM,CAAC,uBACnB,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,MAAM,uFAwIlB,CAAC"}

package/dist/components/Button/Button.js

@@ -78,6 +78,7 @@ export const Button = /*#__PURE__*/forwardRef(({
   onMouseLeave,
   'aria-label': ariaLabel,
   'aria-controls': ariaControls,
+  'aria-describedby': ariaDescribedBy,
   'aria-expanded': ariaExpanded,
   'aria-haspopup': ariaHasPopup
 }, ref) => {
@@ -111,6 +112,7 @@ export const Button = /*#__PURE__*/forwardRef(({
     pointerEvents: functionallyDisabled ? 'none' : undefined,
     'aria-label': isLoading ? language.loading : ariaLabel,
     'aria-controls': ariaControls,
+    'aria-describedby': ariaDescribedBy,
     'aria-expanded': ariaExpanded,
     'aria-haspopup': ariaHasPopup,
     'data-loading': isLoading ? '' : undefined,

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,14 +1,12 @@
 import React, { type ReactNode } from 'react';
 import type { TestIdProp } from '../../types';
 import { EAlignment } from '../Positioner/alignment';
-import { type ToolTipSize } from './useTooltip/useTooltip';
-export interface TooltipProps extends TestIdProp {
+import { type PositionedTooltipContentProps, type ToolTipSize } from './useTooltip/useTooltip';
+interface TooltipBaseProps extends TestIdProp {
     /** Size of the tooltip text */
     size?: ToolTipSize;
     /** Whether the tooltip is open. When provided, the tooltip becomes controlled */
     isOpen?: boolean;
-    /** Text content displayed in the tooltip */
-    label: string;
     /** Position of the tooltip relative to the trigger element */
     alignment?: EAlignment;
     /** The element(s) that trigger the tooltip on hover or focus */
@@ -18,6 +16,7 @@ export interface TooltipProps extends TestIdProp {
     /** An HTML tag to wrap the tooltip trigger with if children do not contain a keyboard focusable element */
     wrapper?: boolean | keyof React.JSX.IntrinsicElements;
 }
+export type TooltipProps = TooltipBaseProps & PositionedTooltipContentProps;
 /**
  * Renders a tooltip that appears when the user hovers over or focuses on the trigger element.
  *
@@ -29,7 +28,8 @@ export interface TooltipProps extends TestIdProp {
  * - In controlled mode, its visibility is managed externally via the `isOpen` prop.
  */
 export declare const Tooltip: {
-    ({ alignment, isOpen, label, children, size, closeAfter, testId, wrapper, }: TooltipProps): React.JSX.Element;
+    ({ alignment, content, isOpen, label, children, size, closeAfter, testId, wrapper, }: TooltipProps): React.JSX.Element;
     displayName: string;
 };
+export {};
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEvE,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC/C,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;IACpB,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;CACtD;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO;iFASjB,YAAY;;CAwDd,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAIb,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAEN,KAAK,6BAA6B,EAClC,KAAK,WAAW,EAChB,MAAM,yBAAyB,CAAC;AAEjC,UAAU,gBAAiB,SAAQ,UAAU;IAC5C,+BAA+B;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;IACpB,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,2GAA2G;IAC3G,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;CACtD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,6BAA6B,CAAC;AAE5E;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO;0FAUjB,YAAY;;CAmEd,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -20,6 +20,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  */
 export const Tooltip = ({
   alignment = EAlignment.RIGHT,
+  content,
   isOpen,
   label,
   children,
@@ -36,11 +37,21 @@ export const Tooltip = ({
     isOpen,
     closeAfter
   });
-
-  // return early if no label provided
-  if (!label) return /*#__PURE__*/_jsx(_Fragment, {
-    children: children
-  });
+  !(label === undefined || content === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tooltip accepts either `label` or `content`, not both') : invariant(false) : void 0;
+  let positionedTooltipContent;
+  if (content === undefined) {
+    // Return children unchanged when the text label is empty.
+    if (!label) return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+    positionedTooltipContent = {
+      label
+    };
+  } else {
+    positionedTooltipContent = {
+      content
+    };
+  }
 
   // return wrapped output
   if (wrapper) {
@@ -54,24 +65,22 @@ export const Tooltip = ({
         testid: testId
       })), {}, {
         children: children
-      })), /*#__PURE__*/_jsx(PositionedTooltip, {
+      })), /*#__PURE__*/_jsx(PositionedTooltip, _objectSpread(_objectSpread({}, positionedTooltipContent), {}, {
         alignment: alignment,
         className: styles.root,
-        label: label,
         size: size
-      })]
+      }))]
     });
   }
   !(Children.count(children) === 1 && /*#__PURE__*/isValidElement(Children.only(children))) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Tooltips without a wrapper should have a single React element as a child') : invariant(false) : void 0;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/cloneElement(Children.only(children), _objectSpread(_objectSpread({}, triggerProps), {}, {
       ref: triggerRef
-    })), /*#__PURE__*/_jsx(PositionedTooltip, {
+    })), /*#__PURE__*/_jsx(PositionedTooltip, _objectSpread(_objectSpread({}, positionedTooltipContent), {}, {
       alignment: alignment,
       className: styles.root,
-      label: label,
       size: size
-    })]
+    }))]
   });
 };
 Tooltip.displayName = 'Tooltip';

package/dist/components/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 export { Tooltip, type TooltipProps } from './Tooltip';
-export { useTooltip, type UseTooltipProps, type ToolTipSize, } from './useTooltip/useTooltip';
+export { useTooltip, type PositionedTooltipProps, type UseTooltipProps, type ToolTipSize, } from './useTooltip/useTooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EACN,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,WAAW,GAChB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EACN,UAAU,EACV,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,KAAK,WAAW,GAChB,MAAM,yBAAyB,CAAC"}

package/dist/components/Tooltip/useTooltip/useTooltip.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { EAlignment } from '../../Positioner/alignment';
 export type ToolTipSize = 'medium' | 'large';
 export interface UseTooltipProps {
@@ -15,6 +15,21 @@ export interface UseTooltipProps {
      */
     onOpenChange?: (isOpen: boolean) => void;
 }
+interface PositionedTooltipBaseProps {
+    alignment?: EAlignment;
+    className?: string;
+    size?: ToolTipSize;
+}
+export type PositionedTooltipContentProps = {
+    /** Text rendered with the standard tooltip surface */
+    label: string;
+    content?: never;
+} | {
+    /** Custom tooltip surface and content */
+    content: ReactNode;
+    label?: never;
+};
+export type PositionedTooltipProps = PositionedTooltipBaseProps & PositionedTooltipContentProps;
 /**
  * Hook for managing tooltip state and interactions
  */
@@ -28,11 +43,7 @@ export declare const useTooltip: ({ isOpen: controlledIsOpen, closeAfter, onOpen
         onBlur: () => void;
         'aria-describedby': string | undefined;
     };
-    PositionedTooltip: ({ alignment, className, label, size, }: {
-        alignment?: EAlignment;
-        className?: string;
-        label: string;
-        size?: ToolTipSize;
-    }) => React.JSX.Element;
+    PositionedTooltip: ({ alignment, className, content, label, size, }: PositionedTooltipProps) => React.JSX.Element;
 };
+export {};
 //# sourceMappingURL=useTooltip.d.ts.map

package/dist/components/Tooltip/useTooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../lib/components/Tooltip/useTooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAOD;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,yDAIxB,eAAe;;;;;;;;;;gEAmFb;QACF,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,WAAW,CAAC;KACnB;CAwCF,CAAC"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../lib/components/Tooltip/useTooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACb,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,UAAU,0BAA0B;IACnC,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,6BAA6B,GACtC;IACA,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC;CACf,GACD;IACA,yCAAyC;IACzC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACb,CAAC;AAEL,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAC9D,6BAA6B,CAAC;AAO/B;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,yDAIxB,eAAe;;;;;;;;;;yEAoFb,sBAAsB;CA+C1B,CAAC"}

package/dist/components/Tooltip/useTooltip/useTooltip.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, useId } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { Box } from "../../Box/Box.js";
 import { Positioner } from "../../Positioner/Positioner.js";
 import { EAlignment } from "../../Positioner/alignment.js";
@@ -82,10 +82,12 @@ export const useTooltip = ({
   const PositionedTooltip = useCallback(({
     alignment = EAlignment.RIGHT,
     className,
+    content,
     label,
     size = 'medium'
   }) => {
     const textSize = sizeMap[size];
+    const hasCustomContent = content !== undefined;
     return /*#__PURE__*/_jsx(Positioner, {
       triggerRef: triggerRef,
       alignment: alignment,
@@ -94,17 +96,17 @@ export const useTooltip = ({
         className: className,
         id: tooltipId,
         ref: tooltipRef,
-        width: "full",
+        width: hasCustomContent ? undefined : 'full',
         pointerEvents: "none",
         userSelect: "none",
-        overflow: "hidden",
-        borderRadius: "1",
-        boxShadow: "4",
-        backgroundColor: "gray900",
-        paddingY: "2",
-        paddingX: "3",
+        overflow: hasCustomContent ? undefined : 'hidden',
+        borderRadius: hasCustomContent ? undefined : '1',
+        boxShadow: hasCustomContent ? undefined : '4',
+        backgroundColor: hasCustomContent ? undefined : 'gray900',
+        paddingY: hasCustomContent ? undefined : '2',
+        paddingX: hasCustomContent ? undefined : '3',
         role: "tooltip",
-        children: /*#__PURE__*/_jsx(Text, {
+        children: hasCustomContent ? content : /*#__PURE__*/_jsx(Text, {
           size: textSize,
           color: "white",
           children: label

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.60.0",
+	"version": "4.61.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",