@geotab/zenith 3.7.0 → 3.8.0-beta.1

package/esm/dropdownRaw/dropdownTrigger.d.ts

@@ -24,6 +24,7 @@ export interface IDropdownTrigger extends IZenComponentProps {
     onBlur?: () => void;
     popupId?: string;
     handleFocusOnPopup?: () => void;
+    allyPattern?: "selectOnlyCombobox" | "comboboxWithDialog" | "buttonWithDialog";
 }
-export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, ...otherProps }: IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, ...otherProps }: IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/esm/dropdownRaw/dropdownTrigger.js

@@ -12,14 +12,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { DropdownSearchableTrigger, TRANSLATIONS as SearchableTriggerTranslations } from "./dropdownSearchableTrigger";
 import { FilterButton } from "../filterButton/filterButton";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { getAllyTriggerProps } from "./dropdownHelper";
 export const DropdownTrigger = (_a) => {
-    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "isError", "popupId", "handleFocusOnPopup"]);
+    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, isError, popupId, handleFocusOnPopup, allyPattern = "buttonWithDialog" } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "isError", "popupId", "handleFocusOnPopup", "allyPattern"]);
     const elInpRef = useRef(null);
     const handleButtonClick = () => {
         handleClick(!isActive);
     };
-    return (_jsx(_Fragment, { children: searchField ? (_jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId }, otherProps))) : (_jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || placeholder, "aria-expanded": isActive, "aria-haspopup": "dialog", "data-role": "dialog", "aria-controls": popupId }, otherProps, { children: currentSelection ? (_jsx("span", { className: classNames(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection })) : (placeholder) }))) }));
+    const allyTriggerProps = useMemo(() => getAllyTriggerProps(allyPattern), [allyPattern]);
+    return (_jsx(_Fragment, { children: searchField ? (_jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, handleFocusOnPopup: handleFocusOnPopup, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth, popupId: popupId }, otherProps))) : (_jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel || placeholder, "aria-expanded": isActive, "aria-controls": popupId }, allyTriggerProps, otherProps, { children: currentSelection ? (_jsx("span", { className: classNames([
+                    "zen-dropdown__trigger-button-text",
+                    buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""
+                ]), children: currentSelection })) : (placeholder) }))) }));
 };
 export const TRANSLATIONS = [...SearchableTriggerTranslations];

package/esm/dropdownRaw/stateReducer/stateReducer.js

@@ -71,7 +71,8 @@ export function stateReducer(state, action) {
                     }
                 });
             }
-            const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
+            const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 &&
+                (updatedGroupsMap[ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
             state.groupsMap = updatedGroupsMap;
             const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, state.selectedIds.length - newNamelessIds.size);
             const rootId = getRootId(updatedGroupsMap, ROOT_GROUP_ID, state.firstParentNodeIsVisible);
@@ -81,7 +82,8 @@ export function stateReducer(state, action) {
             state.selectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = payload.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                     item && state.namelessIds.delete(id);
                 }
             });
@@ -119,7 +121,8 @@ export function stateReducer(state, action) {
             payload.selected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id];
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                     !item && newNamelessIds.add(id);
                 }
             });
@@ -133,7 +136,8 @@ export function stateReducer(state, action) {
             state.selectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id];
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                     !item && newNamelessIds.add(id);
                     item && newNamelessIds.delete(id);
                 }
@@ -162,7 +166,8 @@ export function stateReducer(state, action) {
             payload.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                     !item && newNamelessIds.add(id);
                 }
             });
