@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/pillExpandable/getProps.js

@@ -0,0 +1,8 @@
+export const getButtonMoreProps = (viewMore) => {
+    const isFunction = typeof viewMore === "function";
+    const isString = typeof viewMore === "string";
+    return {
+        link: isString ? viewMore : undefined,
+        onClick: isFunction ? viewMore : undefined
+    };
+};

package/esm/pillExpandable/pillContent.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { IPillExpandableAction } from "./pillExpandable";
+import { TLazyContent } from "../skeleton/lazyContent";
+interface IPillContent {
+    date?: TLazyContent<string>;
+    count?: TLazyContent<number>;
+    descriptionText?: TLazyContent<ReactNode>;
+    mainAction?: TLazyContent<IPillExpandableAction>;
+    secondaryAction?: TLazyContent<IPillExpandableAction>;
+    onActionClick: () => void;
+    isVisible?: boolean;
+    errorHandler: (err: any) => ReactNode | undefined;
+}
+export declare const PillContent: React.FC<IPillContent>;
+export {};

package/esm/pillExpandable/pillContent.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Button } from "../button/button";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { LazyContent } from "../skeleton/lazyContent";
+export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler }) => {
+    const headerDriveClassName = useDriveClassName("zen-status-pill-popup__header-text");
+    const descriptionDriveClassName = useDriveClassName("zen-status-pill-popup__description");
+    const mainActionClick = useCallback((onClick) => () => {
+        onClick && onClick();
+        onActionClick();
+    }, [onActionClick]);
+    const secondaryActionClick = useCallback((onClick) => () => {
+        onClick && onClick();
+        onActionClick();
+    }, [onActionClick]);
+    const renderMainButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? mainActionClick(data.onClick) : undefined, type: "primary", children: data.text })), [mainActionClick]);
+    const renderSecondaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? secondaryActionClick(data.onClick) : undefined, type: "tertiary", children: data.text })), [secondaryActionClick]);
+    const renderDescription = useCallback(data => _jsx("div", { className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName]);
+    const renderCount = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
+    const renderDate = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
+    return _jsxs(_Fragment, { children: [(date || count) && isVisible && _jsxs("div", { className: "zen-status-pill-popup__content-header", children: [date && _jsx(LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && _jsx(LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&
+                _jsx(LazyContent, { width: 200, type: "text", content: descriptionText, isVisible: isVisible, errorHandler: errorHandler, render: renderDescription }), (mainAction || secondaryAction) && isVisible && _jsxs("div", { className: "zen-status-pill-popup__actions", children: [mainAction && _jsx(LazyContent, { type: "button", content: mainAction, errorHandler: errorHandler, render: renderMainButton, isVisible: isVisible }), secondaryAction && _jsx(LazyContent, { type: "button", content: secondaryAction, errorHandler: errorHandler, render: renderSecondaryButton, isVisible: isVisible })] })] });
+};

package/esm/pillExpandable/pillExpandable.d.ts

@@ -0,0 +1,53 @@
+import "./pillExpandable.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import React, { FC, ReactNode } from "react";
+import { TViewMoreButton } from "./getProps";
+import { IIcon } from "../icons/icon";
+import { TLazyContent } from "../skeleton/lazyContent";
+export interface ILinkOptions {
+    target?: React.HTMLAttributeAnchorTarget;
+    rel?: string;
+}
+export interface IPillExpandableAction {
+    text: string;
+    onClick?: () => void;
+    link?: string;
+    linkOptions?: ILinkOptions;
+}
+export interface IBaseData {
+    description?: TLazyContent<ReactNode>;
+    date?: TLazyContent<string>;
+    count?: TLazyContent<number>;
+    mainAction?: TLazyContent<IPillExpandableAction>;
+    secondaryAction?: TLazyContent<IPillExpandableAction>;
+    getData?: undefined;
+}
+export interface IPromisedBaseData {
+    getData: () => Promise<IBaseData>;
+    description?: undefined;
+    date?: undefined;
+    count?: undefined;
+    mainAction?: undefined;
+    secondaryAction?: undefined;
+}
+type TProps = IBaseData | IPromisedBaseData;
+export interface IPillExpandable extends IZenComponentProps {
+    uniquePills?: number;
+    text: string;
+    type?: "error" | "success" | "warning" | "info" | "default";
+    viewMoreAction?: TViewMoreButton;
+    className?: string;
+    popupClassName?: string;
+    icon?: FC<IIcon> | false;
+    secondaryIcon?: FC<IIcon> | false;
+    isFlat?: boolean;
+    isLoading?: boolean;
+    errorHandler?: (e: any) => ReactNode;
+    loadingWidth?: number;
+    isBeta?: boolean;
+    hideCounterNumber?: boolean;
+}
+type TPillExpandable = IPillExpandable & TProps;
+export declare const PillExpandable: React.NamedExoticComponent<TPillExpandable>;
+export declare const TRANSLATIONS: string[];
+export {};

package/esm/pillExpandable/pillExpandable.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Absolute } from "../absolute/absolute";
+import { Button } from "../button/button";
+import { PillContent } from "./pillContent";
+import { PillExpandableSimple } from "./pillExpandableSimple";
+import { alignments } from "./pillExpandableAlignments";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { getButtonMoreProps } from "./getProps";
+import { Skeleton } from "../skeleton/skeleton";
+import { isFunction } from "../commonHelpers/reactHelpers/reactHelpers";
+const MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
+const PillContext = createContext({
+    level: 0,
+    onPillExpand: () => { },
+    expandId: undefined
+});
+const paddingX = 26;
+const paddingY = 52;
+const getDefaultContent = ({ description, date, count, secondaryAction, mainAction, getData }) => {
+    if (getData) {
+        return {
+            description: {
+                isLoading: true,
+                data: ""
+            },
+            date: {
+                isLoading: true,
+                data: ""
+            },
+            count: {
+                isLoading: true,
+                data: 0
+            },
+            secondaryAction: {
+                isLoading: true,
+                data: {
+                    text: ""
+                }
+            },
+            mainAction: {
+                isLoading: true,
+                data: {
+                    text: ""
+                }
+            },
+            getData
+        };
+    }
+    return {
+        description,
+        date,
+        count,
+        secondaryAction,
+        mainAction,
+        getData: undefined
+    };
+};
+const getValue = (parameter, setContent, paramName, errorHandler) => {
+    if (parameter instanceof Function) {
+        parameter()
+            .then((result) => {
+            setContent((prevValue) => (Object.assign(Object.assign({}, prevValue), { [paramName]: result })));
+        })
+            .catch((e) => {
+            errorHandler && errorHandler(e);
+        });
+    }
+};
+const PillExpandableBase = ({ children, errorHandler, getData, text, description, date, count, mainAction, secondaryAction, viewMoreAction, uniquePills, type, className, popupClassName, isLoading, isFlat, icon, secondaryIcon, isBeta, loadingWidth = 200, hideCounterNumber }) => {
+    const popupId = useId();
+    const pillId = useId();
+    const { translate } = useLanguage();
+    const [content, setContent] = useState(getDefaultContent({
+        description,
+        date,
+        count,
+        secondaryAction,
+        mainAction,
+        getData
+    }));
+    const [isOpen, setIsOpen] = useState(false);
+    const [isPopupContentReady, setIsPopupContentReady] = useState(false);
+    const [containerNode, setContainerNode] = useState(null);
+    useEffect(() => {
+        if (!isOpen) {
+            setIsPopupContentReady(false);
+            return;
+        }
+        if (!containerNode || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            if (containerNode.offsetHeight > 0) {
+                setIsPopupContentReady(true);
+            }
+        });
+        observer.observe(containerNode);
+        // eslint-disable-next-line consistent-return
+        return () => {
+            observer.unobserve(containerNode);
+        };
+    }, [isOpen, containerNode]);
+    useEffect(() => {
+        const fetchData = function () {
+            if (!isOpen) {
+                return;
+            }
+            if (isFunction(getData)) {
+                getData().then(result => {
+                    setContent(result);
+                }).catch(e => {
+                    errorHandler && errorHandler(e);
+                });
+            }
+        };
+        fetchData();
+    }, [getData, isOpen, errorHandler]);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        getValue(description, setContent, "description", errorHandler);
+        getValue(date, setContent, "date", errorHandler);
+        getValue(count, setContent, "count", errorHandler);
+        getValue(secondaryAction, setContent, "secondaryAction", errorHandler);
+        getValue(mainAction, setContent, "mainAction", errorHandler);
+    }, [content, isOpen, description, date, count, secondaryAction, mainAction, errorHandler]);
+    const { level, expandId, onPillExpand } = useContext(PillContext);
+    const triggerRef = useRef(null);
+    const isChild = level !== 0;
+    const [currentExpand, setCurrentExpand] = useState(undefined);
+    const onExpandHandler = useCallback(() => {
+        var _a;
+        setIsOpen(!isOpen);
+        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+        onPillExpand(pillId === expandId ? "" : pillId);
+    }, [isOpen, onPillExpand, pillId, expandId]);
+    const onChange = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
+    const buttonMoreProps = useMemo(() => getButtonMoreProps(viewMoreAction), [viewMoreAction]);
+    const validChildren = useMemo(() => Children.toArray(children).filter(child => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "PillExpandable"; }), [children]);
+    const childToDisplay = useMemo(() => validChildren.slice(0, MAX_PILLS_TO_DISPLAY_IN_POPUP), [validChildren]);
+    const childCount = useMemo(() => validChildren.length, [validChildren]);
+    const flatVsChildCounter = isFlat ? `${childCount + 1}` : `${childCount}`;
+    const moreCounter = uniquePills ? `${uniquePills}` : flatVsChildCounter;
+    const uniqueChilds = uniquePills ? `${uniquePills}` : `${childCount || ""}`;
+    if (isLoading) {
+        return _jsx(Skeleton, { type: "pill", width: loadingWidth });
+    }
+    if (isChild) {
+        return _jsxs(PillContext.Provider, { value: { level: level + 1, onPillExpand: setCurrentExpand, expandId: currentExpand }, children: [_jsx(PillExpandableSimple, { icon: icon, text: text, expanded: expandId === pillId, onExpand: onExpandHandler, expandAriaText: translate("Expand"), type: type, errorHandler: errorHandler }), _jsx(PillContent, { onActionClick: onExpandHandler, descriptionText: content.description, date: content.date, count: content.count, mainAction: content.mainAction, secondaryAction: content.secondaryAction, isVisible: expandId === pillId, errorHandler: errorHandler })] });
+    }
+    return _jsx(PillContext.Provider, { value: { level: level + 1, onPillExpand: setCurrentExpand, expandId: currentExpand }, children: _jsxs("div", { className: classNames(["zen-status-pill", className || ""]), "aria-haspopup": "true", children: [_jsxs("div", { className: "zen-status-pill__pill-container", children: [_jsx(PillExpandableSimple, { icon: icon, text: text, expanded: isOpen, onExpand: onExpandHandler, expandAriaText: translate("Expand"), ref: triggerRef, type: type, errorHandler: errorHandler, isBeta: isBeta }), uniqueChilds && _jsx(PillExpandableSimple, { icon: secondaryIcon || icon, text: hideCounterNumber ? "" : `${isFlat ? "+" : ""}${uniqueChilds}`, onExpand: onExpandHandler, includeExpandIcon: false, type: type, errorHandler: errorHandler })] }), _jsx(Absolute, { recalculateTrigger: isPopupContentReady, recalculateOnScroll: true, useTrapFocusWithTrigger: "on", className: popupClassName, id: popupId, onOpenChange: onChange, paddingX: paddingX, paddingY: paddingY, isOpen: isOpen, triggerRef: triggerRef, alignmentsFn: alignments, children: _jsx("div", { ref: (node) => setContainerNode(node), className: "zen-status-pill-popup", children: _jsxs("div", { className: "zen-status-pill-popup__container", children: [_jsx("div", { className: "zen-status-pill-popup__main-pill", children: _jsx(PillExpandableSimple, { icon: icon, text: text, expanded: true, onExpand: onExpandHandler, expandAriaText: translate("Expand"), type: type, errorHandler: errorHandler, isBeta: isBeta }) }), _jsx(PillContent, { onActionClick: onExpandHandler, descriptionText: content.description, date: content.date, count: content.count, mainAction: content.mainAction, secondaryAction: content.secondaryAction, errorHandler: errorHandler }), childToDisplay, moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP && _jsxs(_Fragment, { children: [_jsx("div", { className: "zen-status-pill-popup__divider" }), _jsxs(Button, Object.assign({}, buttonMoreProps, { type: "tertiary", children: [translate("View all"), " (", moreCounter, ")"] }))] })] }) }) })] }) });
+};
+export const PillExpandable = memo(PillExpandableBase);
+PillExpandable.displayName = "PillExpandable";
+export const TRANSLATIONS = [
+    "Expand",
+    "View all"
+];

