@geotab/zenith 3.6.3 → 3.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/README.md +15 -0
  2. package/dist/absolute/absolute.d.ts +3 -1
  3. package/dist/absolute/absolute.js +4 -4
  4. package/dist/checkbox/checkbox.d.ts +3 -1
  5. package/dist/checkbox/checkbox.js +5 -8
  6. package/dist/checkboxListWithAction/checkboxListWithAction.d.ts +3 -1
  7. package/dist/checkboxListWithAction/checkboxListWithAction.js +185 -3
  8. package/dist/controlledPopup/controlledPopup.d.ts +3 -1
  9. package/dist/controlledPopup/controlledPopup.js +2 -2
  10. package/dist/dropdown/dropdownPopup.d.ts +1 -1
  11. package/dist/dropdown/dropdownTrigger.d.ts +1 -1
  12. package/dist/dropdownRaw/dropdownList.d.ts +2 -1
  13. package/dist/dropdownRaw/dropdownList.js +15 -4
  14. package/dist/dropdownRaw/dropdownPopup.d.ts +3 -1
  15. package/dist/dropdownRaw/dropdownPopup.js +35 -5
  16. package/dist/dropdownRaw/dropdownRaw.js +82 -7
  17. package/dist/dropdownRaw/dropdownSearchableTrigger.d.ts +2 -1
  18. package/dist/dropdownRaw/dropdownSearchableTrigger.js +7 -2
  19. package/dist/dropdownRaw/dropdownTrigger.d.ts +2 -1
  20. package/dist/dropdownRaw/dropdownTrigger.js +3 -5
  21. package/dist/footerButtons/footerButtons.d.ts +6 -4
  22. package/dist/footerButtons/footerButtons.js +3 -8
  23. package/dist/groupsFilterRaw/groupsFilterCurrentlySelectedState.js +8 -2
  24. package/dist/groupsFilterRaw/groupsFilterInitialState.js +16 -0
  25. package/dist/groupsFilterRaw/groupsFilterRaw.js +43 -9
  26. package/dist/groupsFilterRaw/groupsFilterTrigger.d.ts +2 -1
  27. package/dist/groupsFilterRaw/groupsFilterTrigger.js +13 -2
  28. package/dist/index.css +222 -18
  29. package/dist/index.d.ts +1 -1
  30. package/dist/list/hooks/useDragAndDrop.d.ts +3 -1
  31. package/dist/list/hooks/useDragAndDrop.js +11 -4
  32. package/dist/menu/components/menuItem.js +12 -2
  33. package/dist/menu/contexts/pathContext.d.ts +3 -1
  34. package/dist/menu/contexts/pathProvider.d.ts +1 -1
  35. package/dist/menu/contexts/pathProvider.js +1 -1
  36. package/dist/menu/controlledMenu.js +97 -29
  37. package/dist/nav/nav.d.ts +2 -1
  38. package/dist/nav/nav.js +3 -2
  39. package/dist/nav/navEditList/navEditList.js +2 -1
  40. package/dist/nav/navItem/navItem.d.ts +1 -0
  41. package/dist/nav/navItem/navItem.js +4 -1
  42. package/dist/pillExpandable/pillContent.d.ts +2 -1
  43. package/dist/pillExpandable/pillContent.js +8 -3
  44. package/dist/pillExpandable/pillExpandable.d.ts +27 -4
  45. package/dist/pillExpandable/pillExpandable.js +426 -196
  46. package/dist/pillExpandable/pillExpandablePopoverContent.d.ts +19 -0
  47. package/dist/pillExpandable/pillExpandablePopoverContent.js +7 -0
  48. package/dist/pillExpandable/pillExpandableSimple.d.ts +5 -3
  49. package/dist/pillExpandable/pillExpandableSimple.js +12 -5
  50. package/dist/summary/summary.js +29 -1
  51. package/dist/summaryTile/summaryTile.d.ts +2 -1
  52. package/dist/summaryTile/summaryTile.js +175 -65
  53. package/dist/summaryTile/summaryTileTrigger.d.ts +1 -1
  54. package/dist/summaryTile/summaryTileTrigger.js +1 -1
  55. package/dist/toggleButtonRaw/toggleButtonRaw.js +2 -1
  56. package/dist/utils/localization/getSupportedLanguage.d.ts +2 -2
  57. package/dist/utils/localization/getSupportedLanguage.js +28 -8
  58. package/dist/utils/localization/languageContext.d.ts +1 -1
  59. package/dist/utils/localization/translations/cs.json +2 -1
  60. package/dist/utils/localization/translations/de.json +2 -1
  61. package/dist/utils/localization/translations/en.json +2 -1
  62. package/dist/utils/localization/translations/es.json +2 -1
  63. package/dist/utils/localization/translations/fr-FR.json +2 -1
  64. package/dist/utils/localization/translations/fr.json +2 -1
  65. package/dist/utils/localization/translations/id.json +2 -1
  66. package/dist/utils/localization/translations/it.json +2 -1
  67. package/dist/utils/localization/translations/ja.json +2 -1
  68. package/dist/utils/localization/translations/ms.json +2 -1
  69. package/dist/utils/localization/translations/nl.json +2 -1
  70. package/dist/utils/localization/translations/pl.json +2 -1
  71. package/dist/utils/localization/translations/pt-BR.json +2 -1
  72. package/dist/utils/localization/translations/sv.json +2 -1
  73. package/dist/utils/localization/translations/th.json +2 -1
  74. package/dist/utils/localization/translations/tr.json +2 -1
  75. package/dist/utils/localization/translations/zh-Hans.json +2 -1
  76. package/esm/absolute/absolute.d.ts +3 -1
  77. package/esm/absolute/absolute.js +4 -4
  78. package/esm/checkbox/checkbox.d.ts +3 -1
  79. package/esm/checkbox/checkbox.js +5 -8
  80. package/esm/checkboxListWithAction/checkboxListWithAction.d.ts +3 -1
  81. package/esm/checkboxListWithAction/checkboxListWithAction.js +186 -4
  82. package/esm/controlledPopup/controlledPopup.d.ts +3 -1
  83. package/esm/controlledPopup/controlledPopup.js +2 -2
  84. package/esm/dropdown/dropdownPopup.d.ts +1 -1
  85. package/esm/dropdown/dropdownTrigger.d.ts +1 -1
  86. package/esm/dropdownRaw/dropdownList.d.ts +2 -1
  87. package/esm/dropdownRaw/dropdownList.js +16 -5
  88. package/esm/dropdownRaw/dropdownPopup.d.ts +3 -1
  89. package/esm/dropdownRaw/dropdownPopup.js +37 -7
  90. package/esm/dropdownRaw/dropdownRaw.js +82 -7
  91. package/esm/dropdownRaw/dropdownSearchableTrigger.d.ts +2 -1
  92. package/esm/dropdownRaw/dropdownSearchableTrigger.js +7 -2
  93. package/esm/dropdownRaw/dropdownTrigger.d.ts +2 -1
  94. package/esm/dropdownRaw/dropdownTrigger.js +3 -5
  95. package/esm/footerButtons/footerButtons.d.ts +6 -4
  96. package/esm/footerButtons/footerButtons.js +3 -8
  97. package/esm/groupsFilterRaw/groupsFilterCurrentlySelectedState.js +9 -3
  98. package/esm/groupsFilterRaw/groupsFilterInitialState.js +16 -0
  99. package/esm/groupsFilterRaw/groupsFilterRaw.js +43 -9
  100. package/esm/groupsFilterRaw/groupsFilterTrigger.d.ts +2 -1
  101. package/esm/groupsFilterRaw/groupsFilterTrigger.js +13 -2
  102. package/esm/index.d.ts +1 -1
  103. package/esm/list/hooks/useDragAndDrop.d.ts +3 -1
  104. package/esm/list/hooks/useDragAndDrop.js +11 -4
  105. package/esm/menu/components/menuItem.js +12 -2
  106. package/esm/menu/contexts/pathContext.d.ts +3 -1
  107. package/esm/menu/contexts/pathProvider.d.ts +1 -1
  108. package/esm/menu/contexts/pathProvider.js +1 -1
  109. package/esm/menu/controlledMenu.js +98 -30
  110. package/esm/nav/nav.d.ts +2 -1
  111. package/esm/nav/nav.js +3 -2
  112. package/esm/nav/navEditList/navEditList.js +2 -1
  113. package/esm/nav/navItem/navItem.d.ts +1 -0
  114. package/esm/nav/navItem/navItem.js +5 -2
  115. package/esm/pillExpandable/pillContent.d.ts +2 -1
  116. package/esm/pillExpandable/pillContent.js +8 -3
  117. package/esm/pillExpandable/pillExpandable.d.ts +27 -4
  118. package/esm/pillExpandable/pillExpandable.js +427 -197
  119. package/esm/pillExpandable/pillExpandablePopoverContent.d.ts +19 -0
  120. package/esm/pillExpandable/pillExpandablePopoverContent.js +3 -0
  121. package/esm/pillExpandable/pillExpandableSimple.d.ts +5 -3
  122. package/esm/pillExpandable/pillExpandableSimple.js +12 -5
  123. package/esm/summary/summary.js +29 -1
  124. package/esm/summaryTile/summaryTile.d.ts +2 -1
  125. package/esm/summaryTile/summaryTile.js +140 -43
  126. package/esm/summaryTile/summaryTileTrigger.d.ts +1 -1
  127. package/esm/summaryTile/summaryTileTrigger.js +1 -1
  128. package/esm/toggleButtonRaw/toggleButtonRaw.js +2 -1
  129. package/esm/utils/localization/getSupportedLanguage.d.ts +2 -2
  130. package/esm/utils/localization/getSupportedLanguage.js +28 -8
  131. package/esm/utils/localization/languageContext.d.ts +1 -1
  132. package/esm/utils/localization/translations/cs.json +2 -1
  133. package/esm/utils/localization/translations/de.json +2 -1
  134. package/esm/utils/localization/translations/en.json +2 -1
  135. package/esm/utils/localization/translations/es.json +2 -1
  136. package/esm/utils/localization/translations/fr-FR.json +2 -1
  137. package/esm/utils/localization/translations/fr.json +2 -1
  138. package/esm/utils/localization/translations/id.json +2 -1
  139. package/esm/utils/localization/translations/it.json +2 -1
  140. package/esm/utils/localization/translations/ja.json +2 -1
  141. package/esm/utils/localization/translations/ms.json +2 -1
  142. package/esm/utils/localization/translations/nl.json +2 -1
  143. package/esm/utils/localization/translations/pl.json +2 -1
  144. package/esm/utils/localization/translations/pt-BR.json +2 -1
  145. package/esm/utils/localization/translations/sv.json +2 -1
  146. package/esm/utils/localization/translations/th.json +2 -1
  147. package/esm/utils/localization/translations/tr.json +2 -1
  148. package/esm/utils/localization/translations/zh-Hans.json +2 -1
  149. package/package.json +4 -7
