@geotab/zenith 1.17.0 → 1.18.0-beta.1

package/README.md

@@ -40,6 +40,19 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 1.18.0
+
+ * New component `GridLayout`
+ * Fix date formatting and parsing in DateRange
+ * Fix z-index of the `Select` absolute container
+ * Update CSS to use `flex-start` and `flex-end` instead of `start` and `end`
+ * Fix validating value in Stepper
+ * Fix using Card with buttons in forms
+ * Fix positioning in input adornment styles
+ * Prevent empty custom popups in Header
+ * Fix opening secondary action link in `PillExpandable` in new tab
+ * Add icon `IconHistory`
+ * Update styles of `Tabs` in `Header`
 
 ## 1.17.0
 

package/dist/accordion/accordion.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { IAccordionItem } from "./accordionItem/accordionItem";
 import "./accordion.less";
-interface IAccordion {
+import { IZenGridItem } from "../commonHelpers/zenComponent";
+interface IAccordion extends IZenGridItem {
     data?: Omit<IAccordionItem, "isActive" | "onClick">[];
     activeIds?: string[];
     className?: string;

package/dist/banner/bannerMultipLine.js

@@ -15,7 +15,7 @@ const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = "L", className }) => {
+const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, className }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");

package/dist/banner/bannerSingleLine.js

@@ -16,7 +16,7 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = "L", role, ariaAtomic, ariaLive, className }) => {
+const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = bannerUtils_1.DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className }) => {
     const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");

package/dist/banner/bannerUtils.d.ts

@@ -1,5 +1,6 @@
 import { TIconId } from "../static/icons/icons";
 export type TBannerSize = "XL" | "L" | "M" | "S" | "XS";
+export declare const DEFAULT_BANNER_SIZE: TBannerSize;
 export declare const options: {
     error: {
         blockClassName: string;

package/dist/banner/bannerUtils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBannerOptions = exports.options = void 0;
+exports.getBannerOptions = exports.options = exports.DEFAULT_BANNER_SIZE = void 0;
+exports.DEFAULT_BANNER_SIZE = "L";
 exports.options = {
     "error": {
         blockClassName: "zen-banner--error",

package/dist/betaPill/betaPill.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
+import { ILinkOptions } from "../pillExpandable/pillExpandable";
 import "./betaPill.less";
 export interface IBetaPillActions {
     text?: string;
     onClick?: () => void;
     link?: string;
-    linkOptions?: {
-        target?: "_blank" | "_parent" | "_self" | "_top";
-    };
+    linkOptions?: ILinkOptions;
 }
 export interface IBetaPill {
     className?: string;

package/dist/betaPill/betaPillContext.d.ts

@@ -1,11 +1,10 @@
 import React, { ReactNode } from "react";
+import { ILinkOptions } from "../pillExpandable/pillExpandable";
 interface IBetaPillActions {
     text?: string;
     onClick?: () => void;
     link?: string;
-    linkOptions?: {
-        target?: "_blank" | "_parent" | "_self" | "_top";
-    };
+    linkOptions?: ILinkOptions;
 }
 interface IBetaPillActions {
     feedbackAction?: IBetaPillActions;

package/dist/button/button.d.ts

@@ -8,15 +8,15 @@ export interface IButton extends IZenComponentProps {
     type?: TButton;
     disabled?: boolean;
     onClick?: React.MouseEventHandler;
-    onMouseOver?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onMouseOut?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
     onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
     link?: string;
     htmlType?: THTMLButtonType;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     rel?: string;
 }
 export declare const Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;

package/dist/button/button.js

@@ -59,7 +59,7 @@ exports.Button = React.forwardRef(function Button(_a, ref) {
         ])
     };
     if (link) {
-        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onClick: onClick }, commonArgs, other, { children: children }));
+        return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, other, { children: children }));
     }
     return (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled }, commonArgs, other, { children: children }));
 });

package/dist/card/card.d.ts

@@ -6,9 +6,10 @@ import { IContent } from "./components/content";
 import "./card.less";
 import { TAlignment } from "../absolute/absolute";
 import { TooltipSize } from "../tooltip/tooltip";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
 import { ICardButton } from "./components/cardButton/cardButton";
