@geotab/zenith 3.5.0 → 3.6.0-beta.0

package/dist/nav/navItem/navItem.js

@@ -22,6 +22,7 @@ const tooltip_1 = require("../../tooltip/tooltip");
 const controlledMenu_1 = require("../../menu/controlledMenu");
 const nav_context_1 = require("../context/nav.context");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const utils_1 = require("../../commonHelpers/utils");
 const ICON_SIZE = "huge";
 const SUBMENU_ICON_SIZE = "large";
 exports.NavItemContext = (0, react_1.createContext)({ parentLevel: 0 });
@@ -35,7 +36,7 @@ const NavItemContent = ({ primaryIcon, secondaryIcon, isBeta, counter, collapsed
     const primaryIconComponent = primaryIcon ? ((0, jsx_runtime_1.jsx)("span", { ref: primaryIconRef, className: (0, classNames_1.classNames)(["zen-nav-item__icon", counter ? "zen-nav-item__icon--with-counter" : "", iconClass || ""]), children: PrimaryIconComponent ? (0, jsx_runtime_1.jsx)(PrimaryIconComponent, { size: iconSize }) : primaryIcon })) : null;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-left", children: [isBeta && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__beta", children: (0, jsx_runtime_1.jsx)(iconBeta_1.IconBeta, { size: "big" }) })) : null, primaryIconComponent, SecondaryIconComponent && !collapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__icon", children: (0, jsx_runtime_1.jsx)(SecondaryIconComponent, { size: iconSize }) })) : null, !collapsed ? (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title", children: children }) : null] }), !collapsed && (counter || hasSubmenu) ? ((0, jsx_runtime_1.jsxs)("div", { className: "zen-nav-item__content-right", children: [counter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-nav-item__counter", children: counter }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { className: "zen-nav-item__title-icon", size: iconSize }) : null] })) : null] }));
 };
-const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, level = 1 }) => {
+const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, collapsed, isMenuItem, level = 1 }) => {
     const ActionIconComponent = actionIcon;
     const iconSize = level > 1 ? SUBMENU_ICON_SIZE : ICON_SIZE;
     if (!ActionIconComponent || collapsed) {
@@ -45,7 +46,7 @@ const NavItemAction = ({ actionIcon, actionIconTitle = "", onActionIconClick, co
         e.stopPropagation();
         onActionIconClick === null || onActionIconClick === void 0 ? void 0 : onActionIconClick(e);
     };
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, children: (0, jsx_runtime_1.jsx)(ActionIconComponent, { size: iconSize }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-nav-item__action", onClick: handleActionIconClick, "aria-label": actionIconTitle, title: actionIconTitle, role: isMenuItem ? "menuitem" : undefined, children: (0, jsx_runtime_1.jsx)(ActionIconComponent, { size: iconSize }) }));
 };
 const getWrapperClassName = ({ className, collapsed, active, isMobile, hasNested, isNested, isLink }) => (0, classNames_1.classNames)([
     "zen-nav-item",
@@ -68,7 +69,7 @@ const LinkNavItem = (_a) => {
             onNavigate && onNavigate();
         }, className: "zen-link--light zen-nav-item__main", children: (0, jsx_runtime_1.jsxs)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, level: currentLevel }, rest, { children: [(0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }), isExternalLink && !collapsed ? (0, jsx_runtime_1.jsx)(iconOpen2_1.IconOpen2, { className: "zen-nav-item__title-icon", size: ICON_SIZE }) : null] })) }));
     const item = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: linkElement, alignment: tooltipAlignment, children: title })) : (linkElement);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active, isMobile, isLink: true }), children: [item, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 LinkNavItem.displayName = "LinkNavItem";
 const ButtonNavItem = (_a) => {
@@ -100,7 +101,8 @@ const ButtonNavItem = (_a) => {
     };
     const isMobile = (0, useMobile_1.useMobile)();
     const isActive = active || (hasNestedItems && menuOpen);
-    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
+    const triggerId = (0, utils_1.generateId)();
+    const buttonElement = ((0, jsx_runtime_1.jsx)("button", { id: triggerId, ref: triggerRef, "aria-label": title, title: title, tabIndex: tabIndex, role: isMenuItem ? "menuitem" : undefined, className: "zen-nav-item__main", onClick: handleClick, onKeyDown: handleKeyPress, children: (0, jsx_runtime_1.jsx)(NavItemContent, Object.assign({ title: title, collapsed: collapsed, hasSubmenu: hasNestedItems, level: currentLevel }, rest, { children: (0, jsx_runtime_1.jsx)("span", { className: "zen-nav-item__title-text", children: title }) })) }));
     const trigger = collapsed ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { trigger: buttonElement, alignment: tooltipAlignment, children: title })) : (buttonElement);
     if (hasNestedItems) {
         // Process children to add appropriate level classes while allowing unlimited nesting
@@ -121,9 +123,9 @@ const ButtonNavItem = (_a) => {
             setMenuOpen(false);
             closeParentMenu && closeParentMenu();
         };
-        return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)([popupClass, isMobile ? popupClassMobile : ""]), listClassName: (0, classNames_1.classNames)([popupListClass, isMobile ? popupListClassMobile : ""]), children: processedChildren }) })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, (0, jsx_runtime_1.jsx)(exports.NavItemContext, { value: { parentLevel: currentLevel, closeParentMenu: closeLevelMenu }, children: (0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: triggerRef, isOpen: menuOpen, setIsOpen: setMenuOpen, title: title, alignment: menuAlignment, className: (0, classNames_1.classNames)([popupClass, isMobile ? popupClassMobile : ""]), listClassName: (0, classNames_1.classNames)([popupListClass, isMobile ? popupListClassMobile : ""]), ariaLabelledby: triggerId, children: processedChildren }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: getWrapperClassName({ className, collapsed, active: isActive, isMobile, hasNested: hasNestedItems }), children: [trigger, (0, jsx_runtime_1.jsx)(NavItemAction, { actionIcon: actionIcon, actionIconTitle: actionIconTitle, onActionIconClick: onActionIconClick, collapsed: collapsed, level: currentLevel, isMenuItem: isMenuItem })] }));
 };
 ButtonNavItem.displayName = "ButtonNavItem";
 /**

package/dist/nav/navMobileBar/navMobileBar.js

@@ -70,6 +70,7 @@ const NavMobileBar = ({
   });
   return (0, jsx_runtime_1.jsxs)("div", {
     className: mobileBarClassNames,
+    role: "menu",
     children: [items, (0, jsx_runtime_1.jsx)(navItem_1.NavItem, {
       className: "zen-nav-item--mobile-bar",
       title: translate("More"),

package/dist/nav/utils/navUtils.js

@@ -2,21 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.collectNavItems = exports.filterPrimaryNavItems = exports.isImageUrl = exports.detectOverlayScrollbar = exports.navHeaderImageCollapsed = exports.navHeaderImage = void 0;
 const react_1 = require("react");
+const zen_1 = require("../../utils/zen");
 exports.navHeaderImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIzIiBoZWlnaHQ9IjE1IiB2aWV3Qm94PSIwIDAgMTIzIDE1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDcuNDE3OCA1LjY2MDFIMzkuNTkxNVY2Ljc0NTI2SDQ1LjM1MjdDNDUuNDE5MiA3LjA2NjkzIDQ1LjQ1MjggNy4yNzc1IDQ1LjQ1MjggNy4zNzA5QzQ1LjQ1MjggOC41OTE3NyA0NS4xOTczIDkuMzU1MjUgNDQuNjk0IDkuNjM5OTdDNDQuMTg1NCA5LjkyODEzIDQyLjgyODkgMTAuMDczOSA0MC42NjIzIDEwLjA3MzlDMzcuODI1NyAxMC4wNzM5IDM2LjA1NzggOS45MTk3IDM1LjQwNzkgOS42MTUxNEMzNC43NjUzIDkuMzE0NDkgMzQuNDM5NyA4LjQ4ODM4IDM0LjQzOTcgNy4xNTkwM0wzNC40MjY2IDUuNjMwOThMMzQuNDUzIDQuMjExNTVDMzQuNDUzIDIuOTAyNCAzNC43NDYyIDIuMDc0MzkgMzUuMzI0MiAxLjc1MDMzQzM1LjkwNzcgMS40MjMxOSAzNy4zOTE1IDEuMjU3MzEgMzkuNzM0MiAxLjI1NzMxQzQyLjI3MjQgMS4yNTczMSA0My44NjMxIDEuMzYwOTMgNDQuNDYyIDEuNTY0ODRDNDUuMDQ5IDEuNzY1MTkgNDUuMzQ2NyAyLjI5OTU3IDQ1LjM0NjcgMy4xNTMwMVYzLjQ1MjQ2SDQ3LjQyMTlWMy4wMTE4NEM0Ny40MjE5IDEuODE2NCA0Ni45NjM3IDEuMDM0NjIgNDYuMDYwMyAwLjY4ODIyN0M0NS4xNjY1IDAuMzQ1NzU4IDQzLjE1ODUgMC4xNzIwMjggNDAuMDkyIDAuMTcyMDI4QzM3LjAzMjQgMC4xNzIwMjggMzQuOTY3NSAwLjQzNzI1NyAzMy45NTQxIDAuOTYwMjMxQzMyLjkzNDUgMS40ODcwMSAzMi40MTc2IDIuNTU5NTcgMzIuNDE3NiA0LjE0ODFMMzIuNDA0MyA1LjA5NzMyTDMyLjQxNzYgNi42NzMxM0MzMi40MTc2IDguNTYyODkgMzIuODgyNiA5Ljc5NzMgMzMuNzk5NyAxMC4zNDI0QzM0LjcxMjEgMTAuODg0MSAzNi43ODg3IDExLjE1OSAzOS45NzI3IDExLjE1OUM0My4zNDA5IDExLjE1OSA0NS40NTU0IDEwLjkyNjggNDYuMjU3NyAxMC40NjgyQzQ3LjA2NTMgMTAuMDA2NiA0Ny40NzQ4IDguNzkyODMgNDcuNDc0OCA2Ljg2MTM2QzQ3LjQ3NDggNi4zNjIzOSA0Ny40NTY5IDUuOTY4MTEgNDcuNDIxNCA1LjY4OTMzTDQ3LjQxNzggNS42NjAxWiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNNDkuNDEyMSAxMS4wNDk4SDYxLjExNDVWOS45NjQ2M0g1MS41MjcxVjYuMDMyMjlINjAuNzE2NlY0Ljk0NzI1SDUxLjUyNzFWMS4zNjc2SDYxLjExNDVWMC4yODI0NEg0OS40MTIxVjExLjA0OThaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik03Ni44NTk5IDEuMDY0OEM3NS45OTk4IDAuNDcyNTUgNzMuODMzIDAuMTcyMDI4IDcwLjQxOTcgMC4xNzIwMjhDNjcuNDY2NSAwLjE3MjAyOCA2NS40MTkyIDAuNDM1NzEzIDY0LjMzNjQgMC45NTU5NTNDNjMuMjQ1NSAxLjQ4IDYyLjY5MjUgMi40Njk3MyA2Mi42OTI1IDMuODk2ODlMNjIuNjY2IDQuOTA5MDlWNS42NjE2NEM2Mi42NjYgOC4xMjI2MiA2My4wOTIzIDkuNjcxOTQgNjMuOTMyNyAxMC4yNjYxQzY0Ljc3MTEgMTAuODU4NSA2Ni45NTM3IDExLjE1OSA3MC40MTk3IDExLjE1OUM3My45MDQgMTEuMTU5IDc2LjA4ODggMTAuODU2MSA3Ni45MTM5IDEwLjI1OEM3Ny43NDExIDkuNjU4NTEgNzguMTYwNiA4LjA2NDUyIDc4LjE2MDYgNS41MjA1OUM3OC4xNjA2IDMuMTU4NDggNzcuNzIzMSAxLjY1OTQzIDc2Ljg1OTkgMS4wNjQ4Wk02NS40MDQ1IDEuODEzNzlDNjUuODgxOCAxLjQ0NDU4IDY3LjU2NDUgMS4yNTcxOSA3MC40MDY3IDEuMjU3MTlDNzIuODgxNiAxLjI1NzE5IDc0LjQ3MzEgMS40MTY5IDc1LjEzNjkgMS43MzE4Qzc1Ljc5MzEgMi4wNDMxMyA3Ni4xMjUyIDIuNzkwMjIgNzYuMTI1MiAzLjk1Mjk4TDc2LjEzODYgNC45NjM4N1Y1LjY2MTc2Qzc2LjEzODYgNy44NTIyOCA3NS44OTc1IDkuMTQ5NTYgNzUuNDIyMSA5LjUxNzQ2Qzc0Ljk0NDggOS44ODY5IDczLjI1NzQgMTAuMDczOSA3MC40MDY3IDEwLjA3MzlDNjcuNTY0NSAxMC4wNzM5IDY1Ljg4MTYgOS44ODcwMiA2NS40MDQ1IDkuNTE3NDZDNjQuOTI5MiA5LjE0OTQ0IDY0LjY4ODEgNy44NTIxNiA2NC42ODgxIDUuNjYxNzZDNjQuNjg4MSAzLjQ3NjM1IDY0LjkyOTIgMi4xODE2OSA2NS40MDQ1IDEuODEzNzlaIiBmaWxsPSIjMjU0NzdCIi8+CjxwYXRoIGQ9Ik05Mi44NDYzIDAuMjgyNDRINzguOTgyNFYxLjQ2OTQ0SDg0Ljg4MzVWMTEuMDQ5OEg4Ni45OTg2VjEuNDY5NDRIOTIuODQ2M1YwLjI4MjQ0WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMTAwLjMxOCAwLjI4MjQ0SDk3LjQxMTVMOTAuNzQwMiAxMS4wNDk4SDkyLjk4NTRMOTQuMzc3NCA4Ljc4NDE3SDEwMy40OThMMTA0LjkwMyAxMS4wNDk4SDEwNy4xMjJMMTAwLjMyOSAwLjI5OTA3NkwxMDAuMzE4IDAuMjgyNDRaTTEwMi44NjEgNy44MDg4MUg5NS4wMDFMOTguOTA0OCAxLjM3MTE3TDEwMi44NjEgNy44MDg4MVoiIGZpbGw9IiMyNTQ3N0IiLz4KPHBhdGggZD0iTTEyMC4yMDcgNS40MDM2OEMxMjEuNjkxIDUuMDczOTMgMTIyLjQ0MiA0LjMxNDYgMTIyLjQ0MiAzLjE0NTU0QzEyMi40NDIgMS45NzI5MiAxMjIuMDkxIDEuMTkyOTIgMTIxLjM5NyAwLjgyNzc1NEMxMjAuNzA5IDAuNDY1Nzk2IDExOS4yMzcgMC4yODI0NCAxMTcuMDIyIDAuMjgyNDRIMTA4Ljk3N1YxMS4wNDk4SDExNy44ODRDMTE5Ljc1NyAxMS4wNDk4IDEyMS4wOTEgMTAuODE1OCAxMjEuODUgMTAuMzU0MkMxMjIuNjEzIDkuODkwMDEgMTIzIDkuMDc2MzggMTIzIDcuOTM1ODRDMTIzIDYuNTQ2MzYgMTIyLjA2IDUuNjk0ODIgMTIwLjIwNyA1LjQwMzY4Wk0xMTkuNzA0IDQuNjI5NUMxMTkuMjIgNC44NjYzMyAxMTguMTE4IDQuOTg2MjMgMTE2LjQyNiA0Ljk4NjIzSDExMS4wOTJWMS4zNjc0OEgxMTYuOTgzQzExOC40MjggMS4zNjc0OCAxMTkuMzc1IDEuNDczIDExOS43OTYgMS42ODA5NkMxMjAuMjExIDEuODg1NTggMTIwLjQyIDIuMzQ2NTMgMTIwLjQyIDMuMDUxNTVDMTIwLjQyIDMuODY1NjYgMTIwLjE4IDQuMzk2NTkgMTE5LjcwNCA0LjYyOTVaTTExMS4wOTIgNi4wNzEyN0gxMTYuMzJDMTE4LjQ2MSA2LjA3MTI3IDExOS43ODkgNi4xNzk3NiAxMjAuMjY5IDYuMzkzM0MxMjAuNzM5IDYuNjAzMzkgMTIwLjk3OCA3LjE4NTU1IDEyMC45NzggOC4xMjM3MUMxMjAuOTc4IDguODc1NDMgMTIwLjc0MSA5LjM3MzgxIDEyMC4yNzQgOS42MDM5OUMxMTkuOCA5LjgzODIgMTE4Ljc3NyA5Ljk1NzAzIDExNy4yMzUgOS45NTcwM0wxMTUuMzkxIDkuOTY0NTJIMTExLjA5MlY2LjA3MTI3WiIgZmlsbD0iIzI1NDc3QiIvPgo8cGF0aCBkPSJNMCAwLjI3NzM1MUgyLjk4NzI1VjEuNTE1OEMzLjQ5ODA3IDEuMDA3MjEgNC4wNjYzOCAwLjYyNzU0NCA0LjY4OTk1IDAuMzc2NDU1QzUuMzE0NyAwLjEyNTYwNCA1Ljk5NDg0IDAgNi43MzI3MiAwQzcuNDc2OTEgMCA4LjE0ODc4IDAuMTY1MjkzIDguNzQ3MTQgMC40OTUyODZDOS4zNDYxNyAwLjgyNTUxNiA5LjgyNzg2IDEuMzA3ODUgMTAuMTkzMyAxLjk0MTgxQzEwLjY2NzcgMS4zMDc4NSAxMS4yNDk2IDAuODI1NTE2IDExLjkzOTggMC40OTUyODZDMTIuNjMgMC4xNjUyOTMgMTMuMzgzNSAwIDE0LjIwMTQgMEMxNS4wNDc1IDAgMTUuNzkyNiAwLjE3ODI0NiAxNi40MzQ2IDAuNTM0OTc1QzE3LjA3NzYgMC44OTE3MDQgMTcuNTM5IDEuMzU3MjggMTcuODIwNyAxLjkzMjA3QzE4LjEwMTggMi41MDY2MSAxOC4yNDIgMy40NDEyMSAxOC4yNDIgNC43MzU3NVYxMS4wNTY1SDE1LjIzMjZWNS41ODc4OUMxNS4yMzI2IDQuMzY1OTUgMTUuMDY0OSAzLjUzODU0IDE0LjcyOTIgMy4xMDYxMUMxNC4zOTM4IDIuNjczMzMgMTMuODkwMyAyLjQ1NzE4IDEzLjIxOTEgMi40NTcxOEMxMi43MDg1IDIuNDU3MTggMTIuMjUwOSAyLjU4OTIgMTEuODQ1NyAyLjg1MzI0QzExLjQ0MSAzLjExNzUyIDExLjE0IDMuNDgyMzMgMTAuOTQzIDMuOTQ4MDNDMTAuNzQ2MSA0LjQxMzcyIDEwLjY0NzYgNS4xNjE2NCAxMC42NDc2IDYuMTkxOVYxMS4wNTY0SDcuNjM4MjJWNS44MzU1M0M3LjYzODIyIDQuODcxMjIgNy41NTk5OSA0LjE3MjczIDcuNDAyMSAzLjc0MDE5QzcuMjQ1MTIgMy4zMDc0MSA3LjAwOSAyLjk4NTUgNi42OTUzMiAyLjc3NDFDNi4zODA3MSAyLjU2MjU4IDYuMDAwNzQgMi40NTcxOCA1LjU1NDM2IDIuNDU3MThDNS4wNTY2NiAyLjQ1NzE4IDQuNjA1MDMgMi41OTA4NiA0LjE5OTQ3IDIuODU4MzVDMy43OTMzOCAzLjEyNTk2IDMuNDg5OTMgMy41MDA1MSAzLjI4OTI1IDMuOTgyODRDMy4wODc2NSA0LjQ2NDk0IDIuOTg3MjUgNS4yMjQ1IDIuOTg3MjUgNi4yNjE2NlYxMS4wNTY1SDBWMC4yNzczNTFaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0xOC44MTg0IDAuMjc3MzY3SDIxLjg3MTJMMjQuOTYzOSA3LjA0MDg1TDI4LjM3NjkgMC4yNzczNjdIMzEuNDM4M0wyMy45ODE2IDE1SDIwLjg5NjZMMjMuMzQ0IDEwLjI1MjdMMTguODE4NCAwLjI3NzM2N1oiIGZpbGw9IiMwMDc4RDMiLz4KPC9zdmc+Cg==";
 exports.navHeaderImageCollapsed = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDM4IDEzIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE1LjE5OTcgMC4yMjU0NTdIMTcuNjAyOEwyMC4wMzczIDYuMDk0TDIyLjcyNCAwLjIyNTQ1N0gyNS4xMzM5TDE5LjI2NDEgMTNIMTYuODM1NkwxOC43NjIyIDguODgwODhMMTUuMTk5NyAwLjIyNTQ1N1oiIGZpbGw9IiMwMDc4RDMiLz4KPHBhdGggZD0iTTAuMzg2NzE5IDAuMjQwNjUySDIuNzM4MjVWMS4zMTUyM0MzLjE0MDM2IDAuODczOTM1IDMuNTg3NzMgMC41NDQ1MDggNC4wNzg2IDAuMzI2NjQzQzQuNTcwMzkgMC4xMDg5ODQgNS4xMDU3OSAwIDUuNjg2NjUgMEM2LjI3MjQ2IDAgNi44MDEzNSAwLjE0MzQyMiA3LjI3MjM4IDAuNDI5NzVDNy43NDM5MiAwLjcxNjI4NCA4LjEyMzEgMS4xMzQ4IDguNDEwNzQgMS42ODQ4N0M4Ljc4NDI0IDEuMTM0OCA5LjI0MjI1IDAuNzE2Mjg0IDkuNzg1NiAwLjQyOTc1QzEwLjMyODkgMC4xNDM0MjIgMTAuOTIyMSAwIDExLjU2NTkgMEMxMi4yMzIgMCAxMi44MTg1IDAuMTU0NjYgMTMuMzIzOCAwLjQ2NDE4OEMxMy44MyAwLjc3MzcxNSAxNC4xOTMzIDEuMTc3NjkgMTQuNDE1IDEuNjc2NDJDMTQuNjM2MyAyLjE3NDk0IDE0Ljc0NjYgMi45ODU4NyAxNC43NDY2IDQuMTA5MTJWOS41OTM0OEgxMi4zNzc3VjQuODQ4NUMxMi4zNzc3IDMuNzg4MjUgMTIuMjQ1NiAzLjA3MDMyIDExLjk4MTQgMi42OTUxMUMxMS43MTczIDIuMzE5NiAxMS4zMjEgMi4xMzIwNSAxMC43OTI2IDIuMTMyMDVDMTAuMzkwNyAyLjEzMjA1IDEwLjAzMDUgMi4yNDY2IDkuNzExNTIgMi40NzU3QzkuMzkyOTkgMi43MDUwMSA5LjE1NTk4IDMuMDIxNTUgOS4wMDA4OSAzLjQyNTYzQzguODQ1OTIgMy44Mjk3IDguNzY4NDMgNC40Nzg2NiA4Ljc2ODQzIDUuMzcyNTlWOS41OTMzOEg2LjM5OTQ0VjUuMDYzMzhDNi4zOTk0NCA0LjIyNjY2IDYuMzM3ODYgMy42MjA2IDYuMjEzNTcgMy4yNDUyOUM2LjA5IDIuODY5NzggNS45MDQxMyAyLjU5MDQ2IDUuNjU3MiAyLjQwNzAzQzUuNDA5NTQgMi4yMjM1IDUuMTEwNDQgMi4xMzIwNSA0Ljc1OTA1IDIuMTMyMDVDNC4zNjcyNyAyLjEzMjA1IDQuMDExNzUgMi4yNDgwNCAzLjY5MjUgMi40ODAxNEMzLjM3MjgzIDIuNzEyMzMgMy4xMzM5NiAzLjAzNzMzIDIuOTc1OTggMy40NTU4NEMyLjgxNzI5IDMuODc0MTQgMi43MzgyNSA0LjUzMzIgMi43MzgyNSA1LjQzMzEyVjkuNTkzNDhIMC4zODY3MTlWMC4yNDA2NTJaIiBmaWxsPSIjMDA3OEQzIi8+CjxwYXRoIGQ9Ik0zNy41Njg1IDQuODc0NjhIMzEuNDA3N1Y1LjgxNjI2SDM1Ljk0MjlDMzUuOTk1MiA2LjA5NTM3IDM2LjAyMTYgNi4yNzgwNyAzNi4wMjE2IDYuMzU5MTJDMzYuMDIxNiA3LjQxODQ0IDM1LjgyMDYgOC4wODA5IDM1LjQyNDMgOC4zMjc5NEMzNS4wMjQgOC41Nzc5OCAzMy45NTYyIDguNzA0NDkgMzIuMjUwNiA4LjcwNDQ5QzMwLjAxNzcgOC43MDQ0OSAyOC42MjYgOC41NzA2NiAyOC4xMTQ0IDguMzA2MzlDMjcuNjA4NiA4LjA0NTUzIDI3LjM1MjMgNy4zMjg3MyAyNy4zNTIzIDYuMTc1MjhMMjcuMzQxOSA0Ljg0OTQyTDI3LjM2MjcgMy42MTc4MUMyNy4zNjI3IDIuNDgxODggMjcuNTkzNSAxLjc2MzQzIDI4LjA0ODUgMS40ODIyNkMyOC41MDc5IDEuMTk4NDEgMjkuNjc1OSAxLjA1NDQ3IDMxLjUyIDEuMDU0NDdDMzMuNTE4MSAxLjA1NDQ3IDM0Ljc3MDIgMS4xNDQzOCAzNS4yNDE3IDEuMzIxMzFDMzUuNzAzOCAxLjQ5NTE1IDM1LjkzODEgMS45NTg4MiAzNS45MzgxIDIuNjk5MzNWMi45NTkxNkgzNy41NzE3VjIuNTc2ODRDMzcuNTcxNyAxLjUzOTU5IDM3LjIxMSAwLjg2MTI0NiAzNi40OTk5IDAuNTYwNjlDMzUuNzk2MyAwLjI2MzUzNSAzNC4yMTU2IDAuMTEyNzkzIDMxLjgwMTcgMC4xMTI3OTNDMjkuMzkzMiAwLjExMjc5MyAyNy43Njc3IDAuMzQyOTI4IDI2Ljk3IDAuNzk2NzAxQzI2LjE2NzQgMS4yNTM3NyAyNS43NjA0IDIuMTg0NDIgMjUuNzYwNCAzLjU2Mjc1TDI1Ljc1IDQuMzg2MzdMMjUuNzYwNCA1Ljc1MzY3QzI1Ljc2MDQgNy4zOTMzOCAyNi4xMjY1IDguNDY0NDYgMjYuODQ4NSA4LjkzNzQxQzI3LjU2NjYgOS40MDc0NyAyOS4yMDE0IDkuNjQ1OTYgMzEuNzA3OCA5LjY0NTk2QzM0LjM1OTIgOS42NDU5NiAzNi4wMjM3IDkuNDQ0NDkgMzYuNjU1MyA5LjA0NjZDMzcuMjkxIDguNjQ2MDMgMzcuNjEzMyA3LjU5Mjg5IDM3LjYxMzMgNS45MTY5OUMzNy42MTMzIDUuNDg0MDUgMzcuNTk5MyA1LjE0MTk0IDM3LjU3MTMgNC45MDAwNUwzNy41Njg1IDQuODc0NjhaIiBmaWxsPSIjMjU0NzdCIi8+Cjwvc3ZnPg==";
 // Detect if scrollbar is overlay by checking if it takes up space
 const detectOverlayScrollbar = () => {
-    const outer = document.createElement("div");
+    var _a, _b, _c, _d;
+    const outer = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.createElement("div");
+    if (!outer) {
+        return false;
+    }
     outer.style.visibility = "hidden";
     outer.style.overflow = "scroll";
     outer.style.width = "100px";
     outer.style.position = "absolute";
-    document.body.appendChild(outer);
-    const inner = document.createElement("div");
+    (_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body.appendChild(outer);
+    const inner = (_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.createElement("div");
+    if (!inner) {
+        return false;
+    }
     inner.style.width = "100%";
     outer.appendChild(inner);
     const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-    document.body.removeChild(outer);
+    (_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.body.removeChild(outer);
     // If scrollbarWidth is 0, the scrollbar is overlay (doesn't take space)
     return scrollbarWidth === 0;
 };

package/dist/pageHeader/pageHeader.d.ts

@@ -1,6 +1,6 @@
 import "./pageHeader.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { IPageHeaderFilters } from "./pageHeaderFilters";
 import { IPageHeaderActions } from "./pageHeaderActions";
 export interface IPageHeader extends IZenComponentProps {
@@ -12,5 +12,5 @@ interface IPageHeaderComponents {
 }
 export declare const PageHeaderDisplayName = "PageHeader";
 export declare const PageHeaderInner: React.FC<IPageHeader>;
-export declare const PageHeader: import("react").FC<IPageHeader> & IPageHeaderComponents;
+export declare const PageHeader: React.FC<IPageHeader> & IPageHeaderComponents;
 export {};

package/dist/pageHeader/pageHeader.js

@@ -8,11 +8,13 @@ const pageHeaderHelpers_1 = require("./pageHeaderHelpers");
 const pageHeaderFilters_1 = require("./pageHeaderFilters");
 const pageHeaderActions_1 = require("./pageHeaderActions");
 const collapsedItemsControl_1 = require("../header/components/collapsedItemsControl/collapsedItemsControl");
+const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
 exports.PageHeaderDisplayName = "PageHeader";
 const PageHeaderInner = ({ className, children }) => {
     const [filters, actions] = (0, react_1.useMemo)(() => (0, pageHeaderHelpers_1.regulatePageHeaderChildren)(children), [children]);
+    const pageHeaderMobileClassName = (0, useMobileClassName_1.useMobileClassName)("zen-page-header-component");
     const [content, setContent] = (0, react_1.useState)(null);
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-page-header-component", className || ""]), children: (0, jsx_runtime_1.jsxs)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: [filters.length > 0 ? filters : (0, jsx_runtime_1.jsx)(pageHeaderFilters_1.PageHeaderFilters, { className: "zen-page-header-component__filters--empty" }), actions] }) });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-page-header-component", pageHeaderMobileClassName || "", className || ""]), children: (0, jsx_runtime_1.jsxs)(collapsedItemsControl_1.HeaderCustomContent.Provider, { value: { content, setContent }, children: [filters.length > 0 ? filters : (0, jsx_runtime_1.jsx)(pageHeaderFilters_1.PageHeaderFilters, { className: "zen-page-header-component__filters--empty" }), actions] }) }));
 };
 exports.PageHeaderInner = PageHeaderInner;
 exports.PageHeader = (0, react_1.memo)(exports.PageHeaderInner);

package/dist/pageHeader/pageHeaderActions.js

@@ -8,28 +8,35 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const headerHelpers_1 = require("../header/headerHelpers");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const react_2 = __importDefault(require("react"));
 const collapsedItemsControl_1 = require("../header/components/collapsedItemsControl/collapsedItemsControl");
 const pageHeaderButton_1 = require("./pageHeaderButton");
 const pageHeaderMenu_1 = require("./pageHeaderMenu");
 const pageHeaderHelpers_1 = require("./pageHeaderHelpers");
+const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const PageHeaderActions = ({ className = "", children }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
     const childrenArray = (0, react_1.useMemo)(() => (0, pageHeaderHelpers_1.getItemsFromFragments)(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     react_1.Children.toArray(children).filter((child) => child !== null && child !== undefined && react_2.default.isValidElement(child))), [children]);
     const nonFittingElements = (0, react_1.useMemo)(() => childrenArray.slice(2, childrenArray.length), [childrenArray]);
     const fittingElements = (0, react_1.useMemo)(() => childrenArray.slice(0, 2).map(el => {
         if ((0, headerHelpers_1.isNamedChildComponent)(el, pageHeaderButton_1.PageHeaderButtonDisplayName)) {
-            return react_2.default.cloneElement(el, { key: el.props.id,
-                children: undefined
-            });
+            return react_2.default.cloneElement(el, { key: el.props.id, children: undefined });
         }
         if ((0, headerHelpers_1.isNamedChildComponent)(el, pageHeaderMenu_1.PageHeaderMenuDisplayName)) {
             return react_2.default.cloneElement(el, { key: el.props.id, onlyIcon: true });
         }
         return el;
     }), [childrenArray]);
-    const moreButton = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(collapsedItemsControl_1.PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key"), [nonFittingElements]);
-    return (childrenArray.length ? (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header-component__actions", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] }) : null);
+    const moreButton = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(collapsedItemsControl_1.PageToolbarCollapsedItemsControl, { className: "zen-page-header-component__actions-more", children: nonFittingElements }, "page-header-more-actions-key")), [nonFittingElements]);
+    const actionsContent = childrenArray.length ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-page-header-component__actions", isMobile ? "zen-page-header-component__actions--mobile-portal" : "", className]), children: [nonFittingElements.length > 0 ? moreButton : null, fittingElements] })) : null;
+    const portal = (0, usePortal_1.usePortal)(actionsContent);
+    // For mobile, render actions in a portal at the bottom center of viewport
+    if (isMobile && actionsContent) {
+        return portal;
+    }
+    return actionsContent;
 };
 exports.PageHeaderActions = PageHeaderActions;

package/dist/pageHeader/pageHeaderHelpers.js

@@ -14,12 +14,12 @@ const pageHeaderButton_1 = require("./pageHeaderButton");
 const pageHeaderMenu_1 = require("./pageHeaderMenu");
 const getItemsFromFragments = (items) => {
     const itemsArr = [];
-    react_1.default.Children.forEach(items, (child) => {
+    react_1.default.Children.forEach(items, child => {
         if (react_1.default.isValidElement(child) && child.type === react_1.default.Fragment) {
             const fragmentProps = child.props;
             if (fragmentProps && fragmentProps.children) {
                 const fragmentArr = (0, headerHelpers_1.getArrayOfChildren)(fragmentProps.children);
-                itemsArr.push(...fragmentArr.filter((el) => react_1.default.isValidElement(el)));
+                itemsArr.push(...fragmentArr.filter(el => react_1.default.isValidElement(el)));
             }
         }
         else if (react_1.default.isValidElement(child)) {
@@ -33,11 +33,11 @@ const regulatePageHeaderChildren = (children) => {
     const filters = [];
     const actions = [];
     const wrappedActions = [];
-    const childrenArray = (0, headerHelpers_1.getArrayOfChildren)(children).filter((child) => child !== null && child !== undefined);
+    const childrenArray = (0, headerHelpers_1.getArrayOfChildren)(children).filter(child => child !== null && child !== undefined);
     const preparedChildrenArr = (0, exports.getItemsFromFragments)(childrenArray);
-    preparedChildrenArr.forEach((child) => {
+    preparedChildrenArr.forEach(child => {
         const isValidElement = react_1.default.isValidElement(child);
-        if (!filters.length && isValidElement && (child.type === pageHeaderFilters_1.PageHeaderFilters)) {
+        if (!filters.length && isValidElement && child.type === pageHeaderFilters_1.PageHeaderFilters) {
             filters.push(child);
             return;
         }
@@ -45,7 +45,7 @@ const regulatePageHeaderChildren = (children) => {
             filters.push((0, jsx_runtime_1.jsx)(pageHeaderFilters_1.PageHeaderFilters, { children: child }, "page-header-filters-key"));
             return;
         }
-        if (!wrappedActions.length && isValidElement && (child.type === pageHeaderActions_1.PageHeaderActions)) {
+        if (!wrappedActions.length && isValidElement && child.type === pageHeaderActions_1.PageHeaderActions) {
             wrappedActions.push(child);
             return;
         }

package/dist/pagination/paginationText/paginationText.js

@@ -45,6 +45,8 @@ const PaginationText = ({
   } = (0, useLanguage_1.useLanguage)();
   const children = translate("Showing {from} - {to} of {total}").replace("{from}", from.toString()).replace("{to}", to.toString()).replace("{total}", amount.toString());
   return (0, jsx_runtime_1.jsx)("span", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
     className: "zen-pagination__text",
     children: children
   });

package/dist/pill/components/pillActionable/pillActionable.js

@@ -37,7 +37,7 @@ const ActionablePill = ({ onChange, disabled, readonly, className, children, ico
     }, [disabled, readonly, active, onChange]);
     const onKeyUpHandler = (0, react_1.useCallback)((e) => {
         var _a;
-        if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+        if (e.key === "Tab" || e.key === "Enter" || e.key === " " || e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowDown") {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-pill-actionable--keyboard-nav");
         }
     }, [ref]);

package/dist/pill/pill.js

@@ -18,15 +18,18 @@ const pillNonActionable_1 = require("./components/pillNonActionable/pillNonActio
 const pillActionable_1 = require("./components/pillActionable/pillActionable");
 const getPillSizeClassName_1 = require("./utils/getPillSizeClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const Pill = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
     const isActionable = !!props.onChange && props.active !== undefined;
     const isFixedSize = props.size && props.size !== "default" && props.size !== "fullWidth";
     const isEmptyContent = !props.children;
     const isDrive = (0, useDrive_1.useDrive)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const pillClassNames = (0, classNames_1.classNames)([
         "zen-pill-new",
         isDrive ? "zen-pill-new--drive" : "",
+        isMobile && !isDrive ? "zen-pill-new--mobile" : "",
         !isFixedSize ? (0, getPillSizeClassName_1.getPillSizeClassName)(props.size || "default") : "",
         isEmptyContent ? "zen-pill-new--empty" : "",
         className !== null && className !== void 0 ? className : ""

package/dist/pillAction/pillAction.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../commonHelpers/utils");
+const react_1 = require("react");
 const iconCheckmark_1 = require("../icons/deprecated/iconCheckmark");
 /**
  * @deprecated - will be removed in the next releases.
  */
 const PillAction = ({ onChange, disabled, children }) => {
-    const id = (0, utils_1.generateId)();
+    const id = (0, react_1.useId)();
     return (0, jsx_runtime_1.jsxs)("div", { className: "zen-pill-actionable", children: [(0, jsx_runtime_1.jsx)("input", { onChange: onChange, id: id, className: "zen-pill-actionable__input", type: "checkbox", disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { className: "zen-pill-actionable__block zen-pill-actionable__block--actionable", htmlFor: id, children: [(0, jsx_runtime_1.jsx)(iconCheckmark_1.IconCheckmark, { size: "big", className: "zen-pill-actionable__icon" }), children] })] });
 };
 exports.PillAction = PillAction;

package/dist/pillExpandable/pillContent.js

@@ -18,8 +18,8 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
         onClick && onClick();
         onActionClick();
     }, [onActionClick]);
