@geotab/zenith 1.17.0 → 1.18.0-beta.0

package/dist/gridLayout/utils/mergeGridStates.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeGridStates = void 0;
+// State priorities:
+// 1. From props specific (gridLg, gridMd, gridSm, gridLgStart, gridMdStart, gridSmStart properties)
+// 2. From props general (grid and gridStart properties)
+// 3. From class names specific ("zen-lg", "zen-md", "zen-sm", "zen-lg-start", "zen-md-start", "zen-sm-start" class names)
+// 4. From class names general ("zen-col-" and "zen-col-start" class names)
+// eslint-disable-next-line complexity
+const mergeGridStates = (stateFromProps, stateFromClassNames, resultState) => {
+    if (stateFromProps.gridLg !== undefined) {
+        resultState.gridLg = stateFromProps.gridLg;
+    }
+    if (stateFromProps.gridMd !== undefined) {
+        resultState.gridMd = stateFromProps.gridMd;
+    }
+    if (stateFromProps.gridSm !== undefined) {
+        resultState.gridSm = stateFromProps.gridSm;
+    }
+    if (stateFromProps.lg !== undefined) {
+        resultState.lg = stateFromProps.lg;
+    }
+    if (stateFromProps.md !== undefined) {
+        resultState.md = stateFromProps.md;
+    }
+    if (stateFromProps.sm !== undefined) {
+        resultState.sm = stateFromProps.sm;
+    }
+    if (stateFromProps.gridLgStart !== undefined) {
+        resultState.gridLgStart = stateFromProps.gridLgStart;
+    }
+    if (stateFromProps.gridMdStart !== undefined) {
+        resultState.gridMdStart = stateFromProps.gridMdStart;
+    }
+    if (stateFromProps.gridSmStart !== undefined) {
+        resultState.gridSmStart = stateFromProps.gridSmStart;
+    }
+    if (stateFromProps.lgStart !== undefined) {
+        resultState.lgStart = stateFromProps.lgStart;
+    }
+    if (stateFromProps.mdStart !== undefined) {
+        resultState.mdStart = stateFromProps.mdStart;
+    }
+    if (stateFromProps.smStart !== undefined) {
+        resultState.smStart = stateFromProps.smStart;
+    }
+    // Merge state from class names
+    if ((resultState.lg === undefined && resultState.gridLg === undefined) && stateFromClassNames.lg !== undefined) {
+        resultState.lg = stateFromClassNames.lg;
+    }
+    if ((resultState.md === undefined && resultState.gridMd === undefined) && stateFromClassNames.md !== undefined) {
+        resultState.md = stateFromClassNames.md;
+    }
+    if ((resultState.sm === undefined && resultState.gridSm === undefined) && stateFromClassNames.sm !== undefined) {
+        resultState.sm = stateFromClassNames.sm;
+    }
+    if ((resultState.lgStart === undefined && resultState.gridLgStart === undefined) && stateFromClassNames.lgStart !== undefined) {
+        resultState.lgStart = stateFromClassNames.lgStart;
+    }
+    if ((resultState.mdStart === undefined && resultState.gridMdStart === undefined) && stateFromClassNames.mdStart !== undefined) {
+        resultState.mdStart = stateFromClassNames.mdStart;
+    }
+    if ((resultState.smStart === undefined && resultState.gridSmStart === undefined) && stateFromClassNames.smStart !== undefined) {
+        resultState.smStart = stateFromClassNames.smStart;
+    }
+    if (resultState.gridLg === undefined && stateFromClassNames.gridLg !== undefined) {
+        resultState.gridLg = stateFromClassNames.gridLg;
+    }
+    if (resultState.gridMd === undefined && stateFromClassNames.gridMd !== undefined) {
+        resultState.gridMd = stateFromClassNames.gridMd;
+    }
+    if (resultState.gridSm === undefined && stateFromClassNames.gridSm !== undefined) {
+        resultState.gridSm = stateFromClassNames.gridSm;
+    }
+    if (resultState.gridLgStart === undefined && stateFromClassNames.gridLgStart !== undefined) {
+        resultState.gridLgStart = stateFromClassNames.gridLgStart;
+    }
+    if (resultState.gridMdStart === undefined && stateFromClassNames.gridMdStart !== undefined) {
+        resultState.gridMdStart = stateFromClassNames.gridMdStart;
+    }
+    if (resultState.gridSmStart === undefined && stateFromClassNames.gridSmStart !== undefined) {
+        resultState.gridSmStart = stateFromClassNames.gridSmStart;
+    }
+};
+exports.mergeGridStates = mergeGridStates;

