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

package/esm/sidePanel/sidePanel.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import "./sidePanel.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefObject } from "react";
 import { ISidePanelCell } from "./sidePanelCell/sidePanelCell";
 interface ISidePanelComponents {
     Cell: React.FC<ISidePanelCell>;
@@ -16,7 +16,7 @@ export declare const CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-po
 export interface ISidePanel extends IZenComponentProps {
     panelPosition?: TPanelPosition;
     id?: string;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     isOpen: boolean;
     label: string;
     useTrapFocusWithTrigger?: boolean;

package/esm/sidePanel/sidePanelCell/sidePanelCell.d.ts

@@ -3,7 +3,7 @@ import "./sidePanelCell.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface ISidePanelCell extends IZenComponentProps {
     title: string;
-    footer?: JSX.Element;
+    footer?: React.JSX.Element;
     withoutSidePaddings?: boolean;
     role?: string;
     labelledBy?: string;

package/esm/sortControl/sortControl.d.ts

@@ -9,11 +9,6 @@ export declare enum SortDirections {
 export interface ISortControl extends IZenComponentProps {
     id?: string;
     buttonText?: string;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     disabled?: boolean;
     sortDirection?: SortDirections;
     directionIcon?: boolean;

package/esm/stepper/stepper.d.ts

@@ -1,8 +1,10 @@
-import React from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { IStepperRaw } from "../stepperRaw/stepperRaw";
 type TFormInput = TFormFieldComponentProps<IStepperRaw>;
 export interface IStepperInput extends Omit<TFormInput, "counter" | "maxLength"> {
 }
-export declare const Stepper: React.ForwardRefExoticComponent<Omit<IStepperInput, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Stepper: {
+    ({ value, ...props }: TFormInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/esm/stepper/stepper.js

@@ -10,12 +10,11 @@ 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 { StepperRaw } from "../stepperRaw/stepperRaw";
 const FormInput = FormField(StepperRaw);
-export const Stepper = React.forwardRef((_a, ref) => {
+export const Stepper = (_a) => {
     var { value } = _a, props = __rest(_a, ["value"]);
-    return _jsx(FormInput, Object.assign({}, props, { ref: ref, value: value }));
-});
+    return _jsx(FormInput, Object.assign({}, props, { value: value }));
+};
 Stepper.displayName = "Stepper";

package/esm/stepperRaw/stepperRaw.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 import "./stepperRaw.less";
 export interface IStepperRaw extends Partial<Omit<IZenIdComponentProps, "children">> {
@@ -14,8 +14,9 @@ export interface IStepperRaw extends Partial<Omit<IZenIdComponentProps, "childre
     readonly?: boolean;
     placeholder?: string;
     ariaLabel?: string;
+    ref?: RefObject<HTMLInputElement | null>;
 }
 export declare const INPUT_DEFAULT_WIDTH = 47;
 export declare const INPUT_DEFAULT_WIDTH_DRIVE = 56;
-export declare const StepperRaw: import("react").ForwardRefExoticComponent<IStepperRaw & import("react").RefAttributes<HTMLInputElement>>;
+export declare const StepperRaw: ({ min, max, step, width, disabled, readonly, value, isError, onChange, placeholder, className, maxLength, id, ariaLabel, ref }: IStepperRaw) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/stepperRaw/stepperRaw.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
@@ -17,9 +17,7 @@ import { onBeforeInput } from "./utils/onBeforeInput";
 // according to design
 export const INPUT_DEFAULT_WIDTH = 47;
 export const INPUT_DEFAULT_WIDTH_DRIVE = 56;
-export const StepperRaw = forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerStepper({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel }, ref) {
+export const StepperRaw = ({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel, ref }) => {
     const driveComponentClass = useDriveClassName("zen-stepper-field");
     const driveInputClass = useDriveClassName("zen-text-input");
     const isDrive = useDrive();
@@ -51,7 +49,7 @@ function InnerStepper({ min = -Infinity, max = +Infinity, step = 1, width, disab
                                 onChange(String(getDecreasedValue(validValue, validStep, min)));
                                 (_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             }, "aria-label": translate("Decrease value") })] })] }) });
