@geotab/zenith 2.0.0-beta.2 → 3.0.0-beta.0

package/dist/parallelSelection/parallelSelection.d.ts

@@ -1,5 +1,5 @@
 import "./parallelSelection.less";
-import React, { ReactNode } from "react";
+import React, { ReactNode, RefObject } from "react";
 import { TAlignment } from "../absolute/absolute";
 interface IParallelSelectionItem {
     id: string;
@@ -8,7 +8,7 @@ interface IParallelSelectionItem {
 export interface IParallelSelection {
     selected: string;
     items: IParallelSelectionItem[];
-    triggerRef?: React.RefObject<HTMLElement>;
+    triggerRef?: RefObject<HTMLElement | null>;
     onSelect: (selected: string) => void;
     title: string;
     isMobileView?: boolean;
@@ -18,6 +18,7 @@ export declare const ParallelSelection: React.FC<IParallelSelection>;
 export interface IParallelSelectionTrigger {
     title: string;
     className?: string;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const ParallelSelectionTrigger: React.ForwardRefExoticComponent<IParallelSelectionTrigger & React.RefAttributes<HTMLButtonElement>>;
+export declare const ParallelSelectionTrigger: ({ className, title, ref, ...otherProps }: IParallelSelectionTrigger) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/parallelSelection/parallelSelection.js

@@ -1,27 +1,4 @@
 "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;
-};
 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)
@@ -36,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ParallelSelectionTrigger = exports.ParallelSelection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const selectList_1 = require("../selectList/selectList");
 const checkboxState_1 = require("../checkbox/checkboxState");
 const popup_1 = require("../popup/popup");
@@ -71,7 +48,8 @@ const ParallelSelection = ({ selected, items, triggerRef, title, onSelect, isMob
 };
 exports.ParallelSelection = ParallelSelection;
 // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.ParallelSelectionTrigger = react_1.default.forwardRef(function ParallelSelectionButton(_a, ref) {
-    var { className, title } = _a, otherProps = __rest(_a, ["className", "title"]);
+const ParallelSelectionTrigger = (_a) => {
+    var { className, title, ref } = _a, otherProps = __rest(_a, ["className", "title", "ref"]);
     return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ className: className || "", type: "tertiary-black", icon: iconChevronDownSmall_1.IconChevronDownSmall, ref: ref, title: title, iconPosition: textIconButton_1.ButtonIconPosition.Start }, otherProps));
-});
+};
+exports.ParallelSelectionTrigger = ParallelSelectionTrigger;

package/dist/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/dist/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/dist/pillExpandable/pillExpandable.js

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

package/dist/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/dist/pillExpandable/pillExpandableSimple.js

