@geotab/zenith 3.16.0 → 3.17.0-beta.0

package/esm/utils/localization/translations/pt-PT.json

@@ -127,6 +127,7 @@
     "GroupManuallyClassifiedPowertrainId": "Grupo motopropulsor classificado manualmente",
     "GroupFuelCellElectricVehicleId": "Veículo elétrico com célula de combustível",
     "and {0} more": "e {0} mais",
+    "+{0} more": "+{0} mais",
     "Clear selection": "Limpar seleção",
     "Select current page": "Selecionar página atual",
     "OperatorOr": "Operador Ou",

package/esm/utils/localization/translations/ro-RO.json

@@ -127,6 +127,7 @@
     "GroupManuallyClassifiedPowertrainId": "Tren motopropulsor clasificat manual",
     "GroupFuelCellElectricVehicleId": "Vehicul electric cu celulă de combustie",
     "and {0} more": "și {0} în plus",
+    "+{0} more": "Încă {0}",
     "Clear selection": "Ștergeți selecția",
     "Select current page": "Selectați pagina actuală",
     "OperatorOr": "OperatorOr",

package/esm/utils/localization/translations/sk-SK.json

@@ -125,6 +125,7 @@
     "GroupManuallyClassifiedPowertrainId": "Ručne klasifikovaný hnací systém",
     "GroupFuelCellElectricVehicleId": "Elektrické vozidlo s palivovými článkami",
     "and {0} more": "a {0} ďalších",
+    "+{0} more": "+{0} viac",
     "Clear selection": "Vymaž výber.",
     "Select current page": "Vyber aktuálnu stránku.",
     "OperatorOr": "ALEBO",

package/esm/utils/localization/translations/sv.json

@@ -115,6 +115,7 @@
     "GroupFuelCellElectricVehicleId": "Elfordon med bränsleceller",
     "{1} selected": "{1} vald",
     "and {0} more": "och {0} till",
+    "+{0} more": "+{0} mer",
     "Clear selection": "Rensa val",
     "Select current page": "Välj nuvarande sida",
     "OperatorOr": "ELLER",

package/esm/utils/localization/translations/th.json

@@ -115,6 +115,7 @@
     "GroupFuelCellElectricVehicleId": "รถพลังงานไฟฟ้าเซลล์เชื้อเพลิง",
     "{1} selected": "เลือกแล้ว {1}",
     "and {0} more": "และอีก {0}",
+    "+{0} more": "+{0} รายการเพิ่มเติม",
     "Clear selection": "ล้างการเลือก",
     "Select current page": "เลือกหน้าปัจจุบัน",
     "OperatorOr": "หรือ",

package/esm/utils/localization/translations/tr.json

@@ -115,6 +115,7 @@
     "GroupManuallyClassifiedPowertrainId": "Manuel Sınıflandırılmış Güç Aktarma Sistemi",
     "{1} selected": "{1} seçildi",
     "and {0} more": "ve {0} tane daha",
+    "+{0} more": "+{0} daha",
     "Clear selection": "Seçimi temizle",
     "Select current page": "Geçerli sayfayı seç",
     "OperatorOr": "VEYA",

package/esm/utils/localization/translations/zh-Hans.json

@@ -115,6 +115,7 @@
     "GroupFuelCellElectricVehicleId": "燃料电池电动车",
     "{1} selected": "已选中 {1} 项",
     "and {0} more": "和另外 {0} 项",
+    "+{0} more": "+{0}更多",
     "Clear selection": "清除选择",
     "Select current page": "选择当前页面",
     "OperatorOr": "或",

package/esm/utils/localization/translations/zh-TW.json

@@ -125,6 +125,7 @@
     "GroupManuallyClassifiedPowertrainId": "人工分類動力裝置",
     "GroupFuelCellElectricVehicleId": "燃料電池電動車",
     "and {0} more": "還有 {0} 個",
+    "+{0} more": "還有 +{0} 個",
     "Clear selection": "清除選取項目",
     "Select current page": "選取目前頁面",
     "OperatorOr": "OperatorOr",

package/esm/waiting/waiting.js