package/esm/pillExpandable/pillExpandableAlignments.d.ts

@@ -0,0 +1,51 @@
+import { IPosition, IRect, ISizes } from "../utils/positioningUtils/alignments";
+export declare const alignments: {
+    top: (triggerRect: IRect, popupRect: ISizes, parentRect: IPosition, _: number, paddingY: number) => {
+        top: number;
+        left: number;
+    };
+    "top-left": (triggerRect: IRect, popupRect: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        top: number;
+        left: number;
+    };
+    "top-right": (triggerRect: IRect, popupRect: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        top: number;
+        right: number;
+    };
+    bottom: (triggerRect: IRect, popupRect: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        top: number;
+        left: number;
+    };
+    "bottom-left": (triggerRect: IRect, _1: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        top: number;
+        left: number;
+    };
+    "bottom-right": (triggerRect: IRect, _1: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        top: number;
+        right: number;
+    };
+    left: (triggerRect: IRect, popupRect: ISizes, parentRect: IPosition, paddingX: number, _: number) => {
+        right: number;
+        top: number;
+    };
+    "left-top": (triggerRect: IRect, _1: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        right: number;
+        top: number;
+    };
+    "left-bottom": (triggerRect: IRect, _1: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        right: number;
+        top: number;
+    };
+    right: (triggerRect: IRect, popupRect: ISizes, parentRect: IPosition, paddingX: number, _: number) => {
+        left: number;
+        top: number;
+    };
+    "right-top": (triggerRect: IRect, _1: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        left: number;
+        top: number;
+    };
+    "right-bottom": (triggerRect: IRect, _1: ISizes, parentRect: IPosition, paddingX: number, paddingY: number) => {
+        left: number;
+        bottom: number;
+    };
+};

