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

package/dist/card/card.js

@@ -1,32 +1,70 @@
 "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.TRANSLATIONS = exports.Card = exports.DEFAULT_CARD_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable react/prop-types */
+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");
 const react_1 = __importStar(require("react"));
 const cardContainer_1 = require("../cardContainer/cardContainer");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
@@ -57,112 +95,219 @@ const isFormSection_1 = require("../formSection/utils/isFormSection");
 // import { FormSection } from "../formSection/formSection";
 exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
-const Card = 
+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 } = (0, useLanguage_1.useLanguage)();
-    const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
-    const [cardSize, setCardSize] = (0, react_1.useState)((0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || exports.DEFAULT_CARD_SIZE));
-    const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
-    const containerRef = (0, react_1.useRef)(null);
-    const headerRef = (0, react_1.useRef)(null);
-    const titleId = (0, react_1.useId)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const dateDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__date");
-    const menuTriggerDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__menu-trigger");
-    const fullWidthValue = fullWidth === undefined ? (0, getDefaultFullWidthValue_1.getDefaultFullWidthValue)(isDrive) : fullWidth;
-    const { isAutoHeight, isScrollable, isFullWidth, isFullHeight } = (0, useCardSizeState_1.useCardSizeState)(deviceType, scrollableContent, fullWidthValue, fullHeight, autoHeight, size || "S");
-    (0, useDeviceType_1.useDeviceType)(setDeviceType);
-    (0, useCardSize_1.useCardSize)(setCardSize, containerRef, (0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || "S"));
-    const { actions, content } = (0, react_1.useMemo)(() => {
-        if (!children) {
-            return { actions: [], content: [] };
-        }
-        if (Array.isArray(children)) {
-            const acts = [];
-            const cnt = [];
-            react_1.default.Children.forEach(children, (el) => {
-                if (!el) {
-                    return;
-                }
-                if (el.type === exports.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) === exports.Card.Button));
-                        return;
-                    }
-                    if (typeof actionChildren === "object" && react_1.default.isValidElement(actionChildren) && actionChildren.type === exports.Card.Button) {
-                        acts.push(actionChildren);
-                    }
-                }
-                if (el.type === exports.Card.Content || (0, isFormSection_1.isFormSection)(el)) {
-                    cnt.push(el);
-                }
-            });
-            return { actions: acts, content: cnt };
-        }
-        return { actions: [], content: [children] };
-    }, [children]);
-    const maxNumberOfActions = (0, getMaxNumberOfActions_1.getMaxNumberOfActions)(cardSize);
-    const { headerActions, menuActions } = (0, react_1.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 = (0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]), type: "tertiary-black", "aria-label": translate("Actions"), htmlType: "button", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large }) });
-    (0, react_1.useEffect)(() => {
-        if (containerRef.current) {
-            containerRef.current.setAttribute("role", "region");
-            containerRef.current.setAttribute("aria-labelledby", titleId);
+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
+  } = (0, useLanguage_1.useLanguage)();
+  const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
+  const [cardSize, setCardSize] = (0, react_1.useState)((0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : size || exports.DEFAULT_CARD_SIZE);
+  const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
+  const containerRef = (0, react_1.useRef)(null);
+  const headerRef = (0, react_1.useRef)(null);
+  const titleId = (0, react_1.useId)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const dateDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__date");
+  const menuTriggerDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__menu-trigger");
+  const fullWidthValue = fullWidth === undefined ? (0, getDefaultFullWidthValue_1.getDefaultFullWidthValue)(isDrive) : fullWidth;
+  const {
+    isAutoHeight,
+    isScrollable,
+    isFullWidth,
+    isFullHeight
+  } = (0, useCardSizeState_1.useCardSizeState)(deviceType, scrollableContent, fullWidthValue, fullHeight, autoHeight, size || "S");
+  (0, useDeviceType_1.useDeviceType)(setDeviceType);
+  (0, useCardSize_1.useCardSize)(setCardSize, containerRef, (0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : size || "S");
+  const {
+    actions,
+    content
+  } = (0, react_1.useMemo)(() => {
+    if (!children) {
+      return {
+        actions: [],
+        content: []
+      };
+    }
+    if (Array.isArray(children)) {
+      const acts = [];
+      const cnt = [];
+      react_1.default.Children.forEach(children, el => {
+        if (!el) {
+          return;
         }
-    }, [containerRef, titleId]);
-    const cardContentClassName = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
-        "zen-card__content",
-        isScrollable ? "zen-card__content--overflow-scroll" : "zen-card__content--overflow-hidden",
-        cardContentClasses
-    ]), [cardContentClasses, isScrollable]);
-    const dateClassName = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-card__date", (isMobile && !isDrive) ? "zen-card__date--mobile" : "", dateDriveClasses !== null && dateDriveClasses !== void 0 ? dateDriveClasses : ""]), [isMobile, isDrive, dateDriveClasses]);
-    const favoriteButton = (0, react_1.useMemo)(() => {
-        if (props.onFavoriteChange === undefined) {
-            return null;
+        if (el.type === exports.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) === exports.Card.Button));
+            return;
+          }
+          if (typeof actionChildren === "object" && react_1.default.isValidElement(actionChildren) && actionChildren.type === exports.Card.Button) {
+            acts.push(actionChildren);
+          }
         }
-        return (0, jsx_runtime_1.jsx)(favoriteButton_1.FavoriteButton, { isFavorite: props.isFavorite || false, onChange: props.onFavoriteChange, className: "zen-card__favorite-button" });
-    }, [props.isFavorite, props.onFavoriteChange]);
-    const { titleIcon, titleIconType } = (0, react_1.useMemo)(() => {
-        if (status) {
-            return {
-                titleIcon: icon || (0, getIconFromStatus_1.getIconFromStatus)(status),
-                titleIconType: iconType || (0, getIconTypeFromStatus_1.getIconTypeFromStatus)(status)
-            };
+        if (el.type === exports.Card.Content || (0, isFormSection_1.isFormSection)(el)) {
+          cnt.push(el);
         }
-        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 (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-primary", children: [title && (0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, target: target, onClick: onClick, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map((action, index) => {
-                                            const actionProps = action.props;
-                                            return (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: actionProps.id || index, id: actionProps.id || `action-${index}`, name: actionProps.name || "" }, actionProps));
-                                        }) })] })] }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content })] });
+      });
+      return {
+        actions: acts,
+        content: cnt
+      };
+    }
+    return {
+      actions: [],
+      content: [children]
+    };
+  }, [children]);
+  const maxNumberOfActions = (0, getMaxNumberOfActions_1.getMaxNumberOfActions)(cardSize);
+  const {
+    headerActions,
+    menuActions
+  } = (0, react_1.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 = (0, jsx_runtime_1.jsx)(button_1.Button, {
+    className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]),
+    type: "tertiary-black",
+    "aria-label": translate("Actions"),
+    htmlType: "button",
+    children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
+      size: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large
+    })
+  });
+  (0, react_1.useEffect)(() => {
+    if (containerRef.current) {
+      containerRef.current.setAttribute("role", "region");
+      containerRef.current.setAttribute("aria-labelledby", titleId);
+    }
+  }, [containerRef, titleId]);
+  const cardContentClassName = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-card__content", isScrollable ? "zen-card__content--overflow-scroll" : "zen-card__content--overflow-hidden", cardContentClasses]), [cardContentClasses, isScrollable]);
+  const dateClassName = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-card__date", isMobile && !isDrive ? "zen-card__date--mobile" : "", dateDriveClasses !== null && dateDriveClasses !== void 0 ? dateDriveClasses : ""]), [isMobile, isDrive, dateDriveClasses]);
+  const favoriteButton = (0, react_1.useMemo)(() => {
+    if (props.onFavoriteChange === undefined) {
+      return null;
+    }
+    return (0, jsx_runtime_1.jsx)(favoriteButton_1.FavoriteButton, {
+      isFavorite: props.isFavorite || false,
+      onChange: props.onFavoriteChange,
+      className: "zen-card__favorite-button"
+    });
+  }, [props.isFavorite, props.onFavoriteChange]);
+  const {
+    titleIcon,
+    titleIconType
+  } = (0, react_1.useMemo)(() => {
+    if (status) {
+      return {
+        titleIcon: icon || (0, getIconFromStatus_1.getIconFromStatus)(status),
+        titleIconType: iconType || (0, getIconTypeFromStatus_1.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 (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, {
+    isMobile: isMobile,
+    fullWidth: isFullWidth,
+    fullHeight: isFullHeight,
+    autoHeight: isAutoHeight,
+    scrollable: isScrollable,
+    ref: containerRef,
+    size: size || "S",
+    className: (0, classNames_1.classNames)(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]),
+    children: [isHeaderVisible ? (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-card__header",
+      ref: headerRef,
+      children: [isHeaderPrimaryVisible && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-card__header-primary",
+        children: [title && (0, jsx_runtime_1.jsx)(title_1.Title, {
+          id: titleId,
+          link: link,
+          target: target,
+          onClick: onClick,
+          isMobile: isMobile,
+          title: title,
+          icon: titleIcon,
+          iconType: titleIconType
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-card__header-right",
+          children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", {
+            className: dateClassName,
+            children: date
+          }) : null, favoriteButton, tooltip && (0, jsx_runtime_1.jsx)(status_1.Status, {
+            title: title,
+            status: status,
+            isMobile: isMobile,
+            tooltip: tooltip,
+            tooltipAlignment: tooltipAlignment,
+            tooltipSize: tooltipSize
+          }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+            trigger: menuTrigger,
+            title: title || translate("Actions"),
+            children: menuActions.map((action, index) => {
+              const actionProps = action.props;
+              return (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({
+                key: actionProps.id || index,
+                id: actionProps.id || `action-${index}`,
+                name: actionProps.name || ""
+              }, actionProps));
+            })
+          })]
+        })]
+      }), secondary ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-card__secondary",
+        children: secondary
+      }) : null]
+    }) : null, (0, jsx_runtime_1.jsx)("div", {
+      className: cardContentClassName,
+      children: content
+    })]
+  });
 };
 exports.Card = Card;
-exports.TRANSLATIONS = [
-    "Actions"
-];
+exports.TRANSLATIONS = ["Actions"];
 exports.Card.Actions = actions_1.Actions;
 exports.Card.Content = content_1.Content;
-exports.Card.Button = cardButton_1.CardButton;
+exports.Card.Button = cardButton_1.CardButton;