@geotab/zenith 3.9.1 → 3.9.2-nightly.20260529.308557e

package/README.md

@@ -47,6 +47,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.9.2
+
+- Fix `ControlledPopup` max-height
+
 ### 3.9.1
 
 - Fix `GroupsButton` styles

package/dist/absolute/absolute.d.ts

@@ -22,8 +22,14 @@ export interface IAbsolute extends IZenComponentProps {
     ariaLabelledby?: string;
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
+    /**
+     * When true, closes the popup on scroll instead of repositioning it.
+     * Mutually exclusive with `recalculateOnScroll` — setting both causes a
+     * wasted position recalculation before the popup closes.
+     */
+    closeOnScroll?: boolean;
     recalculateTrigger?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/dist/absolute/absolute.js

@@ -19,7 +19,7 @@ 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, focusOnOpen = true }) => {
+const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -47,14 +47,18 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
         return "";
     };
     const parent = (0, react_1.useMemo)(() => {
-        if (!isOpen || !recalculateOnScroll) {
+        if (!isOpen || (!recalculateOnScroll && !closeOnScroll)) {
             return null;
         }
         return (0, getScrollableParent_1.getScrollableParent)(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
+    }, [triggerRef, isOpen, recalculateOnScroll, closeOnScroll]);
     const calculatePosition = (0, react_1.useCallback)(() => (0, calculatePosition_1.calculatePosition)(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
+    const handleCloseOnScroll = (0, react_1.useCallback)(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
     (0, useResize_1.useResize)(calculatePosition, isOpen);
-    (0, useScroll_1.useScroll)(calculatePosition, isOpen, parent);
+    (0, useScroll_1.useScroll)(calculatePosition, isOpen && !!recalculateOnScroll, parent);
+    (0, useScroll_1.useScroll)(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
     (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);

package/dist/alertRaw/alertRaw.js

@@ -19,10 +19,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -33,13 +33,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const alertAnimation_1 = __importDefault(require("./components/alertAnimation"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");

package/dist/alertRaw/components/alertAnimation.js

@@ -35,7 +35,7 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
             return;
         }
         if (animation === "left-right") {
-            ref.current.animate([{ left: "0%" }, { left: "120%" }], {
+            ref.current.animate([{ insetInlineStart: "0%" }, { insetInlineStart: "120%" }], {
                 duration: 300,
                 iterations: 1,
                 delay: 0,
@@ -46,7 +46,7 @@ const AlertAnimation = ({ id, children, isOpen, animation }) => {
             };
             return;
         }
-        ref.current.animate([{ left: "120%" }, { left: "0%" }], {
+        ref.current.animate([{ insetInlineStart: "120%" }, { insetInlineStart: "0%" }], {
             duration: 300,
             iterations: 1,
             delay: 0,

package/dist/banner/bannerMultipLine.js

@@ -19,10 +19,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -33,13 +33,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const bannerUtils_1 = require("./bannerUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");

package/dist/banner/bannerSingleLine.js

@@ -19,10 +19,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -33,13 +33,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 const button_1 = require("../button/button");
 const buttonType_1 = require("../button/buttonType");

package/dist/betaPill/betaPill.d.ts

@@ -6,10 +6,26 @@ export interface IBetaPillActions {
     link?: string;
     linkOptions?: ILinkOptions;
 }
-export interface IBetaPill {
+/**
+ * @internal - temporary escape hatch
+ * @deprecated
+ */
+export interface IBetaPillBaseInternal {
+    name?: string;
+    description?: string;
+}
+interface IBetaPillBase {
     className?: string;
+}
+interface IBetaPillWithActions extends IBetaPillBase {
     feedbackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
 }
-export declare const BetaPill: ({ className, feedbackAction, betaOptionAction }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
+interface IBetaPillWithoutActions extends IBetaPillBase {
+    feedbackAction?: never;
+    betaOptionAction?: never;
+}
+export type IBetaPill = IBetaPillWithActions | IBetaPillWithoutActions;
+export declare const BetaPill: (props: IBetaPill) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
+export {};

package/dist/betaPill/betaPill.js

@@ -124,11 +124,14 @@ injectString("zh-Hans", "Beta", "\u6D4B\u8BD5\u7248");
 injectString("zh-TW", "Beta", "\u6E2C\u8A66\u7248");
 injectString("ro-RO", "Beta", "Beta");
 injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
-const BetaPill = ({
-  className,
-  feedbackAction,
-  betaOptionAction
-}) => {
+const BetaPill = props => {
+  const {
+    className,
+    feedbackAction,
+    betaOptionAction,
+    name,
+    description
+  } = props;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
@@ -147,8 +150,8 @@ const BetaPill = ({
     return (0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, {
       isBeta: true,
       icon: iconLab_1.IconLab,
-      description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
-      text: translate("Beta"),
+      description: description !== null && description !== void 0 ? description : translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
+      text: name !== null && name !== void 0 ? name : translate("Beta"),
       type: "info",
       className: pillClasses,
       mainAction: resolvedMainAction,
@@ -161,7 +164,7 @@ const BetaPill = ({
     type: "info",
     children: !isMobile && (0, jsx_runtime_1.jsx)("span", {
       className: "zen-caption__content",
-      children: translate("Beta")
+      children: name !== null && name !== void 0 ? name : translate("Beta")
     })
   });
 };

package/dist/bookmark/bookmark.d.ts

@@ -3,6 +3,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IBookmark extends IZenComponentProps {
     bookmarked: boolean;
     onChange: (bookmarkState: boolean) => void;
+    dataAnalyticsId?: string;
 }
-export declare const Bookmark: ({ className, bookmarked, onChange }: IBookmark) => import("react/jsx-runtime").JSX.Element;
+export declare const Bookmark: ({ className, bookmarked, onChange, dataAnalyticsId }: IBookmark) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/bookmark/bookmark.js

@@ -75,7 +75,8 @@ const iconBookmarkSelectedHover_1 = require("../icons/iconBookmarkSelectedHover"
 const Bookmark = ({
   className,
   bookmarked,
-  onChange
+  onChange,
+  dataAnalyticsId
 }) => {
   const [isHovered, setIsHovered] = (0, react_1.useState)(false);
   const {
@@ -108,7 +109,8 @@ const Bookmark = ({
       iconSize: isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large",
       iconClasses: `zen-page-bookmark__icon zen-page-bookmark__icon${bookmarked ? "--active" : "--inactive"}`,
       "aria-label": title,
-      title: title
+      title: title,
+      dataAnalyticsId: dataAnalyticsId
     })
   });
 };

package/dist/calendar/calendar.js

@@ -823,6 +823,7 @@ const dateUtils_1 = require("./dateUtils");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
 const iconChevronLeftSmall_1 = require("../icons/iconChevronLeftSmall");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const parallelSelection_1 = require("../parallelSelection/parallelSelection");
 const calendarUtils_1 = require("./calendarUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");
@@ -853,6 +854,8 @@ const Calendar = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const PrevMonthIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeftSmall_1.IconChevronLeftSmall, iconChevronRightSmall_1.IconChevronRightSmall);
+  const NextMonthIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRightSmall_1.IconChevronRightSmall, iconChevronLeftSmall_1.IconChevronLeftSmall);
   const fromDate = (0, react_1.useMemo)(() => value.from ? (0, dateUtils_1.toDayStart)(value.from) : undefined, [value.from]);
   const toDate = (0, react_1.useMemo)(() => value.to ? (0, dateUtils_1.toDayStart)(value.to) : undefined, [value.to]);
   const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-calendar");
@@ -1106,7 +1109,7 @@ const Calendar = ({
       children: [isMobileView ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
         className: "zen-calendar__btn",
         type: "tertiary-black",
-        icon: iconChevronLeftSmall_1.IconChevronLeftSmall,
+        icon: PrevMonthIcon,
         title: translate("Previous month"),
         onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)),
         iconPosition: textIconButton_2.ButtonIconPosition.Start
@@ -1140,14 +1143,14 @@ const Calendar = ({
         children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
           className: "zen-calendar__btn",
           type: "tertiary-black",
-          icon: iconChevronLeftSmall_1.IconChevronLeftSmall,
+          icon: PrevMonthIcon,
           title: translate("Previous month"),
           onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)),
           iconPosition: textIconButton_2.ButtonIconPosition.Start
         }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
           className: "zen-calendar__btn",
           type: "tertiary-black",
-          icon: iconChevronRightSmall_1.IconChevronRightSmall,
+          icon: NextMonthIcon,
           title: translate("Next month"),
           onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)),
           iconPosition: textIconButton_2.ButtonIconPosition.Start
@@ -1155,7 +1158,7 @@ const Calendar = ({
       }) : null, isMobileView ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
         className: "zen-calendar__btn",
         type: "tertiary-black",
-        icon: iconChevronRightSmall_1.IconChevronRightSmall,
+        icon: NextMonthIcon,
         title: translate("Next month"),
         onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)),
         iconPosition: textIconButton_2.ButtonIconPosition.Start

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 { THeadingTag, TIconType } from "./components/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";
@@ -42,6 +42,7 @@ export interface ICard extends IZenComponentProps, IZenGridItem, IZenFormLayoutI
     scrollableContent?: boolean;
     autoHeight?: boolean;
     fullHeight?: boolean;
+    titleAs?: THeadingTag;
 }
 export declare const Card: FC<ICard> & {
     Actions: FC<IActions>;

package/dist/card/card.js

@@ -121,7 +121,8 @@ props => {
     fullWidth,
     scrollableContent = true,
     autoHeight = false,
-    fullHeight = false
+    fullHeight = false,
+    titleAs
   } = props;
   const {
     translate
@@ -281,7 +282,8 @@ props => {
           isMobile: isMobile,
           title: title,
           icon: titleIcon,
-          iconType: titleIconType
+          iconType: titleIconType,
+          titleAs: titleAs
         }), (0, jsx_runtime_1.jsxs)("div", {
           className: "zen-card__header-right",
           children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", {

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

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

package/dist/card/components/cardButton/cardButton.js

@@ -12,7 +12,7 @@ const menu_1 = require("../../../menu/menu");
 const useDriveClassName_1 = require("../../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../../utils/theme/useDrive");
 const toKebabCase_1 = require("../../../utils/toKebabCase");
-const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId }) => {
+const CardButton = ({ children, disabled = false, icon, name, onClick, link, className, target: linkTarget, dataAnalyticsId, ariaLabel }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const content = [];
@@ -32,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, 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 renderLink = () => ((0, jsx_runtime_1.jsxs)(button_1.Button, { disabled: disabled, type: "tertiary", link: link, target: linkTarget, title: name, ariaLabel: ariaLabel, 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, 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 &&
+        const trigger = ((0, jsx_runtime_1.jsxs)(button_1.Button, { htmlType: "button", ref: triggerRef, disabled: disabled, type: "tertiary", onClick: onButtonClickHandler, title: name, ariaLabel: ariaLabel, 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.d.ts

@@ -2,6 +2,7 @@ import { FunctionComponent } from "react";
 import "./title.less";
 import { IIcon } from "../../icons/icon";
 export type TIconType = "info" | "warning" | "error" | "success" | "default";
+export type THeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 interface ITitle {
     isMobile: boolean;
     title: string;
@@ -12,6 +13,7 @@ interface ITitle {
     icon?: FunctionComponent<IIcon>;
     iconType?: TIconType;
     onClick?: () => void;
+    titleAs?: THeadingTag;
 }
-export declare const Title: ({ isMobile, link, target, title, id, icon, iconType, className, onClick }: ITitle) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: ({ isMobile, link, target, title, id, icon, iconType, className, onClick, titleAs }: ITitle) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/card/components/title.js

@@ -7,13 +7,17 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const iconChevronRightSmall_1 = require("../../icons/iconChevronRightSmall");
-const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
+const iconChevronLeftSmall_1 = require("../../icons/iconChevronLeftSmall");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
+const VALID_HEADING_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick, titleAs }) => {
     const driveClassNames = (0, useDriveClassName_1.useDriveClassName)("zen-card-title");
     const isDrive = (0, useDrive_1.useDrive)();
     const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
     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 iconElement = (0, react_1.useMemo)(() => (icon ? (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRightSmall_1.IconChevronRightSmall, iconChevronLeftSmall_1.IconChevronLeftSmall);
+    const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(ChevronIcon, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [ChevronIcon, iconSize]);
     const titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
     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] })] }));
@@ -21,6 +25,7 @@ const Title = ({ isMobile, link, target, title, id, icon, iconType, className =
     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 })] }));
+    const tag = titleAs && VALID_HEADING_TAGS.has(titleAs) ? titleAs : "div";
+    return (0, react_1.createElement)(tag, { className: titleClasses }, 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 }, "text"));
 };
 exports.Title = Title;

package/dist/card/components/titleLink.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
 const iconArrowRight_1 = require("../../icons/iconArrowRight");
+const iconArrowLeft_1 = require("../../icons/iconArrowLeft");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const useDrive_1 = require("../../utils/theme/useDrive");
@@ -14,9 +16,10 @@ const TitleLink = ({ titleIconClasses, ariaLabel, children, link, id, className
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const titleAriaLabel = ariaLabel || "";
+    const ArrowIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconArrowRight_1.IconArrowRight, iconArrowLeft_1.IconArrowLeft);
     if (!isMobile) {
-        return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-link", "zen-title-link", className]), href: link, "aria-label": titleAriaLabel, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }), (0, jsx_runtime_1.jsx)(iconArrowRight_1.IconArrowRight, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link__icon", titleIconClasses || ""]) })] }));
+        return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-link", "zen-title-link", className]), href: link, "aria-label": titleAriaLabel, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }), (0, jsx_runtime_1.jsx)(ArrowIcon, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link__icon", titleIconClasses || ""]) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary", iconClasses: titleIconClasses, id: id, "aria-label": titleAriaLabel, link: link, iconPosition: textIconButton_1.ButtonIconPosition.End, icon: iconArrowRight_1.IconArrowRight, iconSize: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link", "zen-title-link__icon", titleLinkClasses || "", className || ""]), children: children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary", iconClasses: titleIconClasses, id: id, "aria-label": titleAriaLabel, link: link, iconPosition: textIconButton_1.ButtonIconPosition.End, icon: ArrowIcon, iconSize: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link", "zen-title-link__icon", titleLinkClasses || "", className || ""]), children: children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }) }));
 };
 exports.TitleLink = TitleLink;

