@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/public/components/Table/TableHeaderCell.js

@@ -31,9 +31,21 @@ const bem_1 = require("../../utilities/bem");
 const Icon_1 = require("../Icon");
 const isUndefined_1 = __importDefault(require("../../utilities/isUndefined"));
 const cn = "TableHeaderCell";
-const TableHeaderCell = ({ children, className, id, shrinkToContent = false, sortable = true, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch = false, filterApplied = false, searchInputValue = "", onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding = false, filterControl, style, ...rest }) => {
+const SortIcon = ({ icon, isActive = false, }) => (react_1.default.createElement(Box_1.Box, { as: "span", className: "flex relative" },
+    react_1.default.createElement(Icon_1.Icon, { icon: icon, className: classnames_1.default(bem_1.bem(cn, { e: "sortIcon" }), {
+            isActive,
+        }) }),
+    isActive && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default("absolute top-0 left-0", bem_1.bem(cn, { e: "sortIcon" }), {
+            isActive: false,
+        }), icon: Icon_1.ICON_TYPE.SORT }))));
+const TableHeaderCell = ({ children, className, id, shrinkToContent = false, sortable = true, filterOptions: filterOptionsProp, onSelectAllFilters, onClearFilters, hideFilterSearch = false, filterApplied = false, searchInputValue = "", onSearchInputChange, columnWidth, minColumnWidth, removeVerticalPadding = false, filterControl, align = "left", style, ...rest }) => {
     const [filterDropDownOpen, setFilterDropdownOpen] = react_1.useState(false);
     const filterOptions = filterOptionsProp;
+    const justification = {
+        left: "start",
+        center: "center",
+        right: "end",
+    };
     return (react_1.default.createElement(TableContext_1.default.Consumer, null, ({ handleSort, sortColumnId, sortDirection, renderInModal }) => {
         const classes = classnames_1.default(bem_1.bem(cn), shrinkToContent && bem_1.bem(cn, { m: "shrinkToContent" }), removeVerticalPadding && bem_1.bem(cn, { m: "removeVerticalPadding" }), className);
         const handleSortClick = () => {
@@ -73,15 +85,20 @@ const TableHeaderCell = ({ children, className, id, shrinkToContent = false, sor
         if (minColumnWidth) {
             computedStyle.minWidth = minColumnWidth;
         }
-        return (react_1.default.createElement("th", Object.assign({ className: classes, style: computedStyle }, rest),
-            react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "InnerWrapper" }) },
+        return (react_1.default.createElement("th", Object.assign({ className: classnames_1.default(classes, sortActive && "bg-gray-400", sortable && "cursor-pointer"), style: computedStyle, onClick: () => {
+                if (sortable && !filterOptions) {
+                    handleSortClick();
+                }
+            } }, rest),
+            react_1.default.createElement(Box_1.Box, { className: classnames_1.default([
+                    bem_1.bem(cn, { e: "InnerWrapper" }),
+                    align && `justify-${justification[align]}`,
+                ]) },
                 react_1.default.createElement(Box_1.Box, { className: bem_1.bem(cn, { e: "ChildrenWrapper" }) }, children),
                 (filterOptions || filterControl || sortable) && (react_1.default.createElement(Box_1.Box, { className: classnames_1.default(bem_1.bem(cn, { e: "iconButtonWrapper" })) },
                     (filterOptions || filterControl) && (react_1.default.createElement(FilterDropdown_1.FilterDropdown, { isVisible: filterDropDownOpen, onSetVisible: setFilterDropdownOpen, hideFilterSearch: hideFilterSearch, filterApplied: filterApplied, searchInputValue: searchInputValue, onFilterInputChange: handleFilterInputChange, onFilterSelectAll: handleFilterSelectAll, onFilterClear: handleFilterClear, filterOptions: filterOptions, filterControl: filterControl, className: classnames_1.default(filterControl && "hasControls", renderInModal ? "z-toast" : null) })),
-                    sortable && (react_1.default.createElement(Box_1.Box, { as: "button", className: classnames_1.default(bem_1.bem(cn, { e: "iconButton" })), onClick: handleSortClick },
-                        react_1.default.createElement(Icon_1.Icon, { icon: sortIcon, className: classnames_1.default(bem_1.bem(cn, { e: "sortIcon" }), {
-                                isActive: sortActive,
-                            }) }))))))));
+                    sortable && (react_1.default.createElement(Box_1.Box, { as: filterOptions ? "button" : "div", className: classnames_1.default(bem_1.bem(cn, { e: "iconButton" })), onClick: filterOptions ? handleSortClick : undefined },
+                        react_1.default.createElement(SortIcon, { icon: sortIcon, isActive: sortActive }))))))));
     }));
 };
 exports.default = TableHeaderCell;

