@geotab/zenith 3.15.0-beta.0 → 3.15.0-beta.2

package/dist/index.css

@@ -1863,6 +1863,7 @@ html:lang(ar) .mobile-data-s-drive {
   }
 }
 :root {
+  fill: var(--text-primary);
   --text-primary: #1f2833;
   --text-secondary: #4e677e;
   --text-placeholder: #8da4b9;
@@ -1928,6 +1929,7 @@ html:lang(ar) .mobile-data-s-drive {
 }
 .zen-dark {
   color: var(--text-primary);
+  fill: var(--text-primary);
   --text-primary: #ffffff;
   --text-secondary: #c0ccd8;
   --text-placeholder: #a6b8c9;
@@ -2703,7 +2705,6 @@ html:lang(ar) .zen-button--mobile {
   width: 11px;
   height: 11px;
   display: inline;
-  fill: currentcolor;
 }
 .zen-icon * {
   box-sizing: border-box;
@@ -3338,6 +3339,10 @@ html:lang(ar) .zen-tooltip__title {
   position: absolute;
   border-style: solid;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
+  border-width: 6px;
+  border-color: transparent;
+  /* stylelint-disable */
+  /* stylelint-enable */
 }
 .zen-tooltip__arrow--top {
   inset-block-start: 100%;
@@ -3354,25 +3359,15 @@ html:lang(ar) .zen-tooltip__title {
   filter: drop-shadow(0 -4px 4px rgba(0, 0, 0, 0.2));
 }
 .zen-tooltip__arrow--right {
-  inset-inline-end: 100%;
-  border-color: transparent var(--backgrounds-content-1) transparent transparent;
-  border-width: 5px 6px 5px 0;
+  right: 100%;
+  border-right-color: var(--backgrounds-content-1);
   filter: drop-shadow(-4px 0 4px rgba(0, 0, 0, 0.2));
 }
-[dir="rtl"] .zen-tooltip__arrow--right {
-  border-color: transparent transparent transparent var(--backgrounds-content-1);
-  filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.2));
-}
 .zen-tooltip__arrow--left {
-  inset-inline-start: 100%;
-  border-color: transparent transparent transparent var(--backgrounds-content-1);
-  border-width: 5px 0 6px 5px;
+  left: 100%;
+  border-left-color: var(--backgrounds-content-1);
   filter: drop-shadow(4px 0 4px rgba(0, 0, 0, 0.2));
 }
-[dir="rtl"] .zen-tooltip__arrow--left {
-  border-color: transparent var(--backgrounds-content-1) transparent transparent;
-  filter: drop-shadow(-4px 0 4px rgba(0, 0, 0, 0.2));
-}
 .zen-tooltip__trigger {
   color: var(--text-secondary);
   fill: var(--text-secondary);
@@ -4311,6 +4306,10 @@ html:lang(ar) .zen-side-panel-cell__title {
   background-color: var(--accents-success--main);
   border-color: var(--accents-success--detail);
 }
+.zen-toast--error {
+  background-color: var(--accents-error--main);
+  border-color: var(--accents-error--detail);
+}
 .zen-toast__icon {
   padding-inline-end: 0.5rem;
 }
@@ -4320,6 +4319,9 @@ html:lang(ar) .zen-side-panel-cell__title {
 .zen-toast__icon--success {
   fill: var(--accents-success--detail);
 }
+.zen-toast__icon--error {
+  fill: var(--accents-error--detail);
+}
 .zen-toast__header {
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -4346,6 +4348,10 @@ html:lang(ar) .zen-toast__header {
   color: var(--accents-success--detail);
   fill: var(--accents-success--detail);
 }
+.zen-toast__header--error {
+  color: var(--accents-error--detail);
+  fill: var(--accents-error--detail);
+}
 .zen-toast__close-button {
   display: flex;
   align-items: center;
@@ -4374,6 +4380,11 @@ html:lang(ar) .zen-toast__header {
   color: var(--accents-success--detail);
   outline-color: var(--accents-success--detail);
 }
+.zen-toast__close-button--error {
+  fill: var(--accents-error--detail);
+  color: var(--accents-error--detail);
+  outline-color: var(--accents-error--detail);
+}
 .zen-toast__action {
   max-width: 6.875rem;
   overflow: hidden;
@@ -4383,11 +4394,18 @@ html:lang(ar) .zen-toast__header {
   justify-self: end;
 }
 .zen-toast__progress {
-  border-radius: 4px 4px 0 0;
+  justify-self: start;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
   transition: width 0.3s linear;
 }
 .zen-toast__progress--active {
-  border-radius: 4px 0 0 0;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 .zen-toast__progress--info {
   background-color: var(--accents-general--detail);
@@ -4395,6 +4413,9 @@ html:lang(ar) .zen-toast__header {
 .zen-toast__progress--success {
   background-color: var(--accents-success--detail);
 }
+.zen-toast__progress--error {
+  background-color: var(--accents-error--detail);
+}
 .zen-alert {
   box-sizing: border-box;
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -5483,12 +5504,10 @@ html:lang(ar) .zen-checkbox__label-text {
 .zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
   fill: var(--text-reverse-primary);
   color: var(--text-button-disabled);
-  cursor: default;
 }
 .zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
   border-color: var(--borders-general);
   background-color: var(--backgrounds-field-disabled);
-  cursor: default;
 }
 .zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
 .zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
@@ -8203,11 +8222,6 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
   color: var(--text-hyperlink);
   fill: var(--text-hyperlink);
 }
-.zen-checkbox-list-with-action__label--action:disabled {
-  cursor: default;
-  color: var(--text-button-disabled);
-  fill: var(--text-button-disabled);
-}
 .zen-checkbox-list-with-action__label-text {
   display: flex;
   flex-grow: 1;
@@ -12826,37 +12840,37 @@ html:lang(ar) .zen-radio__wrapper--mobile .zen-radio__label {
 .zen-alerts {
   position: fixed;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   z-index: 11020;
   display: grid;
   gap: 16px;
   margin-top: 48px;
-  padding-right: 24px;
+  padding-inline-end: 24px;
 }
 .zen-alerts--mobile {
   width: 100%;
   gap: 8px;
   margin-top: 40px;
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-inline-end: 12px;
+  padding-inline-start: 12px;
   box-sizing: border-box;
 }
 .zen-toasts {
   position: fixed;
   bottom: 0;
-  right: 0;
+  inset-inline-end: 0;
   z-index: 11020;
   display: grid;
   gap: 16px;
   margin-bottom: 32px;
-  padding-right: 24px;
+  padding-inline-end: 24px;
 }
 .zen-toasts--mobile {
   width: 100%;
   gap: 8px;
   margin-bottom: 16px;
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-inline-end: 12px;
+  padding-inline-start: 12px;
   box-sizing: border-box;
 }
 @keyframes waiting {
@@ -13247,17 +13261,50 @@ html:lang(ar) .zen-file-upload__file-name {
   }
 }
 .zen-filters {
-  max-width: 40rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
   box-sizing: border-box;
 }
 .zen-filters * {
   box-sizing: border-box;
 }
+.zen-filters .zen-filters-search {
+  flex-grow: 0;
+  flex-shrink: 0;
+  margin: 0;
+  width: 11.25rem;
+}
+.zen-filters--mobile {
+  flex-wrap: nowrap;
+  overflow: auto hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.zen-filters--mobile::-webkit-scrollbar {
+  display: none;
+}
+.zen-filters--mobile .zen-filters__main-row--mobile {
+  flex-shrink: 0;
+}
+.zen-filters--mobile .zen-filters-container {
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-wrap: nowrap;
+  width: auto;
+  min-width: unset;
+}
+.zen-filters--mobile .zen-filters-container__mobile-scroll-wrapper {
+  overflow: visible;
+  width: auto;
+  flex-shrink: 0;
+}
 .zen-filters__main-row {
   display: flex;
   align-items: center;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
-  border-radius: var(--border-radius-default);
+  border-radius: 999px;
   border: var(--border-width-default) solid var(--borders-general);
   background-color: var(--backgrounds-main);
 }
@@ -13273,6 +13320,12 @@ html:lang(ar) .zen-file-upload__file-name {
 .zen-filters__main-row--initial {
   view-transition-name: expand-panel;
 }
+.zen-filters__main-row--mobile {
+  width: auto;
+}
+.zen-filters__main-row--mobile .zen-filters-search {
+  width: auto;
+}
 .zen-filters__select-trigger {
   width: auto;
   flex-shrink: 0;
@@ -13319,39 +13372,53 @@ html:lang(ar) .zen-file-upload__file-name {
 }
 .zen-filters__search .zen-search-input__input {
   border: none;
-  padding-inline: 0 0.0625rem;
-  border-end-start-radius: 0;
-  border-start-start-radius: 0;
+  border-radius: 999px;
+  display: flex;
+}
+.zen-filters__search-with-pills {
+  border-radius: 999px;
 }
-.zen-filters-popup.zen-filters-popup:not(.zen-filters-popup--mobile) {
+.zen-filters-popup.zen-filters-popup {
   box-sizing: border-box;
-  width: 40rem;
-  max-width: 40rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 28.125rem;
+  max-width: 100%;
   view-transition-name: expand-panel;
+  padding: 0;
 }
-.zen-filters-popup.zen-filters-popup:not(.zen-filters-popup--mobile) * {
+.zen-filters-popup.zen-filters-popup * {
   box-sizing: border-box;
 }
 .zen-filters-popup__first-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0;
+  border-block-end: var(--border-width-default) solid var(--borders-general);
 }
-.zen-filters-popup__first-row--mobile {
-  padding: 0.5rem 1rem;
+.zen-filters-popup__first-row .zen-filters-search {
+  flex-grow: 1;
+  margin: 0;
+  width: 100%;
 }
-.zen-filters-popup__second-row {
-  border-block-start: var(--border-width-default) solid var(--borders-general);
-  padding: 1rem 0;
+.zen-filters-popup__first-row .zen-search-input__close-button--visible {
+  visibility: visible;
 }
-.zen-filters-popup__second-row--mobile {
+.zen-filters-popup__second-row {
   border-block-start: none;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: hidden;
 }
 .zen-filters-popup__content {
   display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 .zen-filters-popup__content .zen-filters-popup__left-panel {
   display: flex;
@@ -13383,21 +13450,44 @@ html:lang(ar) .zen-file-upload__file-name {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.25rem;
-  margin-block-start: 0.5rem;
+  margin-block-start: 0;
   padding: 0.5rem 0;
 }
-.zen-filters-container__removal-chip .zen-chip__icon {
-  border: 1px solid var(--action-primary--active);
-  border-radius: 50%;
+.zen-filters-container .zen-chip--default {
+  background-color: var(--backgrounds-main);
+  color: var(--text-secondary);
+  fill: var(--text-secondary);
+}
+.zen-filters-container .zen-chip--default:hover {
+  background-color: var(--backgrounds-content-1);
+}
+.zen-filters-container .zen-chip--active {
+  background-color: var(--accents-general--main);
+  color: var(--action-primary--active);
+  fill: var(--action-primary--active);
+  border-color: var(--action-primary--active);
+}
+.zen-filters-container .zen-chip--active:hover {
+  border-color: var(--action-primary--active);
+}
+.zen-filters-container .zen-chip--accent {
+  background-color: var(--action-primary--active);
+  color: var(--accents-general--main);
+  fill: var(--accents-general--main);
+  border-color: var(--action-primary--active);
 }
-.zen-filters-container__removal-chip.zen-chip--accent .zen-chip__icon {
-  border: 1px solid var(--accents-general--main);
+.zen-filters-container__save-chip.zen-chip--active {
+  border-color: var(--borders-general);
 }
 .zen-filters-container.zen-filters-container--mobile {
   padding: 0;
 }
+.zen-filters-container.zen-filters-container--mobile .zen-chip {
+  height: 40px;
+  padding-block: 0.75rem;
+  padding-inline: 0.5rem;
+}
 .zen-filters-container__mobile-scroll-wrapper {
-  margin-inline-start: 0.5rem;
   padding: 0.125rem;
   display: flex;
   flex-direction: row;
@@ -13716,7 +13806,8 @@ html:lang(ar) .zen-file-upload__file-name {
   font-size: 0.75rem;
   border: none;
   outline: none;
-  padding-inline-end: 0.3125rem;
+  padding-block: 0;
+  padding-inline: 0 0.3125rem;
   -webkit-appearance: none;
   appearance: none;
   background-color: inherit;
@@ -14638,8 +14729,9 @@ html:lang(ar) .zen-list-item__secondary {
   justify-content: center;
 }
 .zen-filters-search-list {
-  max-height: 21.5625rem;
-  min-height: 21.25rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 .zen-filters-search-list--mobile {
   padding: 1rem 0;
@@ -14649,8 +14741,8 @@ html:lang(ar) .zen-list-item__secondary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-block: 0 0.5rem;
-  margin-inline: 0.5rem;
+  margin-block: 1rem;
+  margin-inline: 1rem;
 }
 .zen-filters-search-list__header-title {
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
@@ -15156,7 +15248,8 @@ html:lang(ar) .zen-page-header--mobile .zen-page-header__page-name {
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  padding: 0.0625rem;
+  padding-block-start: 0.0625rem;
+  padding-inline: 0.0625rem;
 }
 .zen-tabs__scrollable::-webkit-scrollbar {
   display: none;
@@ -16337,19 +16430,25 @@ html:lang(ar) .zen-filters-saved-popup__content.zen-filters-saved-popup__content
   flex-grow: 1;
   margin: 0 0.75rem;
 }
+.zen-filters-search__search-input {
+  flex: 1;
+  min-width: 0;
+}
 .zen-filters-search__selected {
   display: flex;
   gap: 0.5rem;
   flex-wrap: nowrap;
   align-items: center;
-  margin-inline-start: 0.5rem;
-  overflow: hidden;
+  margin-inline-end: 0.5rem;
+  flex-shrink: 0;
 }
 .zen-filters-search__selected-item {
   max-width: 11.3125rem;
 }
 .zen-filters-search__selected-item--more {
   flex-shrink: 0;
+  min-width: 1.375rem;
+  justify-content: center;
 }
 .zen-filters-search.zen-filters-popup__search-with-pills.zen-filters-search--mobile {
   margin: 0;
@@ -16360,6 +16459,30 @@ html:lang(ar) .zen-filters-saved-popup__content.zen-filters-saved-popup__content
 .zen-filters-search.zen-filters-popup__search-with-pills.zen-filters-search--mobile .zen-filters-search__selected {
   flex-shrink: 0;
 }
+.zen-filters-search--mobile {
+  margin: 0;
+}
+.zen-filters-search__mobile-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  color: inherit;
+  fill: currentcolor;
+  flex-shrink: 0;
+}
+.zen-filters-search__mobile-trigger:focus-visible {
+  outline: var(--border-width-default) solid var(--borders-form-field--active);
+  border-radius: 999px;
+}
+.zen-filters-search__mobile-trigger-icon {
+  flex-shrink: 0;
+}
 .zen-side-panel-filters {
   box-sizing: border-box;
   border-radius: var(--border-radius-default);
@@ -16555,7 +16678,8 @@ html:lang(ar) .zen-side-panel-filters__item-label--mobile {
   }
 }
 .zen-filters-select-compact {
-  padding: 0.25rem 1rem;
+  padding-block: 1rem 0.25rem;
+  padding-inline: 1rem;
   width: 100%;
   overflow-x: auto;
   -ms-overflow-style: none;

package/esm/chart/plugins/linePlugin/getInterpolatedValue.js

@@ -37,6 +37,15 @@ export function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
     if (x1 === x2) {
         return y1;
     }
+    // Sub-pixel tolerance: element.x (from Chart.js) and xScale.getPixelForValue()
+    // can disagree by a fraction of a pixel, causing the cursor to land just past a
+    // data point and interpolate with the next segment instead of returning the exact value.
+    if (Math.abs(x - x1) < 0.5) {
+        return y1;
+    }
+    if (Math.abs(x - x2) < 0.5) {
+        return y2;
+    }
     const interpolatedY = y1 + ((y2 - y1) * (x - x1)) / (x2 - x1);
     return interpolatedY;
 }

package/esm/chart/plugins/linePlugin/linePlugin.js

@@ -52,32 +52,9 @@ export const LinePlugin = (containerId, options, isDark) => ({
             const y = chart.verticalLine.y;
             const topY = chart.chartArea.top;
             const bottomY = chart.chartArea.bottom;
+            drawLine(ctx, x, topY, bottomY);
             const datasets = chart.data.datasets;
             let lowestValueY = Infinity;
-            const xScale = chart.scales.x;
-            let snappedX = x;
-            let closestDist = Infinity;
-            datasets.forEach((dataset, dsIndex) => {
-                if (!chart.isDatasetVisible(dsIndex)) {
-                    return;
-                }
-                if (chart.getDatasetMeta(dsIndex).type !== "line") {
-                    return;
-                }
-                const dataPoints = dataset.data;
-                for (const point of dataPoints) {
-                    if (point.y === null) {
-                        continue;
-                    }
-                    const px = xScale.getPixelForValue(point.x);
-                    const dist = Math.abs(px - x);
-                    if (dist < closestDist) {
-                        closestDist = dist;
-                        snappedX = px;
-                    }
-                }
-            });
-            drawLine(ctx, snappedX, topY, bottomY);
             const items = datasets
                 .map((dataset, dsIndex) => {
                 if (!chart.isDatasetVisible(dsIndex)) {
@@ -86,7 +63,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
                 if (chart.getDatasetMeta(dsIndex).type !== "line") {
                     return undefined;
                 }
-                const value = getInterpolatedValue(xScale, chart.data, dsIndex, snappedX);
+                const xScale = chart.scales.x;
+                const value = getInterpolatedValue(xScale, chart.data, dsIndex, x);
                 const yAxisID = dataset.yAxisID || "y";
                 const yScale = chart.scales[yAxisID];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -114,8 +92,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
                 return;
             }
             const chartRect = chart.canvas.getBoundingClientRect();
-            const top = chartRect.top + (lowestValueY !== Infinity ? lowestValueY : y);
-            const left = chartRect.left + snappedX;
+            const top = chartRect.top + (lowestValueY || y);
+            const left = chartRect.left + x;
             if (zen.document === undefined) {
                 return;
             }
@@ -132,8 +110,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
                 xLabel = scaleLabels[elementIdx];
             }
             else {
-                const xValue = chart.scales.x.getValueForPixel(snappedX);
-                xLabel = xValue !== undefined ? chart.scales.x.getLabelForValue(xValue) : undefined;
+                const xValue = chart.scales.x.getValueForPixel(x);
+                xLabel = xValue ? chart.scales.x.getLabelForValue(xValue) : undefined;
             }
             renderTooltip(containerId, left + scrollLeft, top + scrollTop, "top", items, options === null || options === void 0 ? void 0 : options.title, options && options.subtitle !== undefined ? options.subtitle : xLabel, (options === null || options === void 0 ? void 0 : options.note) || undefined, isDark);
         }

package/esm/dropdown/dropdown.js

@@ -20,4 +20,4 @@ export const Dropdown = (_a) => {
     var props = __rest(_a, []);
     return _jsx(DropDownFormField, Object.assign({}, props));
 };
-export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
+export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];

package/esm/dropdownRaw/dropdownList.d.ts

@@ -13,8 +13,7 @@ export interface IDropdownList extends IZenComponentProps {
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
     backButtonName?: string;
-    isSelectAllActive?: boolean;
-    shouldBlockItems?: boolean;
+    isAllSelected: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -40,6 +39,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, shouldBlockItems, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};