package/dist/checkbox/checkbox.js

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

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -120,6 +120,8 @@ injectString("ar-SA", "Has additional actions. Use right arrow to access button,
 const checkbox_1 = require("../checkbox/checkbox");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const CheckboxListWithAction = ({
@@ -135,6 +137,7 @@ const CheckboxListWithAction = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox-list-with-action");
+  const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
   const listId = (0, react_1.useId)();
   const checkboxId = `${listId}_check_list-item_`;
   const navigationInstructionsId = `${listId}_navigation_instructions`;
@@ -369,7 +372,7 @@ const CheckboxListWithAction = ({
       })), (0, jsx_runtime_1.jsxs)("div", Object.assign({
         className: "zen-checkbox-list-with-action__label-info"
       }, otherArgs, {
-        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && (0, jsx_runtime_1.jsx)(ChevronIcon, {
           size: "large"
         })]
       }))]
@@ -379,7 +382,8 @@ const CheckboxListWithAction = ({
       onClick: handleClick,
       title: title,
       className: classN,
-      tabIndex: -1
+      tabIndex: -1,
+      disabled: option.blocked
     }, otherArgs, {
       children: childEl
     })) : (0, jsx_runtime_1.jsx)("div", {

package/dist/commonHelpers/arrowNavigation/components/arrowButton/arrowButton.js

@@ -7,10 +7,13 @@ const button_1 = require("../../../../button/button");
 const iconChevronLeft_1 = require("../../../../icons/iconChevronLeft");
 const iconChevronRight_1 = require("../../../../icons/iconChevronRight");
 const useDrive_1 = require("../../../../utils/theme/useDrive");
+const useDirectionalIcon_1 = require("../../../../utils/localization/useDirectionalIcon");
 const svgIconSize_1 = require("../../../../svgIcon/svgIconSize");
 const ArrowNavButton = ({ value, isHidden, disabled, className, arrowButtonHandler, onMouseDown, onMouseUp }) => {
     const isDrive = (0, useDrive_1.useDrive)();
     const iconSize = isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large";
-    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: (0, classNames_1.classNames)(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? ((0, jsx_runtime_1.jsx)(iconChevronLeft_1.IconChevronLeft, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : ((0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
+    const LeftIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight);
+    const RightIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: (0, classNames_1.classNames)(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? ((0, jsx_runtime_1.jsx)(LeftIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : ((0, jsx_runtime_1.jsx)(RightIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
 };
 exports.ArrowNavButton = ArrowNavButton;

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,7 +1,7 @@
 @import "../common.less";
 @import "../typography/typography.less";
 
-@pill-min-width-default: 30px;
+@pill-min-width-default: (30 / @rem);
 @pill-max-width-default: 200px;
 
 // TODO: update to .zen-pill-content after old pill component removed remove
@@ -14,12 +14,12 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-radius: 30px;
+    border-radius: (30 / @rem);
     height: @pill-height;
     display: grid;
     grid-auto-flow: column;
 
-    gap: 8px;
+    gap: (8 / @rem);
 
     &--icon-left {
         grid-template-columns: 12px 1fr;
@@ -38,18 +38,18 @@
 
         &.zen-pill-new-content--empty {
             grid-template-columns: 12px 18px;
-            gap: 8px;
+            gap: (8 / @rem);
         }
     }
 
     &--hidden {
-        gap: 4px;
+        gap: (4 / @rem);
     }
     &.zen-pill-new-content--drive,
     &.zen-pill-new-content--drive-tablet {
         height: @pill-height--drive;
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -67,7 +67,7 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
@@ -75,7 +75,7 @@
         height: @pill-height--mobile;
         .body-m-400-short();
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -93,7 +93,7 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }