@geotab/zenith 3.8.0-beta.1 → 3.9.0-beta.0

package/dist/filtersBar/filtersBar.js

@@ -63,7 +63,7 @@ const mergeStates = (initialState, newState) => {
     });
     return state;
 };
-const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, ignoreNewFunctionality, pillName, pillIcon, pillType, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
+const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersButton, parentElement, selectedQuantity, trailingContent, ignoreNewFunctionality, pillName, pillIcon, pillType, toggleAllFilters, getDefaultFiltersState, onClearAllFilters, onApplyAllFilters }) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     ignoreNewFunctionality; // TODO: remove after deprecated ignoreNewFunctionality removed
     const allFiltersRef = (0, react_1.useRef)(null);
@@ -134,7 +134,9 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         }
     }, [filterBarChildren, memoizedShouldUpdate, sidePanelState, stateFromChildren]);
     const searchChild = childrenArray.find(child => child && typeof child === "object" && "type" in child && child.type === filtersBarSearch_1.FiltersBarSearch);
-    setSearchComponent(searchChild);
+    (0, react_1.useEffect)(() => {
+        setSearchComponent(searchChild);
+    }, [searchChild, setSearchComponent]);
     (0, react_1.useEffect)(() => {
         setFiltersBarToggleAllFiltersFn(toggleAllFilters);
     }, [toggleAllFilters, setFiltersBarToggleAllFiltersFn]);
@@ -236,7 +238,7 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
     if (!isClientReady) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: (0, classNames_1.classNames)(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { children: filterBarChildren }), (0, jsx_runtime_1.jsx)(filtersBarActions_1.FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown })] })), !isAllFiltersButtonHidden ? sidePanel : null] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsxs)("div", { ref: toolbarRef, className: (0, classNames_1.classNames)(["zen-filters-toolbar", noActions ? "zen-filters-toolbar--no-actions" : "", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { children: filterBarChildren }), (0, jsx_runtime_1.jsx)(filtersBarActions_1.FiltersBarActions, { allFiltersRef: allFiltersRef, onShowAllFilters: () => toggleAllFiltersCallback(true), onClearFilters: handleClearClick, selectedQuantity: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.currentNumberOfChangedFilters, selectedQuantityToDisplay: selectedQuantity !== undefined ? selectedQuantity : filtersBarState.numberOfChangedFilters, hideAllFiltersButton: isAllFiltersButtonHidden, onApplyButtonClick: onApplyAllFilters ? handleApplyAllFilters(false) : undefined, isApplyButtonShown: isApplyButtonShown }), trailingContent && (0, jsx_runtime_1.jsx)("div", { className: "zen-filters-toolbar__trailing-content", children: trailingContent })] })), !isAllFiltersButtonHidden ? sidePanel : null] }));
 };
 exports.FiltersBar = FiltersBar;
 exports.FiltersBar.Search = filtersBarSearch_1.FiltersBarSearch;

package/dist/filtersBar/filtersBarActions/filtersBarActions.js

@@ -14,6 +14,7 @@ const buttonType_1 = require("../../button/buttonType");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const iconSettings6_1 = require("../../icons/iconSettings6");
+injectString("en", "Active filters: {}", "Active filters: {}");
 injectString("cs", "Filters", "Filtry");
 injectString("da-DK", "Filters", "Filtre");
 injectString("de", "Filters", "Filter");
