@geotab/zenith 3.10.0-beta.0 → 3.10.0-beta.2

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { type ICardButton, CardButton } from "./card/components/cardButton/cardB
 export { type ICardToggle, CardToggle } from "./card/components/cardToggle/cardToggle";
 export { type IContent, Content } from "./card/components/content";
 export { type TCardStatus, Status } from "./card/components/status";
-export { Title } from "./card/components/title";
+export { type THeadingTag, Title } from "./card/components/title";
 export { TitleLink } from "./card/components/titleLink";
 export { getDefaultFullWidthValue } from "./card/helpers/getDefaultFullWidthValue";
 export { getIconFromStatus } from "./card/helpers/getIconFromStatus";
@@ -774,6 +774,8 @@ export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvid
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
+export { directionContext } from "./utils/localization/directionContext";
+export type { TTextDirection } from "./utils/localization/getTextDirection";
 export { useDirection } from "./utils/localization/useDirection";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/dist/index.js

@@ -17,7 +17,7 @@ exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconSha
 exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = exports.IconSortVertical = exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = void 0;
 exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageTapToUpload = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageCloudUpload = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = void 0;
 exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.directionContext = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1663,6 +1663,8 @@ Object.defineProperty(exports, "LanguageProvider", { enumerable: true, get: func
 var translationsDictionary_1 = require("./utils/localization/translationsDictionary");
 Object.defineProperty(exports, "dictionaries", { enumerable: true, get: function () { return translationsDictionary_1.dictionaries; } });
 Object.defineProperty(exports, "injectString", { enumerable: true, get: function () { return translationsDictionary_1.injectString; } });
+var directionContext_1 = require("./utils/localization/directionContext");
+Object.defineProperty(exports, "directionContext", { enumerable: true, get: function () { return directionContext_1.directionContext; } });
 var useDirection_1 = require("./utils/localization/useDirection");
 Object.defineProperty(exports, "useDirection", { enumerable: true, get: function () { return useDirection_1.useDirection; } });
 var useLanguage_1 = require("./utils/localization/useLanguage");

package/dist/menu/controlledMenu.d.ts

@@ -17,6 +17,7 @@ export interface IControlledMenu extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     listClassName?: string;
+    closeOnScroll?: boolean;
 }
 type TControlledMenu = FC<IControlledMenu> & {
     Item: FC<IMenuControlledItem>;

package/dist/menu/controlledMenu.js

@@ -23,7 +23,7 @@ const generateId_1 = require("../commonHelpers/generateId");
 const pathProvider_1 = require("./contexts/pathProvider");
 const menuSeparator_1 = require("./components/menuSeparator");
 const focusableSelector_1 = require("../utils/focusableSelector");
-const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment }) => {
+const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ariaLabelledby, id, title, className = "", listClassName = "", paddingX = 0, paddingY = 0, alignment, closeOnScroll = true }) => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Desktop);
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const memoizedOnChange = (0, react_1.useCallback)(setIsOpen, [setIsOpen]);
@@ -218,7 +218,7 @@ const ControlledMenu = ({ children, isOpen, setIsOpen, triggerRef, ariaLabel, ar
     if (isMobile) {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: title, isOpen: isOpen, triggerRef: triggerRef, onHidePanel: hideMenu, onCloseClick: hideMenu, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: title }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: renderMenuList() })] }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, recalculateOnScroll: true, 
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(pathProvider_1.PathProvider, { path: path, onOpenBranch: onOpenBranch, closeBranch: closeBranch, navigatedViaKeyboardRef: navigatedViaKeyboardRef, keyboardActiveRef: keyboardActiveRef, children: (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { id: id, useTrapFocusWithTrigger: "on", className: (0, classNames_1.classNames)(["zen-controlled-menu", className]), onOpenChange: memoizedOnChange, isOpen: isOpen, triggerRef: triggerRef, paddingX: paddingX, paddingY: paddingY, alignment: alignment, ariaLabelledby: ariaLabelledby, ariaLabel: ariaLabel || title, closeOnScroll: closeOnScroll, 
                 // focusOnOpen is false - ControlledMenu handles focus based on input method
                 // (keyboard vs mouse) in its own useEffect
                 focusOnOpen: false, children: renderMenuList() }) }) }));