package/dist/gridLayout/utils/setGridProp.d.ts

@@ -0,0 +1,2 @@
+import { IGridItemFullState } from "../hooks/useGridClasses";
+export declare const setGridProp: (gridState: IGridItemFullState, prop: unknown, stateProp: keyof IGridItemFullState, maxValue: number) => void;

package/dist/gridLayout/utils/setGridProp.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setGridProp = void 0;
+const setGridProp = (gridState, prop, stateProp, maxValue) => {
+    if (prop && typeof prop === "number" && prop > 0) {
+        gridState[stateProp] = prop > maxValue ? maxValue : prop;
+    }
+};
+exports.setGridProp = setGridProp;

package/dist/gridLayout/utils/simplifyGridState.d.ts

@@ -0,0 +1,2 @@
+import { IGridItemFullState } from "../hooks/useGridClasses";
+export declare const simplifyGridState: (gridState: IGridItemFullState) => void;

package/dist/gridLayout/utils/simplifyGridState.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.simplifyGridState = void 0;
+const simplifyGridState = (gridState) => {
+    if (!gridState.lg && gridState.gridLg) {
+        gridState.lg = gridState.gridLg;
+    }
+    if (!gridState.md && gridState.gridMd) {
+        gridState.md = gridState.gridMd;
+    }
+    if (!gridState.sm && gridState.gridSm) {
+        gridState.sm = gridState.gridSm;
+    }
+    if (!gridState.lgStart && gridState.gridLgStart) {
+        gridState.lgStart = gridState.gridLgStart;
+    }
+    if (!gridState.mdStart && gridState.gridMdStart) {
+        gridState.mdStart = gridState.gridMdStart;
+    }
+    if (!gridState.smStart && gridState.gridSmStart) {
+        gridState.smStart = gridState.gridSmStart;
+    }
+    delete gridState.gridLg;
+    delete gridState.gridMd;
+    delete gridState.gridSm;
+    delete gridState.gridLgStart;
+    delete gridState.gridMdStart;
+    delete gridState.gridSmStart;
+};
+exports.simplifyGridState = simplifyGridState;

package/dist/gridLayout/utils/updateGridPropToState.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { IGridItemFullState } from "../hooks/useGridClasses";
+import { IZenGridItem } from "../../commonHelpers/zenComponent";
+export declare const updateGridPropToState: (gridState: IGridItemFullState, item: ReactElement<IZenGridItem>) => void;

package/dist/gridLayout/utils/updateGridPropToState.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGridPropToState = void 0;
+const constants_1 = require("./constants");
+const updateGridPropToState = (gridState, item) => {
+    const { grid } = item.props;
+    if (grid && typeof grid === "number" && grid > 0) {
+        let gridValue = grid;
+        if (gridValue > 1284) {
+            gridValue = 1284;
+        }
+        if (String(gridValue).length === 4) {
+            const deskValue = parseInt(String(gridValue).slice(0, 2), 10);
+            const tabletValue = parseInt(String(gridValue).slice(2, 3), 10);
+            const mobileValue = parseInt(String(gridValue).slice(3, 4), 10);
+            gridState.gridLg = deskValue;
+            gridState.gridMd = tabletValue;
+            gridState.gridSm = mobileValue;
+        }
+        if (String(gridValue).length === 3) {
+            const deskValue = parseInt(String(gridValue).slice(0, 1), 10);
+            const tabletValue = parseInt(String(gridValue).slice(1, 2), 10);
+            const mobileValue = parseInt(String(gridValue).slice(2, 3), 10);
+            gridState.gridLg = deskValue;
+            gridState.gridMd = tabletValue;
+            gridState.gridSm = mobileValue;
+        }
+        if (String(gridValue).length === 2) {
+            const deskValue = parseInt(String(gridValue).slice(0, 1), 10);
+            const tabletValue = parseInt(String(gridValue).slice(1, 2), 10);
+            gridState.gridLg = deskValue;
+            gridState.gridMd = tabletValue;
+            gridState.gridSm = tabletValue > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : tabletValue;
+        }
+        if (String(gridValue).length === 1) {
+            const deskValue = parseInt(String(gridValue).slice(0, 1), 10);
+            gridState.gridLg = deskValue;
+            gridState.gridMd = deskValue > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : deskValue;
+            gridState.gridSm = deskValue > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : deskValue;
+        }
+    }
+};
+exports.updateGridPropToState = updateGridPropToState;