-});
+};
 export const TRANSLATIONS = [
     "Decrease value",
     "Increase value"

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/EntitiesListAction.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from "react";
 import { ISelectableRowsListSelections } from "../../../dataGrid/withSelectableRows/withSelectableRows";
+import { RefObject } from "react";
 interface IEntitiesListActionProps {
     selectionQty: number;
     pageSize: number;
@@ -7,12 +7,7 @@ interface IEntitiesListActionProps {
     totalPage?: number;
     fullScreen?: boolean;
     selections: ISelectableRowsListSelections | undefined;
-    columnListButtonRef: RefObject<HTMLButtonElement>;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
+    columnListButtonRef: RefObject<HTMLButtonElement | null>;
     onClearSelection: () => void;
     onBulkDelete: (selections?: ISelectableRowsListSelections) => void;
     onBulkArchive: (selections?: ISelectableRowsListSelections) => void;

package/esm/summaryTile/summaryTile.d.ts

@@ -28,11 +28,6 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipText?: React.ReactNode;
     tooltipAlignment?: TAlignment;
     tooltipSize?: TooltipSize;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const SummaryTileDisplayName = "SummaryTile";
 export declare const SummaryTile: React.FC<ISummaryTile>;

package/esm/summaryTile/summaryTileTrigger.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { IIcon } from "../icons/icon";
+import { RefObject } from "react";
 export interface ISummaryTileTrigger {
     icon: React.FC<IIcon>;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const SummaryTileTrigger: React.ForwardRefExoticComponent<ISummaryTileTrigger & React.RefAttributes<HTMLDivElement>>;
+export declare const SummaryTileTrigger: ({ icon, ref, ...restProps }: ISummaryTileTrigger) => import("react/jsx-runtime").JSX.Element;

package/esm/summaryTile/summaryTileTrigger.js

@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-export const SummaryTileTrigger = React.forwardRef(function summaryTileTrigger(_a, ref) {
-    var { icon } = _a, restProps = __rest(_a, ["icon"]);
+export const SummaryTileTrigger = (_a) => {
+    var { icon, ref } = _a, restProps = __rest(_a, ["icon", "ref"]);
     return _jsx("div", Object.assign({ className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
             className: "zen-summary-tile__title-icon",
             size: "large"
         }) }));
-});
+};

package/esm/table/actions/actionsMenu.d.ts

@@ -3,9 +3,9 @@ import { IEntityWithId } from "../../commonHelpers/entity";
 interface IActionsMenuProps<T extends object> {
     entity: T;
     isNested: boolean;
-    render?: (entity: T, isNested: boolean) => JSX.Element;
-    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<JSX.Element>;
-    primaryActions?: JSX.Element;
+    render?: (entity: T, isNested: boolean) => React.JSX.Element;
+    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>;
+    primaryActions?: React.JSX.Element;
 }
 export declare const ActionsMenu: <T extends IEntityWithId>({ entity, isNested, render, renderAsync, primaryActions }: IActionsMenuProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/esm/table/actions/useActions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IActionWithId } from "../../dataGrid/columns/actionsColumn/actionsColumn";
 import { IListColumn } from "../table";
 import { IRowEntity } from "../../dataGrid/row/row";
@@ -10,7 +9,7 @@ export declare const useActions: <T extends IRowEntity<N>, N extends IEntityWith
     primaryActions?: undefined;
 } | {
     columnsWithActions: IListColumn<T, N>[];
-    actions: IActionWithId<T> | ((entity: T, isNested: boolean) => JSX.Element) | undefined;
-    actionsAsync: ((entity: T, isNested: boolean) => PromiseLike<JSX.Element>) | undefined;
+    actions: IActionWithId<T> | ((entity: T, isNested: boolean) => React.JSX.Element) | undefined;
+    actionsAsync: ((entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>) | undefined;
     primaryActions: IActionWithId<T>[] | ((entity: T, isNested: boolean) => IActionWithId<T>[]) | undefined;
 };

package/esm/table/children/useTableChildren.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode } from "react";
-export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, gridRef?: React.RefObject<HTMLElement>) => {
-    bulkActions: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    pagination: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+import { ReactElement, ReactNode, RefObject } from "react";
+export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, gridRef?: RefObject<HTMLElement | null>) => {
+    bulkActions: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    pagination: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     activePage: number | undefined;
-    fullscreenButton: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    emptyList: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    footer: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    fullscreenButton: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    emptyList: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    footer: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     other: ReactNode[];
 };

