@geotab/zenith 3.8.0 → 3.9.0-beta.ssr.0

package/README.md

@@ -56,20 +56,20 @@ 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
+- Add Horizontal Layout for pie `Chart` component
 
 ### 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/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/components/title.js

@@ -14,9 +14,13 @@ const Title = ({ isMobile, link, target, title, id, icon, iconType, className =
     const iconSize = (0, react_1.useMemo)(() => (isDrive ? "huge" : "large"), [isDrive]);
     const iconElement = (0, react_1.useMemo)(() => (icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
     const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [iconSize]);
-    const roleProp = onClick ? "button" : undefined;
-    const tabIndexProp = onClick ? 0 : undefined;
     const titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: titleClasses, role: roleProp, onClick: onClick, tabIndex: tabIndexProp, children: [iconElement, link && !onClick ? ((0, jsx_runtime_1.jsx)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, target: target, children: (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: [title, chevron] }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: [title, onClick ? chevron : null] }) }))] }));
+    if (onClick) {
+        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: titleClasses, onClick: onClick, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: [title, chevron] })] }));
+    }
+    if (link) {
+        return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: titleClasses, href: link, target: target, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: [title, chevron] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: titleClasses, children: [iconElement, (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: title })] }));
 };
 exports.Title = Title;

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/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/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/dateInputInner/dateInputInnerControlBlock.js

@@ -87,23 +87,28 @@ const DateInputInnerControlBlock = props => {
     assistiveText,
     ref
   } = props;
+  const generatedId = (0, react_1.useId)();
+  const fieldId = id || generatedId;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveAssistiveClass = (0, useDriveClassName_1.useDriveClassName)("zen-form-field__text");
   const isHasDateError = requireSelection && !dateText;
   const isHasTimeError = requireSelection && !timePickerValue;
