@conveyorhq/arrow-ds 1.165.0 → 1.167.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.165.0",
+  "version": "1.167.0",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/Button/Button.d.ts

@@ -6,7 +6,8 @@ export declare enum BUTTON_VARIANT {
     SECONDARY = "secondary",
     UTILITY = "utility",
     DANGER = "danger",
-    MINIMAL = "minimal"
+    MINIMAL = "minimal",
+    PLAIN = "plain"
 }
 export declare enum BUTTON_SIZE {
     SMALL = "small",

package/public/components/Button/Button.js

@@ -42,6 +42,7 @@ var BUTTON_VARIANT;
     BUTTON_VARIANT["UTILITY"] = "utility";
     BUTTON_VARIANT["DANGER"] = "danger";
     BUTTON_VARIANT["MINIMAL"] = "minimal";
+    BUTTON_VARIANT["PLAIN"] = "plain";
 })(BUTTON_VARIANT || (exports.BUTTON_VARIANT = BUTTON_VARIANT = {}));
 var BUTTON_SIZE;
 (function (BUTTON_SIZE) {
@@ -74,7 +75,7 @@ const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, cl
     const themeContext = (0, react_1.useContext)(contexts_1.ThemeContext);
     const theme = themeProp || themeContext;
     const buttonClassNames = (0, classnames_1.default)((0, bem_1.bem)(cn), (0, bem_1.bem)(cn, { m: variant }), (0, bem_1.bem)(cn, { m: theme }), block && (0, bem_1.bem)(cn, { m: "block" }), getButtonSizeClasses(size, icon, children), depressed && (0, bem_1.bem)(cn, { m: "depressed" }), isDisabled && (0, bem_1.bem)(cn, { m: "disabled" }), className);
-    const iconClassNames = (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "icon" }), children && (0, bem_1.bem)(cn, { e: "icon", m: iconPosition }), isLoading && (0, bem_1.bem)(cn, { e: "icon", m: "invisible" }));
+    const iconClassNames = (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "icon" }), isLoading && (0, bem_1.bem)(cn, { e: "icon", m: "invisible" }));
     const iconProps = icon
         ? {
             icon,
@@ -89,9 +90,12 @@ const Button = (0, react_1.forwardRef)(({ as: Component = "button", children, cl
         type = "button";
     }
     const propsIfLink = Component === Link_1.Link ? { noStyles: true } : {};
+    if (variant === BUTTON_VARIANT.PLAIN) {
+        return (react_1.default.createElement(Component, { type: type, className: className, disabled: disabled, ref: ref, ...rest }, children));
+    }
     return (react_1.default.createElement(Component, { type: type, className: buttonClassNames, disabled: isDisabled, ref: ref, ...propsIfLink, ...rest },
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.LEFT && (react_1.default.createElement(Icon_1.Icon, { ...iconProps })),
-        react_1.default.createElement("span", { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "content" }), isLoading && (0, bem_1.bem)(cn, { e: "content", m: "invisible" })) }, children),
+        children && (react_1.default.createElement("span", { className: (0, classnames_1.default)((0, bem_1.bem)(cn, { e: "content" }), isLoading && (0, bem_1.bem)(cn, { e: "content", m: "invisible" })) }, children)),
         icon && iconProps && iconPosition === BUTTON_ICON_POSITION.RIGHT && (react_1.default.createElement(Icon_1.Icon, { ...iconProps })),
         isLoading && (react_1.default.createElement(Icon_1.Icon, { className: (0, bem_1.bem)(cn, { e: "loader" }), icon: Icon_1.ICON_TYPE.CIRCLE_NOTCH, spin: true }))));
 });

package/public/components/Tooltip/Tooltip.d.ts

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { PopoverTooltipSharedProps } from "../Popover";
 export interface TooltipProps extends PopoverTooltipSharedProps {
-    delay?: number;
+    delay?: number | {
+        show?: number;
+        hide?: number;
+    };
     theme?: "light" | "dark";
     hideArrow?: boolean;
     open?: boolean;
     setOpen?(open: boolean): void;
 }
+type ReferenceRenderFunction = (props: {
+    isOpen: boolean;
+}) => ReactElement;
+export declare const TooltipReference: React.ForwardRefExoticComponent<{
+    children: ReferenceRenderFunction | ReactElement;
+} & React.RefAttributes<HTMLDivElement>>;
 export declare const Tooltip: (props: TooltipProps) => React.JSX.Element;
