@geotab/zenith 3.6.1 → 3.6.2

package/esm/notification/pushNotification/pushNotification.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+export const PushNotification = ({ children, isOpen }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current || !isOpen) {
+            return;
+        }
+        ref.current.animate([
+            { left: "120%" },
+            { left: "0%" }
+        ], {
+            duration: 150,
+            iterations: 1,
+            delay: 0
+        });
+    }, [isOpen]);
+    return isOpen && _jsx("div", { style: { position: "relative" }, ref: ref, children: children });
+};
+export default PushNotification;

package/esm/oldPill/pill.d.ts

@@ -0,0 +1,24 @@
+import "./pill.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefObject } from "react";
+export declare enum PillSize {
+    Normal = "normal",
+    Small = "small"
+}
+export declare enum PillType {
+    Error = "error",
+    Success = "success",
+    Warning = "warning",
+    Inactive = "inactive",
+    Info = "info"
+}
+export interface IPill extends IZenComponentProps {
+    type?: PillType;
+    long?: boolean;
+    size?: PillSize;
+    ref?: RefObject<HTMLDivElement | null>;
+}
+/**
+ * @deprecated - will be removed in the next releases.
+ */
+export declare const Pill: ({ children, className, type, long, size, ref, ...restProps }: IPill) => import("react/jsx-runtime").JSX.Element;

package/esm/oldPill/pill.js

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export var PillSize;
+(function (PillSize) {
+    PillSize["Normal"] = "normal";
+    PillSize["Small"] = "small";
+})(PillSize || (PillSize = {}));
+export var PillType;
+(function (PillType) {
+    PillType["Error"] = "error";
+    PillType["Success"] = "success";
+    PillType["Warning"] = "warning";
+    PillType["Inactive"] = "inactive";
+    PillType["Info"] = "info";
+})(PillType || (PillType = {}));
+const pillClassesByType = {
+    [PillType.Error]: "zen-pill--error",
+    [PillType.Warning]: "zen-pill--warning",
+    [PillType.Success]: "zen-pill--success",
+    [PillType.Inactive]: "zen-pill--inactive",
+    [PillType.Info]: "zen-pill--info"
+};
+const getPillTypeClassName = (type) => pillClassesByType[type] || "";
+/**
+ * @deprecated - will be removed in the next releases.
+ */
+/*
+ * After this component was removed:
+ *  1. Rename .zen-pill-new to .zen-pill
+ *  2. Rename .zen-pill-new-content to zen-pill-content
+ *  3. Remove commonStyles/pillStyles/pillStyles.less
+*/
+export const Pill = (_a) => {
+    var { children, className = "", type, long, size = PillSize.Normal, ref } = _a, restProps = __rest(_a, ["children", "className", "type", "long", "size", "ref"]);
+    const pillTypeClass = getPillTypeClassName(type || "");
+    const pillLongClass = long ? "zen-pill--long" : "";
+    const pillSizeClass = size === PillSize.Small ? "zen-pill--small" : "";
+    const pillClasses = classNames(["zen-pill", pillTypeClass, pillLongClass, pillSizeClass, className]);
+    return _jsx("div", Object.assign({}, restProps, { className: pillClasses, ref: ref, children: children }));
+};

package/esm/overview/overview.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import "./overview.less";
+export declare enum OverviewOptionsType {
+    Positive = "positive",
+    Negative = "negative",
+    Neutral = "neutral"
+}
+export declare enum OverviewOptionsArrow {
+    Up = "up",
+    Down = "down"
+}
+export interface ILabelOptions {
+    percentage: number;
+    arrow?: OverviewOptionsArrow;
+    type?: OverviewOptionsType;
+}
+export interface IOverview {
+    icon?: React.ReactElement;
+    description?: string;
+    title?: React.ReactElement | string;
+    label?: ILabelOptions;
+    className?: string;
+}
+export declare const Overview: ({ className, title, description, icon, label }: IOverview) => import("react/jsx-runtime").JSX.Element;