@@ -1,13 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { useResizeObserver } from "../commonHelpers/hooks/useResizeObserver";
 import { zen } from "../utils/zen";
 export const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description, label }) => {
     const [visible, setVisible] = useState(false);
     const [statusText, setStatusText] = useState("");
+    const [coverageHeight, setCoverageHeight] = useState(undefined);
+    const waitingRef = useRef(null);
+    const statusRef = useRef(null);
+    const mutationFrameRef = useRef(undefined);
     const spinnerDriveClassName = useDriveClassName("zen-waiting__spinner");
     const showWaiting = isLoading && (delay <= 0 || visible);
+    // The full-area coverage/re-measure machinery only makes sense for the default overlay variant,
+    // which is meant to span its parent. The `--inline` variant is a fixed 40x24px spinner — stretching
+    // its coverage layer to the parent's scrollHeight would incorrectly block clicks below the spinner
+    // and grow the parent's own scrollHeight on every re-measure (a feedback loop).
+    const isInline = className.split(/\s+/).includes("zen-waiting--inline");
+    const canMeasureCoverage = showWaiting && !isInline;
+    const measureCoverage = useCallback(() => {
+        var _a;
+        const parent = (_a = waitingRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent || isInline) {
+            setCoverageHeight(undefined);
+            return;
+        }
+        // The coverage layer defaults to 100% of this element's own box (see .zen-waiting__coverage),
+        // which only spans the parent's visible (clientHeight) box. When the parent's real content is
+        // taller (e.g. a scrollable page), stretch it to the full scrollHeight instead so it keeps
+        // covering content the user can scroll to while loading. The DOM guarantees
+        // scrollHeight >= clientHeight, so no Math.max is needed here.
+        setCoverageHeight(parent.scrollHeight > parent.clientHeight ? parent.scrollHeight : undefined);
+    }, [isInline]);
+    // The target is only non-null once the overlay is actually mounted (`waitingRef.current` is null
+    // until `showWaiting` flips true). Gating it on `showWaiting` (and skipping it for the `--inline`
+    // variant) — rather than passing a permanently stable getter — ensures the identity change (null ->
+    // getter) re-triggers useResizeObserver's setup effect once the ref is attached; a permanently
+    // stable getter would only ever run that effect once, against a still-null ref, and never attach
+    // when the overlay later appears (e.g. with the default delay).
+    const getResizeTarget = useCallback(() => { var _a, _b; return (_b = (_a = waitingRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null; }, []);
+    // Re-measures when the containing element's own box resizes (e.g. viewport resize, layout reflow
+    // changing the parent's height).
+    const { result: containerResize } = useResizeObserver({ target: canMeasureCoverage ? getResizeTarget : null });
     useEffect(() => {
         var _a;
         let timer;
@@ -37,5 +72,64 @@ export const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, c
             timer && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timer));
         };
     }, [isLoading, showWaiting, description, label]);
