@geotab/zenith 1.22.2-beta.0 → 1.22.2

package/dist/list/itemData/itemData.js

@@ -0,0 +1,25 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemData = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const viewportContext_1 = require("../viewportProvider/viewportContext");
+const itemDataInternal_1 = require("./itemDataInternal");
+const ItemDataInner = (_a) => {
+    var { id } = _a, rest = __rest(_a, ["id"]);
+    const { isInViewport } = (0, react_1.useContext)(viewportContext_1.viewportContext);
+    const visible = (0, react_1.useMemo)(() => isInViewport(id), [id, isInViewport]);
+    return (0, jsx_runtime_1.jsx)(itemDataInternal_1.ItemDataInternal, Object.assign({ id: id, visible: visible }, rest), id);
+};
+exports.ItemData = (0, react_1.memo)(ItemDataInner);

package/dist/list/itemData/itemDataInternal.d.ts

@@ -0,0 +1,29 @@
+import { FunctionComponent, ReactNode } from "react";
+import { IIcon } from "../../icons/icon";
+import { TListItemAction } from "../interfaces";
+interface IItemDataData {
+    label?: string;
+    value: string | number | React.ReactNode;
+    link?: string;
+    icon?: FunctionComponent<IIcon> | ReactNode;
+    iconClassName?: string;
+}
+export interface IItemData {
+    id: string;
+    visible?: boolean;
+    icon?: FunctionComponent<IIcon> | ReactNode;
+    iconClassName?: string;
+    name: string;
+    link?: string;
+    secondary?: string;
+    status?: React.ReactNode;
+    actions?: TListItemAction[];
+    data?: IItemDataData[];
+    onClick?: () => void;
+    checked?: boolean;
+    onCheck?: (checked: boolean) => void;
+    isMobile?: boolean;
+    isDrive?: boolean;
+}
+export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/list/itemData/itemDataInternal.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemDataInternal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interfaces_1 = require("../interfaces");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const button_1 = require("../../button/button");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const iconDotVertical_1 = require("../../icons/iconDotVertical");
+const menu_1 = require("../../menu/menu");
+const isActiveElement_1 = require("../utils/isActiveElement");
+const checkbox_1 = require("../../checkbox/checkbox");
+const ItemDataInternalInner = ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const driveClassName = (0, react_1.useMemo)(() => isDrive
+        ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet"
+        : "", [isDrive, isMobile]);
+    const renderActions = (0, react_1.useCallback)(() => {
+        if (!actions || actions.length === 0) {
+            return null;
+        }
+        return (0, jsx_runtime_1.jsx)(menu_1.Menu, { alignment: "bottom-right", title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-item-data__more-button", "aria-label": translate("More"), title: translate("More"), children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "large" }) }), children: actions.map((action) => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: action.name, name: action.name, onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined, link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined }, action.name)) });
+    }, [actions, translate]);
+    const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
+        if (typeof iconComponent === "function") {
+            return (0, react_1.createElement)(iconComponent, { size: "large", className: (0, classNames_1.classNames)([className || "", iClassName || ""]) });
+        }
+        return iconComponent;
+    }, []);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        if (!onClick) {
+            return;
+        }
+        if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
+            return;
+        }
+        onClick();
+    }, [onClick]);
+    const handleCheck = (0, react_1.useCallback)((e) => {
+        if (onCheck) {
+            onCheck(e.target.checked);
+        }
+    }, [onCheck]);
+    const hasCheckbox = (0, react_1.useMemo)(() => checked !== undefined && onCheck, [checked, onCheck]);
+    const placeholderHeight = (0, react_1.useMemo)(() => {
+        let plHeight = secondary ? 32 : (icon ? 24 : 16);
+        if (data) {
+            plHeight += 4 + data.length * 16 + (data.length - 1) * 4;
+        }
+        return { height: `${plHeight + 12 * 2 + 1}px` };
+    }, [data, icon, secondary]);
+    const classNamesList = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]), [driveClassName]);
+    if (!visible) {
+        return (0, jsx_runtime_1.jsx)("li", { style: placeholderHeight, className: classNamesList, "data-list-item-id": id }, id);
+    }
+    return (0, jsx_runtime_1.jsxs)("li", { className: (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__main", children: [hasCheckbox && (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "zen-item-data__checkbox", checked: checked, onChange: handleCheck, title: name }), icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__identifier", children: [link
+                                        ? (0, jsx_runtime_1.jsx)("a", { href: link, className: "zen-item-data__link zen-link zen-link--light zen-link--inline", children: name })
+                                        : (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__secondary", children: secondary }) : null] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__status", children: status }) : null, renderActions(), onClick ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-item-data__click", onClick: onClick, title: translate("Open"), "aria-label": translate("Open"), children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-item-data__click-icon" }) }) : null] })] }), data && data.length > 0
+                ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__secondary-data", children: [hasCheckbox ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__checkbox-placeholder" }) : null, icon ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__icon-placeholder" }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__data", children: data.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__data-row", children: [item.label ? (0, jsx_runtime_1.jsx)("span", { className: "zen-item-data__data-label", children: item.label }) : null, (0, jsx_runtime_1.jsxs)("span", { className: "zen-item-data__data-value", children: [item.icon ? renderIcon(item.icon, item.iconClassName, "zen-item-data__data-value-icon") : null, item.link
+                                                ? (0, jsx_runtime_1.jsx)("a", { className: "zen-link zen-link--inline zen-link--light", href: item.link, children: item.value })
+                                                : (0, jsx_runtime_1.jsx)("span", { className: "zen-item-data__data-value-text", children: item.value })] })] }, index))) })] })
+                : null] }, id);
+};
+exports.ItemDataInternal = (0, react_1.memo)(ItemDataInternalInner);