package/dist/testHelpers/fakeFetch.d.ts

@@ -0,0 +1 @@
+export declare const fetchData: () => Promise<string>;

package/dist/testHelpers/fakeFetch.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchData = void 0;
+const zen_1 = require("../utils/zen");
+let loadTimeout = null;
+const fetchData = () => {
+    var _a;
+    loadTimeout && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, loadTimeout));
+    return new Promise((res, rej) => {
+        var _a;
+        loadTimeout = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => Math.random() > 0.5 ? res("Fetched Data") : rej(new Error("Error while fetching data")), 5000);
+    });
+};
+exports.fetchData = fetchData;

package/dist/testHelpers/geotab-axe/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../../../testHelpers/geotab-axe/index.d.ts" />
+export {};

package/dist/testHelpers/geotab-axe/index.js

@@ -0,0 +1,81 @@
+"use strict";
+/// <reference path="./index.d.ts" />
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const axe_core_1 = __importDefault(require("axe-core"));
+const styled_output_1 = require("../styled-output");
+const domParser = new DOMParser();
+const lineBreak = "\n\n";
+const horizontalLine = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500";
+const runAxe = (el) => new Promise(resolve => {
+    const parent = el.parentNode;
+    const sibling = el.nextSibling;
+    document === null || document === void 0 ? void 0 : document.body.appendChild(el);
+    axe_core_1.default.configure({
+        rules: [{
+                id: "target-size",
+                enabled: true
+            }],
+        checks: [
+            {
+                // color contrast checking doesnt work in a jsdom environment.
+                id: "color-contrast",
+                enabled: false
+            }
+        ]
+    });
+    axe_core_1.default.run(el, {}, (err, results) => {
+        if (err) {
+            throw err;
+        }
+        resolve(results);
+        parent ? parent.insertBefore(el, sibling) : document === null || document === void 0 ? void 0 : document.body.removeChild(el);
+    });
+});
+const toHtml = (str) => {
+    if (str.indexOf("<html") > -1) {
+        return domParser.parseFromString(str, "text/html").body;
+    }
+    const html = document === null || document === void 0 ? void 0 : document.createElement("template");
+    html.insertAdjacentHTML("afterbegin", str);
+    return html;
+};
+const formatViolations = (violations) => {
+    if (violations.length === 0) {
+        return [];
+    }
+    return violations.map(violation => {
+        const errorText = violation.nodes.map(node => {
+            const selector = node.target.join(", ");
+            const expectedText = `Availability violation for selector $('${selector}'):` + lineBreak;
+            return (expectedText +
+                (0, styled_output_1.stylize)(node.html, styled_output_1.Color.Gray) +
+                lineBreak +
+                (0, styled_output_1.stylize)(`---Explanation---`, styled_output_1.Color.Black, styled_output_1.BackgroundColor.White, styled_output_1.Style.Bold, styled_output_1.Style.Underline) +
+                lineBreak +
+                `${violation.help} (${violation.id})` +
+                lineBreak +
+                (0, styled_output_1.stylize)(node.failureSummary || "", styled_output_1.Color.Yellow) +
+                lineBreak + (violation.helpUrl
+                ? `You can find more about it here: \n${(0, styled_output_1.stylize)(violation.helpUrl, styled_output_1.Color.Blue)}`
+                : ""));
+        }).join(lineBreak);
+        return (errorText);
+    }).join(lineBreak + horizontalLine + lineBreak);
+};
+const toBeAccessible = async (element, errorMsg) => {
+    if (!element) {
+        return { pass: true, message: () => "ok" };
+    }
+    const html = element instanceof Node ? element : toHtml(element);
+    const results = await runAxe(html);
+    if (results.violations.length) {
+        const formatedViolations = formatViolations(results.violations);
+        const message = () => (errorMsg ? errorMsg + lineBreak : "") + formatedViolations;
+        return { pass: false, message };
+    }
+    return { pass: true, message: () => "ok" };
+};
+expect.extend({ toBeAccessible });

