@geotab/zenith 1.17.0 → 1.18.0-beta.1

package/dist/chart/plugins/tooltip/tooltipPlugin.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipPlugin = void 0;
+const getBarTooltipItems_1 = require("../../barChart/getBarTooltipItems");
+const getPieTooltipItems_1 = require("../../pieChart/getPieTooltipItems");
+const renderTooltip_1 = require("./renderTooltip");
+const getScrollableParent_1 = require("../../../utils/getScrollableParent");
+const getCenterOfSector = (element) => {
+    const midAngle = (element.startAngle + element.endAngle) / 2;
+    const centerRadius = (element.innerRadius + element.outerRadius) / 2;
+    const centerX = element.x + Math.cos(midAngle) * centerRadius;
+    const centerY = element.y + Math.sin(midAngle) * centerRadius;
+    return { x: centerX, y: centerY };
+};
+const TooltipPlugin = (containerId, options, alignment = "top", isHidden, isDark) => ({
+    id: "zenithTooltip",
+    afterInit: (chart) => {
+        if (options === false) {
+            return;
+        }
+        chart.zenithTooltip = {
+            x: null,
+            y: null,
+            enabled: false,
+            index: undefined,
+            datasetIndex: undefined,
+            mouseMove: event => {
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (!chart.canvas) {
+                    chart.zenithTooltip.enabled = false;
+                    chart.update();
+                    return;
+                }
+                let elements;
+                try {
+                    elements = chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, true);
+                }
+                catch (_) {
+                    elements = [];
+                }
+                const element = elements[0];
+                if (!element) {
+                    chart.zenithTooltip.enabled = false;
+                    chart.update();
+                    return;
+                }
+                chart.zenithTooltip.index = element.index;
+                chart.zenithTooltip.datasetIndex = element.datasetIndex;
+                if (element.element !== undefined && element.element.hasOwnProperty("startAngle") && element.element.hasOwnProperty("endAngle")) {
+                    const pos = getCenterOfSector(element.element);
+                    chart.zenithTooltip.x = pos.x;
+                    chart.zenithTooltip.y = pos.y;
+                    chart.zenithTooltip.enabled = true;
+                    chart.update();
+                    return;
+                }
+                if (element.element !== undefined && element.element.hasOwnProperty("x") && element.element.hasOwnProperty("y")) {
+                    chart.zenithTooltip.x = element.element.x;
+                    chart.zenithTooltip.y = element.element.y;
+                    chart.zenithTooltip.enabled = true;
+                    chart.update();
+                    return;
+                }
+                chart.zenithTooltip.enabled = false;
+                chart.update();
+            }, mouseOut: () => {
+                chart.zenithTooltip.enabled = false;
+                chart.update();
+            }
+        };
+        const canvas = chart.canvas;
+        canvas.addEventListener("mousemove", chart.zenithTooltip.mouseMove);
+        chart.canvas.addEventListener("mouseout", () => {
+            chart.zenithTooltip.enabled = false;
+        });
+    },
+    afterDraw: (chart) => {
+        if (options === false) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (chart && chart.zenithTooltip && chart.zenithTooltip.enabled) {
+            const x = chart.zenithTooltip.x;
+            const y = chart.zenithTooltip.y;
+            const index = chart.zenithTooltip.index;
+            const datasetIndex = chart.zenithTooltip.datasetIndex;
+            // eslint-disable-next-line
+            const chartType = chart.config.type;
+            let values = [];
+            let title = undefined;
+            const subtitle = undefined;
+            if (chartType === "bar") {
+                values = (0, getBarTooltipItems_1.getBarTooltipItems)(chart.data, datasetIndex, index, options, isHidden);
+                title = (0, getBarTooltipItems_1.getBarTooltipTitle)(chart.data, datasetIndex, index);
+            }
+            if (chartType === "pie") {
+                values = (0, getPieTooltipItems_1.getPieTooltipItems)(chart.data, datasetIndex, index, options);
+            }
+            const chartRect = chart.canvas.getBoundingClientRect();
+            document.body.getBoundingClientRect();
+            const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(chart.canvas);
+            const scrollTop = scrollableParent ? scrollableParent.scrollTop : 0;
+            const scrollLeft = scrollableParent ? scrollableParent.scrollLeft : 0;
+            const top = chartRect.top + y + scrollTop;
+            const left = chartRect.left + x + scrollLeft;
+            if (values.length > 0) {
+                (0, renderTooltip_1.renderTooltip)(containerId, left, top, alignment, values, (options === null || options === void 0 ? void 0 : options.title) || title, (options === null || options === void 0 ? void 0 : options.subtitle) || subtitle, isDark);
+            }
+            else {
+                (0, renderTooltip_1.hideTooltip)(containerId);
+            }
+        }
+        else {
+            (0, renderTooltip_1.hideTooltip)(containerId);
+        }
+    },
+    beforeDestroy: (chart) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (chart.canvas !== null) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            chart.zenithTooltip.mouseMove && chart.canvas.removeEventListener("mousemove", chart.zenithTooltip.mouseMove);
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            chart.zenithTooltip.mouseOut && chart.canvas.removeEventListener("mouseout", chart.zenithTooltip.mouseOut);
+        }
+        (0, renderTooltip_1.destroyTooltip)(containerId);
+    }
+});
+exports.TooltipPlugin = TooltipPlugin;

