@geotab/zenith 3.9.0-beta.no.ssr.0 → 3.9.0-beta.ssr.1

package/README.md

@@ -69,6 +69,7 @@ Zenith library provides components defined in Zenith Design System. It includes
 - Updated translations
 - Add multiline table header support (word wrap for long strings)
 - `SidePanel` outside click improvements
+- Add Horizontal Layout for pie `Chart` component
 
 ### 3.7.0
 

package/dist/card/card.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "./components/title";
+import { TIconType } from "../title/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";

package/dist/card/card.js

@@ -71,7 +71,7 @@ const cardContainer_1 = require("../cardContainer/cardContainer");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
 const status_1 = require("./components/status");
-const title_1 = require("./components/title");
+const title_1 = require("../title/title");
 const actions_1 = require("./components/actions");
 const content_1 = require("./components/content");
 const useCardSize_1 = require("./hooks/useCardSize");

package/dist/card/helpers/getIconTypeFromStatus.d.ts

@@ -1,3 +1,3 @@
 import { TCardStatus } from "../components/status";
-import { TIconType } from "../components/title";
+import { TIconType } from "../../title/title";
 export declare const getIconTypeFromStatus: (status: TCardStatus) => TIconType | undefined;

package/dist/chart/pieChart/centerTextPlugin.js