@@ -8,7 +8,7 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-exports.PillExpandableSimple = (0, react_1.forwardRef)(({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta }, ref) => {
+const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, ref }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
     const containerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill__container");
     const onExpandHandler = (0, react_1.useCallback)(() => {
@@ -29,5 +29,6 @@ exports.PillExpandableSimple = (0, react_1.forwardRef)(({ onExpand, expandAriaTe
                 }) }), hasText && (0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__text zen-status-pill__text--${type} zen-ellipsis`, children: text }), includeExpandIcon && (0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
                         size: iconDriveClassName ? "huge" : "large"
                     }) }) })] });
-});
+};
+exports.PillExpandableSimple = PillExpandableSimple;
 exports.PillExpandableSimple.displayName = "PillExpandableSimple";

package/dist/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/dist/popup/popup.js

@@ -25,9 +25,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
 const react_1 = __importStar(require("react"));
 const controlledPopup_1 = require("../controlledPopup/controlledPopup");
 const Popup = ({ id, trigger, triggerRef, triggerBy = "click", alignment, children, inline, className, outerIsOpen, shouldHoldScroll = false, ariaLabel, ariaLabelledBy, recalculateOnScroll, onOpenChange = () => { } }) => {
+    var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const triggerElRef = (0, react_1.useRef)(null);
     const memoizedOnChange = (0, react_1.useCallback)(onOpenChange, [onOpenChange]);
@@ -92,6 +94,6 @@ const Popup = ({ id, trigger, triggerRef, triggerBy = "click", alignment, childr
         throw new Error("Popup: either trigger or triggerRef property should be passed");
     }
     const triggerComp = renderTrigger();
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerComp, (0, jsx_runtime_1.jsx)(controlledPopup_1.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 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerComp, (0, jsx_runtime_1.jsx)(controlledPopup_1.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 })] });
 };
 exports.Popup = Popup;

package/dist/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/dist/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/dist/radio/radio.js

@@ -20,10 +20,11 @@ const react_1 = __importDefault(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.Radio = react_1.default.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"]);
+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_1.default.useId();
     const intId = generatedId;
     const driveClassess = (0, useDriveClassName_1.useDriveClassName)("zen-radio");
     return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-radio__wrapper", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : (0, jsx_runtime_1.jsx)("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.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 ? (0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
-});
+};
+exports.Radio = Radio;

package/dist/radioGroup/radioGroup.js

@@ -74,6 +74,6 @@ const RadioGroup = ({ fullWidth, reverse, id, items, className, name, value, dis
         (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [focusedIndex]);
     const extraProps = selectItemOnFocus ? {} : ({ role: "radiogroup", tabIndex: 0 });
-    return (0, jsx_runtime_1.jsx)("div", { id: intId, className: (0, classNames_1.classNames)([classes, className || ""]), children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => (0, react_1.createElement)(radio_1.Radio, Object.assign({}, item, { className: (0, classNames_1.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 (0, jsx_runtime_1.jsx)("div", { id: intId, className: (0, classNames_1.classNames)([classes, className || ""]), children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => (0, react_1.createElement)(radio_1.Radio, Object.assign({}, item, { className: (0, classNames_1.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)) })) });
 };
 exports.RadioGroup = RadioGroup;

package/dist/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/dist/react-chartjs/chart.js

@@ -19,7 +19,7 @@ const utils_1 = require("./utils");
 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 = (0, react_1.useRef)(null);
-    const chartRef = (0, react_1.useRef)();
+    const chartRef = (0, react_1.useRef)(null);
     const renderChart = (0, react_1.useCallback)(() => {
         if (!canvasRef.current) {
             return;

package/dist/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/dist/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/dist/searchInput/searchInput.js

@@ -10,21 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const formField_1 = require("../formField/formField");
 const searchInputRaw_1 = require("../searchInputRaw/searchInputRaw");
 const FormInput = (0, formField_1.FormField)(searchInputRaw_1.SearchInputRaw);
-exports.SearchInput = react_1.default.forwardRef((_a, ref) => {
+const SearchInput = (_a) => {
     var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { ref: ref, maxLength: maxLength, counter: normalizedMaxLength
+    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
             ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
-});
+};
+exports.SearchInput = SearchInput;
 exports.SearchInput.displayName = "SearchInput";

package/dist/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/dist/searchInputRaw/searchInputRaw.js

@@ -34,7 +34,7 @@ const iconClose_1 = require("../icons/iconClose");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-exports.SearchInputRaw = React.forwardRef(({ value, className = "", disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id }, ref) => {
+const SearchInputRaw = ({ value, className = "", disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id, ref }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const placeholderValue = placeholder || translate("Search");
     const closeButtonTitleValue = closeButtonTitle || translate("Clear");
@@ -69,7 +69,8 @@ exports.SearchInputRaw = React.forwardRef(({ value, className = "", disabled, on
         }
     }, [ref, innerRef]);
     return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: (0, classNames_1.classNames)(["zen-search-input", className]), children: (0, jsx_runtime_1.jsx)(inputAdornments_1.InputAdornments, { id: id, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: (0, classNames_1.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 }) }));
-});
+};
+exports.SearchInputRaw = SearchInputRaw;
 exports.SearchInputRaw.displayName = "SearchInputRaw";
 exports.TRANSLATIONS = [
     "Search",

package/dist/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/dist/searchList/searchList.js

@@ -1,159 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.WaitingList = exports.EmptyList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const waiting_1 = require("../waiting/waiting");
-const comboList_1 = require("../comboList/comboList");
-const searchListHelpers_1 = require("./searchListHelpers");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const useLanguage_1 = require("../utils/localization/useLanguage");
-const EmptyList = ({ className }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-list zen-search-list__container zen-search-list__container--empty", className || ""]), children: translate("No data") });
-};
-exports.EmptyList = EmptyList;
-const WaitingList = ({ className }) => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-list zen-search-list__container zen-search-list__container--empty", className || ""]), children: (0, jsx_runtime_1.jsx)(waiting_1.Waiting, { isLoading: true, delay: Number.MAX_SAFE_INTEGER, hideOverlay: true }) });
-exports.WaitingList = WaitingList;
-const SearchSingleList = ({ onChange, listData, className, listId, parentRef, selected }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const [searchStack, setSearchStack] = (0, react_1.useState)([]);
-    const [checkedItems, setNewCheckedItems] = (0, react_1.useState)(selected);
-    const [hover, setHover] = (0, react_1.useState)("");
-    const root = (0, react_1.useMemo)(() => ({
-        id: "root",
-        name: "root",
-        children: listData
-    }), [listData]);
-    const getItemsWithChildrenToTree = (0, react_1.useCallback)(() => (0, searchListHelpers_1.getItemsWithChildren)(listData, [...selected]), [listData, selected]);
-    const addParentLinksToTree = (0, react_1.useCallback)(() => {
-        (0, searchListHelpers_1.addParentLinks)(listData, root);
-    }, [listData, root]);
-    const addAdditionalNavigationButton = (0, react_1.useCallback)(() => {
-        listData.length && (0, searchListHelpers_1.addAdditionalNavigation)(listData, translate);
-    }, [listData, translate]);
-    (0, react_1.useLayoutEffect)(() => {
-        addParentLinksToTree();
-        addAdditionalNavigationButton();
-        const ids = getItemsWithChildrenToTree();
-        ids.length && setNewCheckedItems(prevValue => {
-            const newSelection = new Set(prevValue);
-            ids.forEach(id => newSelection.add(`${searchListHelpers_1.allInSuffix}${id}`));
-            return newSelection;
-        });
-    }, [getItemsWithChildrenToTree, addAdditionalNavigationButton, addParentLinksToTree]);
-    const [showingList, setShowingList] = (0, react_1.useState)(root.children);
-    const onItemChange = (0, react_1.useCallback)((nodeId, state) => {
-        var _a, _b;
-        const node = (0, searchListHelpers_1.searchTree)(root, nodeId);
-        if (nodeId.indexOf("allIn") !== -1) {
-            const parentNode = (0, searchListHelpers_1.searchTree)(root, nodeId.split("allIn")[1]);
-            const idsToUncheck = (0, searchListHelpers_1.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) {
-                (0, searchListHelpers_1.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 ? (0, searchListHelpers_1.getParents)(node) : undefined);
-    }, [onChange, root, searchStack]);
-    (0, react_1.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 (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-search-list zen-search-list__container", className || ""]), children: (0, jsx_runtime_1.jsx)(comboList_1.ComboList, { listId: listId, hoverId: hover, lastItemId: searchStack[searchStack.length - 1] ? searchStack[searchStack.length - 1].name : "", checkedItems: checkedItems, items: showingList, onChange: onItemChange, path: path }) });
-};
-exports.TRANSLATIONS = [
-    ...searchListHelpers_1.TRANSLATIONS,
-    "List",
-    "No data"
-];
-exports.default = (0, react_1.memo)(SearchSingleList);

package/dist/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/dist/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/dist/selectList/selectList.js

@@ -27,13 +27,13 @@ const react_2 = require("react");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 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) => {
+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 = (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-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);
 const SelectList = (_a) => {

package/dist/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 {};