package/dist/list/itemData/itemDataWaiting.d.ts

@@ -0,0 +1,5 @@
+import "./itemData.less";
+export interface IItemDataWaiting {
+    id: string;
+}
+export declare const ItemDataWaiting: ({ id }: IItemDataWaiting) => import("react/jsx-runtime").JSX.Element;

package/dist/list/itemData/itemDataWaiting.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemDataWaiting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const skeleton_1 = require("../../skeleton/skeleton");
+const ItemDataWaiting = ({ id }) => (0, jsx_runtime_1.jsxs)("li", { className: (0, classNames_1.classNames)(["zen-item-data"]), "data-list-item-id": id, children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "zen-item-data__waiting" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "zen-item-data__waiting" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "zen-item-data__waiting" })] }, id);
+exports.ItemDataWaiting = ItemDataWaiting;

package/dist/list/list.d.ts

@@ -0,0 +1,13 @@
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import "./list.less";
+import { TListType } from "./interfaces";
+export interface IList extends IZenComponentProps {
+    type?: TListType;
+    onChangeOrder?: (startPosition: number, endPosition: number) => void;
+    checked?: string[];
+    onCheck?: (checked: string[]) => void;
+    onListEnd?: () => void;
+    isLoading?: boolean;
+    waitingItems?: number;
+}
+export declare const List: ({ type, children, onChangeOrder, checked, onCheck, onListEnd, isLoading, waitingItems }: IList) => import("react/jsx-runtime").JSX.Element;

