@geotab/zenith 3.3.0 → 3.4.0

package/README.md

@@ -40,6 +40,24 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.4.0
+
+* Integrate Tooltip with Zenith components
+* Add `tall` list variation
+* Fix Layout min-height issue
+* Add EmptyState component
+* Update fr and es trantions
+* Add ExpandablePill `autoExpandChildren` property
+* Mobile Table alignment fix
+* Modal close button style fix
+* Accessibility issues fixes
+* Add year to date option to daterange
+* FormField refactoring
+* Update documentation for images
+* Zenith stacked bar chart calculation fix
+* Update Alerts animation
+* FormField build fixes
+
 ### 3.3.0
 
 **🎉 Introducing Detail Panel in Table**

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -187,7 +187,7 @@ injectString("cs", "GroupCompanyId", "Skupina spole\u010Dnosti");
 injectString("da-DK", "GroupCompanyId", "Virksomhedsgruppe");
 injectString("de", "GroupCompanyId", "Unternehmensgruppe");
 injectString("en", "GroupCompanyId", "Company group");
-injectString("es", "GroupCompanyId", "Grupo Compa\xF1\xEDa");
+injectString("es", "GroupCompanyId", "Grupo Empresa");
 injectString("fi-FI", "GroupCompanyId", "Yritysryhm\xE4");
 injectString("fr", "GroupCompanyId", "Groupe Entreprise");
 injectString("fr-FR", "GroupCompanyId", "Groupe Entreprise");

package/dist/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TRANSLATIONS = exports.AdvancedGroupsFilterSectionTooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const tooltip_1 = require("../tooltip/tooltip");
 injectString("cs", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "P\u0159i hled\xE1n\xED konkr\xE9tn\xED skupiny pou\u017Eijte v\xEDce oper\xE1tor\u016F. Nap\u0159\xEDklad p\u0159i filtrov\xE1n\xED prost\u0159edk\u016F, kter\xE9 spadaj\xED do skupiny Traktory, skupina Toronto zobraz\xED seznam traktor\u016F, kter\xE9 pat\u0159\xED do pobo\u010Dky v Torontu.");
 injectString("da-DK", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Brug flere operatorer, n\xE5r du s\xF8ger efter en bestemt gruppe. Hvis du f.eks. filtrerer efter aktiver, der tilh\xF8rer gruppen Traktor og Toronto-gruppen, vises en liste over traktorer, der tilh\xF8rer Toronto-grenen.");
@@ -34,58 +33,20 @@ injectString("th", "Use multiple operators when searching for a specific group.
 injectString("tr", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "Belirli bir grubu ararken birden \xE7ok operat\xF6r kullan\u0131n. \xD6rne\u011Fin, Trakt\xF6r grubuna ve Toronto grubuna ait varl\u0131klar i\xE7in filtreleme yap\u0131l\u0131rken Toronto \u015Fubesine ait trakt\xF6rlerin listesi g\xF6r\xFCnt\xFClenir.");
 injectString("zh-Hans", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\u641C\u7D22\u7279\u5B9A\u7EC4\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u591A\u4E2A\u8FD0\u7B97\u7B26\u3002\u4F8B\u5982\uFF0C\u7B5B\u9009\u5C5E\u4E8E\u201C\u7275\u5F15\u8F66\u201D\u7EC4\u548C\u201C\u591A\u4F26\u591A\u201D\u7EC4\u7684\u8D44\u4EA7\uFF0C\u5C31\u4F1A\u663E\u793A\u5C5E\u4E8E\u591A\u4F26\u591A\u5206\u652F\u7684\u7275\u5F15\u8F66\u5217\u8868\u3002");
 injectString("zh-TW", "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.", "\u641C\u5C0B\u7279\u5B9A\u7FA4\u7D44\u6642\uFF0C\u8ACB\u4F7F\u7528\u591A\u500B\u904B\u7B97\u5B50\u3002\u4F8B\u5982\uFF0C\u82E5\u7BE9\u9078\u5C6C\u65BC\u727D\u5F15\u6A5F\u7FA4\u7D44\u548C\u591A\u502B\u591A\u7FA4\u7D44\u7684\u8CC7\u7522\uFF0C\u5247\u6703\u986F\u793A\u5C6C\u65BC\u591A\u502B\u591A\u5206\u516C\u53F8\u7684\u727D\u5F15\u6A5F\u6E05\u55AE\u3002");
-injectString("cs", "Information", "Informace");
-injectString("da-DK", "Information", "Information");
-injectString("de", "Information", "Information");
-injectString("en", "Information", "Information");
-injectString("es", "Information", "Informaci\xF3n");
-injectString("fi-FI", "Information", "Tiedot");
-injectString("fr", "Information", "Renseignements");
-injectString("fr-FR", "Information", "Informations");
-injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
-injectString("id", "Information", "Informasi");
-injectString("it", "Information", "Informazioni");
-injectString("ja", "Information", "\u60C5\u5831");
-injectString("ko-KR", "Information", "\uC815\uBCF4");
-injectString("ms", "Information", "Maklumat");
-injectString("nb-NO", "Information", "Informasjon");
-injectString("nl", "Information", "Informatie");
-injectString("pl", "Information", "Informacje");
-injectString("pt-BR", "Information", "Informa\xE7\xF5es");
-injectString("sk-SK", "Information", "Inform\xE1cie");
-injectString("sv", "Information", "Information");
-injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
-injectString("tr", "Information", "Bilgi");
-injectString("zh-Hans", "Information", "\u4FE1\u606F");
-injectString("zh-TW", "Information", "\u8CC7\u8A0A");
-const iconInfoCircle_1 = require("../icons/iconInfoCircle");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const AdvancedGroupsFilterSectionTooltip = ({
   className = "",
-  size = "auto",
   alignment = "top",
   text
 }) => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  const triggerRef = (0, react_1.useRef)(null);
   const defaultTooltipText = translate("Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.");
   return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
     className: (0, classNames_1.classNames)(["zen-advanced-groups-filter-section-tooltip__item", className || ""]),
-    size: size,
     alignment: alignment,
-    trigger: (0, jsx_runtime_1.jsx)("button", {
-      type: "button",
-      "aria-label": translate("Information"),
-      className: "zen-advanced-groups-filter-section-tooltip__trigger",
-      ref: triggerRef,
-      children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, {
-        className: "zen-advanced-groups-filter-section-tooltip__trigger-icon",
-        size: "large"
-      })
-    }),
     children: text || defaultTooltipText
   });
 };