package/dist/chart/utils/convertDates.d.ts

@@ -0,0 +1,3 @@
+import { IBarChartData } from "../barChart/interfaces";
+import { ILineChartData } from "../lineChart/interfaces";
+export declare const convertDates: (data: ILineChartData | IBarChartData, toLocalDateTime: (date: Date | string) => Date) => ILineChartData | IBarChartData;

package/dist/chart/utils/convertDates.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertDates = void 0;
+const isDateString_1 = require("./isDateString");
+const convertDates = (data, toLocalDateTime) => {
+    for (let i = 0; i < data.datasets.length; i++) {
+        const ds = data.datasets[i].data;
+        for (let j = 0; j < ds.length; j++) {
+            const point = ds[j];
+            if (typeof point === "object" && typeof point.x === "string" && (0, isDateString_1.isDateString)(point.x)) {
+                ds[j] = Object.assign(Object.assign({}, point), { x: toLocalDateTime(point.x) });
+                continue;
+            }
+        }
+    }
+    return data;
+};
+exports.convertDates = convertDates;

package/dist/chart/utils/getMinMax.d.ts

@@ -0,0 +1,5 @@
+import { ILineChartNativeDataset } from "../lineChart/interfaces";
+export declare const getMinMax: (data: ILineChartNativeDataset) => {
+    min: number;
+    max: number;
+};

package/dist/chart/utils/getMinMax.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMinMax = void 0;
+const getMinMax = (data) => {
+    if (data.data.length === 0) {
+        return { min: 0, max: 1 };
+    }
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = 0; i < data.data.length; i++) {
+        const point = data.data[i];
+        const value = point.y;
+        if (value === null) {
+            continue;
+        }
+        if (value < min) {
+            min = value;
+        }
+        if (value > max) {
+            max = value;
+        }
+    }
+    if (min === Infinity && max === -Infinity) {
+        return { min: 0, max: 1 };
+    }
+    return { min, max };
+};
+exports.getMinMax = getMinMax;

package/dist/chart/utils/getRange.d.ts

@@ -0,0 +1,5 @@
+import { ILineChartNativeDataset } from "../lineChart/interfaces";
+export declare const getRange: (data: ILineChartNativeDataset) => {
+    min: number;
+    max: number;
+};

package/dist/chart/utils/getRange.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRange = void 0;
+const getMinMax_1 = require("./getMinMax");
+const getRange = (data) => {
+    const { min, max } = (0, getMinMax_1.getMinMax)(data);
+    let range = max - min;
+    if (range === 0) {
+        range = min * 0.1;
+    }
+    const suggestedMin = min - range * 0.1;
+    const suggestedMax = max + range * 0.1;
+    return {
+        min: suggestedMin,
+        max: suggestedMax
+    };
+};
+exports.getRange = getRange;

