@geotab/zenith 3.8.0 → 3.9.0-beta.0

package/dist/utils/localization/translations/en.json

@@ -208,6 +208,8 @@
     "X-axis": "X-axis",
     "Previous": "Previous",
     "Next": "Next",
+    "Previous date period": "Previous date period",
+    "Next date period": "Next date period",
     "Choose dates": "Choose dates",
     "Date range not available": "Date range not available",
     "Choose your date range": "Choose your date range",
@@ -217,6 +219,7 @@
     "Favorite": "Favorite",
     "All Filters": "All Filters",
     "Reset All": "Reset all",
+    "Active filters: {}": "Active filters: {}",
     "Loading": "Loading",
     "Select option": "Select option",
     "Value": "Value",

package/dist/utils/localization/useDirection.d.ts

@@ -0,0 +1,2 @@
+import { TTextDirection } from "./getTextDirection";
+export declare const useDirection: () => TTextDirection;

package/dist/utils/localization/useDirection.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDirection = void 0;
+const react_1 = require("react");
+const directionContext_1 = require("./directionContext");
+const useDirection = () => (0, react_1.useContext)(directionContext_1.directionContext);
+exports.useDirection = useDirection;

package/esm/button/button.d.ts

@@ -24,8 +24,9 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     ref?: Ref<HTMLButtonElement | null>;
     role?: string;
     ariaLabel?: string;
