@geotab/zenith 3.12.3 → 3.13.0-beta.0

package/dist/commonStyles/fonts/roboto.less

@@ -1,5 +1,5 @@
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: normal;
     font-weight: 300;
     src:
@@ -8,7 +8,7 @@
 }
 
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: normal;
     font-weight: 400;
     src:
@@ -17,7 +17,7 @@
 }
 
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: normal;
     font-weight: 500;
     src:
@@ -26,7 +26,7 @@
 }
 
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: normal;
     font-weight: 700;
     src:
@@ -35,7 +35,7 @@
 }
 
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: italic;
     font-weight: 300;
     src:
@@ -44,7 +44,7 @@
 }
 
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: italic;
     font-weight: 400;
     src:
@@ -53,7 +53,7 @@
 }
 
 @font-face {
-    font-family: "Roboto";
+    font-family: Roboto;
     font-style: italic;
     font-weight: 700;
     src:

package/dist/commonStyles/link/link.less

@@ -7,7 +7,7 @@
     cursor: pointer;
     background: none;
     border: none;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     &:hover,
     &:focus,

package/dist/commonStyles/notSelectable.less

@@ -1,8 +1,4 @@
 .zen-not-selectable {
     -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }

package/dist/commonStyles/pillStyles/pillContent.less

@@ -10,14 +10,12 @@
     @pill-height--mobile: 34px;
 
     .zen-body-s-400();
-    display: flex;
     align-items: center;
     justify-content: space-between;
     border-radius: (30 / @rem);
     height: @pill-height;
     display: grid;
     grid-auto-flow: column;
-
     gap: (8 / @rem);
 
     &--icon-left {
@@ -44,9 +42,11 @@
     &--hidden {
         gap: (4 / @rem);
     }
+
     &.zen-pill-new-content--drive,
     &.zen-pill-new-content--drive-tablet {
         height: @pill-height--drive;
+
         .zen-pill-non-actionable__icon {
             min-width: (16 / @rem);
             max-width: 16px;
@@ -70,9 +70,11 @@
             }
         }
     }
+
     &.zen-pill-new-content--mobile {
         height: @pill-height--mobile;
         .zen-body-m-400-short();
+
         .zen-pill-non-actionable__icon {
             min-width: (16 / @rem);
             max-width: 16px;
@@ -96,9 +98,11 @@
             }
         }
     }
+
     &.zen-pill-new-content--drive {
         .zen-body-s-400-drive();
     }
+
     &.zen-pill-new-content--drive-tablet {
         .zen-body-s-400-drive();
     }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -6,7 +6,7 @@
     color: var(--text-primary);
     align-items: center;
     justify-content: space-between;
-    padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
+    padding: (4 / @rem) (12 / @rem);
     border-radius: (30 / @rem);
     background: var(--backgrounds-content-1);
 }

package/dist/commonStyles/pillStyles/pillTextContent.less

@@ -7,13 +7,16 @@
     &--hidden {
         visibility: hidden;
     }
+
     &.zen-pill-text-content--drive,
     &.zen-pill-text-content--drive-tablet {
         height: 20px;
     }
+
     &.zen-pill-text-content--drive {
         .zen-body-s-400-drive();
     }
+
     &.zen-pill-text-content--drive-tablet {
         .zen-body-s-400-drive();
     }

package/dist/commonStyles/pillStyles/pillTypes.less

@@ -5,8 +5,10 @@
         background: var(--backgrounds-content-1);
         color: var(--text-primary);
         fill: var(--text-primary);