package/dist/list/list.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useDragAndDrop_1 = require("./hooks/useDragAndDrop");
+const isDataListitem_1 = require("./utils/isDataListitem");
+const useDrive_1 = require("../utils/theme/useDrive");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const viewportProvider_1 = require("./viewportProvider/viewportProvider");
+const useVirtualScroll_1 = require("./hooks/useVirtualScroll");
+const useLazyLoading_1 = require("./hooks/useLazyLoading");
+const getLoadingItems_1 = require("./utils/getLoadingItems");
+const List = ({ type, children, onChangeOrder, checked, onCheck, onListEnd, isLoading, waitingItems }) => {
+    const listId = (0, react_1.useId)();
+    const listRef = (0, react_1.useRef)(null);
+    const onChangeOrderCallback = (0, react_1.useCallback)((startPosition, endPosition) => {
+        if (onChangeOrder) {
+            onChangeOrder(startPosition, endPosition);
+        }
+    }, [onChangeOrder]);
+    const { onDragStart } = (0, useDragAndDrop_1.useDragAndDrop)(listRef, onChangeOrderCallback);
+    const isDrive = (0, useDrive_1.useDrive)();
+    const isMobile = (0, useMobile_1.useMobile)();
+    const { isInViewport } = (0, useVirtualScroll_1.useVirtualScroll)(listRef, children);
+    (0, useLazyLoading_1.useLazyLoading)(listRef, isLoading, onListEnd);
+    const childrenArray = (0, react_1.useMemo)(() => react_1.Children.map(children, (child) => {
+        const props = {
+            isDrive: isDrive,
+            isMobile: isMobile
+        };
+        if (onChangeOrder) {
+            props.onDragStart = onDragStart;
+        }
+        if (onCheck && checked && (0, isDataListitem_1.isDataListItem)(child)) {
+            const id = child.props.id;
+            props.checked = checked.indexOf(id) > -1;
+            props.onCheck = (itemChecked) => onCheck(itemChecked ? [...checked, id] : checked.filter((c) => c !== id));
+        }
+        if (Object.keys(props).length > 0) {
+            return (0, react_1.cloneElement)(child, props);
+        }
+        return child;
+    }), [checked, children, isDrive, isMobile, onChangeOrder, onCheck, onDragStart]);
+    const loadingChildren = (0, react_1.useMemo)(() => {
+        if (!isLoading) {
+            return null;
+        }
+        const defaultWaitingItems = type === "data" ? 50 : 10;
+        return (0, getLoadingItems_1.getLoadingItems)(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile);
+    }, [isDrive, isLoading, isMobile, listId, type, waitingItems]);
+    return (0, jsx_runtime_1.jsx)(viewportProvider_1.ViewportProvider, { isInViewport: isInViewport, children: (0, jsx_runtime_1.jsxs)("ul", { className: "zen-list", ref: listRef, children: [childrenArray, loadingChildren] }) });
+};
+exports.List = List;

package/dist/list/listItem/listItem.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import "./listItem.less";
+import { TListItemAction } from "../interfaces";
+export interface IListItem extends IZenComponentProps {
+    id: string;
+    image?: ReactNode;
+    name: string;
+    secondary?: string;
+    status?: ReactNode;
+    actions?: TListItemAction[];
+    onClick?: () => void;
+    link?: string;
+    onDragStart?: (e: React.PointerEvent<HTMLElement>) => void;
+}
+export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;