@@ -0,0 +1,19 @@
1
+ import { ReactNode } from "react";
2
+ import { TLazyContent } from "../skeleton/lazyContent";
3
+ import { IPillExpandableAction, TPopoverVariant } from "./pillExpandable";
4
+ interface IPillExpandablePopoverContent {
5
+ variant: TPopoverVariant;
6
+ customContent?: ReactNode;
7
+ onActionClick: () => void;
8
+ descriptionText?: TLazyContent<ReactNode>;
9
+ date?: TLazyContent<string>;
10
+ count?: TLazyContent<number>;
11
+ mainAction?: TLazyContent<IPillExpandableAction>;
12
+ secondaryAction?: TLazyContent<IPillExpandableAction>;
13
+ tertiaryAction?: TLazyContent<IPillExpandableAction>;
14
+ errorHandler: (e: unknown) => ReactNode | undefined;
15
+ descriptionId?: string;
16
+ childToDisplay: ReactNode[];
17
+ }
18
+ export declare const PillExpandablePopoverContent: ({ variant, customContent, onActionClick, descriptionText, date, count, mainAction, secondaryAction, tertiaryAction, errorHandler, descriptionId, childToDisplay }: IPillExpandablePopoverContent) => import("react/jsx-runtime").JSX.Element;
19
+ export {};
@@ -0,0 +1,3 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { PillContent } from "./pillContent";
3
+ 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 }))] }));
@@ -1,18 +1,20 @@
1
1
  import { FC, RefObject } from "react";
