@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/parallelSelection/parallelSelection.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { SelectList } from "../selectList/selectList";
 import { CheckboxState } from "../checkbox/checkboxState";
 import { Popup } from "../popup/popup";
@@ -44,7 +44,7 @@ export const ParallelSelection = ({ selected, items, triggerRef, title, onSelect
     return _jsx(Popup, { alignment: alignment, className: classNames(["zen-parallel-selection zen-parallel-selection-popup", isMobileView ? "zen-parallel-selection-popup--mobile" : ""]), triggerRef: triggerRef, triggerBy: "click", outerIsOpen: outerIsOpen, recalculateOnScroll: true, children: selectList });
 };
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const ParallelSelectionTrigger = React.forwardRef(function ParallelSelectionButton(_a, ref) {
-    var { className, title } = _a, otherProps = __rest(_a, ["className", "title"]);
+export const ParallelSelectionTrigger = (_a) => {
+    var { className, title, ref } = _a, otherProps = __rest(_a, ["className", "title", "ref"]);
     return _jsx(TextIconButton, Object.assign({ className: className || "", type: "tertiary-black", icon: IconChevronDownSmall, ref: ref, title: title, iconPosition: ButtonIconPosition.Start }, otherProps));
-});
+};

package/esm/pillBox/components/pillBoxItem.d.ts

@@ -4,11 +4,6 @@ import "./pillBoxItem.less";
 interface IPillItem {
     item: IPillData;
     onRemove: (value: string) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     className: string;
 }
 export declare const PillBoxItem: React.FC<IPillItem>;

package/esm/pillBox/pillBox.d.ts

@@ -10,11 +10,6 @@ export interface IPillBox {
     className?: string;
     selectedPills: IPillData[];
     isAllSelected?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     onRemove?: (value: string) => void;
     maxPills?: number;
     hideSelectedLabel?: boolean;

package/esm/pillExpandable/pillExpandable.js

@@ -108,10 +108,12 @@ const PillExpandableBase = ({ children, errorHandler, getData, text, description
                 return;
             }
             if (isFunction(getData)) {
-                getData().then(result => {
+                void getData().then(result => {
                     setContent(result);
                 }).catch(e => {
-                    errorHandler && errorHandler(e);
+                    if (errorHandler) {
+                        void errorHandler(e);
+                    }
                 });
             }
         };

package/esm/pillExpandable/pillExpandableSimple.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, RefObject } from "react";
 import { IPillExpandable } from "./pillExpandable";
 import { IIcon } from "../icons/icon";
 interface IPillExpandableSimple extends IPillExpandable {
@@ -8,6 +8,10 @@ interface IPillExpandableSimple extends IPillExpandable {
     onExpand?: () => void;
     icon?: FC<IIcon> | false;
     isBeta?: boolean;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const PillExpandableSimple: import("react").ForwardRefExoticComponent<IPillExpandableSimple & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PillExpandableSimple: {
+    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/esm/pillExpandable/pillExpandableSimple.js

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

package/esm/popup/popup.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { TAlignment } from "../absolute/absolute";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IPopup extends IZenComponentProps {
     trigger?: React.ReactElement;
-    triggerRef?: React.RefObject<HTMLElement>;
+    triggerRef?: RefObject<HTMLElement | null>;
     triggerBy?: "click" | "hover";
     id?: string;
     alignment?: TAlignment;

package/esm/popup/popup.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
 import { ControlledPopup } from "../controlledPopup/controlledPopup";
 export const Popup = ({ id, trigger, triggerRef, triggerBy = "click", alignment, children, inline, className, outerIsOpen, shouldHoldScroll = false, ariaLabel, ariaLabelledBy, recalculateOnScroll, onOpenChange = () => { } }) => {
+    var _a;
     const [isOpen, setIsOpen] = useState(false);
     const triggerElRef = useRef(null);
     const memoizedOnChange = useCallback(onOpenChange, [onOpenChange]);
@@ -66,5 +68,5 @@ export const Popup = ({ id, trigger, triggerRef, triggerBy = "click", alignment,
         throw new Error("Popup: either trigger or triggerRef property should be passed");
     }
     const triggerComp = renderTrigger();
-    return _jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledPopup, { shouldHoldScroll: shouldHoldScroll, useTrapFocusWithTrigger: "on", isOpen: isOpen, triggerRef: triggerRef || triggerElRef, id: popupId, className: className, alignment: alignment, inline: inline, paddingY: 0, paddingX: 0, onOpenChange: setIsOpen, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || (triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props.id), recalculateOnScroll: recalculateOnScroll, children: children })] });
+    return _jsxs(_Fragment, { children: [triggerComp, _jsx(ControlledPopup, { shouldHoldScroll: shouldHoldScroll, useTrapFocusWithTrigger: "on", isOpen: isOpen, triggerRef: triggerRef || triggerElRef, id: popupId, className: className, alignment: alignment, inline: inline, paddingY: 0, paddingX: 0, onOpenChange: setIsOpen, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledBy || ((_a = triggerComp === null || triggerComp === void 0 ? void 0 : triggerComp.props) === null || _a === void 0 ? void 0 : _a.id), recalculateOnScroll: recalculateOnScroll, children: children })] });
 };

package/esm/primaryIcon/renderIcon.d.ts

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

package/esm/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import "./radio.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IRadio extends IZenComponentProps {
@@ -17,5 +17,6 @@ export interface IRadio extends IZenComponentProps {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     tabIndex?: number;
     wrappedInLabel?: boolean;
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const Radio: React.ForwardRefExoticComponent<IRadio & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: ({ fullWidth, id, reverse, checked, title, className, name, value, children, wrappedInLabel, disabled, ref, ...rest }: IRadio) => import("react/jsx-runtime").JSX.Element;

package/esm/radio/radio.js

@@ -14,10 +14,10 @@ import React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const Radio = React.forwardRef(function Radio(_a, ref) {
-    var { fullWidth, id, reverse, checked, title, className = "", name, value, children, wrappedInLabel, disabled } = _a, rest = __rest(_a, ["fullWidth", "id", "reverse", "checked", "title", "className", "name", "value", "children", "wrappedInLabel", "disabled"]);
+export const Radio = (_a) => {
+    var { fullWidth, id, reverse, checked, title, className = "", name, value, children, wrappedInLabel, disabled, ref } = _a, rest = __rest(_a, ["fullWidth", "id", "reverse", "checked", "title", "className", "name", "value", "children", "wrappedInLabel", "disabled", "ref"]);
     const generatedId = React.useId();
     const intId = generatedId;
     const driveClassess = useDriveClassName("zen-radio");
     return _jsx("div", { className: classNames(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: _jsxs("div", { className: classNames(["zen-radio__wrapper", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), _jsxs("label", { className: classNames(["zen-radio__label", fullWidth ? "zen-radio__label--full-width" : "", wrappedInLabel ? "zen-radio__label--input-wrapper" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [wrappedInLabel ? _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)) : null, children ? _jsx("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
-});
+};

package/esm/radioGroup/radioGroup.js

@@ -48,5 +48,5 @@ export const RadioGroup = ({ fullWidth, reverse, id, items, className, name, val
         (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [focusedIndex]);
     const extraProps = selectItemOnFocus ? {} : ({ role: "radiogroup", tabIndex: 0 });
-    return _jsx("div", { id: intId, className: classNames([classes, className || ""]), children: _jsx("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => _createElement(Radio, Object.assign({}, item, { className: classNames(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChange, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : null) }), item.children)) })) });
+    return _jsx("div", { id: intId, className: classNames([classes, className || ""]), children: _jsx("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => _createElement(Radio, Object.assign({}, item, { className: classNames(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChange, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : undefined) }), item.children)) })) });
 };

package/esm/range/rangeField.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import "./rangeField.less";
 import { TDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
 export interface IRangeField {
@@ -12,7 +12,7 @@ export interface IRangeField {
     min?: number;
     max?: number;
     id: string;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
     errorString?: string;
     direction?: TDirection;
     isMinField: boolean;

package/esm/react-chartjs/chart.js

@@ -16,7 +16,7 @@ import { reforwardRef, cloneData, setOptions, setLabels, setDatasets } from "./u
 const ChartComponent = function (props, ref) {
     const _a = props, { height = 150, width = 300, redraw = false, datasetIdKey, type, data, options, plugins = [], fallbackContent, updateMode } = _a, canvasProps = __rest(_a, ["height", "width", "redraw", "datasetIdKey", "type", "data", "options", "plugins", "fallbackContent", "updateMode"]);
     const canvasRef = useRef(null);
-    const chartRef = useRef();
+    const chartRef = useRef(null);
     const renderChart = useCallback(() => {
         if (!canvasRef.current) {
             return;

package/esm/react-chartjs/types.d.ts

@@ -52,7 +52,7 @@ export interface IChartProps<TType extends ChartType = ChartType, TData = Defaul
 export type ChartJSOrUndefined<TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown> = Chart<TType, TData, TLabel> | undefined;
 export type BaseChartComponent = <TType extends ChartType = ChartType, TData = DefaultDataPoint<TType>, TLabel = unknown>(props: IChartProps<TType, TData, TLabel> & {
     ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export type TypedChartComponent<TDefaultType extends ChartType> = <TData = DefaultDataPoint<TDefaultType>, TLabel = unknown>(props: Omit<IChartProps<TDefaultType, TData, TLabel>, "type"> & {
     ref?: ForwardedRef<ChartJSOrUndefined<TDefaultType, TData, TLabel>>;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/esm/searchInput/searchInput.d.ts

@@ -1,8 +1,10 @@
-import React from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { ISearchInputRaw } from "../searchInputRaw/searchInputRaw";
 type TFormInput = TFormFieldComponentProps<ISearchInputRaw>;
 export interface ISearchInput extends Omit<TFormInput, "counter"> {
 }
-export declare const SearchInput: React.ForwardRefExoticComponent<Omit<ISearchInput, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const SearchInput: {
+    ({ maxLength, ...props }: TFormInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/esm/searchInput/searchInput.js

@@ -10,15 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
 import { FormField } from "../formField/formField";
 import { SearchInputRaw } from "../searchInputRaw/searchInputRaw";
 const FormInput = FormField(SearchInputRaw);
-export const SearchInput = React.forwardRef((_a, ref) => {
+export const SearchInput = (_a) => {
     var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return _jsx(FormInput, Object.assign({}, props, { ref: ref, maxLength: maxLength, counter: normalizedMaxLength
+    return _jsx(FormInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
             ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
-});
+};
 SearchInput.displayName = "SearchInput";

package/esm/searchInputRaw/searchInputRaw.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { RefObject } from "react";
 import "./searchInputRaw.less";
 export interface ISearchInputRaw {
     value: string;
@@ -15,12 +16,11 @@ export interface ISearchInputRaw {
     maxLength?: number;
     withDefaultCloseIcon?: boolean;
     id?: string;
-    /**
-    * @deprecated
-    * @param withNewSearchIcon - will be removed in the next major release
-    */
-    withNewSearchIcon?: boolean;
     autoFocus?: boolean;
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const SearchInputRaw: React.ForwardRefExoticComponent<ISearchInputRaw & React.RefAttributes<HTMLInputElement>>;
+export declare const SearchInputRaw: {
+    ({ value, className, disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon, autoFocus, id, ref }: ISearchInputRaw): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const TRANSLATIONS: string[];

package/esm/searchInputRaw/searchInputRaw.js

@@ -8,7 +8,7 @@ import { IconClose } from "../icons/iconClose";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const SearchInputRaw = React.forwardRef(({ value, className = "", disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id }, ref) => {
+export const SearchInputRaw = ({ value, className = "", disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id, ref }) => {
     const { translate } = useLanguage();
     const placeholderValue = placeholder || translate("Search");
     const closeButtonTitleValue = closeButtonTitle || translate("Clear");
@@ -43,7 +43,7 @@ export const SearchInputRaw = React.forwardRef(({ value, className = "", disable
         }
     }, [ref, innerRef]);
     return (_jsx("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: classNames(["zen-search-input", className]), children: _jsx(InputAdornments, { id: id, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: classNames(["zen-search-input__input", disabledClassName, isError ? "zen-search-input__input--error" : ""]), disabled: disabled, onChange: handleChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, placeholder: placeholderValue, inputType: withDefaultCloseIcon ? "search" : "text", endAdornment: closeButton, ref: ref || innerRef, autoFocus: autoFocus }) }));
-});
+};
 SearchInputRaw.displayName = "SearchInputRaw";
 export const TRANSLATIONS = [
     "Search",

package/esm/searchList/searchList.d.ts

@@ -1,28 +1,6 @@
-import React, { RefObject } from "react";
-import "./searchList.less";
-import { TIconId } from "../static/icons/icons";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface ITreeList {
     id: string;
     name: string;
     parent?: ITreeList;
-    icon?: TIconId;
     children?: ITreeList[];
 }
-export interface ISearchSingleList extends IZenComponentProps {
-    listData: ITreeList[];
-    selected: Set<string>;
-    onChange: (selected: string, unselect?: string[]) => void;
-    listId: string;
-    parentRef: RefObject<HTMLDivElement>;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
-}
-export declare const EmptyList: React.FC<Pick<ISearchSingleList, "translate" | "className">>;
-export declare const WaitingList: React.FC<IZenComponentProps>;
-export declare const TRANSLATIONS: string[];
-declare const _default: React.NamedExoticComponent<ISearchSingleList>;
-export default _default;

package/esm/searchList/searchList.js

@@ -1,154 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
-import { Waiting } from "../waiting/waiting";
-import { ComboList } from "../comboList/comboList";
-import { addAdditionalNavigation, addParentLinks, getChildren, getParents, searchTree, TRANSLATIONS as HelperText, getItemsWithChildren, allInSuffix } from "./searchListHelpers";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { useLanguage } from "../utils/localization/useLanguage";
-export const EmptyList = ({ className }) => {
-    const { translate } = useLanguage();
-    return _jsx("div", { className: classNames(["zen-search-list zen-search-list__container zen-search-list__container--empty", className || ""]), children: translate("No data") });
-};
-export const WaitingList = ({ className }) => _jsx("div", { className: classNames(["zen-search-list zen-search-list__container zen-search-list__container--empty", className || ""]), children: _jsx(Waiting, { isLoading: true, delay: Number.MAX_SAFE_INTEGER, hideOverlay: true }) });
-const SearchSingleList = ({ onChange, listData, className, listId, parentRef, selected }) => {
-    const { translate } = useLanguage();
-    const [searchStack, setSearchStack] = useState([]);
-    const [checkedItems, setNewCheckedItems] = useState(selected);
-    const [hover, setHover] = useState("");
-    const root = useMemo(() => ({
-        id: "root",
-        name: "root",
-        children: listData
-    }), [listData]);
-    const getItemsWithChildrenToTree = useCallback(() => getItemsWithChildren(listData, [...selected]), [listData, selected]);
-    const addParentLinksToTree = useCallback(() => {
-        addParentLinks(listData, root);
-    }, [listData, root]);
-    const addAdditionalNavigationButton = useCallback(() => {
-        listData.length && addAdditionalNavigation(listData, translate);
-    }, [listData, translate]);
-    useLayoutEffect(() => {
-        addParentLinksToTree();
-        addAdditionalNavigationButton();
-        const ids = getItemsWithChildrenToTree();
-        ids.length && setNewCheckedItems(prevValue => {
-            const newSelection = new Set(prevValue);
-            ids.forEach(id => newSelection.add(`${allInSuffix}${id}`));
-            return newSelection;
-        });
-    }, [getItemsWithChildrenToTree, addAdditionalNavigationButton, addParentLinksToTree]);
-    const [showingList, setShowingList] = useState(root.children);
-    const onItemChange = useCallback((nodeId, state) => {
-        var _a, _b;
-        const node = searchTree(root, nodeId);
-        if (nodeId.indexOf("allIn") !== -1) {
-            const parentNode = searchTree(root, nodeId.split("allIn")[1]);
-            const idsToUncheck = getChildren((parentNode === null || parentNode === void 0 ? void 0 : parentNode.children) || []);
-            setNewCheckedItems(prevValue => {
-                const result = new Set(prevValue);
-                const action = state ? "add" : "delete";
-                idsToUncheck.forEach(idToUncheck => {
-                    result.delete(idToUncheck);
-                });
-                result[action](nodeId);
-                result[action](nodeId.split("allIn")[1]);
-                return result;
-            });
-            setHover(nodeId);
-            onChange(nodeId.split("allIn")[1], idsToUncheck);
-            return;
-        }
-        if (nodeId.indexOf("levelUp") !== -1) {
-            setShowingList([...(((_b = (_a = searchStack[searchStack.length - 1]) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.children) || [])]);
-            const newHistory = [...searchStack];
-            newHistory.pop();
-            setHover((newHistory[0] && newHistory[0].children) ? newHistory[0].children[0].id : root.children[0].id);
-            setSearchStack(newHistory);
-            return;
-        }
-        if (node && node.children) {
-            setHover(node.children[0].id);
-            setSearchStack([...searchStack, node]);
-            setShowingList([...node.children]);
-            return;
-        }
-        setNewCheckedItems(prevValue => {
-            const result = new Set(prevValue);
-            if (node) {
-                getParents(node).forEach(id => {
-                    result.delete(nodeId);
-                    result.delete(`allIn${id}`);
-                });
-            }
-            state ? result.add(nodeId) : result.delete(nodeId);
-            return result;
-        });
-        setHover(nodeId);
-        onChange(nodeId, node ? getParents(node) : undefined);
-    }, [onChange, root, searchStack]);
-    useEffect(() => {
-        const reference = parentRef.current;
-        const updateHover = (order) => {
-            var _a;
-            let updatedIndex = 0;
-            let currentIndex = 0;
-            showingList.forEach((el, index) => {
-                if (el.id !== hover) {
-                    return;
-                }
-                if (order === "next") {
-                    updatedIndex = showingList[index + 1] ? index + 1 : 0;
-                    currentIndex = showingList[index + 1] ? index : showingList.length - 1;
-                }
-                if (order === "previous") {
-                    updatedIndex = showingList[index - 1] ? index - 1 : showingList.length - 1;
-                    currentIndex = showingList[index - 1] ? index : 0;
-                }
-            });
-            setHover((_a = showingList[updatedIndex]) === null || _a === void 0 ? void 0 : _a.id);
-            setShowingList([...showingList].map((el, index) => {
-                if (index === currentIndex) {
-                    return Object.assign(Object.assign({}, el), { hover: false });
-                }
-                if (index === updatedIndex) {
-                    return Object.assign(Object.assign({}, el), { hover: true });
-                }
-                return el;
-            }));
-        };
-        const eventHandler = (e) => {
-            var _a, _b;
-            if (e.key === "ArrowDown") {
-                if (!hover) {
-                    setHover((_a = showingList[0]) === null || _a === void 0 ? void 0 : _a.id);
-                    return;
-                }
-                updateHover("next");
-            }
-            if (e.key === "ArrowUp") {
-                if (!hover) {
-                    setHover((_b = showingList[0]) === null || _b === void 0 ? void 0 : _b.id);
-                    return;
-                }
-                updateHover("previous");
-            }
-            if (e.key === "Enter") {
-                onItemChange(hover, !checkedItems.has(hover));
-            }
-        };
-        if (reference) {
-            reference.addEventListener("keydown", eventHandler);
-        }
-        return () => {
-            reference === null || reference === void 0 ? void 0 : reference.removeEventListener("keydown", eventHandler);
-        };
-    }, [parentRef, hover, showingList, onItemChange, root, checkedItems]);
-    const path = searchStack.map(el => el.name).join("/") || translate("List");
-    return _jsx("div", { className: classNames(["zen-search-list zen-search-list__container", className || ""]), children: _jsx(ComboList, { listId: listId, hoverId: hover, lastItemId: searchStack[searchStack.length - 1] ? searchStack[searchStack.length - 1].name : "", checkedItems: checkedItems, items: showingList, onChange: onItemChange, path: path }) });
-};
-export const TRANSLATIONS = [
-    ...HelperText,
-    "List",
-    "No data"
-];
-export default memo(SearchSingleList);
+export {};

package/esm/select/select.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ISelectRaw, ISelectStatePropsRaw, ISelectStateRaw } from "../selectRaw/selectRaw";
 export interface ISelect extends ISelectRaw {
 }
@@ -6,6 +5,7 @@ export interface ISelectState extends ISelectStateRaw {
 }
 export interface ISelectStateProps extends ISelectStatePropsRaw {
 }
-export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("../formField/formField").TFormFieldComponentProps<Omit<ISelectRaw & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}>, "ref"> & import("react").RefAttributes<HTMLElement | null>>;
+export declare const Select: {
+    (props: import("../formField/formField").TFormFieldComponentProps<ISelectRaw>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/selectField/selectField.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const SelectField: import("react").ForwardRefExoticComponent<Omit<import("..").TFormFieldComponentProps<Omit<import("../selectRaw/selectRaw").ISelectRaw & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}>, "ref"> & import("react").RefAttributes<HTMLElement | null>>;
+export declare const SelectField: {
+    (props: import("..").TFormFieldComponentProps<import("../selectRaw/selectRaw").ISelectRaw>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/selectList/selectList.js

@@ -20,17 +20,17 @@ import { selectListReducer } from "./selectList.reducer";
 import { SelectListItem } from "./selectListItem";
 import { isChildOf } from "../utils/isChildOf";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-import { forwardRef, memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { getScrollableParent } from "../utils/getScrollableParent";
 export const defaultListItemHeight = 40;
 const MemoizedSelectListItem = memo(SelectListItem);
-const SelectListInnerComp = forwardRef(({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {} }, listRef) => {
+const SelectListInnerComp = ({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {}, ref: listRef }) => {
     var _a;
     const driveComponentClass = useDriveClassName("zen-select-list");
     const state = getInitialState({ items, value, multiselect });
     state.activeIndex = activeIndex;
     return _jsx("ul", { id: id, ref: listRef, className: classNames(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? (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) => _createElement(MemoizedSelectListItem, Object.assign({}, item, { className: 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 = memo(SelectListInnerComp);
 export const SelectList = (_a) => {

package/esm/selectRaw/hooks/usePopupWidth.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { RefObject } from "react";
 interface IUsePopupWidth {
     minWidth: React.CSSProperties["minWidth"];
     maxWidth: React.CSSProperties["maxWidth"];
     width: React.CSSProperties["width"];
 }
-export declare const usePopupWidth: (ref: React.RefObject<HTMLDivElement>) => IUsePopupWidth;
+export declare const usePopupWidth: (ref: RefObject<HTMLDivElement | null>) => IUsePopupWidth;
 export {};

package/esm/selectRaw/selectRaw.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { RefCallback, RefObject } from "react";
 import { IListState } from "../selectList/selectList";
 import { ISelectListItem } from "../selectList/selectListItem";
 import "./selectRaw.less";
@@ -13,13 +13,9 @@ export interface ISelectRaw extends IZenComponentProps {
     value?: string;
     classNamePopup?: string;
     forceSelection?: boolean;
-    /**
-    * @deprecated
-    * @param maxPopupHeight - will be removed in the next major release
-    */
-    maxPopupHeight?: number;
     isError?: boolean;
     onChange?: (id: string | undefined) => void;
+    ref?: RefObject<HTMLDivElement | null> | RefCallback<HTMLDivElement | null>;
 }
 export interface ISelectStateRaw extends IListState {
     expanded: boolean;
@@ -28,4 +24,7 @@ export interface ISelectStatePropsRaw {
     items: ISelectListItem[];
     value?: string;
 }
-export declare const SelectRaw: React.ForwardRefExoticComponent<ISelectRaw & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectRaw: {
+    (props: ISelectRaw): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/selectRaw/selectRaw.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useId, useState } from "react";
+import React, { useCallback, useId, useReducer, useState } from "react";
 import { CheckboxState } from "../checkbox/checkboxState";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getKeysPressed, isKeyForSearch } from "../commonHelpers/keyboard";
@@ -39,11 +39,11 @@ const openListActionGetters = {
     "default": (items, e) => ({ type: ListAction.SearchItem, payload: { items, key: e.key } })
 };
 const PassiveSelectListComp = React.memo(PassiveSelectList);
-export const SelectRaw = React.forwardRef((props, selectRef) => {
+export const SelectRaw = (props) => {
     var _a;
-    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange, forceSelection = false } = props;
+    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange, forceSelection = false, ref: selectRef } = props;
     const items = React.useMemo(() => outerItems, [outerItems]);
-    const [state, dispatchState] = React.useReducer(selectReducer, { items, value: outerValue }, getSelectInitialState);
+    const [state, dispatchState] = useReducer(selectReducer, { items, value: outerValue }, getSelectInitialState);
     const value = getSelectValue(state.itemsState, items);
     const innerTriggerRef = React.useRef(null);
     const ref = React.useRef(null);
@@ -127,5 +127,5 @@ export const SelectRaw = React.forwardRef((props, selectRef) => {
                     isError ? "zen-text-input--error" : "",
                     "zen-caption zen-caption--full-width"
                 ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": (isOpen && state.activeIndex > -1) ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlur, ref: innerTriggerRef, children: [_jsx("div", { className: classNames(["zen-select__text", "zen-ellipsis", "zen-caption__content", !value ? "zen-select__text--placeholder" : ""]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: value === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, value === item.id ? CheckboxState.On : CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
-});
+};
 SelectRaw.displayName = "SelectRaw";