+  const dateErrorId = `${fieldId}-date-error`;
+  const timeErrorId = `${fieldId}-time-error`;
   const memoizedDateInput = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, {
     className: (0, classNames_1.classNames)(["zen-date-input-inner__text-input", isActiveField ? "zen-date-input-inner__text-input--active" : ""]),
-    id: id,
+    id: fieldId,
     value: dateText,
     onChange: handleSetDateText,
     onBlur: onBlurDateChangeHandler,
     placeholder: placeholder,
     autocomplete: "off",
     isError: isHasDateError,
+    ariaDescribedby: isHasDateError ? dateErrorId : undefined,
     ref: ref
-  }), [dateText, handleSetDateText, id, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref]);
+  }), [dateText, handleSetDateText, fieldId, isActiveField, isHasDateError, onBlurDateChangeHandler, placeholder, ref, dateErrorId]);
   const memoizedTimeSelect = (0, react_1.useMemo)(() => selectTime ? (0, jsx_runtime_1.jsxs)("div", {
     className: "zen-date-input-inner__inputs-block-item",
     children: [(0, jsx_runtime_1.jsx)(timePicker_1.TimePicker, {
@@ -111,18 +116,16 @@ const DateInputInnerControlBlock = props => {
       value: timePickerValue,
       onChange: timeChangeHandler,
       isMobileView: isMobileView,
-      fullWidth: true,
-      // eslint-disable-next-line
-      // @ts-ignore
-      dataTimeId: id
+      fullWidth: true
     }), isHasTimeError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+      id: timeErrorId,
       error: translate("The time must be set")
     }) : null]
-  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, id]);
+  }) : null, [isActiveField, isHasTimeError, isMobileView, selectTime, timeChangeHandler, timePickerValue, translate, timeErrorId]);
   return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-date-input-inner__control-block", className || ""]),
     children: [title ? (0, jsx_runtime_1.jsx)("label", {
-      htmlFor: id,
+      htmlFor: fieldId,
       className: "zen-date-input-inner__label",
       children: title
     }) : null, (0, jsx_runtime_1.jsxs)("div", {
@@ -130,6 +133,7 @@ const DateInputInnerControlBlock = props => {
       children: [(0, jsx_runtime_1.jsxs)("div", {
         className: "zen-date-input-inner__inputs-block-item",
         children: [memoizedDateInput, isHasDateError ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+          id: dateErrorId,
           error: translate("The date must be set")
         }) : null]
       }), memoizedTimeSelect]

package/dist/dialog/dialog.js

@@ -10,7 +10,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useBodyScroll_1 = require("../utils/useBodyScroll");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const react_dom_1 = require("react-dom");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 /**
  * @deprecated - use Modal instead
  */
@@ -45,10 +45,11 @@ const Dialog = ({ isOpen, children, isElementVisible }) => {
     const labeledId = (0, react_1.useId)();
     const darkClass = dark ? "zen-dark" : "";
     const createDialog = id => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-dialog", darkClass]), "aria-modal": "true", role: "dialog", "aria-labelledby": labeledId, style: { top: `${zen_1.zen.pageYOffset || 0}px` }, children: [(0, jsx_runtime_1.jsx)(dialogContent_1.DialogContent, Object.assign({}, children.props, { labeledId: id, isElementVisible: isElementVisible })), (0, jsx_runtime_1.jsx)("div", { className: "zen-dialog__shield" })] }));
+    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+    const portal = (0, usePortal_1.usePortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot, "ModalPortal");
     if (!isClientReady) {
         return null;
     }
-    const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
-    return (0, react_dom_1.createPortal)(isOpen && (0, react_1.isValidElement)(children) ? createDialog(labeledId) : null, modalRoot);
+    return portal;
 };
 exports.Dialog = Dialog;

package/dist/fileUpload/fileUpload.js

@@ -212,28 +212,37 @@ const FileUpload = ({
   const pendingFocusIndexRef = (0, react_1.useRef)(null);
   const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-file-upload");
   const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-file-upload", `zen-file-upload--${size}`, isMobile ? "zen-file-upload--mobile" : "", driveClasses || "", disabled ? "zen-file-upload--disabled" : "", className !== null && className !== void 0 ? className : ""]), [size, isMobile, driveClasses, disabled, className]);
-  const hasReachedLimit = !allowMultiple && value.length > 0;
-  const isUploadDisabled = disabled || hasReachedLimit;
+  const isUploadDisabled = disabled;
   const isInteractionDisabled = isUploadDisabled || isUploading;
   const dropZoneClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-file-upload__drop-zone", `zen-file-upload__drop-zone--${size}`, isMobile ? "zen-file-upload__drop-zone--mobile" : "", isDragOver ? "zen-file-upload__drop-zone--drag-over" : "", isInteractionDisabled ? "zen-file-upload__drop-zone--disabled" : ""]), [size, isMobile, isDragOver, isInteractionDisabled]);
   const handleFilesAdded = (0, react_1.useCallback)(fileList => {
     if (!onChange) {
       return;
     }
-    const newFiles = createUploadedFiles(fileList);
-    const merged = [...value, ...newFiles];
+    let newFiles = createUploadedFiles(fileList);
+    let addedFiles = fileList;
+    // when allowMultiple is false, only take first file
+    if (!allowMultiple && newFiles.length > 1) {
+      newFiles = [newFiles[0]];
+      const firstFile = fileList[0];
+      const singleFileArray = [firstFile];
+      addedFiles = Object.assign(singleFileArray, {
+        item: index => singleFileArray[index] || null
+      });
+    }
+    const merged = allowMultiple ? [...value, ...newFiles] : newFiles;
     onChange(merged, {
       action: "add",
-      addedFiles: fileList
+      addedFiles
     });
-  }, [onChange, value]);
+  }, [onChange, value, allowMultiple]);
   const handleDragOver = (0, react_1.useCallback)(e => {
     e.preventDefault();
     e.stopPropagation();
-    if (!disabled && !isUploading && !hasReachedLimit) {
+    if (!disabled && !isUploading) {
       setIsDragOver(true);
     }
-  }, [disabled, isUploading, hasReachedLimit]);
+  }, [disabled, isUploading]);
   const handleDragLeave = (0, react_1.useCallback)(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -243,7 +252,7 @@ const FileUpload = ({
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
-    if (!disabled && !isUploading && !hasReachedLimit && onChange && e.dataTransfer.files.length > 0) {
+    if (!disabled && !isUploading && onChange && e.dataTransfer.files.length > 0) {
       // DataTransfer.files becomes inaccessible after event, so preserve it
       const filesArray = Array.from(e.dataTransfer.files);
       // Create a simple FileList-like object
@@ -252,12 +261,12 @@ const FileUpload = ({
       });
       handleFilesAdded(fileList);
     }
-  }, [disabled, isUploading, hasReachedLimit, onChange, handleFilesAdded]);
+  }, [disabled, isUploading, onChange, handleFilesAdded]);
   const handleBrowseClick = (0, react_1.useCallback)(() => {
-    if (!disabled && !isUploading && !hasReachedLimit && fileInputRef.current) {
+    if (!disabled && !isUploading && fileInputRef.current) {
       fileInputRef.current.click();
     }
-  }, [disabled, isUploading, hasReachedLimit]);
+  }, [disabled, isUploading]);
   const handleFileInputChange = (0, react_1.useCallback)(e => {
     if (e.target.files && e.target.files.length > 0 && onChange) {
       handleFilesAdded(e.target.files);