-    return isLoading ? (_jsxs(_Fragment, { children: [_jsx("div", { role: "status", className: "zen-waiting__status", children: statusText ? _jsx("span", { className: "zen-visually-hidden", children: statusText }) : null }), showWaiting ? (_jsxs("div", { className: classNames(["zen-waiting", className]), children: [_jsx("div", { className: classNames(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), _jsxs("div", { className: "zen-waiting__spinner-container", children: [_jsx("div", { className: classNames(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: _jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [_jsx("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), _jsx("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), _jsx("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), _jsx("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), _jsx("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && _jsx("div", { className: classNames(["zen-waiting__spinner-text"]), children: description })] })] })) : null] })) : null;
+    useLayoutEffect(() => {
+        if (!canMeasureCoverage) {
+            setCoverageHeight(undefined);
+            return;
+        }
+        measureCoverage();
+    }, [canMeasureCoverage, containerResize, measureCoverage]);
+    // A fixed-height scrollable parent can gain content without its own box ever resizing — that's
+    // the exact shape of the original bug, and ResizeObserver alone won't catch it. Watch for DOM
+    // mutations on the parent instead and re-measure, coalescing bursts of mutations (e.g. many rows
+    // streaming in) into a single measurement per animation frame.
+    useEffect(() => {
+        var _a;
+        const parent = (_a = waitingRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const MutationObserverCtor = zen.MutationObserver;
+        if (!canMeasureCoverage || !parent || !MutationObserverCtor) {
+            return undefined;
+        }
+        const scheduleMeasure = () => {
+            var _a, _b;
+            mutationFrameRef.current && ((_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, mutationFrameRef.current));
+            mutationFrameRef.current = (_b = zen.requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(zen, measureCoverage);
+        };
+        const observer = new MutationObserverCtor(scheduleMeasure);
+        observer.observe(parent, { childList: true, subtree: true, characterData: true });
+        return () => {
+            var _a;
+            mutationFrameRef.current && ((_a = zen.cancelAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(zen, mutationFrameRef.current));
+            observer.disconnect();
+        };
+    }, [canMeasureCoverage, measureCoverage]);
+    // Content behind the overlay is only unclickable for mouse/pointer users (the coverage layer's
+    // pointer-events block that). Keyboard users could still Tab into it, so make every other direct
+    // child of the parent `inert` while loading — removing it from the tab order and from hit-testing
+    // — and restore only the children we changed once loading stops. Skipped for the `--inline`
+    // variant, which doesn't cover/block its surroundings.
+    useEffect(() => {
+        var _a;
+        const parent = (_a = waitingRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!canMeasureCoverage || !parent) {
+            return undefined;
+        }
+        const ownElements = new Set([waitingRef.current, statusRef.current]);
+        const inertedSiblings = [];
+        // `setAttribute`/`hasAttribute` (rather than the `.inert` IDL property) so this correctly
+        // detects and restores elements marked inert via the HTML attribute or a JSX `inert` prop too
+        // — not just ones previously set via the property.
+        Array.from(parent.children).forEach(child => {
+            if (child instanceof HTMLElement && !ownElements.has(child) && !child.hasAttribute("inert")) {
+                child.setAttribute("inert", "");
+                inertedSiblings.push(child);
+            }
+        });
+        return () => {
+            inertedSiblings.forEach(child => {
+                child.removeAttribute("inert");
+            });
+        };
+    }, [canMeasureCoverage]);
+    return isLoading ? (_jsxs(_Fragment, { children: [_jsx("div", { ref: statusRef, role: "status", className: "zen-waiting__status", children: statusText ? _jsx("span", { className: "zen-visually-hidden", children: statusText }) : null }), showWaiting ? (_jsx("div", { ref: waitingRef, className: classNames(["zen-waiting", className]), children: _jsxs("div", { className: "zen-waiting__coverage", style: coverageHeight ? { height: `${coverageHeight}px` } : undefined, children: [_jsx("div", { className: classNames(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), _jsxs("div", { className: "zen-waiting__spinner-container", children: [_jsx("div", { className: classNames(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: _jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [_jsx("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), _jsx("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), _jsx("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), _jsx("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), _jsx("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), _jsx("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && _jsx("div", { className: classNames(["zen-waiting__spinner-text"]), children: description })] })] }) })) : null] })) : null;
 };

package/package.json

@@ -1,6 +1,9 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.16.0",
+    "version": "3.17.0-beta.0",
+    "publishConfig": {
+        "access": "public"
+    },
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -46,8 +49,16 @@
         "check-duplicates": "node build-utils/check-duplicates.mjs",
         "translations": "node build-utils/translations/translation-integrity.mjs",
         "update-version": "node updateVersion.js",
+        "update-public-api-snapshot": "node build-utils/public-api-snapshot.js --update",
+        "update-readme-snapshot": "node build-utils/readme-snapshot.js --update",
+        "update-zenith-tag-latest": "bash update-zenith-tag-latest.sh",
         "watch": "npx tsc -b tsconfig.cjs.json -w",
-        "watch:inject-translations": "npx nodemon --watch dist --delay 500ms --ext js --exec 'npm run inject-translations'"
+        "watch:inject-translations": "npx nodemon --watch dist --delay 500ms --ext js --exec 'npm run inject-translations'",
+        "build-mcp": "tsc -p mcp/tsconfig.json",
+        "build-mcp-full": "npm run build-index && MCP_REQUIRE_STORYBOOK=1 npm run build-manifest && npm run validate-manifest && npm run build-mcp",
+        "build-mcp-tests": "tsc -p mcp/tsconfig.test.json",
+        "build-manifest": "node mcp/build/generate-manifest.cjs",
+        "validate-manifest": "node mcp/build/validate-manifest.cjs"
     },
     "author": "",
     "license": "SEE LICENSE IN LICENSE.txt",
@@ -114,7 +125,11 @@
     },
     "files": [
         "./dist/",
-        "./esm"
+        "./esm",
+        "!**/*.test.js",
+        "!**/*.test.js.map",
+        "!**/*.test.d.ts",
+        "!**/*.tsbuildinfo"
     ],
     "browserslist": [
         "chrome >= 133",
@@ -144,8 +159,5 @@
         "minimatch@<9": {
             "brace-expansion": "^1.1.18"
         }
-    },
-    "publishConfig": {
-        "access": "public"
     }
 }