@deque/cauldron-react 6.4.2-canary.d63c6c5f → 6.4.2-canary.f1f01638

package/lib/cauldron.css

@@ -42,11 +42,10 @@
 a.Button--primary,
 a.Button--secondary {
   text-decoration: none;
-  padding: 9px 18px;
 }
 
 a.Button--thin {
-  padding: 0 16px;
+  padding: 0 var(--space-small);
 }
 
 .Icon {

package/lib/components/Button/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes, Ref } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     buttonRef?: Ref<HTMLButtonElement>;
-    variant?: 'primary' | 'secondary' | 'error' | 'link' | 'tag';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag';
     thin?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/IconButton/index.d.ts

@@ -19,7 +19,7 @@ export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<H
      * @deprecated use `tooltipProps.portal` instead
      */
     tooltipPortal?: TooltipProps['portal'];
-    variant?: 'primary' | 'secondary' | 'error';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error';
     large?: boolean;
 }
 declare const IconButton: PolymorphicComponent<IconButtonProps>;

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

@@ -7,11 +7,12 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'text' | 'info' | 'big';
     association?: 'aria-labelledby' | 'aria-describedby' | 'none';
     show?: boolean | undefined;
+    defaultShow?: boolean;
     placement?: Placement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }
-declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: initialShow, hideElementOnHidden, className, ...props }: TooltipProps): JSX.Element;
+declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: showProp, defaultShow, hideElementOnHidden, className, ...props }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/lib/index.js

@@ -1594,6 +1594,7 @@ var Button = React.forwardRef(function (_a, ref) {
             'Button--primary': variant === 'primary',
             'Button--secondary': variant === 'secondary',
             'Button--error': variant === 'error',
+            'Button--tertiary': variant === 'tertiary',
             Link: variant === 'link',
             Tag: variant === 'tag',
             'Button--tag': variant === 'tag',
@@ -1653,10 +1654,10 @@ var fireCustomEvent = function (show, button) {
 };
 function Tooltip(_a) {
     var _this = this;
-    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, _e = _a.show, initialShow = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "hideElementOnHidden", "className"]);
+    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, showProp = _a.show, _e = _a.defaultShow, defaultShow = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "defaultShow", "hideElementOnHidden", "className"]);
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
     var hideTimeoutRef = React.useRef(null);
-    var _h = tslib.__read(React.useState(!!initialShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
+    var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
     var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
     var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
     var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
@@ -1708,12 +1709,20 @@ function Tooltip(_a) {
                 fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
+        return function () {
+            clearTimeout(hideTimeoutRef.current);
+        };
     }, [targetElement]);
     // Keep targetElement in sync with target prop
     React.useEffect(function () {
         var targetElement = target && 'current' in target ? target.current : target;
         setTargetElement(targetElement);
     }, [target]);
+    React.useEffect(function () {
+        if (typeof showProp === 'boolean') {
+            setShowTooltip(showProp);
+        }
+    }, [showProp]);
     // Get popper placement
     var placement = (attributes.popper &&
         attributes.popper['data-popper-placement']) ||
@@ -1728,7 +1737,7 @@ function Tooltip(_a) {
             }
         };
         var targetElement = document.body;
-        if (showTooltip) {
+        if (showTooltip && typeof showProp !== 'boolean') {
             targetElement.addEventListener('keyup', handleEscape, { capture: true });
         }
         else {
@@ -1741,29 +1750,33 @@ function Tooltip(_a) {
                 capture: true
             });
         };
-    }, [showTooltip]);
+    }, [showTooltip, showProp]);
     // Handle hover and focus events for the targetElement
     React.useEffect(function () {
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
+        if (typeof showProp !== 'boolean') {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
+        }
         return function () {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseenter', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseleave', hide);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
         };
-    }, [targetElement, show, hide]);
+    }, [targetElement, show, hide, showProp]);
     // Handle hover events for the tooltipElement
     React.useEffect(function () {
-        tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', show);
-        tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', hide);
+        if (typeof showProp !== 'boolean') {
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', show);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', hide);
+        }
         return function () {
             tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', show);
             tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', hide);
         };
-    }, [tooltipElement, show, hide]);
+    }, [tooltipElement, show, hide, showProp]);
     // Keep the target's id in sync
     React.useEffect(function () {
         if (hasAriaAssociation) {
@@ -1839,6 +1852,7 @@ var IconButton = React.forwardRef(function (_a, ref) {
                 IconButton: true,
                 'IconButton--primary': variant === 'primary',
                 'IconButton--secondary': variant === 'secondary',
+                'IconButton--tertiary': variant === 'tertiary',
                 'IconButton--error': variant === 'error',
                 'IconButton--large': large
             }), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.4.2-canary.d63c6c5f",
+  "version": "6.4.2-canary.f1f01638",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",