package/esm/pillExpandable/pillExpandableAlignments.js

@@ -0,0 +1,50 @@
+export const alignments = {
+    "top": (triggerRect, popupRect, parentRect, _, paddingY) => ({
+        top: triggerRect.top - parentRect.top - popupRect.height + paddingY,
+        left: triggerRect.left - parentRect.left - (popupRect.width - triggerRect.width) / 2
+    }),
+    "top-left": (triggerRect, popupRect, parentRect, paddingX, paddingY) => ({
+        top: triggerRect.top - parentRect.top - popupRect.height + paddingY,
+        left: triggerRect.left - parentRect.left - paddingX
+    }),
+    "top-right": (triggerRect, popupRect, parentRect, paddingX, paddingY) => ({
+        top: triggerRect.top - parentRect.top - popupRect.height + paddingY,
+        right: parentRect.right - triggerRect.right - paddingX
+    }),
+    "bottom": (triggerRect, popupRect, parentRect, paddingX, paddingY) => ({
+        top: triggerRect.top - parentRect.top + triggerRect.height - paddingY,
+        left: triggerRect.left - parentRect.left - (popupRect.width - triggerRect.width) / 2 - (paddingX / 2)
+    }),
+    "bottom-left": (triggerRect, _1, parentRect, paddingX, paddingY) => ({
+        top: triggerRect.top - parentRect.top + triggerRect.height - paddingY,
+        left: triggerRect.left - parentRect.left - paddingX
+    }),
+    "bottom-right": (triggerRect, _1, parentRect, paddingX, paddingY) => ({
+        top: triggerRect.top - parentRect.top + triggerRect.height - paddingY,
+        right: parentRect.right - triggerRect.right - paddingX
+    }),
+    "left": (triggerRect, popupRect, parentRect, paddingX, _) => ({
+        right: parentRect.right - triggerRect.right + triggerRect.width - (paddingX / 2),
+        top: triggerRect.top - parentRect.top - ((popupRect.height - triggerRect.height) / 2)
+    }),
+    "left-top": (triggerRect, _1, parentRect, paddingX, paddingY) => ({
+        right: parentRect.right - triggerRect.right + triggerRect.width - paddingX,
+        top: triggerRect.top - parentRect.top - paddingY
+    }),
+    "left-bottom": (triggerRect, _1, parentRect, paddingX, paddingY) => ({
+        right: parentRect.right - triggerRect.right + triggerRect.width - paddingX,
+        top: parentRect.bottom - triggerRect.bottom - paddingY
+    }),
+    "right": (triggerRect, popupRect, parentRect, paddingX, _) => ({
+        left: triggerRect.left - parentRect.left + triggerRect.width - (paddingX / 2),
+        top: triggerRect.top - parentRect.top - (popupRect.height - triggerRect.height) / 2
+    }),
+    "right-top": (triggerRect, _1, parentRect, paddingX, paddingY) => ({
+        left: triggerRect.left - parentRect.left + triggerRect.width - paddingX,
+        top: triggerRect.top - parentRect.top - (paddingY / 2)
+    }),
+    "right-bottom": (triggerRect, _1, parentRect, paddingX, paddingY) => ({
+        left: triggerRect.left - parentRect.left + triggerRect.width - paddingX,
+        bottom: parentRect.bottom - triggerRect.bottom - (paddingY / 2)
+    })
+};