-interface ICard extends IZenComponentProps {
+export declare const DEFAULT_CARD_SIZE: TContainerSize;
+export interface ICard extends IZenComponentProps, IZenGridItem {
     size?: TContainerSize | IAbsoluteSize;
     status?: TCardStatus;
     title: string;
@@ -37,4 +38,3 @@ export declare const Card: FC<ICard> & {
     Button: FC<ICardButton>;
 };
 export declare const TRANSLATIONS: string[];
-export {};

package/dist/card/card.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.Card = void 0;
+exports.TRANSLATIONS = exports.Card = exports.DEFAULT_CARD_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable react/prop-types */
@@ -51,12 +51,13 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const getDefaultFullWidthValue_1 = require("./helpers/getDefaultFullWidthValue");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const iconDotVertical_1 = require("../icons/iconDotVertical");
+exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
 const Card = (props) => {
     const { size, children, title, status, titleIconClasses, date, tooltip, className = "", link, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
-    const [cardSize, setCardSize] = (0, react_1.useState)((0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || "S"));
+    const [cardSize, setCardSize] = (0, react_1.useState)((0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || exports.DEFAULT_CARD_SIZE));
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const containerRef = (0, react_1.useRef)(null);
     const headerRef = (0, react_1.useRef)(null);
@@ -95,7 +96,7 @@ const Card = (props) => {
     const maxNumberOfActions = (0, getMaxNumberOfActions_1.getMaxNumberOfActions)(cardSize);
     const headerActions = isMobile ? [] : actions.slice(0, maxNumberOfActions);
     const menuActions = isMobile ? actions : actions.slice(maxNumberOfActions);
-    const menuTrigger = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]), iconPosition: textIconButton_1.ButtonIconPosition.Start, type: "tertiary-black", iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: iconDotVertical_1.IconDotVertical, "aria-label": translate("Actions") });
+    const menuTrigger = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]), iconPosition: textIconButton_1.ButtonIconPosition.Start, type: "tertiary-black", iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: iconDotVertical_1.IconDotVertical, "aria-label": translate("Actions"), htmlType: "button" });
     (0, react_1.useEffect)(() => {
         if (containerRef.current) {
             containerRef.current.setAttribute("role", "region");

package/dist/card/components/cardButton/cardButton.js

@@ -32,7 +32,7 @@ const CardButton = ({ children, disabled = false, icon, name, onClick, link, cla
     };
     const renderLink = () => (0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, title: name, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name })] });
     const renderButton = () => {
-        const trigger = (0, jsx_runtime_1.jsxs)(button_1.Button, { ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), !!content.length && (isOpen ? (0, jsx_runtime_1.jsx)(iconChevronTopSmall_1.IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" }) : (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" }))] });
+        const trigger = (0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, className: (0, classNames_1.classNames)([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && (0, react_1.createElement)(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: name }), !!content.length && (isOpen ? (0, jsx_runtime_1.jsx)(iconChevronTopSmall_1.IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" }) : (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" }))] });
         return content.length ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { title: name, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, children: content })] }) : trigger;
     };
     return !link && !onClick ? renderButton() : onClick ? renderButton() : renderLink();

package/dist/card/components/status.d.ts

@@ -14,6 +14,10 @@ interface IStatus extends IZenComponentProps {
     tooltipAlignment?: TAlignment;
     tooltipSize?: TooltipSize;
     title?: string;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
     translate?: (s: string) => string;
 }
 export declare const Status: FC<IStatus>;

package/dist/card/components/status.js