package/dist/chart/utils/getXAxisMeta.d.ts

@@ -0,0 +1,4 @@
+import { IBarChartData } from "../barChart/interfaces";
+import { IXAxisMeta } from "../interfaces";
+import { ILineChartData } from "../lineChart/interfaces";
+export declare const getXAxisMeta: (data: ILineChartData | IBarChartData, isTimedData: boolean) => IXAxisMeta;

package/dist/chart/utils/getXAxisMeta.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getXAxisMeta = void 0;
+const getMinDate = () => new Date(0);
+const getMaxDate = () => new Date(8640000000000000);
+const getXAxisMeta = (data, isTimedData) => {
+    let minDate = getMaxDate();
+    let maxDate = getMinDate();
+    if (!isTimedData) {
+        return { minDate: minDate.toISOString(), maxDate: maxDate.toISOString() };
+    }
+    for (let i = 0; i < data.datasets.length; i++) {
+        const dataset = data.datasets[i];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (dataset.data && dataset.data.length > 0) {
+            for (let j = 0; j < dataset.data.length; j++) {
+                const point = dataset.data[j];
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (point && typeof point === "object" && point.x) {
+                    const date = point.x;
+                    if (date.getTime() < new Date(minDate).getTime()) {
+                        minDate = new Date(date.valueOf());
+                    }
+                    if (date.getTime() > new Date(maxDate).getTime()) {
+                        maxDate = new Date(date.valueOf());
+                    }
+                }
+            }
+        }
+    }
+    return { minDate: minDate.toISOString(), maxDate: maxDate.toISOString() };
+};
+exports.getXAxisMeta = getXAxisMeta;

package/dist/chart/utils/getYAxisMeta.d.ts

@@ -0,0 +1,7 @@
+import { ILineChartData } from "../lineChart/interfaces";
+import { IBarChartData } from "../barChart/interfaces";
+export declare const getYAxisMeta: (data: ILineChartData | IBarChartData) => {
+    min: number;
+    max: number;
+    name: string;
+}[];

package/dist/chart/utils/getYAxisMeta.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getYAxisMeta = void 0;
+const getRange_1 = require("./getRange");
+const mergeRanges_1 = require("./mergeRanges");
+const normalizeRange_1 = require("./normalizeRange");
+const getYAxisMeta = (data) => {
+    if (data.datasets.length === 0) {
+        return [Object.assign({ name: "y" }, (0, getRange_1.getRange)({ data: [] }))];
+    }
+    const axisMap = data.datasets.reduce((acc, ds) => {
+        const name = ds.yAxisID ? ds.yAxisID : "y";
+        const range = (0, getRange_1.getRange)({ data: ds.data });
+        const prevAxis = acc[name];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const totalRange = prevAxis ? (0, mergeRanges_1.mergeRanges)(prevAxis, range) : range;
+        acc[name] = Object.assign({ name: name }, totalRange);
+        return acc;
+    }, {});
+    return Object.values(axisMap).map(el => (Object.assign(Object.assign({}, el), (0, normalizeRange_1.normalizeRange)(el))));
+};
+exports.getYAxisMeta = getYAxisMeta;

package/dist/chart/utils/isDateRange.d.ts

@@ -0,0 +1,3 @@
+import { IBarChartData } from "../barChart/interfaces";
+import { ILineChartData } from "../lineChart/interfaces";
+export declare const isDateRange: (data: ILineChartData | IBarChartData, defaultValue: boolean) => boolean;

package/dist/chart/utils/isDateRange.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDateRange = void 0;
+const isDateString_1 = require("./isDateString");
+const isDateRange = (data, defaultValue) => {
+    if (data.datasets.length === 0) {
+        return defaultValue;
+    }
+    const dataset = data.datasets[0];
+    if (dataset.data.length === 0) {
+        return defaultValue;
+    }
+    const point = dataset.data[0];
+    if (point.x) {
+        return typeof point.x === "string" && (0, isDateString_1.isDateString)(point.x);
+    }
+    return defaultValue;
+};
+exports.isDateRange = isDateRange;

