@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/README.md

@@ -47,6 +47,28 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.6.0
+
+Enhanced accessibility, improved component documentation, and new mobile features. Plus several component fixes and server-side rendering support exploration.
+
+Change log:
+
+- Add server-side rendering support exploration for Zenith
+- Create mobile version of new `Filters` component
+- Add defensive checks for Invalid Date objects in `DateRange` component
+- Integrate `Banner` into `Layout`
+- Update `Layout` component background
+- Improve y-axis positioning for `Charts`
+- Center content alignment in `TextIconButton` component
+- Enhanced `Nav` component: optional drag-and-drop, mobile menu state handling, action support
+- Add divider support for groupsFilter and pillExpandable
+- Add link support for mobile primary actions
+- Fix `Alert` component issues
+- Fix `Pill` expandable link issues
+- Fix `Tooltip` content visibility issues
+- Accessibility improvements: table actions, aria-sort, checkbox focus and general accessibility fixes across components
+- Documentation updates: enhanced component examples and usage guidelines for `Dropdown`, `Chart`, `Select`
+
 ### 3.5.0
 
 Accessibility improvements, new DateInput control in FiltersBar, custom chart legend formatting, and new languages support. Plus several performance and stability fixes.

package/dist/absolute/absolute.d.ts

@@ -3,7 +3,7 @@ import "./absolute.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IAlignment } from "../utils/positioningUtils/alignments";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
-export type TTrapFocus = "on" | "off" | "withTrigger";
+export type TTrapFocus = "on" | "off" | "withTrigger" | "none";
 export interface IAbsolute extends IZenComponentProps {
     triggerRef: RefObject<HTMLElement | null>;
     alignment?: TAlignment;
@@ -24,4 +24,4 @@ export interface IAbsolute extends IZenComponentProps {
     recalculateOnScroll?: boolean;
     recalculateTrigger?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "";
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/dist/absolute/absolute.js

@@ -17,11 +17,14 @@ const useArrowKey_1 = require("../commonHelpers/hooks/useArrowKey");
 const themeContext_1 = require("../utils/theme/themeContext");
 const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
+const zen_1 = require("../utils/zen");
 const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    const onScrollHandler = (e) => {
+    const isClientReady = (0, useClientReady_1.useClientReady)();
+    const onScrollHandler = e => {
         var _a;
         prevScroll.current = (_a = e.target) === null || _a === void 0 ? void 0 : _a.scrollTop;
     };
@@ -33,12 +36,13 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     }, [role, ariaLabelledby, ariaLabel]);
     const darkClassName = dark ? "zen-dark" : "";
     const renderPopup = () => {
+        var _a, _b;
         if (isOpen) {
-            const result = (0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children }));
+            const result = ((0, jsx_runtime_1.jsx)("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children })));
             if (inline) {
                 return result;
             }
-            return (0, react_dom_1.createPortal)(result, document.fullscreenElement || document.body);
+            return (0, react_dom_1.createPortal)(result, ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body));
         }
         return "";
     };
@@ -64,12 +68,12 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
         const focusable = [...Array.from(triggerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR))];
         (focusable[0] || triggerRef.current).focus();
     }
