@geotab/zenith 2.0.0 → 3.0.0-beta.1

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

@@ -21,10 +21,10 @@ const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
         }
         else {
             react_1.Children.forEach(customContent.props.children, ch => {
-                if (ch.type === menu_1.Menu || ch.type === controlledMenu_1.ControlledMenu) {
+                if ((0, react_1.isValidElement)(ch) && (ch.type === menu_1.Menu || ch.type === controlledMenu_1.ControlledMenu)) {
                     menu = ch;
                 }
-                if (ch.type === headerButton_1.HeaderButton) {
+                if ((0, react_1.isValidElement)(ch) && ch.type === headerButton_1.HeaderButton) {
                     isOnlyButton = true;
                     menu = ch;
                 }
@@ -37,7 +37,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 || menu.props.name,
+            name: reactNode.props.name || "",
             disabled: reactNode.props.disabled || menu.props.disabled,
             link: reactNode.props.link || menu.props.link,
             target: reactNode.props.target || menu.props.target,

package/dist/header/components/mobileFilterControl/mobileFilterControl.d.ts

@@ -1,15 +1,10 @@
-import React from "react";
+/// <reference types="react" />
 import "./mobileFilterControl.less";
 export interface IMobileFilterControl {
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     className?: string;
     count?: number;
     onClick?: () => void;
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React.RefObject<HTMLButtonElement | null>;
 }
-export declare const MobileFilterControl: React.ForwardRefExoticComponent<Omit<IMobileFilterControl, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const MobileFilterControl: ({ className, onClick, count, ref }: IMobileFilterControl) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/header/components/mobileFilterControl/mobileFilterControl.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.MobileFilterControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const buttonType_1 = require("../../../button/buttonType");
 const svgIconSize_1 = require("../../../svgIcon/svgIconSize");
 const textIconButton_1 = require("../../../textIconButton/textIconButton");
@@ -14,12 +10,13 @@ const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const iconSettings6_1 = require("../../../icons/iconSettings6");
 const useDrive_1 = require("../../../utils/theme/useDrive");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.MobileFilterControl = react_1.default.forwardRef(function MobileFilterControl({ className, onClick, count }, ref) {
+const MobileFilterControl = ({ className, onClick, count, ref }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const filterIconButton = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { iconPosition: textIconButton_1.ButtonIconPosition.End, icon: iconSettings6_1.IconSettings6, iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, className: "zen-mobile-filter-control__actions zen-mobile-filter-control__actions--button", iconClasses: "zen-mobile-filter-control__actions--icon", title: translate("Show all filters"), type: buttonType_1.ButtonType.TertiaryBlack, contentClasses: count ? "zen-mobile-filter-control__counter-wrapper" : "", onClick: onClick, ref: ref, children: count ? (0, jsx_runtime_1.jsx)("div", { className: "zen-mobile-filter-control__counter", children: count }) : null });
     return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-mobile-filter-control", className !== null && className !== void 0 ? className : ""]), children: filterIconButton });
-});
+};
+exports.MobileFilterControl = MobileFilterControl;
 exports.TRANSLATIONS = [
     "Show all filters"
 ];

package/dist/header/components/mobileSearchControl/mobileSearchControl.d.ts

@@ -2,11 +2,6 @@ import React from "react";
 import "./mobileSearchControl.less";
 export interface IMobileSearchControl {
     searchInput: React.ReactElement;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     onClick: (state: boolean) => void;
     state: boolean;
     className?: string;

package/dist/header/header.d.ts

@@ -13,16 +13,6 @@ export declare enum HeaderType {
 export interface IHeader extends IZenComponentProps {
     children: ReactElement | ReactElement[] | undefined;
     onFiltersBarOpen?: () => void;
-    /**
-     * @deprecated
-     * @param useMobileVersion - will be removed in the next major release
-    */
-    useMobileVersion?: boolean;
-    /**
-     * @deprecated
-     * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const Header: React.FC<IHeader> & {
     Button: React.FC<IHeaderButton>;

package/dist/header/header.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.HeaderDisplayName = exports.Header = exports.HeaderType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, max-len */
 const react_1 = __importStar(require("react"));
 const headerHelpers_1 = require("./headerHelpers");
 const headerBack_1 = require("./headerBack");
@@ -129,7 +130,13 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
     const headerItems = (0, headerHelpers_1.getArrayOfChildren)(children);
     const { leftElements, resizableElements, rightElements, tabs, filtersBar } = (0, react_1.useMemo)(() => (0, headerHelpers_1.filterItems)(priority ? [...headerItems, ...additionalButtons] : [...additionalButtons, ...headerItems], isMobile), [additionalButtons, headerItems, isMobile, priority]);
     const [numberOfChangedFilters, setNumberOfChangedFilters] = (0, react_1.useState)(undefined);
-    const isOnlySearch = (0, react_1.useMemo)(() => filtersBar && searchComponent && react_1.default.Children.count(filtersBar.props.children) === 1, [filtersBar, searchComponent]);
+    const isOnlySearch = (0, react_1.useMemo)(() => {
+        if (!filtersBar || !searchComponent) {
+            return false;
+        }
+        const props = filtersBar.props;
+        return react_1.default.Children.count(props.children) === 1;
+    }, [filtersBar, searchComponent]);
     const memoizedFiltersBar = (0, react_1.useMemo)(() => filtersBar, [filtersBar]);
     const filtersBarToggler = (0, react_1.useCallback)(() => {
         if (onFiltersBarOpen || filtersBarToggleAllFiltersFn) {
@@ -179,7 +186,13 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
         (0, jsx_runtime_1.jsx)(mobileSearchControl_1.MobileSearchControl, { state: searchExpandedState, searchInput: searchComponent, onClick: (state) => setSearchExpandedState(state) }) : null, [searchComponent, searchExpandedState]);
     const mobileFilterButton = (0, react_1.useMemo)(() => isMobile && memoizedFiltersBar ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
     const mobileFilterNewlineButton = (0, react_1.useMemo)(() => isMobile && memoizedFiltersBar ? (0, jsx_runtime_1.jsx)(mobileFilterControl_1.MobileFilterControl, { count: numberOfChangedFilters, onClick: filtersBarToggler, ref: mobileFilterNewLineControlRef }) : null, [filtersBarToggler, isMobile, memoizedFiltersBar, numberOfChangedFilters]);
-    const mobileNewLineContainer = (0, react_1.useMemo)(() => !searchComponent || isFilterHidden ? null : (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__mobile-container-new-line", children: [(0, react_1.cloneElement)(searchComponent, { key: "searchComponentKey", className: `${searchComponent.props.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] }), [searchComponent, isFilterHidden, mobileFilterNewlineButton, isOnlySearch]);
+    const mobileNewLineContainer = (0, react_1.useMemo)(() => {
+        if (!searchComponent || isFilterHidden) {
+            return null;
+        }
+        const searchProps = searchComponent.props;
+        return (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__mobile-container-new-line", children: [(0, react_1.cloneElement)(searchComponent, { key: "searchComponentKey", className: `${searchProps.className || ""} zen-main-header__mobile-search-input` }), !isOnlySearch ? mobileFilterNewlineButton : null] });
+    }, [searchComponent, isFilterHidden, mobileFilterNewlineButton, isOnlySearch]);
     const isFilterInNewLine = (0, react_1.useMemo)(() => !!searchComponent && !isOnlySearch && resizableElements.length > 0 && !searchExpandedState, [searchComponent, isOnlySearch, resizableElements.length, searchExpandedState]);
     const collapsedElements = (0, react_1.useMemo)(() => nonFittingElements.length ? [moreButton] : [], [moreButton, nonFittingElements.length]);
     const mobileSearchCondition = !resizableElements.length && mobileSearch !== null;

package/dist/header/headerHelpers.d.ts

@@ -2,9 +2,9 @@ import React from "react";
 export declare const HeaderCustomMenuWrapper = "HeaderCustomMenuWrapper";
 export declare const getArrayOfChildren: <T>(children: T | T[] | undefined) => T[];
 export declare const isNamedChildComponent: <T>(item: any, componentName: string) => item is React.ReactElement<T, string | React.JSXElementConstructor<any>>;
-export declare const getItemsForRender: <T extends React.ReactElement<any, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-export declare const filterItems: <T extends React.ReactElement<any, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => {
-    resizableElements: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare const getItemsForRender: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
+export declare const filterItems: <T extends React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>(items: T[], isMobile: boolean) => {
+    resizableElements: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[];
     leftElements: T[];
     rightElements: T[];
     tabs: T | null;

package/dist/header/headerHelpers.js

@@ -52,7 +52,8 @@ const isNamedChildComponent = (item, componentName) => {
 };
 exports.isNamedChildComponent = isNamedChildComponent;
 const getFiltersBar = (item) => {
-    const children = (0, exports.getArrayOfChildren)(item.props.children);
+    const itemProps = item.props;
+    const children = (0, exports.getArrayOfChildren)(itemProps.children);
     return children.find(child => child.type ? (0, exports.isNamedChildComponent)(child, filtersBar_1.FiltersBarDisplayName) : false);
 };
 const getItemsForRender = (items, isMobile) => {
@@ -63,10 +64,11 @@ const getItemsForRender = (items, isMobile) => {
         if (el.type !== headerButton_1.HeaderButton) {
             return el;
         }
+        const elProps = el.props;
         const clone = (0, react_1.cloneElement)(el, {
-            children: el.props.icon ? null : el.props.children,
+            children: elProps.icon ? null : elProps.children,
             key: `hidden-key-${ind}-${items.length}`,
-            title: el.props.title ? el.props.title : (typeof el.props.children === "string" ? el.props.children : "")
+            title: elProps.title ? elProps.title : (typeof elProps.children === "string" ? elProps.children : "")
         });
         return clone;
     });
@@ -76,8 +78,9 @@ const filterItems = (items, isMobile) => {
     const itemsArr = [];
     react_1.default.Children.forEach(items, (child) => {
         if (react_1.default.isValidElement(child) && child.type === react_1.default.Fragment) {
-            if (child.props && child.props.children) {
-                const fragmentArr = (0, exports.getArrayOfChildren)(child.props.children);
+            const fragmentProps = child.props;
+            if (fragmentProps.children) {
+                const fragmentArr = (0, exports.getArrayOfChildren)(fragmentProps.children);
                 itemsArr.push(...fragmentArr.filter((el) => react_1.default.isValidElement(el)));
             }
         }
@@ -86,7 +89,6 @@ const filterItems = (items, isMobile) => {
         }
     });
     const result = itemsArr.reduce((acc, item) => {
-        var _a, _b;
         if ((0, exports.isNamedChildComponent)(item, headerTitle_1.HeaderTitleDisplayName)) {
             acc.leftElements.push(item);
         }
@@ -99,18 +101,19 @@ const filterItems = (items, isMobile) => {
         else if ((0, exports.isNamedChildComponent)(item, headerButton_1.HeaderButtonDisplayName) ||
             (0, exports.isNamedChildComponent)(item, headerMenu_1.HeaderMenuDisplayName) ||
             (0, exports.isNamedChildComponent)(item, exports.HeaderCustomMenuWrapper)) {
-            const targetElements = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.important) && !acc.rightElements.length ? acc.rightElements : acc.resizableElements;
-            if (((_b = item.props) === null || _b === void 0 ? void 0 : _b.important) && item.type === headerButton_1.HeaderButton && isMobile) {
+            const itemProps = item.props;
+            const targetElements = itemProps.important && !acc.rightElements.length ? acc.rightElements : acc.resizableElements;
+            if (itemProps.important && item.type === headerButton_1.HeaderButton && isMobile) {
                 const clone = (0, react_1.cloneElement)(item, {
-                    children: item.props.icon ? null : item.props.children,
-                    key: item.key || `key-${item.props.id}`,
-                    title: item.props.title ? item.props.title : (typeof item.props.children === "string" ? item.props.children : "")
+                    children: itemProps.icon ? null : itemProps.children,
+                    key: item.key || `key-${itemProps.id}`,
+                    title: itemProps.title ? itemProps.title : (typeof itemProps.children === "string" ? itemProps.children : "")
                 });
                 targetElements.push(clone);
             }
             else {
-                const element = item.key || item.props.id ? (0, react_1.cloneElement)(item, {
-                    key: item.key || `key-${item.props.id}`
+                const element = item.key || itemProps.id ? (0, react_1.cloneElement)(item, {
+                    key: item.key || `key-${itemProps.id}`
                 }) : item;
                 targetElements.push(element);
             }
@@ -119,13 +122,14 @@ const filterItems = (items, isMobile) => {
     }, { leftElements: [], resizableElements: [], rightElements: [], tabs: null, filtersBar: null });
     let isHasPrimary = result.rightElements.length > 0;
     const preparedResizableElements = result.resizableElements.map((el) => {
-        if (el.props.important || el.props.type === "primary") {
+        const elProps = el.props;
+        if (elProps.important || elProps.type === "primary") {
             const elClone = (0, react_1.cloneElement)(el, {
                 key: el.key,
                 important: false,
-                type: el.props.type === "primary" && isHasPrimary ? "secondary" : el.props.type
+                type: elProps.type === "primary" && isHasPrimary ? "secondary" : elProps.type
             });
-            isHasPrimary = el.props.type === "primary" ? true : isHasPrimary;
+            isHasPrimary = elProps.type === "primary" ? true : isHasPrimary;
             return elClone;
         }
         return el;

package/dist/header/hooks/useNonFittingElements.d.ts

@@ -18,6 +18,6 @@ export declare const useNonFittingElements: <T extends {
 }>({ maxWidth, data, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible }: INonFittingElementProps<T>) => {
     visibleElements: T[];
     nonFittingElements: T[];
-    hiddenContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    hiddenContainerRef: import("react").RefObject<HTMLDivElement | null>;
 };
 export {};

package/dist/headerTitle/headerTitle.d.ts

@@ -14,11 +14,6 @@ export interface IHeaderTitle extends IZenComponentProps {
     isBeta?: boolean;
     isMobile?: boolean;
     allowBookmarkWithBack?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     feedBackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
 }