package/esm/table/children/useTableChildren.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, createElement, useMemo } from "react";
+import { Children, createElement, isValidElement, useMemo } from "react";
 import { DeviceType } from "../../commonHelpers/hooks/deviceType";
 import { BulkActions } from "../../dataGrid/withSelectableRows/components/bulkActions/bulkActions";
 import { TableBulkActions } from "./tableBulkActions";
@@ -12,36 +12,37 @@ import { TableEmpty } from "./tableEmpty";
 import { EmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
 import { EmptyList, Footer } from "../../dataGrid/dataGrid";
 import { TableFooter } from "./tableFooter";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isChildElement = (child, expectedType) => {
-    if (!child.type) {
+const isChildElement = function (child, expectedType) {
+    if (!isValidElement(child) || !child.type) {
         return false;
     }
-    return child.type.displayName === expectedType;
+    if ((typeof child.type === "object" || typeof child.type === "function") && "displayName" in child.type) {
+        return child.type.displayName === expectedType;
+    }
+    return false;
 };
 export const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, gridRef) => useMemo(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
-    let activePage;
+    let activePage = undefined;
     let tableFullscreen = undefined;
     let emptyList = undefined;
     let footer = undefined;
     const other = [];
     Children.forEach(children, child => {
-        var _a;
         if (!child) {
             return;
         }
         if (isChildElement(child, TableBulkActions.displayName)) {
-            const bulkActionButtons = ((_a = child.props) === null || _a === void 0 ? void 0 : _a.children) || [];
+            const bulkActionButtons = child.props.children || [];
             bulkActions = _jsx(BulkActions, { gridType: isMobile ? DeviceType.Mobile : DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons });
             return;
         }
         if (isChildElement(child, TablePagination.displayName)) {
             tablePagination = createElement(Pagination, {
                 activePage: child.props.activePage,
-                total: child.props.total,
-                perPage: child.props.perPage,
+                total: child.props.total || 0,
+                perPage: child.props.perPage || 10,
                 onChange: child.props.onChange,
                 type: PaginationType.Compact,
                 includeText: true,

package/esm/table/flexible/columnsPopup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IColumnSettings } from "./interfaces";
 import { IListColumn } from "../table";
 import "./columnsPopup.less";
@@ -11,7 +11,7 @@ interface IColumnsPopupProps<T extends IRowEntity<N>, N extends IEntityWithId> {
     onChange: (newSettings: IColumnSettings[]) => void;
     sortGroups?: (groupA: string, groupB: string) => number;
     sortColumns?: (groupA: string, groupB: string) => number;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
 }
 export declare const ColumnsPopup: <T extends IRowEntity<N>, N extends IEntityWithId>({ onReset, onChange, columnSettings, columns, sortGroups, sortColumns, triggerRef }: IColumnsPopupProps<T, N>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/table/flexible/useFlexibleColumns.d.ts

@@ -14,7 +14,7 @@ export interface IFlexibleColumnsOptions {
     sortColumns?: (groupA: string, groupB: string) => number;
 }
 export declare const getColumnSettings: (pageName: string, defaultValue?: IColumnSettings[] | undefined) => import("./columnSettingsStorage").IColumnSettings[] | undefined;
-export declare const useFlexibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], flexible: IFlexibleColumnsOptions | undefined, gridRef: RefObject<HTMLElement>, columnsPopupRef: RefObject<HTMLElement> | undefined, isFeed: boolean) => {
+export declare const useFlexibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], flexible: IFlexibleColumnsOptions | undefined, gridRef: RefObject<HTMLElement | null>, columnsPopupRef: RefObject<HTMLElement | null> | undefined, isFeed: boolean) => {
     flexibleColumns: IListColumn<T, N>[];
     columnsPopup: import("react/jsx-runtime").JSX.Element | null;
 };

package/esm/table/nested/nestedData.js

@@ -32,8 +32,10 @@ const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook,
         }
         return entity;
     }), [entities, expandedRows, maxHooks, hookResults]);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const table = useMemo(() => cloneElement(children, {
         entities: entitiesWithChildren
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }), [children, entitiesWithChildren]);
     return _jsx(_Fragment, { children: table });
 };

