@geotab/zenith 3.6.3-beta.0 → 3.7.0-beta.0

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PillContent } from "./pillContent";
+export const PillExpandablePopoverContent = ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }) => (_jsxs(_Fragment, { children: [variant === "placeholder" && customContent, variant === "default" && (_jsx(PillContent, { onActionClick: onActionClick, descriptionText: descriptionText, date: date, count: count, mainAction: mainAction, secondaryAction: secondaryAction, tertiaryAction: tertiaryAction, errorHandler: errorHandler, descriptionId: descriptionId })), childToDisplay.length > 0 && (_jsx("div", { className: "zen-status-pill-popup__children", children: childToDisplay }))] }));

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

@@ -5,26 +5,33 @@ import { IconChevronTop } from "../icons/iconChevronTop";
 import { IconChevronBottom } from "../icons/iconChevronBottom";
 import { IconException } from "../icons/iconException";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, ref, className, descriptionId }) => {
+export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId }) => {
     const iconDriveClassName = useDriveClassName("icon");
     const containerDriveClassName = useDriveClassName("zen-status-pill__container");
     const onExpandHandler = useCallback(() => {
         onExpand && onExpand();
     }, [onExpand]);
     const ChevronIcon = expanded ? IconChevronTop : 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 _jsxs("button", { type: "button", className: 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 && _jsx("div", { className: classNames([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
+                    isLargeIcon ? "zen-status-pill__icon--large" : "",
                     hasText ? "" : "zen-status-pill__icon--standalone"
                 ]), children: createElement(icon, {
                     size: iconSize
-                }) }), hasText && _jsx("div", { className: `zen-status-pill__text zen-status-pill__text--${type} zen-ellipsis`, children: text }), includeExpandIcon && _jsx("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: _jsx("div", { className: "zen-status-pill__icon", children: createElement(ChevronIcon, {
-                        size: iconDriveClassName ? "huge" : "large"
+                }) }), hasText && _jsx("div", { className: classNames([
+                    "zen-status-pill__text",
+                    `zen-status-pill__text--${type}`,
+                    "zen-ellipsis",
+                    isTextCentered ? "zen-status-pill__text--centered" : ""
+                ]), children: text }), includeExpandIcon && _jsx("div", { className: `zen-status-pill__expand-button zen-status-pill__expand-button--${type}`, "aria-label": expandAriaText, children: _jsx("div", { className: "zen-status-pill__icon", children: createElement(ChevronIcon, {
+                        size: iconSize
                     }) }) })] });
 };
 PillExpandableSimple.displayName = "PillExpandableSimple";

package/esm/summary/summary.js