2
- import { IPillExpandable } from "./pillExpandable";
2
+ import { IPillExpandableBase, TPillType } from "./pillExpandable";
3
3
  import { IIcon } from "../icons/icon";
4
- interface IPillExpandableSimple extends IPillExpandable {
4
+ interface IPillExpandableSimple extends IPillExpandableBase {
5
5
  includeExpandIcon?: boolean;
6
6
  expanded?: boolean;
7
7
  expandAriaText?: string;
8
8
  onExpand?: () => void;
9
9
  icon?: FC<IIcon> | false;
10
10
  isBeta?: boolean;
11
+ isMobile?: boolean;
11
12
  ref?: RefObject<HTMLButtonElement | null>;
12
13
  descriptionId?: string;
14
+ type?: TPillType;
13
15
  }
14
16
  export declare const PillExpandableSimple: {
15
- ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
17
+ ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
16
18
  displayName: string;
17
19
  };
18
20
  export {};
@@ -5,26 +5,33 @@ import { IconChevronTop } from "../icons/iconChevronTop";
5
5
  import { IconChevronBottom } from "../icons/iconChevronBottom";
6
6
  import { IconException } from "../icons/iconException";
7
7
  import { classNames } from "../commonHelpers/classNames/classNames";
8
- export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, ref, className, descriptionId }) => {
8
+ export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, isMobile, ref, className, descriptionId }) => {
9
9
  const iconDriveClassName = useDriveClassName("icon");
10
10
  const containerDriveClassName = useDriveClassName("zen-status-pill__container");
11
11
  const onExpandHandler = useCallback(() => {
12
12
  onExpand && onExpand();
13
13
  }, [onExpand]);
14
14
  const ChevronIcon = expanded ? IconChevronTop : IconChevronBottom;
15
- const defaultIconSize = iconDriveClassName ? "huge" : "large";
16
- const iconSize = isBeta ? "big" : defaultIconSize;
15
+ const isLargeIcon = Boolean(iconDriveClassName || isMobile);
16
+ const iconSize = isBeta ? "big" : isLargeIcon ? "large" : "big";
17
17
  const hasText = (text || "").trim().length > 0;
18
+ const isTextCentered = icon === false && !includeExpandIcon;
18
19
  return _jsxs("button", { type: "button", className: classNames([
19
20
  "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", className || "", "zen-ellipsis"
20
21
  ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && _jsx("div", { className: classNames([
21
22
  "zen-status-pill__icon",
22
23
  `zen-status-pill__icon--${type}`,
24
+ isLargeIcon ? "zen-status-pill__icon--large" : "",
23
25
  hasText ? "" : "zen-status-pill__icon--standalone"
24
26
  ]), children: createElement(icon, {
25
27
  size: iconSize
26
- }) }), 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, {
27
- size: iconDriveClassName ? "huge" : "large"
28
+ }) }), hasText && _jsx("div", { className: classNames([
29
+ "zen-status-pill__text",
30
+ `zen-status-pill__text--${type}`,
31
+ "zen-ellipsis",
32
+ isTextCentered ? "zen-status-pill__text--centered" : ""
33
+ ]), 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, {
34
+ size: iconSize
28
35
  }) }) })] });
