@deque/cauldron-react 4.1.0-canary.e368ef0b → 4.1.0-canary.f7123dc9

package/lib/cauldron.css

@@ -34,7 +34,8 @@
   --expandcollapse-panel-color: var(--accent-light);
 }
 
-a.Button--primary {
+a.Button--primary,
+a.Button--secondary {
   text-decoration: none;
   padding: 9px 18px;
 }

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     linkRef?: React.Ref<HTMLAnchorElement>;
-    variant?: 'button';
+    variant?: 'button' | 'button-secondary';
 }
 declare const Link: {
     ({ children, linkRef, className, variant, ...other }: LinkProps): JSX.Element;

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-interface BaseStepProps {
+interface BaseStepProps extends React.LiHTMLAttributes<HTMLLIElement> {
     status: 'current' | 'complete' | 'future';
-    className?: string;
 }
 interface StepWithChildren extends BaseStepProps {
     children: React.ReactNode;

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

@@ -11,7 +11,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }
-declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: showProp, hideElementOnHidden, className, ...props }: TooltipProps): React.ReactPortal | null;
+declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: initialShow, hideElementOnHidden, className, ...props }: TooltipProps): React.ReactPortal | null;
 declare namespace Tooltip {
     var displayName: string;
     var propTypes: {

package/lib/index.js

@@ -1475,15 +1475,14 @@ 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, showProp = _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, _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 _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
-    var hovering = React.useRef(false);
-    var _h = tslib.__read(React.useState(initialPlacement), 2), placement = _h[0], setPlacement = _h[1];
-    var _j = tslib.__read(React.useState(!!showProp), 2), showTooltip = _j[0], setShowTooltip = _j[1];
-    var _k = tslib.__read(React.useState(null), 2), targetElement = _k[0], setTargetElement = _k[1];
-    var _l = tslib.__read(React.useState(null), 2), tooltipElement = _l[0], setTooltipElement = _l[1];
-    var _m = tslib.__read(React.useState(null), 2), arrowElement = _m[0], setArrowElement = _m[1];
-    var _o = reactPopper.usePopper(targetElement, tooltipElement, {
+    var hideTimeoutRef = React.useRef(null);
+    var _h = tslib.__read(React.useState(!!initialShow), 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];
+    var _m = reactPopper.usePopper(targetElement, tooltipElement, {
         placement: initialPlacement,
         modifiers: [
             { name: 'preventOverflow', options: { padding: 8 } },
@@ -1491,11 +1490,17 @@ function Tooltip(_a) {
             { name: 'offset', options: { offset: [0, 8] } },
             { name: 'arrow', options: { padding: 5, element: arrowElement } }
         ]
-    }), styles = _o.styles, attributes = _o.attributes, update = _o.update;
-    var show = function () { return tslib.__awaiter(_this, void 0, void 0, function () {
+    }), styles = _m.styles, attributes = _m.attributes, update = _m.update;
+    // Show the tooltip
+    var show = React.useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
         return tslib.__generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    // Clear the hide timeout if there was one pending
+                    if (hideTimeoutRef.current) {
+                        clearTimeout(hideTimeoutRef.current);
+                        hideTimeoutRef.current = null;
+                    }
                     if (!update) return [3 /*break*/, 2];
                     return [4 /*yield*/, update()];
                 case 1:
@@ -1507,45 +1512,31 @@ function Tooltip(_a) {
                     return [2 /*return*/];
             }
         });
-    }); };
-    var hide = function (_a) {
-        var target = _a.target;
-        if (document.activeElement !== target) {
-            setTimeout(function () {
-                if (!hovering.current) {
-                    setShowTooltip(false);
-                    fireCustomEvent(false, targetElement);
-                }
+    }); }, [
+        targetElement,
+        // update starts off as null
+        update
+    ]);
+    // Hide the tooltip
+    var hide = React.useCallback(function () {
+        if (!hideTimeoutRef.current) {
+            hideTimeoutRef.current = setTimeout(function () {
+                hideTimeoutRef.current = null;
+                setShowTooltip(false);
+                fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
-    };
-    var handleTriggerMouseEnter = function () {
-        hovering.current = true;
-        show();
-    };
-    var handleTriggerMouseLeave = function (e) {
-        hovering.current = false;
-        hide(e);
-    };
-    var handleTipMouseEnter = function () {
-        hovering.current = true;
-    };
-    var handleTipMouseLeave = function (e) {
-        hovering.current = false;
-        hide(e);
-    };
+    }, [targetElement]);
+    // Keep targetElement in sync with target prop
     React.useEffect(function () {
         var targetElement = target && 'current' in target ? target.current : target;
         setTargetElement(targetElement);
     }, [target]);
-    var popperPlacement = (attributes.popper &&
+    // Get popper placement
+    var placement = (attributes.popper &&
         attributes.popper['data-popper-placement']) ||
         initialPlacement;
-    React.useEffect(function () {
-        if (popperPlacement) {
-            setPlacement(popperPlacement);
-        }
-    }, [popperPlacement]);
+    // Only listen to key ups when the tooltip is visible
     React.useEffect(function () {
         var handleEscape = function (event) {
             if (event.key === 'Escape' ||
@@ -1564,31 +1555,30 @@ function Tooltip(_a) {
         return function () {
             targetElement.removeEventListener('keyup', handleEscape);
         };
-    }, [showProp]);
+    }, [showTooltip]);
+    // Handle hover and focus events for the targetElement
     React.useEffect(function () {
-        if (typeof showProp !== undefined) {
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', handleTriggerMouseEnter);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', handleTriggerMouseLeave);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
-        }
+        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, showProp]);
+    }, [targetElement, show, hide]);
+    // Handle hover events for the tooltipElement
     React.useEffect(function () {
-        if (tooltipElement) {
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', handleTipMouseEnter);
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', handleTipMouseLeave);
-        }
+        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', handleTipMouseEnter);
-            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', handleTipMouseLeave);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', show);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', hide);
         };
-    }, [tooltipElement]);
+    }, [tooltipElement, show, hide]);
+    // Keep the target's id in sync
     React.useEffect(function () {
         var attrText = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute(association);
         if (!(attrText === null || attrText === void 0 ? void 0 : attrText.includes(id || ''))) {
@@ -2196,7 +2186,8 @@ var Link = function (_a) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant"]);
     return (React__default.createElement("a", tslib.__assign({ ref: linkRef, className: classNames(className, {
             Link: !variant,
-            'Button--primary': variant === 'button'
+            'Button--primary': variant === 'button',
+            'Button--secondary': variant === 'button-secondary'
         }) }, other), children));
 };
 Link.propTypes = {
@@ -8275,23 +8266,34 @@ var DescriptionDetails = function (_a) {
 DescriptionDetails.displayName = 'DescriptionDetails';
 DescriptionDetails.propTypes = commonPropTypes;
 
-var isTooltip = function (props) {
+var isTooltipProps = function (props) {
     return !!props.tooltip;
 };
 var Step = function (props) {
-    var status = props.status, className = props.className, other = tslib.__rest(props, ["status", "className"]);
-    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--" + status, className), "aria-current": status === 'current' ? 'step' : 'false' }, other),
+    var _a;
+    var children = props.children, status = props.status, className = props.className, other = tslib.__rest(props, ["children", "status", "className"]);
+    var tooltip;
+    var tooltipText;
+    var liProps;
+    var isTooltip = isTooltipProps(other);
+    if (isTooltip) {
+        (_a = other, (tooltip = _a.tooltip, tooltipText = _a.tooltipText, _a), liProps = tslib.__rest(_a, ["tooltip", "tooltipText"]));
+    }
+    else {
+        liProps = other;
+    }
+    return (React__default.createElement("li", tslib.__assign({ className: classNames('Stepper__step', "Stepper__step--" + status, className), "aria-current": status === 'current' ? 'step' : 'false' }, liProps),
         React__default.createElement("div", { className: "Stepper__step-line" }),
-        React__default.createElement("div", { className: "Stepper__step-content" }, isTooltip(props) ? (React__default.createElement(TooltipTabstop, { placement: "bottom", tooltip: props.tooltip, 
+        React__default.createElement("div", { className: "Stepper__step-content" }, isTooltip ? (React__default.createElement(TooltipTabstop, { placement: "bottom", tooltip: tooltip, 
             // the pseudo content (ex: "1") is conveyed
             // by the list item's position in the set of
             // list items, therefore it is safe to clobber
             // it with the contents of the tooltip in the
             // tab stop's accessible name.
-            association: "aria-labelledby", "aria-label": isTooltip(props) ? props.tooltipText : undefined },
+            association: "aria-labelledby", "aria-label": tooltipText },
             React__default.createElement("div", { className: "Stepper__step-indicator" }))) : (React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { className: "Stepper__step-indicator" }),
-            'children' in props && (React__default.createElement("div", { className: "Stepper__step-label" }, props.children)))))));
+            children ? (React__default.createElement("div", { className: "Stepper__step-label" }, children)) : null)))));
 };
 Step.displayName = 'Step';
 Step.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.1.0-canary.e368ef0b",
+  "version": "4.1.0-canary.f7123dc9",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"