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

package/dist/index.css

@@ -5792,6 +5792,9 @@
 .zen-form-field * {
   box-sizing: border-box;
 }
+.zen-form-field--new-component {
+  display: inline-flex;
+}
 .zen-form-field--with-banner {
   gap: 8px;
 }
@@ -5816,12 +5819,12 @@
 .zen-form-field__input-container--with-trailing {
   gap: 8px;
 }
-.zen-form-field__input-container .zen-radio {
-  padding: 0 16px 12px 0;
-}
 .zen-form-field__input-container--review {
   grid-template-columns: max-content max-content;
 }
+.zen-form-field.zen-form-field--form-item .zen-radio {
+  padding: 0 16px 12px 0;
+}
 .zen-form-field__trailing-text {
   display: flex;
   align-items: center;
@@ -5891,7 +5894,6 @@
 }
 .zen-form-field__length {
   flex: 0 0 auto;
-  margin-right: 8px;
   font-family: var(--main-font);
   font-size: 12px;
   font-style: normal;
@@ -5901,6 +5903,14 @@
   text-transform: none;
   color: var(--text-secondary);
 }
+.zen-form-field__label-wrapper {
+  display: grid;
+  grid-template-rows: 1fr 20px;
+}
+.zen-form-field__trailing-wrapper {
+  display: grid;
+  grid-template-rows: 1fr 20px;
+}
 .zen-form-field--label-left {
   display: flex;
   flex-direction: row;
@@ -7433,7 +7443,7 @@
 .zen-advanced-groups-filter-form__popup.zen-advanced-groups-filter-form__popup {
   z-index: 11001;
 }
-.zen-advanced-groups-filter-form__mobile-sheet-stacking {
+.zen-advanced-groups-filter-form__mobile-sheet-stacking.zen-advanced-groups-filter-form__mobile-sheet-stacking {
   z-index: 11012;
 }
 .zen-group-button {
@@ -14033,9 +14043,11 @@ button.zen-summary__clickable {
 }
 .zen-nav {
   --nav-gap: 16px;
-  --nav-top-bottom-padding: 12px;
+  --nav-bottom-padding: 12px;
+  --nav-top-padding: 9px;
   --nav-left-right-padding: 12px;
   --nav-left-right-collapsed-padding: 8px;
+  --nav-top-collapsed-padding: 20px;
   --nav-top-bottom-mobile-padding: 12px;
   --nav-background-color: var(--backgrounds-content-1);
   box-sizing: border-box;
@@ -14043,7 +14055,7 @@ button.zen-summary__clickable {
   flex-direction: column;
   gap: var(--nav-gap);
   height: 100%;
-  padding: var(--nav-top-bottom-padding) var(--nav-left-right-padding);
+  padding: var(--nav-top-padding) var(--nav-left-right-padding) var(--nav-bottom-padding);
   background-color: var(--nav-background-color);
 }
 .zen-nav__header {
@@ -14116,6 +14128,7 @@ button.zen-summary__clickable {
 .zen-nav--collapsed {
   padding-left: var(--nav-left-right-collapsed-padding);
   padding-right: var(--nav-left-right-collapsed-padding);
+  padding-top: var(--nav-top-collapsed-padding);
 }
 .zen-nav--collapsed .zen-nav__content--has-scrollbar {
   margin-right: calc(-1 * var(--nav-left-right-collapsed-padding));
@@ -14197,10 +14210,86 @@ button.zen-summary__clickable {
   align-items: center;
 }
 .zen-nav-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+.zen-nav-item--active .zen-nav-item__main {
+  text-decoration: none;
+}
+.zen-nav-item--active .zen-nav-item__icon {
+  color: var(--text-reverse-primary-button);
+  fill: var(--text-reverse-primary-button);
+  background-color: var(--action-primary--default);
+  border-color: var(--borders-form-field--active);
+}
+.zen-nav-item--active .zen-nav-item__title {
+  color: var(--text-nav-highlight);
+  fill: var(--text-nav-highlight);
+}
+.zen-nav-item--active .zen-nav-item__title-text {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+}
+.zen-nav-item:not(.zen-nav-item--collapsed) .zen-nav-item__main {
+  min-height: 36px;
+}
+.zen-nav-item--collapsed {
+  width: auto;
+}
+.zen-nav-item--collapsed .zen-nav-item__main {
+  padding: 0;
+  width: auto;
+  display: inline-flex;
+  justify-content: center;
+}
+.zen-nav-item--collapsed .zen-nav-item__icon {
+  padding: 6px;
+  position: relative;
+}
+.zen-nav-item--collapsed .zen-nav-item__icon--with-counter::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 8px;
+  height: 8px;
+  background-color: var(--action-destructive--default);
+  border: 1px solid var(--backgrounds-content-0);
+  border-radius: 50%;
+}
+.zen-nav-item--mobile-bar {
+  margin: 6px;
+}
+.zen-nav-item--button .zen-nav-item__main {
+  border: 0;
+  background: transparent;
+  text-align: left;
+}
+.zen-nav-item--link .zen-nav-item__main {
+  text-decoration: none;
+}
+.zen-nav-item--nested:not(.zen-nav-item--mobile) .zen-nav-item__main {
+  min-height: 32px;
+  border-radius: 4px;
+  padding: 4px;
+}
+.zen-nav-item--nested.zen-nav-item--mobile .zen-nav-item__main {
+  border-radius: 0;
+}
+.zen-nav-item__main {
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
   padding: 4px;
   border-radius: var(--border-radius-default);
   color: var(--text-secondary);
@@ -14217,6 +14306,13 @@ button.zen-summary__clickable {
   line-height: 16px;
   text-transform: none;
 }
+.zen-nav-item__main:hover,
+.zen-nav-item__main:focus-visible,
+.zen-nav-item__main:focus {
+  outline: none;
+  background-color: var(--backgrounds-hover);
+  text-decoration: none;
+}
 .zen-nav-item__beta {
   background-color: var(--accents-general--main);
   color: var(--accents-general--detail);
@@ -14279,82 +14375,28 @@ button.zen-summary__clickable {
   align-items: center;
   gap: 4px;
 }
-.zen-nav-item__tertiary-icon-button {
+.zen-nav-item__action {
   display: flex;
-  padding: 0;
+  flex: 0 0 auto;
+  height: 36px;
+  width: 36px;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
   border: 0;
+  border-radius: var(--border-radius-default);
   background: transparent;
   cursor: pointer;
+  color: var(--text-secondary);
+  fill: var(--text-secondary);
 }
-.zen-nav-item--button {
-  border: 0;
-  background: transparent;
-  text-align: left;
-}
-.zen-nav-item:hover,
-.zen-nav-item:focus-visible,
-.zen-nav-item:focus {
+.zen-nav-item__action:hover,
+.zen-nav-item__action:focus-visible,
+.zen-nav-item__action:focus {
   outline: none;
   background-color: var(--backgrounds-hover);
   text-decoration: none;
 }
-.zen-nav-item--active {
-  text-decoration: none;
-}
-.zen-nav-item--active .zen-nav-item__icon {
-  color: var(--text-reverse-primary-button);
-  fill: var(--text-reverse-primary-button);
-  background-color: var(--action-primary--default);
-  border-color: var(--borders-form-field--active);
-}
-.zen-nav-item--active .zen-nav-item__title {
-  color: var(--text-nav-highlight);
-  fill: var(--text-nav-highlight);
-}
-.zen-nav-item--active .zen-nav-item__title-text {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
-  line-height: 16px;
-  text-transform: none;
-}
-.zen-nav-item:not(.zen-nav-item--collapsed) {
-  min-height: 36px;
-}
-.zen-nav-item--collapsed {
-  padding: 0;
-  width: auto;
-  display: inline-flex;
-  justify-content: center;
-}
-.zen-nav-item--collapsed .zen-nav-item__icon {
-  padding: 6px;
-  position: relative;
-}
-.zen-nav-item--collapsed .zen-nav-item__icon--with-counter::before {
-  content: "";
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 8px;
-  height: 8px;
-  background-color: var(--action-destructive--default);
-  border: 1px solid var(--backgrounds-content-0);
-  border-radius: 50%;
-}
-.zen-nav-item--mobile-bar {
-  margin: 6px;
-}
-.zen-nav-item--nested:not(.zen-nav-item--mobile) {
-  min-height: 32px;
-  border-radius: 4px;
-  padding: 4px;
-}
-.zen-nav-item--nested.zen-nav-item--mobile {
-  border-radius: 0;
-}
 .nav-footer-action {
   display: flex;
   flex-direction: column;

package/dist/index.d.ts

@@ -756,6 +756,7 @@ export { type IAbortablePromiseOptions, type IAbortablePromiseConstructor, Abort
 export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvider";
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
+export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";
 export { ThemeDrive } from "./utils/theme/themeDrive";

package/dist/index.js

@@ -17,7 +17,7 @@ exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSqu
 exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = void 0;
 exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageNothingFound = exports.ImageLooking = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = void 0;
 exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1628,6 +1628,9 @@ Object.defineProperty(exports, "getNewFocusableItem", { enumerable: true, get: f
 Object.defineProperty(exports, "getFirstFocusableItem", { enumerable: true, get: function () { return keyboardHelpers_1.getFirstFocusableItem; } });
 var languageProvider_1 = require("./utils/localization/languageProvider");
 Object.defineProperty(exports, "LanguageProvider", { enumerable: true, get: function () { return languageProvider_1.LanguageProvider; } });
+var translationsDictionary_1 = require("./utils/localization/translationsDictionary");
+Object.defineProperty(exports, "dictionaries", { enumerable: true, get: function () { return translationsDictionary_1.dictionaries; } });
+Object.defineProperty(exports, "injectString", { enumerable: true, get: function () { return translationsDictionary_1.injectString; } });
 var useLanguage_1 = require("./utils/localization/useLanguage");
 Object.defineProperty(exports, "useLanguage", { enumerable: true, get: function () { return useLanguage_1.useLanguage; } });
 var themeDark_1 = require("./utils/theme/themeDark");

package/dist/list/itemData/itemDataInternal.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.ItemDataInternal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -12,55 +18,214 @@ const iconDotVertical_1 = require("../../icons/iconDotVertical");
 const menu_1 = require("../../menu/menu");
 const isActiveElement_1 = require("../utils/isActiveElement");
 const checkbox_1 = require("../../checkbox/checkbox");
-const ItemDataInternalInner = ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, target }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const driveClassName = (0, react_1.useMemo)(() => isDrive
-        ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet"
-        : "", [isDrive, isMobile]);
-    const renderActions = (0, react_1.useCallback)(() => {
-        if (!actions || actions.length === 0) {
-            return null;
-        }
-        return (0, jsx_runtime_1.jsx)(menu_1.Menu, { alignment: "bottom-right", title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-item-data__more-button", "aria-label": translate("More"), title: translate("More"), children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "large" }) }), children: actions.map((action) => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: action.name, name: action.name, onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined, link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined }, action.name)) });
-    }, [actions, translate]);
-    const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
-        if (typeof iconComponent === "function") {
-            return (0, react_1.createElement)(iconComponent, { size: "large", className: (0, classNames_1.classNames)([className || "", iClassName || ""]) });
-        }
-        return iconComponent;
-    }, []);
-    const handleClick = (0, react_1.useCallback)((e) => {
-        if (!onClick) {
-            return;
-        }
-        if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
-            return;
-        }
-        onClick();
-    }, [onClick]);
-    const handleCheck = (0, react_1.useCallback)((e) => {
-        if (onCheck) {
-            onCheck(e.target.checked);
-        }
-    }, [onCheck]);
-    const hasCheckbox = (0, react_1.useMemo)(() => checked !== undefined && onCheck, [checked, onCheck]);
-    const placeholderHeight = (0, react_1.useMemo)(() => {
-        let plHeight = secondary ? 32 : (icon ? 24 : 16);
-        if (data) {
-            plHeight += 4 + data.length * 16 + (data.length - 1) * 4;
-        }
-        return { height: `${plHeight + 12 * 2 + 1}px` };
-    }, [data, icon, secondary]);
-    const classNamesList = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]), [driveClassName]);
-    if (!visible) {
-        return (0, jsx_runtime_1.jsx)("li", { style: placeholderHeight, className: classNamesList, "data-list-item-id": id }, id);
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
+injectString("cs", "Open", "Otev\u0159\xEDt");
+injectString("da-DK", "Open", "\xC5bn");
+injectString("de", "Open", "Offen");
+injectString("en", "Open", "Open");
+injectString("es", "Open", "Abierto");
+injectString("fi-FI", "Open", "Avaa");
+injectString("fr", "Open", "Ouvert");
+injectString("fr-FR", "Open", "Ouvrir");
+injectString("hu-HU", "Open", "Megnyit\xE1s");
+injectString("id", "Open", "Buka");
+injectString("it", "Open", "Aperto");
+injectString("ja", "Open", "\u30AA\u30FC\u30D7\u30F3");
+injectString("ko-KR", "Open", "\uC5F4\uB824 \uC788\uB294");
+injectString("ms", "Open", "Buka");
+injectString("nb-NO", "Open", "\xC5pne");
+injectString("nl", "Open", "Open");
+injectString("pl", "Open", "Otw\xF3rz");
+injectString("pt-BR", "Open", "Aberto");
+injectString("sk-SK", "Open", "Otvoren\xE9");
+injectString("sv", "Open", "\xD6ppna");
+injectString("th", "Open", "\u0E40\u0E1B\u0E34\u0E14");
+injectString("tr", "Open", "A\xE7");
+injectString("zh-Hans", "Open", "\u6253\u5F00");
+injectString("zh-TW", "Open", "\u958B\u555F");
+const ItemDataInternalInner = ({
+  id,
+  visible,
+  icon,
+  iconClassName,
+  name,
+  link,
+  secondary,
+  status,
+  actions,
+  data,
+  onClick,
+  checked,
+  onCheck,
+  isDrive,
+  isMobile,
+  target
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const driveClassName = (0, react_1.useMemo)(() => isDrive ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet" : "", [isDrive, isMobile]);
+  const renderActions = (0, react_1.useCallback)(() => {
+    if (!actions || actions.length === 0) {
+      return null;
     }
-    return (0, jsx_runtime_1.jsxs)("li", { className: (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__main", children: [hasCheckbox && (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "zen-item-data__checkbox", checked: checked, onChange: handleCheck, title: name }), icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__identifier", children: [link
-                                        ? (0, jsx_runtime_1.jsx)("a", { href: link, target: target, className: "zen-item-data__link zen-link zen-link--light zen-link--inline", children: name })
-                                        : (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__secondary", children: secondary }) : null] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__status", children: status }) : null, renderActions(), onClick ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-item-data__click", onClick: onClick, title: translate("Open"), "aria-label": translate("Open"), children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-item-data__click-icon" }) }) : null] })] }), data && data.length > 0
-                ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__secondary-data", children: [hasCheckbox ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__checkbox-placeholder" }) : null, icon ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__icon-placeholder" }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__data", children: data.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__data-row", children: [item.label ? (0, jsx_runtime_1.jsx)("span", { className: "zen-item-data__data-label", children: item.label }) : null, (0, jsx_runtime_1.jsxs)("span", { className: "zen-item-data__data-value", children: [item.icon ? renderIcon(item.icon, item.iconClassName, "zen-item-data__data-value-icon") : null, item.link
-                                                ? (0, jsx_runtime_1.jsx)("a", { className: "zen-link zen-link--inline zen-link--light", href: item.link, target: target, children: item.value })
-                                                : (0, jsx_runtime_1.jsx)("span", { className: "zen-item-data__data-value-text", children: item.value })] })] }, index))) })] })
-                : null] }, id);
+    return (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+      alignment: "bottom-right",
+      title: translate("More"),
+      trigger: (0, jsx_runtime_1.jsx)(button_1.Button, {
+        type: "tertiary-black",
+        className: "zen-item-data__more-button",
+        "aria-label": translate("More"),
+        title: translate("More"),
+        children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, {
+          size: "large"
+        })
+      }),
+      children: actions.map(action => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, {
+        id: action.name,
+        name: action.name,
+        onClick: (0, interfaces_1.isButtonAction)(action) ? action.onClick : undefined,
+        link: !(0, interfaces_1.isButtonAction)(action) ? action.link : undefined
+      }, action.name))
+    });
+  }, [actions, translate]);
+  const renderIcon = (0, react_1.useCallback)((iconComponent, iClassName, className) => {
+    if (typeof iconComponent === "function") {
+      return (0, react_1.createElement)(iconComponent, {
+        size: "large",
+        className: (0, classNames_1.classNames)([className || "", iClassName || ""])
+      });
+    }
+    return iconComponent;
+  }, []);
+  const handleClick = (0, react_1.useCallback)(e => {
+    if (!onClick) {
+      return;
+    }
+    if (e.target instanceof HTMLElement && (0, isActiveElement_1.isActiveElement)(e.target)) {
+      return;
+    }
+    onClick();
+  }, [onClick]);
+  const handleCheck = (0, react_1.useCallback)(e => {
+    if (onCheck) {
+      onCheck(e.target.checked);
+    }
+  }, [onCheck]);
+  const hasCheckbox = (0, react_1.useMemo)(() => checked !== undefined && onCheck, [checked, onCheck]);
+  const placeholderHeight = (0, react_1.useMemo)(() => {
+    let plHeight = secondary ? 32 : icon ? 24 : 16;
+    if (data) {
+      plHeight += 4 + data.length * 16 + (data.length - 1) * 4;
+    }
+    return {
+      height: `${plHeight + 12 * 2 + 1}px`
+    };
+  }, [data, icon, secondary]);
+  const classNamesList = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]), [driveClassName]);
+  if (!visible) {
+    return (0, jsx_runtime_1.jsx)("li", {
+      style: placeholderHeight,
+      className: classNamesList,
+      "data-list-item-id": id
+    }, id);
+  }
+  return (0, jsx_runtime_1.jsxs)("li", {
+    className: (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]),
+    "data-list-item-id": id,
+    onClick: handleClick,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-item-data__main",
+      children: [hasCheckbox && (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, {
+        className: "zen-item-data__checkbox",
+        checked: checked,
+        onChange: handleCheck,
+        title: name
+      }), icon ? (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-item-data__icon", iconClassName || ""]),
+        children: renderIcon(icon)
+      }) : null, (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-item-data__main-data",
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-item-data__identifier",
+          children: [link ? (0, jsx_runtime_1.jsx)("a", {
+            href: link,
+            target: target,
+            className: "zen-item-data__link zen-link zen-link--light zen-link--inline",
+            children: name
+          }) : (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-item-data__name",
+            children: name
+          }), secondary ? (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-item-data__secondary",
+            children: secondary
+          }) : null]
+        }), status ? (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-item-data__status",
+          children: status
+        }) : null, renderActions(), onClick ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+          type: "tertiary-black",
+          className: "zen-item-data__click",
+          onClick: onClick,
+          title: translate("Open"),
+          "aria-label": translate("Open"),
+          children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+            size: "large",
+            className: "zen-item-data__click-icon"
+          })
+        }) : null]
+      })]
+    }), data && data.length > 0 ? (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-item-data__secondary-data",
+      children: [hasCheckbox ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-item-data__checkbox-placeholder"
+      }) : null, icon ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-item-data__icon-placeholder"
+      }) : null, (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-item-data__data",
+        children: data.map((item, index) => (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-item-data__data-row",
+          children: [item.label ? (0, jsx_runtime_1.jsx)("span", {
+            className: "zen-item-data__data-label",
+            children: item.label
+          }) : null, (0, jsx_runtime_1.jsxs)("span", {
+            className: "zen-item-data__data-value",
+            children: [item.icon ? renderIcon(item.icon, item.iconClassName, "zen-item-data__data-value-icon") : null, item.link ? (0, jsx_runtime_1.jsx)("a", {
+              className: "zen-link zen-link--inline zen-link--light",
+              href: item.link,
+              target: target,
+              children: item.value
+            }) : (0, jsx_runtime_1.jsx)("span", {
+              className: "zen-item-data__data-value-text",
+              children: item.value
+            })]
+          })]
+        }, index))
+      })]
+    }) : null]
+  }, id);
 };
-exports.ItemDataInternal = (0, react_1.memo)(ItemDataInternalInner);
+exports.ItemDataInternal = (0, react_1.memo)(ItemDataInternalInner);