+export {};

package/public/components/Tooltip/Tooltip.js

@@ -26,17 +26,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.Tooltip = exports.TooltipReference = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const bem_1 = require("../../utilities/bem");
 const hooks_1 = require("../../hooks");
+const Box_1 = require("../Box");
 const Popover_1 = require("../Popover");
 const types_1 = require("../../types");
 const context_1 = require("./context");
+const DEFAULT_DELAY = 200;
 const cn = "Tooltip";
+exports.TooltipReference = react_1.default.forwardRef(({ children, ...props }, ref) => {
+    const { isOpen } = (0, context_1.useTooltipContext)();
+    return (react_1.default.createElement(Box_1.Box, { ref: ref, ...props }, typeof children === "function" ? children({ isOpen }) : children));
+});
 const Tooltip = (props) => {
-    const { isVisible: isVisibleInitial = false, open: isOpenControlled, setOpen: setOpenControlled, children, referenceElement, placement = "bottom", className, delay = 200, theme = "dark", hideArrow, style, ...rest } = props;
+    const { isVisible: isVisibleInitial = false, open: isOpenControlled, setOpen: setOpenControlled, children, referenceElement, placement = "bottom", className, delay, theme = "dark", hideArrow, style, ...rest } = props;
     const [isOpenUncontrolled, setOpenUncontrolled] = (0, react_1.useState)(isVisibleInitial);
     const open = isOpenControlled !== null && isOpenControlled !== void 0 ? isOpenControlled : isOpenUncontrolled;
     const setOpen = setOpenControlled !== null && setOpenControlled !== void 0 ? setOpenControlled : setOpenUncontrolled;
@@ -44,6 +50,24 @@ const Tooltip = (props) => {
     const isHoveringPopoverRef = (0, react_1.useRef)(false);
     const referenceTimoutRef = (0, react_1.useRef)(null);
     const popoverTimoutRef = (0, react_1.useRef)(null);
+    const showDelay = (0, react_1.useMemo)(() => {
+        if (typeof delay === "number") {
+            return delay;
+        }
+        if (typeof delay !== "undefined" && typeof delay.show === "number") {
+            return delay.show;
+        }
+        return DEFAULT_DELAY;
+    }, [delay]);
+    const hideDelay = (0, react_1.useMemo)(() => {
+        if (typeof delay === "number") {
+            return delay;
+        }
+        if (typeof delay !== "undefined" && typeof delay.hide === "number") {
+            return delay.hide;
+        }
+        return DEFAULT_DELAY;
+    }, [delay]);
     (0, react_1.useEffect)(() => {
         if (isVisibleInitial) {
             setOpen(true);
@@ -60,7 +84,7 @@ const Tooltip = (props) => {
         };
     });
     const close = () => {
-        if (!isHoveringPopoverRef.current) {
+        if (!isHoveringPopoverRef.current && !isHoveringReferenceRef.current) {
             setOpen(false);
         }
     };
@@ -71,14 +95,14 @@ const Tooltip = (props) => {
                 if (isHoveringReferenceRef.current) {
                     setOpen(true);
                 }
-            }, delay);
+            }, showDelay);
             referenceTimoutRef.current = referenceTimeout;
         }
     };
     const handleMouseLeave = () => {
         isHoveringReferenceRef.current = false;
         if (open) {
-            const popoverTimeout = setTimeout(close, delay);
+            const popoverTimeout = setTimeout(close, hideDelay);
             popoverTimoutRef.current = popoverTimeout;
         }
     };
@@ -90,7 +114,7 @@ const Tooltip = (props) => {
     const handlePopoverMouseLeave = () => {
         isHoveringPopoverRef.current = false;
         if (open) {
-            const popoverTimeout = setTimeout(close, delay);
+            const popoverTimeout = setTimeout(close, hideDelay);
             popoverTimoutRef.current = popoverTimeout;
         }
     };

package/public/css/styles.css

@@ -2069,19 +2069,13 @@ override built-in Image component classes */
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  -webkit-column-gap: 8px;
+          column-gap: 8px;
   border-width: 1px;
   font-weight: 500;
   transition-duration: 200ms;
 }
 
-.ads-Button-icon--left {
-  margin-right: 8px;
-}
-
-.ads-Button-icon--right {
-  margin-left: 8px;
-}
-
 .ads-Button-icon--invisible {
   visibility: hidden;
 }