@geotab/zenith 3.14.1 → 3.15.0-beta.1

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

@@ -344,5 +344,16 @@
     "Customize view": "Customize view",
     "Select menu": "Select menu",
     "Increase value": "Increase value",
-    "Decrease value": "Decrease value"
+    "Decrease value": "Decrease value",
+    "Loading more rows": "Loading more rows",
+    "1 more row loaded": "1 more row loaded",
+    "{count} more rows loaded": "{count} more rows loaded",
+    "Line chart": "Line chart",
+    "Bar chart": "Bar chart",
+    "Pie chart": "Pie chart",
+    "Summary: {COUNT} slices.": "Summary: {COUNT} slices.",
+    "Largest:": "Largest:",
+    "Smallest:": "Smallest:",
+    "Rest: {COUNT} other slices account for {PCT}%.": "Rest: {COUNT} other slices account for {PCT}%.",
+    "Details, {COUNT} items:": "Details, {COUNT} items:"
 }

package/esm/utils/theme/themeContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare enum Theme {
     Default = 0,
     Drive = 1

package/esm/utils/topWindow/topWindowContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { zen } from "../zen";
 interface ITopWindow {
     topWindow: Window | typeof zen | undefined;

package/esm/utils/useFadeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useFadeComponent: (initialState: boolean, onTransitionEnd?: (currentIsOpen: boolean) => void) => {
     renderComponent: boolean;
     showContent: boolean;

package/esm/utils/userFormat/userFormatContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface IUserFormat {
     dateFormat: string;
     timeFormat: string;

package/esm/waiting/waiting.d.ts

@@ -5,5 +5,6 @@ export interface IWaiting extends IZenComponentProps {
     delay?: number;
     hideOverlay?: boolean;
     description?: string;
+    label?: string;
 }
-export declare const Waiting: ({ isLoading, delay, hideOverlay, className, description }: IWaiting) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Waiting: ({ isLoading, delay, hideOverlay, className, description, label }: IWaiting) => import("react/jsx-runtime").JSX.Element | null;

package/esm/waiting/waiting.js

@@ -1,24 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { zen } from "../utils/zen";
-export const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description }) => {
+export const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description, label }) => {
     const [visible, setVisible] = useState(false);
+    const [statusText, setStatusText] = useState("");
     const spinnerDriveClassName = useDriveClassName("zen-waiting__spinner");
+    const showWaiting = isLoading && (delay <= 0 || visible);
     useEffect(() => {
         var _a;
         let timer;
-        if (isLoading) {
-            timer = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => setVisible(true), delay);
+        if (!isLoading) {
+            setVisible(false);
+        }
+        else if (delay <= 0) {
+            setVisible(true);
         }
         else {
-            setVisible(false);
+            timer = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => setVisible(true), delay);
+        }
+        return () => {
+            var _a;
+            timer && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timer));
+        };
+    }, [isLoading, delay]);
+    useEffect(() => {
+        var _a;
+        let timer;
+        setStatusText("");
+        if (isLoading && showWaiting) {
+            timer = (_a = zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, () => setStatusText(description || label || ""), 0);
         }
         return () => {
             var _a;
             timer && ((_a = zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen, timer));
         };
-    }, [isLoading, setVisible, delay]);
-    return visible ? (_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;
+    }, [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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.14.1",
+    "version": "3.15.0-beta.1",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -13,6 +13,8 @@
     ],
     "scripts": {
         "add-icon": "node addIcon.js",
+        "figma:publish": "figma connect publish",
+        "figma:publish-dry": "figma connect publish --dry-run",
         "build": "npm run clean && npm run build-index && npm run update-version && npm run build-ts && npm run build-less && npm run build-copy && npm run build-clean && npm run translations",
         "build-ai-mdx": "node collectmdx.js",
         "build-cjs": "npx tsc -b tsconfig.cjs.json",
@@ -38,6 +40,9 @@
         "test-build": "npx tsc -b tsconfig.jestTests.json && npm run build-less && npm run inject-translations && jest --clearCache",
         "test-coverage": "npm run clean && npm run test-build && jest --collectCoverage=true --coverage --collectCoverageFrom='./dist/**/*.js' --collectCoverageFrom='!./dist/**/*.test.js' --json --outputFile=jest-result.json --coverageReporters=html --coverageReporters=text-summary --coverageReporters=cobertura --maxWorkers=4 --noStackTrace && node testHelpers/cobertura/cobertura.js",
         "test-storybook": "test-storybook",
+        "vrt-test": "playwright test --config visual-regression/playwright.config.ts --update-snapshots=missing",
+        "vrt-update": "playwright test --config visual-regression/playwright.config.ts --update-snapshots",
+        "vrt-report": "playwright show-report visual-regression-report",
         "test-watch": "npm run clean && npm run test-build && npx tsc -b tsconfig.jestTests.json -w",
         "check-duplicates": "node build-utils/check-duplicates.mjs",
         "translations": "node build-utils/translations/translation-integrity.mjs",
@@ -56,6 +61,8 @@
         "@babel/preset-typescript": "^7.24.1",
         "@babel/traverse": "^7.28.5",
         "@eslint/js": "^9.18.0",
+        "@figma/code-connect": "^1.4.3",
+        "@playwright/test": "^1.60.0",
         "@storybook/addon-a11y": "^10.4.6",
         "@storybook/addon-docs": "^10.4.6",
         "@storybook/addon-links": "^10.4.6",
@@ -64,11 +71,11 @@
         "@storybook/test-runner": "^0.24.4",
         "@tanstack/react-query": "^5.85.5",
         "@testing-library/react": "^16.3.0",
-        "@types/jest": "^29.5.12",
+        "@types/jest": "~30.0.0",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
-        "@typescript-eslint/eslint-plugin": "^8.20.0",
-        "@typescript-eslint/parser": "^8.20.0",
+        "@typescript-eslint/eslint-plugin": "^8.59.1",
+        "@typescript-eslint/parser": "^8.59.1",
         "axe-core": "^4.10.2",
         "css-loader": "^7.1.2",
         "eslint": "^9.18.0",
@@ -86,8 +93,8 @@
         "prettier": "^3.8.1",
         "storybook": "^10.4.6",
         "style-loader": "^4.0.0",
-        "typescript": "^5.4.3",
-        "typescript-eslint": "^8.20.0",
+        "typescript": "~6.0.3",
+        "typescript-eslint": "^8.59.1",
         "webpack": "^5.96.1",
         "xml2js": "^0.6.0"
     },

package/esm/gridLayout/hooks/useTablet.js

@@ -1,20 +0,0 @@
-import { useContext, useMemo, useState } from "react";
-import { topWindowContext } from "../../utils/topWindow/topWindowContext";
-import { getParentWindow } from "../../utils/getParentWindow";
-import { useResize } from "../../commonHelpers/hooks/useResize";
-import { zen } from "../../utils/zen";
-const isTableUtil = (width) => {
-    if (width > 640 && width <= 1024) {
-        return true;
-    }
-    return false;
-};
-export const useTablet = () => {
-    const { topWindow } = useContext(topWindowContext);
-    const win = useMemo(() => topWindow || getParentWindow(zen), [topWindow]);
-    const [isTablet, setIsTablet] = useState(isTableUtil(win.innerWidth));
-    useResize(() => {
-        setIsTablet(isTableUtil(win.innerWidth));
-    }, true);
-    return isTablet;
-};