@geotab/zenith 3.7.0 → 3.8.0-beta.0

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

@@ -17,13 +17,18 @@ const dropdownSearchableTrigger_1 = require("./dropdownSearchableTrigger");
 const filterButton_1 = require("../filterButton/filterButton");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const dropdownHelper_1 = require("./dropdownHelper");
 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 = (0, react_1.useRef)(null);
     const handleButtonClick = () => {
         handleClick(!isActive);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchField ? ((0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.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))) : ((0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: (0, classNames_1.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 ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection })) : (placeholder) }))) }));
+    const allyTriggerProps = (0, react_1.useMemo)(() => (0, dropdownHelper_1.getAllyTriggerProps)(allyPattern), [allyPattern]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchField ? ((0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.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))) : ((0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: (0, classNames_1.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 ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([
+                    "zen-dropdown__trigger-button-text",
+                    buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""
+                ]), children: currentSelection })) : (placeholder) }))) }));
 };
 exports.DropdownTrigger = DropdownTrigger;
 exports.TRANSLATIONS = [...dropdownSearchableTrigger_1.TRANSLATIONS];

package/dist/dropdownRaw/stateReducer/stateReducer.js

@@ -75,7 +75,8 @@ function stateReducer(state, action) {
                     }
                 });
             }
-            const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 && (updatedGroupsMap[exports.ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
+            const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 &&
+                (updatedGroupsMap[exports.ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
             state.groupsMap = updatedGroupsMap;
             const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, state.selectedIds.length - newNamelessIds.size);
             const rootId = (0, stateReducerHelper_1.getRootId)(updatedGroupsMap, exports.ROOT_GROUP_ID, state.firstParentNodeIsVisible);
@@ -85,7 +86,8 @@ 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);
                 }
             });
@@ -123,7 +125,8 @@ 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);
                 }
             });
@@ -137,7 +140,8 @@ 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);
                 }
@@ -166,7 +170,8 @@ 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);
                 }
             });
@@ -179,9 +184,10 @@ 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_1.StateActionType.ChangeSelection: {
             const currentSelectedIds = new Set(state.selectedIds);
@@ -213,7 +219,8 @@ 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 = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
@@ -246,7 +253,8 @@ 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 = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
@@ -283,7 +291,8 @@ 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) });
@@ -306,7 +315,8 @@ 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 });
@@ -314,15 +324,17 @@ function stateReducer(state, action) {
         case stateActionType_1.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/dist/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/dist/dropdownRaw/utils/getSelectedValues.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSelectedValues = void 0;
-const getSelectedValues = (groupsMapSelected) => [...groupsMapSelected.values()].map(item => item.name).join(", ").trim();
+const getSelectedValues = (groupsMapSelected) => [...groupsMapSelected.values()]
+    .map(item => item.name)
+    .join(", ")
+    .trim();
 exports.getSelectedValues = getSelectedValues;

package/dist/emptyState/emptyState.js

@@ -7,8 +7,6 @@ const imageNothingFound_1 = require("../images/imageNothingFound");
 const useIcon_1 = require("./hooks/useIcon");
 const EmptyState = ({ className, children, description, image }) => {
     const icon = (0, useIcon_1.useIcon)(image);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-empty-state", className || ""]), children: [icon
-                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-state__image", children: icon })
-                : (0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, { className: "zen-empty-state__image" }), children && (0, jsx_runtime_1.jsx)("h2", { className: "zen-empty-state__header", children: children }), description && (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-state__description", children: description })] });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-empty-state", className || ""]), children: [icon ? (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-state__image", children: icon }) : (0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, { className: "zen-empty-state__image" }), children && (0, jsx_runtime_1.jsx)("h2", { className: "zen-empty-state__header", children: children }), description && (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-state__description", children: description })] }));
 };
 exports.EmptyState = EmptyState;

package/dist/favoriteButton/favoriteButton.js

@@ -39,6 +39,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");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");

package/dist/feedbackContainer/feedbackContainer.js

@@ -62,10 +62,14 @@ const FeedbackContainer = () => {
             removeAlert(alert.id);
             removedAlertId.current = indx;
             alert.onClose();
-        }, type: alert.type, animation: alert.animation || (sameAlertsLength ? null : (0, getAlertAnimation_1.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 : (0, getAlertAnimation_1.getAlertAnimation)(isAlertAdded, indx, removedAlertId.current, isMobile, activeFeedback)), buttons: alert.buttons, className: alert.className }, alert.id))), [alerts, isMobile, isAlertAdded, removeAlert, activeFeedback, sameAlertsLength, removedAlertId]);
     const alertClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-alerts", isMobile ? "zen-alerts--mobile" : ""]), [isMobile]);
     const toastClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-toasts", isMobile ? "zen-toasts--mobile" : ""]), [isMobile]);
-    const toastsToRender = (0, react_1.useMemo)(() => toasts.map((toast, indx, arr) => ((0, jsx_runtime_1.jsx)(toastRaw_1.ToastRaw, { id: toast.id, animation: toast.animation || (sameToastsLength ? null : (0, getToastAnimation_1.getToastAnimation)(isToastAdded, indx, removedToastId.current, arr.length, isMobile, activeFeedback)), header: toast.header, showSeconds: toast.showSeconds, className: toast.className, isOpen: true, onClose: () => {
+    const toastsToRender = (0, react_1.useMemo)(() => toasts.map((toast, indx, arr) => ((0, jsx_runtime_1.jsx)(toastRaw_1.ToastRaw, { id: toast.id, animation: toast.animation ||
+            (sameToastsLength
+                ? null
+                : (0, getToastAnimation_1.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/dist/feedbackContainer/hooks/useFeedbackAlert.js

@@ -22,17 +22,17 @@ 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;
             }
@@ -41,10 +41,10 @@ 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");
@@ -54,19 +54,19 @@ 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 = (0, react_2.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;
             }
@@ -75,8 +75,8 @@ const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
         });
     }, [setAlertsAnimation]);
     const finishAlertAnimation = (0, react_2.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;
             }
@@ -94,7 +94,7 @@ const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
                     return;
                 }
                 (0, removeZenithAlert_1.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);
@@ -110,12 +110,12 @@ const useFeedbackAlert = ({ setActiveFeedback, mode }) => {
     (0, react_1.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];
             });
@@ -129,7 +129,7 @@ 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);
@@ -141,11 +141,11 @@ 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;
                         }
@@ -153,21 +153,21 @@ 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));
                 });
             }
         }
@@ -176,9 +176,9 @@ 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)));
             }
         }
     }, [
@@ -195,6 +195,17 @@ 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
+    };
 };
 exports.useFeedbackAlert = useFeedbackAlert;

package/dist/feedbackContainer/hooks/useFeedbackToast.js

@@ -20,16 +20,16 @@ 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;
             }
@@ -38,16 +38,16 @@ 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 = (0, react_1.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;
             }
@@ -60,12 +60,12 @@ const useFeedbackToast = ({ setActiveFeedback, mode = "default" }) => {
     (0, react_1.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];
             });
@@ -79,7 +79,7 @@ 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);
@@ -91,11 +91,11 @@ 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;
                         }
@@ -103,21 +103,21 @@ 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));
                 });
             }
         }
@@ -126,9 +126,9 @@ 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)));
             }
         }
     }, [
@@ -149,8 +149,8 @@ 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;
             }
@@ -163,11 +163,11 @@ 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]);
     (0, react_1.useEffect)(() => {
@@ -186,7 +186,7 @@ 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/dist/feedbackContainer/utils/getToastAnimation.js

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

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