@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/toastRaw/toastRaw.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToastAnimation } from "./components/toastAnimation";
+import { IconCheckRadio } from "../icons/iconCheckRadio";
+import { IconInfoCircle } from "../icons/iconInfoCircle";
+import { createElement, forwardRef, useCallback, useContext, useMemo } from "react";
+import { useDrive } from "../utils/theme/useDrive";
+import { Button } from "../button/button";
+import { IconClose } from "../icons/iconClose";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { MIN_SECONDS_TO_SHOW, useProgress } from "./hooks/useProgress";
+import { themeContext } from "../utils/theme/themeContext";
+import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
+const typedIcons = {
+    success: IconCheckRadio,
+    info: IconInfoCircle
+};
+const getIcon = (t) => typedIcons[t];
+export const ToastRaw = forwardRef(
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function ToastRawInner({ isOpen, onClose, animation, type, hasIcon = true, header, id, action, showSeconds = MIN_SECONDS_TO_SHOW }, ref) {
+    const isDrive = useDrive();
+    const isMobile = useMobile();
+    const { dark } = useContext(themeContext);
+    const { translate } = useLanguage();
+    const { progress } = useProgress({ isOpen, onClose, showSeconds });
+    const toastClasses = classNames(["zen-toast", `zen-toast--${type || "info"}`, isMobile ? "zen-toast--mobile" : "", isDrive ? "zen-toast--drive" : "", dark ? "zen-dark" : ""]);
+    const contentStartClasses = useMemo(() => classNames(["zen-toast__content-start", hasIcon ? "zen-toast__content-start--icon" : ""]), [hasIcon]);
+    const contentEndClasses = classNames(["zen-toast__content-end", action ? "zen-toast__content-end--action" : ""]);
+    const onActionClick = useCallback(() => {
+        var _a;
+        (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        onClose();
+    }, [action, onClose]);
+    const actionButton = useMemo(() => {
+        if (!action) {
+            return null;
+        }
+        if (action.icon) {
+            return _jsx(TextIconButton, { className: "zen-toast__action", type: "tertiary", icon: action.icon, iconPosition: action.iconPosition || ButtonIconPosition.Start, onClick: onActionClick, link: action.link, title: action.title || action.text, children: action.text });
+        }
+        return _jsx(Button, { className: "zen-toast__action", type: "tertiary", link: action.link, onClick: onActionClick, title: action.title || action.text, children: action.text });
+    }, [action, onActionClick]);
+    return _jsx(ToastAnimation, { id: id, animation: animation, isOpen: isOpen, children: _jsxs("div", { id: id, ref: ref, className: toastClasses, role: "status", "aria-live": "polite", "aria-atomic": "true", children: [_jsx("div", { style: { width: `${progress}%` }, className: classNames(["zen-toast__progress", "progress", `zen-toast__progress--${type || "info"}`, progress !== 100 ? "zen-toast__progress--active" : ""]) }), _jsxs("div", { className: "zen-toast__content", children: [_jsxs("div", { className: contentStartClasses, children: [hasIcon && createElement(getIcon(type || "info"), {
+                                    size: isDrive ? "huge" : "large",
+                                    className: `zen-toast__icon--${type || "info"}`
+                                }), _jsx("div", { className: classNames(["zen-toast__header", `zen-toast__header--${type || "info"}`]), children: header })] }), _jsxs("div", { className: contentEndClasses, children: [actionButton, _jsx("button", { type: "button", className: classNames(["zen-toast__close-button", `zen-toast__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huge" : "large" }) })] })] })] }) });
+});

package/esm/toggleButton/toggleButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import "./toggleButton.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IToggleButton extends IZenComponentProps {
+    id?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    title?: string;
+    isReverted?: boolean;
+    onChange?: (newState: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const ToggleButton: React.FC<IToggleButton>;

package/esm/toggleButton/toggleButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { TriStateCheckbox } from "../triStateCheckbox/triStateCheckbox";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+export const ToggleButton = ({ id, checked, disabled, className, title, children, onChange, isReverted }) => {
+    const driveClassesToggler = useDriveClassName("zen-toggler");
+    const driveClassesComponent = useDriveClassName("zen-toggler-component");
+    const generatedId = useId();
+    const checkBoxId = id || generatedId;
+    return _jsxs("div", { className: classNames(["zen-toggler", driveClassesToggler || "", className || ""]), children: [_jsx(TriStateCheckbox, { className: "zen-toggler__input", id: checkBoxId, onChange: onChange, checked: checked, disabled: disabled }), _jsxs("label", { className: classNames(["zen-toggler__label", isReverted ? "zen-toggler__label--reverted" : ""]), htmlFor: checkBoxId, title: title, "aria-label": title, children: [_jsxs("div", { className: classNames(["zen-toggler-component", driveClassesComponent || ""]), children: [_jsx("div", { className: "zen-toggler-component__focus" }), _jsx("div", { className: "zen-toggler-component__runner" })] }), children ? _jsx("div", { className: "zen-toggler__label-text", children: children }) : null] })] });
+};

package/esm/toolbar/helpers/createDisplayingElements.d.ts

@@ -0,0 +1,2 @@
+import { IDisplayingElements, IWidthProps } from "./getDisplayingElementsIndex";
+export declare const createDisplayingElements: (currentChildInd: number, elements: NodeListOf<HTMLElement>, displayElements: IDisplayingElements, widthProps: IWidthProps) => (elInd: number) => IDisplayingElements;

package/esm/toolbar/helpers/createDisplayingElements.js

@@ -0,0 +1,13 @@
+import { deepClone } from "../../commonHelpers/utils";
+import { getWidthWithMargin } from "./getWidthWithMargin";
+export const createDisplayingElements = (currentChildInd, elements, displayElements, widthProps) => (elInd) => {
+    const currentWidth = widthProps.requiredWidth + getWidthWithMargin(elements[currentChildInd].childNodes[elInd]);
+    const displayElementsClone = deepClone(displayElements);
+    widthProps.requiredWidth = currentWidth;
+    if (widthProps.requiredWidth < widthProps.width) {
+        const blockName = elements[currentChildInd].dataset.name || "";
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        displayElementsClone[blockName] = displayElementsClone[blockName] ? [...displayElementsClone[blockName], elInd] : [elInd];
+    }
+    return displayElementsClone;
+};

package/esm/toolbar/helpers/getCustomizableElement.d.ts

@@ -0,0 +1,3 @@
+export declare const getCustomizableElement: (elt: HTMLElement | undefined) => {
+    [x: string]: number[];
+};

package/esm/toolbar/helpers/getCustomizableElement.js

@@ -0,0 +1,8 @@
+export const getCustomizableElement = (elt) => {
+    if (!elt) {
+        return {};
+    }
+    const blockName = elt.dataset.name || "";
+    const moreButtonIndex = Array.from(elt.childNodes).findIndex(el => el.classList.contains("zen-toolbar__item--more"));
+    return { [blockName]: [moreButtonIndex] };
+};

package/esm/toolbar/helpers/getDisplayingElementsIndex.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+import { IToolbarContent } from "../toolbarContent";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export type TChildren = ReactElement<IToolbarContent | IZenComponentProps>;
+export interface IWidthProps {
+    width: number;
+    requiredWidth: number;
+}
+export interface IDisplayingElements {
+    [key: string]: number[];
+}
+export declare const getDisplayingElementsIndex: (width: number, children: NodeListOf<HTMLElement>) => {
+    displayingElements: {
+        [x: string]: number[];
+    };
+    customizableMore: {
+        [x: string]: number[];
+    };
+};

package/esm/toolbar/helpers/getDisplayingElementsIndex.js

@@ -0,0 +1,18 @@
+import { getCustomizableElement } from "./getCustomizableElement";
+import { sortDisplayElements } from "./sortDisplayElements";
+import { handleElementsPriority } from "./handleElementsPriority";
+import { handleShortnessOfRequiredWidth } from "./handleShortnessOfRequiredWidth";
+export const getDisplayingElementsIndex = (width, children) => {
+    // add customizableMore element
+    const parentWithMore = Array.from(children).find(child => Array.from(child.childNodes).some(el => el.classList.contains("zen-toolbar__item--more")));
+    const customizableMore = getCustomizableElement(parentWithMore);
+    let displayingElements = Object.assign({}, customizableMore);
+    const widthProps = {
+        width,
+        requiredWidth: Object.keys(customizableMore).length ? 80 : 71 // width for more button with margin or without
+    };
+    displayingElements = handleElementsPriority(children, widthProps, displayingElements);
+    displayingElements = handleShortnessOfRequiredWidth(children, widthProps, displayingElements);
+    sortDisplayElements(displayingElements);
+    return { displayingElements, customizableMore };
+};

package/esm/toolbar/helpers/getToolbarChildren.d.ts

@@ -0,0 +1,2 @@
+import { TChildren } from "./getDisplayingElementsIndex";
+export declare const getToolbarChildren: (children: TChildren | TChildren[] | undefined) => TChildren[] | undefined;

package/esm/toolbar/helpers/getToolbarChildren.js

@@ -0,0 +1,7 @@
+import React from "react";
+export const getToolbarChildren = (children) => {
+    if (!children) {
+        return undefined;
+    }
+    return (React.Children.count(children) === 1 ? [children] : children);
+};

package/esm/toolbar/helpers/getWidthWithMargin.d.ts

@@ -0,0 +1 @@
+export declare const getWidthWithMargin: (elem: HTMLElement) => number;

package/esm/toolbar/helpers/getWidthWithMargin.js

@@ -0,0 +1,6 @@
+export const getWidthWithMargin = (elem) => {
+    const style = window.getComputedStyle(elem);
+    const margin = (parseFloat(style.marginLeft) + parseFloat(style.marginRight)) || 0;
+    const width = elem.getBoundingClientRect().width;
+    return width + margin;
+};

package/esm/toolbar/helpers/getWidthWithoutPadding.d.ts

@@ -0,0 +1 @@
+export declare const getWidthWithoutPadding: (elem: HTMLElement) => number;

package/esm/toolbar/helpers/getWidthWithoutPadding.js

@@ -0,0 +1,6 @@
+export const getWidthWithoutPadding = (elem) => {
+    const style = window.getComputedStyle(elem);
+    const padding = (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)) || 0;
+    const width = elem.getBoundingClientRect().width;
+    return width - padding;
+};

package/esm/toolbar/helpers/handleElementsPriority.d.ts

@@ -0,0 +1,2 @@
+import { IWidthProps, IDisplayingElements } from "./getDisplayingElementsIndex";
+export declare const handleElementsPriority: (children: NodeListOf<HTMLElement>, widthProps: IWidthProps, displayingElements: IDisplayingElements) => IDisplayingElements;

package/esm/toolbar/helpers/handleElementsPriority.js

@@ -0,0 +1,17 @@
+import { deepClone } from "../../commonHelpers/utils";
+import { createDisplayingElements } from "./createDisplayingElements";
+export const handleElementsPriority = (children, widthProps, displayingElements) => {
+    let displayingElementsClone = deepClone(displayingElements);
+    for (let i = 0; i <= children.length - 1 && widthProps.requiredWidth <= widthProps.width; i++) {
+        const requiredElementsInd = [];
+        children[i].childNodes.forEach((el, ind) => {
+            if (el.classList.contains("zen-toolbar__item-priority")) {
+                requiredElementsInd.push(ind);
+            }
+        });
+        for (let j = 0; j < requiredElementsInd.length; j++) {
+            displayingElementsClone = createDisplayingElements(i, children, displayingElementsClone, widthProps)(requiredElementsInd[j]);
+        }
+    }
+    return displayingElementsClone;
+};

package/esm/toolbar/helpers/handleShortnessOfRequiredWidth.d.ts

@@ -0,0 +1,2 @@
+import { IWidthProps, IDisplayingElements } from "./getDisplayingElementsIndex";
+export declare const handleShortnessOfRequiredWidth: (children: NodeListOf<HTMLElement>, widthProps: IWidthProps, displayingElements: IDisplayingElements) => IDisplayingElements;

package/esm/toolbar/helpers/handleShortnessOfRequiredWidth.js

@@ -0,0 +1,23 @@
+import { deepClone } from "../../commonHelpers/utils";
+import { createDisplayingElements } from "./createDisplayingElements";
+export const handleShortnessOfRequiredWidth = (children, widthProps, displayingElements) => {
+    let displayingElementsClone = deepClone(displayingElements);
+    if (widthProps.requiredWidth < widthProps.width) {
+        for (let i = 0; i <= children.length - 1 && widthProps.requiredWidth <= widthProps.width; i++) {
+            if (children[i].classList.contains("zen-toolbar__item--more")) {
+                continue;
+            }
+            const additionalElementsInd = [];
+            children[i].childNodes.forEach((el, ind) => {
+                if (el.classList.contains("zen-toolbar__item-priority")) {
+                    return;
+                }
+                additionalElementsInd.push(ind);
+            });
+            for (let j = 0; j < additionalElementsInd.length; j++) {
+                displayingElementsClone = createDisplayingElements(i, children, displayingElementsClone, widthProps)(additionalElementsInd[j]);
+            }
+        }
+    }
+    return displayingElementsClone;
+};

package/esm/toolbar/helpers/sortDisplayElements.d.ts

@@ -0,0 +1,2 @@
+import { IDisplayingElements } from "./getDisplayingElementsIndex";
+export declare const sortDisplayElements: (displayingElements: IDisplayingElements) => void;

package/esm/toolbar/helpers/sortDisplayElements.js

@@ -0,0 +1 @@
+export const sortDisplayElements = (displayingElements) => Object.keys(displayingElements).forEach((key) => displayingElements[key].sort((a, b) => a - b));

package/esm/toolbar/importantElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IImportantElement extends IZenComponentProps {
+    priority?: string;
+}
+export declare const ImportantElement: React.FC<IImportantElement>;

package/esm/toolbar/importantElement.js

@@ -0,0 +1,2 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const ImportantElement = (props) => _jsx(_Fragment, { children: props.children });

package/esm/toolbar/toolbar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./toolbar.less";
+import { TChildren } from "./helpers/getDisplayingElementsIndex";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IToolbar extends IZenComponentProps {
+    children: TChildren | TChildren[] | undefined;
+}
+/**
+    @deprecated - will be removed in future releases
+*/
+export declare const Toolbar: React.FC<IToolbar>;

package/esm/toolbar/toolbar.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { ToolbarContent } from "./toolbarContent";
+import { ToolbarMoreButton } from "./toolbarMoreButton";
+import { getDisplayingElementsIndex } from "./helpers/getDisplayingElementsIndex";
+import { useResize } from "../commonHelpers/hooks/useResize";
+import { useThrottle } from "../commonHelpers/hooks/useThrottle";
+import { getWidthWithoutPadding } from "./helpers/getWidthWithoutPadding";
+import { getToolbarChildren } from "./helpers/getToolbarChildren";
+/**
+    @deprecated - will be removed in future releases
+*/
+export const Toolbar = ({ className, children }) => {
+    const [toolbarWidthChanges, setToolbarWidthChanges] = useState(0);
+    const toolbarRef = useRef(null);
+    const defaultBlock = "start";
+    const moreBlockRef = useRef(null);
+    const customizableMoreRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    const [toolbarRectWidth, setToolbarRectWidth] = useState(null);
+    const resizeCallBack = useThrottle(() => {
+        setWidth(null);
+        setToolbarRectWidth(null);
+        setToolbarWidthChanges((val) => val + 1);
+    }, 500);
+    useResize(resizeCallBack, toolbarRef.current !== null);
+    let more;
+    let block = new Map();
+    const toolbarChildren = getToolbarChildren(children);
+    if (toolbarChildren) {
+        const extraBlock = new Map();
+        toolbarChildren.forEach((child) => {
+            var _a;
+            if (child.type === ToolbarContent && child.props.children) {
+                const childToAdd = Array.isArray(child.props.children) ? [...child.props.children] : [Object.assign({}, child.props.children)];
+                const moreContentIndex = childToAdd.findIndex(elem => elem.type === ToolbarMoreButton);
+                const moreContent = moreContentIndex >= 0 ? childToAdd[moreContentIndex] : undefined;
+                if (moreContent && ((_a = moreContent.props) === null || _a === void 0 ? void 0 : _a.children)) {
+                    const cleanMoreContent = Object.assign(Object.assign({}, moreContent), { props: Object.assign(Object.assign({}, moreContent.props), { children: undefined }) });
+                    childToAdd.splice(moreContentIndex, 1, cleanMoreContent);
+                }
+                const field = child.props.blockName || undefined;
+                field && extraBlock.set(field, extraBlock.has(field) ? [...extraBlock.get(field) || [], childToAdd]
+                    : [...childToAdd]);
+            }
+        });
+        if (toolbarChildren.every((el) => el.type !== ToolbarContent)) {
+            toolbarChildren.forEach(el => {
+                if (extraBlock.has(defaultBlock)) {
+                    extraBlock.set(defaultBlock, [...extraBlock.get(defaultBlock) || [], el]);
+                }
+                else {
+                    extraBlock.set(defaultBlock, [el]);
+                }
+            });
+        }
+        more = undefined;
+        block = new Map(extraBlock);
+    }
+    if (width && toolbarRectWidth && width >= toolbarRectWidth && toolbarRef.current) {
+        const toolbarChildNodes = toolbarRef.current.childNodes;
+        const displayingElementsIndexes = getDisplayingElementsIndex(toolbarRectWidth, toolbarChildNodes);
+        const newBlock = new Map();
+        const newMore = [];
+        for (const [key, value] of block.entries()) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (displayingElementsIndexes.displayingElements[key]) {
+                const newValue = value === null || value === void 0 ? void 0 : value.filter((_, ind) => displayingElementsIndexes.displayingElements[key].includes(ind));
+                const moreValue = value === null || value === void 0 ? void 0 : value.filter((_, ind) => !displayingElementsIndexes.displayingElements[key].includes(ind));
+                newBlock.set(key, newValue);
+                (moreValue === null || moreValue === void 0 ? void 0 : moreValue.length) && newMore.push(moreValue);
+            }
+            else {
+                (value === null || value === void 0 ? void 0 : value.length) && newMore.push(value);
+            }
+        }
+        if (Object.keys(displayingElementsIndexes.customizableMore).length) {
+            const newCustomizableMore = newBlock.get(Object.keys(displayingElementsIndexes.customizableMore)[0]);
+            const moreEltInd = newCustomizableMore.findIndex(el => el.type === ToolbarMoreButton);
+            let moreElt = newCustomizableMore[moreEltInd];
+            if (moreElt) {
+                moreElt = Object.assign(Object.assign({}, moreElt), { props: Object.assign(Object.assign({}, moreElt.props), { children: [...newMore].reduce((acc, child) => acc.concat(child), []) }) });
+                newCustomizableMore.splice(moreEltInd, 1, moreElt);
+            }
+        }
+        more = newMore.length ? [...newMore] : undefined;
+        block = new Map(newBlock);
+    }
+    useLayoutEffect(() => {
+        if (!toolbarRef.current) {
+            return;
+        }
+        const currToolbarReactWidth = getWidthWithoutPadding(toolbarRef.current);
+        const toolbarChildNodes = toolbarRef.current.childNodes;
+        let currWidth = 0;
+        toolbarChildNodes.forEach(el => {
+            currWidth += el.getBoundingClientRect().width;
+        });
+        setWidth(currWidth);
+        setToolbarRectWidth(currToolbarReactWidth);
+    }, [toolbarWidthChanges]);
+    const createExtraContent = useCallback((blockEl) => {
+        const content = [];
+        if (blockEl.size) {
+            for (const [key, value] of blockEl.entries()) {
+                content.push(_jsx(ToolbarContent, { blockName: key, ref: customizableMoreRef, children: value }, key));
+            }
+        }
+        return content.length ? content : undefined;
+    }, []);
+    return _jsxs("div", { className: classNames(["zen-toolbar", className ? className : "", "zen-toolbar--separate"]), ref: toolbarRef, children: [createExtraContent(block), !customizableMoreRef.current && more && _jsx("div", { className: "zen-toolbar__dropdown-block", ref: moreBlockRef, "data-name": "more", children: _jsx(ToolbarMoreButton, { children: more.reduce((acc, element) => acc.concat(element), []) }) })] });
+};

package/esm/toolbar/toolbarContent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "./toolbar.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IToolbarContent extends IZenComponentProps {
+    blockName: string;
+}
+export declare const ToolbarContent: import("react").ForwardRefExoticComponent<IToolbarContent & import("react").RefAttributes<HTMLDivElement>>;

package/esm/toolbar/toolbarContent.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, Children } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { ToolbarMoreButton } from "./toolbarMoreButton";
+import { ImportantElement } from "./importantElement";
+export const ToolbarContent = forwardRef(function toolbarContent({ blockName, children }, ref) {
+    const getChildElements = () => {
+        const elts = children ? Children.map(children, (child, ind) => {
+            const extraClass = [];
+            if (child.type === ImportantElement) {
+                extraClass.push("zen-toolbar__item-priority");
+                extraClass.push(`zen-toolbar__item-priority--${child.props.priority}`);
+            }
+            if (child.type === ToolbarMoreButton) {
+                return _jsx("div", { className: classNames(["zen-toolbar__item", "zen-toolbar__item--more", child.props.children ? "" : "zen-toolbar__item--empty"]), ref: ref, children: _jsx(ToolbarMoreButton, { children: child.props.children }) });
+            }
+            return _jsx("div", { className: classNames(["zen-toolbar__item", ...extraClass]), children: child }, `${blockName}-${ind}`);
+        }) : [];
+        return elts;
+    };
+    return _jsx("div", { className: classNames(["zen-toolbar__content-block", `zen-toolbar__${blockName}-block`]), "data-name": blockName, children: getChildElements() });
+});

package/esm/toolbar/toolbarMoreButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./toolbar.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IToolbarMoreButton extends IZenComponentProps {
+}
+export declare const ToolbarMoreButton: React.FC<IToolbarMoreButton>;
+export declare const TRANSLATIONS: string[];

package/esm/toolbar/toolbarMoreButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "../button/button";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { Popup } from "../popup/popup";
+import { IconFlatFilledArrowDown } from "../icons/deprecated/iconFlatFilledArrowDown";
+export const ToolbarMoreButton = ({ children }) => {
+    const moreButton = _jsxs(Button, { className: "zen-toolbar__trigger-button body-04", children: ["More", _jsx("div", { className: "zen-toolbar__button-icon", children: _jsx(IconFlatFilledArrowDown, { size: "micro" }) })] });
+    const getChildElements = () => {
+        const elts = React.Children.map(children, (child, ind) => _jsx("div", { className: classNames(["zen-toolbar__popup-item", ind === children.length - 1 ? "zen-toolbar__popup-item--last" : ""]), children: child }, `more-item-${ind}`));
+        return elts;
+    };
+    return children ? _jsx(Popup, { triggerBy: "click", className: "zen-toolbar__more-button", trigger: moreButton, children: _jsx("div", { className: "zen-toolbar__dropdown-area", children: getChildElements() }) }) : null;
+};
+export const TRANSLATIONS = [
+    "More"
+];

package/esm/tooltip/helpers/calculateArrowPosition.d.ts

@@ -0,0 +1,2 @@
+import { TAlignment } from "../../absolute/absolute";
+export declare const calculateArrowPosition: (triggerRef: React.RefObject<HTMLElement>, tooltipRef: React.RefObject<HTMLElement>, arrowRef: React.RefObject<HTMLElement>, alignment: TAlignment) => void;

package/esm/tooltip/helpers/calculateArrowPosition.js

@@ -0,0 +1,26 @@
+const borderRadius = 4;
+const normalizeLeft = (left, tooltipWidth, arrowWidth) => Math.min(tooltipWidth - borderRadius - arrowWidth, Math.max(borderRadius, left));
+const normalizeTop = (top, tooltipHeight, arrowHeight) => Math.min(tooltipHeight - borderRadius - arrowHeight, Math.max(borderRadius, top));
+export const calculateArrowPosition = (triggerRef, tooltipRef, arrowRef, alignment) => {
+    if (!triggerRef.current) {
+        return;
+    }
+    if (!tooltipRef.current) {
+        return;
+    }
+    if (!arrowRef.current) {
+        return;
+    }
+    const triggerElement = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    if (alignment === "top" || alignment === "top-right" || alignment === "top-left" || alignment === "bottom" || alignment === "bottom-right" || alignment === "bottom-left") {
+        const left = normalizeLeft(triggerRect.left - tooltipRect.left + triggerRect.width / 2 - arrowRef.current.offsetWidth / 2, tooltipRect.width, arrowRef.current.offsetWidth);
+        arrowRef.current.style.left = `${left}px`;
+    }
+    if (alignment === "right" || alignment === "right-top" || alignment === "right-bottom" || alignment === "left" || alignment === "left-top" || alignment === "left-bottom") {
+        const top = normalizeTop(triggerRect.top - tooltipRect.top + triggerRect.height / 2 - arrowRef.current.offsetHeight / 2, tooltipRect.height, arrowRef.current.offsetHeight);
+        arrowRef.current.style.top = `${top}px`;
+    }
+};

package/esm/tooltip/helpers/removeArrowClasses.d.ts

@@ -0,0 +1 @@
+export declare const removeArrowClasses: (tooltip: HTMLElement) => void;

package/esm/tooltip/helpers/removeArrowClasses.js

@@ -0,0 +1,5 @@
+export const removeArrowClasses = (tooltip) => {
+    [...tooltip.classList]
+        .filter(el => el.includes("zen-tooltip--arrow"))
+        .forEach(el => tooltip.classList.remove(el));
+};

package/esm/tooltip/tooltip.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactElement } from "react";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { TAlignment } from "../absolute/absolute";
+import "./tooltip.less";
+export type TooltipSize = "large" | "small" | "auto";
+export type TMobileView = "default" | "mobileSheet";
+interface ITooltip extends IZenComponentProps {
+    trigger: ReactElement;
+    size?: TooltipSize;
+    alignment?: TAlignment;
+    padding?: number;
+    mobileView?: TMobileView;
+    mobileSheetTitle?: ReactElement | string;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (s: string) => string;
+}
+export declare const Tooltip: FC<ITooltip>;
+export {};