package/dist/list/listItem/listItem.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const iconGrab_1 = require("../../icons/iconGrab");
+const button_1 = require("../../button/button");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const menu_1 = require("../../menu/menu");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const iconDotVertical_1 = require("../../icons/iconDotVertical");
+const interfaces_1 = require("../interfaces");
+const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const useIconSize_1 = require("../../utils/theme/useIconSize");
+const iconChevronRight_1 = require("../../icons/iconChevronRight");
+const isActiveElement_1 = require("../utils/isActiveElement");
+const ListItem = ({ id, className, image, name, secondary, status, actions, onClick, link, onDragStart }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item");
+    const iconSize = (0, useIconSize_1.useIconSize)();
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const itemRef = (0, react_1.useRef)(null);
+    const renderActions = (0, react_1.useCallback)(() => {
+        if (!actions || actions.length === 0) {
+            return null;
+        }
+        const { primaryActions, secondaryActions } = actions.reduce((acc, action) => {
+            if (!isMobile && action.hasOwnProperty("icon")) {
+                acc.primaryActions.push(action);
+            }
+            else {
+                acc.secondaryActions.push(action);
+            }
+            return acc;
+        }, { primaryActions: [], secondaryActions: [] });
+        const buttons = (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__actions", children: primaryActions.map((action) => (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__action-button", onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined, link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined, children: action.icon ? (0, react_1.createElement)(action.icon, { size: iconSize }) : null }, action.name)) });
+        const menu = secondaryActions.length > 0
+            ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { alignment: "bottom-right", title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__more-button", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "large" }) }), children: secondaryActions.map((action) => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: action.name, name: action.name, onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined, link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined }, action.name)) })
+            : null;
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [buttons, menu] });
+    }, [actions, iconSize, isMobile, translate]);
+    const isDndElement = (0, react_1.useCallback)((el) => {
+        if (!el) {
+            return false;
+        }
+        if (typeof el.className !== "string") {
+            return false;
+        }
+        return el.className.indexOf("zen-list-item__dnd") !== -1;
+    }, []);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        if (!onClick && !link) {
+            return;
+        }
+        if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target) || isDndElement(e.target)) {
+            return;
+        }
+        if (onClick) {
+            onClick();
+            return;
+        }
+        if (itemRef.current) {
+            const linkEl = itemRef.current.querySelector(".zen-list-item__click");
+            linkEl === null || linkEl === void 0 ? void 0 : linkEl.click();
+        }
+    }, [isDndElement, link, onClick]);
+    const clickableClassName = (0, react_1.useMemo)(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (0, jsx_runtime_1.jsxs)("li", { id: id, className: (0, classNames_1.classNames)(["zen-list-item", driveClassName || "", clickableClassName, className || ""]), onClick: handleClick, ref: itemRef, children: [onDragStart ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__dnd", onPointerDown: onDragStart, children: (0, jsx_runtime_1.jsx)(iconGrab_1.IconGrab, { size: "large" }) }) : null, image ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__image", children: image }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-list-item__identifier", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__name", children: name }), (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__secondary", children: secondary })] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item__status", children: status }) : null, renderActions(), onClick || link ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-list-item__click", onClick: onClick, link: link, children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-list-item__click-icon" }) }) : null] });
+};
+exports.ListItem = ListItem;

package/dist/list/listItem/listItemWaiting.d.ts

@@ -0,0 +1,8 @@
+import "./listItem.less";
+interface IListItemWaiting {
+    id: string;
+    isDrive?: boolean;
+    isMobile?: boolean;
+}
+export declare const ListItemWaiting: ({ id, isDrive, isMobile }: IListItemWaiting) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/list/listItem/listItemWaiting.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemWaiting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const skeleton_1 = require("../../skeleton/skeleton");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const ListItemWaiting = ({ id, isDrive, isMobile }) => {
+    const driveClassName = (0, react_1.useMemo)(() => isDrive
+        ? isMobile ? "zen-list-item--drive" : "zen-list-item--drive-tablet"
+        : "", [isDrive, isMobile]);
+    return (0, jsx_runtime_1.jsx)("li", { id: id, className: (0, classNames_1.classNames)(["zen-list-item", driveClassName]), children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "zen-list-item__waiting" }) });
+};
+exports.ListItemWaiting = ListItemWaiting;

package/dist/list/utils/changeOrder.d.ts

@@ -0,0 +1 @@
+export declare function changeOrder<T>(data: T[], startPosition: number, endPosition: number): T[];

package/dist/list/utils/changeOrder.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changeOrder = void 0;
+function changeOrder(data, startPosition, endPosition) {
+    const newData = [...data];
+    const [movedElement] = newData.splice(startPosition, 1);
+    newData.splice(endPosition, 0, movedElement);
+    return newData;
+}
+exports.changeOrder = changeOrder;

package/dist/list/utils/findItemPosition.d.ts

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

