@geotab/zenith 3.8.0 → 3.9.0-beta.1

package/README.md

@@ -56,20 +56,19 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 3.8.0
 
-- Create FileUpload component
-- Improve Accordion component Storybook documentation
-- Improve Divider component Storybook documentation
-- Improve accessibility for DataGrid sorting
-- Create Chip component documentation
-- Update sort controls in mobile Table
-- Improve accessibility for Radio button
-- Improve accessibility for SummaryTiles
-- Accessibility updates for Dropdown, MobileSheet, ControlledPopup
-- Add Prettier CI job to Zenith pipeline
-- SummaryTile refactor, documentation updates
+- Create `FileUpload` component
+- Improve `Accordion` component Storybook documentation
+- Improve `Divider` component Storybook documentation
+- Improve accessibility for `DataGrid` sorting
+- Create `Chip` component documentation
+- Update sort controls in mobile `Table`
+- Improve accessibility for `Radio` button
+- Improve accessibility for `SummaryTile`
+- Accessibility updates for `Dropdown`, `MobileSheet`, `ControlledPopup`
+- `SummaryTile` refactor, documentation updates
 - Updated translations
 - Add multiline table header support (word wrap for long strings)
-- SidePanel outside click improvements
+- `SidePanel` outside click improvements
 
 ### 3.7.0
 

package/dist/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/dist/button/button.js