package/esm/pillExpandable/pillExpandableSimple.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { IPillExpandable } from "./pillExpandable";
+import { IIcon } from "../icons/icon";
+interface IPillExpandableSimple extends IPillExpandable {
+    includeExpandIcon?: boolean;
+    expanded?: boolean;
+    expandAriaText?: string;
+    onExpand?: () => void;
+    icon?: FC<IIcon> | false;
+    isBeta?: boolean;
+}
+export declare const PillExpandableSimple: import("react").ForwardRefExoticComponent<IPillExpandableSimple & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/esm/pillExpandable/pillExpandableSimple.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef, useCallback } from "react";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { IconChevronTop } from "../icons/iconChevronTop";
+import { IconChevronBottom } from "../icons/iconChevronBottom";
+import { IconException } from "../icons/iconException";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const PillExpandableSimple = forwardRef(({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta }, ref) => {
+    const iconDriveClassName = useDriveClassName("icon");
+    const containerDriveClassName = useDriveClassName("zen-status-pill__container");
+    const onExpandHandler = useCallback(() => {
+        onExpand && onExpand();
+    }, [onExpand]);
+    const ChevronIcon = expanded ? IconChevronTop : IconChevronBottom;
+    const defaultIconSize = iconDriveClassName ? "huge" : "large";
+    const iconSize = isBeta ? "big" : defaultIconSize;
+    const hasText = (text || "").trim().length > 0;
+    return _jsxs("button", { type: "button", className: classNames([
+            "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", "zen-ellipsis"
+        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, children: [icon !== false && _jsx("div", { className: classNames([
+                    "zen-status-pill__icon",
+                    `zen-status-pill__icon--${type}`,
+                    hasText ? "" : "zen-status-pill__icon--standalone"
+                ]), children: createElement(icon, {
+                    size: iconSize
+                }) }), hasText && _jsx("div", { className: `zen-status-pill__text zen-status-pill__text--${type} zen-ellipsis`, children: text }), includeExpandIcon && _jsx("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: _jsx("div", { className: "zen-status-pill__icon", children: createElement(ChevronIcon, {
+                        size: iconDriveClassName ? "huge" : "large"
+                    }) }) })] });
+});
+PillExpandableSimple.displayName = "PillExpandableSimple";