package/esm/overview/overview.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Pill, PillSize, PillType } from "../oldPill/pill";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { IconArrowTop } from "../icons/iconArrowTop";
+import { IconArrowBottom } from "../icons/iconArrowBottom";
+export var OverviewOptionsType;
+(function (OverviewOptionsType) {
+    OverviewOptionsType["Positive"] = "positive";
+    OverviewOptionsType["Negative"] = "negative";
+    OverviewOptionsType["Neutral"] = "neutral";
+})(OverviewOptionsType || (OverviewOptionsType = {}));
+export var OverviewOptionsArrow;
+(function (OverviewOptionsArrow) {
+    OverviewOptionsArrow["Up"] = "up";
+    OverviewOptionsArrow["Down"] = "down";
+})(OverviewOptionsArrow || (OverviewOptionsArrow = {}));
+export const Overview = ({ className, title, description, icon, label }) => {
+    const getLabel = useCallback(() => {
+        if (!(label === null || label === void 0 ? void 0 : label.type) || label.type === OverviewOptionsType.Neutral || !label.arrow) {
+            return _jsxs("div", { className: "zen-overview__label-item", children: [label === null || label === void 0 ? void 0 : label.percentage, "%"] });
+        }
+        return _jsx(Pill, { type: label.type === OverviewOptionsType.Positive ? PillType.Success : PillType.Error, size: PillSize.Small, children: _jsxs(_Fragment, { children: [label.arrow === OverviewOptionsArrow.Up
+                        ? _jsx(IconArrowTop, {})
+                        : _jsx(IconArrowBottom, {}), _jsxs("span", { children: [label.percentage, "%"] })] }) });
+    }, [label === null || label === void 0 ? void 0 : label.type, label === null || label === void 0 ? void 0 : label.percentage, label === null || label === void 0 ? void 0 : label.arrow]);
+    return _jsxs("div", { className: classNames(["zen-overview", className ? className : ""]), children: [icon ? _jsx("div", { className: "zen-overview__icon", children: icon }) : null, _jsxs("div", { className: classNames(["zen-overview__content", icon ? "" : "zen-overview__content--full"]), children: [_jsx("div", { className: "zen-overview__title zen-ellipsis heading-05", children: title }), _jsxs("div", { className: "zen-overview__additional", children: [_jsx("div", { className: "zen-overview__description zen-ellipsis body-04", children: description }), label ? _jsx("div", { className: "zen-overview__label", children: getLabel() }) : null] })] })] });
+};

package/esm/pageHeader/pageHeader.d.ts

@@ -0,0 +1,16 @@
+import "./pageHeader.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import React, { ReactElement } from "react";
+import { IPageHeaderFilters } from "./pageHeaderFilters";
+import { IPageHeaderActions } from "./pageHeaderActions";
+export interface IPageHeader extends IZenComponentProps {
+    children: ReactElement | ReactElement[] | (ReactElement | null | undefined)[] | null | undefined;
+}
+interface IPageHeaderComponents {
+    Filters: React.FC<IPageHeaderFilters>;
+    Actions: React.FC<IPageHeaderActions>;
+}
+export declare const PageHeaderDisplayName = "PageHeader";
+export declare const PageHeaderInner: React.FC<IPageHeader>;
+export declare const PageHeader: React.FC<IPageHeader> & IPageHeaderComponents;
+export {};

package/esm/pageHeader/pageHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { regulatePageHeaderChildren } from "./pageHeaderHelpers";
+import { PageHeaderFilters } from "./pageHeaderFilters";
+import { PageHeaderActions } from "./pageHeaderActions";
+import { HeaderCustomContent } from "../header/components/collapsedItemsControl/collapsedItemsControl";
+import { useMobileClassName } from "../utils/theme/useMobileClassName";
+export const PageHeaderDisplayName = "PageHeader";
+export const PageHeaderInner = ({ className, children }) => {
+    const [filters, actions] = useMemo(() => regulatePageHeaderChildren(children), [children]);
+    const pageHeaderMobileClassName = useMobileClassName("zen-page-header-component");
+    const [content, setContent] = useState(null);
+    return (_jsx("div", { className: classNames(["zen-page-header-component", pageHeaderMobileClassName || "", className || ""]), children: _jsxs(HeaderCustomContent.Provider, { value: { content, setContent }, children: [filters.length > 0 ? filters : _jsx(PageHeaderFilters, { className: "zen-page-header-component__filters--empty" }), actions] }) }));
+};
+export const PageHeader = memo(PageHeaderInner);
+PageHeader.Filters = PageHeaderFilters;
+PageHeader.Actions = PageHeaderActions;
+PageHeader.displayName = PageHeaderDisplayName;