package/dist/testHelpers/jestRetry.js

@@ -0,0 +1,2 @@
+"use strict";
+jest.retryTimes(3, { logErrorsBeforeRetry: true });

package/dist/testHelpers/renderAsync.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const renderAsync: (component: ReactNode) => Promise<import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>>;

package/dist/testHelpers/renderAsync.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderAsync = void 0;
+const react_1 = require("react");
+const react_2 = require("@testing-library/react");
+const renderAsync = async (component) => (0, react_1.act)(async () => {
+    const result = (0, react_2.render)(component);
+    await Promise.resolve();
+    await Promise.resolve();
+    return result;
+});
+exports.renderAsync = renderAsync;

package/dist/testHelpers/setReadonlyHtmlProperty.d.ts

@@ -0,0 +1 @@
+export declare const setReadonlyHtmlProperty: (propName: keyof HTMLElement, values: Map<string, Required<HTMLElement>[keyof HTMLElement]>) => void;

package/dist/testHelpers/setReadonlyHtmlProperty.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setReadonlyHtmlProperty = void 0;
+const setReadonlyHtmlProperty = (propName, values) => {
+    jest.spyOn(HTMLElement.prototype, propName, "get").mockImplementation(function () {
+        var _a;
+        for (const [selector, value] of values) {
+            if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) === this) {
+                return value;
+            }
+        }
+        return this[propName];
+    });
+};
+exports.setReadonlyHtmlProperty = setReadonlyHtmlProperty;

package/dist/testHelpers/styled-output.d.ts

@@ -0,0 +1,30 @@
+export declare enum Color {
+    No = 39,
+    Black = 30,
+    Red = 31,
+    Green = 32,
+    Yellow = 33,
+    Blue = 34,
+    Purple = 35,
+    Cyan = 36,
+    White = 37,
+    Gray = 90
+}
+export declare enum BackgroundColor {
+    No = 49,
+    Black = 40,
+    Red = 41,
+    Green = 42,
+    Yellow = 43,
+    Blue = 44,
+    Purple = 45,
+    Cyan = 46,
+    White = 47,
+    Gray = 100
+}
+export declare enum Style {
+    No = 0,
+    Bold = 1,
+    Underline = 4
+}
+export declare function stylize(text: string, ...styles: (Color | BackgroundColor | Style)[]): string;

package/dist/testHelpers/styled-output.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylize = exports.Style = exports.BackgroundColor = exports.Color = void 0;
+var Color;
+(function (Color) {
+    Color[Color["No"] = 39] = "No";
+    Color[Color["Black"] = 30] = "Black";
+    Color[Color["Red"] = 31] = "Red";
+    Color[Color["Green"] = 32] = "Green";
+    Color[Color["Yellow"] = 33] = "Yellow";
+    Color[Color["Blue"] = 34] = "Blue";
+    Color[Color["Purple"] = 35] = "Purple";
+    Color[Color["Cyan"] = 36] = "Cyan";
+    Color[Color["White"] = 37] = "White";
+    Color[Color["Gray"] = 90] = "Gray";
+})(Color || (exports.Color = Color = {}));
+var BackgroundColor;
+(function (BackgroundColor) {
+    BackgroundColor[BackgroundColor["No"] = 49] = "No";
+    BackgroundColor[BackgroundColor["Black"] = 40] = "Black";
+    BackgroundColor[BackgroundColor["Red"] = 41] = "Red";
+    BackgroundColor[BackgroundColor["Green"] = 42] = "Green";
+    BackgroundColor[BackgroundColor["Yellow"] = 43] = "Yellow";
+    BackgroundColor[BackgroundColor["Blue"] = 44] = "Blue";
+    BackgroundColor[BackgroundColor["Purple"] = 45] = "Purple";
+    BackgroundColor[BackgroundColor["Cyan"] = 46] = "Cyan";
+    BackgroundColor[BackgroundColor["White"] = 47] = "White";
+    BackgroundColor[BackgroundColor["Gray"] = 100] = "Gray";
+})(BackgroundColor || (exports.BackgroundColor = BackgroundColor = {}));
+var Style;
+(function (Style) {
+    Style[Style["No"] = 0] = "No";
+    Style[Style["Bold"] = 1] = "Bold";
+    Style[Style["Underline"] = 4] = "Underline";
+})(Style || (exports.Style = Style = {}));
+function stylize(text, ...styles) {
+    if (!styles.length) {
+        return text;
+    }
+    return styles.reduce((res, style) => `\x1b[${style}m${res}\x1b[0m`, text);
+}
+exports.stylize = stylize;