package/esm/popup/popup.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { TAlignment } from "../absolute/absolute";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IPopup extends IZenComponentProps {
+    trigger?: React.ReactElement;
+    triggerRef?: React.RefObject<HTMLElement>;
+    triggerBy?: "click" | "hover";
+    id?: string;
+    alignment?: TAlignment;
+    inline?: boolean;
+    outerIsOpen?: boolean;
+    shouldHoldScroll?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    recalculateOnScroll?: boolean;
+}
+export declare const Popup: React.FC<IPopup>;

package/esm/popup/popup.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+export const Popup = ({ id, trigger, triggerRef, triggerBy = "click", alignment, children, inline, className, outerIsOpen, shouldHoldScroll = false, ariaLabel, ariaLabelledBy, recalculateOnScroll, onOpenChange = () => { } }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerElRef = useRef(null);
+    const memoizedOnChange = useCallback(onOpenChange, [onOpenChange]);
+    const autoId = useId();
+    const popupId = id || autoId;
+    const triggerEvents = {
+        "hover": {
+            onMouseOver: () => {
+                setIsOpen(true);
+            },
+            onMouseOut: () => {
+                setIsOpen(false);
+            }
+        },
+        "click": {
+            onClick: () => {
+                setIsOpen(!isOpen);
+            }
+        }
+    };
+    useEffect(() => {
+        outerIsOpen !== undefined && setIsOpen(outerIsOpen);
+    }, [outerIsOpen]);
+    const changeIsOpenOnClick = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen, setIsOpen]);
+    const onOpenOnMouseOver = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const onCloseOnMouseOut = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    useEffect(() => {
+        if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+            return () => { };
+        }
+        const triggerRefCurrent = triggerRef.current;
+        if (triggerBy === "click") {
+            triggerRefCurrent.addEventListener("click", changeIsOpenOnClick, false);
+            return () => {
+                triggerRefCurrent.removeEventListener("click", changeIsOpenOnClick, false);
+            };
+        }
+        triggerRefCurrent.addEventListener("mouseover", onOpenOnMouseOver, false);
+        triggerRefCurrent.addEventListener("mouseout", onCloseOnMouseOut, false);
+        return () => {
+            triggerRefCurrent.removeEventListener("mouseover", onOpenOnMouseOver, false);
+            triggerRefCurrent.removeEventListener("mouseout", onCloseOnMouseOut, false);
+        };
+    }, [triggerRef, triggerBy, isOpen, changeIsOpenOnClick, onOpenOnMouseOver, onCloseOnMouseOut]);
+    useEffect(() => {
+        memoizedOnChange(isOpen);
+    }, [isOpen, memoizedOnChange]);
+    const renderTrigger = () => {
+        if (!trigger) {
+            return null;
+        }
+        const events = triggerEvents[triggerBy];
+        return React.cloneElement(trigger, Object.assign(Object.assign({ ref: triggerElRef }, trigger.props), events));
+    };
+    if (!trigger && !triggerRef) {
+        throw new Error("Popup: either trigger or triggerRef property should be passed");
+    }
+    const triggerComp = renderTrigger();
+    return _jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledPopup, { shouldHoldScroll: shouldHoldScroll, useTrapFocusWithTrigger: "on", isOpen: isOpen, triggerRef: triggerRef || triggerElRef, id: popupId, className: className, alignment: alignment, inline: inline, paddingY: 0, paddingX: 0, onOpenChange: setIsOpen, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || (triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props.id), recalculateOnScroll: recalculateOnScroll, children: children })] });
+};