package/public/components/Table/index.d.ts

@@ -1 +1,4 @@
 export * from "./Table";
+export type { TableCellProps } from "./TableCell";
+export type { TableHeaderCellProps } from "./TableHeaderCell";
+export type { TableRowProps } from "./TableRow";

package/public/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from "../Box";
-import { ICON_TYPE } from "../Icon";
+import { IconType } from "../Icon";
 export declare enum TAG_VARIANT {
     PRIMARY = "primary",
     SECONDARY = "secondary"
@@ -9,7 +9,7 @@ export interface TagProps extends BoxProps {
     filled?: boolean;
     clickable?: boolean;
     toggleable?: boolean;
-    icon?: ICON_TYPE;
+    icon?: IconType;
 }
 export declare const Tag: {
     ({ variant, clickable, filled, toggleable, icon, as: Component, className, children, ...rest }: TagProps): JSX.Element;

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.d.ts

@@ -1,5 +1,9 @@
-import { PopoverTooltipSharedProps } from "../Popover";
-export interface TooltipProps extends PopoverTooltipSharedProps {
+import React from "react";
+import { PopperPlacement } from "../../types";
+export declare type TooltipProps = {
+    children: React.ReactElement;
+    content?: React.ReactNode;
+    placement?: PopperPlacement;
     delay?: number;
-}
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+};
+export declare const Tooltip: ({ children, content, placement, delay, }: TooltipProps) => JSX.Element;

package/public/components/Tooltip/Tooltip.js

@@ -1,80 +1,110 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = 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 Popover_1 = require("../Popover");
+const react_1 = __importDefault(require("react"));
+const Overlay_1 = __importDefault(require("react-overlays/Overlay"));
+const auto_id_1 = require("@reach/auto-id");
 const types_1 = require("../../types");
-const cn = "Tooltip";
-const Tooltip = (props) => {
-    const { isVisible: isVisibleProp = false, children, referenceElement, placement = "bottom", className, delay = 200, style, ...rest } = props;
-    const { isOpen, onOpen, onClose } = hooks_1.useDisclosure(isVisibleProp);
-    const isHoveringReferenceRef = react_1.useRef(false);
-    const isHoveringPopoverRef = react_1.useRef(false);
-    const referenceTimoutRef = react_1.useRef(null);
-    const popoverTimoutRef = react_1.useRef(null);
-    react_1.useEffect(() => {
-        if (isVisibleProp) {
-            onOpen();
+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: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
         }
-    }, [isVisibleProp, onOpen]);
-    react_1.useEffect(() => {
-        return () => {
-            if (referenceTimoutRef.current) {
-                clearTimeout(referenceTimoutRef.current);
-            }
-            if (popoverTimoutRef.current) {
-                clearTimeout(popoverTimoutRef.current);
-            }
-        };
-    });
-    const close = () => {
+        if (placement.startsWith("right")) {
+            return { left: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
+        }
+        if (placement.startsWith("bottom")) {
+            return { top: `-${tokens_1.tokens.spacing[1]}`, left: 0 };
+        }
+        if (placement.startsWith("left")) {
+            return { right: `-${tokens_1.tokens.spacing[1]}`, top: 0 };
+        }
+        return {};
+    };
+    const positionStyles = generatePositionStyles();
+    return (react_1.default.createElement(Box_1.Box, { ref: forwaredRef, className: cn({ e: "arrow" }), style: {
+            ...style,
+            ...positionStyles,
+        } },
+        react_1.default.createElement(Box_1.Box, null)));
+});
+const Tooltip = ({ children, content, placement = "auto", delay = 200, }) => {
+    const { isOpen, onOpen, onClose } = hooks_1.useDisclosure();
+    const triggerRef = react_1.default.useRef(null);
+    const rootRef = react_1.default.useRef(null);
+    const id = `ads-tooltip-${auto_id_1.useId()}`;
+    const isHoveringTriggerRef = react_1.default.useRef(false);
+    const isHoveringPopoverRef = react_1.default.useRef(false);
+    const triggerTimoutRef = react_1.default.useRef(null);
+    const popoverTimoutRef = react_1.default.useRef(null);
+    const onHide = () => {
         if (!isHoveringPopoverRef.current) {
             onClose();
         }
     };
-    const handleMouseEnter = () => {
-        isHoveringReferenceRef.current = true;
+    const onHideDelay = () => {
+        isHoveringTriggerRef.current = false;
+        isHoveringPopoverRef.current = false;
+        if (isOpen) {
+            const popoverTimeout = setTimeout(onHide, delay);
+            popoverTimoutRef.current = popoverTimeout;
+        }
+    };
+    const onShow = () => {
+        if (!isOpen) {
+            onOpen();
+        }
+    };
+    const onShowDelay = () => {
+        isHoveringTriggerRef.current = true;
+        isHoveringPopoverRef.current = true;
         if (!isOpen) {
             const referenceTimeout = setTimeout(() => {
-                if (isHoveringReferenceRef.current) {
+                if (isHoveringTriggerRef.current) {
                     onOpen();
                 }
             }, delay);
-            referenceTimoutRef.current = referenceTimeout;
+            triggerTimoutRef.current = referenceTimeout;
         }
     };
-    const handleMouseLeave = () => {
-        isHoveringReferenceRef.current = false;
+    react_1.default.useEffect(() => {
+        return () => {
+            if (triggerTimoutRef.current) {
+                clearTimeout(triggerTimoutRef.current);
+            }
+            if (popoverTimoutRef.current) {
+                clearTimeout(popoverTimoutRef.current);
+            }
+        };
+    });
+    hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
         if (isOpen) {
-            const popoverTimeout = setTimeout(close, delay);
-            popoverTimoutRef.current = popoverTimeout;
+            onHide();
         }
-    };
+    });
+    const triggerProps = ({ onMouseEnter, onMouseLeave, onMouseDown, onFocus, onBlur, onKeyDown, ...rest }) => ({
+        ref: triggerRef,
+        "aria-describedby": isOpen ? id : undefined,
+        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;
@@ -83,24 +113,18 @@ const Tooltip = (props) => {
     const handlePopoverMouseLeave = () => {
         isHoveringPopoverRef.current = false;
         if (isOpen) {
-            const popoverTimeout = setTimeout(close, delay);
+            const popoverTimeout = setTimeout(onHide, delay);
             popoverTimoutRef.current = popoverTimeout;
         }
     };
-    hooks_1.useKeyPress(types_1.KEY_CODE.ESC, () => {
-        if (isOpen && !isVisibleProp) {
-            close();
-        }
-    });
-    const referenceElementWithMouseHandlers = !isVisibleProp
-        ? react_1.cloneElement(referenceElement, {
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onFocus: handleMouseEnter,
-            onBlur: handleMouseLeave,
-            tabIndex: 0,
-        })
-        : referenceElement;
-    return (react_1.default.createElement(Popover_1.Popover, Object.assign({ showArrow: true, isVisible: isOpen, referenceElement: referenceElementWithMouseHandlers, placement: placement, className: classnames_1.default(bem_1.bem(cn), className), onMouseEnter: !isVisibleProp ? handlePopoverMouseEnter : undefined, onMouseLeave: !isVisibleProp ? handlePopoverMouseLeave : undefined, style: style }, rest), children));
+    return content ? (react_1.default.createElement(Box_1.Box, { ref: rootRef },
+        react_1.default.cloneElement(react_1.default.Children.only(children), {
+            ...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: 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/Tooltip/context.d.ts

@@ -0,0 +1,7 @@
+import { Context } from "react";
+declare type TooltipContextType = {
+    isOpen: boolean;
+};
+export declare const TooltipContext: Context<TooltipContextType>;
+export declare function useTooltipContext(): TooltipContextType;
+export {};

package/public/components/Tooltip/context.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTooltipContext = exports.TooltipContext = void 0;
+const react_1 = require("react");
+const defaultTooltipContext = {
+    isOpen: false,
+};
+exports.TooltipContext = react_1.createContext(defaultTooltipContext);
+function useTooltipContext() {
+    const context = react_1.useContext(exports.TooltipContext) || {
+        ...defaultTooltipContext,
+    };
+    return context;
+}
+exports.useTooltipContext = useTooltipContext;

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

@@ -1 +1,2 @@
 export * from "./Tooltip";
+export * from "./context";

package/public/components/Tooltip/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Tooltip"), exports);
+__exportStar(require("./context"), exports);

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))));