-    const renderMainButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? mainActionClick(data.onClick) : undefined, type: "primary", children: data.text })), [mainActionClick]);
-    const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? secondaryActionClick(data.onClick) : undefined, type: "tertiary", children: data.text })), [secondaryActionClick]);
+    const renderMainButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: mainActionClick(data.onClick), type: "primary", children: data.text })), [mainActionClick]);
+    const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: secondaryActionClick(data.onClick), type: "tertiary", children: data.text })), [secondaryActionClick]);
     const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);

package/dist/pillExpandable/pillExpandable.js

@@ -71,6 +71,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const getProps_1 = require("./getProps");
 const skeleton_1 = require("../skeleton/skeleton");
 const reactHelpers_1 = require("../commonHelpers/reactHelpers/reactHelpers");
+const divider_1 = require("../divider/divider");
 const MAX_PILLS_TO_DISPLAY_IN_POPUP = 2;
 const PillContext = (0, react_1.createContext)({
   level: 0,
@@ -394,7 +395,7 @@ const PillExpandableBase = ({
               errorHandler: errorHandler,
               descriptionId: descriptionId
             }), childToDisplay, moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-              children: [(0, jsx_runtime_1.jsx)("div", {
+              children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {
                 className: "zen-status-pill-popup__divider"
               }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonMoreProps, {
                 type: "tertiary",

package/dist/radio/radio.js

@@ -19,11 +19,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const Radio = (_a) => {
     var { fullWidth, id, reverse, checked, title, className = "", name, value, children, wrappedInLabel, disabled, ref } = _a, rest = __rest(_a, ["fullWidth", "id", "reverse", "checked", "title", "className", "name", "value", "children", "wrappedInLabel", "disabled", "ref"]);
     const generatedId = react_1.default.useId();
     const intId = generatedId;
+    const isMobile = (0, useMobile_1.useMobile)();
     const driveClassess = (0, useDriveClassName_1.useDriveClassName)("zen-radio");
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-radio__wrapper", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : (0, jsx_runtime_1.jsx)("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-radio__label", fullWidth ? "zen-radio__label--full-width" : "", wrappedInLabel ? "zen-radio__label--input-wrapper" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [wrappedInLabel ? (0, jsx_runtime_1.jsx)("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)) : null, children ? (0, jsx_runtime_1.jsx)("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-radio__wrapper", isMobile && !driveClassess ? "zen-radio__wrapper--mobile" : "", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : (0, jsx_runtime_1.jsx)("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-radio__label", fullWidth ? "zen-radio__label--full-width" : "", wrappedInLabel ? "zen-radio__label--input-wrapper" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [wrappedInLabel ? (0, jsx_runtime_1.jsx)("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)) : null, children ? (0, jsx_runtime_1.jsx)("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
 };
 exports.Radio = Radio;

package/dist/rangeRaw/components/rangeField.js

@@ -6,15 +6,19 @@ const react_1 = require("react");
 const textInput_1 = require("../../textInput/textInput");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconException_1 = require("../../icons/iconException");
+const useMobileClassName_1 = require("../../utils/theme/useMobileClassName");
 const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
     const inputId = (0, react_1.useId)();
     const labelId = (0, react_1.useId)();
     const unitId = (0, react_1.useId)();
+    const mobileLabelClass = (0, useMobileClassName_1.useMobileClassName)("zen-range-field__label");
+    const mobileSenseClass = (0, useMobileClassName_1.useMobileClassName)("zen-range-field__sense");
+    const mobileInputClass = (0, useMobileClassName_1.useMobileClassName)("zen-range-field__input");
     const handleChange = (e) => {
         const newValue = e.target.value ? Number(e.target.value) : null;
         onChange(id, newValue);
     };
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range-field", direction === "row" ? "zen-range-field--row" : "zen-range-field--column",
-            isMinField ? "zen-range-field--min" : "zen-range-field--max", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__content", children: [(0, jsx_runtime_1.jsx)("label", { className: "zen-range-field__label zen-ellipsis", id: labelId, htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__input-container", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { inputClassName: (0, classNames_1.classNames)(["zen-range-field__input", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? (0, jsx_runtime_1.jsx)("div", { id: unitId, className: "zen-range-field__sense zen-ellipsis", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) }) : null] }), errorString && direction !== "row" ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__error", children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-range-field__error-icon", size: "bigger" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
+            isMinField ? "zen-range-field--min" : "zen-range-field--max", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__content", children: [(0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-range-field__label", "zen-ellipsis", mobileLabelClass || ""]), id: labelId, htmlFor: inputId, children: label }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__input-container", children: (0, jsx_runtime_1.jsx)(textInput_1.TextInput, { inputClassName: (0, classNames_1.classNames)(["zen-range-field__input", mobileInputClass || "", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? (0, jsx_runtime_1.jsx)("div", { id: unitId, className: (0, classNames_1.classNames)(["zen-range-field__sense", "zen-ellipsis", mobileSenseClass || ""]), children: (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) }) : null] }), errorString && direction !== "row" ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-range-field__error", children: [(0, jsx_runtime_1.jsx)(iconException_1.IconException, { className: "zen-range-field__error-icon", size: "bigger" }), (0, jsx_runtime_1.jsx)("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
 };
 exports.RangeField = RangeField;

package/dist/rangeRaw/rangeRaw.js

@@ -210,6 +210,7 @@ const footerButtons_1 = require("../footerButtons/footerButtons");
 const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const zen_1 = require("../utils/zen");
 // eslint-disable-next-line complexity
 const RangeRaw = props => {
   var _a;
@@ -294,8 +295,9 @@ const RangeRaw = props => {
     isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
   }, [isOpen]);
   const handleClearClick = (0, react_1.useCallback)(() => {
+    var _a;
     if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+      (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, blurTimeoutRef.current);
     }
     defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({
       min: null,
@@ -305,20 +307,20 @@ const RangeRaw = props => {
     setErrorType(isHasError);
   }, [allowEqualMinMax, defaultValueInner, fullBounded, max, min]);
   const handleCancelClick = (0, react_1.useCallback)(() => {
-    var _a;
+    var _a, _b;
     if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+      (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, blurTimeoutRef.current);
     }
     setCurrentValue(value);
     const isHasError = (0, rangeHelper_1.checkErrorType)(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
     setErrorType(isHasError);
     setIsOpen(false);
-    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
   }, [allowEqualMinMax, fullBounded, max, min, value]);
   const handleApplyClick = (0, react_1.useCallback)(() => {
-    var _a;
+    var _a, _b;
     if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+      (_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, blurTimeoutRef.current);
     }
     const isHasError = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
     setErrorType(isHasError);
@@ -327,7 +329,7 @@ const RangeRaw = props => {
     }
     onChange(currentValue);
     setIsOpen(false);
-    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
   }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
   const handleClearChipClick = (0, react_1.useCallback)(() => {
     handleClearClick();
@@ -344,8 +346,9 @@ const RangeRaw = props => {
   const isClearDisabled = (0, react_1.useCallback)(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
   const isApplyDisabled = (0, react_1.useCallback)(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
   const handleBlur = (0, react_1.useCallback)(e => {
+    var _a;
     if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
-      blurTimeoutRef.current = setTimeout(() => {
+      blurTimeoutRef.current = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => {
         const isHasError = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
         setErrorType(isHasError);
       }, 200);
@@ -501,12 +504,14 @@ const RangeRaw = props => {
     className: (0, classNames_1.classNames)(["zen-range", isError ? "zen-range--error" : "", className || ""]),
     children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.Chip, {
       id: chipId,
+      className: className,
       status: isClearDisabled() ? undefined : chipStatus || "active",
       isOpen: isOpen,
       disabled: disabled,
       onClick: handleTriggerClick,
       onClose: isClearDisabled() ? undefined : handleClearChipClick,
       triggerRef: triggerRef,
+      dataRole: "dialog",
       icon: chipIcon,
       children: selection ? selection : chipName
     }) : (0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({

package/dist/react-chartjs/chart.js

@@ -16,6 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const auto_1 = require("chart.js/auto");
 const utils_1 = require("./utils");
+const zen_1 = require("../utils/zen");
 const ChartComponent = function (props, ref) {
     const _a = props, { height = 150, width = 300, redraw = false, datasetIdKey, type, data, options, plugins = [], fallbackContent, updateMode } = _a, canvasProps = __rest(_a, ["height", "width", "redraw", "datasetIdKey", "type", "data", "options", "plugins", "fallbackContent", "updateMode"]);
     const canvasRef = (0, react_1.useRef)(null);
@@ -55,23 +56,25 @@ const ChartComponent = function (props, ref) {
         }
     }, [redraw, data.datasets, datasetIdKey]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!chartRef.current) {
             return;
         }
         if (redraw) {
             destroyChart();
-            setTimeout(renderChart);
+            (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, renderChart);
         }
         else {
             chartRef.current.update(updateMode);
         }
     }, [redraw, options, data.labels, data.datasets, updateMode, destroyChart, renderChart]);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!chartRef.current) {
             return;
         }
         destroyChart();
-        setTimeout(renderChart);
+        (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, renderChart);
     }, [destroyChart, renderChart, type]);
     (0, react_1.useEffect)(() => {
         renderChart();

package/dist/searchInputRaw/searchInputRaw.js

@@ -102,6 +102,8 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+// eslint-disable-next-line complexity
 const SearchInputRaw = props => {
   const {
     className = "",
@@ -116,7 +118,12 @@ const SearchInputRaw = props => {
     autoFocus,
     id,
     onFocus,
-    ref
+    ref,
+    role,
+    ariaAutocomplete,
+    ariaControls,
+    ariaHaspopup,
+    ariaExpanded
   } = props;
   const {
     name,
@@ -133,10 +140,11 @@ const SearchInputRaw = props => {
   const ariaLabelValue = ariaLabel || translate("Search");
   const disabledClassName = disabled ? "zen-search-input__input--disabled" : "";
   const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
   const driveCloseButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-search-input__close-button");
   const searchIconProps = {
     className: "zen-search-input__pre-icon",
-    size: isDrive ? "huge" : "large"
+    size: isDrive || isMobile ? "huge" : "large"
   };
   const searchIcon = (0, jsx_runtime_1.jsx)(iconSearch_1.IconSearch, Object.assign({}, searchIconProps));
   const handleChange = event => {
@@ -144,19 +152,19 @@ const SearchInputRaw = props => {
   };
   let closeButton = null;
   if (!withDefaultCloseIcon) {
-    const closeButtonClassName = `zen-search-input__close-button ${value.length ? "zen-search-input__close-button--visible" : ""} ${driveCloseButtonClassName || ""}`;
+    const closeButtonClassName = ["zen-search-input__close-button", value.length ? "zen-search-input__close-button--visible" : "", isMobile && !isDrive ? "zen-search-input__close-button--mobile" : "", driveCloseButtonClassName || ""];
     const onClick = () => {
       onChange === null || onChange === void 0 ? void 0 : onChange("");
     };
     closeButton = (0, jsx_runtime_1.jsx)("button", {
       type: "button",
       tabIndex: value.length ? 0 : -1,
-      className: closeButtonClassName,
+      className: (0, classNames_1.classNames)(closeButtonClassName),
       onClick: onClick,
       title: closeButtonTitleValue,
       children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
         className: "zen-search-input__close-icon",
-        size: isDrive ? "huge" : "large"
+        size: isDrive || isMobile ? "huge" : "large"
       })
     });
   }
@@ -174,9 +182,12 @@ const SearchInputRaw = props => {
       value: String(value)
     });
   }
-  return (0, jsx_runtime_1.jsx)("div", {
-    onClick: onClickHandler,
-    role: "search",
+  const wrapperAttributes = props.role !== undefined ? {} : {
+    role: "search"
+  };
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    onClick: onClickHandler
+  }, wrapperAttributes, {
     className: (0, classNames_1.classNames)(["zen-search-input", className]),
     children: (0, jsx_runtime_1.jsx)(inputAdornments_1.InputAdornments, {
       name: name,
@@ -197,9 +208,13 @@ const SearchInputRaw = props => {
       autoFocus: autoFocus,
       onFocus: onFocus,
       ariaLabel: ariaLabelValue,
-      ariaDescribedby: props.ariaDescribedby
+      role: role,
+      ariaAutocomplete: ariaAutocomplete,
+      ariaControls: ariaControls,
+      ariaHaspopup: ariaHaspopup,
+      ariaExpanded: ariaExpanded === undefined ? undefined : ariaExpanded === "true" || ariaExpanded === true
     })
-  });
+  }));
 };
 exports.SearchInputRaw = SearchInputRaw;
 exports.SearchInputRaw.displayName = "SearchInputRaw";

package/dist/searchInputRaw/types.d.ts

@@ -14,13 +14,18 @@ export interface ISearchInputRawBase {
     withDefaultCloseIcon?: boolean;
     id?: string;
     /**
-    * @deprecated
-    * @param withNewSearchIcon - will be removed in the next major release
-    */
+     * @deprecated
+     * @param withNewSearchIcon - will be removed in the next major release
+     */
     withNewSearchIcon?: boolean;
     autoFocus?: boolean;
     ariaDescribedby?: string;
     ref?: React.RefObject<HTMLInputElement | null>;
+    role?: string | undefined;
+    ariaAutocomplete?: "list" | "none" | "inline" | "both";
+    ariaControls?: string;
+    ariaHaspopup?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
+    ariaExpanded?: boolean | "true" | "false";
 }
 export interface ISearchInputRawDefault extends ISearchInputRawBase {
     value: string;