package/dist/list/utils/findItemPosition.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findItemPosition = void 0;
+const findItemPosition = (element) => {
+    const parent = element.parentElement;
+    if (!parent) {
+        return -1;
+    }
+    let ignoreOriginalElement = false;
+    for (let i = 0; i < parent.children.length; i++) {
+        const currentChild = parent.children[i];
+        ignoreOriginalElement = ignoreOriginalElement || currentChild.classList.contains("zen-list-item--dragging");
+        if (currentChild === element) {
+            return i - (ignoreOriginalElement ? 1 : 0);
+        }
+    }
+    return -1;
+};
+exports.findItemPosition = findItemPosition;

package/dist/list/utils/findListElement.d.ts

@@ -0,0 +1 @@
+export declare const findListElement: (element: HTMLElement) => HTMLElement | null;

package/dist/list/utils/findListElement.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findListElement = void 0;
+const findListElement = (element) => {
+    if (element.classList.contains("zen-list-item")) {
+        return element;
+    }
+    if (element.parentElement) {
+        return (0, exports.findListElement)(element.parentElement);
+    }
+    return null;
+};
+exports.findListElement = findListElement;

package/dist/list/utils/findVisibleListItems.d.ts

@@ -0,0 +1 @@
+export declare const findVisibleListItems: (rows: Element[], top: number, bottom: number) => HTMLElement[];

package/dist/list/utils/findVisibleListItems.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findVisibleListItems = void 0;
+const findFirstVisible = (rows, top, rangeStart, rangeEnd) => {
+    const middle = Math.floor((rangeStart + rangeEnd) / 2);
+    const row = rows[middle];
+    const rowTop = row.getBoundingClientRect().top;
+    if (rowTop >= top) {
+        if (middle - rangeStart <= 1) {
+            return middle;
+        }
+        return findFirstVisible(rows, top, rangeStart, middle);
+    }
+    if (rangeEnd - middle <= 1) {
+        return middle;
+    }
+    return findFirstVisible(rows, top, middle, rangeEnd);
+};
+const findVisibleListItems = (rows, top, bottom) => {
+    if (rows.length === 0) {
+        return [];
+    }
+    let foundVisible = false;
+    let from = 0;
+    let to = 0;
+    const rowsLength = rows.length;
+    const firstVisible = findFirstVisible(rows, top, 0, rowsLength - 1);
+    const startIndex = Math.max(0, firstVisible - 1);
+    for (let i = startIndex; i < rowsLength; i++) {
+        const row = rows[i];
+        const { top: rowTop, bottom: rowBottom } = row.getBoundingClientRect();
+        if (rowTop >= top && rowBottom <= bottom) {
+            if (!foundVisible) {
+                from = i - 1;
+            }
+            foundVisible = true;
+            continue;
+        }
+        // if we found visible rows, then we can stop searching
+        if (foundVisible) {
+            // add last row if it is partially visible and next one for correct keyboard navigation with lazy loading
+            to = i + 1;
+            break;
+        }
+    }
+    // if we found visible rows, but the last row is not visible, then we need to add it
+    if (foundVisible && to === 0) {
+        to = rowsLength - 1;
+    }
+    const visibleRows = [];
+    if (from <= to) {
+        from = Math.max(0, from);
+        to = Math.min(rows.length - 1, to);
+        for (let i = from; i <= to; ++i) {
+            visibleRows.push(rows[i]);
+        }
+    }
+    return visibleRows;
+};
+exports.findVisibleListItems = findVisibleListItems;

package/dist/list/utils/getLoadingItems.d.ts

@@ -0,0 +1,2 @@
+import { TListType } from "../interfaces";
+export declare const getLoadingItems: (type: TListType, count: number, listId: string, isDrive: boolean, isMobile: boolean) => import("react/jsx-runtime").JSX.Element[];