@@ -118,6 +119,7 @@ const FiltersBarActions = ({
       onClick: onShowAllFilters,
       icon: iconSettings6_1.IconSettings6,
       iconPosition: textIconButton_1.ButtonIconPosition.Start,
+      "aria-label": selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? translate("Active filters: {}").replace("{}", selectedQuantityToDisplay.toString()) : translate("Filters"),
       children: (0, jsx_runtime_1.jsxs)("span", {
         className: "zen-filters-toolbar__action-label",
         children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? (0, jsx_runtime_1.jsx)("span", {
@@ -143,4 +145,4 @@ const FiltersBarActions = ({
   });
 };
 exports.FiltersBarActions = FiltersBarActions;
-exports.TRANSLATIONS = ["Filters", "Clear", "Search"];
+exports.TRANSLATIONS = ["Filters", "Clear", "Search", "Active filters: {}"];

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -86,6 +86,7 @@ const FiltersBarSidePanelRange = ({
 }) => {
   const generatedId = (0, react_1.useId)();
   const intId = id || generatedId;
+  const rangeErrorId = `${intId}-error`;
   const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
   const [errorType, setErrorType] = (0, react_1.useState)(undefined);
   const prevValueRef = (0, react_1.useRef)(value);
@@ -160,11 +161,13 @@ const FiltersBarSidePanelRange = ({
   return (0, jsx_runtime_1.jsxs)("div", {
     ref: setFieldsContainerRef,
     id: intId,
+    "aria-describedby": errorType !== undefined && directionState === "row" ? rangeErrorId : undefined,
     className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]),
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: rangeFieldContainerClasses,
       children: [memoizedMinRangeField, memoizedMaxRangeField]
     }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+      id: rangeErrorId,
       className: "zen-filters-bar-side-panel-range__error",
       error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""]
     }) : null]

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.d.ts

@@ -20,7 +20,7 @@ interface IFiltersBarSidePanelInternal extends IZenComponentProps {
 }
 export interface IFiltersBarSidePanel extends Pick<IFiltersBarSidePanelInternal, "className" | "children" | "state" | "dispatch"> {
 }
-export declare const FiltersBarSidePanel: ({ isOpen, className, children, triggerRef, parentElement, pillName, pillIcon, pillType, onClosePanel, getDefaultFiltersState, state, dispatch, onApplyAllFilters }: IFiltersBarSidePanelInternal) => import("react/jsx-runtime").JSX.Element;
+export declare const FiltersBarSidePanel: ({ isOpen, className, children, triggerRef, parentElement, pillName, pillIcon, pillType, onClosePanel, getDefaultFiltersState, state, dispatch, onApplyAllFilters }: IFiltersBarSidePanelInternal) => import("react/jsx-runtime").JSX.Element | null;
 export declare const FiltersBarSidePanelContainer: (_: IFiltersBarSidePanel) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js

@@ -163,8 +163,9 @@ const useUniqueId_1 = require("../../commonHelpers/useUniqueId");
 const useBodyScroll_1 = require("../../utils/useBodyScroll");
 const footerButtons_1 = require("../../footerButtons/footerButtons");
 const pill_1 = require("../../pill/pill");
-const react_dom_1 = require("react-dom");
 const zen_1 = require("../../utils/zen");
+const usePortal_1 = require("../../commonHelpers/hooks/usePortal");
+const useClientReady_1 = require("../../commonHelpers/hooks/useClientReady");
 const getChangeHandlers = children => {
   const handlers = {};
   react_1.Children.map(children, child => {
@@ -309,95 +310,100 @@ const FiltersBarSidePanel = ({
       handleClose();
     };
   }, [isOpen, setScrollHidden, resetScroll]);
-  return (0, jsx_runtime_1.jsxs)(react_1.Fragment, {
-    children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, {
-      className: "zen-high-level-shield",
-      dataShieldId: dataShieldId,
-      isVisible: isOpen
-    }), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, {
-      triggerRef: triggerRef,
-      isOpen: isOpen,
-      label: translate("All Filters"),
-      onHidePanel: onCloseAction,
-      className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]),
-      onTransitionEnd: handleReadyForFocus,
-      children: (0, jsx_runtime_1.jsxs)("div", {
-        className: "zen-side-panel-filters-bar-wrapper",
+  const isClientReady = (0, useClientReady_1.useClientReady)();
+  const portal = (0, usePortal_1.usePortal)((0, jsx_runtime_1.jsx)(sidePanel_1.SidePanel, {
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    label: translate("All Filters"),
+    onHidePanel: onCloseAction,
+    className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar", dark ? "zen-dark" : "", className !== null && className !== void 0 ? className : ""]),
+    onTransitionEnd: handleReadyForFocus,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-side-panel-filters-bar-wrapper",
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-side-panel-filters-bar__header",
         children: [(0, jsx_runtime_1.jsxs)("div", {
-          className: "zen-side-panel-filters-bar__header",
-          children: [(0, jsx_runtime_1.jsxs)("div", {
-            className: "zen-side-panel-filters-bar__title-wrapper",
-            children: [(0, jsx_runtime_1.jsx)("div", {
-              className: "zen-side-panel-filters-bar__title zen-ellipsis",
-              children: translate("All Filters")
-            }), pillName ? (0, jsx_runtime_1.jsx)("div", {
-              className: "zen-side-panel-filters-bar__title-pill",
-              children: (0, jsx_runtime_1.jsx)(pill_1.Pill, {
-                type: pillType,
-                icon: pillIcon,
-                children: pillName
-              })
-            }) : null]
-          }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
-            type: "tertiary-black",
-            className: "zen-side-panel-filters-bar__close-button",
-            icon: iconClose_1.IconClose,
-            iconSize: isMobile ? "huge" : "large",
+          className: "zen-side-panel-filters-bar__title-wrapper",
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-side-panel-filters-bar__title zen-ellipsis",
+            children: translate("All Filters")
+          }), pillName ? (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-side-panel-filters-bar__title-pill",
+            children: (0, jsx_runtime_1.jsx)(pill_1.Pill, {
+              type: pillType,
+              icon: pillIcon,
+              children: pillName
+            })
+          }) : null]
+        }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+          type: "tertiary-black",
+          className: "zen-side-panel-filters-bar__close-button",
+          icon: iconClose_1.IconClose,
+          iconSize: isMobile ? "huge" : "large",
+          onClick: onClosePanel,
+          iconPosition: textIconButton_2.ButtonIconPosition.Start,
+          title: translate("Close")
+        })]
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-side-panel-filters-bar__content",
+        children: newChildren
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar__footer", isMobile ? "zen-side-panel-filters-bar__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters-bar__footer--long-text" : ""]),
+        children: isMobile ? (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+          children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+            className: "zen-side-panel-filters-bar__apply-button",
+            disabled: applyDisabled,
+            onClick: onApplyFilters,
+            type: "primary",
+            children: translate("Apply")
+          }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+            className: "zen-side-panel-filters-bar__cancel-button",
+            type: "secondary",
             onClick: onClosePanel,
-            iconPosition: textIconButton_2.ButtonIconPosition.Start,
-            title: translate("Close")
+            children: translate("Cancel")
+          }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+            className: "zen-side-panel-filters-bar__clear-button",
+            onClick: onResetFilters,
+            type: "tertiary",
+            children: translate("Reset All")
           })]
-        }), (0, jsx_runtime_1.jsx)("div", {
-          className: "zen-side-panel-filters-bar__content",
-          children: newChildren
-        }), (0, jsx_runtime_1.jsx)("div", {
-          className: (0, classNames_1.classNames)(["zen-side-panel-filters-bar__footer", isMobile ? "zen-side-panel-filters-bar__footer--mobile" : "", isLongTextLanguages && !isMobile ? "zen-side-panel-filters-bar__footer--long-text" : ""]),
-          children: isMobile ? (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+        }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-side-panel-filters-bar__footer-section",
+            children: (0, jsx_runtime_1.jsx)(button_1.Button, {
+              type: "tertiary",
+              className: "zen-side-panel-filters-bar__clear-button",
+              onClick: onResetFilters,
+              children: translate("Reset All")
+            })
+          }), (0, jsx_runtime_1.jsxs)("div", {
+            className: "zen-side-panel-filters-bar__footer-section",
             children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
-              className: "zen-side-panel-filters-bar__apply-button",
-              disabled: applyDisabled,
-              onClick: onApplyFilters,
-              type: "primary",
-              children: translate("Apply")
-            }), (0, jsx_runtime_1.jsx)(button_1.Button, {
               className: "zen-side-panel-filters-bar__cancel-button",
               type: "secondary",
               onClick: onClosePanel,
               children: translate("Cancel")
             }), (0, jsx_runtime_1.jsx)(button_1.Button, {
-              className: "zen-side-panel-filters-bar__clear-button",
-              onClick: onResetFilters,
-              type: "tertiary",
-              children: translate("Reset All")
-            })]
-          }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-            children: [(0, jsx_runtime_1.jsx)("div", {
-              className: "zen-side-panel-filters-bar__footer-section",
-              children: (0, jsx_runtime_1.jsx)(button_1.Button, {
-                type: "tertiary",
-                className: "zen-side-panel-filters-bar__clear-button",
-                onClick: onResetFilters,
-                children: translate("Reset All")
-              })
-            }), (0, jsx_runtime_1.jsxs)("div", {
-              className: "zen-side-panel-filters-bar__footer-section",
-              children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
-                className: "zen-side-panel-filters-bar__cancel-button",
-                type: "secondary",
-                onClick: onClosePanel,
-                children: translate("Cancel")
-              }), (0, jsx_runtime_1.jsx)(button_1.Button, {
-                className: "zen-side-panel-filters-bar__apply-button zen-side-panel-filters-bar__apply-button--desktop",
-                disabled: applyDisabled,
-                onClick: onApplyFilters,
-                type: "primary",
-                children: translate("Apply")
-              })]
+              className: "zen-side-panel-filters-bar__apply-button zen-side-panel-filters-bar__apply-button--desktop",
+              disabled: applyDisabled,
+              onClick: onApplyFilters,
+              type: "primary",
+              children: translate("Apply")
             })]