package/esm/textIconButton/textIconButton.d.ts

@@ -17,4 +17,4 @@ export interface ITextIconButton extends IButton {
     tabIndex?: number;
     role?: string;
 }
-export declare const TextIconButton: React.ForwardRefExoticComponent<ITextIconButton & React.RefAttributes<HTMLButtonElement>>;
+export declare const TextIconButton: ({ icon, iconClasses, iconPosition, iconSize, children, className, contentClasses, ref, ...restProps }: ITextIconButton) => import("react/jsx-runtime").JSX.Element;

package/esm/textIconButton/textIconButton.js

@@ -21,8 +21,8 @@ export const ButtonIconPosition = {
     End: "end"
 };
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TextIconButton = React.forwardRef(function TextIcon(_a, ref) {
-    var { icon, iconClasses, iconPosition = ButtonIconPosition.Start, iconSize, children, className, contentClasses } = _a, restProps = __rest(_a, ["icon", "iconClasses", "iconPosition", "iconSize", "children", "className", "contentClasses"]);
+export const TextIconButton = (_a) => {
+    var { icon, iconClasses, iconPosition = ButtonIconPosition.Start, iconSize, children, className, contentClasses, ref } = _a, restProps = __rest(_a, ["icon", "iconClasses", "iconPosition", "iconSize", "children", "className", "contentClasses", "ref"]);
     const isDrive = useDrive();
     const defaultIconSize = isDrive ? SvgIconSize.Huge : SvgIconSize.Large;
     const isMobile = useMobile();
@@ -39,4 +39,4 @@ export const TextIconButton = React.forwardRef(function TextIcon(_a, ref) {
     }), [icon, buttonIconSize, svgIconClasses]);
     const isStartIconPosition = iconPosition === ButtonIconPosition.Start;
     return _jsxs(Button, Object.assign({ ref: ref, className: buttonExtraClasses }, restProps, { children: [isStartIconPosition ? svgIcon : null, children && _jsx("span", { className: classNames(["zen-caption__content", contentClasses !== null && contentClasses !== void 0 ? contentClasses : ""]), children: children }), !isStartIconPosition ? svgIcon : null] }));
-});
+};

package/esm/textInput/textInput.d.ts

@@ -1,8 +1,12 @@
-import * as React from "react";
+import { RefObject } from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { ITextInputRaw } from "../textInputRaw/textInputRaw";
 type TFormInput = TFormFieldComponentProps<ITextInputRaw>;