-    const condition = (0, react_1.useCallback)(() => useTrapFocusWithTrigger === "off" ? false : true, [useTrapFocusWithTrigger]);
+    const condition = (0, react_1.useCallback)(() => (useTrapFocusWithTrigger === "off" ? false : true), [useTrapFocusWithTrigger]);
     (0, useTrapFocus_1.useTrapFocus)(popupRef, useTrapFocusWithTrigger === "withTrigger" ? triggerRef : undefined, isOpen, condition);
     (0, useEscape_1.useEscape)(popupRef, handleEscape, isOpen);
     (0, useArrowKey_1.useArrowKey)(popupRef, handleEscape, isOpen);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         const closeOnClickOutside = (e) => {
             if (!popupRef.current) {
                 return;
@@ -85,18 +89,22 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             onOpenChange(false);
         };
         if (isOpen) {
-            document.body.addEventListener("click", closeOnClickOutside, true);
-            const firstFocusable = (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.addEventListener("click", closeOnClickOutside, true);
+            const firstFocusable = (_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            if (useTrapFocusWithTrigger === "none") {
+                return undefined;
+            }
             if (useTrapFocusWithTrigger !== "withTrigger") {
                 if (firstFocusable) {
                     firstFocusable.focus();
                 }
                 else {
-                    (_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    (_c = popupRef.current) === null || _c === void 0 ? void 0 : _c.focus();
                 }
             }
             return () => {
-                document.body.removeEventListener("click", closeOnClickOutside, true);
+                var _a;
+                (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("click", closeOnClickOutside, true);
             };
         }
         return () => { };
@@ -119,6 +127,9 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             prevScroll.current = 0;
         }
     }, [children, isOpen, shouldHoldScroll]);
+    if (!isClientReady) {
+        return null;
+    }
     return renderPopup();
 };
 exports.Absolute = Absolute;

package/dist/advancedGroupsFilter/advancedGroupsFilter.js

@@ -92,6 +92,7 @@ const advancedGroupsFilterForm_1 = require("./advancedGroupsFilterForm");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const modal_1 = require("../modal/modal");
+const zen_1 = require("../utils/zen");
 const AdvancedGroupsFilter = ({
   isOpen,
   onClose,
@@ -114,7 +115,8 @@ const AdvancedGroupsFilter = ({
     onClose();
   };
   (0, react_1.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
+    var _a;
+    const timeoutId = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
       if (!dataItemsValue.length) {
         getData().then(data => {
           setDataItemsValue(data);
@@ -123,7 +125,10 @@ const AdvancedGroupsFilter = ({
         });
       }
     });
-    return () => clearTimeout(timeoutId);
+    return () => {
+      var _a;
+      return (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timeoutId);
+    };
   }, [getData, errorHandler, dataItemsValue.length]);
   const handleApply = () => {
     onApply((0, advancedGroupsFilterFormHelper_1.prepareToFilterState)(currentState));

package/dist/alert/alert.js

@@ -4,7 +4,7 @@ exports.Alert = void 0;
 const react_1 = require("react");
 const feedbackContext_1 = require("../feedbackContainer/feedbackContext");
 const useWarning_1 = require("../feedbackProvider/hooks/useWarning");
-const Alert = ({ isOpen, text, header, type, onClose, buttons, id }) => {
+const Alert = ({ isOpen, text, header, type, onClose, buttons, id, className }) => {
     const { addAlert, removeAlert, alertsQueue, alerts, alertsAnimation, removedAlertId, mode, apiAlertActions } = (0, react_1.useContext)(feedbackContext_1.FeedbackContext);
     const generatedId = (0, react_1.useId)();
     const localId = id || generatedId;
@@ -18,7 +18,7 @@ const Alert = ({ isOpen, text, header, type, onClose, buttons, id }) => {
     (0, react_1.useEffect)(() => {
         if (isAPI) {
             if (isOpen && !isInApiAlerts) {
-                addAlert({ header, text, id: localId, type, onClose: () => {
+                addAlert({ className, header, text, id: localId, type, onClose: () => {
                         onClose();
                     }, buttons });
                 return;
@@ -33,7 +33,7 @@ const Alert = ({ isOpen, text, header, type, onClose, buttons, id }) => {
             return;
         }
         if (isOpen && (!isInQueue && !isRendered)) {
-            addAlert({ header, text, id: localId, type, onClose: () => {
+            addAlert({ className, header, text, id: localId, type, onClose: () => {
                     onClose();
                 }, buttons });
             return;
@@ -45,7 +45,7 @@ const Alert = ({ isOpen, text, header, type, onClose, buttons, id }) => {
             removeAlert(localId);
             onClose();
         }
-    }, [localId, isOpen, text, header, type, addAlert, onClose, removeAlert, isInQueue, isRendered, isAnimating, alertIndex, removedAlertId, buttons, isAPI, isInApiAlerts]);
+    }, [localId, isOpen, text, header, type, addAlert, onClose, removeAlert, isInQueue, isRendered, isAnimating, alertIndex, removedAlertId, buttons, isAPI, isInApiAlerts, className]);
     return null;
 };
 exports.Alert = Alert;

package/dist/alert/utils/isAlertTarget.d.ts

@@ -0,0 +1 @@
+export declare const isAlertTarget: (e: Event) => boolean;

package/dist/alert/utils/isAlertTarget.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAlertTarget = void 0;
+const alertRaw_1 = require("../../alertRaw/alertRaw");
+const isAlertTarget = (e) => {
+    if (!e.target) {
+        return false;
+    }
+    const target = e.target;
+    return !!target.closest(`.${alertRaw_1.ALERT_CLASSNAME}`);
+};
+exports.isAlertTarget = isAlertTarget;

package/dist/alertRaw/alertRaw.d.ts

@@ -29,6 +29,7 @@ export interface IAlertRaw extends IZenComponentProps {
     buttons: IFooterButtons;
     ref?: RefObject<HTMLDivElement>;
 }
+export declare const ALERT_CLASSNAME = "zen-alert";
 export declare const AlertRaw: ({ id, type, header, text, buttons, className, onClose, animation, isOpen, ref }: IAlertRaw) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/alertRaw/alertRaw.js

@@ -11,7 +11,7 @@ var __importDefault = this && this.__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRANSLATIONS = exports.AlertRaw = void 0;
+exports.TRANSLATIONS = exports.AlertRaw = exports.ALERT_CLASSNAME = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 injectString("cs", "Close", "Zav\u0159\xEDt");
@@ -61,6 +61,7 @@ const typedIcons = {
   info: iconInfoCircle_1.IconInfoCircle
 };
 const getIcon = t => typedIcons[t];
+exports.ALERT_CLASSNAME = "zen-alert";
 const AlertRaw = ({
   id,
   type,
@@ -81,7 +82,7 @@ const AlertRaw = ({
   const {
     dark
   } = (0, react_1.useContext)(themeContext_1.themeContext);
-  const alertClasses = (0, classNames_1.classNames)(["zen-alert", `zen-alert--${type || "info"}`, isDrive ? "zen-alert--drive" : "", isMobile ? "zen-alert--mobile" : "", dark ? "zen-dark" : "", header ? "zen-alert--with-header" : "", className || ""]);
+  const alertClasses = (0, classNames_1.classNames)([exports.ALERT_CLASSNAME, `${exports.ALERT_CLASSNAME}--${type || "info"}`, isDrive ? `${exports.ALERT_CLASSNAME}--drive` : "", isMobile ? `${exports.ALERT_CLASSNAME}--mobile` : "", dark ? "zen-dark" : "", header ? `${exports.ALERT_CLASSNAME}--with-header` : "", className || ""]);
   const onFooterPrimaryClick = (0, react_1.useCallback)(() => {
     var _a, _b;
     (_b = (_a = buttons.primary).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -99,7 +100,7 @@ const AlertRaw = ({
         icon: buttons.primary.icon,
         onClick: onFooterPrimaryClick,
         link: buttons.primary.link,
-        className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"),
+        className: `${exports.ALERT_CLASSNAME}__button ${exports.ALERT_CLASSNAME}__primary-button ${exports.ALERT_CLASSNAME}__primary-button--${type || "info"}`,
         title: buttons.primary.title,
         type: buttonType_1.ButtonType.Secondary,
         children: buttons.primary.text
@@ -108,7 +109,7 @@ const AlertRaw = ({
     return (0, jsx_runtime_1.jsx)(button_1.Button, {
       onClick: onFooterPrimaryClick,
       link: buttons.primary.link,
-      className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"),
+      className: `${exports.ALERT_CLASSNAME}__button ${exports.ALERT_CLASSNAME}__primary-button ${exports.ALERT_CLASSNAME}__primary-button--${type || "info"}`,
       title: buttons.primary.title,
       type: buttonType_1.ButtonType.Secondary,
       children: buttons.primary.text
@@ -124,7 +125,7 @@ const AlertRaw = ({
         icon: buttons.tertiary.icon,
         title: buttons.tertiary.title,
         type: buttonType_1.ButtonType.Tertiary,
-        className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`,
+        className: `${exports.ALERT_CLASSNAME}__button ${exports.ALERT_CLASSNAME}__tertiary-button ${exports.ALERT_CLASSNAME}__tertiary-button--${type || "info"}`,
         onClick: onFooterTertiaryClick,
         link: buttons.tertiary.link,
         children: buttons.tertiary.text
@@ -133,7 +134,7 @@ const AlertRaw = ({
     return (0, jsx_runtime_1.jsx)(button_1.Button, {
       title: buttons.tertiary.title,
       type: buttonType_1.ButtonType.Tertiary,
-      className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`,
+      className: `${exports.ALERT_CLASSNAME}__button ${exports.ALERT_CLASSNAME}__tertiary-button ${exports.ALERT_CLASSNAME}__tertiary-button--${type || "info"}`,
       onClick: onFooterTertiaryClick,
       link: buttons.tertiary.link,
       children: buttons.tertiary.text
@@ -151,33 +152,33 @@ const AlertRaw = ({
       className: alertClasses,
       id: id,
       children: (0, jsx_runtime_1.jsxs)("div", {
-        className: "zen-alert__body-container",
+        className: `${exports.ALERT_CLASSNAME}__body-container`,
         children: [(0, jsx_runtime_1.jsx)("div", {
-          className: "zen-alert__content",
+          className: `${exports.ALERT_CLASSNAME}__content`,
           children: (0, jsx_runtime_1.jsx)("div", {
-            className: "zen-alert__header-container",
+            className: `${exports.ALERT_CLASSNAME}__header-container`,
             children: (0, jsx_runtime_1.jsxs)("div", {
-              className: "zen-alert__header",
+              className: `${exports.ALERT_CLASSNAME}__header`,
               children: [(0, jsx_runtime_1.jsx)("div", {
-                className: "zen-alert__icon",
+                className: `${exports.ALERT_CLASSNAME}__icon`,
                 children: (0, react_1.createElement)(getIcon(type || "info"), {
                   size: isDrive ? "huge" : "large",
-                  className: `zen-alert__icon--${type || "info"}`
+                  className: `${exports.ALERT_CLASSNAME}__icon--${type || "info"}`
                 })
               }), (0, jsx_runtime_1.jsxs)("div", {
-                className: "zen-alert__body",
+                className: `${exports.ALERT_CLASSNAME}__body`,
                 children: [header && (0, jsx_runtime_1.jsx)("div", {
-                  className: `zen-alert__title zen-alert__title--${type || "info"}`,
+                  className: `${exports.ALERT_CLASSNAME}__title ${exports.ALERT_CLASSNAME}__title--${type || "info"}`,
                   children: header
                 }), (0, jsx_runtime_1.jsx)("div", {
-                  className: "zen-alert__text",
+                  className: `${exports.ALERT_CLASSNAME}__text`,
                   children: text
                 })]
               }), (0, jsx_runtime_1.jsx)("div", {
-                className: "zen-alert__actions",
+                className: `${exports.ALERT_CLASSNAME}__actions`,
                 children: (0, jsx_runtime_1.jsx)("button", {
                   type: "button",
-                  className: (0, classNames_1.classNames)(["zen-alert__close-button", `zen-alert__close-button--${type || "info"}`]),
+                  className: (0, classNames_1.classNames)([`${exports.ALERT_CLASSNAME}__close-button`, `${exports.ALERT_CLASSNAME}__close-button--${type || "info"}`]),
                   onClick: onClose,
                   title: translate("Close"),
                   "aria-label": translate("Close"),
@@ -189,7 +190,7 @@ const AlertRaw = ({
             })
           })
         }), (0, jsx_runtime_1.jsxs)("div", {
-          className: "zen-alert__body-actions",
+          className: `${exports.ALERT_CLASSNAME}__body-actions`,
           children: [tertiaryButton, primaryButton]
         })]
       })

package/dist/banner/banner.d.ts

@@ -2,6 +2,7 @@ import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 import { FC } from "react";
+export declare const BannerDisplayName = "Banner";
 export interface IBannerAction {
     link?: string;
     target?: React.HTMLAttributeAnchorTarget;

package/dist/banner/banner.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Banner = void 0;
+exports.Banner = exports.BannerDisplayName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const bannerSingleLine_1 = require("./bannerSingleLine");
 const bannerMultipLine_1 = require("./bannerMultipLine");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+exports.BannerDisplayName = "Banner";
 const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", primaryAction, className, id }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const isMultiline = multiline === undefined ? isMobile : multiline;
@@ -35,3 +36,4 @@ const Banner = ({ children, header, type = "warning", icon, action, size, onClos
         id });
 };
 exports.Banner = Banner;
+exports.Banner.displayName = exports.BannerDisplayName;

package/dist/button/button.js

@@ -17,24 +17,20 @@ const buttonType_1 = require("./buttonType");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 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"]);
     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",
-            driveClasses || "",
-            modifierClassName,
-            disabledClassName,
-            className !== null && className !== void 0 ? className : ""
-        ]) });
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), { 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 }));
+        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 })));
     }
-    return (0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled, role: role }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children }));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled, role: role }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
 };
 exports.Button = Button;
 exports.Button.displayName = "Button";

package/dist/calendar/calendar.js

@@ -619,6 +619,7 @@ const textIconButton_1 = require("../textIconButton/textIconButton");
 const textIconButton_2 = require("../textIconButton/textIconButton");
 const button_1 = require("../button/button");
 const buttonType_1 = require("../button/buttonType");
+const zen_1 = require("../utils/zen");
 const DEFAULT_START_DAY_OF_WEEK = 0;
 const DEFAULT_YEAR_RANGE = 20;
 exports.monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "Ma", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@@ -650,12 +651,12 @@ const Calendar = ({
   const [hoverDate, setHoverDate] = (0, react_1.useState)(fromDate);
   const [focusDate, setFocusDate] = (0, react_1.useState)(fromDate || new Date().toISOString());
   const changeView = (0, react_1.useCallback)(date => {
-    var _a, _b;
-    focusRef.current = document.activeElement;
+    var _a, _b, _c, _d;
+    focusRef.current = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
     const dateLike = new Date(date);
     dateLike.setDate(15);
-    if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-parallel-selection__select")) {
-      (_b = parallelSelectionTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    if ((_c = (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) === null || _c === void 0 ? void 0 : _c.classList.contains("zen-parallel-selection__select")) {
+      (_d = parallelSelectionTriggerRef.current) === null || _d === void 0 ? void 0 : _d.focus();
     }
     setViewDate(dateLike.toISOString());
   }, [setViewDate]);

package/dist/card/card.js

@@ -94,6 +94,7 @@ const getIconTypeFromStatus_1 = require("./helpers/getIconTypeFromStatus");
 const isFormSection_1 = require("../formSection/utils/isFormSection");
 const cardToggle_1 = require("./components/cardToggle/cardToggle");
 const toggleButton_1 = require("../toggleButton/toggleButton");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const Card =
@@ -133,6 +134,7 @@ props => {
   const isDrive = (0, useDrive_1.useDrive)();
   const dateDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__date");
   const menuTriggerDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__menu-trigger");
+  const menuTriggerMobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-card__menu-trigger");
   const fullWidthValue = fullWidth === undefined ? (0, getDefaultFullWidthValue_1.getDefaultFullWidthValue)(isDrive) : fullWidth;
   const {
     isAutoHeight,
@@ -212,12 +214,12 @@ props => {
     };
   }, [actions, isMobile, maxNumberOfActions]);
   const menuTrigger = (0, jsx_runtime_1.jsx)(button_1.Button, {
-    className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]),
+    className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerMobileClasses || menuTriggerDriveClasses || ""]),
     type: "tertiary-black",
     "aria-label": translate("Actions"),
     htmlType: "button",
     children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
-      size: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large
+      size: isDrive || isMobile ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large
     })
   });
   (0, react_1.useEffect)(() => {

package/dist/card/components/status.js

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

package/dist/chart/barChart/getBarTooltipItems.js

@@ -53,7 +53,7 @@ const getBarTooltipItems = (data, datasetIndex, index, options, isHidden) => {
         const color = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[dataItemIndex] ? dataset.backgroundColor[dataItemIndex] :
             typeof dataset.borderColor === "string" ? dataset.borderColor : "";
         return { label, value, color };
-    }).filter(item => item !== undefined);
+    }).filter((item) => item !== undefined);
 };
 exports.getBarTooltipItems = getBarTooltipItems;
 const getBarTooltipTitle = (data, datasetIndex, index) => {

package/dist/chart/barChart.js

@@ -21,7 +21,6 @@ const utils_1 = require("../commonHelpers/utils");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
-const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartAxis_1 = require("./chartAxis/chartAxis");
@@ -54,8 +53,8 @@ const BarChart = (_a) => {
         };
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
-    const legendId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
-    const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
+    const legendId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
     const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
     const isStacked = (0, react_1.useMemo)(() => { var _a, _b; return ((_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.stacked) === true; }, [options]);
@@ -80,8 +79,10 @@ const BarChart = (_a) => {
                 ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight))
                 : null, summary
                 ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary))
-                : null, xLabels || yLabels.length > 0
-                ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: xLabels, yLabels: yLabels })
-                : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, 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: "bar", data: chartData, options: chartOptions })] });
+                : null, (isDrive ? undefined : xLabels) || yLabels.length > 0
+                ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: "right" })
+                : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels
+                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels })
+                : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] });
 };
 exports.BarChart = BarChart;