package/esm/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/esm/absolute/absolute.js

@@ -16,7 +16,7 @@ import { useScroll } from "../commonHelpers/hooks/useScroll";
 import { getScrollableParent } from "../utils/getScrollableParent";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
-export 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 }) => {
+export 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 = useRef(null);
     const prevScroll = useRef(0);
     const { dark } = useContext(themeContext);
@@ -44,14 +44,18 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
         return "";
     };
     const parent = useMemo(() => {
-        if (!isOpen || !recalculateOnScroll) {
+        if (!isOpen || (!recalculateOnScroll && !closeOnScroll)) {
             return null;
         }
         return getScrollableParent(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
+    }, [triggerRef, isOpen, recalculateOnScroll, closeOnScroll]);
     const calculatePosition = useCallback(() => calculatePos(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
+    const handleCloseOnScroll = useCallback(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
     useResize(calculatePosition, isOpen);
-    useScroll(calculatePosition, isOpen, parent);
+    useScroll(calculatePosition, isOpen && !!recalculateOnScroll, parent);
+    useScroll(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
     useLayoutEffect(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);

package/esm/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/esm/betaPill/betaPill.js

@@ -116,11 +116,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");
-export const BetaPill = ({
-  className,
-  feedbackAction,
-  betaOptionAction
-}) => {
+export const BetaPill = props => {
+  const {
+    className,
+    feedbackAction,
+    betaOptionAction,
+    name,
+    description
+  } = props;
   const {
     translate
   } = useLanguage();
@@ -139,8 +142,8 @@ export const BetaPill = ({
     return _jsx(PillExpandable, {
       isBeta: true,
       icon: 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,
@@ -153,7 +156,7 @@ export const BetaPill = ({
     type: "info",
     children: !isMobile && _jsx("span", {
       className: "zen-caption__content",
-      children: translate("Beta")
+      children: name !== null && name !== void 0 ? name : translate("Beta")
     })
   });
 };

package/esm/card/card.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "./components/title";
+import { 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/esm/card/card.js

@@ -82,7 +82,8 @@ props => {
     fullWidth,
     scrollableContent = true,
     autoHeight = false,
-    fullHeight = false
+    fullHeight = false,
+    titleAs
   } = props;
   const {
     translate
@@ -242,7 +243,8 @@ props => {
           isMobile: isMobile,
           title: title,
           icon: titleIcon,
-          iconType: titleIconType
+          iconType: titleIconType,
+          titleAs: titleAs
         }), _jsxs("div", {
           className: "zen-card__header-right",
           children: [!!headerActions.length && headerActions, date ? _jsx("span", {

package/esm/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/esm/card/components/title.js

@@ -4,12 +4,13 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useDrive } from "../../utils/theme/useDrive";
 import { IconChevronRightSmall } from "../../icons/iconChevronRightSmall";
-export const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
+const VALID_HEADING_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+export const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick, titleAs }) => {
     const driveClassNames = useDriveClassName("zen-card-title");
     const isDrive = useDrive();
     const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
     const iconSize = useMemo(() => (isDrive ? "huge" : "large"), [isDrive]);
-    const iconElement = useMemo(() => (icon ? _jsx("div", { className: classNames(["zen-card-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
+    const iconElement = useMemo(() => (icon ? _jsx("span", { className: classNames(["zen-card-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
     const chevron = useMemo(() => (_jsx("span", { className: "zen-card-title__link-chevron", children: _jsx(IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [iconSize]);
     const titleClasses = classNames(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
     if (onClick) {
@@ -18,5 +19,6 @@ export const Title = ({ isMobile, link, target, title, id, icon, iconType, class
     if (link) {
         return (_jsxs("a", { id: id, className: titleClasses, href: link, target: target, children: [iconElement, _jsxs("span", { title: title, className: classNames(["zen-card-title__link-text"]), children: [title, chevron] })] }));
     }
-    return (_jsxs("div", { className: titleClasses, children: [iconElement, _jsx("span", { title: title, id: id, className: 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 createElement(tag, { className: titleClasses }, iconElement, _jsx("span", { title: title, id: id, className: classNames(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: title }, "text"));
 };

package/esm/checkbox/checkbox.js

@@ -28,9 +28,9 @@ export const Checkbox = (_a) => {
     const isMobile = useMobile();
     const checkboxIconClasses = useMemo(() => classNames(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
     const checkbox = (_jsx(TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
-    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? (_jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
+    const iconAndLabel = (_jsxs(_Fragment, { children: [_jsx("div", { className: "zen-checkbox__box", "aria-hidden": true, children: state === CheckboxState.Indeterminate ? (_jsx(CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === CheckboxState.On ? (_jsx(CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? (_jsx("div", { className: classNames(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return (_jsxs("label", { className: classNames(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, _jsx("div", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return (_jsxs("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, _jsx("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
+    return (_jsx("div", { className: classNames(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: _jsxs("label", { className: classNames(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), title: title, children: [checkbox, iconAndLabel] }) }));
 };

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -371,7 +371,8 @@ export const CheckboxListWithAction = ({
       onClick: handleClick,
       title: title,
       className: classN,
-      tabIndex: -1
+      tabIndex: -1,
+      disabled: option.blocked
     }, otherArgs, {
       children: childEl
     })) : _jsx("div", {

package/esm/controlledPopup/controlledPopup.d.ts

@@ -23,8 +23,9 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     recalculateOnScroll?: boolean;
+    closeOnScroll?: boolean;
     preventAttributesAutoSet?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPopup: ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role }: IControlledPopup) => import("react/jsx-runtime").JSX.Element;

package/esm/controlledPopup/controlledPopup.js

@@ -3,7 +3,7 @@ import { useEffect, useId } from "react";
 import { Absolute } from "../absolute/absolute";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
-export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, closeOnScroll, preventAttributesAutoSet, focusOnOpen, role = "dialog" }) => {
     const autoId = useId();
     const popupId = id || autoId;
     const isClientReady = useClientReady();
@@ -21,5 +21,5 @@ export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, cl
         triggerRef.current.setAttribute("aria-expanded", isOpen ? "true" : "false");
         triggerRef.current.setAttribute("aria-controls", popupId);
     }, [triggerRef, isOpen, popupId, preventAttributesAutoSet, isClientReady]);
-    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children })));
+    return (_jsx(Absolute, Object.assign({ triggerRef: triggerRef, alignment: alignment, id: popupId, isOpen: isOpen, className: classNames(["zen-popup", className ? className : ""]), paddingX: paddingX, paddingY: paddingY, inline: inline, onOpenChange: onOpenChange, useTrapFocusWithTrigger: useTrapFocusWithTrigger, shouldHoldScroll: shouldHoldScroll }, (role !== false && typeof role === "string" ? { role } : {}), (role !== false && ariaLabel ? { ariaLabel } : {}), (role !== false && ariaLabelledby ? { ariaLabelledby } : {}), { recalculateOnScroll: recalculateOnScroll, closeOnScroll: closeOnScroll, focusOnOpen: focusOnOpen, children: children })));
 };

package/esm/dropdown/dropdown.js

@@ -20,4 +20,4 @@ export const Dropdown = (_a) => {
     var props = __rest(_a, []);
     return _jsx(DropDownFormField, Object.assign({}, props));
 };
-export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];

package/esm/dropdownRaw/dropdownList.d.ts

@@ -13,7 +13,9 @@ export interface IDropdownList extends IZenComponentProps {
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
     backButtonName?: string;
-    isAllSelected: boolean;
+    isAllSelected?: boolean;
+    isSelectAllActive?: boolean;
+    shouldBlockItems?: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -39,6 +41,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, shouldBlockItems, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};