package/esm/pageHeader/pageHeaderActions.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { PageHeaderButton } from "./pageHeaderButton";
+import { PageHeaderMenu } from "./pageHeaderMenu";
+type HeaderAction = React.ReactElement<typeof PageHeaderButton> | React.ReactElement<typeof PageHeaderMenu>;
+export interface IPageHeaderActions {
+    children?: HeaderAction | HeaderAction[] | null | undefined;
+    className?: string;
+}
+export declare const PageHeaderActions: ({ className, children }: IPageHeaderActions) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/esm/pageHeader/pageHeaderActions.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { isNamedChildComponent } from "../header/headerHelpers";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import React from "react";
+import { PageToolbarCollapsedItemsControl } from "../header/components/collapsedItemsControl/collapsedItemsControl";
+import { PageHeaderButtonDisplayName } from "./pageHeaderButton";
+import { PageHeaderMenuDisplayName } from "./pageHeaderMenu";
+import { getItemsFromFragments } from "./pageHeaderHelpers";
+import { usePortal } from "../commonHelpers/hooks/usePortal";
+export const PageHeaderActions = ({ className = "", children }) => {
+    const isMobile = useMobile();
+    const childrenArray = useMemo(() => getItemsFromFragments(
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    Children.toArray(children).filter((child) => child !== null && child !== undefined && React.isValidElement(child))), [children]);
+    const nonFittingElements = useMemo(() => childrenArray.slice(2, childrenArray.length), [childrenArray]);
+    const fittingElements = useMemo(() => childrenArray.slice(0, 2).map(el => {
+        if (isNamedChildComponent(el, PageHeaderButtonDisplayName)) {
+            return React.cloneElement(el, { key: el.props.id, children: undefined });
+        }
+        if (isNamedChildComponent(el, PageHeaderMenuDisplayName)) {
+            return React.cloneElement(el, { key: el.props.id, onlyIcon: true });
+        }
+        return el;
+    }), [childrenArray]);
+    const moreButton = useMemo(() => (_jsx(PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
+    const actionsContent = childrenArray.length ? (_jsxs("div", { className: classNames(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const portal = usePortal(actionsContent);
+    // For mobile, render actions in a portal at the bottom center of viewport
+    if (isMobile && actionsContent) {
+        return portal;
+    }
+    return actionsContent;
+};

package/esm/pageHeader/pageHeaderButton.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IButton } from "../button/button";
+import { TButtonIconPosition } from "../textIconButton/textIconButton";
+import { TSvgIconSize } from "../svgIcon/svgIconSize";
+import { IIcon } from "../icons/icon";
+export interface IPageHeaderButton extends Omit<IButton, "onClick" | "icon" | "title"> {
+    id: string;
+    icon: React.FC<IIcon>;
+    title: string;
+    iconPosition?: TButtonIconPosition;
+    iconClasses?: string;
+    iconSize?: TSvgIconSize;
+    onClick?: (id: string, event: React.MouseEvent) => void;
+}
+export declare const PageHeaderButtonDisplayName = "PageHeaderButton";
+export declare const PageHeaderButton: {
+    ({ id, children, icon, iconPosition, className, onClick, title, ...restProps }: IPageHeaderButton): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/pageHeader/pageHeaderButton.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const PageHeaderButtonDisplayName = "PageHeaderButton";
+export const PageHeaderButton = (_a) => {
+    var { id, children, icon, iconPosition = ButtonIconPosition.Start, className = "", onClick, title } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconPosition", "className", "onClick", "title"]);
+    const fullClassName = classNames(["zen-page-header-button", className || ""]);
+    const props = Object.assign({}, restProps);
+    return _jsx(TextIconButton, Object.assign({ id: id, icon: icon, title: title, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? (e) => onClick(id, e) : undefined }, props, { children: children }));
+};
+PageHeaderButton.displayName = PageHeaderButtonDisplayName;

package/esm/pageHeader/pageHeaderFilters.d.ts

@@ -0,0 +1,12 @@
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { Filters, FiltersDisplayName } from "../filters/filters";
+import React from "react";
+type ComponentWithFiltersDisplayName = React.ComponentType & {
+    displayName: typeof FiltersDisplayName;
+};
+type ValidFilterElement = React.ReactElement<typeof Filters> | React.ReactElement<ComponentWithFiltersDisplayName> | React.ReactElement;
+export interface IPageHeaderFilters extends IZenComponentProps {
+    children?: ValidFilterElement | ValidFilterElement[] | null | undefined;
+}
+export declare const PageHeaderFilters: ({ className, children }: IPageHeaderFilters) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/pageHeader/pageHeaderFilters.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const PageHeaderFilters = ({ className = "", children }) => (_jsx("div", { className: classNames(["zen-page-header-component__filters", className]), children: children }));

package/esm/pageHeader/pageHeaderHelpers.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import React from "react";
+export declare const getItemsFromFragments: <T extends ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[]) => T[];
+export declare const regulatePageHeaderChildren: (children: ReactElement | ReactElement[] | (ReactElement | null | undefined)[] | null | undefined) => ReactElement<unknown, string | React.JSXElementConstructor<any>>[][];

package/esm/pageHeader/pageHeaderHelpers.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getArrayOfChildren } from "../header/headerHelpers";
+import React from "react";
+import { Filters, FiltersDisplayName } from "../filters/filters";
+import { PageHeaderFilters } from "./pageHeaderFilters";
+import { PageHeaderActions } from "./pageHeaderActions";
+import { PageHeaderButton } from "./pageHeaderButton";
+import { PageHeaderMenu } from "./pageHeaderMenu";
+export const getItemsFromFragments = (items) => {
+    const itemsArr = [];
+    React.Children.forEach(items, child => {
+        if (React.isValidElement(child) && child.type === React.Fragment) {
+            const fragmentProps = child.props;
+            if (fragmentProps && fragmentProps.children) {
+                const fragmentArr = getArrayOfChildren(fragmentProps.children);
+                itemsArr.push(...fragmentArr.filter(el => React.isValidElement(el)));
+            }
+        }
+        else if (React.isValidElement(child)) {
+            itemsArr.push(child);
+        }
+    });
+    return itemsArr;
+};
+export const regulatePageHeaderChildren = (children) => {
+    const filters = [];
+    const actions = [];
+    const wrappedActions = [];
+    const childrenArray = getArrayOfChildren(children).filter(child => child !== null && child !== undefined);
+    const preparedChildrenArr = getItemsFromFragments(childrenArray);
+    preparedChildrenArr.forEach(child => {
+        const isValidElement = React.isValidElement(child);
+        if (!filters.length && isValidElement && child.type === PageHeaderFilters) {
+            filters.push(child);
+            return;
+        }
+        if (!filters.length && isValidElement && (child.type === Filters || child.type.displayName === FiltersDisplayName)) {
+            filters.push(_jsx(PageHeaderFilters, { children: child }, "page-header-filters-key"));
+            return;
+        }
+        if (!wrappedActions.length && isValidElement && child.type === PageHeaderActions) {
+            wrappedActions.push(child);
+            return;
+        }
+        if (isValidElement && (child.type === PageHeaderButton || child.type === PageHeaderMenu)) {
+            actions.push(child);
+            return;
+        }
+    });
+    if (wrappedActions.length === 0 && actions.length > 0) {
+        wrappedActions.push(_jsx(PageHeaderActions, { children: actions }, "page-header-actions-key"));
+    }
+    return [filters, wrappedActions];
+};

package/esm/pageHeader/pageHeaderMenu.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IIcon } from "../icons/icon";
+import { IHeaderMenu } from "../header/headerMenu";
+export interface IPageHeaderMenu extends Omit<IHeaderMenu, "important" | "icon" | "inContextMenu"> {
+    icon: React.FC<IIcon>;
+    onlyIcon?: boolean;
+}
+export declare const PageHeaderMenuDisplayName = "PageHeaderMenu";
+export declare const PageHeaderMenu: {
+    (props: IPageHeaderMenu): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/pageHeader/pageHeaderMenu.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeaderMenu } from "../header/headerMenu";
+export const PageHeaderMenuDisplayName = "PageHeaderMenu";
+export const PageHeaderMenu = (props) => _jsx(HeaderMenu, Object.assign({}, props));
+PageHeaderMenu.displayName = PageHeaderMenuDisplayName;

package/esm/pageLayout/pageContentLayout/pageContentLayout.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+export interface IPageContentLayout extends IZenComponentProps {
+    id?: string;
+    oldStyle?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
+}
+export declare const PageContentLayout: {
+    ({ id, className, children, oldStyle, ref }: IPageContentLayout): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/pageLayout/pageContentLayout/pageContentLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const PageContentLayout = ({ id, className, children, oldStyle, ref }) => {
+    const cssClassName = classNames([
+        "zen-page-layout__content",
+        oldStyle ? "zen-page-layout__content--old" : "",
+        className || ""
+    ]);
+    return _jsx("div", { id: id, className: cssClassName, ref: ref, children: children });
+};
+PageContentLayout.displayName = "PageContentLayout";

package/esm/pageLayout/pageLayout.d.ts

@@ -0,0 +1,3 @@
+import "./pageLayout.less";
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
+export declare const PageLayout: ({ id, className, children }: IZenIdComponentProps) => import("react/jsx-runtime").JSX.Element;

package/esm/pageLayout/pageLayout.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const PageLayout = ({ id, className, children }) => _jsx("section", { id: id, className: classNames(["zen-page-layout", className || ""]), children: children });

package/esm/pageSection/pageSection.d.ts

@@ -0,0 +1,6 @@
+import "./pageSection.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IPageSection extends IZenComponentProps {
+    title: string;
+}
+export declare const PageSection: ({ title, className, children }: IPageSection) => import("react/jsx-runtime").JSX.Element;

package/esm/pageSection/pageSection.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const PageSection = ({ title, className, children }) => _jsxs("section", { className: classNames(["zen-page-section", className || ""]), children: [_jsx("div", { className: "zen-page-section__title", children: title }), _jsx("div", { className: "zen-page-section__content", children: children })] });

package/esm/pagination/pagination.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from "react";
+import "./pagination.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { PaginationType } from "./paginationType";
+export interface IPagination extends IZenComponentProps {
+    activePage: number;
+    total: number;
+    perPage: number;
+    onChange: (newActivePage: number) => void;
+    className?: string;
+    includeText?: boolean;
+    type?: PaginationType;
+    gridRef?: RefObject<HTMLElement | null>;
+    disabled?: boolean;
+}
+export declare const Pagination: ({ className, activePage, total, perPage, onChange, disabled, includeText, type, gridRef }: IPagination) => import("react/jsx-runtime").JSX.Element;

package/esm/pagination/pagination.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { PaginationArrow } from "./paginationArrow";
+import { PaginationButtonsRow } from "./paginationButtonsRow";
+import { PaginationText } from "./paginationText/paginationText";
+import { PaginationType } from "./paginationType";
+export const Pagination = ({ className, activePage, total, perPage, onChange, disabled, includeText = false, type = PaginationType.Compact, gridRef }) => {
+    var _a, _b;
+    const gridNode = ((_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-data-grid")) ?
+        gridRef.current : (_b = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(".zen-data-grid");
+    const displayedPagesCount = 6;
+    const totalNumberOfPages = useMemo(() => Math.ceil(total / perPage), [total, perPage]);
+    const getPaginationValues = () => {
+        const paginationArr = [];
+        const isBeginningOfPaginationRange = () => activePage <= Math.round(displayedPagesCount / 2) || totalNumberOfPages <= displayedPagesCount;
+        const isEndOfPaginationRange = () => activePage >= totalNumberOfPages - Math.round(displayedPagesCount / 2) || totalNumberOfPages <= displayedPagesCount;
+        if (totalNumberOfPages < displayedPagesCount) {
+            for (let i = 0; i < totalNumberOfPages; i++) {
+                paginationArr[i] = i;
+            }
+        }
+        else if (isBeginningOfPaginationRange()) {
+            for (let i = 0; i < displayedPagesCount; i++) {
+                paginationArr[i] = i;
+            }
+        }
+        else if (isEndOfPaginationRange()) {
+            paginationArr[0] = 0;
+            for (let i = 1; i < displayedPagesCount; i++) {
+                paginationArr[i] = totalNumberOfPages - displayedPagesCount + i;
+            }
+        }
+        else {
+            paginationArr[0] = 0;
+            let firstNumberInRange = activePage - 2;
+            for (let i = 1; i < displayedPagesCount; i++) {
+                paginationArr[i] = firstNumberInRange++;
+            }
+        }
+        return paginationArr;
+    };
+    const handlePageChange = (newActivePage) => {
+        onChange(newActivePage);
+        if (gridNode && typeof gridNode.scrollTo === "function") {
+            gridNode.scrollTo({ top: 0, behavior: "instant" });
+        }
+    };
+    const isSinglePage = total <= perPage;
+    return _jsxs("div", { className: classNames(["zen-pagination", `zen-pagination--type-${type}`, className ? className : ""]), children: [includeText
+                ? _jsx(PaginationText, { amount: total, from: total === 0 ? total : activePage * perPage + 1, to: Math.min((activePage + 1) * perPage, total) })
+                : null, isSinglePage
+                ? null
+                : _jsx(PaginationArrow, { value: "previous", disabled: activePage === 0 || disabled, arrowButtonHandler: () => handlePageChange(activePage - 1), type: type }), type === PaginationType.Normal
+                ? _jsx(PaginationButtonsRow, { paginationValues: getPaginationValues(), activePage: activePage, upperBoundIndex: totalNumberOfPages - 1, onChange: handlePageChange })
+                : null, isSinglePage
+                ? null
+                : _jsx(PaginationArrow, { value: "next", disabled: activePage >= totalNumberOfPages - 1 || disabled, arrowButtonHandler: () => handlePageChange(activePage + 1), type: type })] });
+};

package/esm/pagination/paginationArrow.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PaginationType } from "./paginationType";
+export type TArrowsValue = "previous" | "next";
+export interface IPaginationArrow {
+    value: TArrowsValue;
+    disabled?: boolean;
+    type?: PaginationType;
+    arrowButtonHandler: (e: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const PaginationArrow: ({ value, disabled, type, arrowButtonHandler }: IPaginationArrow) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];

package/esm/pagination/paginationArrow.js

@@ -0,0 +1,89 @@
+import { injectString } from "../utils/localization/translationsDictionary";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { SvgIconSize } from "../svgIcon/svgIconSize";
+import { PaginationType } from "./paginationType";
+import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
+import { ButtonType } from "../button/buttonType";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { IconChevronRight } from "../icons/iconChevronRight";
+import { IconArrowRight } from "../icons/iconArrowRight";
+injectString("cs", "Previous page", "P\u0159edchoz\xED str\xE1nka");
+injectString("da-DK", "Previous page", "Forrige side");
+injectString("de", "Previous page", "Vorherige Seite");
+injectString("en", "Previous page", "Previous page");
+injectString("es", "Previous page", "P\xE1gina anterior");
+injectString("fi-FI", "Previous page", "Edellinen sivu");
+injectString("fr", "Previous page", "Page pr\xE9c\xE9dente");
+injectString("fr-FR", "Previous page", "Page pr\xE9c\xE9dente");
+injectString("hu-HU", "Previous page", "El\u0151z\u0151 oldal");
+injectString("id", "Previous page", "Halaman sebelumnya");
+injectString("it", "Previous page", "Pagina precedente");
+injectString("ja", "Previous page", "\u524D\u306E\u30DA\u30FC\u30B8");
+injectString("ko-KR", "Previous page", "\uC774\uC804 \uD398\uC774\uC9C0");
+injectString("ms", "Previous page", "Halaman sebelumnya");
+injectString("nb-NO", "Previous page", "Forrige side");
+injectString("nl", "Previous page", "Vorige pagina");
+injectString("pl", "Previous page", "Poprzednia strona");
+injectString("pt-BR", "Previous page", "P\xE1gina anterior");
+injectString("pt-PT", "Previous page", "P\xE1gina anterior");
+injectString("sk-SK", "Previous page", "Predch\xE1dzaj\xFAca str\xE1nka");
+injectString("sv", "Previous page", "F\xF6reg\xE5ende sida");
+injectString("th", "Previous page", "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32");
+injectString("tr", "Previous page", "\xD6nceki sayfa");
+injectString("zh-Hans", "Previous page", "\u4E0A\u4E00\u9875");
+injectString("zh-TW", "Previous page", "\u4E0A\u4E00\u9801");
+injectString("ro-RO", "Previous page", "Pagina anterioar\u0103");
+injectString("cs", "Next page", "Dal\u0161\xED str\xE1nka");
+injectString("da-DK", "Next page", "N\xE6ste side");
+injectString("de", "Next page", "N\xE4chste Seite");
+injectString("en", "Next page", "Next page");
+injectString("es", "Next page", "Siguiente p\xE1gina");
+injectString("fi-FI", "Next page", "Seuraava sivu");
+injectString("fr", "Next page", "Page suivante");
+injectString("fr-FR", "Next page", "Page suivante");
+injectString("hu-HU", "Next page", "K\xF6vetkez\u0151 oldal");
+injectString("id", "Next page", "Halaman selanjutnya");
+injectString("it", "Next page", "Pagina successiva");
+injectString("ja", "Next page", "\u6B21\u306E\u30DA\u30FC\u30B8");
+injectString("ko-KR", "Next page", "\uB2E4\uC74C \uD398\uC774\uC9C0");
+injectString("ms", "Next page", "Halaman seterusnya");
+injectString("nb-NO", "Next page", "Neste side");
+injectString("nl", "Next page", "Volgende pagina");
+injectString("pl", "Next page", "Nast\u0119pna strona");
+injectString("pt-BR", "Next page", "Pr\xF3xima p\xE1gina");
+injectString("pt-PT", "Next page", "Pr\xF3xima p\xE1gina");
+injectString("sk-SK", "Next page", "\u010Eal\u0161ia str\xE1nka");
+injectString("sv", "Next page", "N\xE4sta sida");
+injectString("th", "Next page", "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B");
+injectString("tr", "Next page", "Sonraki sayfa");
+injectString("zh-Hans", "Next page", "\u4E0B\u4E00\u9875");
+injectString("zh-TW", "Next page", "\u4E0B\u4E00\u9801");
+injectString("ro-RO", "Next page", "Pagina urm\u0103toare");
+export const PaginationArrow = ({
+  value,
+  disabled,
+  type = PaginationType.Normal,
+  arrowButtonHandler
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const previousButtonTitle = translate("Previous page");
+  const nextButtonTitle = translate("Next page");
+  const buttonTitle = value === "next" ? nextButtonTitle : previousButtonTitle;
+  return _jsx(TextIconButton, {
+    className: "zen-pagination__arrow-navigation-button",
+    "data-page": value,
+    "aria-label": buttonTitle,
+    title: buttonTitle,
+    disabled: disabled,
+    onClick: arrowButtonHandler,
+    type: type === PaginationType.Compact ? ButtonType.TertiaryBlack : ButtonType.Secondary,
+    icon: type === PaginationType.Compact ? IconChevronRight : IconArrowRight,
+    iconSize: type === PaginationType.Compact ? SvgIconSize.Big : SvgIconSize.Large,
+    iconPosition: ButtonIconPosition.Start,
+    iconClasses: classNames(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""])
+  });
+};
+export const TRANSLATIONS = ["Previous page", "Next page"];

package/esm/pagination/paginationButtonsRow.d.ts

@@ -0,0 +1,8 @@
+import "./pagination.less";
+export interface IPaginationButtonsRow {
+    activePage: number;
+    paginationValues: number[];
+    upperBoundIndex: number;
+    onChange: (pageIndex: any) => void;
+}
+export declare const PaginationButtonsRow: ({ paginationValues, activePage, upperBoundIndex, onChange }: IPaginationButtonsRow) => import("react/jsx-runtime").JSX.Element;