package/dist/alertRaw/components/alertAnimation.js

@@ -19,7 +19,8 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
             ], {
                 duration: 300,
                 iterations: 1,
-                delay: 0
+                delay: 0,
+                easing: "ease-in-out"
             }).onfinish = () => {
                 finishAlertAnimation(id);
             };
@@ -32,7 +33,8 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
             ], {
                 duration: 300,
                 iterations: 1,
-                delay: 0
+                delay: 0,
+                easing: "ease-in-out"
             }).onfinish = () => {
                 finishAlertAnimation(id);
             };
@@ -46,7 +48,8 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
                 duration: 300,
                 iterations: 1,
                 delay: 0,
-                fill: "forwards"
+                fill: "forwards",
+                easing: "ease-in-out"
             }).onfinish = () => {
                 finishAlertAnimation(id);
             };
@@ -58,7 +61,8 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
         ], {
             duration: 300,
             iterations: 1,
-            delay: 0
+            delay: 0,
+            easing: "ease-in-out"
         }).onfinish = () => {
             finishAlertAnimation(id);
         };

package/dist/card/card.d.ts

@@ -6,10 +6,10 @@ import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";
 import { TAlignment } from "../absolute/absolute";
-import { TooltipSize } from "../tooltip/tooltip";
 import { IZenComponentProps, IZenFormLayoutItem, IZenGridItem } from "../commonHelpers/zenComponent";
 import { ICardButton } from "./components/cardButton/cardButton";
 import { IIcon } from "../icons/icon";