@@ -19,14 +19,14 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const filterGridProps_1 = require("../gridLayout/utils/filterGridProps");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 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_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-button");
-    const commonArgs = Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), { className: (0, classNames_1.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: (0, classNames_1.classNames)(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
     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, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
     }

package/dist/calendar/calendar.js

@@ -197,6 +197,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");
@@ -702,6 +891,7 @@ const Calendar = ({
     5: translate("ShortFriday"),
     6: translate("ShortSaturday")
   }), [translate]);
+  const fullDayLabels = (0, react_1.useMemo)(() => [translate("Sunday"), translate("Monday"), translate("Tuesday"), translate("Wednesday"), translate("Thursday"), translate("Friday"), translate("Saturday")], [translate]);
   const getDayOfWeek = (0, react_1.useCallback)(date => {
     const dayOfWeek = new Date(date).getDay();
     return dayLabels[dayOfWeek];
@@ -975,9 +1165,16 @@ const Calendar = ({
       children: [(0, jsx_runtime_1.jsx)("thead", {
         children: (0, jsx_runtime_1.jsx)("tr", {
           className: "zen-calendar__columns",
-          children: dates[0].map(date => (0, jsx_runtime_1.jsx)("th", {
+          children: dates[0].map(date => (0, jsx_runtime_1.jsxs)("th", {
+            scope: "col",
             className: "zen-calendar__column",
-            children: getDayOfWeek(date)
+            children: [(0, jsx_runtime_1.jsx)("span", {
+              "aria-hidden": "true",
+              children: getDayOfWeek(date)
+            }), (0, jsx_runtime_1.jsx)("span", {
+              className: "zen-visually-hidden",
+              children: fullDayLabels[new Date(date).getDay()]
+            })]
           }, `cal-h-${date}`))
         })
       }), (0, jsx_runtime_1.jsx)("tbody", {
@@ -1032,4 +1229,4 @@ const Calendar = ({
   });
 };
 exports.Calendar = Calendar;
-exports.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"];
+exports.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/dist/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/dist/card/card.js

@@ -71,7 +71,7 @@ const cardContainer_1 = require("../cardContainer/cardContainer");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const status_1 = require("./components/status");
-const title_1 = require("./components/title");
+const title_1 = require("../title/title");
 const actions_1 = require("./components/actions");
 const content_1 = require("./components/content");
 const useCardSize_1 = require("./hooks/useCardSize");

package/dist/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/dist/card/components/cardButton/cardButton.js

@@ -11,12 +11,14 @@ const iconChevronTopSmall_1 = require("../../../icons/iconChevronTopSmall");
 const menu_1 = require("../../../menu/menu");
 const useDriveClassName_1 = require("../../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../../utils/theme/useDrive");
-const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget }) => {
+const toKebabCase_1 = require("../../../utils/toKebabCase");
+const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const content = [];
     const cardButtonDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card-button");
     const isDrive = (0, useDrive_1.useDrive)();
+    const analyticsId = dataAnalyticsId || (0, toKebabCase_1.toKebabCase)(name);
     react_1.Children.forEach(children, (el) => {
         if (el.type === menu_1.Menu.Item) {
             content.push(el);
@@ -30,9 +32,9 @@ const CardButton = ({ children, disabled = false, icon, name, onClick, link, cla
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(...args);
     };
-    const renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, 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 renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, dataAnalyticsId: analyticsId, 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, { 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 &&
+        const trigger = ((0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, dataAnalyticsId: analyticsId, 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);
     };

package/dist/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/dist/chart/barChart/getBarLegendItems.js

@@ -19,16 +19,14 @@ 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 = (0, formatValue_1.formatValue)(strValue, index, options.unit);
             }
         }
         else if (options === null || options === void 0 ? void 0 : options.unit) {
-            const sum = getDatasetSum(dataset);
-            value = (0, formatValue_1.formatValue)(sum.toFixed(2), index, options.unit);
+            value = (0, formatValue_1.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/dist/chart/lineChart/getLineLegendItems.js

@@ -38,15 +38,15 @@ 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 = (0, formatValue_1.formatValue)(strValue, index, options.unit);
             }
-            else {
-                value = (0, formatValue_1.formatValue)(getLatestValue(dataset).toFixed(2), index, options.unit);
-            }
         }
         else {
             value = (0, formatValue_1.formatValue)(getLatestValue(dataset).toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);

package/dist/chart/pieChart/centerTextPlugin.js

@@ -6,6 +6,7 @@ const getCssVar = (el, name) => { var _a, _b; return (_b = (_a = zen_1.zen.getCo
 const centerTextPlugin = (centerText) => ({
     id: "zenithPieCenterText",
     afterDraw(chart) {
+        var _a;
         if (!centerText || centerText.value === undefined) {
             return;
         }
@@ -14,18 +15,25 @@ 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_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.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/dist/chart/pieChart/getPieLegendItems.js

@@ -11,22 +11,18 @@ 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 = (0, formatValue_1.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 = (0, formatValue_1.formatValue)(strValue, index, options.unit);
+                }
             }
             else {
-                value = (0, formatValue_1.formatValue)(item.toFixed(2), index, options.unit);
+                value = (0, formatValue_1.formatValue)(item.toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit);
             }
         }
-        else {
-            value = (0, formatValue_1.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/dist/chart/pieChart.js

@@ -18,7 +18,6 @@ const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
 const utils_1 = require("../commonHelpers/utils");
-const zen_1 = require("../utils/zen");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
@@ -44,22 +43,25 @@ const PieChart = (_a) => {
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const legendId = (0, react_1.useId)();
     const tooltipId = (0, react_1.useId)();
-    const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const el = containerRef.current;
-        const styles = el ? (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.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()) || "";
         auto_1.Chart.defaults.font = {
-            family: fontFamily,
+            family: "Roboto",
             size: fontSize
         };
-        auto_1.Chart.defaults.color = color;
+        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
-    const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
+    const { isHidden, toggleHidden: rawToggle } = (0, useHidden_1.useHidden)();
+    const pieData = data.datasets[0].data;
+    const toggleHidden = (0, react_1.useCallback)((index) => {
+        if (!isHidden(index)) {
+            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+            if (visibleCount <= 1)
+                return;
+        }
+        rawToggle(index);
+    }, [isHidden, rawToggle, pieData]);
     const chartData = (0, react_1.useMemo)(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds));
@@ -89,6 +91,6 @@ const PieChart = (_a) => {
     const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const legendRight = isHorizontal;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
 };
 exports.PieChart = PieChart;

package/dist/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/dist/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/dist/commonHelpers/generateId.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateId = void 0;
+/**
+ * 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.
+ */
 function generateId() {
     return "id" + Math.random().toString().substring(2) + Math.random().toString().substring(2);
 }

package/dist/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/dist/commonHelpers/hooks/ssrProvider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSSRProviderMounted = exports.useSSRContext = exports.SSRProvider = exports.SSRContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SSRContext = (0, react_1.createContext)(null);
+const SSRProvider = ({ deviceType, isClientReady = false, children }) => ((0, jsx_runtime_1.jsx)(exports.SSRContext.Provider, { value: { isClientReady, deviceType }, children: children }));
+exports.SSRProvider = SSRProvider;
+const useSSRContext = () => (0, react_1.useContext)(exports.SSRContext);
+exports.useSSRContext = useSSRContext;
+const useIsSSRProviderMounted = () => (0, react_1.useContext)(exports.SSRContext) !== null;
+exports.useIsSSRProviderMounted = useIsSSRProviderMounted;

package/dist/commonHelpers/hooks/useClientReady.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClientReady = void 0;
 const react_1 = require("react");
 const isDomEnv_1 = require("../isDomEnv");
+const ssrProvider_1 = require("./ssrProvider");
 const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = (0, react_1.useState)(true);
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const [isClientReady, setIsClientReady] = (0, react_1.useState)(ctx !== null ? ctx.isClientReady : true);
     (0, react_1.useEffect)(() => {
         if ((0, isDomEnv_1.isDomEnv)()) {
             setIsClientReady(true);