@@ -16,7 +16,7 @@ const Status = ({ status, isMobile, tooltip, className = "", tooltipAlignment, t
         if (!tooltip || !status) {
             return "";
         }
-        const statusButton = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: (0, classNames_1.classNames)(["zen-card-status", isMobile ? "zen-card-status--mobile" : "", "zen-card-status-button", `zen-card-status--${status}`, className]), icon: (0, getIconFromStatus_1.getIconFromStatus)(status), iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, "aria-label": tooltip });
+        const statusButton = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: (0, classNames_1.classNames)(["zen-card-status", isMobile ? "zen-card-status--mobile" : "", "zen-card-status-button", `zen-card-status--${status}`, className]), icon: (0, getIconFromStatus_1.getIconFromStatus)(status), iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, "aria-label": tooltip, htmlType: "button" });
         return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { mobileView: "mobileSheet", mobileSheetTitle: title, size: tooltipSize, alignment: tooltipAlignment, trigger: statusButton, children: tooltip });
     };
     const renderIcon = () => {

package/dist/cardContainer/cardContainer.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
 import "./cardContainer.less";
 export type TContainerSize = "XXL" | "XL" | "L" | "M" | "S" | "XS" | "XXS";
 export interface IAbsoluteSize {
     width?: number;
     height?: number;
 }
-interface ICardContainer extends IZenComponentProps {
+export interface ICardContainer extends IZenComponentProps, IZenGridItem {
     size: TContainerSize | IAbsoluteSize;
     fullWidth?: boolean;
     fullHeight?: boolean;
@@ -15,4 +15,3 @@ interface ICardContainer extends IZenComponentProps {
     isMobile?: boolean;
 }
 export declare const CardContainer: React.ForwardRefExoticComponent<ICardContainer & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/chart/barChart/getBarLegendItems.d.ts

@@ -0,0 +1,3 @@
+import { ILegendItem } from "../plugins/legend/renderLegend";
+import { IBarChartData } from "./interfaces";
+export declare const getBarLegendItems: (data: IBarChartData) => ILegendItem[];

package/dist/chart/barChart/getBarLegendItems.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBarLegendItems = void 0;
+const getBarLegendItems = (data) => {
+    if (data.datasets.length === 0) {
+        return [];
+    }
+    const legendItems = data.datasets.map((dataset, index) => ({
+        color: typeof dataset.borderColor === "string" ? dataset.borderColor : "",
+        text: dataset.label || "",
+        value: undefined,
+        index: index,
+        hidden: false
+    }));
+    return legendItems;
+};
+exports.getBarLegendItems = getBarLegendItems;

package/dist/chart/barChart/getBarTooltipItems.d.ts

@@ -0,0 +1,5 @@
+import { ITooltipOptions } from "../plugins/tooltip/interfaces";
+import { ITooltipItem } from "../plugins/tooltip/renderTooltip";
+import { IBarChartData } from "./interfaces";
+export declare const getBarTooltipItems: (data: IBarChartData, datasetIndex: number | undefined, index: number | undefined, options: ITooltipOptions | undefined, isHidden: (index: number) => boolean) => ITooltipItem[];
+export declare const getBarTooltipTitle: (data: IBarChartData, datasetIndex: number | undefined, index: number | undefined) => string | undefined;

package/dist/chart/barChart/getBarTooltipItems.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBarTooltipTitle = exports.getBarTooltipItems = void 0;
+const formatValue_1 = require("../plugins/legend/formatValue");
+const getBarTooltipItems = (data, datasetIndex, index, options, isHidden) => {
+    if (data.datasets.length === 0) {
+        return [];
+    }
+    if (datasetIndex === undefined || index === undefined) {
+        return [];
+    }
+    return data.datasets.map((dataset, dsIndex) => {
+        if (dataset.data.length === 0) {
+            return undefined;
+        }
+        if (isHidden(dsIndex)) {
+            return undefined;
+        }
+        const dataItem = dataset.data[index];
+        const itemValue = typeof dataItem === "number" ? dataItem : dataItem.y;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const value = itemValue !== undefined ? (0, formatValue_1.formatValue)(itemValue.toFixed(2), dsIndex, options === null || options === void 0 ? void 0 : options.unit) : undefined;
+        const label = dataset.label || "";
+        const color = typeof dataset.borderColor === "string" ? dataset.borderColor : "";
+        return { label, value, color };
+    }).filter(item => item !== undefined);
+};
+exports.getBarTooltipItems = getBarTooltipItems;
+const getBarTooltipTitle = (data, datasetIndex, index) => {
+    if (data.datasets.length === 0) {
+        return undefined;
+    }
+    if (datasetIndex === undefined || index === undefined) {
+        return undefined;
+    }
+    const dataset = data.datasets[datasetIndex];
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (dataset && dataset.data[index]) {
+        const dataItem = dataset.data[index];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (typeof dataItem === "object" && dataItem !== null && "x" in dataItem) {
+            return dataItem.x;
+        }
+    }
+    return undefined;
+};
+exports.getBarTooltipTitle = getBarTooltipTitle;

package/dist/chart/barChart/getDefaultDatasetStyle.d.ts

@@ -0,0 +1,55 @@
+import { IBarChartDataset } from "./interfaces";
+export declare const getDefaultDatasetStyle: (dataSet: IBarChartDataset, dsIndex: number) => {
+    type?: "bar" | undefined;
+    xAxisID?: string | undefined;
+    yAxisID?: string | undefined;
+    barPercentage?: number | undefined;
+    categoryPercentage?: number | undefined;
+    barThickness?: number | "flex" | undefined;
+    maxBarThickness?: number | undefined;
+    minBarLength?: number | undefined;
+    pointStyle?: false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | undefined;
+    grouped?: boolean | undefined;
+    indexAxis?: "x" | "y" | undefined;
+    clip?: number | false | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").ChartArea> | undefined;
+    label?: string | undefined;
+    order?: number | undefined;
+    stack?: string | undefined;
+    hidden?: boolean | undefined;
+    parsing?: false | import("chart.js/dist/types/utils")._DeepPartialObject<{
+        [key: string]: string;
+    }> | undefined;
+    normalized?: boolean | undefined;
+    base?: number | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
+    borderSkipped?: boolean | "bottom" | "left" | "right" | "top" | "start" | "end" | "middle" | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => boolean | "bottom" | "left" | "right" | "top" | "start" | "end" | "middle" | undefined) | readonly (boolean | "bottom" | "left" | "right" | "top" | "start" | "end" | "middle" | undefined)[] | undefined;
+    borderRadius?: number | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => number | import("chart.js").BorderRadius | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").BorderRadius> | readonly (number | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").BorderRadius> | undefined)[] | undefined;
+    inflateAmount?: number | "auto" | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => number | "auto" | undefined) | readonly (number | "auto" | undefined)[] | undefined;
+    borderWidth?: number | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => number | {
+        top?: number | undefined;
+        right?: number | undefined;
+        bottom?: number | undefined;
+        left?: number | undefined;
+    } | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<{
+        top?: number | undefined;
+        right?: number | undefined;
+        bottom?: number | undefined;
+        left?: number | undefined;
+    }> | readonly (number | import("chart.js/dist/types/utils")._DeepPartialObject<{
+        top?: number | undefined;
+        right?: number | undefined;
+        bottom?: number | undefined;
+        left?: number | undefined;
+    }> | undefined)[] | undefined;
+    backgroundColor?: string | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").Color | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
+    borderColor?: string | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").Color | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
+    hoverBorderWidth?: number | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
+    hoverBorderColor?: string | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").Color | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
+    hoverBackgroundColor?: string | ((ctx: import("chart.js").ScriptableContext<"bar">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").Color | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
+    animation?: false | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").AnimationSpec<"bar"> & {
+        onProgress?: ((this: import("chart.js").Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>, event: import("chart.js").AnimationEvent) => void) | undefined;
+        onComplete?: ((this: import("chart.js").Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>, event: import("chart.js").AnimationEvent) => void) | undefined;
+    }> | undefined;
+    animations?: import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").AnimationsSpec<"bar">> | undefined;
+    transitions?: import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").TransitionsSpec<"bar">> | undefined;
+    data: import("./interfaces").IBarChartPoint[];
+};