-          })
-        })]
-      })
-    }), (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body)]
+          })]
+        })
+      })]
+    })
+  }), (_b = parentElement !== null && parentElement !== void 0 ? parentElement : (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) !== null && _b !== void 0 ? _b : (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  if (!isClientReady) {
+    return null;
+  }
+  return (0, jsx_runtime_1.jsxs)(react_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsx)(shield_1.Shield, {
+      className: "zen-high-level-shield",
+      dataShieldId: dataShieldId,
+      isVisible: isOpen
+    }), portal]
   });
 };
 exports.FiltersBarSidePanel = FiltersBarSidePanel;

package/dist/formFieldError/formFieldError.d.ts

@@ -1,7 +1,8 @@
 import "./formFieldError.less";
 interface IFormFieldError {
+    id?: string;
     className?: string;
     error?: string | string[];
 }
-export declare const FormFieldError: ({ className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormFieldError: ({ id, className, error }: IFormFieldError) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/formFieldError/formFieldError.js

@@ -6,12 +6,12 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconException_1 = require("../icons/iconException");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const FormFieldError = ({ className, error }) => {
+const FormFieldError = ({ id, className, error }) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field-error");
     const isDrive = (0, useDrive_1.useDrive)();
     const errorStrings = Array.isArray(error)
         ? error.filter(el => el).map((erStr, ind) => (0, jsx_runtime_1.jsx)("div", { children: erStr }, `error_str_${ind}`))
         : error && (0, jsx_runtime_1.jsx)("div", { children: error });
-    return error ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-field-error__icon-container", children: (0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
+    return error ? ((0, jsx_runtime_1.jsxs)("span", { id: id, className: (0, classNames_1.classNames)(["zen-form-field-error", driveComponentClass || "", className || ""]), children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-form-field-error__error-icon", size: isDrive ? "large" : "bigger" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field-error__error-text", children: errorStrings })] })) : null;
 };
 exports.FormFieldError = FormFieldError;

package/dist/header/components/collapsedItemsControl/utils/handleCustomMenuWrapper.js

@@ -36,7 +36,7 @@ const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
         const el = (0, react_1.createElement)(menu_1.Menu.Item, {
             id: reactNode.props.id || menu.props.id,
             key: reactNode.props.id || menu.props.id,
-            name: reactNode.props.name || "",
+            name: reactNode.props.name || menu.props.name || "",
             disabled: reactNode.props.disabled || menu.props.disabled,
             link: reactNode.props.link || menu.props.link,
             target: reactNode.props.target || menu.props.target,