package/dist/gridLayout/utils/updateGridStartPropToState.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { IGridItemFullState } from "../hooks/useGridClasses";
+import { IZenGridItem } from "../../commonHelpers/zenComponent";
+export declare const updateGridStartPropToState: (gridState: IGridItemFullState, item: ReactElement<IZenGridItem>) => void;

package/dist/gridLayout/utils/updateGridStartPropToState.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGridStartPropToState = void 0;
+const updateGridStartPropToState = (gridState, item) => {
+    const { gridStart } = item.props;
+    if (gridStart && typeof gridStart === "number" && gridStart > 0) {
+        let gridStartValue = gridStart;
+        if (gridStartValue > 1284) {
+            gridStartValue = 1284;
+        }
+        if (String(gridStartValue).length === 4) {
+            const deskValue = parseInt(String(gridStartValue).slice(0, 2), 10);
+            const tabletValue = parseInt(String(gridStartValue).slice(2, 3), 10);
+            const mobileValue = parseInt(String(gridStartValue).slice(3, 4), 10);
+            gridState.gridLgStart = deskValue;
+            gridState.gridMdStart = tabletValue;
+            gridState.gridSmStart = mobileValue;
+        }
+        if (String(gridStartValue).length === 3) {
+            const deskValue = parseInt(String(gridStartValue).slice(0, 1), 10);
+            const tabletValue = parseInt(String(gridStartValue).slice(1, 2), 10);
+            const mobileValue = parseInt(String(gridStartValue).slice(2, 3), 10);
+            gridState.gridLgStart = deskValue;
+            gridState.gridMdStart = tabletValue;
+            gridState.gridSmStart = mobileValue;
+        }
+        if (String(gridStartValue).length === 2) {
+            const deskValue = parseInt(String(gridStartValue).slice(0, 1), 10);
+            const tabletValue = parseInt(String(gridStartValue).slice(1, 2), 10);
+            gridState.gridLgStart = deskValue;
+            gridState.gridMdStart = tabletValue;
+        }
+        if (String(gridStartValue).length === 1) {
+            const deskValue = parseInt(String(gridStartValue).slice(0, 1), 10);
+            gridState.gridLgStart = deskValue;
+        }
+    }
+};
+exports.updateGridStartPropToState = updateGridStartPropToState;

package/dist/gridLayout/utils/updateGridStateFromClassNames.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { IGridItemFullState } from "../hooks/useGridClasses";
+import { IZenGridItem } from "../../commonHelpers/zenComponent";
+export declare const updateGridStateFromClassNames: (gridState: IGridItemFullState, item: ReactElement<IZenGridItem>) => void;