@@ -175,9 +180,10 @@ export function stateReducer(state, action) {
             const newSelectedId = payload.value ? payload.value : state.defaultValue[0];
             if (newSelectedId && !state.groupsMapSelected.has(newSelectedId)) {
                 const item = state.groupsMap[newSelectedId] || state.listData.find(el => el.id === newSelectedId);
-                item && state.groupsMapSelected.set(newSelectedId, Object.assign(Object.assign({ id: newSelectedId }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                item &&
+                    state.groupsMapSelected.set(newSelectedId, Object.assign(Object.assign({ id: newSelectedId }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
             }
-            return Object.assign(Object.assign({}, state), { selectedIds: payload.value ? [payload.value] : (payload.reset ? [...state.defaultValue] : []) });
+            return Object.assign(Object.assign({}, state), { selectedIds: payload.value ? [payload.value] : payload.reset ? [...state.defaultValue] : [] });
         }
         case StateActionType.ChangeSelection: {
             const currentSelectedIds = new Set(state.selectedIds);
@@ -209,7 +215,8 @@ export function stateReducer(state, action) {
             currentSelectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
             const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
@@ -242,7 +249,8 @@ export function stateReducer(state, action) {
             currentSelectedIds.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
             const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
@@ -279,7 +287,8 @@ export function stateReducer(state, action) {
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
@@ -302,7 +311,8 @@ export function stateReducer(state, action) {
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined });
@@ -310,15 +320,17 @@ export function stateReducer(state, action) {
         case StateActionType.ToggleValueForAllSelected: {
             const currentEl = state.groupsMap[state.rootId];
             const newSelected = new Set();
-            state.isAllSelected && ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
-                if (!newSelected.has(el.id) && el.disabled) {
-                    newSelected.add(el.id);
-                }
-            });
+            state.isAllSelected &&
+                ((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
+                    if (!newSelected.has(el.id) && el.disabled) {
+                        newSelected.add(el.id);
+                    }
+                });
             newSelected.forEach(id => {
                 if (!state.groupsMapSelected.has(id)) {
                     const item = state.groupsMap[id] || state.listData.find(el => el.id === id);
-                    item && state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
+                    item &&
+                        state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
                 }
             });
             const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;

package/esm/dropdownRaw/types.d.ts

@@ -25,9 +25,9 @@ export interface IFetchDropdownState extends IFetchState<IDropdownRawItem[]> {
 }
 interface IDropdownBase extends IChipsParent {
     /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
+     * @deprecated
+     * @param translate - will be removed in the next major release
+     */
     translate?: (s: string) => string;
     className?: string;
     dataItems?: IDropdownRawItem[];

package/esm/dropdownRaw/utils/getSelectedValues.js

@@ -1 +1,4 @@
-export const getSelectedValues = (groupsMapSelected) => [...groupsMapSelected.values()].map(item => item.name).join(", ").trim();
+export const getSelectedValues = (groupsMapSelected) => [...groupsMapSelected.values()]
+    .map(item => item.name)
+    .join(", ")
+    .trim();

package/esm/emptyState/emptyState.js

@@ -4,7 +4,5 @@ import { ImageNothingFound } from "../images/imageNothingFound";
 import { useIcon } from "./hooks/useIcon";
 export const EmptyState = ({ className, children, description, image }) => {
     const icon = useIcon(image);
-    return _jsxs("div", { className: classNames(["zen-empty-state", className || ""]), children: [icon
-                ? _jsx("div", { className: "zen-empty-state__image", children: icon })
-                : _jsx(ImageNothingFound, { className: "zen-empty-state__image" }), children && _jsx("h2", { className: "zen-empty-state__header", children: children }), description && _jsx("div", { className: "zen-empty-state__description", children: description })] });
+    return (_jsxs("div", { className: classNames(["zen-empty-state", className || ""]), children: [icon ? _jsx("div", { className: "zen-empty-state__image", children: icon }) : _jsx(ImageNothingFound, { className: "zen-empty-state__image" }), children && _jsx("h2", { className: "zen-empty-state__header", children: children }), description && _jsx("div", { className: "zen-empty-state__description", children: description })] }));
 };

package/esm/favoriteButton/favoriteButton.js

@@ -35,6 +35,7 @@ injectString("tr", "Favorite", "Favori");
 injectString("zh-Hans", "Favorite", "\u6536\u85CF");
 injectString("zh-TW", "Favorite", "\u6211\u7684\u6700\u611B");
 injectString("ro-RO", "Favorite", "Preferat");
+injectString("ar-SA", "Favorite", "\u0627\u0644\u0645\u0641\u0636\u0644\u0629");
 export const FavoriteButton = ({
   isFavorite,
   onChange,

package/esm/feedbackContainer/feedbackContainer.js

@@ -36,10 +36,14 @@ export const FeedbackContainer = () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;
             alert.onClose();
-        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id))), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
+        }, type: alert.type, animation: alert.animation ||
+            (sameAlertsLength ? null : getAlertAnimation(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id))), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = useMemo(() => classNames(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = useMemo(() => classNames(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => (_jsx(ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
+    const toastsToRender = useMemo(() => toasts.map((toast, indx, arr) => (_jsx(ToastRaw, { id: toast.id, animation: toast.animation ||
+            (sameToastsLength
+                ? null
+                : getToastAnimation(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
             removeToast(toast.id);
             removedToastId.current = indx;
             toast.onClose();

package/esm/feedbackContainer/hooks/useFeedbackAlert.js

@@ -19,17 +19,17 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
             if (!apiAlertActions.find(el => el.id === id)) {
                 return;
             }
-            setApiAlertActions((prevAlerts) => prevAlerts.filter((el) => el.id !== id));
+            setApiAlertActions(prevAlerts => prevAlerts.filter(el => el.id !== id));
             topView.dispatchEvent(new CustomEvent("removeZenithAlert", { detail: id }));
             return;
         }
-        const renderedAlert = alerts.find((alert) => alert.id === id);
+        const renderedAlert = alerts.find(alert => alert.id === id);
         if (!renderedAlert) {
             return;
         }
         // "remove" animation
-        setAlerts((prevAlerts) => {
-            const alertIndex = prevAlerts.findIndex((alert) => alert.id === id);
+        setAlerts(prevAlerts => {
+            const alertIndex = prevAlerts.findIndex(alert => alert.id === id);
             if (alertIndex === -1) {
                 return prevAlerts;
             }
@@ -38,10 +38,10 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
             return [...prevAlerts];
         });
         if (important) {
-            setAlertsQueue((prevAlerts) => [{ value: renderedAlert, action: "remove", id }, ...prevAlerts]);
+            setAlertsQueue(prevAlerts => [{ value: renderedAlert, action: "remove", id }, ...prevAlerts]);
         }
         else {
-            setAlertsQueue((prevAlerts) => [...prevAlerts, { value: renderedAlert, action: "remove", id }]);
+            setAlertsQueue(prevAlerts => [...prevAlerts, { value: renderedAlert, action: "remove", id }]);
         }
         // TODO: check it
         setActiveFeedback("alert");
@@ -51,19 +51,19 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
             if (apiAlertActions.find(el => el.id === alert.id)) {
                 return;
             }
-            setApiAlertActions((prevAlerts) => [...prevAlerts, { value: alert, action: "add", id: alert.id }]);
+            setApiAlertActions(prevAlerts => [...prevAlerts, { value: alert, action: "add", id: alert.id }]);
             topView.dispatchEvent(new CustomEvent("addZenithAlert", { detail: alert }));
             return;
         }
-        setAlertsQueue((prevAlerts) => [...prevAlerts, { value: alert, action: "add", id: alert.id }]);
+        setAlertsQueue(prevAlerts => [...prevAlerts, { value: alert, action: "add", id: alert.id }]);
         setActiveFeedback("alert");
     }, [isAPIMode, setAlertsQueue, setActiveFeedback, apiAlertActions, setApiAlertActions, topView]);
     const startAlertAnimation = useCallback(alertId => {
         if (!alertId) {
             return;
         }
-        setAlertsAnimation((prevAnimations) => {
-            const alertAnimation = prevAnimations.find((animation) => animation.id === alertId);
+        setAlertsAnimation(prevAnimations => {
+            const alertAnimation = prevAnimations.find(animation => animation.id === alertId);
             if (!alertAnimation) {
                 return prevAnimations;
             }
@@ -72,8 +72,8 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
         });
     }, [setAlertsAnimation]);
     const finishAlertAnimation = useCallback((alertId) => {
-        setAlertsAnimation((prevAnimations) => {
-            const alertAnimation = prevAnimations.find((animation) => animation.id === alertId);
+        setAlertsAnimation(prevAnimations => {
+            const alertAnimation = prevAnimations.find(animation => animation.id === alertId);
             if (!alertAnimation) {
                 return prevAnimations;
             }
@@ -91,7 +91,7 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
                     return;
                 }
                 removeZenithAlert(event, removeAlert);
-                removedAlertId.current = alerts.findIndex((alert) => alert.id === id);
+                removedAlertId.current = alerts.findIndex(alert => alert.id === id);
             };
             topView.addEventListener("addZenithAlert", addZenithAlertCallback);
             topView.addEventListener("removeZenithAlert", removeZenithAlertCallback);
@@ -107,12 +107,12 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
     useEffect(() => {
         if (!hasAllActionsHasAnimations()) {
             const notAnimatedActions = findAllNotAnimatedActions();
-            setAlertsAnimation((prevAnimations) => {
-                const newAnimations = notAnimatedActions.map((action) => {
+            setAlertsAnimation(prevAnimations => {
+                const newAnimations = notAnimatedActions.map(action => {
                     if (action.action === "add") {
                         return { id: action.id, isFinished: null };
                     }
-                    return ({ id: action.id, isFinished: false });
+                    return { id: action.id, isFinished: false };
                 });
                 return [...prevAnimations, ...newAnimations];
             });
@@ -126,7 +126,7 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
         if (alerts.length > alertsMaxNumber) {
             const finishedAnimations = alertsAnimation.filter(animation => animation.isFinished === true);
             const lastAlert = alerts[alerts.length - 1];
-            const lastAlertAnimation = finishedAnimations.find((animation) => animation.id === lastAlert.id);
+            const lastAlertAnimation = finishedAnimations.find(animation => animation.id === lastAlert.id);
             if (!lastAlertAnimation) {
                 removedAlertId.current = alerts.length - 1;
                 finishAlertAnimation(lastAlert.id);
@@ -138,11 +138,11 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
         }
         if (alertsQueue.length) {
             const alertQueueItem = alertsQueue[0];
-            const animation = alertsAnimation.find((alertAnimation) => alertAnimation.id === alertQueueItem.id);
+            const animation = alertsAnimation.find(alertAnimation => alertAnimation.id === alertQueueItem.id);
             if (alertQueueItem.action === "add") {
                 if (animation && alertsQueue.length > 1) {
-                    setAlertsAnimation((prevAnimations) => {
-                        const alertAnimation = prevAnimations.find((an) => an.id === alertQueueItem.id);
+                    setAlertsAnimation(prevAnimations => {
+                        const alertAnimation = prevAnimations.find(an => an.id === alertQueueItem.id);
                         if (!alertAnimation) {
                             return prevAnimations;
                         }
@@ -150,21 +150,21 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
                         return [...prevAnimations];
                     });
                 }
-                setAlerts((prevAlerts) => [alertQueueItem.value, ...prevAlerts]);
-                setAlertsQueue((prevAlerts) => prevAlerts.filter((alert) => alert.id !== alertQueueItem.id));
+                setAlerts(prevAlerts => [alertQueueItem.value, ...prevAlerts]);
+                setAlertsQueue(prevAlerts => prevAlerts.filter(alert => alert.id !== alertQueueItem.id));
                 return;
             }
-            const removedAlertsQueue = alertsQueue.filter((alert) => alert.action === "remove");
+            const removedAlertsQueue = alertsQueue.filter(alert => alert.action === "remove");
             const finishedAnimations = alertsAnimation.filter(el => el.isFinished === true);
             if (removedAlertsQueue.length && finishedAnimations.length) {
-                removedAlertsQueue.forEach((alert) => {
-                    const alertAnimation = finishedAnimations.find((el) => el.id === alert.id);
+                removedAlertsQueue.forEach(alert => {
+                    const alertAnimation = finishedAnimations.find(el => el.id === alert.id);
                     if (!alertAnimation) {
                         return;
                     }
-                    setAlerts((prevAlerts) => prevAlerts.filter((el) => el.id !== alert.id));
-                    setAlertsQueue((prevAlerts) => prevAlerts.filter((el) => el.id !== alert.id));
-                    setAlertsAnimation((prevAnimations) => prevAnimations.filter((el) => el.id !== alert.id));
+                    setAlerts(prevAlerts => prevAlerts.filter(el => el.id !== alert.id));
+                    setAlertsQueue(prevAlerts => prevAlerts.filter(el => el.id !== alert.id));
+                    setAlertsAnimation(prevAnimations => prevAnimations.filter(el => el.id !== alert.id));
                 });
             }
         }
@@ -173,9 +173,9 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
             if (!finishedAnimations.length) {
                 return;
             }
-            const renderedAlertsIds = alerts.filter((alert) => finishedAnimations.some((animation) => animation.id === alert.id)).map((alert) => alert.id);
+            const renderedAlertsIds = alerts.filter(alert => finishedAnimations.some(animation => animation.id === alert.id)).map(alert => alert.id);
             if (renderedAlertsIds.length) {
-                setAlertsAnimation((prevAnimations) => prevAnimations.filter((alertAnimation) => !renderedAlertsIds.includes(alertAnimation.id)));
+                setAlertsAnimation(prevAnimations => prevAnimations.filter(alertAnimation => !renderedAlertsIds.includes(alertAnimation.id)));
             }
         }
     }, [
@@ -192,5 +192,16 @@ export const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
         hasAllActionsHasAnimations,
         findAllNotAnimatedActions
     ]);
-    return { alerts, alertsAnimation, removedAlertId, alertsQueue, addAlert, removeAlert, startAlertAnimation, finishAlertAnimation, apiAlertActions, setApiAlertActions };
+    return {
+        alerts,
+        alertsAnimation,
+        removedAlertId,
+        alertsQueue,
+        addAlert,
+        removeAlert,
+        startAlertAnimation,
+        finishAlertAnimation,
+        apiAlertActions,
+        setApiAlertActions
+    };
 };

package/esm/feedbackContainer/hooks/useFeedbackToast.js

@@ -17,16 +17,16 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
             if (!apiToastActions.find(el => el.id === id)) {
                 return;
             }
-            setApiToastActions((prevToasts) => prevToasts.filter((el) => el.id !== id));
+            setApiToastActions(prevToasts => prevToasts.filter(el => el.id !== id));
             topView.dispatchEvent(new CustomEvent("removeZenithToast", { detail: id }));
             return;
         }
-        const renderedToast = toasts.find((toast) => toast.id === id);
+        const renderedToast = toasts.find(toast => toast.id === id);
         if (!renderedToast) {
             return;
         }
-        setToasts((prevToasts) => {
-            const toastIndex = prevToasts.findIndex((toast) => toast.id === id);
+        setToasts(prevToasts => {
+            const toastIndex = prevToasts.findIndex(toast => toast.id === id);
             if (toastIndex === -1) {
                 return prevToasts;
             }
@@ -35,16 +35,16 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
             return [...prevToasts];
         });
         if (important) {
-            setToastsQueue((prevToasts) => [{ value: renderedToast, action: "remove", id }, ...prevToasts]);
+            setToastsQueue(prevToasts => [{ value: renderedToast, action: "remove", id }, ...prevToasts]);
         }
         else {
-            setToastsQueue((prevToasts) => [...prevToasts, { value: renderedToast, action: "remove", id }]);
+            setToastsQueue(prevToasts => [...prevToasts, { value: renderedToast, action: "remove", id }]);
         }
         setActiveFeedback("toast");
     }, [isAPIMode, toasts, setToasts, setToastsQueue, setActiveFeedback, apiToastActions, setApiToastActions, topView]);
     const finishToastAnimation = useCallback((toastId) => {
-        setToastsAnimation((prevAnimations) => {
-            const toastAnimation = prevAnimations.find((animation) => animation.id === toastId);
+        setToastsAnimation(prevAnimations => {
+            const toastAnimation = prevAnimations.find(animation => animation.id === toastId);
             if (!toastAnimation) {
                 return prevAnimations;
             }
@@ -57,12 +57,12 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
     useEffect(() => {
         if (!hasAllActionsHasAnimations()) {
             const notAnimatedActions = findAllNotAnimatedActions();
-            setToastsAnimation((prevAnimations) => {
-                const newAnimations = notAnimatedActions.map((action) => {
+            setToastsAnimation(prevAnimations => {
+                const newAnimations = notAnimatedActions.map(action => {
                     if (action.action === "add") {
                         return { id: action.id, isFinished: null };
                     }
-                    return ({ id: action.id, isFinished: false });
+                    return { id: action.id, isFinished: false };
                 });
                 return [...prevAnimations, ...newAnimations];
             });
@@ -76,7 +76,7 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
         if (toasts.length > toastMaxNumber) {
             const finishedAlertAnimations = toastsAnimation.filter(animation => animation.isFinished === true);
             const firstToast = toasts[0];
-            const firstToastAnimation = finishedAlertAnimations.find((animation) => animation.id === firstToast.id);
+            const firstToastAnimation = finishedAlertAnimations.find(animation => animation.id === firstToast.id);
             if (!firstToastAnimation) {
                 removedToastId.current = 0;
                 finishToastAnimation(firstToast.id);
@@ -88,11 +88,11 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
         }
         if (toastsQueue.length) {
             const toastQueueItem = toastsQueue[0];
-            const animation = toastsAnimation.find((toastAnimation) => toastAnimation.id === toastQueueItem.id);
+            const animation = toastsAnimation.find(toastAnimation => toastAnimation.id === toastQueueItem.id);
             if (toastQueueItem.action === "add") {
                 if (animation && toastsQueue.length > 1) {
-                    setToastsAnimation((prevAnimations) => {
-                        const toastAnimation = prevAnimations.find((an) => an.id === toastQueueItem.id);
+                    setToastsAnimation(prevAnimations => {
+                        const toastAnimation = prevAnimations.find(an => an.id === toastQueueItem.id);
                         if (!toastAnimation) {
                             return prevAnimations;
                         }
@@ -100,21 +100,21 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
                         return [...prevAnimations];
                     });
                 }
-                setToasts((prevToasts) => [...prevToasts, toastQueueItem.value]);
-                setToastsQueue((prevToasts) => prevToasts.filter((toast) => toast.id !== toastQueueItem.id));
+                setToasts(prevToasts => [...prevToasts, toastQueueItem.value]);
+                setToastsQueue(prevToasts => prevToasts.filter(toast => toast.id !== toastQueueItem.id));
                 return;
             }
-            const removedToastsQueue = toastsQueue.filter((toast) => toast.action === "remove");
+            const removedToastsQueue = toastsQueue.filter(toast => toast.action === "remove");
             const finishedAnimations = toastsAnimation.filter(el => el.isFinished === true);
             if (removedToastsQueue.length && finishedAnimations.length) {
-                removedToastsQueue.forEach((toast) => {
-                    const toastAnimation = finishedAnimations.find((el) => el.id === toast.id);
+                removedToastsQueue.forEach(toast => {
+                    const toastAnimation = finishedAnimations.find(el => el.id === toast.id);
                     if (!toastAnimation) {
                         return;
                     }
-                    setToasts((prevToasts) => prevToasts.filter((el) => el.id !== toast.id));
-                    setToastsQueue((prevToasts) => prevToasts.filter((el) => el.id !== toast.id));
-                    setToastsAnimation((prevAnimations) => prevAnimations.filter((el) => el.id !== toast.id));
+                    setToasts(prevToasts => prevToasts.filter(el => el.id !== toast.id));
+                    setToastsQueue(prevToasts => prevToasts.filter(el => el.id !== toast.id));
+                    setToastsAnimation(prevAnimations => prevAnimations.filter(el => el.id !== toast.id));
                 });
             }
         }
@@ -123,9 +123,9 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
             if (!finishedAnimations.length) {
                 return;
             }
-            const renderedToastsIds = toasts.filter((toast) => finishedAnimations.some((animation) => animation.id === toast.id)).map((toast) => toast.id);
+            const renderedToastsIds = toasts.filter(toast => finishedAnimations.some(animation => animation.id === toast.id)).map(toast => toast.id);
             if (renderedToastsIds.length) {
-                setToastsAnimation((prevAnimations) => prevAnimations.filter((toastAnimation) => !renderedToastsIds.includes(toastAnimation.id)));
+                setToastsAnimation(prevAnimations => prevAnimations.filter(toastAnimation => !renderedToastsIds.includes(toastAnimation.id)));
             }
         }
     }, [
@@ -146,8 +146,8 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
         if (!toastId) {
             return;
         }
-        setToastsAnimation((prevAnimations) => {
-            const toastAnimation = prevAnimations.find((animation) => animation.id === toastId);
+        setToastsAnimation(prevAnimations => {
+            const toastAnimation = prevAnimations.find(animation => animation.id === toastId);
             if (!toastAnimation) {
                 return prevAnimations;
             }
@@ -160,11 +160,11 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
             if (apiToastActions.find(el => el.id === toast.id)) {
                 return;
             }
-            setApiToastActions((prevToasts) => [...prevToasts, { value: toast, action: "add", id: toast.id }]);
+            setApiToastActions(prevToasts => [...prevToasts, { value: toast, action: "add", id: toast.id }]);
             topView.dispatchEvent(new CustomEvent("addZenithToast", { detail: toast }));
             return;
         }
-        setToastsQueue((prevToasts) => [...prevToasts, { value: toast, action: "add", id: toast.id }]);
+        setToastsQueue(prevToasts => [...prevToasts, { value: toast, action: "add", id: toast.id }]);
         setActiveFeedback("toast");
     }, [isAPIMode, setToastsQueue, setActiveFeedback, apiToastActions, setApiToastActions, topView]);
     useEffect(() => {
@@ -183,7 +183,7 @@ export const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
                     return;
                 }
                 removeToast(toastId);
-                removedToastId.current = toasts.findIndex((toast) => toast.id === toastId);
+                removedToastId.current = toasts.findIndex(toast => toast.id === toastId);
             };
             topView.addEventListener("addZenithToast", addZenithToastCallback);
             topView.addEventListener("removeZenithToast", removeZenithToastCallback);

package/esm/feedbackContainer/utils/getToastAnimation.js

@@ -12,7 +12,7 @@ export const getToastAnimation = (isAdded, indx, removedId, toastLength, isMobil
         return "top-bottom";
     }
     if (isAdded) {
-        if ((indx + 1) === toastLength) {
+        if (indx + 1 === toastLength) {
             return "right-left";
         }
         return "bottom-top";

package/esm/fileUpload/components/dropZoneContent.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+interface IDropZoneContentProps {
+    size: "large" | "condensed";
+    isMobile: boolean;
+    supportedFormatsText?: string;
+    acceptedFormats: string;
+    uploadMethodDescription: string;
+    disabled: boolean;
+    isUploading: boolean;
+    handleBrowseClick: () => void;
+    translate: (key: string) => string;
+    browseButtonRef: RefObject<HTMLButtonElement | null>;
+}
+export declare const DropZoneContent: ({ size, isMobile, supportedFormatsText, acceptedFormats, uploadMethodDescription, disabled, isUploading, handleBrowseClick, translate, browseButtonRef }: IDropZoneContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};