package/dist/chart/barChart/getDefaultDatasetStyle.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultDatasetStyle = void 0;
+const baseColors = [
+    "#2853BD",
+    "#DA7C3A",
+    "#4AA75E",
+    "#1098FF",
+    "#3852D6",
+    "#D35D80"
+];
+const getDefaultDatasetStyle = (dataSet, dsIndex) => {
+    var _a;
+    const newDataSet = Object.assign({}, dataSet);
+    const baseColor = ((_a = dataSet.backgroundColor) === null || _a === void 0 ? void 0 : _a.toString()) || baseColors[dsIndex % baseColors.length];
+    newDataSet.borderColor = baseColor;
+    newDataSet.backgroundColor = baseColor;
+    newDataSet.barPercentage = dataSet.barPercentage !== undefined ? dataSet.barPercentage : 0.9;
+    newDataSet.categoryPercentage = dataSet.categoryPercentage !== undefined ? dataSet.categoryPercentage : 0.6;
+    return newDataSet;
+};
+exports.getDefaultDatasetStyle = getDefaultDatasetStyle;

package/dist/chart/barChart/getDefaultOptions.d.ts

@@ -0,0 +1,45 @@
+import { IYAxisMeta } from "../interfaces";
+export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boolean, isDark: boolean, translate: (s: string) => string) => {
+    responsive: boolean;
+    maintainAspectRatio: boolean;
+    scales: {
+        x: {
+            title: {
+                display: boolean;
+            };
+            grid: {
+                display: boolean;
+            };
+            type: string;
+            ticks: {
+                source: string;
+                autoSkip: boolean;
+                maxRotation: number;
+                maxTicksLimit: number;
+                color: string;
+                callback: (value: string) => string;
+            } | {
+                source: string;
+                autoSkip: boolean;
+                maxTicksLimit: number;
+                color: string;
+                maxRotation?: undefined;
+                callback?: undefined;
+            };
+            border: {
+                display: boolean;
+                dash: number[];
+            };
+        };
+    };
+    plugins: {
+        legend: {
+            display: boolean;
+        };
+        tooltip: {
+            enabled: boolean;
+        };
+        zenithTooltip: {};
+    };
+    animation: boolean;
+};