package/dist/gridLayout/utils/updateGridStateFromClassNames.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGridStateFromClassNames = void 0;
+const constants_1 = require("./constants");
+// eslint-disable-next-line complexity
+const updateGridStateFromClassNames = (gridState, item) => {
+    const { className } = item.props;
+    if (!className) {
+        return;
+    }
+    const gridColClassesLast = className.split(" ").filter((el) => el.match(constants_1.GRID_COL_PATTERN)).reverse()[0] || "";
+    const desktopClassesLast = className.split(" ").filter((el) => el.match(constants_1.DESKTOP_PATTERN)).reverse()[0] || "";
+    const tabletClassesLast = className.split(" ").filter((el) => el.match(constants_1.TABLET_PATTERN)).reverse()[0] || "";
+    const mobileClassesLast = className.split(" ").filter((el) => el.match(constants_1.MOBILE_PATTERN)).reverse()[0] || "";
+    const gridColClassesStartLast = className.split(" ").filter((el) => el.match(constants_1.GRID_COL_START_PATTERN)).reverse()[0] || "";
+    const desktopStartClassesLast = className.split(" ").filter((el) => el.match(constants_1.DESKTOP_START_PATTERN)).reverse()[0] || "";
+    const tabletStartClassesLast = className.split(" ").filter((el) => el.match(constants_1.TABLET_START_PATTERN)).reverse()[0] || "";
+    const mobileStartClassesLast = className.split(" ").filter((el) => el.match(constants_1.MOBILE_START_PATTERN)).reverse()[0] || "";
+    const gridColValue = Number(gridColClassesLast.split(constants_1.GRID_COL_PREFIX)[1]);
+    const lg = Number(desktopClassesLast.split(constants_1.DESKTOP_PREFIX)[1]);
+    const md = Number(tabletClassesLast.split(constants_1.TABLET_PREFIX)[1]);
+    const sm = Number(mobileClassesLast.split(constants_1.MOBILE_PREFIX)[1]);
+    const gridColStartValue = Number(gridColClassesStartLast.split(constants_1.GRID_COL_START_PREFIX)[1]);
+    const lgStart = Number(desktopStartClassesLast.split(constants_1.DESKTOP_START_PREFIX)[1]);
+    const mdStart = Number(tabletStartClassesLast.split(constants_1.TABLET_START_PREFIX)[1]);
+    const smStart = Number(mobileStartClassesLast.split(constants_1.MOBILE_START_PREFIX)[1]);
+    if (gridColValue && gridColValue > 0) {
+        gridState.gridLg = gridColValue > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : gridColValue;
+        gridState.gridMd = gridColValue > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : gridColValue;
+        gridState.gridSm = gridColValue > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : gridColValue;
+    }
+    if (lg && lg > 0) {
+        gridState.lg = lg > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : lg;
+    }
+    if (md && md > 0) {
+        gridState.md = md > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : md;
+    }
+    if (sm && sm > 0) {
+        gridState.sm = sm > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : sm;
+    }
+    if (gridColStartValue && gridColStartValue > 0) {
+        gridState.gridLgStart = gridColStartValue > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : gridColStartValue;
+        gridState.gridMdStart = gridColStartValue > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : gridColStartValue;
+        gridState.gridSmStart = gridColStartValue > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : gridColStartValue;
+    }
+    if (lgStart && lgStart > 0) {
+        gridState.lgStart = lgStart > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : lgStart;
+    }
+    if (mdStart && mdStart > 0) {
+        gridState.mdStart = mdStart > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : mdStart;
+    }
+    if (smStart && smStart > 0) {
+        gridState.smStart = smStart > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : smStart;
+    }
+};
+exports.updateGridStateFromClassNames = updateGridStateFromClassNames;

package/dist/gridLayout/utils/updateGridStateFromProps.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+import { IZenGridItem } from "../../commonHelpers/zenComponent";
+import { IGridItemFullState } from "../hooks/useGridClasses";
+export declare const updateGridStateFromProps: (gridState: IGridItemFullState, item: ReactElement<IZenGridItem>) => void;

package/dist/gridLayout/utils/updateGridStateFromProps.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGridStateFromProps = void 0;
+const constants_1 = require("./constants");
+const updateGridPropToState_1 = require("./updateGridPropToState");
+const updateGridStartPropToState_1 = require("./updateGridStartPropToState");
+const setGridProp_1 = require("./setGridProp");
+const updateGridStateFromProps = (gridState, item) => {
+    const { gridLg, gridMd, gridSm, gridLgStart, gridMdStart, gridSmStart } = item.props;
+    (0, updateGridPropToState_1.updateGridPropToState)(gridState, item);
+    (0, updateGridStartPropToState_1.updateGridStartPropToState)(gridState, item);
+    (0, setGridProp_1.setGridProp)(gridState, gridLg, "lg", constants_1.DESKTOP_COLS_NUMBER);
+    (0, setGridProp_1.setGridProp)(gridState, gridMd, "md", constants_1.TABLET_COLS_NUMBER);
+    (0, setGridProp_1.setGridProp)(gridState, gridSm, "sm", constants_1.MOBILE_COLS_NUMBER);
+    (0, setGridProp_1.setGridProp)(gridState, gridLgStart, "lgStart", constants_1.DESKTOP_COLS_NUMBER);
+    (0, setGridProp_1.setGridProp)(gridState, gridMdStart, "mdStart", constants_1.TABLET_COLS_NUMBER);
+    (0, setGridProp_1.setGridProp)(gridState, gridSmStart, "smStart", constants_1.MOBILE_COLS_NUMBER);
+};
+exports.updateGridStateFromProps = updateGridStateFromProps;

