@geotab/zenith 3.6.3 → 3.7.0-beta.0

package/dist/pillExpandable/pillExpandablePopoverContent.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { TLazyContent } from "../skeleton/lazyContent";
+import { IPillExpandableAction, TPopoverVariant } from "./pillExpandable";
+interface IPillExpandablePopoverContent {
+    variant: TPopoverVariant;
+    customContent?: ReactNode;
+    onActionClick: () => void;
+    descriptionText?: TLazyContent<ReactNode>;
+    date?: TLazyContent<string>;
+    count?: TLazyContent<number>;
+    mainAction?: TLazyContent<IPillExpandableAction>;
+    secondaryAction?: TLazyContent<IPillExpandableAction>;
+    tertiaryAction?: TLazyContent<IPillExpandableAction>;
+    errorHandler: (e: unknown) => ReactNode | undefined;
+    descriptionId?: string;
+    childToDisplay: ReactNode[];
+}
+export declare const PillExpandablePopoverContent: ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }: IPillExpandablePopoverContent) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pillExpandable/pillExpandablePopoverContent.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PillExpandablePopoverContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const pillContent_1 = require("./pillContent");
+const PillExpandablePopoverContent = ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [variant === "placeholder" && customContent, variant === "default" && ((0, jsx_runtime_1.jsx)(pillContent_1.PillContent, { onActionClick: onActionClick, descriptionText: descriptionText, date: date, count: count, mainAction: mainAction, secondaryAction: secondaryAction, tertiaryAction: tertiaryAction, errorHandler: errorHandler, descriptionId: descriptionId })), childToDisplay.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill-popup__children", children: childToDisplay }))] }));
+exports.PillExpandablePopoverContent = PillExpandablePopoverContent;

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -1,18 +1,20 @@
 import { FC, RefObject } from "react";
-import { IPillExpandable } from "./pillExpandable";
+import { IPillExpandableBase, TPillType } from "./pillExpandable";
 import { IIcon } from "../icons/icon";
-interface IPillExpandableSimple extends IPillExpandable {
+interface IPillExpandableSimple extends IPillExpandableBase {
     includeExpandIcon?: boolean;
     expanded?: boolean;
     expandAriaText?: string;
     onExpand?: () => void;
     icon?: FC<IIcon> | false;
     isBeta?: boolean;
+    isMobile?: boolean;
     ref?: RefObject<HTMLButtonElement | null>;
     descriptionId?: string;
+    type?: TPillType;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/pillExpandable/pillExpandableSimple.js

@@ -8,26 +8,33 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, ref, className, descriptionId }) => {
+const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
     const containerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill__container");
     const onExpandHandler = (0, react_1.useCallback)(() => {
         onExpand && onExpand();
     }, [onExpand]);
     const ChevronIcon = expanded ? iconChevronTop_1.IconChevronTop : iconChevronBottom_1.IconChevronBottom;
-    const defaultIconSize = iconDriveClassName ? "huge" : "large";
-    const iconSize = isBeta ? "big" : defaultIconSize;
+    const isLargeIcon = Boolean(iconDriveClassName || isMobile);
+    const iconSize = isBeta ? "big" : isLargeIcon ? "large" : "big";
     const hasText = (text || "").trim().length > 0;
+    const isTextCentered = icon === false && !includeExpandIcon;
     return (0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classNames_1.classNames)([
             "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", className || "", "zen-ellipsis"
         ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
+                    isLargeIcon ? "zen-status-pill__icon--large" : "",
                     hasText ? "" : "zen-status-pill__icon--standalone"
                 ]), children: (0, react_1.createElement)(icon, {
                     size: iconSize
-                }) }), hasText && (0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__text zen-status-pill__text--${type} zen-ellipsis`, children: text }), includeExpandIcon && (0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
-                        size: iconDriveClassName ? "huge" : "large"
+                }) }), hasText && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+                    "zen-status-pill__text",
+                    `zen-status-pill__text--${type}`,
+                    "zen-ellipsis",
+                    isTextCentered ? "zen-status-pill__text--centered" : ""
+                ]), children: text }), includeExpandIcon && (0, jsx_runtime_1.jsx)("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: (0, jsx_runtime_1.jsx)("div", { className: "zen-status-pill__icon", children: (0, react_1.createElement)(ChevronIcon, {
+                        size: iconSize
                     }) }) })] });
 };
 exports.PillExpandableSimple = PillExpandableSimple;

package/dist/summary/summary.js

@@ -39,6 +39,32 @@ injectString("tr", "Summary color", "\xD6zet rengi");
 injectString("zh-Hans", "Summary color", "\u6458\u8981\u989C\u8272");
 injectString("zh-TW", "Summary color", "\u6458\u8981\u8272\u5F69");
 injectString("ro-RO", "Summary color", "Culoare sumar");
+injectString("cs", "Information", "Informace");
+injectString("da-DK", "Information", "Information");
+injectString("de", "Information", "Information");
+injectString("en", "Information", "Information");
+injectString("es", "Information", "Informaci\xF3n");
+injectString("fi-FI", "Information", "Tiedot");
+injectString("fr", "Information", "Renseignements");
+injectString("fr-FR", "Information", "Informations");
+injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
+injectString("id", "Information", "Informasi");
+injectString("it", "Information", "Informazioni");
+injectString("ja", "Information", "\u60C5\u5831");
+injectString("ko-KR", "Information", "\uC815\uBCF4");
+injectString("ms", "Information", "Maklumat");
+injectString("nb-NO", "Information", "Informasjon");
+injectString("nl", "Information", "Informatie");
+injectString("pl", "Information", "Informacje");
+injectString("pt-BR", "Information", "Informa\xE7\xF5es");
+injectString("pt-PT", "Information", "Informa\xE7\xE3o");
+injectString("sk-SK", "Information", "Inform\xE1cie");
+injectString("sv", "Information", "Information");
+injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "Information", "Bilgi");
+injectString("zh-Hans", "Information", "\u4FE1\u606F");
+injectString("zh-TW", "Information", "\u8CC7\u8A0A");
+injectString("ro-RO", "Information", "Informa\u021Bii");
 const Summary = ({
   color,
   title,
@@ -74,8 +100,10 @@ const Summary = ({
         children: title
       }), tooltip && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
         alignment: "top",
-        trigger: (0, jsx_runtime_1.jsx)("div", {
+        trigger: (0, jsx_runtime_1.jsx)("button", {
+          type: "button",
           className: "zen-summary__trigger",
+          "aria-label": translate("Information"),
           children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, {
             size: "large",
             className: "zen-summary__title-icon"

package/dist/summaryTile/summaryTile.d.ts

@@ -28,9 +28,10 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipText?: React.ReactNode;
     tooltipAlignment?: TAlignment;
     tooltipSize?: TooltipSize;
+    isLoading?: boolean;
 }
 export declare const SummaryTileDisplayName = "SummaryTile";
 export declare const SummaryTile: {
-    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/summaryTile/summaryTile.js

@@ -1,89 +1,199 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Information", "Informace");
+injectString("da-DK", "Information", "Information");
+injectString("de", "Information", "Information");
+injectString("en", "Information", "Information");
+injectString("es", "Information", "Informaci\xF3n");
+injectString("fi-FI", "Information", "Tiedot");
+injectString("fr", "Information", "Renseignements");
+injectString("fr-FR", "Information", "Informations");
+injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
+injectString("id", "Information", "Informasi");
+injectString("it", "Information", "Informazioni");
+injectString("ja", "Information", "\u60C5\u5831");
+injectString("ko-KR", "Information", "\uC815\uBCF4");
+injectString("ms", "Information", "Maklumat");
+injectString("nb-NO", "Information", "Informasjon");
+injectString("nl", "Information", "Informatie");
+injectString("pl", "Information", "Informacje");
+injectString("pt-BR", "Information", "Informa\xE7\xF5es");
+injectString("pt-PT", "Information", "Informa\xE7\xE3o");
+injectString("sk-SK", "Information", "Inform\xE1cie");
+injectString("sv", "Information", "Information");
+injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "Information", "Bilgi");
+injectString("zh-Hans", "Information", "\u4FE1\u606F");
+injectString("zh-TW", "Information", "\u8CC7\u8A0A");
+injectString("ro-RO", "Information", "Informa\u021Bii");
 const React = __importStar(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const tooltip_1 = require("../tooltip/tooltip");
 const summaryTileTrigger_1 = require("./summaryTileTrigger");
 const getTypeClassName_1 = require("./utils/getTypeClassName");
 const iconInfoCircle_1 = require("../icons/iconInfoCircle");
+const useLanguage_1 = require("../utils/localization/useLanguage");
 const iconWarning_1 = require("../icons/iconWarning");
 const iconCheckRadio_1 = require("../icons/iconCheckRadio");
 const iconException_1 = require("../icons/iconException");
+const skeleton_1 = require("../skeleton/skeleton");
 var SummaryTileType;
 (function (SummaryTileType) {
-    SummaryTileType["Error"] = "error";
-    SummaryTileType["Success"] = "success";
-    SummaryTileType["Warning"] = "warning";
-    SummaryTileType["Active"] = "active";
-    SummaryTileType["Default"] = "default";
-    /**
-     * @deprecated - will be removed in the next releases.
-     * Please use {@link SummaryTileType.Active} instead.
-    */
-    SummaryTileType["Info"] = "info";
+  SummaryTileType["Error"] = "error";
+  SummaryTileType["Success"] = "success";
+  SummaryTileType["Warning"] = "warning";
+  SummaryTileType["Active"] = "active";
+  SummaryTileType["Default"] = "default";
+  /**
+   * @deprecated - will be removed in the next releases.
+   * Please use {@link SummaryTileType.Active} instead.
+  */
+  SummaryTileType["Info"] = "info";
 })(SummaryTileType || (exports.SummaryTileType = SummaryTileType = {}));
 var SummaryTileSize;
 (function (SummaryTileSize) {
-    SummaryTileSize["Small"] = "small";
-    SummaryTileSize["Medium"] = "medium";
+  SummaryTileSize["Small"] = "small";
+  SummaryTileSize["Medium"] = "medium";
 })(SummaryTileSize || (exports.SummaryTileSize = SummaryTileSize = {}));
 exports.SummaryTileDisplayName = "SummaryTile";
-const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top" }) => {
-    const generatedId = React.useId();
-    const eltId = id || generatedId;
-    const memoizedGetIconId = React.useMemo(() => {
-        const iconIds = {
-            [SummaryTileType.Warning]: iconException_1.IconException,
-            [SummaryTileType.Success]: iconCheckRadio_1.IconCheckRadio,
-            [SummaryTileType.Error]: iconWarning_1.IconWarning,
-            [SummaryTileType.Active]: iconInfoCircle_1.IconInfoCircle,
-            [SummaryTileType.Default]: iconInfoCircle_1.IconInfoCircle,
-            [SummaryTileType.Info]: iconInfoCircle_1.IconInfoCircle
-        };
-        return iconIds[tileType];
-    }, [tileType]);
-    const componentProps = {
-        className: (0, classNames_1.classNames)([
-            "zen-summary-tile",
-            (0, getTypeClassName_1.getTypeClassName)(tileType),
-            `zen-summary-tile--${size}`,
-            onClick ? "zen-summary-tile--action" : "",
-            className || ""
-        ]),
-        "data-summary-tile-id": eltId
+const SummaryTile = ({
+  className,
+  children,
+  size = SummaryTileSize.Small,
+  title,
+  tileType = SummaryTileType.Default,
+  id,
+  onClick,
+  tooltipText,
+  tooltipAlignment = "top",
+  isLoading = false
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const generatedId = React.useId();
+  const eltId = id || generatedId;
+  const memoizedGetIconId = React.useMemo(() => {
+    const iconIds = {
+      [SummaryTileType.Warning]: iconException_1.IconException,
+      [SummaryTileType.Success]: iconCheckRadio_1.IconCheckRadio,
+      [SummaryTileType.Error]: iconWarning_1.IconWarning,
+      [SummaryTileType.Active]: iconInfoCircle_1.IconInfoCircle,
+      [SummaryTileType.Default]: iconInfoCircle_1.IconInfoCircle,
+      [SummaryTileType.Info]: iconInfoCircle_1.IconInfoCircle
+    };
+    return iconIds[tileType];
+  }, [tileType]);
+  const isInteractive = onClick && !isLoading;
+  const componentProps = {
+    className: (0, classNames_1.classNames)(["zen-summary-tile", (0, getTypeClassName_1.getTypeClassName)(tileType), `zen-summary-tile--${size}`, isInteractive ? "zen-summary-tile--action" : "", className || ""]),
+    "data-summary-tile-id": eltId
+  };
+  if (isInteractive) {
+    componentProps.onClick = () => {
+      onClick(eltId);
     };
-    if (onClick) {
-        componentProps.onClick = () => {
-            onClick(eltId);
-        };
-    }
-    const Tag = onClick ? "button" : "div";
-    return (0, jsx_runtime_1.jsxs)(Tag, Object.assign({}, componentProps, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-summary-tile__title-block", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { alignment: tooltipAlignment, trigger: (0, jsx_runtime_1.jsx)(summaryTileTrigger_1.SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-summary-tile__content", children: children })] }));
+  }
+  if (isLoading) {
+    return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, componentProps, {
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary-tile__title-block",
+        children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {
+          type: "text",
+          height: 16
+        })
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary-tile__content",
+        children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {
+          type: "text",
+          height: 32
+        })
+      })]
+    }));
+  }
+  const tooltipTrigger = tooltipText ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+    alignment: tooltipAlignment,
+    trigger: (0, jsx_runtime_1.jsx)(summaryTileTrigger_1.SummaryTileTrigger, {
+      icon: memoizedGetIconId,
+      "aria-label": translate("Information")
+    }),
+    children: tooltipText
+  }) : null;
+  const Tag = isInteractive ? "button" : "div";
+  // When both onClick and tooltipText are present, the tooltip trigger
+  // (a <button>) cannot be nested inside the tile <button>. Render the
+  // tooltip trigger as a sibling outside the clickable tile.
+  if (onClick && tooltipText) {
+    return (0, jsx_runtime_1.jsxs)("div", {
+      className: componentProps.className,
+      "data-summary-tile-id": componentProps["data-summary-tile-id"],
+      children: [(0, jsx_runtime_1.jsxs)(Tag, {
+        className: "zen-summary-tile__clickable-area",
+        onClick: componentProps.onClick,
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: "zen-summary-tile__title-block",
+          children: (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-summary-tile__title-text zen-ellipsis heading-05",
+            children: title
+          })
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-summary-tile__content",
+          children: children
+        })]
+      }), tooltipTrigger]
+    });
+  }
+  return (0, jsx_runtime_1.jsxs)(Tag, Object.assign({}, componentProps, {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-summary-tile__title-block",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary-tile__title-text zen-ellipsis heading-05",
+        children: title
+      }), tooltipTrigger]
+    }), (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-summary-tile__content",
+      children: children
+    })]
+  }));
 };
 exports.SummaryTile = SummaryTile;
-exports.SummaryTile.displayName = exports.SummaryTileDisplayName;
+exports.SummaryTile.displayName = exports.SummaryTileDisplayName;

package/dist/summaryTile/summaryTileTrigger.d.ts

@@ -3,6 +3,6 @@ import { IIcon } from "../icons/icon";
 import { RefObject } from "react";
 export interface ISummaryTileTrigger {
     icon: React.FC<IIcon>;
-    ref?: RefObject<HTMLDivElement | null>;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
 export declare const SummaryTileTrigger: ({ icon, ref, ...restProps }: ISummaryTileTrigger) => import("react/jsx-runtime").JSX.Element;

package/dist/summaryTile/summaryTileTrigger.js

@@ -39,7 +39,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const SummaryTileTrigger = (_a) => {
     var { icon, ref } = _a, restProps = __rest(_a, ["icon", "ref"]);
-    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
+    return (0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
             className: "zen-summary-tile__title-icon",
             size: "large"
         }) }));

package/dist/toggleButtonRaw/toggleButtonRaw.js

@@ -144,7 +144,8 @@ const ToggleButtonRaw = props => {
       id: checkBoxId,
       onChange: onChangeHandler,
       checked: value,
-      disabled: disabled
+      disabled: disabled,
+      role: "switch"
     }), (0, jsx_runtime_1.jsxs)("label", {
       className: (0, classNames_1.classNames)(["zen-toggler__label", isReverted ? "zen-toggler__label--reverted" : ""]),
       htmlFor: checkBoxId,

package/dist/utils/localization/getSupportedLanguage.d.ts

@@ -1,4 +1,4 @@
-declare const supportedLanguages: readonly ["en", "es", "de", "cs", "fr-FR", "fr", "id", "it", "ja", "ms", "nl", "pl", "pt-BR", "sv", "th", "tr", "zh-Hans", "ko-KR", "zh-TW", "da-DK", "fi-FI", "hu-HU", "nb-NO", "sk-SK", "pt-PT", "ro-RO"];
-export type TSupportedLanguage = typeof supportedLanguages[number];
+declare const supportedLanguages: readonly ["en", "es", "de", "cs", "fr-FR", "fr", "id", "it", "ja", "ms", "nl", "pl", "pt-BR", "sv", "th", "tr", "zh-Hans", "ko-KR", "zh-TW", "da-DK", "fi-FI", "hu-HU", "nb-NO", "sk-SK", "pt-PT", "ro-RO", "ar"];
+export type TSupportedLanguage = (typeof supportedLanguages)[number];
 export declare const getSupportedLanguage: (language: string) => TSupportedLanguage;
 export {};

package/dist/utils/localization/getSupportedLanguage.js

@@ -2,13 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSupportedLanguage = void 0;
 const supportedLanguages = [
-    "en", "es", "de", "cs", "fr-FR", "fr",
-    "id", "it", "ja", "ms", "nl", "pl", "pt-BR",
-    "sv", "th", "tr", "zh-Hans", "ko-KR", "zh-TW",
-    "da-DK", "fi-FI", "hu-HU", "nb-NO", "sk-SK",
-    "pt-PT", "ro-RO"
+    "en",
+    "es",
+    "de",
+    "cs",
+    "fr-FR",
+    "fr",
+    "id",
+    "it",
+    "ja",
+    "ms",
+    "nl",
+    "pl",
+    "pt-BR",
+    "sv",
+    "th",
+    "tr",
+    "zh-Hans",
+    "ko-KR",
+    "zh-TW",
+    "da-DK",
+    "fi-FI",
+    "hu-HU",
+    "nb-NO",
+    "sk-SK",
+    "pt-PT",
+    "ro-RO",
+    "ar"
 ];
-const getSupportedLanguage = (language) => supportedLanguages.includes(language)
-    ? language
-    : "en";
+const getSupportedLanguage = (language) => supportedLanguages.includes(language) ? language : "en";
 exports.getSupportedLanguage = getSupportedLanguage;

package/dist/utils/localization/languageContext.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const languageContext: import("react").Context<"it" | "th" | "tr" | "ms" | "id" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW" | "da-DK" | "fi-FI" | "hu-HU" | "nb-NO" | "sk-SK" | "pt-PT" | "ro-RO">;
+export declare const languageContext: import("react").Context<"it" | "th" | "tr" | "ms" | "id" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW" | "da-DK" | "fi-FI" | "hu-HU" | "nb-NO" | "sk-SK" | "pt-PT" | "ro-RO" | "ar">;

package/esm/absolute/absolute.d.ts

@@ -23,5 +23,7 @@ export interface IAbsolute extends IZenComponentProps {
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: 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 }: 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, 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 }) => {
+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 }) => {
     const popupRef = useRef(null);
     const prevScroll = useRef(0);
     const { dark } = useContext(themeContext);
@@ -35,7 +35,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
     const renderPopup = () => {
         var _a, _b;
         if (isOpen) {
-            const result = (_jsx("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: classNames(["zen-absolute", darkClassName, className || ""]), children: children })));
+            const result = (_jsx("div", Object.assign({}, accessibleAttr, { ref: popupRef, id: id, tabIndex: -1, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: classNames(["zen-absolute", darkClassName, className || ""]), children: children })));
             if (inline) {
                 return result;
             }
@@ -91,7 +91,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
             if (useTrapFocusWithTrigger === "none") {
                 return undefined;
             }
-            if (useTrapFocusWithTrigger !== "withTrigger") {
+            if (useTrapFocusWithTrigger !== "withTrigger" && focusOnOpen) {
                 if (firstFocusable) {
                     firstFocusable.focus();
                 }
@@ -105,7 +105,7 @@ export const Absolute = ({ isOpen, id, paddingX, paddingY, className, children,
             };
         }
         return () => { };
-    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds]);
+    }, [isOpen, onOpenChange, triggerRef, useTrapFocusWithTrigger, stateFullChilds, focusOnOpen]);
     useEffect(() => {
         var _a;
         if (isOpen) {

package/esm/controlledPopup/controlledPopup.d.ts

@@ -27,5 +27,7 @@ export interface IControlledPopup extends IZenComponentProps {
     ariaLabelledby?: string;
     recalculateOnScroll?: 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 }: 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, preventAttributesAutoSet, focusOnOpen }: 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 }) => {
+export const ControlledPopup = ({ isOpen, id, paddingX, paddingY, triggerRef, className, children, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, ariaLabel, ariaLabelledby, recalculateOnScroll, preventAttributesAutoSet, focusOnOpen }) => {
     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, { 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: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, children: children }));
+    return (_jsx(Absolute, { 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: "dialog", ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, recalculateOnScroll: recalculateOnScroll, focusOnOpen: focusOnOpen, children: children }));
 };

package/esm/groupsFilterRaw/groupsFilterCurrentlySelectedState.js

@@ -1,6 +1,6 @@
 import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, useId } from "react";
+import { createElement, useCallback, useId } from "react";
 import { GroupsFilterCurrentlySelectedLabel } from "./groupsFilterCommon";
 import { RelationOperator } from "./groupsFilterInterfaces";
 import { TwoOptionsSwitcher } from "../twoOptionsSwitcher/twoOptionsSwitcher";
@@ -126,9 +126,15 @@ export const GroupsFilterCurrentlySelectedState = ({
     translate
   } = useLanguage();
   const togglerId = useId();
-  const getActionButton = (label, title, icon, handleClick) => _jsx("button", {
+  const handleBackButtonKeyDown = useCallback(event => {
+    if (event.key === "ArrowLeft") {
+      onBackButtonClick();
+    }
+  }, [onBackButtonClick]);
+  const getActionButton = (label, title, icon, handleClick, handleKeyDown) => _jsx("button", {
     type: "button",
     onClick: handleClick,
+    onKeyDown: handleKeyDown,
     className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__action-button zen-groups-filter-menu__action-button-back",
     title: title,
     children: _jsxs(_Fragment, {
@@ -148,7 +154,7 @@ export const GroupsFilterCurrentlySelectedState = ({
   };
   return _jsxs("div", {
     className: "zen-groups-filter-menu__content-selected",
-    children: [getActionButton(translate("Back"), translate("Back"), IconBackArrow, onBackButtonClick), _jsx("div", {
+    children: [getActionButton(translate("Back"), translate("Back"), IconBackArrow, onBackButtonClick, handleBackButtonKeyDown), _jsx("div", {
       className: "zen-groups-filter-menu__item-wrapper",
       children: _jsx(ToggleButtonRaw, {
         onChange: handleTogglerChange,