package/dist/chart/barChart/getDefaultOptions.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultOptions = void 0;
+const formatDate_1 = require("../../utils/formatDate");
+const getDefaultGridStyle = (isDark) => ({
+    drawTicks: false,
+    color: isDark ? "#C0CCD8" : "#4E677E"
+});
+const defaultGridBorderStyle = {
+    display: false,
+    dash: [2, 2]
+};
+const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
+    const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const scales = {
+        x: {
+            title: {
+                display: false
+            },
+            grid: {
+                display: false
+            },
+            type: isTimedData ? "time" : "category",
+            ticks: isTimedData ? {
+                source: "data",
+                autoSkip: true,
+                maxRotation: 0,
+                maxTicksLimit: 12,
+                color: textColor,
+                callback: (value) => (0, formatDate_1.formatDate)(new Date(value), "MMM dd", translate)
+            } : {
+                source: "data",
+                autoSkip: false,
+                //maxRotation: 0,
+                maxTicksLimit: 12,
+                color: textColor
+            },
+            border: defaultGridBorderStyle
+        }
+    };
+    for (let i = 0; i < yAxis.length; i++) {
+        const yAxisId = yAxis[i].name;
+        scales[yAxisId] = {
+            title: {
+                display: false
+            },
+            ticks: {
+                color: textColor,
+                padding: 10,
+                source: "data",
+                autoSkip: true
+            },
+            beginAtZero: true,
+            grid: i === 0 ? getDefaultGridStyle(isDark) : { display: false },
+            border: defaultGridBorderStyle,
+            min: yAxis[i].min,
+            max: yAxis[i].max,
+            position: i === 0 ? "left" : "right"
+        };
+    }
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales,
+        plugins: {
+            legend: {
+                display: false
+            },
+            tooltip: {
+                enabled: false
+            },
+            zenithTooltip: {}
+        },
+        animation: false
+    };
+};
+exports.getDefaultOptions = getDefaultOptions;

package/dist/chart/barChart/interfaces.d.ts

@@ -0,0 +1,15 @@
+import { ChartData, ChartDataset, ChartOptions, PluginOptionsByType } from "chart.js/auto";
+interface IBarChartPluginOptions extends Partial<PluginOptionsByType<"bar">> {
+}
+export interface IBarChartOptions extends ChartOptions<"bar"> {
+    plugins?: IBarChartPluginOptions;
+}
+export interface IBarChartPoint {
+    x: number | string;
+    y: number;
+}
+export type IBarChartDataset = ChartDataset<"bar", IBarChartPoint[]>;
+export interface IBarChartData extends Omit<ChartData<"bar">, "datasets" | "labels"> {
+    datasets: IBarChartDataset[];
+}
+export {};

package/dist/chart/barChart/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/chart/barChart.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./chart.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { Plugin } from "chart.js/auto";
+import "../react-chartjs/dateAdapter";
+import { IChartSummary } from "./chartSummary/chartSummary";
+import { IChartAxis } from "./chartAxis/chartAxis";
+import { IBarChartData, IBarChartOptions } from "./barChart/interfaces";
+import { ILegendOptions } from "./plugins/legend/interfaces";
+import { ITooltipOptions } from "./plugins/tooltip/interfaces";
+import { IChartInsight } from "./chartInsight/chartInsight";
+export interface IBarChart extends IZenComponentProps {
+    data: IBarChartData;
+    options?: IBarChartOptions;
+    axis?: Partial<IChartAxis>;
+    legend?: ILegendOptions | false;
+    tooltip?: ITooltipOptions | false;
+    insight?: IChartInsight | false;
+    summary?: IChartSummary | false;
+    plugins?: Plugin<"bar">[];
+}
+export declare const BarChart: React.FC<IBarChart>;