@geotab/zenith 2.0.0 → 3.0.0-beta.0

package/esm/toggleButton/toggleButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useCallback, useId } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { TriStateCheckbox } from "../triStateCheckbox/triStateCheckbox";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
@@ -8,5 +8,6 @@ export const ToggleButton = ({ id, checked, disabled, className, title, children
     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] })] });
+    const onChangeHandler = useCallback((e) => onChange && onChange(e.target.checked), [onChange]);
+    return _jsxs("div", { className: classNames(["zen-toggler", driveClassesToggler || "", className || ""]), children: [_jsx(TriStateCheckbox, { className: "zen-toggler__input", id: checkBoxId, onChange: onChangeHandler, 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/toolbarContent.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import "./toolbar.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IToolbarContent extends IZenComponentProps {
     blockName: string;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const ToolbarContent: import("react").ForwardRefExoticComponent<IToolbarContent & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ToolbarContent: ({ blockName, children, ref }: IToolbarContent) => import("react/jsx-runtime").JSX.Element;

package/esm/toolbar/toolbarContent.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, Children } from "react";
+import { 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 isImportantElement = (child) => child.type === ImportantElement;
+const isToolbarMoreButton = (child) => child.type === ToolbarMoreButton;
+export const ToolbarContent = ({ blockName, children, ref }) => {
     const getChildElements = () => {
         const elts = children ? Children.map(children, (child, ind) => {
             const extraClass = [];
-            if (child.type === ImportantElement) {
+            if (isImportantElement(child)) {
                 extraClass.push("zen-toolbar__item-priority");
-                extraClass.push(`zen-toolbar__item-priority--${child.props.priority}`);
+                extraClass.push(`zen-toolbar__item-priority--${child.props.priority || ""}`);
             }
-            if (child.type === ToolbarMoreButton) {
+            if (isToolbarMoreButton(child)) {
                 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}`);
@@ -19,4 +21,4 @@ export const ToolbarContent = forwardRef(function toolbarContent({ blockName, ch
         return elts;
     };
     return _jsx("div", { className: classNames(["zen-toolbar__content-block", `zen-toolbar__${blockName}-block`]), "data-name": blockName, children: getChildElements() });
-});
+};

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

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

package/esm/tooltip/tooltip.d.ts

@@ -1,21 +1,16 @@
-import { FC, ReactElement } from "react";
+import { FC, PropsWithChildren, 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;
+    trigger: ReactElement<PropsWithChildren>;
     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 {};

package/esm/tooltip/tooltip.js

@@ -27,7 +27,7 @@ const arrowClasses = {
     "left-bottom": "zen-tooltip__arrow--left"
 };
 export const Tooltip = ({ trigger, className = "", size = "small", alignment = "bottom", padding = 0, children, mobileView = "default", mobileSheetTitle }) => {
-    const triggerRefNative = trigger.ref;
+    const triggerRefNative = trigger.props.ref;
     const triggerLocalRef = useRef(null);
     const triggerRef = triggerRefNative || triggerLocalRef;
     const timerRef = useRef(null);
@@ -60,8 +60,10 @@ export const Tooltip = ({ trigger, className = "", size = "small", alignment = "
                 onBlur: () => setTooltipVisible(false),
                 onKeyDown: onKeyDownHandler,
                 onClick: (...args) => {
-                    var _a, _b;
-                    (_b = (_a = trigger.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, ...args);
+                    const triggerProps = trigger.props;
+                    if (triggerProps.onClick) {
+                        triggerProps.onClick(...args);
+                    }
                     if (isTooltipVisible) {
                         setTooltipVisible(false);
                     }
@@ -75,10 +77,10 @@ export const Tooltip = ({ trigger, className = "", size = "small", alignment = "
         }
         return {
             onClick: (e) => {
-                var _a, _b;
                 e.stopPropagation();
-                if (trigger.props.onClick) {
-                    (_b = (_a = trigger.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                const triggerProps = trigger.props;
+                if (triggerProps.onClick) {
+                    triggerProps.onClick(e);
                 }
                 else {
                     setTooltipVisible(isVisible => !isVisible);
@@ -91,7 +93,10 @@ export const Tooltip = ({ trigger, className = "", size = "small", alignment = "
     const triggerCloneProps = isTooltipVisible ? {
         "aria-describedby": tooltipId
     } : {};
-    const triggerClone = React.cloneElement(trigger, Object.assign(Object.assign({ ref: triggerRef }, triggerCloneProps), triggerEvents));
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const triggerClone = React.cloneElement(trigger, Object.assign(Object.assign({ ref: triggerRef }, triggerCloneProps), triggerEvents
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ));
     const arrowClass = useMemo(() => arrowClasses[alignment] || arrowClasses.bottom, [alignment]);
     const renderTooltip = () => {
         if (mobileView === "mobileSheet" && deviceType === DeviceType.Mobile) {

package/esm/utils/positioningUtils/calculatePosition.d.ts

@@ -1,4 +1,5 @@
 import { TAlignment } from "../../absolute/absolute";
 import { IAlignment } from "./alignments";
 import "./calculatePosition.less";
-export declare const calculatePosition: (triggerRef: React.RefObject<HTMLElement>, popupRef: React.RefObject<HTMLElement>, paddingX?: number, paddingY?: number, inline?: boolean, alignment?: TAlignment, alignmentsFn?: IAlignment, scrollParent?: HTMLElement) => void;
+import { RefObject } from "react";
+export declare const calculatePosition: (triggerRef: RefObject<HTMLElement | null>, popupRef: RefObject<HTMLElement | null>, paddingX?: number, paddingY?: number, inline?: boolean, alignment?: TAlignment, alignmentsFn?: IAlignment, scrollParent?: HTMLElement) => void;

package/esm/utils/positioningUtils/calculatePosition.js

@@ -11,6 +11,8 @@ export const calculatePosition = (triggerRef, popupRef, paddingX, paddingY, inli
     }
     const triggerElement = triggerRef.current;
     const popup = popupRef.current;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
     const triggerRect = triggerElement.getBoundingClientRect();
     let popupRect = popup.getBoundingClientRect();
     const relativeParent = inline ? (getRelativeParent(triggerElement) || document.body) : document.body;
@@ -19,10 +21,16 @@ export const calculatePosition = (triggerRef, popupRef, paddingX, paddingY, inli
     popup.classList.remove("zen-calculate-position");
     const parentBorders = getBorders(relativeParent);
     const parentMargins = getMargins(relativeParent);
+    let parentTop = parentDomRect.top + parentBorders.top - parentMargins.top;
+    let parentLeft = parentDomRect.left + parentBorders.left - parentMargins.left;
+    if (!inline && relativeParent === document.body) {
+        parentTop = -scrollTop + parentBorders.top - parentMargins.top;
+        parentLeft = -scrollLeft + parentBorders.left - parentMargins.left;
+    }
     const parentRect = {
-        top: parentDomRect.top + parentBorders.top - parentMargins.top,
+        top: parentTop,
         bottom: parentDomRect.bottom - parentBorders.bottom - parentMargins.bottom,
-        left: parentDomRect.left + parentBorders.left - parentMargins.left,
+        left: parentLeft,
         right: parentDomRect.right - parentBorders.right + parentMargins.right,
         height: window.innerHeight - parentDomRect.y,
         width: window.innerWidth - parentDomRect.x
@@ -41,17 +49,21 @@ export const calculatePosition = (triggerRef, popupRef, paddingX, paddingY, inli
     position = alignmentFn(triggerRect, popupRect, parentRect, paddingX || 0, paddingY || 0);
     normalizePosition(position, popupRect, parentRect);
     const scrollParentRect = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.getBoundingClientRect();
+    const isTopsideAlignment = alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("top");
+    const isRightsideAlignment = alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("right");
+    const isLeftsideAlignment = alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("left");
     if (scrollParentRect && scrollParentRect.top > 0 && triggerRect.top < scrollParentRect.top) {
         position.top = scrollParentRect.top;
     }
     else if (triggerRect.top + triggerRect.height < 0 && triggerRect.top > ((scrollParentRect === null || scrollParentRect === void 0 ? void 0 : scrollParentRect.top) || 0)) {
-        position.top = window.scrollY;
+        position.top = scrollTop;
     }
-    const isTopsideAlignment = alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("top");
-    const isRightsideAlignment = alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("right");
-    const isLeftsideAlignment = alignment === null || alignment === void 0 ? void 0 : alignment.startsWith("left");
-    if (scrollParentRect && triggerRect.bottom > scrollParentRect.bottom) {
-        position.top = (scrollParentRect.bottom + popupRect.height) <= (window.innerHeight + window.scrollY) ? scrollParentRect.bottom : (window.innerHeight + window.scrollY) - popupRect.height;
+    else if (isTopsideAlignment && (triggerRect.top - popupRect.height) < 0) {
+        position.top = scrollTop;
+    }
+    const relativeParentHeight = relativeParent.getBoundingClientRect().height;
+    if ((position.top ? position.top > relativeParentHeight && scrollTop === 0 : true) && scrollParentRect && triggerRect.bottom > scrollParentRect.bottom) {
+        position.top = Math.min(scrollParentRect.bottom, window.innerHeight - popupRect.height);
     }
     else if ((isRightsideAlignment || isLeftsideAlignment) && position.top !== undefined) {
         const popupBottom = position.top + parentRect.top + popupRect.height;
@@ -64,7 +76,7 @@ export const calculatePosition = (triggerRef, popupRef, paddingX, paddingY, inli
         }
     }
     else if (!isTopsideAlignment && triggerRect.y + triggerRect.height + popupRect.height > window.innerHeight) {
-        const newTopPosition = window.innerHeight + window.scrollY - popupRect.height;
+        const newTopPosition = window.innerHeight + scrollTop - popupRect.height;
         position.top = newTopPosition < 0 ? 0 : newTopPosition;
     }
     Object.keys(position).forEach((prop) => {

package/esm/utils/useNodeText.d.ts

@@ -1 +1,2 @@
-export declare const useNodeText: (ref: React.RefObject<HTMLElement>) => string;
+import { RefObject } from "react";
+export declare const useNodeText: (ref: RefObject<HTMLElement | null>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "2.0.0",
+  "version": "3.0.0-beta.0",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
@@ -47,10 +47,10 @@
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
     "@storybook/react-webpack5": "^9.1.15",
     "@tanstack/react-query": "^5.85.5",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.73",
-    "@types/react-dom": "^18.2.23",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "axe-core": "^4.10.2",
@@ -73,13 +73,13 @@
   },
   "dependencies": {
     "chart.js": "^4.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "peerDependencies": {
     "chart.js": "^4.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "files": [
     "./dist/",

package/dist/bottomSection/bottomSection.d.ts

@@ -1,13 +0,0 @@
-import * as React from "react";
-import { BottomSectionType } from "./bottomSectionType";
-import "./bottomSection.less";
-import { IIcon } from "../icons/icon";
-import { TIconSize } from "../icons/iconSize";
-export interface IBottomSection {
-    message: string;
-    type?: BottomSectionType;
-    icon?: React.FC<IIcon>;
-    className?: string;
-    size?: TIconSize;
-}
-export declare const BottomSection: React.FC<IBottomSection>;

package/dist/bottomSection/bottomSection.js

@@ -1,48 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomSection = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const bottomSectionType_1 = require("./bottomSectionType");
-const getSelectorsByType = (type) => {
-    switch (type) {
-        case bottomSectionType_1.BottomSectionType.Info:
-            return ["zen-bottom-section__icon--info", "zen-bottom-section__message--info"];
-        case bottomSectionType_1.BottomSectionType.Error:
-            return ["zen-bottom-section__icon--error", "zen-bottom-section__message--error"];
-        default:
-            return ["", ""];
-    }
-};
-const BottomSection = ({ message, type = bottomSectionType_1.BottomSectionType.Info, icon, size, className = "" }) => {
-    const [selectorIcon, selectorMessage] = getSelectorsByType(type);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-bottom-section", className]), children: [icon && React.createElement(icon, {
-                size: size,
-                className: (0, classNames_1.classNames)(["zen-bottom-section__icon", selectorIcon])
-            }), (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-bottom-section__message", selectorMessage]), children: message })] });
-};
-exports.BottomSection = BottomSection;

package/dist/bottomSection/bottomSectionType.d.ts

@@ -1,4 +0,0 @@
-export declare enum BottomSectionType {
-    Info = "info",
-    Error = "error"
-}

package/dist/bottomSection/bottomSectionType.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomSectionType = void 0;
-var BottomSectionType;
-(function (BottomSectionType) {
-    BottomSectionType["Info"] = "info";
-    BottomSectionType["Error"] = "error";
-})(BottomSectionType || (exports.BottomSectionType = BottomSectionType = {}));

package/dist/comboList/comboList.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import "./comboList.less";
-import { TIconId } from "../static/icons/icons";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-export interface IItemTree {
-    id: string;
-    name: string;
-    className?: string;
-    checked?: boolean;
-    children?: IItemTree[];
-    icon?: TIconId;
-    hover?: boolean;
-    path?: string;
-}
-export interface IComboList extends IZenComponentProps {
-    items: IItemTree[];
-    checkedItems: Set<string>;
-    lastItemId: string;
-    hoverId: string;
-    path: string;
-    listId: string;
-    onChange: (id: string, state: boolean) => void;
-}
-export declare const ComboList: React.FC<IComboList>;

package/dist/comboList/comboList.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable react/prop-types */
-const react_1 = require("react");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const comboListHook_1 = require("./comboListHook");
-const iconFolderNew_1 = require("../icons/deprecated/iconFolderNew");
-const FolderItem = ({ children }) => (0, jsx_runtime_1.jsxs)("div", { className: "zen-combo-list__item-container", children: [(0, jsx_runtime_1.jsx)(iconFolderNew_1.IconFolderNew, { className: "zen-combo-list__icon", size: "large" }), children] });
-const CheckBox = ({ children, icon }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-combo-list__item-container", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon ? (0, react_1.createElement)(icon, { className: "zen-combo-list__icon" }) : "", " ", children] }) });
-const ComboList = ({ className, items, onChange, listId, path, checkedItems, hoverId }) => {
-    const listClassName = (0, classNames_1.classNames)(["zen-combo-list", className || ""]);
-    const hoveredItem = (0, react_1.useRef)(null);
-    (0, comboListHook_1.useAutoScroll)(hoverId, items, hoveredItem);
-    return (0, jsx_runtime_1.jsx)("ul", { className: listClassName, id: listId, role: "listbox", tabIndex: 0, "aria-label": path, ref: hoveredItem, children: items.map(item => {
-            const itemClassName = (0, classNames_1.classNames)([
-                "zen-combo-list__item",
-                hoverId === item.id ? "zen-combo-list__item--hover" : "",
-                checkedItems.has(item.id) && !(item.children && item.children.length) ? "zen-combo-list__item--selected" : "",
-                item.className || ""
-            ]);
-            const title = item.path ? item.path : `${path ? path + "/" : ""}${item.name}`;
-            return (0, jsx_runtime_1.jsx)("li", { className: itemClassName, onClick: () => onChange(item.id, !checkedItems.has(item.id)), "aria-selected": checkedItems.has(item.id), role: "option", title: title, children: item.children ?
-                    (0, jsx_runtime_1.jsx)(FolderItem, { children: item.name })
-                    :
-                        (0, jsx_runtime_1.jsx)(CheckBox, { icon: item.icon, id: item.id, onChange: onChange, checked: checkedItems.has(item.id), children: item.name }) }, item.id);
-        }) });
-};
-exports.ComboList = ComboList;

package/dist/comboList/comboListHook.d.ts

@@ -1,4 +0,0 @@
-import { MutableRefObject } from "react";
-export declare const useAutoScroll: (hoverId: string, items: {
-    id: string;
-}[], ref: MutableRefObject<HTMLUListElement | null>) => void;

package/dist/comboList/comboListHook.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutoScroll = void 0;
-const react_1 = require("react");
-const useAutoScroll = (hoverId, items, ref) => {
-    (0, react_1.useEffect)(() => {
-        if (ref.current) {
-            const elementIndex = items.reduce((acc, item, index) => item.id === hoverId ? index : acc, 0);
-            const hoverElement = ref.current.children[elementIndex];
-            hoverElement && hoverElement.scrollIntoView && hoverElement.scrollIntoView({ block: "nearest" });
-        }
-    }, [hoverId, items, ref]);
-};
-exports.useAutoScroll = useAutoScroll;

package/dist/combobox/combobox.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-import "./combobox.less";
-import { ITreeList } from "../searchList/searchList";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-export interface ICombobox extends IZenComponentProps {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
-    inputId?: string;
-    placeholder?: string;
-    dialogAriaLabel?: string;
-    title?: string;
-    disabled?: boolean;
-    width?: number;
-    selection: Set<string>;
-    onSelect: (selected: string[]) => void;
-    getData: (signal?: AbortSignal, searchValue?: string) => Promise<ITreeList[]>;
-    inline?: boolean;
-    fullWidth?: boolean;
-}
-/**
- * @deprecated - will be removed in future releases
-*/
-export declare const Combobox: React.FC<ICombobox>;
-export declare const TRANSLATIONS: string[];

package/dist/combobox/combobox.js

@@ -1,190 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.Combobox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const searchableField_1 = require("../searchableField/searchableField");
-const searchList_1 = __importStar(require("../searchList/searchList"));
-const absolute_1 = require("../absolute/absolute");
-const comboboxNavigation_1 = require("./comboboxNavigation");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-/**
- * @deprecated - will be removed in future releases
-*/
-const Combobox = ({ getData, inputId, placeholder, dialogAriaLabel, title, disabled, onSelect, width, className, selection, inline = true, fullWidth }) => {
-    const ariaComboboxId = "listbox";
-    const ariaControlId = react_1.default.useId();
-    const listId = react_1.default.useId();
-    const [newListData, setNewListData] = (0, react_1.useState)([]);
-    const [showWaiting, setShowWaiting] = (0, react_1.useState)(false);
-    const [showList, setShowList] = (0, react_1.useState)(() => false);
-    const [showEmptyList, setShowEmptyList] = (0, react_1.useState)(false);
-    const [value, setInputValue] = (0, react_1.useState)("");
-    const abortToken = (0, react_1.useRef)(new AbortController());
-    const triggerRef = (0, react_1.useRef)(null);
-    const comboboxRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const searchListParentRef = (0, react_1.useRef)(null);
-    const handleHighLevelKeyboardNavigation = (0, react_1.useCallback)((key, e) => {
-        if (key === "Escape") {
-            !showList && setInputValue("");
-            setShowList(false);
-            setShowWaiting(false);
-            setShowEmptyList(false);
-            return;
-        }
-        if (key === "Tab") {
-            setShowList(false);
-            setShowWaiting(false);
-            setShowEmptyList(false);
-            return;
-        }
-        if (key === "ArrowDown" && showList && !showWaiting && !showEmptyList) {
-            e.preventDefault();
-            return;
-        }
-        if (key === "ArrowUp" && showList && !showWaiting && !showEmptyList) {
-            e.preventDefault();
-            return;
-        }
-    }, [showList, showWaiting, showEmptyList]);
-    const showListPopup = (newVal) => {
-        setShowList(newVal);
-    };
-    const showWaitingPopup = (newVal) => {
-        setShowWaiting(newVal);
-    };
-    const showEmptyPopup = (newVal) => {
-        setShowEmptyList(newVal);
-    };
-    const controlData = (0, react_1.useCallback)((signal, searchValue) => {
-        showWaitingPopup(true);
-        showEmptyPopup(false);
-        showListPopup(false);
-        getData(signal, searchValue).then(data => {
-            setNewListData(data);
-            showWaitingPopup(false);
-            data.length ? showListPopup(true) : showEmptyPopup(true);
-        }).catch(() => {
-            showListPopup(false);
-            showEmptyPopup(false);
-            showWaitingPopup(false);
-        });
-    }, [getData]);
-    const onOpenSearch = (0, react_1.useCallback)(() => {
-        const currentAbort = abortToken.current;
-        if (showList) {
-            showListPopup(false);
-            return;
-        }
-        controlData(currentAbort.signal, value);
-    }, [controlData, showList, value]);
-    const onSingleChange = (0, react_1.useCallback)((selected, unselect) => {
-        var _a;
-        const newSetSelection = new Set(selection);
-        const action = newSetSelection.has(selected) ? "delete" : "add";
-        unselect && unselect.forEach(item => newSetSelection.delete(item));
-        newSetSelection[action](selected);
-        onSelect([...newSetSelection]);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [onSelect, selection]);
-    const subscriptionCondition = (trigger) => trigger.current !== null;
-    const onFocus = () => {
-        !showWaiting && !showList && !showEmptyList && controlData(undefined, value);
-    };
-    const onInput = (val) => {
-        abortToken.current.abort();
-        abortToken.current = new AbortController();
-        controlData(abortToken.current.signal, val);
-        setInputValue(val);
-    };
-    const containerClassName = (0, classNames_1.classNames)([
-        "zen-combobox",
-        "zen-combobox__container",
-        className || ""
-    ]);
-    (0, comboboxNavigation_1.useComboboxNavigation)(handleHighLevelKeyboardNavigation, comboboxRef, subscriptionCondition);
-    (0, comboboxNavigation_1.useClickOutside)(comboboxRef, () => {
-        if (inline) {
-            showListPopup(false);
-        }
-    });
-    (0, comboboxNavigation_1.useClickOutside)(searchListParentRef, () => {
-        if (!inline) {
-            showListPopup(false);
-        }
-    });
-    (0, react_1.useEffect)(() => {
-        const disableKeyCode = ["ArrowDown", "ArrowUp"];
-        const input = inputRef.current;
-        const handler = (e) => {
-            if (disableKeyCode.some(key => e.key === key)) {
-                e.preventDefault();
-            }
-        };
-        input === null || input === void 0 ? void 0 : input.addEventListener("keydown", handler);
-        return () => {
-            input === null || input === void 0 ? void 0 : input.removeEventListener("keydown", handler);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (showList) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }, [showList]);
-    const popupAlignment = inline ? undefined : "bottom-right";
-    const openChange = (0, react_1.useCallback)(() => {
-        if (showWaiting) {
-            return setShowWaiting;
-        }
-        if (showEmptyList) {
-            return setShowEmptyList;
-        }
-        if (showList) {
-            return setShowList;
-        }
-        return () => { };
-    }, [showWaiting, showEmptyList, showList]);
-    const getPopupContent = (0, react_1.useMemo)(() => {
-        if (showWaiting) {
-            return (0, jsx_runtime_1.jsx)(searchList_1.WaitingList, {});
-        }
-        if (showEmptyList) {
-            return (0, jsx_runtime_1.jsx)(searchList_1.EmptyList, {});
-        }
-        if (showList) {
-            return (0, jsx_runtime_1.jsx)("div", { ref: searchListParentRef, children: (0, jsx_runtime_1.jsx)(searchList_1.default, { selected: selection, parentRef: comboboxRef, listId: listId, listData: newListData, onChange: onSingleChange }) });
-        }
-        return null;
-    }, [showWaiting, showEmptyList, showList, selection, newListData, onSingleChange, listId]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: containerClassName, ref: comboboxRef, children: [(0, jsx_runtime_1.jsx)(searchableField_1.SearchableField, { width: width, inputId: inputId, inputRef: inputRef, title: title, placeholder: placeholder, onChange: onInput, onOpenSearch: onOpenSearch, onFocus: onFocus, openSearch: showList || showWaiting || showEmptyList, disabled: disabled, ariaAutocomplete: "list", ariaControls: ariaControlId, ariaOwns: ariaComboboxId, triggerRef: inline ? undefined : triggerRef, fullWidth: fullWidth, value: value }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { alignment: popupAlignment, onOpenChange: openChange, className: "zen-combobox-popup zen-shadow-dropdown-default", stateFullChilds: showList, inline: inline, isOpen: true, id: ariaControlId, triggerRef: triggerRef, ariaLabel: dialogAriaLabel || placeholder, role: "region", children: getPopupContent })] });
-};
-exports.Combobox = Combobox;
-exports.TRANSLATIONS = [
-    ...searchableField_1.TRANSLATIONS,
-    ...searchList_1.TRANSLATIONS
-];

package/dist/combobox/comboboxNavigation.d.ts

@@ -1,3 +0,0 @@
-import { RefObject } from "react";
-export declare const useComboboxNavigation: <T extends HTMLElement>(callback: (event: string, e: KeyboardEvent) => void, subscriptionTrigger: RefObject<T>, condition?: (_) => boolean) => void;
-export declare const useClickOutside: (ref: any, callback: any) => void;