+import { TooltipSize } from "../tooltip/tooltip";
 import { IToggleButton } from "../toggleButton/toggleButton";
 export declare const DEFAULT_CARD_SIZE: TContainerSize;
 export interface ICard extends IZenComponentProps, IZenGridItem, IZenFormLayoutItem {

package/dist/card/card.js

@@ -116,7 +116,6 @@ props => {
     onClick,
     cardContentClasses = "",
     tooltipAlignment,
-    tooltipSize,
     fullWidth,
     scrollableContent = true,
     autoHeight = false,
@@ -290,8 +289,7 @@ props => {
             status: status,
             isMobile: isMobile,
             tooltip: tooltip,
-            tooltipAlignment: tooltipAlignment,
-            tooltipSize: tooltipSize
+            tooltipAlignment: tooltipAlignment
           }), toggle ? (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, Object.assign({}, toggle.props)) : null, !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, {
             trigger: menuTrigger,
             title: title || translate("Actions"),

package/dist/card/components/status.js

@@ -9,7 +9,7 @@ const textIconButton_1 = require("../../textIconButton/textIconButton");
 const tooltip_1 = require("../../tooltip/tooltip");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const iconInfoCircle_1 = require("../../icons/iconInfoCircle");
-const Status = ({ status, isMobile, tooltip, className = "", tooltipAlignment, tooltipSize, title }) => {
+const Status = ({ status, isMobile, tooltip, className = "", tooltipAlignment, title }) => {
     const ref = (0, react_1.useRef)(null);
     const isDrive = (0, useDrive_1.useDrive)();
     const renderButton = () => {
@@ -17,7 +17,7 @@ const Status = ({ status, isMobile, tooltip, className = "", tooltipAlignment, t
             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", status ? `zen-card-status--${status}` : "", className]), icon: iconInfoCircle_1.IconInfoCircle, 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 });
+        return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { mobileTitle: title, alignment: tooltipAlignment, trigger: statusButton, children: tooltip });
     };
     return tooltip ? renderButton() : null;
 };

package/dist/chart/barChart/getBarTooltipItems.js

@@ -9,6 +9,26 @@ const getBarTooltipItems = (data, datasetIndex, index, options, isHidden) => {
     if (datasetIndex === undefined || index === undefined) {
         return [];
     }
+    // Get the x-value from the hovered dataset to match against other datasets
+    // If the hovered dataset is empty, find the first non-empty dataset to get the x-value
+    const hoveredDataset = data.datasets[datasetIndex];
+    let hoveredDataItem = index < hoveredDataset.data.length
+        ? hoveredDataset.data[index]
+        : undefined;
+    // If the hovered dataset doesn't have data at this index, find another dataset that does
+    if (hoveredDataItem === undefined) {
+        for (const dataset of data.datasets) {
+            if (dataset.data.length > index) {
+                hoveredDataItem = dataset.data[index];
+                break;
+            }
+        }
+        // If still no data found, return empty
+        if (hoveredDataItem === undefined) {
+            return [];
+        }
+    }
+    const hoveredXValue = typeof hoveredDataItem === "number" ? undefined : hoveredDataItem.x;
     return data.datasets.map((dataset, dsIndex) => {
         if (dataset.data.length === 0) {
             return undefined;
@@ -16,12 +36,21 @@ const getBarTooltipItems = (data, datasetIndex, index, options, isHidden) => {
         if (isHidden(dsIndex)) {
             return undefined;
         }
-        const dataItem = dataset.data[index];
+        // Find the data item in this dataset that matches the hovered x-value
+        const dataItem = hoveredXValue !== undefined
+            ? dataset.data.find(item => typeof item !== "number" && item.x === hoveredXValue)
+            : dataset.data[index];
+        // If no matching data point exists for this dataset, skip it
+        if (!dataItem) {
+            return undefined;
+        }
         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 = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[index] ? dataset.backgroundColor[index] :
+        // For color, find the correct index in the original dataset
+        const dataItemIndex = dataset.data.indexOf(dataItem);
+        const color = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[dataItemIndex] ? dataset.backgroundColor[dataItemIndex] :
             typeof dataset.borderColor === "string" ? dataset.borderColor : "";
         return { label, value, color };
     }).filter(item => item !== undefined);

package/dist/chart/barChart.js

@@ -58,7 +58,8 @@ const BarChart = (_a) => {
     const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
     const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
-    const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data), [data]);
+    const isStacked = (0, react_1.useMemo)(() => { var _a, _b; return ((_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.stacked) === true; }, [options]);
+    const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data, isStacked), [data, isStacked]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate), [yAxisMeta, isTimedData, dark, translate]);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();

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

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

package/dist/chart/utils/getYAxisMeta.js

@@ -4,10 +4,53 @@ exports.getYAxisMeta = void 0;
 const getRange_1 = require("./getRange");
 const mergeRanges_1 = require("./mergeRanges");
 const normalizeRange_1 = require("./normalizeRange");
-const getYAxisMeta = (data) => {
+const getYAxisMeta = (data, stacked = false) => {
     if (data.datasets.length === 0) {
         return [Object.assign({ name: "y" }, (0, getRange_1.getRange)({ data: [] }))];
     }
+    if (stacked) {
+        const axisMap = {};
+        data.datasets.forEach((ds) => {
+            const name = ds.yAxisID ? ds.yAxisID : "y";
+            if (!axisMap.hasOwnProperty(name)) {
+                axisMap[name] = {
+                    name: name,
+                    valuesByX: new Map()
+                };
+            }
+            const valuesByX = axisMap[name].valuesByX;
+            ds.data.forEach((point) => {
+                const xKey = typeof point === "object" && "x" in point ? point.x : "";
+                const yValue = typeof point === "object" && "y" in point ? point.y : (typeof point === "number" ? point : 0);
+                const existing = valuesByX.get(xKey) || { positive: 0, negative: 0 };
+                if (yValue !== null && yValue >= 0) {
+                    existing.positive += yValue;
+                }
+                else if (yValue !== null && yValue < 0) {
+                    existing.negative += yValue;
+                }
+                valuesByX.set(xKey, existing);
+            });
+        });
+        return Object.values(axisMap).map(axis => {
+            const stackedValues = [];
+            axis.valuesByX.forEach((value) => {
+                // Always include 0 as the baseline for stacked charts
+                if (value.positive > 0) {
+                    stackedValues.push(value.positive);
+                }
+                if (value.negative < 0) {
+                    stackedValues.push(value.negative);
+                }
+            });
+            // Add 0 to ensure the axis includes the baseline
+            stackedValues.push(0);
+            const stackedData = stackedValues.map(y => ({ x: 0, y }));
+            const range = (0, getRange_1.getRange)({ data: stackedData });
+            const normalized = (0, normalizeRange_1.normalizeRange)(range);
+            return Object.assign({ name: axis.name }, normalized);
+        });
+    }
     const axisMap = data.datasets.reduce((acc, ds) => {
         const name = ds.yAxisID ? ds.yAxisID : "y";
         const range = (0, getRange_1.getRange)({ data: ds.data });

package/dist/checkbox/checkbox.js

@@ -51,14 +51,14 @@ const Checkbox = (_a) => {
     const intId = id || generatedId;
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox");
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
-    const checkbox = (0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled }, rest));
+    const checkbox = (0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title }, rest));
     const iconAndLabel = (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? (0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) :
                     state === checkboxState_1.CheckboxState.On ? (0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" }) : null }), children
                 ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })
                 : null] });
     if (wrapped) {
-        return (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, "aria-label": title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] });
+        return (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] });
     }
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, "aria-label": title, children: iconAndLabel })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] });
 };
 exports.Checkbox = Checkbox;

