@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/dataGrid/withSelectableRows/withSelectableRows.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { CheckboxColumnWrapper, SelectionState } from "../columns/checkboxColumn/checkboxColumnWrapper";
 import { ControlledPopup } from "../../controlledPopup/controlledPopup";
 import { SelectList } from "../../selectList/selectList";
@@ -49,178 +49,180 @@ const calculateSelectionState = (entities, selections, allSelected, options) =>
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withSelectableRows = (DataGridComponent) => forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerList(props, ref) {
-    const { selectMode, selection, columns, entities, options, onSelect, translate: _1 } = props;
-    const { translate } = useLanguage();
-    const [isOpen, setIsOpen] = useState(false);
-    const selectId = useId();
-    const selectMenuRef = useRef(null);
-    const selections = getSelections(selection);
-    const allSelected = selection !== undefined && selection.allSelected;
-    const wrapper = useMemo(() => selectMode ? new SelectableRowsColumnWrapper(selections, {
-        createTitle: options.createTitle,
-        headerTitle: options.headerTitle,
-        condition: options.condition || options.checkboxVisible,
-        disabled: options.checkboxDisabled
-            ? options.checkboxDisabled
-            : (entity) => options.selectionLimit !== undefined
-                ? (!selections.has(entity.id) && selections.size >= options.selectionLimit)
-                : false,
-        header: (options.selectionLimit === undefined
-            && options.checkboxDisabled === undefined
-            && options.checkboxVisible === undefined
-            && options.condition === undefined) || (options.checkboxInHeader === true && !options.selectionLimit)
-    }, selectMenuRef) : null, [
-        selectMode,
-        selections,
-        options.createTitle,
-        options.headerTitle,
-        options.condition,
-        options.checkboxVisible,
-        options.checkboxDisabled,
-        options.selectionLimit,
-        options.checkboxInHeader
-    ]);
-    if (wrapper) {
-        wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
-    }
-    const selectAll = useCallback((checked) => {
-        const newSelections = new Set(selections);
-        entities.forEach(entity => {
-            if (checked) {
-                const isVisible = options.condition
-                    ? options.condition(entity)
-                    : options.checkboxVisible
-                        ? options.checkboxVisible(entity)
-                        : true;
-                const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-                if (isVisible && isEnabled) {
-                    newSelections.add(entity.id);
+export const withSelectableRows = (DataGridComponent) => {
+    const WithSelectableRowsInner = (props) => {
+        const { selectMode, selection, columns, entities, options, onSelect } = props;
+        const { translate } = useLanguage();
+        const [isOpen, setIsOpen] = useState(false);
+        const selectId = useId();
+        const selectMenuRef = useRef(null);
+        const selections = getSelections(selection);
+        const allSelected = selection !== undefined && selection.allSelected;
+        const wrapper = useMemo(() => selectMode ? new SelectableRowsColumnWrapper(selections, {
+            createTitle: options.createTitle,
+            headerTitle: options.headerTitle,
+            condition: options.condition || options.checkboxVisible,
+            disabled: options.checkboxDisabled
+                ? options.checkboxDisabled
+                : (entity) => options.selectionLimit !== undefined
+                    ? (!selections.has(entity.id) && selections.size >= options.selectionLimit)
+                    : false,
+            header: (options.selectionLimit === undefined
+                && options.checkboxDisabled === undefined
+                && options.checkboxVisible === undefined
+                && options.condition === undefined) || (options.checkboxInHeader === true && !options.selectionLimit)
+        }, selectMenuRef) : null, [
+            selectMode,
+            selections,
+            options.createTitle,
+            options.headerTitle,
+            options.condition,
+            options.checkboxVisible,
+            options.checkboxDisabled,
+            options.selectionLimit,
+            options.checkboxInHeader
+        ]);
+        if (wrapper) {
+            wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
+        }
+        const selectAll = useCallback((checked) => {
+            const newSelections = new Set(selections);
+            entities.forEach(entity => {
+                if (checked) {
+                    const isVisible = options.condition
+                        ? options.condition(entity)
+                        : options.checkboxVisible
+                            ? options.checkboxVisible(entity)
+                            : true;
+                    const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
+                    if (isVisible && isEnabled) {
+                        newSelections.add(entity.id);
+                    }
+                    return;
                 }
-                return;
-            }
-            newSelections.delete(entity.id);
-        });
-        const newState = calculateSelectionState(entities, newSelections, false, options);
-        onSelect({
-            selected: [...newSelections],
-            allSelected: newState === SelectionState.All,
-            turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-        });
-    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
-    const onSelectListener = useCallback(([id, checked]) => {
-        if (allSelected) {
-            const newSelection = new Set(entities.map(entity => entity.id));
-            newSelection.delete(id);
+                newSelections.delete(entity.id);
+            });
+            const newState = calculateSelectionState(entities, newSelections, false, options);
             onSelect({
-                selected: [...newSelection],
-                allSelected: false,
-                turnOffSelectAll: selection.turnOffSelectAll
+                selected: [...newSelections],
+                allSelected: newState === SelectionState.All,
+                turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
             });
-            return;
-        }
-        if (checked) {
-            selections.add(id);
-        }
-        else {
-            selections.delete(id);
-        }
-        const newState = calculateSelectionState(entities, selections, allSelected, options);
-        onSelect({
-            selected: [...selections],
-            allSelected: newState === SelectionState.All,
-            turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-        });
-    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
-    const onSelectAll = useCallback(([checked]) => {
-        if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
-            selectAll(true);
-            return;
-        }
-        onSelect({
-            selected: [],
-            allSelected: checked,
-            turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
-        });
-    }, [onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, options.turnOffSelectAll, selectAll]);
-    const onTriggerClick = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen]);
-    const onSelectMenuChange = useCallback((state) => {
-        var _a, _b;
-        const selectedId = (_a = [...state].find(([_, v]) => v === CheckboxState.On)) === null || _a === void 0 ? void 0 : _a[0];
-        const value = selectedId && ((_b = selectionOptions.find(o => o.id === selectedId)) === null || _b === void 0 ? void 0 : _b.value);
-        if (value === undefined) {
-            return;
-        }
-        setIsOpen(false);
-        if (value === SelectionState.All) {
+        }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+        const onSelectListener = useCallback(([id, checked]) => {
+            if (allSelected) {
+                const newSelection = new Set(entities.map(entity => entity.id));
+                newSelection.delete(id);
+                onSelect({
+                    selected: [...newSelection],
+                    allSelected: false,
+                    turnOffSelectAll: selection.turnOffSelectAll
+                });
+                return;
+            }
+            if (checked) {
+                selections.add(id);
+            }
+            else {
+                selections.delete(id);
+            }
+            const newState = calculateSelectionState(entities, selections, allSelected, options);
             onSelect({
-                selected: [],
-                allSelected: true,
+                selected: [...selections],
+                allSelected: newState === SelectionState.All,
                 turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
             });
-            return;
-        }
-        if (value === SelectionState.None) {
+        }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+        const onSelectAll = useCallback(([checked]) => {
+            if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
+                selectAll(true);
+                return;
+            }
             onSelect({
                 selected: [],
-                allSelected: false,
+                allSelected: checked,
                 turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
             });
-            return;
-        }
-        selectAll(true);
-    }, [onSelect, selectAll, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
-    useEffect(() => {
-        if (!wrapper) {
-            return () => { };
-        }
-        wrapper.detach();
-        wrapper.attach("change", onSelectListener);
-        wrapper.attach("change-all", onSelectAll);
-        wrapper.attach("toggle", onTriggerClick);
-        return () => {
+        }, [onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, options.turnOffSelectAll, selectAll]);
+        const onTriggerClick = useCallback(() => {
+            setIsOpen(!isOpen);
+        }, [isOpen]);
+        const onSelectMenuChange = useCallback((state) => {
+            var _a, _b;
+            const selectedId = (_a = [...state].find(([_, v]) => v === CheckboxState.On)) === null || _a === void 0 ? void 0 : _a[0];
+            const value = selectedId && ((_b = selectionOptions.find(o => o.id === selectedId)) === null || _b === void 0 ? void 0 : _b.value);
+            if (value === undefined) {
+                return;
+            }
+            setIsOpen(false);
+            if (value === SelectionState.All) {
+                onSelect({
+                    selected: [],
+                    allSelected: true,
+                    turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+                });
+                return;
+            }
+            if (value === SelectionState.None) {
+                onSelect({
+                    selected: [],
+                    allSelected: false,
+                    turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+                });
+                return;
+            }
+            selectAll(true);
+        }, [onSelect, selectAll, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+        useEffect(() => {
+            if (!wrapper) {
+                return () => { };
+            }
             wrapper.detach();
-        };
-    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
-    const listColumns = useMemo(() => {
-        const newColumns = columns.map(c => (Object.assign({}, c)));
-        // Remove CheckboxColumnWrappers from wrappers list
-        newColumns.forEach(c => {
-            if (c.wrappers) {
-                c.wrappers = c.wrappers.filter(w => !(w instanceof SelectableRowsColumnWrapper));
+            wrapper.attach("change", onSelectListener);
+            wrapper.attach("change-all", onSelectAll);
+            wrapper.attach("toggle", onTriggerClick);
+            return () => {
+                wrapper.detach();
+            };
+        }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
+        const listColumns = useMemo(() => {
+            const newColumns = columns.map(c => (Object.assign({}, c)));
+            // Remove CheckboxColumnWrappers from wrappers list
+            newColumns.forEach(c => {
+                if (c.wrappers) {
+                    c.wrappers = c.wrappers.filter(w => !(w instanceof SelectableRowsColumnWrapper));
+                }
+            });
+            // Add new CheckboxColumnWrapper to wrappers list of the first column
+            const firstColumn = newColumns.find(c => c.id === options.firstColumnId);
+            if (firstColumn && wrapper) {
+                firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
             }
-        });
-        // Add new CheckboxColumnWrapper to wrappers list of the first column
-        const firstColumn = newColumns.find(c => c.id === options.firstColumnId);
-        if (firstColumn && wrapper) {
-            firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
-        }
-        return newColumns;
-    }, [columns, options.firstColumnId, wrapper]);
-    const listItems = useMemo(() => selectionOptions
-        .filter(option => (!(selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) && !options.turnOffSelectAll) || option.value !== SelectionState.All)
-        .map(option => ({
-        id: option.id,
-        value: option.value,
-        label: translate(option.label),
-        children: translate(option.label)
-    })).filter(option => option.value !== calculateSelectionState(entities, selections, allSelected, options)), [selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, translate, entities, selections, allSelected, options]);
-    const listValue = useMemo(() => listItems.reduce((res, item) => {
-        res.set(item.id, CheckboxState.Off);
-        return res;
-    }, new Map()), [listItems]);
-    return _jsxs(_Fragment, { children: [columns.length > 0
-                ? _jsx(ControlledPopup, { triggerRef: selectMenuRef, isOpen: isOpen, onOpenChange: setIsOpen, alignment: "bottom-left", children: _jsx(SelectList, { id: selectId, title: translate("Select menu"), items: listItems, value: listValue, selectItemOnFocus: false, onChange: onSelectMenuChange }) })
-                : null, _jsx(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: ref }))] });
-});
-withSelectableRows.translations = [
-    "Select menu",
-    "Select all",
-    "Select current page",
-    "Deselect all",
-    ...CheckboxColumnWrapper.translations
-];
+            return newColumns;
+        }, [columns, options.firstColumnId, wrapper]);
+        const listItems = useMemo(() => selectionOptions
+            .filter(option => (!(selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) && !options.turnOffSelectAll) || option.value !== SelectionState.All)
+            .map(option => ({
+            id: option.id,
+            value: option.value,
+            label: translate(option.label),
+            children: translate(option.label)
+        })).filter(option => option.value !== calculateSelectionState(entities, selections, allSelected, options)), [selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, translate, entities, selections, allSelected, options]);
+        const listValue = useMemo(() => listItems.reduce((res, item) => {
+            res.set(item.id, CheckboxState.Off);
+            return res;
+        }, new Map()), [listItems]);
+        return _jsxs(_Fragment, { children: [columns.length > 0
+                    ? _jsx(ControlledPopup, { triggerRef: selectMenuRef, isOpen: isOpen, onOpenChange: setIsOpen, alignment: "bottom-left", children: _jsx(SelectList, { id: selectId, title: translate("Select menu"), items: listItems, value: listValue, selectItemOnFocus: false, onChange: onSelectMenuChange }) })
+                    : null, _jsx(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: props.ref }))] });
+    };
+    WithSelectableRowsInner.displayName = `withSelectableRows(${DataGridComponent.displayName || DataGridComponent.name})`;
+    WithSelectableRowsInner.translations = [
+        "Select menu",
+        "Select all",
+        "Select current page",
+        "Deselect all",
+        ...CheckboxColumnWrapper.translations
+    ];
+    return WithSelectableRowsInner;
+};

package/esm/dataGrid/withSortableColumns/columns/sortableColumnWrapper.d.ts

@@ -9,11 +9,6 @@ interface ISortableColumnOptions {
     isSortedBy: boolean;
     sortDirection: ColumnSortDirection;
     initialSortDirection?: ColumnSortDirectionTable;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 interface ISortableHeaderCellProps {
     columnName: string;

package/esm/dataGrid/withSortableColumns/withSortableColumns.d.ts

@@ -11,18 +11,14 @@ interface ISortableColumnsSettingsOptions {
     sortOptions?: ISortableColumnSettings;
 }
 export interface ISortableColumnsListProps<T> {
-    popupTriggerRef?: RefObject<HTMLElement>;
+    popupTriggerRef?: RefObject<HTMLElement | null>;
     columns: ISortableColumn<T>[];
     options: ISortableColumnsSettingsOptions;
     onSortChange: (newSortSettings: ISortableColumnSettings) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
+    ref: RefObject<HTMLElement | null>;
 }
 export declare const withSortableColumns: {
-    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ISortableColumnsListProps<T> & P> & import("react").RefAttributes<HTMLElement>>;
+    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): (props: ISortableColumnsListProps<T> & P) => import("react/jsx-runtime").JSX.Element;
     translations: string[];
 };
 export {};

package/esm/dataGrid/withSortableColumns/withSortableColumns.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { SortableColumnsStorage } from "./sortableColumnsStorage";
 import { toBasicColumn } from "../extensions/toBasicColumn";
 import { ActionsColumn } from "../columns/actionsColumn/actionsColumn";
@@ -8,9 +8,9 @@ import { ColumnSortDirection } from "./columns/columnSortDirection";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withSortableColumns = (DataGridComponent) => forwardRef(
+export const withSortableColumns = (DataGridComponent) => (
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerColumnsList(props, ref) {
+function InnerColumnsList(props) {
     var _a, _b;
     const { columns, options, onSortChange } = props;
     const settingsStore = useMemo(() => { var _a, _b; return new SortableColumnsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage); }, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
@@ -49,7 +49,7 @@ function InnerColumnsList(props, ref) {
                 }, column.title, onSort)
             ] }));
     }), [allColumns, sortSettings, onSort]);
-    return _jsx(DataGridComponent, Object.assign({}, props, { columns: [...sortedColumns], ref: ref }), "grid");
+    return _jsx(DataGridComponent, Object.assign({}, props, { columns: [...sortedColumns], ref: props.ref }), "grid");
 });
 withSortableColumns.translations = [
     ...SortableColumnWrapper.translations

package/esm/dateInput/dateInput.d.ts

@@ -7,10 +7,6 @@ export interface IDateInput extends IZenComponentProps {
     onChange: (value: string | undefined) => void;
     className?: string;
     classNamePopup?: string;
-    /**
-        @deprecated - this prop is deprecated and will be removed in the next major version.
-    */
-    hasApplyButton?: boolean;
     disabled?: boolean;
     dropDownTitle?: string;
     id?: string;

package/esm/dateInputInner/dateInputInner.d.ts

@@ -11,11 +11,6 @@ interface IDateInputInner extends IZenComponentProps {
     dateDeformatter: TDateDeformatter;
     dateFormat: string;
     onChange: (value: ICalendarRange) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     dateRangeMode?: boolean;
     selectTime?: boolean;
     disableFutureDates?: boolean;

package/esm/dateInputInner/dateInputInnerControlBlock.d.ts

@@ -1,7 +1,6 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, RefObject } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "../formField/formField.less";
-import React from "react";
 export type TDateFormatter = (date: Date | string) => string;
 export type TDateDeformatter = (date: string) => Date;
 interface IDateInputInnerControlBlock extends IZenComponentProps {
@@ -19,7 +18,8 @@ interface IDateInputInnerControlBlock extends IZenComponentProps {
     isActiveField: boolean;
     assistiveText?: string;
     isSelected?: boolean;
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const DateInputInnerControlBlock: React.ForwardRefExoticComponent<IDateInputInnerControlBlock & React.RefAttributes<HTMLInputElement>>;
+export declare const DateInputInnerControlBlock: (props: IDateInputInnerControlBlock) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/esm/dateInputInner/dateInputInnerControlBlock.js

@@ -5,11 +5,9 @@ import { TimePicker } from "../timePicker/timePicker";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { FormFieldError } from "../formFieldError/formFieldError";
-import React from "react";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const DateInputInnerControlBlock = React.forwardRef(function InnerDateInputControlBlock(props, ref) {
-    const { className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView, isActiveField, assistiveText } = props;
+export const DateInputInnerControlBlock = (props) => {
+    const { className, title, id, dateText, timePickerValue, placeholder, handleSetDateText, onBlurDateChangeHandler, requireSelection, selectTime, timeChangeHandler, isMobileView, isActiveField, assistiveText, ref } = props;
     const { translate } = useLanguage();
     const driveAssistiveClass = useDriveClassName("zen-form-field__text");
     const isHasDateError = requireSelection && !dateText;
@@ -22,7 +20,7 @@ export const DateInputInnerControlBlock = React.forwardRef(function InnerDateInp
     return _jsxs("div", { className: classNames(["zen-date-input-inner__control-block", className || ""]), children: [title
                 ? _jsx("label", { htmlFor: id, className: "zen-date-input-inner__label", children: title })
                 : null, _jsxs("div", { className: "zen-date-input-inner__inputs-block", children: [_jsxs("div", { className: "zen-date-input-inner__inputs-block-item", children: [memoizedDateInput, isHasDateError ? _jsx(FormFieldError, { error: translate("The date must be set") }) : null] }), memoizedTimeSelect] }), assistiveText ? _jsx("div", { className: classNames(["zen-date-input-inner__assistive-text", "zen-form-field__text", driveAssistiveClass || ""]), children: assistiveText }) : null] });
-});
+};
 export const TRANSLATIONS = [
     "The date must be set",
     "The time must be set"

package/esm/dateSelectionWrapper/dateSelectionWrapper.d.ts

@@ -2,11 +2,6 @@
 import "./dateSelectionWrapper.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IDateSelectionWrapper extends IZenComponentProps {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     onCancel?: () => void;
     onClear?: () => void;
     onReset?: () => void;

package/esm/dialog/dialogContent.js

@@ -27,7 +27,7 @@ export const DialogContent = ({ onClose, className, title, hasCloseButton, body,
     };
     const getFooterButton = (side, btn, ind) => {
         const buttonArgs = Object.assign(Object.assign({}, btn), { className: classNames(["zen-dialog-content__footer-item", btn.className || ""]) });
-        return _createElement(Button, Object.assign({}, buttonArgs, { key: `${side}-${ind}`, ref: side === "right" ? getButtonRef(ind) : null }));
+        return _createElement(Button, Object.assign({}, buttonArgs, { key: `${side}-${ind}`, ref: side === "right" ? getButtonRef(ind) : undefined }));
     };
     function subscriptionCondition(trigger) {
         return trigger.current !== null;

package/esm/dropdown/dropdown.d.ts

@@ -24,11 +24,6 @@ interface IFetchState<T> {
 export interface IFetchDropdownState extends IFetchState<IDropdownItem[]> {
 }
 interface IDropdownBase extends IChipsParent {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     className?: string;
     dataItems?: IDropdownItem[];
     getData?: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;

package/esm/dropdown/dropdownList.d.ts

@@ -12,11 +12,6 @@ export interface IDropdownList extends IZenComponentProps {
     onChange: (value: IChangeCheckbox) => void;
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     backButtonName?: string;
     isAllSelected: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
@@ -38,7 +33,7 @@ export interface IDropdownList extends IZenComponentProps {
     checkboxLabel?: string;
     isChecked?: boolean;
 }
-interface IDropdownEmptyList extends Pick<IDropdownList, "translate" | "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
+interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" | "onClearClick" | "onApplyClick" | "onCancelClick" | "hasApplyButton" | "isApplyDisabled" | "isClearButtonDisabled" | "isWithFooter"> {
     hasError: boolean;
 }
 export declare const EmptyList: React.FC<IDropdownEmptyList>;

package/esm/dropdown/dropdownPopup.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { TAlignment } from "../absolute/absolute";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IDropdownPopup extends IZenComponentProps {
     alignment?: TAlignment;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     classNamePopup?: string;
     isMobile: boolean;
     dialogAriaLabel?: string;
@@ -22,8 +22,8 @@ export interface IDropdownPopup extends IZenComponentProps {
     handleClearClick: () => void;
     handleTriggerClick: (newVal: boolean) => void;
     onInputChange: (newValue?: string) => void;
-    inputRef: React.MutableRefObject<HTMLInputElement>;
-    contentRef: React.RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
     onReadyForFocus?: (isCurrentOpen: boolean) => void;
     handleCheckboxChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     checkboxLabel?: string;

package/esm/dropdown/dropdownSearchableTrigger.d.ts

@@ -1,19 +1,14 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, RefObject } from "react";
 import "./dropdownSearchableTrigger.less";
 interface IDropdownSearchableTrigger {
     value: string;
     className?: string;
     onChange: (event?: ChangeEvent<HTMLInputElement>) => void;
     handleClick: (value: boolean) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     placeholder?: string;
     id?: string;
     isOpenPopup: boolean;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     width?: number;
     title?: string;
     disabled?: boolean;
@@ -21,7 +16,11 @@ interface IDropdownSearchableTrigger {
     currentSelection?: string;
     isError?: boolean;
     fullWidth?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const DropdownSearchableTrigger: React.ForwardRefExoticComponent<IDropdownSearchableTrigger & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownSearchableTrigger: {
+    ({ value, className, onChange, placeholder, isOpenPopup, inputRef, handleClick, width, title, id, disabled, count, currentSelection, isError, fullWidth, ref, ...otherProps }: IDropdownSearchableTrigger): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const TRANSLATIONS: string[];
 export {};