package/esm/primaryIcon/primaryIcon.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import "./primaryIcon.less";
+import { IIcon } from "../icons/icon";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IPrimaryIcon extends IZenComponentProps {
+    icon: FC<IIcon> | ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    link?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    title?: string;
+    disabled?: boolean;
+    style?: "primary" | "secondary";
+}
+export declare const PrimaryIcon: ({ icon, className, onClick, link, target, title, disabled, style }: IPrimaryIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/primaryIcon/primaryIcon.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { renderIcon } from "./renderIcon";
+export const PrimaryIcon = ({ icon, className, onClick, link, target, title, disabled, style }) => {
+    const iconNode = useMemo(() => renderIcon(icon, className), [icon, className]);
+    const topClassName = useMemo(() => classNames([
+        "zen-primary-icon",
+        onClick || link ? "zen-primary-icon--active" : "",
+        disabled ? "zen-primary-icon--disabled" : "",
+        style === "secondary" ? "zen-primary-icon--secondary" : "",
+        className || ""
+    ]), [onClick, link, className, disabled, style]);
+    if (onClick) {
+        return _jsx("button", { className: topClassName, onClick: onClick, disabled: disabled, title: title, "aria-label": title, children: iconNode });
+    }
+    if (link) {
+        return _jsx("a", { className: topClassName, href: disabled ? undefined : link, target: target, title: title, "aria-label": title, children: iconNode });
+    }
+    return _jsx("div", { className: topClassName, children: iconNode });
+};

package/esm/primaryIcon/renderIcon.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent, ReactNode } from "react";
+import { IIcon } from "../icons/icon";
+export declare const renderIcon: (iconComponent: FunctionComponent<IIcon> | ReactNode, className?: string) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").FunctionComponentElement<IIcon> | null | undefined;