package/dist/list/utils/getLoadingItems.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLoadingItems = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const itemDataWaiting_1 = require("../itemData/itemDataWaiting");
+const itemCompactWaiting_1 = require("../itemCompact/itemCompactWaiting");
+const listItemWaiting_1 = require("../listItem/listItemWaiting");
+const getLoadingItems = (type, count, listId, isDrive, isMobile) => Array.from({ length: count }).map((_, index) => {
+    const id = `${listId}-${index}`;
+    if (type === "data") {
+        return (0, jsx_runtime_1.jsx)(itemDataWaiting_1.ItemDataWaiting, { id: id }, id);
+    }
+    if (type === "compact") {
+        return (0, jsx_runtime_1.jsx)(itemCompactWaiting_1.ItemCompactWaiting, { isDrive: isDrive, isMobile: isMobile }, id);
+    }
+    return (0, jsx_runtime_1.jsx)(listItemWaiting_1.ListItemWaiting, { id: id, isDrive: isDrive, isMobile: isMobile }, id);
+});
+exports.getLoadingItems = getLoadingItems;

package/dist/list/utils/isActiveElement.d.ts

@@ -0,0 +1 @@
+export declare const isActiveElement: (element: HTMLElement, level?: number) => boolean;

package/dist/list/utils/isActiveElement.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isActiveElement = void 0;
+const activeElements = ["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA", "LABEL"];
+const isActiveElement = (element, level = 0) => {
+    if (activeElements.indexOf(element.nodeName) > -1) {
+        return true;
+    }
+    if (level < 4 && element.parentElement) {
+        return (0, exports.isActiveElement)(element.parentElement, level + 1);
+    }
+    return false;
+};
+exports.isActiveElement = isActiveElement;

package/dist/list/utils/isDataListitem.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement, ReactNode } from "react";
+import { IItemData } from "../itemData/itemData";
+export declare const isDataListItem: (item: ReactNode) => item is ReactElement<IItemData, string | import("react").JSXElementConstructor<any>>;

package/dist/list/utils/isDataListitem.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDataListItem = void 0;
+const react_1 = require("react");
+const isDataListItem = (item) => {
+    if (!(0, react_1.isValidElement)(item)) {
+        return false;
+    }
+    return "id" in item.props && "name" in item.props;
+};
+exports.isDataListItem = isDataListItem;

package/dist/list/viewportProvider/viewportContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IViewportContext {
+    isInViewport: (id: string) => boolean;
+}
+export declare const viewportContext: import("react").Context<IViewportContext>;
+export {};

package/dist/list/viewportProvider/viewportContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewportContext = void 0;
+const react_1 = require("react");
+exports.viewportContext = (0, react_1.createContext)({ isInViewport: () => true });

package/dist/list/viewportProvider/viewportProvider.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+interface IViewportProviderProps extends PropsWithChildren {
+    isInViewport: (id: string) => boolean;
+}
+export declare const ViewportProvider: FC<IViewportProviderProps>;
+export {};

package/dist/list/viewportProvider/viewportProvider.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const viewportContext_1 = require("./viewportContext");
+const ViewportProvider = ({ isInViewport, children }) => ((0, jsx_runtime_1.jsx)(viewportContext_1.viewportContext.Provider, { value: { isInViewport }, children: children }));
+exports.ViewportProvider = ViewportProvider;

package/dist/selectList/selectList.js