package/dist/gridLayout/utils/updateGridStateWithDefaultValues.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { IGridItemResultState } from "../hooks/useGridClasses";
+export declare const updateGridStateWithDefaultValues: (item: ReactElement, gridState: IGridItemResultState) => void;

package/dist/gridLayout/utils/updateGridStateWithDefaultValues.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGridStateWithDefaultValues = void 0;
+const card_1 = require("../../card/card");
+const convertCardSizeToState_1 = require("./convertCardSizeToState");
+const summaryTile_1 = require("../../summaryTile/summaryTile");
+const table_1 = require("../../table/table");
+const banner_1 = require("../../banner/banner");
+const convertBannerSizeToState_1 = require("./convertBannerSizeToState");
+const accordion_1 = require("../../accordion/accordion");
+const cardContainer_1 = require("../../cardContainer/cardContainer");
+const updateGridStateWithDefaultValues = (item, gridState) => {
+    const { lg, md, sm } = gridState;
+    if (lg || md || sm) {
+        return;
+    }
+    if (item.type === card_1.Card) {
+        const { lg: cardLg } = (0, convertCardSizeToState_1.convertCardSizeToState)(item);
+        gridState.lg = cardLg;
+    }
+    if (item.type === cardContainer_1.CardContainer) {
+        const { lg: cardLg } = (0, convertCardSizeToState_1.convertCardSizeToState)(item);
+        gridState.lg = cardLg;
+    }
+    if (item.type === summaryTile_1.SummaryTile) {
+        gridState.lg = 2;
+    }
+    if (item.type === table_1.Table) {
+        gridState.lg = 12;
+    }
+    if (item.type === banner_1.Banner) {
+        const { lg: bannerLg } = (0, convertBannerSizeToState_1.convertBannerSizeToState)(item);
+        gridState.lg = bannerLg;
+    }
+    if (item.type === accordion_1.Accordion) {
+        gridState.lg = 7;
+    }
+};
+exports.updateGridStateWithDefaultValues = updateGridStateWithDefaultValues;

package/dist/groupButton/groupButton.js

@@ -34,10 +34,10 @@ const GroupButtonOption = ({ nameGroup, labelName, value, disabled, checked, onC
     const labelKey = (0, react_1.useId)();
     return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup }, inputKey), (0, jsx_runtime_1.jsx)("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] });
 };