+
         .zen-pill-non-actionable__close-button {
             fill: var(--text-primary);
+
             &:active .zen-pill-non-actionable__close-icon,
             &:hover .zen-pill-non-actionable__close-icon,
             &:focus .zen-pill-non-actionable__close-icon {
@@ -21,8 +23,10 @@
         color: var(--accents-success--detail);
         background-color: var(--accents-success--main);
         fill: var(--accents-success--detail);
+
         .zen-pill-non-actionable__close-button {
             fill: var(--accents-success--detail);
+
             &:active .zen-pill-non-actionable__close-icon,
             &:hover .zen-pill-non-actionable__close-icon,
             &:focus .zen-pill-non-actionable__close-icon {
@@ -37,8 +41,10 @@
         background-color: var(--accents-error--main);
         color: var(--accents-error--detail);
         fill: var(--accents-error--detail);
+
         .zen-pill-non-actionable__close-button {
             fill: var(--accents-error--detail);
+
             &:active .zen-pill-non-actionable__close-icon,
             &:hover .zen-pill-non-actionable__close-icon,
             &:focus .zen-pill-non-actionable__close-icon {
@@ -53,8 +59,10 @@
         background-color: var(--accents-warning--main);
         color: var(--accents-warning--detail);
         fill: var(--accents-warning--detail);
+
         .zen-pill-non-actionable__close-button {
             fill: var(--accents-warning--detail);
+
             &:active .zen-pill-non-actionable__close-icon,
             &:hover .zen-pill-non-actionable__close-icon,
             &:focus .zen-pill-non-actionable__close-icon {
@@ -69,8 +77,10 @@
         background-color: var(--accents-general--main);
         color: var(--accents-general--detail);
         fill: var(--accents-general--detail);
+
         .zen-pill-non-actionable__close-button {
             fill: var(--accents-general--detail);
+
             &:active .zen-pill-non-actionable__close-icon,
             &:hover .zen-pill-non-actionable__close-icon,
             &:focus .zen-pill-non-actionable__close-icon {

package/dist/commonStyles/popupMixin.less

@@ -7,9 +7,9 @@
 }
 
 .zen-popup-body.zen-popup-body {
-    overflow-y: auto;
+    overflow-block: auto;
 
     &--hidden {
-        overflow-y: hidden;
+        overflow-block: hidden;
     }
 }

package/dist/commonStyles/rangeFieldMixin.less

@@ -3,14 +3,12 @@
     grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
     grid-template-rows: auto auto;
     gap: (4 / @rem) (8 / @rem);
-    align-items: center;
-    justify-items: start;
+    place-items: center start;
 }
 
 .zen-range-field-wrapper-row {
     display: grid;
-    align-items: center;
-    justify-items: start;
+    place-items: center start;
     grid-template-columns:
         minmax((24 / @rem), (32 / @rem))
         minmax((64 / @rem), (64 / @rem))
@@ -18,6 +16,5 @@
         minmax((24 / @rem), (32 / @rem))
         minmax((64 / @rem), (64 / @rem))
         minmax((24 / @rem), (32 / @rem));
-    row-gap: (4 / @rem);
-    column-gap: (8 / @rem);
+    gap: (4 / @rem) (8 / @rem);
 }

package/dist/commonStyles/shadows/shadows.less

@@ -1,11 +1,11 @@
 .zen-shadow-dropdown-default {
-    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
 }
 
 .zen-card-shadow {
-    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
 }
 
 .zen-chip-shadow {
-    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
 }

package/dist/commonStyles/typography/typography.less

@@ -441,7 +441,7 @@
 }
 
 // Responsive overrides (mobile — max-width: 640px)
-@media (max-width: 640px) {
+@media (width <= 640px) {
     // Standard
     .zen-heading-xl-300 {
         .zen-font(@main-font-family, @heading-01-font-mobile-size, @heading-01-line-height, @weight: @heading-01-weight);
@@ -548,10 +548,10 @@
 }
 
 :root {
-    --main-font: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
-    --main-font-data: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
-    --data-font-drive: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
-    --arabic-font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+    --main-font: roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
+    --main-font-data: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
+    --data-font-drive: "Roboto Mono", "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
+    --arabic-font-family: "Noto Sans Arabic", roboto, "Segoe UI", segoe, "Helvetica Neue", helvetica, sans-serif;
 }
 
 // Labels
@@ -571,7 +571,7 @@
     .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-label-400-drive {
         .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400);
     }
@@ -619,7 +619,7 @@
     .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-body-l-400-drive {
         .font(var(--main-font), 18px, @line-height: 28px, @letter-spacing: 0, @weight: 400);
     }
@@ -635,7 +635,7 @@
     .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-body-m-400-short-drive {
         .font(var(--main-font), 16px, @line-height: 20px, @weight: 400);
     }
@@ -651,7 +651,7 @@
     .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-body-m-400-tall-drive {
         .font(var(--main-font), 16px, @line-height: 26px, @weight: 400);
     }
@@ -667,7 +667,7 @@
     .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-body-s-700-drive {
         .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 700);
     }
@@ -683,7 +683,7 @@
     .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-body-s-400-drive {
         .font(var(--main-font), 14px, @line-height: 20px, @letter-spacing: 0.32px, @weight: 400);
     }
@@ -699,7 +699,7 @@
     .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-body-s-400-italic-drive {
         .font(var(--main-font), 14px, @line-height: 18px, @letter-spacing: 0.32px, @weight: 400, @style: italic);
     }
@@ -716,7 +716,7 @@
     .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .heading-xl-300 {
         .font(var(--main-font), 20px, @line-height: 36px, @weight: 300);
     }
@@ -737,7 +737,7 @@
     .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .heading-m-300 {
         .font(var(--main-font), 18px, @line-height: 28px, @weight: 300);
     }
@@ -773,7 +773,7 @@
     .font(var(--main-font), 24px, 32px, @weight: 300);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-heading-xl-300-drive {
         .font(var(--main-font), 24px, 32px, @weight: 300);
     }
@@ -789,7 +789,7 @@
     .font(var(--main-font), 22px, 28px, @weight: 400);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-heading-l-400-drive {
         .font(var(--main-font), 22px, 28px, @weight: 400);
     }
@@ -805,7 +805,7 @@
     .font(var(--main-font), 18px, 24px, @weight: 300);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-heading-m-300-drive {
         .font(var(--main-font), 18px, 24px, @weight: 300);
     }
@@ -821,7 +821,7 @@
     .font(var(--main-font), 18px, 26px, @weight: 500);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-heading-m-500-drive {
         .font(var(--main-font), 18px, 26px, @weight: 500);
     }
@@ -837,7 +837,7 @@
     .font(var(--main-font), 16px, 20px, 0.16px, 500);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-heading-s-500-drive {
         .font(var(--main-font), 16px, 20px, 0.16px, 500);
     }
@@ -861,7 +861,7 @@
     .font(var(--main-font), 16px, 18px, 0.16px, 300);
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-heading-s-300-drive {
         .font(var(--main-font), 16px, 18px, 0.16px, 300);
     }
@@ -909,7 +909,7 @@
     .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-data-xl-drive {
         .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
     }
@@ -925,7 +925,7 @@
     .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-data-l-drive {
         .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
     }
@@ -941,7 +941,7 @@
     .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-data-m-drive {
         .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
     }
@@ -957,7 +957,7 @@
     .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
     .tablet-data-s-drive {
         .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
     }

package/dist/dataFeed/dataFeed.js

@@ -33,8 +33,13 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
     const { collapsedColumnsQty = 0, onFeedEnd, visibleColumns } = options;
     const feedRef = (0, react_1.useRef)(null);
     const lazyRenderTimerRef = (0, react_1.useRef)(0);
+    const feedEndFiredRef = (0, react_1.useRef)(false);
+    const prevEntitiesRef = (0, react_1.useRef)(entities);
     (0, react_1.useEffect)(() => {
         setPages(1);
+        // Re-arm the once-per-approach guard on a paginated reload (activePage change); in-place
+        // entity-list changes re-arm via the entities effect below.
+        feedEndFiredRef.current = false;
         if (feedRef.current) {
             feedRef.current.scrollTop = 0;
         }
@@ -82,11 +87,21 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
                 newVisibleRows.forEach(row => newRowsSet.add(row));
                 setVisibleRows(newRowsSet);
             }
-            if (visibleRows.size && checkCloseToTheEnd(feedRef.current)) {
+            const closeToTheEnd = checkCloseToTheEnd(feedRef.current);
+            if (visibleRows.size && closeToTheEnd) {
                 if (entities.length > data.length) {
                     setPages(pages + 1);
                 }
-                onFeedEnd && onFeedEnd();
+                // Fire onFeedEnd once per approach to the bottom (re-armed below once scrolled out),
+                // matching DataGrid.onScrollEnd. Without the guard the consumer is called on every
+                // animation frame near the bottom and has to debounce it itself.
+                if (!feedEndFiredRef.current) {
+                    feedEndFiredRef.current = true;
+                    onFeedEnd && onFeedEnd();
+                }
+            }
+            else if (!closeToTheEnd) {
+                feedEndFiredRef.current = false;
             }
         });
     }, [itemsMap, visibleRows, setVisibleRows, onFeedEnd, pages, setPages, entities, data.length]);
@@ -95,6 +110,17 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
         (_a = zen_1.zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, lazyRenderTimerRef.current);
         lazyRenderTimerRef.current = scheduleVisibleChanges();
     }, [scheduleVisibleChanges]);
+    (0, react_1.useEffect)(() => {
+        // An entity-list change (in-place filter/sort swap, or appended rows) re-arms the once-per-approach
+        // guard and re-checks fit, so a short result set still requests the next page and a stale guard
+        // can't suppress the next fire. Keyed on `entities`, not the internal `data` slice, so progressive
+        // `setPages` reveals don't reset the guard and cause repeat fires.
+        if (prevEntitiesRef.current !== entities) {
+            prevEntitiesRef.current = entities;
+            feedEndFiredRef.current = false;
+            scheduleLazyRender();
+        }
+    }, [entities, scheduleLazyRender]);
     const handleScroll = (0, react_1.useCallback)(() => {
         scheduleLazyRender();
     }, [scheduleLazyRender]);

package/dist/dataGrid/columns/actionsColumn/actionsButton.js

@@ -37,6 +37,6 @@ function ActionsButton({ action, entity }) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(actionsColumnCell_1.ActionColumnCell, { ref: buttonRef, tag: action.createLink !== undefined ? "a" : "button", hash: action.id, title: action.createTitle(entity), href: action.createLink !== undefined ? action.createLink(entity) : undefined, icon: action.icon, onClick: e => {
                     setIsMenuOpen(!isMenuOpen);
                     action.handler && action.handler(entity, e.target);
-                } }, action.id), items.length ? ((0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: buttonRef, alignment: "bottom-right", isOpen: isMenuOpen, setIsOpen: setIsMenuOpen, title: action.createTitle(entity), children: items }, entityId + "-" + action.id + "-menu")) : null] }));
+                } }, action.id), items.length ? ((0, jsx_runtime_1.jsx)(controlledMenu_1.ControlledMenu, { triggerRef: buttonRef, alignment: "bottom-end", isOpen: isMenuOpen, setIsOpen: setIsMenuOpen, title: action.createTitle(entity), children: items }, entityId + "-" + action.id + "-menu")) : null] }));
 }
 exports.ActionsButton = ActionsButton;

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -220,7 +220,7 @@ const withFlexibleColumns = DataGridComponent => {
       }) : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
         ariaLabel: translate("Select visible columns"),
         triggerRef: popupTriggerRef,
-        alignment: "bottom-right",
+        alignment: "bottom-end",
         children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, {
           onReset: onResetListener,
           children: listOfColumns

package/dist/dataGrid/withSelectableRows/withSelectableRows.js

@@ -294,7 +294,7 @@ const withSelectableRows = DataGridComponent => {
         triggerRef: selectMenuRef,
         isOpen: isOpen,
         onOpenChange: setIsOpen,
-        alignment: "bottom-left",
+        alignment: "bottom-start",
         children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
           id: selectId,
           title: translate("Select menu"),