@@ -6,6 +6,7 @@ const getCssVar = (el, name) => { var _a, _b; return (_b = (_a = zen_1.zen.getCo
 const centerTextPlugin = (centerText) => ({
     id: "zenithPieCenterText",
     afterDraw(chart) {
+        var _a;
         if (!centerText || centerText.value === undefined) {
             return;
         }
@@ -14,7 +15,7 @@ const centerTextPlugin = (centerText) => ({
         const centerX = left + width / 2;
         const centerY = top + height / 2;
         const css = (name) => getCssVar(chart.canvas, name);
-        const fontFamily = css("--main-font");
+        const fontFamily = ((_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, chart.canvas).fontFamily) || "Roboto";
         const hasLabel = !!centerText.label;
         const valueY = hasLabel ? centerY - 14 : centerY;
         ctx.textAlign = "center";

package/dist/chart/pieChart.js

@@ -18,7 +18,6 @@ const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
 const utils_1 = require("../commonHelpers/utils");
-const zen_1 = require("../utils/zen");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
@@ -44,18 +43,12 @@ const PieChart = (_a) => {
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     const legendId = (0, react_1.useId)();
     const tooltipId = (0, react_1.useId)();
-    const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const el = containerRef.current;
-        const styles = el ? (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el) : undefined;
-        const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
-        const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
         auto_1.Chart.defaults.font = {
-            family: fontFamily,
+            family: "Roboto",
             size: fontSize
         };
-        auto_1.Chart.defaults.color = color;
+        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
@@ -89,6 +82,6 @@ const PieChart = (_a) => {
     const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const legendRight = isHorizontal;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
 };
 exports.PieChart = PieChart;

package/dist/commonHelpers/generateId.d.ts

@@ -1 +1,9 @@
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 export declare function generateId(): string;

package/dist/commonHelpers/generateId.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateId = void 0;
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 function generateId() {
     return "id" + Math.random().toString().substring(2) + Math.random().toString().substring(2);
 }

package/dist/commonHelpers/hooks/ssrProvider.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react";
+import { DeviceType } from "./deviceType";
+interface ISSRContext {
+    isClientReady: boolean;
+    deviceType?: DeviceType;
+}
+export declare const SSRContext: import("react").Context<ISSRContext | null>;
+export declare const SSRProvider: ({ deviceType, isClientReady, children }: PropsWithChildren<{
+    deviceType?: DeviceType;
+    isClientReady?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const useSSRContext: () => ISSRContext | null;
+export declare const useIsSSRProviderMounted: () => boolean;
+export {};

package/dist/commonHelpers/hooks/ssrProvider.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSSRProviderMounted = exports.useSSRContext = exports.SSRProvider = exports.SSRContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SSRContext = (0, react_1.createContext)(null);
+const SSRProvider = ({ deviceType, isClientReady = false, children }) => ((0, jsx_runtime_1.jsx)(exports.SSRContext.Provider, { value: { isClientReady, deviceType }, children: children }));
+exports.SSRProvider = SSRProvider;
+const useSSRContext = () => (0, react_1.useContext)(exports.SSRContext);
+exports.useSSRContext = useSSRContext;
+const useIsSSRProviderMounted = () => (0, react_1.useContext)(exports.SSRContext) !== null;
+exports.useIsSSRProviderMounted = useIsSSRProviderMounted;

package/dist/commonHelpers/hooks/useClientReady.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClientReady = void 0;
 const react_1 = require("react");
 const isDomEnv_1 = require("../isDomEnv");
+const ssrProvider_1 = require("./ssrProvider");
 const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = (0, react_1.useState)(true);
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const [isClientReady, setIsClientReady] = (0, react_1.useState)(ctx !== null ? ctx.isClientReady : true);
     (0, react_1.useEffect)(() => {
         if ((0, isDomEnv_1.isDomEnv)()) {
             setIsClientReady(true);

package/dist/commonHelpers/hooks/useDeviceType.js

@@ -7,6 +7,7 @@ const deviceType_1 = require("./deviceType");
 const topWindowContext_1 = require("../../utils/topWindow/topWindowContext");
 const getParentWindow_1 = require("../../utils/getParentWindow");
 const zen_1 = require("../../utils/zen");
+const ssrProvider_1 = require("./ssrProvider");
 const MobileMaxWidth = 640;
 const getDeviceType = (width) => {
     if (width > MobileMaxWidth) {
@@ -16,9 +17,11 @@ const getDeviceType = (width) => {
 };
 exports.getDeviceType = getDeviceType;
 const useDeviceType = (callback) => {
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const ssrDeviceType = ctx === null || ctx === void 0 ? void 0 : ctx.deviceType;
     const { topWindow } = (0, react_1.useContext)(topWindowContext_1.topWindowContext);
     const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(zen_1.zen), [topWindow]);
-    const [deviceType, setDeviceType] = (0, react_1.useState)((0, exports.getDeviceType)(win.innerWidth));
+    const [deviceType, setDeviceType] = (0, react_1.useState)(ssrDeviceType !== null && ssrDeviceType !== void 0 ? ssrDeviceType : (0, exports.getDeviceType)(win.innerWidth));
     (0, useResize_1.useResize)(() => {
         setDeviceType((0, exports.getDeviceType)(win.innerWidth));
     }, true);

package/dist/commonHelpers/hooks/useMobile.js

@@ -5,13 +5,14 @@ const react_1 = require("react");
 const deviceType_1 = require("./deviceType");
 const useDeviceType_1 = require("./useDeviceType");
 const getParentWindow_1 = require("../../utils/getParentWindow");
-const deviceProvider_1 = require("./deviceProvider");
+const ssrProvider_1 = require("./ssrProvider");
 const zen_1 = require("../../utils/zen");
 const initialParent = (0, getParentWindow_1.getParentWindow)(zen_1.zen);
 exports.initialValue = (0, useDeviceType_1.getDeviceType)(initialParent.innerWidth);
 const useMobile = () => {
-    const deviceTypeFromProvider = (0, react_1.useContext)(deviceProvider_1.DeviceContext);
-    const [deviceType, setDeviceType] = (0, react_1.useState)(deviceTypeFromProvider || exports.initialValue);
+    var _a;
+    const ctx = (0, react_1.useContext)(ssrProvider_1.SSRContext);
+    const [deviceType, setDeviceType] = (0, react_1.useState)((_a = ctx === null || ctx === void 0 ? void 0 : ctx.deviceType) !== null && _a !== void 0 ? _a : exports.initialValue);
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
     const isMobile = (0, react_1.useMemo)(() => deviceType === deviceType_1.DeviceType.Mobile, [deviceType]);
     return isMobile;

package/dist/commonHelpers/hooks/usePortal.js

@@ -4,13 +4,10 @@ exports.usePortal = void 0;
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const usePortal = (children, container, key) => {
-    const [portalContainer, setPortalContainer] = (0, react_1.useState)(container);
+    const [portalContainer, setPortalContainer] = (0, react_1.useState)(undefined);
     (0, react_1.useEffect)(() => {
-        if (portalContainer || !container) {
-            return;
-        }
         setPortalContainer(container);
-    }, [portalContainer, container]);
+    }, [container]);
     return portalContainer ? (0, react_dom_1.createPortal)(children, portalContainer, key) : null;
 };
 exports.usePortal = usePortal;

package/dist/commonHelpers/useUniqueId.d.ts

@@ -6,6 +6,12 @@
  * component. This can be particularly useful for assigning unique keys to elements
  * in a list, or for generating unique identifiers for form inputs, labels, etc.
  *
+ * @remarks
+ * **Prefer `React.useId()`** when possible. `useId` generates IDs that are stable
+ * across server and client renders, preventing SSR hydration mismatches.
+ * Use `useUniqueId` only when `useId` is not suitable — for example, when the ID
+ * must be truly random and is never rendered during SSR.
+ *
  * @returns {string} A unique identifier.
  *
  * Example usage:

package/dist/commonHelpers/useUniqueId.js

@@ -11,6 +11,12 @@ const utils_1 = require("./utils");
  * component. This can be particularly useful for assigning unique keys to elements
  * in a list, or for generating unique identifiers for form inputs, labels, etc.
  *
+ * @remarks
+ * **Prefer `React.useId()`** when possible. `useId` generates IDs that are stable
+ * across server and client renders, preventing SSR hydration mismatches.
+ * Use `useUniqueId` only when `useId` is not suitable — for example, when the ID
+ * must be truly random and is never rendered during SSR.
+ *
  * @returns {string} A unique identifier.
  *
  * Example usage:

package/dist/commonHelpers/utils.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 export declare const generateId: () => string;
 export declare const echo: <T = unknown>(_: T) => T;
 export declare function flattenArrays<T>(arrayOfArrays: T[][]): T[];

package/dist/commonHelpers/utils.js

@@ -2,6 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deepClone = exports.deepMerge = exports.flattenArrays = exports.echo = exports.generateId = void 0;
 const zen_1 = require("../utils/zen");
+/**
+ * Generates a random unique ID string.
+ *
+ * @remarks
+ * **Prefer `React.useId()`** inside React components. `useId` produces IDs that are
+ * stable across server and client renders, preventing SSR hydration mismatches.
+ * Use `generateId` only outside of a React component context where `useId` is not available.
+ */
 const generateId = () => "id" + Math.random().toString().substring(2);
 exports.generateId = generateId;
 const echo = (_) => _;

package/dist/commonStyles/common.less

@@ -1,7 +1,14 @@
+// do not update the order of imports, as some of the files depend on variables defined in other files
+// only variables that are used in multiple files should be defined here, and they should not depend on any other variables
 @import "fonts/roboto.less";
 @import "fonts/robotomono.less";
-@import "colors/colors.less";
+@main-font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+@driver-font-family: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+@rem: 16rem;
+
 @import "typography/typography.less";
+
+@import "colors/colors.less";
 @import "caption/caption.less";
 @import "ellipsis.less";
 @import "notSelectable.less";
@@ -13,6 +20,9 @@
 @import "zIndex.less";
 @import "rangeFieldMixin.less";
 
+// do not set variables or styles here,
+// as this file is imported in all other files and it may cause circular dependencies
+
 @border-width-default: 1px;
 @border-radius-default: 4px;
 @padding-top-bottom: 8px;

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,5 +1,4 @@
 @import "../common.less";
-@import "../typography/typography.less";
 
 @pill-min-width-default: 30px;
 @pill-max-width-default: 200px;
@@ -98,9 +97,9 @@
         }
     }
     &.zen-pill-new-content--drive {
-        .body-04-mobile-drive();
+        .body-04-drive();
     }
     &.zen-pill-new-content--drive-tablet {
-        .body-04-tablet-drive();
+        .body-04-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -1,5 +1,4 @@
-@import "../typography/typography.less";
-@import "../colors/colors.less";
+@import "../common.less";
 
 .zen-pill-content {
     .body-04();

package/dist/commonStyles/pillStyles/pillTextContent.less

@@ -12,9 +12,9 @@
         height: 20px;
     }
     &.zen-pill-text-content--drive {
-        .body-04-mobile-drive();
+        .body-04-drive();
     }
     &.zen-pill-text-content--drive-tablet {
-        .body-04-tablet-drive();
+        .body-04-drive();
     }
 }