29
36
  };
30
37
  PillExpandableSimple.displayName = "PillExpandableSimple";
@@ -31,6 +31,32 @@ injectString("tr", "Summary color", "\xD6zet rengi");
31
31
  injectString("zh-Hans", "Summary color", "\u6458\u8981\u989C\u8272");
32
32
  injectString("zh-TW", "Summary color", "\u6458\u8981\u8272\u5F69");
33
33
  injectString("ro-RO", "Summary color", "Culoare sumar");
34
+ injectString("cs", "Information", "Informace");
35
+ injectString("da-DK", "Information", "Information");
36
+ injectString("de", "Information", "Information");
37
+ injectString("en", "Information", "Information");
38
+ injectString("es", "Information", "Informaci\xF3n");
39
+ injectString("fi-FI", "Information", "Tiedot");
40
+ injectString("fr", "Information", "Renseignements");
41
+ injectString("fr-FR", "Information", "Informations");
42
+ injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
43
+ injectString("id", "Information", "Informasi");
44
+ injectString("it", "Information", "Informazioni");
45
+ injectString("ja", "Information", "\u60C5\u5831");
46
+ injectString("ko-KR", "Information", "\uC815\uBCF4");
47
+ injectString("ms", "Information", "Maklumat");
48
+ injectString("nb-NO", "Information", "Informasjon");
49
+ injectString("nl", "Information", "Informatie");
50
+ injectString("pl", "Information", "Informacje");
51
+ injectString("pt-BR", "Information", "Informa\xE7\xF5es");
52
+ injectString("pt-PT", "Information", "Informa\xE7\xE3o");
53
+ injectString("sk-SK", "Information", "Inform\xE1cie");
54
+ injectString("sv", "Information", "Information");
55
+ injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
56
+ injectString("tr", "Information", "Bilgi");
57
+ injectString("zh-Hans", "Information", "\u4FE1\u606F");
58
+ injectString("zh-TW", "Information", "\u8CC7\u8A0A");
59
+ injectString("ro-RO", "Information", "Informa\u021Bii");
34
60
  export const Summary = ({
35
61
  color,
36
62
  title,
@@ -66,8 +92,10 @@ export const Summary = ({
66
92
  children: title
67
93
  }), tooltip && _jsx(Tooltip, {
68
94
  alignment: "top",
69
- trigger: _jsx("div", {
95
+ trigger: _jsx("button", {
96
+ type: "button",
70
97
  className: "zen-summary__trigger",
98
+ "aria-label": translate("Information"),
71
99
  children: _jsx(IconInfoCircle, {
72
100
  size: "large",
73
101
  className: "zen-summary__title-icon"
@@ -28,9 +28,10 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
28
28
  tooltipText?: React.ReactNode;
29
29
  tooltipAlignment?: TAlignment;
30
30
  tooltipSize?: TooltipSize;
31
+ isLoading?: boolean;
31
32
  }
32
33
  export declare const SummaryTileDisplayName = "SummaryTile";
33
34
  export declare const SummaryTile: {
34
- ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
35
+ ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
35
36
  displayName: string;
36
37
  };
@@ -1,3 +1,4 @@
1
+ import { injectString } from "../utils/localization/translationsDictionary";
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { classNames } from "../commonHelpers/classNames/classNames";
@@ -5,58 +6,154 @@ import { Tooltip } from "../tooltip/tooltip";
5
6
  import { SummaryTileTrigger } from "./summaryTileTrigger";
6
7
  import { getTypeClassName } from "./utils/getTypeClassName";
7
8
  import { IconInfoCircle } from "../icons/iconInfoCircle";
9
+ import { useLanguage } from "../utils/localization/useLanguage";
8
10
  import { IconWarning } from "../icons/iconWarning";
9
11
  import { IconCheckRadio } from "../icons/iconCheckRadio";
10
12
  import { IconException } from "../icons/iconException";
13
+ import { Skeleton } from "../skeleton/skeleton";
14
+ injectString("cs", "Information", "Informace");
15
+ injectString("da-DK", "Information", "Information");
16
+ injectString("de", "Information", "Information");
17
+ injectString("en", "Information", "Information");
18
+ injectString("es", "Information", "Informaci\xF3n");
19
+ injectString("fi-FI", "Information", "Tiedot");
20
+ injectString("fr", "Information", "Renseignements");
21
+ injectString("fr-FR", "Information", "Informations");
22
+ injectString("hu-HU", "Information", "Inform\xE1ci\xF3");
23
+ injectString("id", "Information", "Informasi");
24
+ injectString("it", "Information", "Informazioni");
25
+ injectString("ja", "Information", "\u60C5\u5831");
26
+ injectString("ko-KR", "Information", "\uC815\uBCF4");
27
+ injectString("ms", "Information", "Maklumat");
28
+ injectString("nb-NO", "Information", "Informasjon");
29
+ injectString("nl", "Information", "Informatie");
30
+ injectString("pl", "Information", "Informacje");
31
+ injectString("pt-BR", "Information", "Informa\xE7\xF5es");
32
+ injectString("pt-PT", "Information", "Informa\xE7\xE3o");
33
+ injectString("sk-SK", "Information", "Inform\xE1cie");
34
+ injectString("sv", "Information", "Information");
35
+ injectString("th", "Information", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
36
+ injectString("tr", "Information", "Bilgi");
37
+ injectString("zh-Hans", "Information", "\u4FE1\u606F");
38
+ injectString("zh-TW", "Information", "\u8CC7\u8A0A");
39
+ injectString("ro-RO", "Information", "Informa\u021Bii");
11
40
  export var SummaryTileType;
12
41
  (function (SummaryTileType) {
13
- SummaryTileType["Error"] = "error";
14
- SummaryTileType["Success"] = "success";
15
- SummaryTileType["Warning"] = "warning";
16
- SummaryTileType["Active"] = "active";
17
- SummaryTileType["Default"] = "default";
18
- /**
19
- * @deprecated - will be removed in the next releases.
20
- * Please use {@link SummaryTileType.Active} instead.
21
- */
22
- SummaryTileType["Info"] = "info";
42
+ SummaryTileType["Error"] = "error";
43
+ SummaryTileType["Success"] = "success";
44
+ SummaryTileType["Warning"] = "warning";
45
+ SummaryTileType["Active"] = "active";
46
+ SummaryTileType["Default"] = "default";
47
+ /**
48
+ * @deprecated - will be removed in the next releases.
49
+ * Please use {@link SummaryTileType.Active} instead.
50
+ */
51
+ SummaryTileType["Info"] = "info";
23
52
  })(SummaryTileType || (SummaryTileType = {}));
24
53
  export var SummaryTileSize;
25
54
  (function (SummaryTileSize) {
26
- SummaryTileSize["Small"] = "small";
27
- SummaryTileSize["Medium"] = "medium";
55
+ SummaryTileSize["Small"] = "small";
56
+ SummaryTileSize["Medium"] = "medium";
28
57
  })(SummaryTileSize || (SummaryTileSize = {}));
29
58
  export const SummaryTileDisplayName = "SummaryTile";
30
- export const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top" }) => {
31
- const generatedId = React.useId();
32
- const eltId = id || generatedId;
33
- const memoizedGetIconId = React.useMemo(() => {
34
- const iconIds = {
35
- [SummaryTileType.Warning]: IconException,
36
- [SummaryTileType.Success]: IconCheckRadio,
37
- [SummaryTileType.Error]: IconWarning,
38
- [SummaryTileType.Active]: IconInfoCircle,
39
- [SummaryTileType.Default]: IconInfoCircle,
40
- [SummaryTileType.Info]: IconInfoCircle
41
- };
42
- return iconIds[tileType];
43
- }, [tileType]);
44
- const componentProps = {
45
- className: classNames([
46
- "zen-summary-tile",
47
- getTypeClassName(tileType),
48
- `zen-summary-tile--${size}`,
49
- onClick ? "zen-summary-tile--action" : "",
50
- className || ""
51
- ]),
52
- "data-summary-tile-id": eltId
59
+ export const SummaryTile = ({
60
+ className,
61
+ children,
62
+ size = SummaryTileSize.Small,
63
+ title,
64
+ tileType = SummaryTileType.Default,
65
+ id,
66
+ onClick,
67
+ tooltipText,
68
+ tooltipAlignment = "top",
69
+ isLoading = false
70
+ }) => {
71
+ const {
72
+ translate
73
+ } = useLanguage();
74
+ const generatedId = React.useId();
75
+ const eltId = id || generatedId;
76
+ const memoizedGetIconId = React.useMemo(() => {
77
+ const iconIds = {
78
+ [SummaryTileType.Warning]: IconException,
79
+ [SummaryTileType.Success]: IconCheckRadio,
80
+ [SummaryTileType.Error]: IconWarning,
81
+ [SummaryTileType.Active]: IconInfoCircle,
82
+ [SummaryTileType.Default]: IconInfoCircle,
83
+ [SummaryTileType.Info]: IconInfoCircle
53
84
  };
54
- if (onClick) {
55
- componentProps.onClick = () => {
56
- onClick(eltId);
57
- };
58
- }
59
- const Tag = onClick ? "button" : "div";
60
- 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 })] }));
85
+ return iconIds[tileType];
86
+ }, [tileType]);
87
+ const isInteractive = onClick && !isLoading;
88
+ const componentProps = {
89
+ className: classNames(["zen-summary-tile", getTypeClassName(tileType), `zen-summary-tile--${size}`, isInteractive ? "zen-summary-tile--action" : "", className || ""]),
90
+ "data-summary-tile-id": eltId
91
+ };
92
+ if (isInteractive) {
93
+ componentProps.onClick = () => {
94
+ onClick(eltId);
95
+ };
96
+ }
97
+ if (isLoading) {
98
+ return _jsxs("div", Object.assign({}, componentProps, {
99
+ children: [_jsx("div", {
100
+ className: "zen-summary-tile__title-block",
101
+ children: _jsx(Skeleton, {
102
+ type: "text",
103
+ height: 16
104
+ })
105
+ }), _jsx("div", {
106
+ className: "zen-summary-tile__content",
107
+ children: _jsx(Skeleton, {
108
+ type: "text",
109
+ height: 32
110
+ })
111
+ })]
112
+ }));
113
+ }
114
+ const tooltipTrigger = tooltipText ? _jsx(Tooltip, {
115
+ alignment: tooltipAlignment,
116
+ trigger: _jsx(SummaryTileTrigger, {
117
+ icon: memoizedGetIconId,
118
+ "aria-label": translate("Information")
119
+ }),
120
+ children: tooltipText
121
+ }) : null;
122
+ const Tag = isInteractive ? "button" : "div";
123
+ // When both onClick and tooltipText are present, the tooltip trigger
124
+ // (a <button>) cannot be nested inside the tile <button>. Render the
125
+ // tooltip trigger as a sibling outside the clickable tile.
126
+ if (onClick && tooltipText) {
127
+ return _jsxs("div", {
128
+ className: componentProps.className,
129
+ "data-summary-tile-id": componentProps["data-summary-tile-id"],
130
+ children: [_jsxs(Tag, {
131
+ className: "zen-summary-tile__clickable-area",
132
+ onClick: componentProps.onClick,
133
+ children: [_jsx("div", {
134
+ className: "zen-summary-tile__title-block",
135
+ children: _jsx("div", {
136
+ className: "zen-summary-tile__title-text zen-ellipsis heading-05",
137
+ children: title
138
+ })
139
+ }), _jsx("div", {
140
+ className: "zen-summary-tile__content",
141
+ children: children
142
+ })]
143
+ }), tooltipTrigger]
144
+ });
145
+ }
146
+ return _jsxs(Tag, Object.assign({}, componentProps, {
147
+ children: [_jsxs("div", {
148
+ className: "zen-summary-tile__title-block",
149
+ children: [_jsx("div", {
150
+ className: "zen-summary-tile__title-text zen-ellipsis heading-05",
151
+ children: title
152
+ }), tooltipTrigger]
153
+ }), _jsx("div", {
154
+ className: "zen-summary-tile__content",
155
+ children: children
156
+ })]
157
+ }));
61
158
  };
62
- SummaryTile.displayName = SummaryTileDisplayName;
159
+ SummaryTile.displayName = SummaryTileDisplayName;
@@ -3,6 +3,6 @@ import { IIcon } from "../icons/icon";
3
3
  import { RefObject } from "react";
4
4
  export interface ISummaryTileTrigger {
5
5
  icon: React.FC<IIcon>;
6
- ref?: RefObject<HTMLDivElement | null>;
6
+ ref?: RefObject<HTMLButtonElement | null>;
7
7
  }
8
8
  export declare const SummaryTileTrigger: ({ icon, ref, ...restProps }: ISummaryTileTrigger) => import("react/jsx-runtime").JSX.Element;
@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import * as React from "react";
14
14
  export const SummaryTileTrigger = (_a) => {
15
15
  var { icon, ref } = _a, restProps = __rest(_a, ["icon", "ref"]);
16
- return _jsx("div", Object.assign({ className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
16
+ return _jsx("button", Object.assign({ type: "button", className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
17
17
  className: "zen-summary-tile__title-icon",
18
18
  size: "large"
19
19
  }) }));
@@ -105,7 +105,8 @@ export const ToggleButtonRaw = props => {
105
105
  id: checkBoxId,
106
106
  onChange: onChangeHandler,
107
107
  checked: value,
108
- disabled: disabled
108
+ disabled: disabled,
109
+ role: "switch"
109
110
  }), _jsxs("label", {
110
111
  className: classNames(["zen-toggler__label", isReverted ? "zen-toggler__label--reverted" : ""]),
111
112
  htmlFor: checkBoxId,
@@ -1,4 +1,4 @@
1
- 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"];
2
- export type TSupportedLanguage = typeof supportedLanguages[number];
1
+ 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"];
2
+ export type TSupportedLanguage = (typeof supportedLanguages)[number];
3
3
  export declare const getSupportedLanguage: (language: string) => TSupportedLanguage;
4
4
  export {};
@@ -1,10 +1,30 @@
1
1
  const supportedLanguages = [
2
- "en", "es", "de", "cs", "fr-FR", "fr",
3
- "id", "it", "ja", "ms", "nl", "pl", "pt-BR",
4
- "sv", "th", "tr", "zh-Hans", "ko-KR", "zh-TW",
5
- "da-DK", "fi-FI", "hu-HU", "nb-NO", "sk-SK",
6
- "pt-PT", "ro-RO"
2
+ "en",
3
+ "es",
4
+ "de",
5
+ "cs",
6
+ "fr-FR",
7
+ "fr",
8
+ "id",
9
+ "it",
10
+ "ja",
11
+ "ms",
12
+ "nl",
13
+ "pl",
14
+ "pt-BR",
15
+ "sv",
16
+ "th",
17
+ "tr",
18
+ "zh-Hans",
19
+ "ko-KR",
20
+ "zh-TW",
21
+ "da-DK",
22
+ "fi-FI",
23
+ "hu-HU",
24
+ "nb-NO",
25
+ "sk-SK",
26
+ "pt-PT",
27
+ "ro-RO",
28
+ "ar"
7
29
  ];
8
- export const getSupportedLanguage = (language) => supportedLanguages.includes(language)
9
- ? language
10
- : "en";
30
+ export const getSupportedLanguage = (language) => supportedLanguages.includes(language) ? language : "en";
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- 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">;
2
+ 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">;
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Od začátku roku",
253
253
  "Time": "Čas",
254
254
  "Apply filter": "Použít filtr",
255
- "Remove filter": "Odebrat filtr"
255
+ "Remove filter": "Odebrat filtr",
256
+ "Results": "Výsledky"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Seit Jahresbeginn",
253
253
  "Time": "Zeit",
254
254
  "Apply filter": "Filter anwenden",
255
- "Remove filter": "Filter entfernen"
255
+ "Remove filter": "Filter entfernen",
256
+ "Results": "Ergebnisse"
256
257
  }
@@ -316,5 +316,6 @@
316
316
  "This filter is currently applied.": "This filter is currently applied.",
317
317
  "Remove filter": "Remove filter",
318
318
  "Exit full screen table view": "Exit full screen table view",
319
- "Close search": "Close search"
319
+ "Close search": "Close search",
320
+ "Has additional actions. Use right arrow to access button, left arrow to return.": "Has additional actions. Use right arrow to access button, left arrow to return."
320
321
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Año a la fecha",
253
253
  "Time": "Hora",
254
254
  "Apply filter": "Aplicar filtro",
255
- "Remove filter": "Eliminar filtro"
255
+ "Remove filter": "Eliminar filtro",
256
+ "Results": "Resultados"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "L’année passée",
253
253
  "Time": "Heure",
254
254
  "Apply filter": "Appliquer filtre",
255
- "Remove filter": "Supprimer filtre"
255
+ "Remove filter": "Supprimer filtre",
256
+ "Results": "Résultats"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Cumul jusqu’à ce jour",
253
253
  "Time": "Heure",
254
254
  "Apply filter": "Appliquer les filtres",
255
- "Remove filter": "Supprimer le filtre"
255
+ "Remove filter": "Supprimer le filtre",
256
+ "Results": "Résultats"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Tahun hingga saat ini",
253
253
  "Time": "Waktu",
254
254
  "Apply filter": "Terapkan filter",
255
- "Remove filter": "Hapus filter"
255
+ "Remove filter": "Hapus filter",
256
+ "Results": "Hasil"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Dall'inizio dell'anno",
253
253
  "Time": "Tempo",
254
254
  "Apply filter": "Applicare filtro",
255
- "Remove filter": "Rimuovere filtro"
255
+ "Remove filter": "Rimuovere filtro",
256
+ "Results": "Risultati"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "累計",
253
253
  "Time": "時間",
254
254
  "Apply filter": "フィルターを適用",
255
- "Remove filter": "フィルターを削除"
255
+ "Remove filter": "フィルターを削除",
256
+ "Results": "結果"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Tahun ini hingga tarikh ini",
253
253
  "Time": "Masa",
254
254
  "Apply filter": "Gunakan penyaring",
255
- "Remove filter": "Keluarkan penyaring"
255
+ "Remove filter": "Keluarkan penyaring",
256
+ "Results": "Keputusan"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Jaar tot heden",
253
253
  "Time": "Tijd",
254
254
  "Apply filter": "Filter toepassen",
255
- "Remove filter": "Filter verwijderen"
255
+ "Remove filter": "Filter verwijderen",
256
+ "Results": "Resultaten"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Od początku roku",
253
253
  "Time": "Czas",
254
254
  "Apply filter": "Zastosuj filtr",
255
- "Remove filter": "Usuń filtr"
255
+ "Remove filter": "Usuń filtr",
256
+ "Results": "Wyniki"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Acumulado no ano",
253
253
  "Time": "Hora",
254
254
  "Apply filter": "Aplicar filtros",
255
- "Remove filter": "Remover filtro"
255
+ "Remove filter": "Remover filtro",
256
+ "Results": "Resultados"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "År till dagens datum",
253
253
  "Time": "Tid",
254
254
  "Apply filter": "Tillämpa filter",
255
- "Remove filter": "Ta bort filter"
255
+ "Remove filter": "Ta bort filter",
256
+ "Results": "Resultat"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "ต้นปีถึงปัจจุบัน",
253
253
  "Time": "เวลา",
254
254
  "Apply filter": "ใช้ตัวกรอง",
255
- "Remove filter": "ลบตัวกรอง"
255
+ "Remove filter": "ลบตัวกรอง",
256
+ "Results": "ผลลัพธ์"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "Yılbaşından bugüne kadar",
253
253
  "Time": "Zaman",
254
254
  "Apply filter": "Filtreyi uygula",
255
- "Remove filter": "Filtreyi kaldır"
255
+ "Remove filter": "Filtreyi kaldır",
256
+ "Results": "Sonuçlar"
256
257
  }
@@ -252,5 +252,6 @@
252
252
  "Year to date": "年初至今",
253
253
  "Time": "时间",
254
254
  "Apply filter": "应用筛选器",
255
- "Remove filter": "删除筛选器"
255
+ "Remove filter": "删除筛选器",
256
+ "Results": "结果"
256
257
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geotab/zenith",
3
- "version": "3.6.3",
3
+ "version": "3.7.0",
4
4
  "description": "Zenith components library on React",
5
5
  "main": "dist/index.js",
6
6
  "types": "esm/index.d.ts",
@@ -11,9 +11,6 @@
11
11
  "**/react-chartjs/dateAdapter.ts",
12
12
  "**/react-chartjs/dateAdapter.js"
13
13
  ],
14
- "publishConfig": {
15
- "access": "public"
16
- },
17
14
  "scripts": {
18
15
  "test": "npm run clean && npm run test-build && node build-utils/translations/inject-translations.js && jest --clearCache && jest",
19
16
  "start": "npm run storybook --loglevel verbose",
@@ -101,9 +98,6 @@
101
98
  "react": "^19.2.0",
102
99
  "react-dom": "^19.2.0"
103
100
  },
104
- "overrides": {
105
- "serialize-javascript": "^7.0.3"
106
- },
107
101
  "files": [
108
102
  "./dist/",
109
103
  "./esm"
@@ -119,5 +113,8 @@
119
113
  "last 1 firefox version",
120
114
  "last 1 safari version"
121
115
  ]
116
+ },
117
+ "publishConfig": {
118
+ "access": "public"
122
119
  }
123
120
  }