package/esm/primaryIcon/renderIcon.js

@@ -0,0 +1,8 @@
+import { createElement } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const renderIcon = (iconComponent, className) => {
+    if (typeof iconComponent === "function") {
+        return createElement(iconComponent, { size: "large", className: classNames([className || ""]) });
+    }
+    return iconComponent;
+};

package/esm/progressBar/progressBar.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import "./progressBar.less";
+export declare enum ProgressBarType {
+    Low = "low",
+    Average = "average",
+    High = "high"
+}
+export declare const ProgreesBarSize: {
+    readonly Small: "small";
+    readonly Medium: "medium";
+    readonly Large: "large";
+};
+export type TProgressBarSize = typeof ProgreesBarSize[keyof typeof ProgreesBarSize];
+interface IProgressBar {
+    min?: number;
+    max?: number;
+    now?: number;
+    size?: TProgressBarSize;
+    className?: string;
+    type?: ProgressBarType;
+}
+export declare const ProgressBar: React.FC<IProgressBar>;
+export {};

package/esm/progressBar/progressBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getProgressBarAttr, getProgressBarValue } from "./progressBarUtils";
+export var ProgressBarType;
+(function (ProgressBarType) {
+    ProgressBarType["Low"] = "low";
+    ProgressBarType["Average"] = "average";
+    ProgressBarType["High"] = "high";
+})(ProgressBarType || (ProgressBarType = {}));
+export const ProgreesBarSize = {
+    Small: "small",
+    Medium: "medium",
+    Large: "large"
+};
+export const ProgressBar = ({ type = ProgressBarType.Average, min = 0, max = 100, now = 0, className = "", size = ProgreesBarSize.Large }) => (_jsx("div", { className: `zen-progress ${className} ${"zen-progress--" + size}`, children: _jsx("div", Object.assign({}, getProgressBarAttr(type, min, max, getProgressBarValue(min, max, now)))) }));

package/esm/progressBar/progressBarUtils.d.ts

@@ -0,0 +1,9 @@
+import { ProgressBarType } from "./progressBar";
+export declare const isValidProggressBar: (min: number, max: number, now: number) => boolean;
+export declare const getProgressBarValue: (min: number, max: number, now: number) => string | null;
+export declare const getProgressBarAttr: (type: ProgressBarType, min: number, max: number, now: string | null) => {
+    className: string;
+    role: string;
+    "aria-valuemin": number;
+    "aria-valuemax": number;
+};

package/esm/progressBar/progressBarUtils.js

@@ -0,0 +1,23 @@
+import { ProgressBarType } from "./progressBar";
+const PROGRESS_BAR_PRECISION = 2;
+export const isValidProggressBar = (min, max, now) => !(min > max || now < min);
+export const getProgressBarValue = (min, max, now) => {
+    if (!isValidProggressBar(min, max, now)) {
+        return null;
+    }
+    const result = (now - min) / (max - min) * 100;
+    return (result > 0 ? result : 0).toFixed(PROGRESS_BAR_PRECISION);
+};
+export const getProgressBarAttr = (type, min, max, now) => {
+    const progressBarAttr = {
+        className: type === ProgressBarType.Average ? "zen-progress__bar" : `zen-progress__bar zen-progress__bar--${type}`,
+        role: "progressbar",
+        "aria-valuemin": min,
+        "aria-valuemax": max
+    };
+    if (now) {
+        progressBarAttr["aria-valuenow"] = now;
+        progressBarAttr["style"] = { width: `${now}%` };
+    }
+    return progressBarAttr;
+};