-const GroupButton = ({ fullWidth, disabled, onChange, groupData }) => {
+const GroupButton = ({ fullWidth, disabled, onChange, groupData, className }) => {
     const nameGroup = (0, react_1.useId)();
     const onChangeHandler = (0, react_1.useCallback)((e) => { onChange && onChange(e); }, [onChange]);
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-group-button");
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-group-button", driveClasses || "", fullWidth ? "zen-group-button--full-width" : ""]), children: groupData.map((el, index) => (0, jsx_runtime_1.jsx)(GroupButtonOption, { nameGroup: nameGroup, labelName: el.name, value: el.value, disabled: !!disabled, checked: el.selected, onChange: onChangeHandler }, `${nameGroup}_${index}_btngroup`)) });
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-group-button", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => (0, jsx_runtime_1.jsx)(GroupButtonOption, { nameGroup: nameGroup, labelName: el.name, value: el.value, disabled: !!disabled, checked: el.selected, onChange: onChangeHandler }, `${nameGroup}_${index}_btngroup`)) });
 };
 exports.GroupButton = GroupButton;

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

@@ -5,7 +5,7 @@ import { IMenuItem } from "../../../menu/components/menuItem";
 export interface ICustomContent {
     [key: string]: React.ReactElement | undefined;
 }
-export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "icon"> {
+export interface IHeaderCustomMenuComponent extends Pick<IMenuItem, "id" | "name" | "disabled" | "link" | "target" | "rel" | "icon"> {
 }
 export interface IHeaderCustomContent {
     content: ICustomContent | null;

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

@@ -29,6 +29,7 @@ const PageToolbarCollapsedItemsControl = ({ children }) => {
     const { content } = (0, react_1.useContext)(exports.HeaderCustomContent);
     const adjustmentButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-header-more-button", title: translate("More"), type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.End, iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: isMobile ? iconDotVertical_1.IconDotVertical : iconChevronDownSmall_1.IconChevronDownSmall, children: isMobile ? null : translate("More") }), [isDrive, isMobile, translate]);
     const items = [];
+    const clickHandler = (0, react_1.useCallback)((propsOnClick) => ((_, e) => { propsOnClick(e); }), []);
     react_1.Children.forEach(children, (child) => {
         if ((0, headerHelpers_1.isNamedChildComponent)(child, headerButton_1.HeaderButtonDisplayName)) {
             const el = (0, react_1.createElement)(menu_1.Menu.Item, {
@@ -36,8 +37,10 @@ const PageToolbarCollapsedItemsControl = ({ children }) => {
                 key: child.props.id,
                 name: typeof child.props.children === "string" ? child.props.children : "",
                 disabled: child.props.disabled,
-                onClick: child.props.onClick,
+                onClick: child.props.onClick ? clickHandler(child.props.onClick) : undefined,
                 link: child.props.link,
+                target: child.props.target,
+                rel: child.props.rel,
                 icon: child.props.icon
             });
             items.push(el);
@@ -49,6 +52,8 @@ const PageToolbarCollapsedItemsControl = ({ children }) => {
                 name: child.props.name,
                 disabled: child.props.disabled,
                 link: child.props.link,
+                target: child.props.target,
+                rel: child.props.rel,
                 icon: child.props.icon
             }, child.props.children);
             items.push(el);
@@ -57,7 +62,7 @@ const PageToolbarCollapsedItemsControl = ({ children }) => {
             (0, handleCustomMenuWrapper_1.handleCustomMenuWrapper)(child, content, items);
         }
     });
-    return (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("More"), trigger: adjustmentButton, alignment: "bottom-right", children: items });
+    return items.length ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("More"), trigger: adjustmentButton, alignment: "bottom-right", children: items }) : null;
 };
 exports.PageToolbarCollapsedItemsControl = PageToolbarCollapsedItemsControl;
 exports.TRANSLATIONS = [

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

@@ -5,6 +5,8 @@ const headerHelpers_1 = require("../../../headerHelpers");
 const controlledMenu_1 = require("../../../../menu/controlledMenu");
 const menu_1 = require("../../../../menu/menu");
 const react_1 = require("react");
+const headerButton_1 = require("../../../headerButton");
+// eslint-disable-next-line complexity
 const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
     if ((0, headerHelpers_1.isNamedChildComponent)(reactNode, headerHelpers_1.HeaderCustomMenuWrapper)) {
         const customContent = content === null || content === void 0 ? void 0 : content[reactNode.props.id];
@@ -12,14 +14,20 @@ const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
             return;
         }
         let menu;
-        if (customContent.type === menu_1.Menu || customContent.type === controlledMenu_1.ControlledMenu) {
+        let isOnlyButton = false;
+        if (customContent.type === menu_1.Menu || customContent.type === controlledMenu_1.ControlledMenu || customContent.type === headerButton_1.HeaderButton) {
             menu = customContent;
+            isOnlyButton = customContent.type === headerButton_1.HeaderButton;
         }
         else {
             react_1.Children.forEach(customContent.props.children, ch => {
                 if (ch.type === menu_1.Menu || ch.type === controlledMenu_1.ControlledMenu) {
                     menu = ch;
                 }
+                if (ch.type === headerButton_1.HeaderButton) {
+                    isOnlyButton = true;
+                    menu = ch;
+                }
             });
         }
         if (!menu) {
@@ -32,8 +40,10 @@ const handleCustomMenuWrapper = (reactNode, content, menuItems) => {
             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,
+            rel: reactNode.props.rel || menu.props.rel,
             icon: reactNode.props.icon || menu.props.icon
-        }, menu.props.children);
+        }, isOnlyButton ? [] : menu.props.children);
         menuItems.push(el);
     }
 };

package/dist/header/header.js