@@ -29,10 +29,10 @@ exports.defaultListItemHeight = 40;
 const MemoizedSelectListItem = (0, react_2.memo)(selectListItem_1.SelectListItem);
 const SelectListInnerComp = (0, react_2.forwardRef)(({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {} }, listRef) => {
     var _a;
-    const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-list");
+    const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-select-list");
     const state = (0, selectList_helpers_1.getInitialState)({ items, value, multiselect });
     state.activeIndex = activeIndex;
-    return (0, jsx_runtime_1.jsx)("ul", { id: id, ref: listRef, className: (0, classNames_1.classNames)(["zen-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? ((0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id)) : undefined, "aria-label": title, "aria-disabled": disabled, tabIndex: standalone && !disabled ? 0 : -1, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, style: style, children: items.map((item, index) => (0, react_1.createElement)(MemoizedSelectListItem, Object.assign({}, item, { className: (0, classNames_1.classNames)(["zen-list__item", item.className || ""]), key: item.id, showCheckbox: showCheckbox, state: state.itemsState.get(item.id), focused: state.activeIndex === index, onChange: onChangeItem, onClick: onClickItem }), item.children)) });
+    return (0, jsx_runtime_1.jsx)("ul", { id: id, ref: listRef, className: (0, classNames_1.classNames)(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? ((0, selectList_helpers_1.getItemIdByIndex)(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id)) : undefined, "aria-label": title, "aria-disabled": disabled, tabIndex: standalone && !disabled ? 0 : -1, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, style: style, children: items.map((item, index) => (0, react_1.createElement)(MemoizedSelectListItem, Object.assign({}, item, { className: (0, classNames_1.classNames)(["zen-select-list__item", item.className || ""]), key: item.id, showCheckbox: showCheckbox, state: state.itemsState.get(item.id), focused: state.activeIndex === index, onChange: onChangeItem, onClick: onClickItem }), item.children)) });
 });
 SelectListInnerComp.displayName = "SelectListInnerComp";
 const SelectListInner = (0, react_2.memo)(SelectListInnerComp);
@@ -60,7 +60,7 @@ const SelectList = (_a) => {
     }, [multiselect]);
     (0, react_2.useEffect)(() => {
         if (state.activeIndex >= 0 && document.activeElement && listRef.current && (0, isChildOf_1.isChildOf)(document.activeElement, listRef.current)) {
-            const itemEl = listRef.current.querySelector(`.zen-list__item:nth-child(${state.activeIndex + 1})`);
+            const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }
     }, [state.activeIndex]);

package/dist/selectList/selectListItem.js

@@ -26,7 +26,7 @@ const SelectListItem = ({ id, disabled = false, state = checkboxState_1.Checkbox
             driveClassName || "",
             className
         ]), role: "option", "aria-selected": state === checkboxState_1.CheckboxState.On, "aria-disabled": disabled, onClick: onClickFunc, id: id, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
-                "zen-list__item-content",
+                "zen-select-list__item-content",
                 "zen-select-item__wrapper",
                 "zen-ellipsis",
                 multiLevel ? "zen-select-item__wrapper--with-arrow" : ""

package/dist/selectRaw/selectRaw.js

@@ -91,7 +91,7 @@ exports.SelectRaw = react_1.default.forwardRef((props, selectRef) => {
     }, [outerValue, items]);
     react_1.default.useEffect(() => {
         if (state.activeIndex >= 0 && document.activeElement && ref.current && (0, isChildOf_1.isChildOf)(document.activeElement, ref.current)) {
-            const itemEl = ref.current.querySelector(`.zen-list__item:nth-child(${state.activeIndex + 1})`);
+            const itemEl = ref.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }
     }, [state.activeIndex]);

package/dist/utils/localization/translations/cs-json.d.ts

@@ -215,4 +215,5 @@ export declare const translations: {
     Ma: string;
     Next: string;
     Previous: string;
+    Open: string;
 };

package/dist/utils/localization/translations/cs-json.js

@@ -217,5 +217,6 @@ exports.translations = {
     "Filters": "Filtry",
     "Ma": "Kvě",
     "Next": "Další",
-    "Previous": "Předchozí"
+    "Previous": "Předchozí",
+    "Open": "Otevřít"
 };

package/dist/utils/localization/translations/de-json.d.ts

@@ -215,4 +215,5 @@ export declare const translations: {
     Ma: string;
     Next: string;
     Previous: string;
+    Open: string;
 };

package/dist/utils/localization/translations/de-json.js

@@ -217,5 +217,6 @@ exports.translations = {
     "Filters": "Filter",
     "Ma": "Mai",
     "Next": "Nächstes",
-    "Previous": "Vorherige"
+    "Previous": "Vorherige",
+    "Open": "Offen"
 };