package/dist/chart/chartAxis/chartAxis.d.ts

@@ -2,5 +2,6 @@ import "./chartAxis.less";
 export interface IChartAxis {
     xLabel?: string | undefined;
     yLabels?: string[];
+    yAxisPosition?: "left" | "right";
 }
-export declare const ChartAxis: ({ xLabel, yLabels }: IChartAxis) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartAxis: ({ xLabel, yLabels, yAxisPosition }: IChartAxis) => import("react/jsx-runtime").JSX.Element;

package/dist/chart/chartAxis/chartAxis.js

@@ -10,6 +10,7 @@ exports.ChartAxis = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useDrive_1 = require("../../utils/theme/useDrive");
 injectString("cs", "Y-axis", "Osa\xA0Y");
 injectString("da-DK", "Y-axis", "Y-akse");
 injectString("de", "Y-axis", "Y-Achse");
@@ -64,16 +65,18 @@ injectString("zh-TW", "X-axis", "X \u8EF8");
 injectString("ro-RO", "X-axis", "Axa X");
 const ChartAxis = ({
   xLabel,
-  yLabels
+  yLabels,
+  yAxisPosition = "left"
 }) => {
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
   return (0, jsx_runtime_1.jsxs)("div", {
-    className: "zen-chart-axis",
+    className: (0, classNames_1.classNames)(["zen-chart-axis", isDrive ? "zen-chart-axis--drive" : "", yAxisPosition === "right" ? "zen-chart-axis--y-right" : ""]),
     children: [(yLabels || []).map((label, index) => (0, jsx_runtime_1.jsxs)("div", {
       className: (0, classNames_1.classNames)(["zen-chart-axis__item", (yLabels || []).length > 1 && index === 0 ? "zen-chart-axis__item--wide" : ""]),
-      children: [(0, jsx_runtime_1.jsx)("span", {
+      children: [!isDrive && (0, jsx_runtime_1.jsx)("span", {
         className: "zen-chart-axis__label",
         children: translate("Y-axis")
       }), (0, jsx_runtime_1.jsx)("span", {
@@ -81,8 +84,8 @@ const ChartAxis = ({
         children: label
       })]
     }, label)), xLabel ? (0, jsx_runtime_1.jsxs)("div", {
-      className: "zen-chart-axis__item",
-      children: [(0, jsx_runtime_1.jsx)("span", {
+      className: "zen-chart-axis__item zen-chart-axis__item--x",
+      children: [!isDrive && (0, jsx_runtime_1.jsx)("span", {
         className: "zen-chart-axis__label",
         children: translate("X-axis")
       }), (0, jsx_runtime_1.jsx)("span", {

package/dist/chart/lineChart/useChartTicks.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChartTicks = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 const useChartTicks = () => {
     const chartRef = (0, react_1.useRef)(null);
     const [chartWidth, setChartWidth] = (0, react_1.useState)(718);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!chartRef.current) {
             return () => { };
         }
@@ -20,9 +22,10 @@ const useChartTicks = () => {
         const handleResize = () => {
             applyWidth();
         };
-        window.addEventListener("resize", handleResize);
+        (_a = zen_1.zen.addEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", handleResize);
         return () => {
-            window.removeEventListener("resize", handleResize);
+            var _a;
+            (_a = zen_1.zen.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, "resize", handleResize);
         };
     }, []);
     const ticks = (0, react_1.useMemo)(() => {

package/dist/chart/lineChart.js

@@ -22,7 +22,6 @@ const getDefaultDatasetStyle_1 = require("./lineChart/getDefaultDatasetStyle");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
-const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartAxis_1 = require("./chartAxis/chartAxis");
@@ -56,8 +55,8 @@ const LineChart = (_a) => {
         };
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
-    const legendId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
-    const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
+    const legendId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
     const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, true), [data]);
@@ -90,8 +89,10 @@ const LineChart = (_a) => {
                 ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight))
                 : null, summary !== false
                 ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden }))
-                : null, xLabels || yLabels.length > 0
-                ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: xLabels, yLabels: yLabels })
-                : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] });
+                : null, (isDrive ? undefined : xLabels) || yLabels.length > 0
+                ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels })
+                : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels
+                ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels })
+                : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] });
 };
 exports.LineChart = LineChart;