+    dataAnalyticsId?: string;
 }
 export declare const Button: {
-    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/button/button.js

@@ -16,14 +16,14 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { filterGridProps } from "../gridLayout/utils/filterGridProps";
 import { useMobileClassName } from "../utils/theme/useMobileClassName";
 export const Button = (_a) => {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel"]);
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
     const modifierClassName = type && type !== ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = useDriveClassName("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = useMobileClassName("zen-button");
-    const commonArgs = Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), { className: classNames(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
+    const commonArgs = Object.assign(Object.assign(Object.assign({ id,
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: classNames(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
     if (link) {
         return (_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, filterGridProps(other), { children: children })));
     }

package/esm/calendar/calendar.js

@@ -203,6 +203,195 @@ injectString("zh-Hans", "ShortSaturday", "\u516D");
 injectString("zh-TW", "ShortSaturday", "\u9031\u516D");
 injectString("ro-RO", "ShortSaturday", "ShortSaturday");
 injectString("ar-SA", "ShortSaturday", "\u0633");
+injectString("cs", "Sunday", "Ned\u011Ble");
+injectString("da-DK", "Sunday", "s\xF8ndag");
+injectString("de", "Sunday", "Sonntag");
+injectString("en", "Sunday", "Sunday");
+injectString("es", "Sunday", "Domingo");
+injectString("fi-FI", "Sunday", "Sunnuntai");
+injectString("fr", "Sunday", "Dimanche");
+injectString("fr-FR", "Sunday", "Dimanche");
+injectString("hu-HU", "Sunday", "vas\xE1rnap");
+injectString("id", "Sunday", "Minggu");
+injectString("it", "Sunday", "Domenica");
+injectString("ja", "Sunday", "\u65E5\u66DC\u65E5");
+injectString("ko-KR", "Sunday", "\uC77C\uC694\uC77C");
+injectString("ms", "Sunday", "Ahad");
+injectString("nb-NO", "Sunday", "S\xF8ndag");
+injectString("nl", "Sunday", "zondag");
+injectString("pl", "Sunday", "Niedziela");
+injectString("pt-BR", "Sunday", "Domingo");
+injectString("pt-PT", "Sunday", "Domingo");
+injectString("sk-SK", "Sunday", "Nede\u013Ea");
+injectString("sv", "Sunday", "S\xF6ndag");
+injectString("th", "Sunday", "\u0E27\u0E31\u0E19\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C");
+injectString("tr", "Sunday", "Pazar");
+injectString("zh-Hans", "Sunday", "\u661F\u671F\u5929");
+injectString("zh-TW", "Sunday", "\u661F\u671F\u65E5");
+injectString("ro-RO", "Sunday", "Duminic\u0103");
+injectString("ar-SA", "Sunday", "\u0627\u0644\u0623\u062D\u062F");
+injectString("cs", "Monday", "Pond\u011Bl\xED");
+injectString("da-DK", "Monday", "mandag");
+injectString("de", "Monday", "Montag");
+injectString("en", "Monday", "Monday");
+injectString("es", "Monday", "Lunes");
+injectString("fi-FI", "Monday", "Maanantai");
+injectString("fr", "Monday", "Lundi");
+injectString("fr-FR", "Monday", "Lundi");
+injectString("hu-HU", "Monday", "h\xE9tf\u0151");
+injectString("id", "Monday", "Senin");
+injectString("it", "Monday", "Luned\xEC");
+injectString("ja", "Monday", "\u6708\u66DC\u65E5");
+injectString("ko-KR", "Monday", "\uC6D4\uC694\uC77C");
+injectString("ms", "Monday", "Isnin");
+injectString("nb-NO", "Monday", "Mandag");
+injectString("nl", "Monday", "maandag");
+injectString("pl", "Monday", "Poniedzia\u0142ek");
+injectString("pt-BR", "Monday", "Segunda-feira");
+injectString("pt-PT", "Monday", "Segunda-feira");
+injectString("sk-SK", "Monday", "pondelok");
+injectString("sv", "Monday", "M\xE5ndag");
+injectString("th", "Monday", "\u0E27\u0E31\u0E19\u0E08\u0E31\u0E19\u0E17\u0E23\u0E4C");
+injectString("tr", "Monday", "Pazartesi");
+injectString("zh-Hans", "Monday", "\u661F\u671F\u4E00");
+injectString("zh-TW", "Monday", "\u661F\u671F\u4E00");
+injectString("ro-RO", "Monday", "Luni");
+injectString("ar-SA", "Monday", "\u0627\u0644\u0627\u062B\u0646\u064A\u0646");
+injectString("cs", "Tuesday", "\xDAter\xFD");
+injectString("da-DK", "Tuesday", "tirsdag");
+injectString("de", "Tuesday", "Dienstag");
+injectString("en", "Tuesday", "Tuesday");
+injectString("es", "Tuesday", "Martes");
+injectString("fi-FI", "Tuesday", "Tiistai");
+injectString("fr", "Tuesday", "Mardi");
+injectString("fr-FR", "Tuesday", "Mardi");
+injectString("hu-HU", "Tuesday", "kedd");
+injectString("id", "Tuesday", "Selasa");
+injectString("it", "Tuesday", "Marted\xEC");
+injectString("ja", "Tuesday", "\u706B\u66DC\u65E5");
+injectString("ko-KR", "Tuesday", "\uD654\uC694\uC77C");
+injectString("ms", "Tuesday", "Selasa");
+injectString("nb-NO", "Tuesday", "Tirsdag");
+injectString("nl", "Tuesday", "dinsdag");
+injectString("pl", "Tuesday", "Wtorek");
+injectString("pt-BR", "Tuesday", "Ter\xE7a-feira");
+injectString("pt-PT", "Tuesday", "Ter\xE7a-feira");
+injectString("sk-SK", "Tuesday", "Utorok");
+injectString("sv", "Tuesday", "Tisdag");
+injectString("th", "Tuesday", "\u0E27\u0E31\u0E19\u0E2D\u0E31\u0E07\u0E04\u0E32\u0E23");
+injectString("tr", "Tuesday", "Sal\u0131");
+injectString("zh-Hans", "Tuesday", "\u661F\u671F\u4E8C");
+injectString("zh-TW", "Tuesday", "\u661F\u671F\u4E8C");
+injectString("ro-RO", "Tuesday", "Mar\u021Bi");
+injectString("ar-SA", "Tuesday", "\u0627\u0644\u062B\u0644\u0627\u062B\u0627\u0621");
+injectString("cs", "Wednesday", "St\u0159eda");
+injectString("da-DK", "Wednesday", "onsdag");
+injectString("de", "Wednesday", "Mittwoch");
+injectString("en", "Wednesday", "Wednesday");
+injectString("es", "Wednesday", "Mi\xE9rcoles");
+injectString("fi-FI", "Wednesday", "Keskiviikko");
+injectString("fr", "Wednesday", "Mercredi");
+injectString("fr-FR", "Wednesday", "Mercredi");
+injectString("hu-HU", "Wednesday", "szerda");
+injectString("id", "Wednesday", "Rabu");
+injectString("it", "Wednesday", "Mercoled\xEC");
+injectString("ja", "Wednesday", "\u6C34\u66DC\u65E5");
+injectString("ko-KR", "Wednesday", "\uC218\uC694\uC77C");
+injectString("ms", "Wednesday", "Rabu");
+injectString("nb-NO", "Wednesday", "Onsdag");
+injectString("nl", "Wednesday", "woensdag");
+injectString("pl", "Wednesday", "\u015Aroda");
+injectString("pt-BR", "Wednesday", "Quarta-feira");
+injectString("pt-PT", "Wednesday", "Quarta-feira");
+injectString("sk-SK", "Wednesday", "Streda");
+injectString("sv", "Wednesday", "Onsdag");
+injectString("th", "Wednesday", "\u0E27\u0E31\u0E19\u0E1E\u0E38\u0E18");
+injectString("tr", "Wednesday", "\xC7ar\u015Famba");
+injectString("zh-Hans", "Wednesday", "\u661F\u671F\u4E09");
+injectString("zh-TW", "Wednesday", "\u661F\u671F\u4E09");
+injectString("ro-RO", "Wednesday", "Miercuri");
+injectString("ar-SA", "Wednesday", "\u0627\u0644\u0623\u0631\u0628\u0639\u0627\u0621");
+injectString("cs", "Thursday", "\u010Ctvrtek");
+injectString("da-DK", "Thursday", "torsdag");
+injectString("de", "Thursday", "Donnerstag");
+injectString("en", "Thursday", "Thursday");
+injectString("es", "Thursday", "Jueves");
+injectString("fi-FI", "Thursday", "Torstai");
+injectString("fr", "Thursday", "Jeudi");
+injectString("fr-FR", "Thursday", "Jeudi");
+injectString("hu-HU", "Thursday", "cs\xFCt\xF6rt\xF6k");
+injectString("id", "Thursday", "Kamis");
+injectString("it", "Thursday", "Gioved\xEC");
+injectString("ja", "Thursday", "\u6728\u66DC\u65E5");
+injectString("ko-KR", "Thursday", "\uBAA9\uC694\uC77C");
+injectString("ms", "Thursday", "Khamis");
+injectString("nb-NO", "Thursday", "Torsdag");
+injectString("nl", "Thursday", "donderdag");
+injectString("pl", "Thursday", "Czwartek");
+injectString("pt-BR", "Thursday", "Quinta-feira");
+injectString("pt-PT", "Thursday", "Quinta-feira");
+injectString("sk-SK", "Thursday", "\u0161tvrtok");
+injectString("sv", "Thursday", "Torsdag");
+injectString("th", "Thursday", "\u0E27\u0E31\u0E19\u0E1E\u0E24\u0E2B\u0E31\u0E2A\u0E1A\u0E14\u0E35");
+injectString("tr", "Thursday", "Per\u015Fembe");
+injectString("zh-Hans", "Thursday", "\u661F\u671F\u56DB");
+injectString("zh-TW", "Thursday", "\u661F\u671F\u56DB");
+injectString("ro-RO", "Thursday", "Joi");
+injectString("ar-SA", "Thursday", "\u0627\u0644\u062E\u0645\u064A\u0633");
+injectString("cs", "Friday", "P\xE1tek");
+injectString("da-DK", "Friday", "fredag");
+injectString("de", "Friday", "Freitag");
+injectString("en", "Friday", "Friday");
+injectString("es", "Friday", "Viernes");
+injectString("fi-FI", "Friday", "Perjantai");
+injectString("fr", "Friday", "Vendredi");
+injectString("fr-FR", "Friday", "Vendredi");
+injectString("hu-HU", "Friday", "p\xE9ntek");
+injectString("id", "Friday", "Jumat");
+injectString("it", "Friday", "Venerd\xEC");
+injectString("ja", "Friday", "\u91D1\u66DC\u65E5");
+injectString("ko-KR", "Friday", "\uAE08\uC694\uC77C");
+injectString("ms", "Friday", "Jumaat");
+injectString("nb-NO", "Friday", "Fredag");
+injectString("nl", "Friday", "vrijdag");
+injectString("pl", "Friday", "Pi\u0105tek");
+injectString("pt-BR", "Friday", "Sexta-feira");
+injectString("pt-PT", "Friday", "Sexta-feira");
+injectString("sk-SK", "Friday", "Piatok");
+injectString("sv", "Friday", "Fredag");
+injectString("th", "Friday", "\u0E27\u0E31\u0E19\u0E28\u0E38\u0E01\u0E23\u0E4C");
+injectString("tr", "Friday", "Cuma");
+injectString("zh-Hans", "Friday", "\u661F\u671F\u4E94");
+injectString("zh-TW", "Friday", "\u661F\u671F\u4E94");
+injectString("ro-RO", "Friday", "Vineri");
+injectString("ar-SA", "Friday", "\u0627\u0644\u062C\u0645\u0639\u0629");
+injectString("cs", "Saturday", "Sobota");
+injectString("da-DK", "Saturday", "l\xF8rdag");
+injectString("de", "Saturday", "Samstag");
+injectString("en", "Saturday", "Saturday");
+injectString("es", "Saturday", "S\xE1bado");
+injectString("fi-FI", "Saturday", "Lauantai");
+injectString("fr", "Saturday", "Samedi");
+injectString("fr-FR", "Saturday", "Samedi");
+injectString("hu-HU", "Saturday", "szombat");
+injectString("id", "Saturday", "Sabtu");
+injectString("it", "Saturday", "Sabato");
+injectString("ja", "Saturday", "\u571F\u66DC\u65E5");
+injectString("ko-KR", "Saturday", "\uD1A0\uC694\uC77C");
+injectString("ms", "Saturday", "Sabtu");
+injectString("nb-NO", "Saturday", "L\xF8rdag");
+injectString("nl", "Saturday", "zaterdag");
+injectString("pl", "Saturday", "Sobota");
+injectString("pt-BR", "Saturday", "S\xE1bado");
+injectString("pt-PT", "Saturday", "S\xE1bado");
+injectString("sk-SK", "Saturday", "Sobota");
+injectString("sv", "Saturday", "L\xF6rdag");
+injectString("th", "Saturday", "\u0E27\u0E31\u0E19\u0E40\u0E2A\u0E32\u0E23\u0E4C");
+injectString("tr", "Saturday", "Cumartesi");
+injectString("zh-Hans", "Saturday", "\u661F\u671F\u516D");
+injectString("zh-TW", "Saturday", "\u661F\u671F\u516D");
+injectString("ro-RO", "Saturday", "S\xE2mb\u0103t\u0103");
+injectString("ar-SA", "Saturday", "\u0627\u0644\u0633\u0628\u062A");
 injectString("cs", "Jan", "Led");
 injectString("da-DK", "Jan", "Jan");
 injectString("de", "Jan", "Jan");
@@ -694,6 +883,7 @@ export const Calendar = ({
     5: translate("ShortFriday"),
     6: translate("ShortSaturday")
   }), [translate]);
+  const fullDayLabels = useMemo(() => [translate("Sunday"), translate("Monday"), translate("Tuesday"), translate("Wednesday"), translate("Thursday"), translate("Friday"), translate("Saturday")], [translate]);
   const getDayOfWeek = useCallback(date => {
     const dayOfWeek = new Date(date).getDay();
     return dayLabels[dayOfWeek];
@@ -967,9 +1157,16 @@ export const Calendar = ({
       children: [_jsx("thead", {
         children: _jsx("tr", {
           className: "zen-calendar__columns",
-          children: dates[0].map(date => _jsx("th", {
+          children: dates[0].map(date => _jsxs("th", {
+            scope: "col",
             className: "zen-calendar__column",
-            children: getDayOfWeek(date)
+            children: [_jsx("span", {
+              "aria-hidden": "true",
+              children: getDayOfWeek(date)
+            }), _jsx("span", {
+              className: "zen-visually-hidden",
+              children: fullDayLabels[new Date(date).getDay()]
+            })]
           }, `cal-h-${date}`))
         })
       }), _jsx("tbody", {
@@ -1023,4 +1220,4 @@ export const Calendar = ({
     })]
   });
 };
-export const TRANSLATIONS = ["Select year", "Previous month", "Next month", "Change start date, {date}", "Change end date, {date}", "Choose end date", "Choose start date", "Change date, {date}", "Choose date", "{short-day-of-week-sunday}S", "{short-day-of-week-monday}M", "{short-day-of-week-tuesday}T", "{short-day-of-week-wednesday}W", "{short-day-of-week-thursday}T", "{short-day-of-week-friday}F", "{short-day-of-week-saturday}S", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+export const TRANSLATIONS = ["Select year", "Previous month", "Next month", "Change start date, {date}", "Change end date, {date}", "Choose end date", "Choose start date", "Change date, {date}", "Choose date", "{short-day-of-week-sunday}S", "{short-day-of-week-monday}M", "{short-day-of-week-tuesday}T", "{short-day-of-week-wednesday}W", "{short-day-of-week-thursday}T", "{short-day-of-week-friday}F", "{short-day-of-week-saturday}S", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

package/esm/card/card.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "./components/title";
+import { TIconType } from "../title/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";

package/esm/card/card.js

@@ -5,7 +5,7 @@ import { CardContainer } from "../cardContainer/cardContainer";
 import { DeviceType } from "../commonHelpers/hooks/deviceType";
 import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
 import { Status } from "./components/status";
-import { Title } from "./components/title";
+import { Title } from "../title/title";
 import { Actions } from "./components/actions";
 import { Content } from "./components/content";
 import { useCardSize } from "./hooks/useCardSize";

package/esm/card/components/cardButton/cardButton.d.ts

@@ -10,5 +10,6 @@ export interface ICardButton extends IZenIdComponentProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     link?: string;
     target?: HTMLAttributeAnchorTarget;
+    dataAnalyticsId?: string;
 }
-export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget }: ICardButton) => import("react/jsx-runtime").JSX.Element;
+export declare const CardButton: ({ children, disabled, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }: ICardButton) => import("react/jsx-runtime").JSX.Element;

package/esm/card/components/cardButton/cardButton.js

@@ -8,12 +8,14 @@ import { IconChevronTopSmall } from "../../../icons/iconChevronTopSmall";
 import { Menu } from "../../../menu/menu";
 import { useDriveClassName } from "../../../utils/theme/useDriveClassName";
 import { useDrive } from "../../../utils/theme/useDrive";
-export const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget }) => {
+import { toKebabCase } from "../../../utils/toKebabCase";
+export const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
     const [isOpen, setIsOpen] = useState(false);
     const triggerRef = useRef(null);
     const content = [];
     const cardButtonDriveClasses = useDriveClassName("zen-card-button");
     const isDrive = useDrive();
+    const analyticsId = dataAnalyticsId || toKebabCase(name);
     Children.forEach(children, (el) => {
         if (el.type === Menu.Item) {
             content.push(el);
@@ -27,9 +29,9 @@ export const CardButton = ({ children, disabled = false, icon, name, onClick, li
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(...args);
     };
-    const renderLink = () => (_jsxs(Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name })] }));
+    const renderLink = () => (_jsxs(Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, dataAnalyticsId: analyticsId, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name })] }));
     const renderButton = () => {
-        const trigger = (_jsxs(Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name }), !!content.length &&
+        const trigger = (_jsxs(Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, dataAnalyticsId: analyticsId, className: classNames([className || "", "zen-card-button", "zen-caption", cardButtonDriveClasses || ""]), children: [icon && createElement(icon, { size: isDrive ? "huge" : "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: name }), !!content.length &&
                     (isOpen ? (_jsx(IconChevronTopSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })) : (_jsx(IconChevronDownSmall, { size: isDrive ? "huge" : "large", className: "zen-caption__post-content" })))] }));
         return content.length ? (_jsxs(_Fragment, { children: [trigger, _jsx(ControlledMenu, { title: name, isOpen: isOpen, setIsOpen: setIsOpen, triggerRef: triggerRef, children: content })] })) : (trigger);
     };

package/esm/card/helpers/getIconTypeFromStatus.d.ts

@@ -1,3 +1,3 @@
 import { TCardStatus } from "../components/status";
-import { TIconType } from "../components/title";
+import { TIconType } from "../../title/title";
 export declare const getIconTypeFromStatus: (status: TCardStatus) => TIconType | undefined;

package/esm/chart/barChart/getBarLegendItems.js

@@ -16,16 +16,14 @@ export const getBarLegendItems = (data, options) => {
     const legendItems = data.datasets.map((dataset, index) => {
         let value;
         if (options === null || options === void 0 ? void 0 : options.getValue) {
-            const dataValues = getDatasetValues(dataset);
-            const customValue = options.getValue(index, dataValues);
-            if (customValue !== undefined) {
+            const customValue = options.getValue(index, getDatasetValues(dataset));
+            if (customValue !== null && customValue !== undefined) {
                 const strValue = typeof customValue === "number" ? customValue.toFixed(2) : customValue;
                 value = formatValue(strValue, index, options.unit);
             }
         }
         else if (options === null || options === void 0 ? void 0 : options.unit) {
-            const sum = getDatasetSum(dataset);
-            value = formatValue(sum.toFixed(2), index, options.unit);
+            value = formatValue(getDatasetSum(dataset).toFixed(2), index, options.unit);
         }
         const originalLabel = dataset.label || "";
         const text = (options === null || options === void 0 ? void 0 : options.getLabel) ? options.getLabel(index, originalLabel) : originalLabel;

package/esm/chart/lineChart/getLineLegendItems.js

@@ -35,15 +35,15 @@ export const getLineLegendItems = (data, options) => {
         }
         let value;
         if (options === null || options === void 0 ? void 0 : options.getValue) {
-            const dataValues = getDatasetValues(dataset);
-            const customValue = options.getValue(index, dataValues);
-            if (customValue !== undefined) {
-                const strValue = typeof customValue === "number" ? customValue.toFixed(2) : customValue;
+            const customValue = options.getValue(index, getDatasetValues(dataset));
+            if (customValue !== null) {
+                const strValue = customValue !== undefined
+                    ? typeof customValue === "number"
+                        ? customValue.toFixed(2)
+                        : customValue
+                    : getLatestValue(dataset).toFixed(2);
                 value = formatValue(strValue, index, options.unit);
             }
-            else {
-                value = formatValue(getLatestValue(dataset).toFixed(2), index, options.unit);
-            }
         }
         else {
             value = formatValue(getLatestValue(dataset).toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);

package/esm/chart/pieChart/centerTextPlugin.js

@@ -3,6 +3,7 @@ const getCssVar = (el, name) => { var _a, _b; return (_b = (_a = zen.getComputed
 export const centerTextPlugin = (centerText) => ({
     id: "zenithPieCenterText",
     afterDraw(chart) {
+        var _a;
         if (!centerText || centerText.value === undefined) {
             return;
         }
@@ -11,18 +12,25 @@ export const centerTextPlugin = (centerText) => ({
         const centerX = left + width / 2;
         const centerY = top + height / 2;
         const css = (name) => getCssVar(chart.canvas, name);
-        const fontFamily = css("--main-font");
+        const fontFamily = ((_a = zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen, chart.canvas).fontFamily) || "Roboto";
         const hasLabel = !!centerText.label;
-        const valueY = hasLabel ? centerY - 14 : centerY;
+        const meta = chart.getDatasetMeta(0);
+        const controllerRadius = meta.controller.innerRadius;
+        const innerRadius = typeof controllerRadius === "number" && controllerRadius > 0 ? controllerRadius : Math.min(width, height) * 0.325;
+        const maxValueFont = parseFloat(css("--pie-center-value-font-size")) || 28;
+        const maxLabelFont = parseFloat(css("--pie-center-label-font-size")) || 14;
+        const valueFontSize = Math.max(10, Math.min(maxValueFont, innerRadius * 0.45));
+        const labelFontSize = Math.max(8, Math.min(maxLabelFont, innerRadius * 0.22));
+        const valueY = hasLabel ? centerY - valueFontSize * 0.5 : centerY;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.font = `${css("--pie-center-value-font-weight")} ${css("--pie-center-value-font-size")} ${fontFamily}`;
+        ctx.font = `${css("--pie-center-value-font-weight")} ${valueFontSize}px ${fontFamily}`;
         ctx.fillStyle = css("--text-primary");
         ctx.fillText(String(centerText.value), centerX, valueY);
         if (hasLabel) {
-            ctx.font = `${css("--pie-center-label-font-weight")} ${css("--pie-center-label-font-size")} ${fontFamily}`;
+            ctx.font = `${css("--pie-center-label-font-weight")} ${labelFontSize}px ${fontFamily}`;
             ctx.fillStyle = css("--text-secondary");
-            ctx.fillText(String(centerText.label), centerX, centerY + 16);
+            ctx.fillText(String(centerText.label), centerX, centerY + labelFontSize * 1.1);
         }
         ctx.restore();
     }

package/esm/chart/pieChart/getPieLegendItems.js

@@ -8,22 +8,18 @@ export const getPieLegendItems = (data, options, isHidden) => {
     const colors = dataset.backgroundColor || [];
     const legendItems = dataset.data.map((item, index) => {
         let value;
-        if (isHidden(index)) {
-            value = undefined;
-        }
-        else if (options === null || options === void 0 ? void 0 : options.getValue) {
-            const customValue = options.getValue(index, dataset.data);
-            if (customValue !== undefined) {
-                const strValue = typeof customValue === "number" ? customValue.toFixed(2) : customValue;
-                value = formatValue(strValue, index, options.unit);
+        if (!isHidden(index)) {
+            if (options === null || options === void 0 ? void 0 : options.getValue) {
+                const customValue = options.getValue(index, dataset.data);
+                if (customValue !== null) {
+                    const strValue = customValue !== undefined ? (typeof customValue === "number" ? customValue.toFixed(2) : customValue) : item.toFixed(2);
+                    value = formatValue(strValue, index, options.unit);
+                }
             }
             else {
-                value = formatValue(item.toFixed(2), index, options.unit);
+                value = formatValue(item.toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);
             }
         }
-        else {
-            value = formatValue(item.toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);
-        }
         const originalLabel = labels[index] && typeof labels[index] === "string" ? labels[index] : "";
         const text = (options === null || options === void 0 ? void 0 : options.getLabel) ? options.getLabel(index, originalLabel) : originalLabel;
         return {

package/esm/chart/pieChart.js

@@ -10,12 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useMemo, useRef } from "react";
+import { useCallback, useContext, useEffect, useId, useMemo } from "react";
 import { Pie } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, PieController, ArcElement } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
 import { deepMerge } from "../commonHelpers/utils";
-import { zen } from "../utils/zen";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
@@ -41,22 +40,25 @@ export const PieChart = (_a) => {
     const { dark } = useContext(themeContext);
     const legendId = useId();
     const tooltipId = useId();
-    const containerRef = useRef(null);
     useEffect(() => {
-        var _a;
-        const el = containerRef.current;
-        const styles = el ? (_a = zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen, el) : undefined;
-        const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
-        const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
         ChartJS.defaults.font = {
-            family: fontFamily,
+            family: "Roboto",
             size: fontSize
         };
-        ChartJS.defaults.color = color;
+        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
     const defOptions = useMemo(() => getDefaultOptions(), []);
     const chartOptions = deepMerge(defOptions, options);
-    const { isHidden, toggleHidden } = useHidden();
+    const { isHidden, toggleHidden: rawToggle } = useHidden();
+    const pieData = data.datasets[0].data;
+    const toggleHidden = useCallback((index) => {
+        if (!isHidden(index)) {
+            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+            if (visibleCount <= 1)
+                return;
+        }
+        rawToggle(index);
+    }, [isHidden, rawToggle, pieData]);
     const chartData = useMemo(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => getDefaultDatasetStyle(ds));
@@ -86,5 +88,5 @@ export const PieChart = (_a) => {
     const chartPlugins = useMemo(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
     const intSummary = useSummary(summary, chartData);
     const legendRight = isHorizontal;
-    return (_jsxs("div", { ref: containerRef, className: classNames(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({}, intSummary)) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), _jsx(AccessibleChart, { type: "pie", data: chartData })] }));
+    return (_jsxs("div", { className: classNames(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({}, intSummary)) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), _jsx(AccessibleChart, { type: "pie", data: chartData })] }));
 };

package/esm/chart/plugins/legend/interfaces.d.ts

@@ -1,6 +1,6 @@
 import { TUnit } from "../../interfaces";
 export interface ILegendOptions {
     unit?: TUnit;
-    getValue?: (datasetIndex: number, data: number[]) => string | number | undefined;
+    getValue?: (datasetIndex: number, data: number[]) => string | number | null | undefined;
     getLabel?: (datasetIndex: number, originalLabel: string) => string;
 }

package/esm/commonHelpers/generateId.d.ts

@@ -1 +1,9 @@
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 export declare function generateId(): string;

package/esm/commonHelpers/generateId.js

@@ -1,3 +1,11 @@
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 export function generateId() {
     return "id" + Math.random().toString().substring(2) + Math.random().toString().substring(2);
 }

package/esm/commonHelpers/hooks/ssrProvider.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+import { DeviceType } from "./deviceType";
+interface ISSRContext {
+    isClientReady: boolean;
+    deviceType?: DeviceType;
+}
+export declare const SSRContext: import("react").Context<ISSRContext | null>;
+export declare const SSRProvider: ({ deviceType, isClientReady, children }: PropsWithChildren<{
+    deviceType?: DeviceType;
+    isClientReady?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const useSSRContext: () => ISSRContext | null;
+export declare const useIsSSRProviderMounted: () => boolean;
+export {};

package/esm/commonHelpers/hooks/ssrProvider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+export const SSRContext = createContext(null);
+export const SSRProvider = ({ deviceType, isClientReady = false, children }) => (_jsx(SSRContext.Provider, { value: { isClientReady, deviceType }, children: children }));
+export const useSSRContext = () => useContext(SSRContext);
+export const useIsSSRProviderMounted = () => useContext(SSRContext) !== null;

package/esm/commonHelpers/hooks/useClientReady.js

@@ -1,7 +1,9 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { isDomEnv } from "../isDomEnv";
+import { SSRContext } from "./ssrProvider";
 export const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = useState(true);
+    const ctx = useContext(SSRContext);
+    const [isClientReady, setIsClientReady] = useState(ctx !== null ? ctx.isClientReady : true);
     useEffect(() => {
         if (isDomEnv()) {
             setIsClientReady(true);