package/dist/chart/utils/isDateString.d.ts

@@ -0,0 +1 @@
+export declare const isDateString: (value: string) => boolean;

package/dist/chart/utils/isDateString.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDateString = void 0;
+const datePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+const isDateString = (value) => datePattern.test(value);
+exports.isDateString = isDateString;

package/dist/chart/utils/mergeRanges.d.ts

@@ -0,0 +1,5 @@
+export interface IRange {
+    min: number;
+    max: number;
+}
+export declare const mergeRanges: (range1: IRange, range2: IRange) => IRange;

package/dist/chart/utils/mergeRanges.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRanges = void 0;
+const mergeRanges = (range1, range2) => {
+    const min = Math.min(range1.min, range2.min);
+    const max = Math.max(range1.max, range2.max);
+    return { min, max };
+};
+exports.mergeRanges = mergeRanges;

package/dist/chart/utils/normalizeRange.d.ts

@@ -0,0 +1,2 @@
+import { IRange } from "./mergeRanges";
+export declare const normalizeRange: (range: IRange) => IRange;

package/dist/chart/utils/normalizeRange.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeRange = void 0;
+const normalizeRange = (range) => {
+    let min = range.min;
+    let max = range.max;
+    min = Math.floor(min);
+    max = Math.ceil(max);
+    if (min === max) {
+        max = min + 1;
+    }
+    if (min > 0 && max > 0) {
+        if (min / max < 0.3) {
+            min = 0;
+        }
+    }
+    return { min: min, max: max };
+};
+exports.normalizeRange = normalizeRange;

package/dist/chart/utils/useHidden.d.ts

@@ -0,0 +1,4 @@
+export declare const useHidden: () => {
+    isHidden: (index: number) => boolean;
+    toggleHidden: (index: number) => void;
+};

package/dist/chart/utils/useHidden.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHidden = void 0;
+const react_1 = require("react");
+const useHidden = () => {
+    const [hiddenDatasets, setHiddenDatasets] = (0, react_1.useState)(new Set());
+    const isHidden = (0, react_1.useCallback)((index) => hiddenDatasets.has(index), [hiddenDatasets]);
+    const toggleHidden = (0, react_1.useCallback)((index) => {
+        const hidden = new Set(hiddenDatasets);
+        if (hiddenDatasets.has(index)) {
+            hidden.delete(index);
+        }
+        else {
+            hidden.add(index);
+        }
+        setHiddenDatasets(hidden);
+    }, [hiddenDatasets, setHiddenDatasets]);
+    return { isHidden, toggleHidden };
+};
+exports.useHidden = useHidden;

package/dist/commonHelpers/tabsKeyboard.d.ts

@@ -1,2 +1,3 @@
 import { IEntityWithId } from "./entity";
 export declare const tabsKeyboardHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeId: string) => string | null;
+export declare const tabsKeyboardTabHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeElement: HTMLElement) => string | undefined;