@@ -45,6 +45,7 @@ const useResizeObserver_1 = require("../commonHelpers/hooks/useResizeObserver");
 const headerContext_1 = require("./headerContext");
 const filtersBarProvider_1 = require("../filtersBar/filtersBarProvider");
 const filtersBarProviderSearch_1 = require("../filtersBar/filtersBarProviderSearch");
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 var HeaderType;
 (function (HeaderType) {
     HeaderType["Desktop"] = "desktop";
@@ -71,6 +72,7 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
     const scrollableParentEl = (0, react_1.useMemo)(() => headerRef.current ? (0, headerHelpers_1.findFirstScrollableParent)(headerRef.current) : undefined, [headerRef]);
     const [searchExpandedState, setSearchExpandedState] = (0, react_1.useState)(false);
     const isMobile = (0, useMobile_1.useMobile)();
+    const driveClassnameTab = (0, useDriveClassName_1.useDriveClassName)("zen-main-header__tabs");
     const getPreviousScrollPosition = (0, react_1.useCallback)(() => previousScrollPosition.current, []);
     const scrollCallback = (0, react_1.useCallback)((e) => {
         if (!e.target) {
@@ -201,7 +203,7 @@ const Header = ({ children, className, onFiltersBarOpen }) => {
         className !== null && className !== void 0 ? className : ""
     ]);
     const mobileExpandedSearchWrapper = (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__mobile-search", ref: toolbarRef, children: mobileSearch });
-    return (0, jsx_runtime_1.jsx)(headerContext_1.HeaderMenuProvider, { alignment: "left-top", children: (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: (0, jsx_runtime_1.jsx)(filtersBarProvider_1.FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderSearch_1.SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: (0, jsx_runtime_1.jsxs)("div", { className: fullClassName, ref: headerRef, children: [searchExpandedState && !resizableElements.length ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef }), !isMobile || !resizableElements.length || !mobileNewLineContainer ? null : searchExpandedState ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true }), tabs ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-main-header__tabs zen-main-header--border", children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) });
+    return (0, jsx_runtime_1.jsx)(headerContext_1.HeaderMenuProvider, { alignment: "left-top", children: (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: (0, jsx_runtime_1.jsx)(filtersBarProvider_1.FiltersBarContextProvider, { value: { setFiltersBarToggleAllFiltersFn, onUpdateNumberOfChangedFiltersFn: setNumberOfChangedFilters }, children: (0, jsx_runtime_1.jsx)(filtersBarProviderSearch_1.SearchContextProvider, { value: { setSearchComponent: handleSearchChange }, children: (0, jsx_runtime_1.jsxs)("div", { className: fullClassName, ref: headerRef, children: [searchExpandedState && !resizableElements.length ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--padding", leftElements: leftElements, middleElements: middleElements, rightElements: rightElements.length ? rightElements : undefined, isMobile: isMobile, leftElementsRef: leftElementsRef, rightElementsRef: rightElementsRef }), !isMobile || !resizableElements.length || !mobileNewLineContainer ? null : searchExpandedState ? mobileExpandedSearchWrapper : (0, jsx_runtime_1.jsx)(basicToolbar_1.BasicToolbar, { className: "zen-main-header__section zen-main-header__section--secondary-padding", leftElements: undefined, middleElements: mobileNewLineContainer, rightElements: undefined, isMobile: true }), tabs ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-main-header__tabs", "zen-main-header--border", isMobile ? "zen-main-header__tabs--mobile" : "", driveClassnameTab || ""]), children: [" ", tabs, " "] }) : null, memoizedFiltersBar ? (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__filtersBar", children: memoizedFiltersBar }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", ref: hiddenContainerRef, children: hiddenItemForRender }), (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section zen-main-header__section--hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-main-header__section--inline", ref: moreButtonRef, children: moreButton }) })] }) }) }) }) });
 };
 exports.Header = Header;
 exports.HeaderDisplayName = "Header";

package/dist/header/headerButton.d.ts

@@ -3,14 +3,13 @@ import { IButton } from "../button/button";
 import { TButtonIconPosition } from "../textIconButton/textIconButton";
 import { TSvgIconSize } from "../svgIcon/svgIconSize";
 import { IIcon } from "../icons/icon";
-export interface IHeaderButton extends Omit<IButton, "onClick"> {
+export interface IHeaderButton extends IButton {
     id: string;
     important?: boolean;
     icon?: React.FC<IIcon>;
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
-    onClick?: (id: string) => void;
 }
 export declare const HeaderButtonDisplayName = "HeaderButton";
 export declare const HeaderButton: React.FC<IHeaderButton>;

package/dist/header/headerButton.js

@@ -22,8 +22,8 @@ const HeaderButton = (_a) => {
     const fullClassName = (0, classNames_1.classNames)(["zen-header-button", className]);
     const props = Object.assign(Object.assign({}, restProps), { "data-important": important ? "1" : "0" });
     return icon
-        ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? () => onClick(id) : undefined }, props, { children: children }))
-        : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? () => onClick(id) : undefined }, props, { children: children }));
+        ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ id: id, icon: icon, iconPosition: iconPosition, className: fullClassName, onClick: onClick ? (e) => onClick(e) : undefined }, props, { children: children }))
+        : (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ id: id, className: fullClassName, onClick: onClick ? (e) => onClick(e) : undefined }, props, { children: children }));
 };
 exports.HeaderButton = HeaderButton;
 exports.HeaderButton.displayName = exports.HeaderButtonDisplayName;

package/dist/header/headerHelpers.js

@@ -109,7 +109,7 @@ const filterItems = (items, isMobile) => {
                 targetElements.push(clone);
             }
             else {
-                const element = (0, exports.isNamedChildComponent)(item, headerMenu_1.HeaderMenuDisplayName) && item.props.id ? (0, react_1.cloneElement)(item, {
+                const element = item.key || item.props.id ? (0, react_1.cloneElement)(item, {
                     key: item.key || `key-${item.props.id}`
                 }) : item;
                 targetElements.push(element);

package/dist/header/hooks/useCustomMenu.js

@@ -7,9 +7,6 @@ const useCustomMenu = (id, menuContent) => {
     const { setContent } = (0, react_1.useContext)(collapsedItemsControl_1.HeaderCustomContent);
     const menuContentMemo = (0, react_1.useMemo)(() => menuContent, [menuContent]);
     (0, react_1.useEffect)(() => {
-        if (!menuContentMemo) {
-            return;
-        }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         setContent(c => {

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

@@ -1,12 +1,20 @@
 /// <reference types="react" />
-interface INonFittingElementProps<T> {
+interface INonFittingElementProps<T extends {
+    props?: {
+        id?: string;
+    };
+}> {
     maxWidth: number;
     hiddenElementsCountToRender: number;
     data: T[];
     widthDelta?: number;
     reverseOrderOfVisible?: boolean;
 }
-export declare const useNonFittingElements: <T>({ maxWidth, data, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible }: INonFittingElementProps<T>) => {
+export declare const useNonFittingElements: <T extends {
+    props?: {
+        id?: string | undefined;
+    } | undefined;
+}>({ maxWidth, data, hiddenElementsCountToRender, widthDelta, reverseOrderOfVisible }: INonFittingElementProps<T>) => {
     visibleElements: T[];
     nonFittingElements: T[];
     hiddenContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;

package/dist/header/hooks/useNonFittingElements.js

@@ -46,9 +46,27 @@ const useNonFittingElements = ({ maxWidth, data, hiddenElementsCountToRender, wi
         else if (visibleChildrenCount > hiddenElementsCountToRender) {
             visibleChildrenCount = hiddenElementsCountToRender;
         }
-        const newVisibleElements = data.slice(0, visibleChildrenCount);
+        let dataForRender = data;
+        if (data.length !== hiddenContainerRef.current.children.length && data.every((item) => { var _a; return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.id) !== undefined; })) {
+            let canBeFiltered = hiddenContainerRef.current.children.length > 0;
+            const filteredData = [];
+            Array.from(hiddenContainerRef.current.children).forEach((child) => {
+                const childrenId = child.getAttribute("id");
+                if (childrenId) {
+                    const elem = dataForRender.find((item) => { var _a; return ((_a = item.props) === null || _a === void 0 ? void 0 : _a.id) === childrenId; });
+                    if (elem) {
+                        filteredData.push(elem);
+                    }
+                }
+                else {
+                    canBeFiltered = false;
+                }
+            });
+            dataForRender = canBeFiltered ? filteredData : data;
+        }
+        const newVisibleElements = dataForRender.slice(0, visibleChildrenCount);
         setVisibleElements(reverseOrderOfVisible ? newVisibleElements.reverse() : newVisibleElements);
-        setNonFittingElements(data.slice(visibleChildrenCount));
+        setNonFittingElements(dataForRender.slice(visibleChildrenCount));
     }, [maxWidth, calculateVisibleChildrenCount, data, widthDelta, hiddenElementsCountToRender, reverseOrderOfVisible]);
     return {
         visibleElements,

package/dist/icons/iconHistory.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconHistory: React.FC<IIcon>;