@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

package/public/components/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 import { STATUS_VARIANT } from "../../types";
-import { ArrowLinkProps } from "../ArrowLink";
+import { LinkProps } from "../Link";
 declare type ToastPosition = "top-right";
 export interface ToastProps extends BoxProps {
     title: string;
@@ -22,11 +22,11 @@ export interface ShowToastProps {
     className?: string;
     variant?: STATUS_VARIANT;
 }
-export declare const ToastLink: ({ children, className, ...rest }: ArrowLinkProps) => JSX.Element;
+export declare const ToastLink: ({ className, children, ...rest }: LinkProps) => JSX.Element;
 export declare const ToastMessage: ({ children, withIcon, className, }: ToastMessageProps) => JSX.Element;
 export declare const Toast: {
     (props: ToastProps): JSX.Element;
-    Link: ({ children, className, ...rest }: ArrowLinkProps) => JSX.Element;
+    Link: ({ className, children, ...rest }: LinkProps) => JSX.Element;
     Message: ({ children, withIcon, className, }: ToastMessageProps) => JSX.Element;
 };
 export declare const showToast: ({ position, duration, variant, title, content, className, ...rest }: ShowToastProps) => any;

package/public/components/Toast/Toast.js

@@ -33,9 +33,13 @@ const Icon_1 = require("../Icon");
 const bem_1 = require("../../utilities/bem");
 const types_1 = require("../../types");
 const status_1 = require("../../contexts/status");
-const ArrowLink_1 = require("../ArrowLink");
+const Link_1 = require("../Link");
 const cn = "Toast";
-const ToastLink = ({ children, className, ...rest }) => (react_1.default.createElement(ArrowLink_1.ArrowLink, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "link" }), className) }, rest), children));
+const ToastLink = ({ className, children, ...rest }) => {
+    return (react_1.default.createElement(Link_1.Link, Object.assign({ className: classnames_1.default(bem_1.bem(cn, { e: "link" }), className), noStyles: true }, rest),
+        react_1.default.createElement("span", { className: "mr-1" }, children),
+        react_1.default.createElement(Icon_1.Icon, { icon: Icon_1.ICON_TYPE.LONG_ARROW_ALT_RIGHT })));
+};
 exports.ToastLink = ToastLink;
 const ToastMessage = ({ children, withIcon, className, }) => {
     const variant = react_1.useContext(status_1.StatusContext);

package/public/components/Tooltip/Tooltip.js

@@ -5,36 +5,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const Overlay_1 = __importDefault(require("react-overlays/Overlay"));
 const auto_id_1 = require("@reach/auto-id");
 const types_1 = require("../../types");
 const hooks_1 = require("../../hooks");
+const utilities_1 = require("../../utilities");
+const tokens_1 = require("../../style-dictionary/dist/tokens");
 const Box_1 = require("../Box");
+const cn = utilities_1.bemHOF("Tooltip");
 const TooltipArrow = react_1.default.forwardRef(({ placement, style }, forwaredRef) => {
     const generatePositionStyles = () => {
         if (placement.startsWith("top")) {
-            return { bottom: "-4px", left: 0 };
+            return { bottom: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
         }
         if (placement.startsWith("right")) {
-            return { left: "-4px", top: 0 };
+            return { left: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
         }
         if (placement.startsWith("bottom")) {
-            return { top: "-4px", left: 0 };
+            return { top: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
         }
         if (placement.startsWith("left")) {
-            return { right: "-4px", top: 0 };
+            return { right: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
         }
         return {};
     };
     const positionStyles = generatePositionStyles();
-    return (react_1.default.createElement(Box_1.Box, { ref: forwaredRef, className: "absolute w-2 h-2 z-below", style: {
+    return (react_1.default.createElement(Box_1.Box, { ref: forwaredRef, className: cn({ e: "arrow" }), style: {
             ...style,
             ...positionStyles,
         } },
-        react_1.default.createElement(Box_1.Box, { className: "absolute w-2 h-2 top-0 left-0 bg-gray-900", style: {
-                transform: "rotate(45deg)",
-            } })));
+        react_1.default.createElement(Box_1.Box, null)));
 });
 const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
     const { isOpen, onOpen, onClose } = hooks_1.useDisclosure();
@@ -90,20 +90,21 @@ const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
             onHide();
         }
     });
-    const triggerProps = {
+    const triggerProps = ({ onMouseEnter, onMouseLeave, onMouseDown, onFocus, onBlur, onKeyDown, ...rest }) => ({
         ref: triggerRef,
         "aria-describedby": isOpen ? id : undefined,
-        onMouseEnter: onShowDelay,
-        onMouseLeave: onHideDelay,
-        onMouseDown: onHideDelay,
-        onFocus: onShow,
-        onBlur: onHide,
-        onKeyDown: (event) => {
-            if (isOpen && (event.key === "Enter" || event.key === " ")) {
+        onMouseEnter: utilities_1.mergeEventHandlers(onMouseEnter, onShowDelay),
+        onMouseLeave: utilities_1.mergeEventHandlers(onMouseLeave, onHideDelay),
+        onMouseDown: utilities_1.mergeEventHandlers(onMouseDown, onHideDelay),
+        onFocus: utilities_1.mergeEventHandlers(onFocus, onShow),
+        onBlur: utilities_1.mergeEventHandlers(onBlur, onHide),
+        onKeyDown: utilities_1.mergeEventHandlers(onKeyDown, (event) => {
+            if (event.key === "Enter" || event.key === " ") {
                 onHide();
             }
-        },
-    };
+        }),
+        ...rest,
+    });
     const handlePopoverMouseEnter = () => {
         if (!isHoveringPopoverRef.current) {
             isHoveringPopoverRef.current = true;
@@ -116,22 +117,14 @@ const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
             popoverTimoutRef.current = popoverTimeout;
         }
     };
-    return (react_1.default.createElement(Box_1.Box, { ref: rootRef },
+    return content ? (react_1.default.createElement(Box_1.Box, { ref: rootRef },
         react_1.default.cloneElement(react_1.default.Children.only(children), {
-            ...triggerProps,
-            ...children.props,
+            ...triggerProps(children.props),
         }),
         content && (react_1.default.createElement(Overlay_1.default, { rootClose: true, show: isOpen, offset: [0, 8], onHide: onHide, container: rootRef, target: triggerRef, placement: placement, flip: placement && placement.indexOf("auto") !== -1 }, ({ props: contentProps, arrowProps, placement: overlayPlacement, }) => {
-            return (react_1.default.createElement(Box_1.Box, Object.assign({ id: id, className: classnames_1.default([
-                    "bg-gray-900 text-white",
-                    "text-bodySm leading-normal",
-                    "inline-flex items-center",
-                    "rounded shadow-popover",
-                    "px-3 py-2",
-                    "relative z-popup",
-                ]), onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave }, contentProps),
+            return (react_1.default.createElement(Box_1.Box, Object.assign({ id: id, className: cn(), "data-component": "tooltip", onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave }, contentProps),
                 react_1.default.createElement(TooltipArrow, { ref: arrowProps.ref, placement: overlayPlacement, style: arrowProps.style }),
                 content));
-        }))));
+        })))) : (children);
 };
 exports.Tooltip = Tooltip;

package/public/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { BoxProps } from "../Box";
-export declare const VisuallyHidden: (props: BoxProps) => JSX.Element;
+export declare const VisuallyHidden: React.FunctionComponent<BoxProps>;

package/public/components/VisuallyHidden/VisuallyHidden.js

@@ -7,8 +7,6 @@ exports.VisuallyHidden = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Box_1 = require("../Box");
-const VisuallyHidden = (props) => {
-    const { className, ...rest } = props;
-    return react_1.default.createElement(Box_1.Box, Object.assign({}, rest, { className: classnames_1.default("visually-hidden", className) }));
-};
-exports.VisuallyHidden = VisuallyHidden;
+const utilities_1 = require("../../utilities");
+const cn = utilities_1.bemHOF("VisuallyHidden");
+exports.VisuallyHidden = react_1.default.forwardRef(({ className, ...rest }, forwardedRef) => (react_1.default.createElement(Box_1.Box, Object.assign({ ref: forwardedRef, className: classnames_1.default(cn(), className) }, rest))));