@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.0

package/esm/calendar/calendarUtils.js

@@ -1,103 +1,170 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { isValidDate } from "./dateUtils";
+injectString("en", "Choose end date", "Choose end date");
+injectString("en", "Choose start date", "Choose start date");
+injectString("cs", "Change date, {date}", "Zm\u011B\u0148te datum, {date}");
+injectString("da-DK", "Change date, {date}", "Skift dato, {date}");
+injectString("de", "Change date, {date}", "Datum \xE4ndern, {date}");
+injectString("en", "Change date, {date}", "Change date, {date}");
+injectString("es", "Change date, {date}", "Cambiar fecha, {date}");
+injectString("fi-FI", "Change date, {date}", "Vaihda p\xE4iv\xE4m\xE4\xE4r\xE4\xE4, {date}");
+injectString("fr", "Change date, {date}", "Changer la date, {date}");
+injectString("fr-FR", "Change date, {date}", "Modifier la date, {date}");
+injectString("hu-HU", "Change date, {date}", "V\xE1ltoztasd meg a d\xE1tumot, {date}.");
+injectString("id", "Change date, {date}", "Ubah tanggal, {date}");
+injectString("it", "Change date, {date}", "Modificare data, {date}");
+injectString("ja", "Change date, {date}", "\u65E5\u4ED8\u3092\u5909\u66F4\u3001{date}");
+injectString("ko-KR", "Change date, {date}", "\uB0A0\uC9DC \uBCC0\uACBD, {date}");
+injectString("ms", "Change date, {date}", "Ubah tarikh, {date}");
+injectString("nb-NO", "Change date, {date}", "Endre dato, {date}");
+injectString("nl", "Change date, {date}", "Datum wijzigen, {date}");
+injectString("pl", "Change date, {date}", "Zmie\u0144 dat\u0119, {date}");
+injectString("pt-BR", "Change date, {date}", "Alterar data, {date}");
+injectString("sk-SK", "Change date, {date}", "Zme\u0148 d\xE1tum, {date}");
+injectString("sv", "Change date, {date}", "\xC4ndra datum, {date}");
+injectString("th", "Change date, {date}", "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48, {date}");
+injectString("tr", "Change date, {date}", "Tarihi de\u011Fi\u015Ftir, {date}");
+injectString("zh-Hans", "Change date, {date}", "\u66F4\u6539\u65E5\u671F {date}");
+injectString("zh-TW", "Change date, {date}", "\u8B8A\u66F4\u65E5\u671F\uFF1A{date}");
+injectString("cs", "Choose date", "Vybrat datum");
+injectString("da-DK", "Choose date", "V\xE6lg dato");
+injectString("de", "Choose date", "Datum ausw\xE4hlen");
+injectString("en", "Choose date", "Choose date");
+injectString("es", "Choose date", "Elegir fecha");
+injectString("fi-FI", "Choose date", "Valitse p\xE4iv\xE4m\xE4\xE4r\xE4");
+injectString("fr", "Choose date", "Choisir la date");
+injectString("fr-FR", "Choose date", "Choisir la date");
+injectString("hu-HU", "Choose date", "V\xE1laszd ki a d\xE1tumot.");
+injectString("id", "Choose date", "Pilih tanggal");
+injectString("it", "Choose date", "Scegliere data");
+injectString("ja", "Choose date", "\u65E5\u4ED8\u3092\u9078\u629E");
+injectString("ko-KR", "Choose date", "\uB0A0\uC9DC \uC120\uD0DD");
+injectString("ms", "Choose date", "Pilih tarikh");
+injectString("nb-NO", "Choose date", "Velg dato");
+injectString("nl", "Choose date", "Kies datum");
+injectString("pl", "Choose date", "Wybierz dat\u0119");
+injectString("pt-BR", "Choose date", "Escolher data");
+injectString("sk-SK", "Choose date", "Vyber d\xE1tum");
+injectString("sv", "Choose date", "V\xE4lj datum");
+injectString("th", "Choose date", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48");
+injectString("tr", "Choose date", "Tarih se\xE7");
+injectString("zh-Hans", "Choose date", "\u9009\u62E9\u65E5\u671F");
+injectString("zh-TW", "Choose date", "\u9078\u64C7\u65E5\u671F");
 export const isLeftBorderVisible = (date, hoverDate, startDate, endDate) => {
-    if (!startDate) {
-        return false;
-    }
-    if (endDate) {
-        return date > startDate && date <= endDate;
-    }
-    if (hoverDate) {
-        if (hoverDate < startDate) {
-            return date > hoverDate && date <= startDate;
-        }
-        return date > startDate && date <= hoverDate;
-    }
+  if (!startDate) {
     return false;
+  }
+  if (endDate) {
+    return date > startDate && date <= endDate;
+  }
+  if (hoverDate) {
+    if (hoverDate < startDate) {
+      return date > hoverDate && date <= startDate;
+    }
+    return date > startDate && date <= hoverDate;
+  }
+  return false;
 };
 export const isRightBorderVisible = (date, hoverDate, startDate, endDate) => {
-    if (!startDate) {
-        return false;
-    }
-    const dateLike = new Date(date);
-    dateLike.setHours(0, 0, 0, 0);
-    if (endDate) {
-        const endDateLike = new Date(endDate);
-        endDateLike.setHours(0, 0, 0, 0);
-        if (date >= startDate && date < endDate) {
-            return true;
-        }
-        return false;
-    }
-    if (hoverDate) {
-        const startDateLike = new Date(startDate);
-        startDateLike.setHours(0, 0, 0, 0);
-        const hoverDateLike = new Date(hoverDate);
-        hoverDateLike.setHours(0, 0, 0, 0);
-        if (hoverDate < startDate) {
-            return date >= hoverDate && date < startDate;
-        }
-        return date >= startDate && date < hoverDate;
+  if (!startDate) {
+    return false;
+  }
+  const dateLike = new Date(date);
+  dateLike.setHours(0, 0, 0, 0);
+  if (endDate) {
+    const endDateLike = new Date(endDate);
+    endDateLike.setHours(0, 0, 0, 0);
+    if (date >= startDate && date < endDate) {
+      return true;
     }
     return false;
+  }
+  if (hoverDate) {
+    const startDateLike = new Date(startDate);
+    startDateLike.setHours(0, 0, 0, 0);
+    const hoverDateLike = new Date(hoverDate);
+    hoverDateLike.setHours(0, 0, 0, 0);
+    if (hoverDate < startDate) {
+      return date >= hoverDate && date < startDate;
+    }
+    return date >= startDate && date < hoverDate;
+  }
+  return false;
 };
 export const isDateInRange = (date, hoverDate, startDate, endDate) => {
-    if (!startDate) {
-        return false;
-    }
-    if (endDate) {
-        return date >= startDate && date <= endDate;
-    }
-    if (hoverDate) {
-        if (hoverDate < startDate) {
-            return date >= hoverDate && date <= startDate;
-        }
-        return date >= startDate && date <= hoverDate;
-    }
+  if (!startDate) {
     return false;
+  }
+  if (endDate) {
+    return date >= startDate && date <= endDate;
+  }
+  if (hoverDate) {
+    if (hoverDate < startDate) {
+      return date >= hoverDate && date <= startDate;
+    }
+    return date >= startDate && date <= hoverDate;
+  }
+  return false;
 };
 export const getButtonLabel = (translate, date, isRangeMode, startDate, endDate) => {
-    if (isRangeMode) {
-        if (startDate && endDate) {
-            if (date < startDate) {
-                return translate("Change daterange start date, {date}").replace("{date}", startDate);
-            }
-            return translate("Change daterange end date, {date}").replace("{date}", endDate);
-        }
-        if (startDate) {
-            if (date < startDate) {
-                return translate("Change daterange start date, {date}").replace("{date}", startDate);
-            }
-            return translate("Choose daterange end date");
-        }
-        return translate("Choose daterange start date");
+  if (isRangeMode) {
+    if (startDate && endDate) {
+      if (date < startDate) {
+        return translate("Change start date, {date}").replace("{date}", startDate);
+      }
+      return translate("Change end date, {date}").replace("{date}", endDate);
     }
-    return startDate
-        ? translate("Change date, {date}").replace("{date}", date)
-        : translate("Choose date");
+    if (startDate) {
+      if (date < startDate) {
+        return translate("Change start date, {date}").replace("{date}", startDate);
+      }
+      return translate("Choose end date");
+    }
+    return translate("Choose start date");
+  }
+  return startDate ? translate("Change date, {date}").replace("{date}", date) : translate("Choose date");
 };
 export const setFocusTo = (e, date, selectionHandler) => {
-    e.preventDefault();
-    selectionHandler(date);
+  e.preventDefault();
+  selectionHandler(date);
 };
 // eslint-disable-next-line complexity
 export const getCalendarRange = (selectedDate, currentActiveField, isWrongPeriodFn, dateFrom, dateTo) => {
-    const selectedDateObj = new Date(selectedDate);
-    const dateFromObj = dateFrom && isValidDate(dateFrom) ? new Date(dateFrom) : undefined;
-    const dateToObj = dateTo && isValidDate(dateTo) ? new Date(dateTo) : undefined;
-    if (currentActiveField === "start") {
-        // Cursor on Start Date
-        if (dateToObj && selectedDateObj.getTime() < dateToObj.getTime()) {
-            const isWrongPeriod = isWrongPeriodFn(selectedDateObj, dateToObj);
-            return isWrongPeriod ? { from: selectedDate, to: undefined } : { from: selectedDate, to: dateTo };
-        }
-        // Overlapping dates: selectedDate later than dateTo
-        return { from: selectedDate, to: undefined };
-    }
-    // Cursor on End Date
-    if (dateFromObj && dateFromObj.getTime() < selectedDateObj.getTime()) {
-        const isWrongPeriod = isWrongPeriodFn(dateFromObj, selectedDateObj);
-        return isWrongPeriod ? { from: undefined, to: selectedDate } : { from: dateFrom, to: selectedDate };
+  const selectedDateObj = new Date(selectedDate);
+  const dateFromObj = dateFrom && isValidDate(dateFrom) ? new Date(dateFrom) : undefined;
+  const dateToObj = dateTo && isValidDate(dateTo) ? new Date(dateTo) : undefined;
+  if (currentActiveField === "start") {
+    // Cursor on Start Date
+    if (dateToObj && selectedDateObj.getTime() < dateToObj.getTime()) {
+      const isWrongPeriod = isWrongPeriodFn(selectedDateObj, dateToObj);
+      return isWrongPeriod ? {
+        from: selectedDate,
+        to: undefined
+      } : {
+        from: selectedDate,
+        to: dateTo
+      };
     }
-    // Overlapping dates: selectedDate earlier than dateFrom
-    return { from: undefined, to: selectedDate };
-};
+    // Overlapping dates: selectedDate later than dateTo
+    return {
+      from: selectedDate,
+      to: undefined
+    };
+  }
+  // Cursor on End Date
+  if (dateFromObj && dateFromObj.getTime() < selectedDateObj.getTime()) {
+    const isWrongPeriod = isWrongPeriodFn(dateFromObj, selectedDateObj);
+    return isWrongPeriod ? {
+      from: undefined,
+      to: selectedDate
+    } : {
+      from: dateFrom,
+      to: selectedDate
+    };
+  }
+  // Overlapping dates: selectedDate earlier than dateFrom
+  return {
+    from: undefined,
+    to: selectedDate
+  };
+};

package/esm/card/card.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable react/prop-types */
@@ -29,113 +30,244 @@ import { getIconFromStatus } from "./helpers/getIconFromStatus";
 import { getIconTypeFromStatus } from "./helpers/getIconTypeFromStatus";
 import { isFormSection } from "../formSection/utils/isFormSection";
 // import { FormSection } from "../formSection/formSection";
+injectString("cs", "Actions", "Akce");
+injectString("da-DK", "Actions", "Handlinger");
+injectString("de", "Actions", "Aktionen");
+injectString("en", "Actions", "Actions");
+injectString("es", "Actions", "Acciones");
+injectString("fi-FI", "Actions", "Toimet");
+injectString("fr", "Actions", "Actions");
+injectString("fr-FR", "Actions", "Actions");
+injectString("hu-HU", "Actions", "M\u0171veletek");
+injectString("id", "Actions", "Tindakan");
+injectString("it", "Actions", "Azioni");
+injectString("ja", "Actions", "\u30A2\u30AF\u30B7\u30E7\u30F3");
+injectString("ko-KR", "Actions", "\uC870\uCE58");
+injectString("ms", "Actions", "Tindakan");
+injectString("nb-NO", "Actions", "Handlinger");
+injectString("nl", "Actions", "Acties");
+injectString("pl", "Actions", "Dzia\u0142ania");
+injectString("pt-BR", "Actions", "A\xE7\xF5es");
+injectString("sk-SK", "Actions", "Akcie");
+injectString("sv", "Actions", "\xC5tg\xE4rder");
+injectString("th", "Actions", "\u0E01\u0E32\u0E23\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23");
+injectString("tr", "Actions", "Eylemler");
+injectString("zh-Hans", "Actions", "\u64CD\u4F5C");
+injectString("zh-TW", "Actions", "\u52D5\u4F5C");
 export const DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
-export const Card = 
+export const Card =
 // eslint-disable-next-line complexity
-(props) => {
-    const { size, children, title, icon, iconType, secondary, status, date, tooltip, className = "", link, target, onClick, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
-    const { translate } = useLanguage();
-    const [deviceType, setDeviceType] = useState(DeviceType.Mobile);
-    const [cardSize, setCardSize] = useState(isAbsoluteSize(size) ? getContainerSize(size.width) : (size || DEFAULT_CARD_SIZE));
-    const isMobile = deviceType === DeviceType.Mobile;
-    const containerRef = useRef(null);
-    const headerRef = useRef(null);
-    const titleId = useId();
-    const isDrive = useDrive();
-    const dateDriveClasses = useDriveClassName("zen-card__date");
-    const menuTriggerDriveClasses = useDriveClassName("zen-card__menu-trigger");
-    const fullWidthValue = fullWidth === undefined ? getDefaultFullWidthValue(isDrive) : fullWidth;
-    const { isAutoHeight, isScrollable, isFullWidth, isFullHeight } = useCardSizeState(deviceType, scrollableContent, fullWidthValue, fullHeight, autoHeight, size || "S");
-    useDeviceType(setDeviceType);
-    useCardSize(setCardSize, containerRef, isAbsoluteSize(size) ? getContainerSize(size.width) : (size || "S"));
-    const { actions, content } = useMemo(() => {
-        if (!children) {
-            return { actions: [], content: [] };
+props => {
+  const {
+    size,
+    children,
+    title,
+    icon,
+    iconType,
+    secondary,
+    status,
+    date,
+    tooltip,
+    className = "",
+    link,
+    target,
+    onClick,
+    cardContentClasses = "",
+    tooltipAlignment,
+    tooltipSize,
+    fullWidth,
+    scrollableContent = true,
+    autoHeight = false,
+    fullHeight = false
+  } = props;
+  const {
+    translate
+  } = useLanguage();
+  const [deviceType, setDeviceType] = useState(DeviceType.Mobile);
+  const [cardSize, setCardSize] = useState(isAbsoluteSize(size) ? getContainerSize(size.width) : size || DEFAULT_CARD_SIZE);
+  const isMobile = deviceType === DeviceType.Mobile;
+  const containerRef = useRef(null);
+  const headerRef = useRef(null);
+  const titleId = useId();
+  const isDrive = useDrive();
+  const dateDriveClasses = useDriveClassName("zen-card__date");
+  const menuTriggerDriveClasses = useDriveClassName("zen-card__menu-trigger");
+  const fullWidthValue = fullWidth === undefined ? getDefaultFullWidthValue(isDrive) : fullWidth;
+  const {
+    isAutoHeight,
+    isScrollable,
+    isFullWidth,
+    isFullHeight
+  } = useCardSizeState(deviceType, scrollableContent, fullWidthValue, fullHeight, autoHeight, size || "S");
+  useDeviceType(setDeviceType);
+  useCardSize(setCardSize, containerRef, isAbsoluteSize(size) ? getContainerSize(size.width) : size || "S");
+  const {
+    actions,
+    content
+  } = useMemo(() => {
+    if (!children) {
+      return {
+        actions: [],
+        content: []
+      };
+    }
+    if (Array.isArray(children)) {
+      const acts = [];
+      const cnt = [];
+      React.Children.forEach(children, el => {
+        if (!el) {
+          return;
         }
-        if (Array.isArray(children)) {
-            const acts = [];
-            const cnt = [];
-            React.Children.forEach(children, (el) => {
-                if (!el) {
-                    return;
-                }
-                if (el.type === Card.Actions) {
-                    const actionChildren = el.props.children;
-                    if (!actionChildren) {
-                        return;
-                    }
-                    if (Array.isArray(actionChildren)) {
-                        acts.push(...actionChildren.filter((child) => (child === null || child === void 0 ? void 0 : child.type) === Card.Button));
-                        return;
-                    }
-                    if (typeof actionChildren === "object" && React.isValidElement(actionChildren) && actionChildren.type === Card.Button) {
-                        acts.push(actionChildren);
-                    }
-                }
-                if (el.type === Card.Content || isFormSection(el)) {
-                    cnt.push(el);
-                }
-            });
-            return { actions: acts, content: cnt };
+        if (el.type === Card.Actions) {
+          const actionChildren = el.props.children;
+          if (!actionChildren) {
+            return;
+          }
+          if (Array.isArray(actionChildren)) {
+            acts.push(...actionChildren.filter(child => (child === null || child === void 0 ? void 0 : child.type) === Card.Button));
+            return;
+          }
+          if (typeof actionChildren === "object" && React.isValidElement(actionChildren) && actionChildren.type === Card.Button) {
+            acts.push(actionChildren);
+          }
         }
-        return { actions: [], content: [children] };
-    }, [children]);
-    const maxNumberOfActions = getMaxNumberOfActions(cardSize);
-    const { headerActions, menuActions } = useMemo(() => {
-        const hActions = [];
-        const mActions = [];
-        for (let i = 0; i < actions.length; i++) {
-            if (actions[i].props.inContextMenu || hActions.length >= maxNumberOfActions || isMobile) {
-                mActions.push(actions[i]);
-            }
-            else {
-                hActions.push(actions[i]);
-            }
+        if (el.type === Card.Content || isFormSection(el)) {
+          cnt.push(el);
         }
-        return { headerActions: hActions, menuActions: mActions };
-    }, [actions, isMobile, maxNumberOfActions]);
-    const menuTrigger = _jsx(Button, { className: classNames(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]), type: "tertiary-black", "aria-label": translate("Actions"), htmlType: "button", children: _jsx(IconDotVertical, { size: isDrive ? SvgIconSize.Huge : SvgIconSize.Large }) });
-    useEffect(() => {
-        if (containerRef.current) {
-            containerRef.current.setAttribute("role", "region");
-            containerRef.current.setAttribute("aria-labelledby", titleId);
-        }
-    }, [containerRef, titleId]);
-    const cardContentClassName = useMemo(() => classNames([
-        "zen-card__content",
-        isScrollable ? "zen-card__content--overflow-scroll" : "zen-card__content--overflow-hidden",
-        cardContentClasses
-    ]), [cardContentClasses, isScrollable]);
-    const dateClassName = useMemo(() => classNames(["zen-card__date", (isMobile && !isDrive) ? "zen-card__date--mobile" : "", dateDriveClasses !== null && dateDriveClasses !== void 0 ? dateDriveClasses : ""]), [isMobile, isDrive, dateDriveClasses]);
-    const favoriteButton = useMemo(() => {
-        if (props.onFavoriteChange === undefined) {
-            return null;
-        }
-        return _jsx(FavoriteButton, { isFavorite: props.isFavorite || false, onChange: props.onFavoriteChange, className: "zen-card__favorite-button" });
-    }, [props.isFavorite, props.onFavoriteChange]);
-    const { titleIcon, titleIconType } = useMemo(() => {
-        if (status) {
-            return {
-                titleIcon: icon || getIconFromStatus(status),
-                titleIconType: iconType || getIconTypeFromStatus(status)
-            };
-        }
-        return {
-            titleIcon: icon,
-            titleIconType: iconType
-        };
-    }, [icon, iconType, status]);
-    const isHeaderPrimaryVisible = title || icon || link || onClick || !!headerActions.length || date || !!favoriteButton || !!tooltip || !!menuActions.length;
-    const isHeaderVisible = isHeaderPrimaryVisible || secondary;
-    return _jsxs(CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: classNames(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? _jsxs("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && _jsxs("div", { className: "zen-card__header-primary", children: [title && _jsx(Title, { id: titleId, link: link, target: target, onClick: onClick, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), _jsxs("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? _jsx("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && _jsx(Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && _jsx(Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map((action, index) => {
-                                            const actionProps = action.props;
-                                            return createElement(Menu.Item, Object.assign({ key: actionProps.id || index, id: actionProps.id || `action-${index}`, name: actionProps.name || "" }, actionProps));
-                                        }) })] })] }), secondary ? _jsx("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, _jsx("div", { className: cardContentClassName, children: content })] });
+      });
+      return {
+        actions: acts,
+        content: cnt
+      };
+    }
+    return {
+      actions: [],
+      content: [children]
+    };
+  }, [children]);
+  const maxNumberOfActions = getMaxNumberOfActions(cardSize);
+  const {
+    headerActions,
+    menuActions
+  } = useMemo(() => {
+    const hActions = [];
+    const mActions = [];
+    for (let i = 0; i < actions.length; i++) {
+      if (actions[i].props.inContextMenu || hActions.length >= maxNumberOfActions || isMobile) {
+        mActions.push(actions[i]);
+      } else {
+        hActions.push(actions[i]);
+      }
+    }
+    return {
+      headerActions: hActions,
+      menuActions: mActions
+    };
+  }, [actions, isMobile, maxNumberOfActions]);
+  const menuTrigger = _jsx(Button, {
+    className: classNames(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]),
+    type: "tertiary-black",
+    "aria-label": translate("Actions"),
+    htmlType: "button",
+    children: _jsx(IconDotVertical, {
+      size: isDrive ? SvgIconSize.Huge : SvgIconSize.Large
+    })
+  });
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.setAttribute("role", "region");
+      containerRef.current.setAttribute("aria-labelledby", titleId);
+    }
+  }, [containerRef, titleId]);
+  const cardContentClassName = useMemo(() => classNames(["zen-card__content", isScrollable ? "zen-card__content--overflow-scroll" : "zen-card__content--overflow-hidden", cardContentClasses]), [cardContentClasses, isScrollable]);
+  const dateClassName = useMemo(() => classNames(["zen-card__date", isMobile && !isDrive ? "zen-card__date--mobile" : "", dateDriveClasses !== null && dateDriveClasses !== void 0 ? dateDriveClasses : ""]), [isMobile, isDrive, dateDriveClasses]);
+  const favoriteButton = useMemo(() => {
+    if (props.onFavoriteChange === undefined) {
+      return null;
+    }
+    return _jsx(FavoriteButton, {
+      isFavorite: props.isFavorite || false,
+      onChange: props.onFavoriteChange,
+      className: "zen-card__favorite-button"
+    });
+  }, [props.isFavorite, props.onFavoriteChange]);
+  const {
+    titleIcon,
+    titleIconType
+  } = useMemo(() => {
+    if (status) {
+      return {
+        titleIcon: icon || getIconFromStatus(status),
+        titleIconType: iconType || getIconTypeFromStatus(status)
+      };
+    }
+    return {
+      titleIcon: icon,
+      titleIconType: iconType
+    };
+  }, [icon, iconType, status]);
+  const isHeaderPrimaryVisible = title || icon || link || onClick || !!headerActions.length || date || !!favoriteButton || !!tooltip || !!menuActions.length;
+  const isHeaderVisible = isHeaderPrimaryVisible || secondary;
+  return _jsxs(CardContainer, {
+    isMobile: isMobile,
+    fullWidth: isFullWidth,
+    fullHeight: isFullHeight,
+    autoHeight: isAutoHeight,
+    scrollable: isScrollable,
+    ref: containerRef,
+    size: size || "S",
+    className: classNames(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]),
+    children: [isHeaderVisible ? _jsxs("div", {
+      className: "zen-card__header",
+      ref: headerRef,
+      children: [isHeaderPrimaryVisible && _jsxs("div", {
+        className: "zen-card__header-primary",
+        children: [title && _jsx(Title, {
+          id: titleId,
+          link: link,
+          target: target,
+          onClick: onClick,
+          isMobile: isMobile,
+          title: title,
+          icon: titleIcon,
+          iconType: titleIconType
+        }), _jsxs("div", {
+          className: "zen-card__header-right",
+          children: [!!headerActions.length && headerActions, date ? _jsx("span", {
+            className: dateClassName,
+            children: date
+          }) : null, favoriteButton, tooltip && _jsx(Status, {
+            title: title,
+            status: status,
+            isMobile: isMobile,
+            tooltip: tooltip,
+            tooltipAlignment: tooltipAlignment,
+            tooltipSize: tooltipSize
+          }), !!menuActions.length && _jsx(Menu, {
+            trigger: menuTrigger,
+            title: title || translate("Actions"),
+            children: menuActions.map((action, index) => {
+              const actionProps = action.props;
+              return createElement(Menu.Item, Object.assign({
+                key: actionProps.id || index,
+                id: actionProps.id || `action-${index}`,
+                name: actionProps.name || ""
+              }, actionProps));
+            })
+          })]
+        })]
+      }), secondary ? _jsx("div", {
+        className: "zen-card__secondary",
+        children: secondary
+      }) : null]
+    }) : null, _jsx("div", {
+      className: cardContentClassName,
+      children: content
+    })]
+  });
 };
-export const TRANSLATIONS = [
-    "Actions"
-];
+export const TRANSLATIONS = ["Actions"];
 Card.Actions = Actions;
 Card.Content = Content;
-Card.Button = CardButton;
+Card.Button = CardButton;