@geotab/zenith 1.22.0 → 1.22.1-beta.ssr.0

package/README.md

@@ -40,6 +40,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.22.1
+
+ * Add Korean translation
+
 ### 1.22.0
 
  * DataGrid accessibility fixes

package/dist/absolute/absolute.js

@@ -33,12 +33,14 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     }, [role, ariaLabelledby, ariaLabel]);
     const darkClassName = dark ? "zen-dark" : "";
     const renderPopup = () => {
+        var _a, _b;
         if (isOpen) {
             const result = (0, jsx_runtime_1.jsx)("div", Object.assign({}, accessableAttr, { ref: popupRef, id: id, onScroll: shouldHoldScroll ? onScrollHandler : undefined, className: (0, classNames_1.classNames)(["zen-absolute", darkClassName, className || ""]), children: children }));
             if (inline) {
                 return result;
             }
-            return (0, react_dom_1.createPortal)(result, document.fullscreenElement || document.body);
+            // eslint-disable-next-line
+            return (0, react_dom_1.createPortal)(result, ((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.fullscreenElement) || ((_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.body));
         }
         return "";
     };
@@ -69,7 +71,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     (0, useEscape_1.useEscape)(popupRef, handleEscape, isOpen);
     (0, useArrowKey_1.useArrowKey)(popupRef, handleEscape, isOpen);
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         const closeOnClickOutside = (e) => {
             if (!popupRef.current) {
                 return;
@@ -85,18 +87,21 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             onOpenChange(false);
         };
         if (isOpen) {
-            document.body.addEventListener("click", closeOnClickOutside, true);
-            const firstFocusable = (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            // eslint-disable-next-line
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.addEventListener("click", closeOnClickOutside, true);
+            const firstFocusable = (_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
             if (useTrapFocusWithTrigger !== "withTrigger") {
                 if (firstFocusable) {
                     firstFocusable.focus();
                 }
                 else {
-                    (_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                    (_c = popupRef.current) === null || _c === void 0 ? void 0 : _c.focus();
                 }
             }
             return () => {
-                document.body.removeEventListener("click", closeOnClickOutside, true);
+                var _a;
+                // eslint-disable-next-line
+                (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("click", closeOnClickOutside, true);
             };
         }
         return () => { };

package/dist/accordion/accordion.js

@@ -5,8 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const accordionItem_1 = require("./accordionItem/accordionItem");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const Accordion = ({ data = [], className = "", activeIds = [], onItemClick }) => {
     const fullClassName = (0, classNames_1.classNames)(["zen-accordion", className]);
+    const isClientReady = (0, useClientReady_1.useClientReady)();
+    if (!isClientReady) {
+        return null;
+    }
     return (0, jsx_runtime_1.jsx)("div", { className: fullClassName, children: data.map((item) => (0, react_1.createElement)(accordionItem_1.AccordionItem, Object.assign({}, item, { key: item.id, isActive: activeIds.indexOf(item.id) !== -1, onClick: () => onItemClick && onItemClick(item.id) }))) });
 };
 exports.Accordion = Accordion;

package/dist/banner/banner.js

@@ -5,9 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const bannerSingleLine_1 = require("./bannerSingleLine");
 const bannerMultipLine_1 = require("./bannerMultipLine");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const Banner = ({ children, header, type = "warning", icon, action, size, onClose, multiline, role = "status", ariaAtomic = "true", ariaLive = "polite", className }) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const isMultiline = multiline === undefined ? isMobile : multiline;
+    const isClientReady = (0, useClientReady_1.useClientReady)();
+    if (!isClientReady) {
+        return null;
+    }
     return isMultiline ? (0, jsx_runtime_1.jsx)(bannerMultipLine_1.BannerMultiline, { children,
         header,
         type,

package/dist/betaPill/betaPill.js

@@ -10,6 +10,7 @@ const pill_1 = require("../pill/pill");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const pillExpandable_1 = require("../pillExpandable/pillExpandable");
 const betaPillContext_1 = require("./betaPillContext");
+const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const BetaPill = ({ className, feedbackAction, betaOptionAction }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
@@ -19,14 +20,18 @@ const BetaPill = ({ className, feedbackAction, betaOptionAction }) => {
         isMobile ? "zen-beta-pill--mobile" : "",
         className !== null && className !== void 0 ? className : ""
     ]), [isMobile, className]);
+    const isClientReady = (0, useClientReady_1.useClientReady)();
     const contextActions = (0, betaPillContext_1.useBetaPillActions)();
     let resolvedMainAction = feedbackAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.feedbackAction);
     let resolvedSecondaryAction = betaOptionAction || (contextActions === null || contextActions === void 0 ? void 0 : contextActions.betaOptionAction);
-    if (resolvedMainAction || resolvedSecondaryAction) {
+    if ((resolvedMainAction || resolvedSecondaryAction) && isClientReady) {
         resolvedMainAction = Object.assign(Object.assign({}, resolvedMainAction), { text: (resolvedMainAction === null || resolvedMainAction === void 0 ? void 0 : resolvedMainAction.text) || translate("Send feedback") });
         resolvedSecondaryAction = Object.assign(Object.assign({}, resolvedSecondaryAction), { text: (resolvedSecondaryAction === null || resolvedSecondaryAction === void 0 ? void 0 : resolvedSecondaryAction.text) || translate("Manage beta option") });
         return ((0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, { isBeta: true, icon: iconLab_1.IconLab, description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."), text: translate("Beta"), type: "info", className: pillClasses, mainAction: resolvedMainAction, secondaryAction: resolvedSecondaryAction }));
     }
+    if (!isClientReady) {
+        return null;
+    }
     return ((0, jsx_runtime_1.jsx)(pill_1.Pill, { icon: iconLab_1.IconLab, className: pillClasses, type: "info", children: !isMobile && ((0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: translate("Beta") })) }));
 };
 exports.BetaPill = BetaPill;

package/dist/calendar/calendar.js

@@ -30,12 +30,14 @@ const Calendar = ({ id, value, onChange, disableFutureDates = false, disablePast
     const [hoverDate, setHoverDate] = (0, react_1.useState)(fromDate);
     const [focusDate, setFocusDate] = (0, react_1.useState)(fromDate || new Date().toISOString());
     const changeView = (0, react_1.useCallback)((date) => {
-        var _a, _b;
-        focusRef.current = document.activeElement;
+        var _a, _b, _c, _d;
+        // eslint-disable-next-line
+        focusRef.current = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.activeElement;
         const dateLike = new Date(date);
         dateLike.setDate(15);
-        if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-parallel-selection__select")) {
-            (_b = parallelSelectionTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        // eslint-disable-next-line
+        if ((_c = (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.activeElement) === null || _c === void 0 ? void 0 : _c.classList.contains("zen-parallel-selection__select")) {
+            (_d = parallelSelectionTriggerRef.current) === null || _d === void 0 ? void 0 : _d.focus();
         }
         setViewDate(dateLike.toISOString());
     }, [setViewDate]);

package/dist/chart/barChart/getDefaultDatasetStyle.d.ts

@@ -8,7 +8,7 @@ export declare const getDefaultDatasetStyle: (dataSet: IBarChartDataset, dsIndex
     barThickness?: number | "flex" | undefined;
     maxBarThickness?: number | undefined;
     minBarLength?: number | undefined;
-    pointStyle?: false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | undefined;
+    pointStyle?: false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | undefined;
     grouped?: boolean | undefined;
     indexAxis?: "x" | "y" | undefined;
     clip?: number | false | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js").ChartArea> | undefined;

package/dist/chart/barChart.js

@@ -21,7 +21,6 @@ const utils_1 = require("../commonHelpers/utils");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
-const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartSummary_1 = require("./chartSummary/chartSummary");
@@ -53,8 +52,8 @@ const BarChart = (_a) => {
         };
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
-    const legendId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
-    const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
+    const legendId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
     const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
     const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data), [data]);

package/dist/chart/lineChart/getDefaultDatasetStyle.d.ts

@@ -21,7 +21,7 @@ export declare const getDefaultDatasetStyle: (dataSet: ILineChartNativeDataset,
     pointHitRadius?: number | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
     pointRadius?: number | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
     pointRotation?: number | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    pointStyle?: false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").PointStyle | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | readonly (false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | undefined)[] | undefined;
+    pointStyle?: false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").PointStyle | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | readonly (false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | undefined)[] | undefined;
     pointHoverBackgroundColor?: string | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").Color | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
     pointHoverBorderColor?: string | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js").Color | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
     pointHoverBorderWidth?: number | ((ctx: import("chart.js").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;

package/dist/chart/lineChart/useChartTicks.js

@@ -20,9 +20,9 @@ const useChartTicks = () => {
         const handleResize = () => {
             applyWidth();
         };
-        window.addEventListener("resize", handleResize);
+        globalThis.addEventListener("resize", handleResize);
         return () => {
-            window.removeEventListener("resize", handleResize);
+            globalThis.removeEventListener("resize", handleResize);
         };
     }, []);
     const ticks = (0, react_1.useMemo)(() => {

package/dist/chart/lineChart.js

@@ -22,7 +22,6 @@ const getDefaultDatasetStyle_1 = require("./lineChart/getDefaultDatasetStyle");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
-const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartAxis_1 = require("./chartAxis/chartAxis");
@@ -55,8 +54,8 @@ const LineChart = (_a) => {
         };
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
-    const legendId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
-    const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
+    const legendId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
     const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, true), [data]);

package/dist/chart/pieChart.js

@@ -21,7 +21,6 @@ const utils_1 = require("../commonHelpers/utils");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const themeContext_1 = require("../utils/theme/themeContext");
-const generateId_1 = require("../commonHelpers/generateId");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartSummary_1 = require("./chartSummary/chartSummary");
@@ -38,6 +37,8 @@ const PieChart = (_a) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const fontSize = (0, react_1.useMemo)(() => isDrive ? (isMobile ? 14 : 16) : 12, [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
+    const legendId = (0, react_1.useId)();
+    const tooltipId = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
         auto_1.Chart.defaults.font = {
             family: "Roboto",
@@ -45,8 +46,6 @@ const PieChart = (_a) => {
         };
         auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
     }, [fontSize, dark]);
-    const legendId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
-    const tooltipId = (0, react_1.useMemo)(() => (0, generateId_1.generateId)(), []);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();

package/dist/chart/plugins/legend/legendPlugin.js

@@ -10,7 +10,9 @@ const legendPlugin = (containerId, options, isDrive, isHidden, toggleHidden) =>
     id: exports.LEGEND_PLUGIN_ID,
     isDrive: isDrive,
     afterUpdate(chart) {
-        const container = document.getElementById(containerId);
+        var _a;
+        // eslint-disable-next-line
+        const container = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.getElementById(containerId);
         if (!container) {
             return;
         }

package/dist/chart/plugins/tooltip/renderTooltip.js

@@ -5,19 +5,24 @@ const escapeHtml_1 = require("../../../utils/escapeHtml");
 const calculatePositions_1 = require("./calculatePositions");
 const isOutOfViewport_1 = require("./isOutOfViewport");
 const getOrCreateTooltip = (id, isDark) => {
-    let tooltipEl = document.body.querySelector(`#${id}`);
+    var _a, _b, _c;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    let tooltipEl = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.getElementById(id);
     if (!tooltipEl) {
-        tooltipEl = document.createElement("div");
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        tooltipEl = (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.createElement("div");
         tooltipEl.id = id;
         tooltipEl.className = "zen-chart-tooltip";
         tooltipEl.setAttribute("role", "tooltip");
         tooltipEl.setAttribute("aria-hidden", "true");
-        document.body.appendChild(tooltipEl);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        (_c = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _c === void 0 ? void 0 : _c.body.appendChild(tooltipEl);
     }
     tooltipEl.classList.toggle("zen-dark", isDark);
     return tooltipEl;
 };
 const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, isDark) => {
+    var _a, _b;
     const element = getOrCreateTooltip(tooltipId, isDark);
     element.style.display = "block";
     const titleHtml = title ? `<div class="zen-chart-tooltip__header">${(0, escapeHtml_1.htmlEscape)(title)}</div>` : "";
@@ -29,12 +34,14 @@ const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, isDark
         </div>`);
     const itemsHtml = `<div class="zen-chart-tooltip__items">${itemsList.join("")}</div>`;
     element.innerHTML = `${titleHtml}${subtitleHtml}${itemsHtml}`;
-    const arrow = document.createElement("div");
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const arrow = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.createElement("div");
     arrow.className = "zen-chart-tooltip__arrow";
     element.appendChild(arrow);
     const tooltipRect = element.getBoundingClientRect();
     const positionsOrder = [position, ...calculatePositions_1.positionOrder[position]];
-    const bodyRect = document.body.getBoundingClientRect();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const bodyRect = (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.body.getBoundingClientRect();
     let finalPosition = undefined;
     for (let i = 0; i < positionsOrder.length; i++) {
         const pos = positionsOrder[i];
@@ -62,16 +69,21 @@ const renderTooltip = (tooltipId, x, y, position, items, title, subtitle, isDark
 };
 exports.renderTooltip = renderTooltip;
 const hideTooltip = (tooltipId) => {
-    const element = document.body.querySelector(`#${tooltipId}`);
+    var _a;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const element = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.getElementById(tooltipId);
     if (element) {
         element.style.display = "none";
     }
 };
 exports.hideTooltip = hideTooltip;
 const destroyTooltip = (tooltipId) => {
-    const element = document.body.querySelector(`#${tooltipId}`);
+    var _a, _b;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const element = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.getElementById(tooltipId);
     if (element) {
-        document.body.removeChild(element);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        (_b = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _b === void 0 ? void 0 : _b.body.removeChild(element);
     }
 };
 exports.destroyTooltip = destroyTooltip;

package/dist/chart/plugins/tooltip/tooltipPlugin.js

@@ -75,6 +75,7 @@ const TooltipPlugin = (containerId, options, alignment = "top", isHidden, isDark
         });
     },
     afterDraw: (chart) => {
+        var _a;
         if (options === false) {
             return;
         }
@@ -97,7 +98,8 @@ const TooltipPlugin = (containerId, options, alignment = "top", isHidden, isDark
                 values = (0, getPieTooltipItems_1.getPieTooltipItems)(chart.data, datasetIndex, index, options);
             }
             const chartRect = chart.canvas.getBoundingClientRect();
-            document.body.getBoundingClientRect();
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.getBoundingClientRect();
             const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(chart.canvas);
             const scrollTop = scrollableParent ? scrollableParent.scrollTop : 0;
             const scrollLeft = scrollableParent ? scrollableParent.scrollLeft : 0;

package/dist/combobox/comboboxNavigation.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClickOutside = exports.useComboboxNavigation = void 0;
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const react_1 = require("react");
 const useKeydown_1 = require("../commonHelpers/hooks/useKeydown");
 const useComboboxNavigation = (callback, subscriptionTrigger, condition) => {
@@ -12,14 +13,16 @@ const useComboboxNavigation = (callback, subscriptionTrigger, condition) => {
 exports.useComboboxNavigation = useComboboxNavigation;
 const useClickOutside = (ref, callback) => {
     (0, react_1.useEffect)(() => {
+        var _a;
         const handleClick = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 callback();
             }
         };
-        document.body.addEventListener("click", handleClick, true);
+        (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.addEventListener("click", handleClick, true);
         return () => {
-            document.body.removeEventListener("click", handleClick, true);
+            var _a;
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("click", handleClick, true);
         };
     }, [ref, callback]);
 };

package/dist/commonHelpers/arrowNavigation/hooks/useHoldOnScroll.js

@@ -18,7 +18,7 @@ const useHoldOnScroll = () => {
             return;
         }
         setAction(actionName);
-        timerRef.current = window.setTimeout(() => {
+        timerRef.current = globalThis.setTimeout(() => {
             action && setAction(actionName);
         }, 500);
     };

package/dist/commonHelpers/arrowNavigation/hooks/useScrollWhileHolding.js

@@ -8,7 +8,7 @@ const useScrollWhileHolding = ({ action, container, intervalTimer }) => {
         if (!container || !action) {
             return;
         }
-        intervalTimer.current = window.setInterval(() => {
+        intervalTimer.current = globalThis.setInterval(() => {
             const { left, top } = (0, arrowNavigationHelper_1.getScrollOptions)(action, container);
             (0, arrowNavigationHelper_1.scrollElement)(container, { left, top });
             if ((left === container.scrollWidth && action === "right") || (left === 0 && action === "left")) {

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

@@ -0,0 +1 @@
+export declare const useClientReady: () => boolean;

package/dist/commonHelpers/hooks/useClientReady.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClientReady = void 0;
+const react_1 = require("react");
+const isDomEnv_1 = require("../isDomEnv");
+const useClientReady = () => {
+    const [isClientReady, setIsClientReady] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if ((0, isDomEnv_1.isDomEnv)()) {
+            setIsClientReady(true);
+        }
+    }, []);
+    return isClientReady;
+};
+exports.useClientReady = useClientReady;

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

@@ -1,3 +1,3 @@
 import { DeviceType } from "./deviceType";
-export declare const getDeviceType: (width: number) => DeviceType;
+export declare const getDeviceType: (width?: number) => DeviceType;
 export declare const useDeviceType: (callback: (deviceType: DeviceType) => void) => void;

package/dist/commonHelpers/hooks/useDeviceType.js

@@ -8,7 +8,8 @@ const topWindowContext_1 = require("../../utils/topWindow/topWindowContext");
 const getParentWindow_1 = require("../../utils/getParentWindow");
 const MobileMaxWidth = 640;
 const getDeviceType = (width) => {
-    if (width > MobileMaxWidth) {
+    // TODO: think about better solution - could be issue if app opens in mobile with SSR
+    if (width === undefined || width > MobileMaxWidth) {
         return deviceType_1.DeviceType.Desktop;
     }
     return deviceType_1.DeviceType.Mobile;
@@ -16,7 +17,7 @@ const getDeviceType = (width) => {
 exports.getDeviceType = getDeviceType;
 const useDeviceType = (callback) => {
     const { topWindow } = (0, react_1.useContext)(topWindowContext_1.topWindowContext);
-    const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(window), [topWindow]);
+    const win = (0, react_1.useMemo)(() => topWindow || (0, getParentWindow_1.getParentWindow)(globalThis), [topWindow]);
     const [deviceType, setDeviceType] = (0, react_1.useState)((0, exports.getDeviceType)(win.innerWidth));
     (0, useResize_1.useResize)(() => {
         setDeviceType((0, exports.getDeviceType)(win.innerWidth));

package/dist/commonHelpers/hooks/useKeydown.js

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useKeydown = void 0;
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const react_1 = require("react");
 const useKeydown = (callback, subscriptionTrigger, condition) => {
     (0, react_1.useEffect)(() => {
+        var _a;
         if (condition ? condition(subscriptionTrigger) : subscriptionTrigger) {
-            document.body.addEventListener("keydown", callback);
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.addEventListener("keydown", callback);
         }
         return () => {
-            document.body.removeEventListener("keydown", callback);
+            var _a;
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body.removeEventListener("keydown", callback);
         };
     }, [callback, condition, subscriptionTrigger]);
 };

package/dist/commonHelpers/hooks/useMobile.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const deviceType_1 = require("./deviceType");
 const useDeviceType_1 = require("./useDeviceType");
 const getParentWindow_1 = require("../../utils/getParentWindow");
-const initialParent = (0, getParentWindow_1.getParentWindow)(window);
+const initialParent = (0, getParentWindow_1.getParentWindow)(globalThis);
 exports.initialValue = (0, useDeviceType_1.getDeviceType)(initialParent.innerWidth);
 const useMobile = () => {
     const [deviceType, setDeviceType] = (0, react_1.useState)(exports.initialValue);

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

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare const usePortal: (children: ReactNode, container?: Element | DocumentFragment, key?: null | string) => import("react").ReactPortal | null;

package/dist/commonHelpers/hooks/usePortal.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+    (0, react_1.useEffect)(() => {
+        if (portalContainer || !container) {
+            return;
+        }
+        setPortalContainer(container);
+    }, [portalContainer, container]);
+    // TODO: memoization?
+    // TODO: client ready check?
+    return portalContainer ? (0, react_dom_1.createPortal)(children, portalContainer, key) : null;
+};
+exports.usePortal = usePortal;

package/dist/commonHelpers/hooks/useResize.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResize = void 0;
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 const react_1 = require("react");
 const useResize = (callback, active) => {
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!active) {
-            return;
+            return undefined;
         }
-        window.addEventListener("resize", callback);
-        // eslint-disable-next-line consistent-return
+        (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.addEventListener) === null || _a === void 0 ? void 0 : _a.call(globalThis, "resize", callback);
         return () => {
-            window.removeEventListener("resize", callback);
+            var _a;
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(globalThis, "resize", callback);
         };
     }, [callback, active]);
 };

package/dist/commonHelpers/hooks/useResizeObserver.js

@@ -10,17 +10,21 @@ const getTarget = (target) => {
 const useResizeObserver = ({ target }) => {
     const [result, setResult] = (0, react_1.useState)(null);
     const timeoutRef = (0, react_1.useRef)(null);
-    const observer = (0, react_1.useRef)(new ResizeObserver((entities) => {
+    // eslint-disable-next-line
+    const ResizeObserverFn = globalThis === null || globalThis === void 0 ? void 0 : globalThis.ResizeObserver;
+    // eslint-disable-next-line
+    const observerCallback = ResizeObserverFn ? new ResizeObserverFn((entities) => {
         timeoutRef.current && cancelAnimationFrame(timeoutRef.current);
         timeoutRef.current = requestAnimationFrame(() => setResult(entities[0]));
-    }));
+    }) : undefined;
+    const observer = (0, react_1.useRef)(observerCallback);
     (0, react_1.useLayoutEffect)(() => {
         const targetObj = getTarget(target);
         const observerObj = observer.current;
-        targetObj && observerObj.observe(targetObj);
+        targetObj && (observerObj === null || observerObj === void 0 ? void 0 : observerObj.observe(targetObj));
         return () => {
             timeoutRef.current && cancelAnimationFrame(timeoutRef.current);
-            observerObj.disconnect();
+            observerObj === null || observerObj === void 0 ? void 0 : observerObj.disconnect();
         };
     }, [target]);
     return { result };

package/dist/commonHelpers/hooks/useScroll.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScroll = void 0;
 const react_1 = require("react");
-const useScroll = (callback, active, triggerRef = document.body) => {
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+const useScroll = (callback, active, triggerRef) => {
+    var _a;
+    if (triggerRef === void 0) { triggerRef = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body; }
     (0, react_1.useEffect)(() => {
         if (!active || triggerRef === null) {
             return;