package/dist/dataGrid/emptySearchList/emptySearchList.d.ts

@@ -1,11 +1,10 @@
-import { ReactNode } from "react";
-import { IZenComponentProps } from "../../commonHelpers/zenComponent";
-import "./emptySearchList.less";
-export interface IEmptySearchList extends IZenComponentProps {
-    description?: string;
-    image?: ReactNode;
+/// <reference types="react" />
+import { IEmptyState } from "../../emptyState/emptyState";
+export interface IEmptySearchList extends Omit<IEmptyState, "children"> {
+    image?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const EmptySearchList: {
-    ({ className, children, description, image }: IEmptySearchList): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: IEmptySearchList): import("react/jsx-runtime").JSX.Element;
     translations: string[];
 };

package/dist/dataGrid/emptySearchList/emptySearchList.js

@@ -3,13 +3,20 @@
 const {
   injectString
 } = require("../../utils/localization/translationsDictionary");
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmptySearchList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../../commonHelpers/classNames/classNames");
-const imageNothingFound_1 = require("../../images/imageNothingFound");
+const emptyState_1 = require("../../emptyState/emptyState");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 injectString("cs", "Try adjusting your search or filter.", "Zkuste upravit sv\xE9 vyhled\xE1v\xE1n\xED nebo filtr.");
 injectString("da-DK", "Try adjusting your search or filter.", "Pr\xF8v at justere din s\xF8gning eller dit filter.");
@@ -35,30 +42,15 @@ injectString("th", "Try adjusting your search or filter.", "\u0E25\u0E2D\u0E07\u
 injectString("tr", "Try adjusting your search or filter.", "Araman\u0131z\u0131 veya filtrenizi ayarlamay\u0131 deneyin.");
 injectString("zh-Hans", "Try adjusting your search or filter.", "\u5C1D\u8BD5\u8C03\u6574\u60A8\u7684\u641C\u7D22\u6216\u7B5B\u9009\u6761\u4EF6\u3002");
 injectString("zh-TW", "Try adjusting your search or filter.", "\u8ACB\u5617\u8A66\u8ABF\u6574\u60A8\u7684\u641C\u5C0B\u6216\u7BE9\u9078\u689D\u4EF6\u3002");
-const EmptySearchList = ({
-  className,
-  children,
-  description,
-  image
-}) => {
+const EmptySearchList = _a => {
+  var props = __rest(_a, []);
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
-  return (0, jsx_runtime_1.jsxs)("div", {
-    className: (0, classNames_1.classNames)(["zen-empty-list-search", className || ""]),
-    children: [image ? (0, jsx_runtime_1.jsx)("div", {
-      className: "zen-empty-list-search__image",
-      children: image
-    }) : (0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, {
-      className: "zen-empty-list-search__image"
-    }), (0, jsx_runtime_1.jsx)("h2", {
-      className: "zen-empty-list-search__header",
-      children: children
-    }), (0, jsx_runtime_1.jsx)("div", {
-      className: "zen-empty-list-search__description",
-      children: description || translate("Try adjusting your search or filter.")
-    })]
-  });
+  return (0, jsx_runtime_1.jsx)(emptyState_1.EmptyState, Object.assign({}, props, {
+    description: props.description || translate("Try adjusting your search or filter."),
+    children: props.children
+  }));
 };
 exports.EmptySearchList = EmptySearchList;
 exports.EmptySearchList.translations = ["Try adjusting your search or filter."];

package/dist/dateInputRaw/dateInputRaw.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./dateInputRaw.less";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IDateInputRawDefault, TDateInputRaw } from "./types";
 import { IChipsParent } from "../chip/chip";
 export interface IDateInputRaw extends IDateInputRawDefault, IChipsParent {

package/dist/dateRangeRaw/dateRangeRaw.d.ts

@@ -2,7 +2,7 @@
 import "./dateRangeRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { TButton } from "../button/buttonType";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { IChipsParent } from "../chip/chip";
 import { TDateRangeOption, IDateRangeValue, IDateRangeValueOptionalLabel } from "./utils/dateRangeUtils";
 import { TDateRangeRaw } from "./types";

package/dist/dateRangeRaw/utils/dateRangeUtils.d.ts

@@ -28,6 +28,7 @@ export declare const GET_NEXT_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime,
 export declare const GET_LAST_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_SEVEN_DAYS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_THIRTY_DAYS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
+export declare const GET_YEAR_TO_DATE_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_TWELVE_MONTHS_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_THREE_MONTH_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;
 export declare const GET_LAST_QUARTER_OPTION: (toLocalDateTime?: TToLocalDateTime, translate?: TTranslate, toReverseOffsetDateTime?: TToLocalDateTime) => IDateRangeOption;

package/dist/dateRangeRaw/utils/dateRangeUtils.js

@@ -6,7 +6,7 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GET_DEFAULT_DATE_OPTIONS = exports.GET_THIS_YEAR_OPTION = exports.GET_LAST_YEAR_OPTION = exports.GET_THIS_QUARTER_OPTION = exports.GET_LAST_QUARTER_OPTION = exports.GET_LAST_THREE_MONTH_OPTION = exports.GET_LAST_TWELVE_MONTHS_OPTION = exports.GET_LAST_THIRTY_DAYS_OPTION = exports.GET_LAST_SEVEN_DAYS_OPTION = exports.GET_LAST_MONTH_OPTION = exports.GET_NEXT_MONTH_OPTION = exports.GET_THIS_MONTH_OPTION = exports.GET_LAST_WEEK_OPTION = exports.GET_NEXT_WEEK_OPTION = exports.GET_THIS_WEEK_OPTION = exports.GET_YESTERDAY_OPTION = exports.GET_TODAY_OPTION = void 0;
+exports.GET_DEFAULT_DATE_OPTIONS = exports.GET_THIS_YEAR_OPTION = exports.GET_LAST_YEAR_OPTION = exports.GET_THIS_QUARTER_OPTION = exports.GET_LAST_QUARTER_OPTION = exports.GET_LAST_THREE_MONTH_OPTION = exports.GET_LAST_TWELVE_MONTHS_OPTION = exports.GET_YEAR_TO_DATE_OPTION = exports.GET_LAST_THIRTY_DAYS_OPTION = exports.GET_LAST_SEVEN_DAYS_OPTION = exports.GET_LAST_MONTH_OPTION = exports.GET_NEXT_MONTH_OPTION = exports.GET_THIS_MONTH_OPTION = exports.GET_LAST_WEEK_OPTION = exports.GET_NEXT_WEEK_OPTION = exports.GET_THIS_WEEK_OPTION = exports.GET_YESTERDAY_OPTION = exports.GET_TODAY_OPTION = void 0;
 const dateUtils_1 = require("../../calendar/dateUtils");
 injectString("cs", "Today", "Dnes");
 injectString("da-DK", "Today", "I dag");
@@ -248,6 +248,30 @@ injectString("th", "Last 30 days", "30 \u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E1
 injectString("tr", "Last 30 days", "Son 30 g\xFCn");
 injectString("zh-Hans", "Last 30 days", "\u6700\u8FD1 30 \u5929");
 injectString("zh-TW", "Last 30 days", "\u904E\u53BB 30 \u5929");
+injectString("cs", "Year to date", "Od za\u010D\xE1tku roku");
+injectString("da-DK", "Year to date", "\xC5r til dato");
+injectString("de", "Year to date", "Seit Jahresbeginn");
+injectString("en", "Year to date", "Year to date");
+injectString("es", "Year to date", "A\xF1o a la fecha");
+injectString("fi-FI", "Year to date", "Vuoden alusta");
+injectString("fr", "Year to date", "Cumul jusqu\u2019\xE0 ce jour");
+injectString("fr-FR", "Year to date", "L\u2019ann\xE9e pass\xE9e");
+injectString("hu-HU", "Year to date", "\xC9v a mai napig");
+injectString("id", "Year to date", "Tahun hingga saat ini");
+injectString("it", "Year to date", "Dall'inizio dell'anno");
+injectString("ja", "Year to date", "\u7D2F\u8A08");
+injectString("ko-KR", "Year to date", "\uC62C\uD574 \uD604\uC7AC\uAE4C\uC9C0");
+injectString("ms", "Year to date", "Tahun ini hingga tarikh ini");
+injectString("nb-NO", "Year to date", "\xC5r til dato");
+injectString("nl", "Year to date", "Jaar tot heden");
+injectString("pl", "Year to date", "Od pocz\u0105tku roku");
+injectString("pt-BR", "Year to date", "Acumulado no ano");
+injectString("sk-SK", "Year to date", "Rok od za\u010Diatku");
+injectString("sv", "Year to date", "\xC5r till dagens datum");
+injectString("th", "Year to date", "\u0E15\u0E49\u0E19\u0E1B\u0E35\u0E16\u0E36\u0E07\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19");
+injectString("tr", "Year to date", "Y\u0131lba\u015F\u0131ndan bug\xFCne kadar");
+injectString("zh-Hans", "Year to date", "\u5E74\u521D\u81F3\u4ECA");
+injectString("zh-TW", "Year to date", "\u5E74\u521D\u81F3\u4ECA");
 injectString("cs", "Last 12 months", "Posledn\xEDch 12 m\u011Bs\xEDc\u016F");
 injectString("da-DK", "Last 12 months", "Sidste 12 m\xE5neder");
 injectString("de", "Last 12 months", "Letzte 12 Monate");
@@ -552,6 +576,20 @@ const GET_LAST_THIRTY_DAYS_OPTION = (toLocalDateTime = defaultToLocalDateTime, t
   };
 };
 exports.GET_LAST_THIRTY_DAYS_OPTION = GET_LAST_THIRTY_DAYS_OPTION;
+const GET_YEAR_TO_DATE_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
+  const startDate = new Date((0, dateUtils_1.getNewStartDate)(toLocalDateTime).getFullYear(), 0, 1);
+  const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);
+  const from = toReverseOffsetDateTime(startDate);
+  const to = toReverseOffsetDateTime(endDate);
+  return {
+    label: translate("Year to date"),
+    getRange: () => ({
+      from,
+      to
+    })
+  };
+};
+exports.GET_YEAR_TO_DATE_OPTION = GET_YEAR_TO_DATE_OPTION;
 const GET_LAST_TWELVE_MONTHS_OPTION = (toLocalDateTime = defaultToLocalDateTime, translate = defaultTranslate, toReverseOffsetDateTime = defaultToReverseOffsetDateTime) => {
   const startDate = (0, dateUtils_1.addMonths)((0, dateUtils_1.getNewStartDate)(toLocalDateTime), -12);
   const endDate = (0, dateUtils_1.getNewEndDate)(toLocalDateTime);

package/dist/dropdownRaw/dropdownRaw.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./dropdownRaw.less";
-import { IFormFieldComponent } from "../formField/formField";
+import { IFormFieldComponent } from "../formField/types";
 import { TDropdownRaw } from "./types";
 export declare const DropdownRaw: React.FC<TDropdownRaw & IFormFieldComponent>;
 export declare const TRANSLATIONS: string[];

package/dist/emptyState/emptyState.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import "./emptyState.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IEmptyState extends IZenComponentProps {
+    description?: string;
+    image?: ReactNode | React.FC;
+    children: ReactNode;
+}
+export declare const EmptyState: ({ className, children, description, image }: IEmptyState) => import("react/jsx-runtime").JSX.Element;

package/dist/emptyState/emptyState.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const imageNothingFound_1 = require("../images/imageNothingFound");
+const useIcon_1 = require("./hooks/useIcon");
+const EmptyState = ({ className, children, description, image }) => {
+    const icon = (0, useIcon_1.useIcon)(image);
+    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-empty-state", className || ""]), children: [icon
+                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-state__image", children: icon })
+                : (0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, { className: "zen-empty-state__image" }), children && (0, jsx_runtime_1.jsx)("h2", { className: "zen-empty-state__header", children: children }), description && (0, jsx_runtime_1.jsx)("div", { className: "zen-empty-state__description", children: description })] });
+};
+exports.EmptyState = EmptyState;

package/dist/emptyState/hooks/useIcon.d.ts

@@ -0,0 +1,2 @@
+import React, { ReactNode } from "react";
+export declare const useIcon: (icon: ReactNode | React.FC) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.FunctionComponentElement<{}> | null | undefined;

package/dist/emptyState/hooks/useIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const useIcon = (icon) => {
+    const svgIcon = react_1.default.useMemo(() => {
+        if (typeof icon === "function") {
+            return react_1.default.createElement(icon, {});
+        }
+        return icon;
+    }, [icon]);
+    return svgIcon;
+};
+exports.useIcon = useIcon;

package/dist/filtersBar/components/filtersBarPeriodPicker/getRangeOption.d.ts

@@ -24,6 +24,7 @@ declare const options: {
     LastQuarter: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
     LastYear: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
     ThisYear: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
+    YearToDate: (translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, _firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => IDateRangeOption;
 };
 export type TDateRangeName = keyof typeof options | "Custom";
 export declare function getRangeOption(option: TDateRangeOption, translate: (s: string) => string, toLocalDateTime?: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date): IDateRangeOptionId | undefined;