@@ -31,6 +31,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");
 export const Summary = ({
   color,
   title,
@@ -66,8 +92,10 @@ export const Summary = ({
         children: title
       }), tooltip && _jsx(Tooltip, {
         alignment: "top",
-        trigger: _jsx("div", {
+        trigger: _jsx("button", {
+          type: "button",
           className: "zen-summary__trigger",
+          "aria-label": translate("Information"),
           children: _jsx(IconInfoCircle, {
             size: "large",
             className: "zen-summary__title-icon"

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

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
@@ -5,58 +6,154 @@ import { Tooltip } from "../tooltip/tooltip";
 import { SummaryTileTrigger } from "./summaryTileTrigger";
 import { getTypeClassName } from "./utils/getTypeClassName";
 import { IconInfoCircle } from "../icons/iconInfoCircle";
+import { useLanguage } from "../utils/localization/useLanguage";
 import { IconWarning } from "../icons/iconWarning";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { IconException } from "../icons/iconException";
+import { Skeleton } from "../skeleton/skeleton";
+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");
 export 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 || (SummaryTileType = {}));
 export var SummaryTileSize;
 (function (SummaryTileSize) {
-    SummaryTileSize["Small"] = "small";
-    SummaryTileSize["Medium"] = "medium";
+  SummaryTileSize["Small"] = "small";
+  SummaryTileSize["Medium"] = "medium";
 })(SummaryTileSize || (SummaryTileSize = {}));
 export const SummaryTileDisplayName = "SummaryTile";
-export 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,
-            [SummaryTileType.Success]: IconCheckRadio,
-            [SummaryTileType.Error]: IconWarning,
-            [SummaryTileType.Active]: IconInfoCircle,
-            [SummaryTileType.Default]: IconInfoCircle,
-            [SummaryTileType.Info]: IconInfoCircle
-        };
-        return iconIds[tileType];
-    }, [tileType]);
-    const componentProps = {
-        className: classNames([
-            "zen-summary-tile",
-            getTypeClassName(tileType),
-            `zen-summary-tile--${size}`,
-            onClick ? "zen-summary-tile--action" : "",
-            className || ""
-        ]),
-        "data-summary-tile-id": eltId
+export const SummaryTile = ({
+  className,
+  children,
+  size = SummaryTileSize.Small,
+  title,
+  tileType = SummaryTileType.Default,
+  id,
+  onClick,
+  tooltipText,
+  tooltipAlignment = "top",
+  isLoading = false
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const generatedId = React.useId();
+  const eltId = id || generatedId;
+  const memoizedGetIconId = React.useMemo(() => {
+    const iconIds = {
+      [SummaryTileType.Warning]: IconException,
+      [SummaryTileType.Success]: IconCheckRadio,
+      [SummaryTileType.Error]: IconWarning,
+      [SummaryTileType.Active]: IconInfoCircle,
+      [SummaryTileType.Default]: IconInfoCircle,
+      [SummaryTileType.Info]: IconInfoCircle
     };
-    if (onClick) {
-        componentProps.onClick = () => {
-            onClick(eltId);
-        };
-    }
-    const Tag = onClick ? "button" : "div";
-    return _jsxs(Tag, Object.assign({}, componentProps, { children: [_jsxs("div", { className: "zen-summary-tile__title-block", children: [_jsx("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? _jsx(Tooltip, { alignment: tooltipAlignment, trigger: _jsx(SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), _jsx("div", { className: "zen-summary-tile__content", children: children })] }));
+    return iconIds[tileType];
+  }, [tileType]);
+  const isInteractive = onClick && !isLoading;
+  const componentProps = {
+    className: classNames(["zen-summary-tile", getTypeClassName(tileType), `zen-summary-tile--${size}`, isInteractive ? "zen-summary-tile--action" : "", className || ""]),
+    "data-summary-tile-id": eltId
+  };
+  if (isInteractive) {
+    componentProps.onClick = () => {
+      onClick(eltId);
+    };
+  }
+  if (isLoading) {
+    return _jsxs("div", Object.assign({}, componentProps, {
+      children: [_jsx("div", {
+        className: "zen-summary-tile__title-block",
+        children: _jsx(Skeleton, {
+          type: "text",
+          height: 16
+        })
+      }), _jsx("div", {
+        className: "zen-summary-tile__content",
+        children: _jsx(Skeleton, {
+          type: "text",
+          height: 32
+        })
+      })]
+    }));
+  }
+  const tooltipTrigger = tooltipText ? _jsx(Tooltip, {
+    alignment: tooltipAlignment,
+    trigger: _jsx(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 _jsxs("div", {
+      className: componentProps.className,
+      "data-summary-tile-id": componentProps["data-summary-tile-id"],
+      children: [_jsxs(Tag, {
+        className: "zen-summary-tile__clickable-area",
+        onClick: componentProps.onClick,
+        children: [_jsx("div", {
+          className: "zen-summary-tile__title-block",
+          children: _jsx("div", {
+            className: "zen-summary-tile__title-text zen-ellipsis heading-05",
+            children: title
+          })
+        }), _jsx("div", {
+          className: "zen-summary-tile__content",
+          children: children
+        })]
+      }), tooltipTrigger]
+    });
+  }
+  return _jsxs(Tag, Object.assign({}, componentProps, {
+    children: [_jsxs("div", {
+      className: "zen-summary-tile__title-block",
+      children: [_jsx("div", {
+        className: "zen-summary-tile__title-text zen-ellipsis heading-05",
+        children: title
+      }), tooltipTrigger]
+    }), _jsx("div", {
+      className: "zen-summary-tile__content",
+      children: children
+    })]
+  }));
 };
-SummaryTile.displayName = SummaryTileDisplayName;
+SummaryTile.displayName = SummaryTileDisplayName;

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

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 export const SummaryTileTrigger = (_a) => {
     var { icon, ref } = _a, restProps = __rest(_a, ["icon", "ref"]);
-    return _jsx("div", Object.assign({ className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
+    return _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/esm/toggleButtonRaw/toggleButtonRaw.js

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

package/esm/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/esm/utils/localization/getSupportedLanguage.js

@@ -1,10 +1,30 @@
 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"
 ];
-export const getSupportedLanguage = (language) => supportedLanguages.includes(language)
-    ? language
-    : "en";
+export const getSupportedLanguage = (language) => supportedLanguages.includes(language) ? language : "en";

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

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.6.3-beta.0",
+    "version": "3.7.0-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -11,9 +11,6 @@
         "**/react-chartjs/dateAdapter.ts",
         "**/react-chartjs/dateAdapter.js"
     ],
-    "publishConfig": {
-        "access": "public"
-    },
     "scripts": {
         "test": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest",
         "start": "npm run storybook --loglevel verbose",
@@ -119,5 +116,8 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "publishConfig": {
+        "access": "public"
     }
 }