-export interface ITextInput extends Omit<TFormInput, "counter"> {
+export interface ITextInput extends Omit<TFormInput, "counter" | "ref"> {
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const TextInput: React.ForwardRefExoticComponent<Omit<ITextInput, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TextInput: {
+    ({ maxLength, ...props }: ITextInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/esm/textInput/textInput.js

@@ -10,15 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { FormField } from "../formField/formField";
 import { TextInputRaw } from "../textInputRaw/textInputRaw";
 const FormInput = FormField(TextInputRaw);
-export const TextInput = React.forwardRef((_a, ref) => {
+export const TextInput = (_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 }));
-});
+};
 TextInput.displayName = "TextInput";

package/esm/textInputRaw/textInputRaw.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "./textInputRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefObject } from "react";
 export interface ITextInputRaw extends IZenComponentProps {
     id?: string;
     value: string;
@@ -19,5 +20,6 @@ export interface ITextInputRaw extends IZenComponentProps {
     ariaLabelledby?: string;
     ariaLabel?: string;
     autoFocus?: boolean;
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const TextInputRaw: React.ForwardRefExoticComponent<ITextInputRaw & React.RefAttributes<HTMLInputElement>>;
+export declare const TextInputRaw: (props: ITextInputRaw) => import("react/jsx-runtime").JSX.Element;

package/esm/textInputRaw/textInputRaw.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const TextInputRaw = 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-React.forwardRef(function InnerInput(props, ref) {
+export const TextInputRaw = (props) => {
     const driveComponentClass = useDriveClassName("zen-text-input");
-    return _jsx("input", { id: props.id, ref: ref, type: props.type || "text", className: classNames([
+    return _jsx("input", { id: props.id, ref: props.ref, type: props.type || "text", className: classNames([
             "zen-text-input",
             driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
         ]), value: props.maxLength ? props.value.substring(0, props.maxLength) : props.value, placeholder: props.placeholder, disabled: props.disabled, onChange: props.onChange, onKeyDown: props.onKeyDown, onBlur: props.onBlur, onFocus: props.onFocus, maxLength: props.maxLength, autoComplete: props.autocomplete, min: props.min, max: props.max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus });
-});
+};

package/esm/textarea/textarea.d.ts

@@ -1,8 +1,10 @@
-import * as React from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { ITextareaRaw } from "../textareaRaw/textareaRaw";
 type TFormTextareaInput = TFormFieldComponentProps<ITextareaRaw>;
 export interface ITextarea extends Omit<TFormTextareaInput, "counter"> {
 }
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<ITextarea, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Textarea: {
+    ({ maxLength, ...props }: TFormTextareaInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/esm/textarea/textarea.js

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

package/esm/textareaRaw/textareaRaw.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import "../textInputRaw/textInputRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./textareaRaw.less";
+import { RefObject } from "react";
 export interface ITextareaRaw extends IZenComponentProps {
     id?: string;
     value: string;
@@ -18,5 +19,9 @@ export interface ITextareaRaw extends IZenComponentProps {
     ariaLabel?: string;
     resize?: boolean;
     readonly?: boolean;
+    ref?: RefObject<HTMLTextAreaElement | null>;
 }
-export declare const TextareaRaw: React.ForwardRefExoticComponent<ITextareaRaw & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextareaRaw: {
+    ({ id, rows, maxLength, className, value, resize, readonly, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur, ref }: ITextareaRaw): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/textareaRaw/textareaRaw.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const TextareaRaw = React.forwardRef(({ id, rows = 6, maxLength, className = "", value, resize = true, readonly = false, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur }, ref) => {
+export const TextareaRaw = ({ id, rows = 6, maxLength, className = "", value, resize = true, readonly = false, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur, ref }) => {
     const driveComponentClass = useDriveClassName("zen-text-input");
     return _jsx("textarea", { ref: ref, id: id, rows: rows, maxLength: maxLength, className: classNames([
             "zen-textarea",
@@ -12,5 +11,5 @@ export const TextareaRaw = React.forwardRef(({ id, rows = 6, maxLength, classNam
             isError ? "zen-text-input--error" : "",
             className
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, readOnly: readonly, onBlur: onBlur, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel });
-});
+};
 TextareaRaw.displayName = "TextAreaInput";

package/esm/timePicker/timePicker.d.ts

@@ -6,11 +6,6 @@ export interface ITimePicker extends IZenComponentProps {
     value?: Date;
     fullWidth?: boolean;
     onChange: (date: Date) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     isMobileView?: boolean;
     dataTimeId?: string;
     error?: string;

package/esm/toast/hooks/useToast.js

@@ -24,16 +24,21 @@ export const useToast = () => {
         return {
             id: generatedId,
             hideToast: () => {
-                targetEvent.current.dispatchEvent(new CustomEvent("hideToast", { detail: { id: generatedId } }));
+                targetEvent.current && targetEvent.current.dispatchEvent(new CustomEvent("hideToast", { detail: { id: generatedId } }));
             }
         };
     }, [setToasts, targetEvent]);
     useWarning({ mode, name: "toasts" });
     useEffect(() => {
         const callback = (event) => hideToastCallback(event, hideToast);
-        targetEvent.current.addEventListener("hideToast", callback);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        return () => targetEvent.current.removeEventListener("hideToast", callback);
+        if (!targetEvent.current) {
+            return undefined;
+        }
+        const currentTarget = targetEvent.current;
+        currentTarget.addEventListener("hideToast", callback);
+        return () => {
+            currentTarget.removeEventListener("hideToast", callback);
+        };
     }, [hideToast, isAPIMode, targetEvent]);
     const shownToasts = useMemo(() => toasts.map((item) => _createElement(Toast, Object.assign({}, item, { onClose: () => hideToast(item.id), key: item.id, isOpen: true }))), [toasts, hideToast]);
     return {

package/esm/toast/hooks/useToastState.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IToastItem } from "../../feedbackContainer/types";
 export interface IUseToast {
     toasts: IToastItem[];
     setToasts: React.Dispatch<React.SetStateAction<IToastItem[]>>;
-    targetEvent: React.MutableRefObject<EventTarget>;
+    targetEvent: RefObject<EventTarget | null>;
 }
 export declare const useToastState: () => IUseToast;

package/esm/toastRaw/toastRaw.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import "./toastRaw.less";
 import { IZenComponentProps } from "./../commonHelpers/zenComponent";
+import { ReactNode, RefObject } from "react";
 import { TAnimationType } from "../feedbackContainer/types";
 import { IIcon } from "../icons/icon";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
@@ -17,11 +17,12 @@ export interface IToastRaw extends IZenComponentProps {
     id: string;
     onClose: () => void;
     isOpen: boolean;
-    header: string | JSX.Element;
+    header: ReactNode;
     showSeconds?: number;
     hasIcon?: boolean;
     type?: TToastType;
     animation?: TAnimationType;
     action?: IAction;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const ToastRaw: import("react").ForwardRefExoticComponent<IToastRaw & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ToastRaw: ({ isOpen, onClose, animation, type, hasIcon, header, id, action, showSeconds, ref }: IToastRaw) => import("react/jsx-runtime").JSX.Element;

package/esm/toastRaw/toastRaw.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToastAnimation } from "./components/toastAnimation";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { IconInfoCircle } from "../icons/iconInfoCircle";
-import { createElement, forwardRef, useCallback, useContext, useMemo } from "react";
+import { createElement, useCallback, useContext, useMemo } from "react";
 import { useDrive } from "../utils/theme/useDrive";
 import { Button } from "../button/button";
 import { IconClose } from "../icons/iconClose";
@@ -17,9 +17,7 @@ const typedIcons = {
     info: IconInfoCircle
 };
 const getIcon = (t) => typedIcons[t];
-export const ToastRaw = forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function ToastRawInner({ isOpen, onClose, animation, type, hasIcon = true, header, id, action, showSeconds = MIN_SECONDS_TO_SHOW }, ref) {
+export const ToastRaw = ({ isOpen, onClose, animation, type, hasIcon = true, header, id, action, showSeconds = MIN_SECONDS_TO_SHOW, ref }) => {
     const isDrive = useDrive();
     const isMobile = useMobile();
     const { dark } = useContext(themeContext);
@@ -46,4 +44,4 @@ function ToastRawInner({ isOpen, onClose, animation, type, hasIcon = true, heade
                                     size: isDrive ? "huge" : "large",
                                     className: `zen-toast__icon--${type || "info"}`
                                 }), _jsx("div", { className: classNames(["zen-toast__header", `zen-toast__header--${type || "info"}`]), children: header })] }), _jsxs("div", { className: contentEndClasses, children: [actionButton, _jsx("button", { type: "button", className: classNames(["zen-toast__close-button", `zen-toast__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huge" : "large" }) })] })] })] }) });
-});
+};

package/esm/toggleButton/toggleButton.d.ts

@@ -7,6 +7,6 @@ export interface IToggleButton extends IZenComponentProps {
     disabled?: boolean;
     title?: string;
     isReverted?: boolean;
-    onChange?: (newState: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (checked: boolean) => void;
 }
 export declare const ToggleButton: React.FC<IToggleButton>;