package/dist/commonHelpers/tabsKeyboard.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tabsKeyboardHandler = void 0;
+exports.tabsKeyboardTabHandler = exports.tabsKeyboardHandler = void 0;
 const tabsKeyboardHandler = (e, tabsArr, activeId) => {
     const getCurrentIndex = () => tabsArr.findIndex(el => el.id === activeId);
     switch (e.key) {
@@ -30,3 +30,18 @@ const tabsKeyboardHandler = (e, tabsArr, activeId) => {
     }
 };
 exports.tabsKeyboardHandler = tabsKeyboardHandler;
+const tabsKeyboardTabHandler = (e, tabsArr, activeElement) => {
+    const currentActiveId = activeElement.getAttribute("id") || "";
+    const getCurrentIndex = () => tabsArr.findIndex(el => el.id === currentActiveId);
+    const currentIndex = getCurrentIndex();
+    if (e.key === "Tab" && !e.shiftKey) {
+        const nextIndex = currentIndex > -1 && currentIndex < tabsArr.length - 1 ? currentIndex + 1 : undefined;
+        return nextIndex !== undefined ? tabsArr[nextIndex].id : undefined;
+    }
+    if (e.key === "Tab" && e.shiftKey) {
+        const nextIndex = currentIndex > 0 ? currentIndex - 1 : undefined;
+        return nextIndex !== undefined ? tabsArr[nextIndex].id : undefined;
+    }
+    return undefined;
+};
+exports.tabsKeyboardTabHandler = tabsKeyboardTabHandler;

package/dist/commonHelpers/zenComponent.d.ts

@@ -5,3 +5,73 @@ export interface IZenComponentProps extends PropsWithChildren {
 export interface IZenIdComponentProps extends IZenComponentProps {
     id: string;
 }
+type TDesktopColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type TTabletColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+type TMobileColumns = 1 | 2 | 3 | 4;
+export interface IZenGridItem extends Partial<Pick<IZenIdComponentProps, "className" | "id">> {
+    /**
+        @param grid - Span value for all screens - applies maximum possible value for current screen
+
+        min value: 1 (desktop 1 column)
+        max value: 1284 (desktop 12 columns, tablet 8 columns, mobile 4 columns)
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    grid?: number;
+    /**
+        @param gridStart - The starting column for all screens - applies maximum possible value for current screen.
+
+        min value: 1 (desktop 1 column)
+        max value: 1284 (desktop 12 columns, tablet 8 columns, mobile 4 columns)
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridStart?: number;
+    /**
+        @param gridLgStart - The starting column for large screens (width > 1024px).
+
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridLgStart?: TDesktopColumns;
+    /**
+        @param gridLg - The number of columns for large screens (width > 1024px).
+
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridLg?: TDesktopColumns;
+    /**
+        @param gridMdStart - The starting column for medium screens (640px < width < 1024px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridMdStart?: TTabletColumns;
+    /**
+        @param gridMd - The number of columns for medium screens (640px < width < 1024px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridMd?: TTabletColumns;
+    /**
+        @param gridSmStart - The starting column for small screens (width < 640px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridSmStart?: TMobileColumns;
+    /**
+        @param gridSm - The number of columns for small screens (width < 640px).
+
+        Can be applied if used as a part of `Grid` component.
+        @see `gridLayout/gridLayout.tsx`
+    */
+    gridSm?: TMobileColumns;
+}
+export {};

package/dist/commonStyles/common.less

@@ -10,6 +10,7 @@
 @import "appIcons.less";
 @import "link/link.less";
 @import "selectButton.less";
+@import "zIndex.less";
 
 @border-width-default: 1px;
 @border-radius-default: 4px;

package/dist/commonStyles/zIndex.less

@@ -0,0 +1,67 @@
+@z-index-11100: 11100;
+// Tooltip
+
+@z-index-11020: 11020;
+// Alert (inside FeedbackContainer)
+// Toast (inside FeedbackContainer)
+
+@z-index-11010: 11010;
+// MobileSheet
+
+// TimePicker (Mobile, inner)
+
+@z-index-11007: 11007;
+// Menu, ControlledMenu (level 5)
+
+// TODO: can we replace it with @z-index-10006 (Shield)?
+// MobileSheet shield (Inner)
+
+@z-index-11006: 11006;
+// Popover, ControlledPopover (level 4)
+
+@z-index-11005: 11005;
+// Dropdown, ControlledDropdown (level 3)
+
+// TODO: do we need it in variables.mdx?
+// FooterButtons (sticky, DriveApp)
+
+@z-index-11004: 11004;
+// Select, ControlledSelect (level 2)
+
+@z-index-11003: 11003;
+// Modal, ControlledModal (level 1)
+
+@z-index-11002: 11002;
+// Dropdown
+// Range
+// DateRange
+// DateInput
+// Menu, ControlledMenu
+// TimePicker
+// Select
+
+// ParallelSelection (inner)
+
+@z-index-11001: 11001;
+// Modal
+// GroupsFilter
+
+// DialogContent (deprecated)
+
+@z-index-11000: 11000;
+// ControlledPopup
+// Popup
+// Absolute
+
+// TODO: can we replace it with @z-index-10006 (Shield)?
+// ModalShield (inner)
+// Dialog shield (deprecated)
+
+@z-index-10007: 10007;
+// SidePanel
+
+@z-index-10006: 10006;
+// Shield
+
+@z-index-10005: 10005;
+// Waiting

package/dist/dataGrid/columns/actionsColumn/actionsColumnCell.d.ts

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { IIcon } from "../../../icons/icon";
-export interface IActionColumnCell extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+export interface IActionColumnCell extends React.HTMLAttributes<HTMLElement> {
     tag: "button" | "a";
     hash: string;
     title: string;

package/dist/filterButton/filterButton.d.ts

@@ -9,8 +9,8 @@ export interface IFilterButton extends IZenComponentProps {
     disabled?: boolean;
     quantity?: number;
     onClick?: (e: MouseEvent) => void;
-    onMouseOver?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseOut?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
     isActive?: boolean;
     fullWidth?: boolean;
     type?: TFilterButton;

package/dist/filtersBar/filtersBar.js

@@ -142,7 +142,9 @@ const FiltersBar = ({ className, children, isAllFiltersVisible, hideAllFiltersBu
         const sidePanelChildren = getAllowedChildren(getChildren(sidePanelChild.props.children));
         return (0, jsx_runtime_1.jsx)(filtersBarSidePanel_1.FiltersBarSidePanel, { parentElement: parentElement, isOpen: isAllFiltersVisible, triggerRef: allFiltersRef, getDefaultFiltersState: getDefaultFiltersState, onClosePanel: onClosePanel, className: sidePanelChild.props.className, state: sidePanelChild.props.state, onApplyAllFilters: handleApplyAllFilters(true), dispatch: sidePanelChild.props.dispatch, onClearFilters: handleClearClick, children: sidePanelChildren });
     }, [childrenArray, parentElement, isAllFiltersVisible, getDefaultFiltersState, onClosePanel, handleApplyAllFilters, sidePanelState, handleClearClick, filterBarChildren]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar", className !== null && className !== void 0 ? className : ""]), children: [(0, jsx_runtime_1.jsx)(filtersContainer_1.FiltersContainer, { ignoreNewFunctionality: ignoreNewFunctionality, getDefaultFiltersState: getDefaultFiltersState, 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 && isAllFiltersVisible
+    const noActions = (0, react_1.useMemo)(() => isAllFiltersButtonHidden && (selectedQuantity === undefined && filtersBarState.currentNumberOfChangedFilters === 0 || selectedQuantity === 0)
+        && (!isApplyButtonShown || onApplyAllFilters === undefined), [isAllFiltersButtonHidden, selectedQuantity, filtersBarState.currentNumberOfChangedFilters, isApplyButtonShown, onApplyAllFilters]);
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile && (0, jsx_runtime_1.jsxs)("div", { 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, { ignoreNewFunctionality: ignoreNewFunctionality, getDefaultFiltersState: getDefaultFiltersState, 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 && isAllFiltersVisible
                 ? sidePanel
                 : null] });
 };

package/dist/gridLayout/gridLayout.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import "./gridLayout.less";
+export interface IGridLayout extends PropsWithChildren, IZenComponentProps {
+    /**
+     * @property if true, the grid items will stretch to fill the available space (height).
+     */
+    stretch?: boolean;
+}
+export declare const GridLayout: React.FC<IGridLayout>;

package/dist/gridLayout/gridLayout.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useGridClasses_1 = require("./hooks/useGridClasses");
+const useStretch_1 = require("./hooks/useStretch");
+const GridLayout = ({ children, className = "", stretch = false }) => {
+    const childrenArr = (0, react_1.useMemo)(() => [], []);
+    const [childrenArrState, setChildrenArrState] = (0, react_1.useState)(childrenArr);
+    const ref = (0, react_1.useRef)(null);
+    (0, useGridClasses_1.useGridClasses)(children, childrenArr);
+    (0, useStretch_1.useStretch)(stretch, childrenArr, ref, setChildrenArrState);
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classNames_1.classNames)(["zen-grid", className]), children: childrenArrState });
+};
+exports.GridLayout = GridLayout;