@geotab/zenith 1.21.2-beta.0 → 1.21.2-beta.1

package/README.md

@@ -45,6 +45,7 @@ Zenith library provides components defined in Zenith Design System. It includes
  * DataGrid accessibility fixes
  * Paddings fixes for DataGrid
  * Audit button fixes
+ * Update styles for Waiting component
 
 ## 1.21.1
 

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/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/isDomEnv.d.ts

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

package/dist/commonHelpers/isDomEnv.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDomEnv = void 0;
+/* eslint-disable */
+const isDomEnv = () => {
+    var _a;
+    return !!(typeof window !== "undefined" &&
+        typeof (window === null || window === void 0 ? void 0 : window.document) !== "undefined" &&
+        typeof ((_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.createElement) !== "undefined");
+};
+exports.isDomEnv = isDomEnv;

package/dist/index.css

@@ -2369,6 +2369,36 @@
   width: 40px;
   height: 24px;
 }
+.zen-waiting__spinner-text {
+  font-family: var(--main-font);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  color: var(--text-secondary);
+  max-width: 144px;
+  text-align: center;
+}
+.zen-waiting__spinner-text--drive {
+  font-family: var(--main-font);
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 28px;
+  text-transform: none;
+}
+.zen-waiting__spinner-text--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 30px;
+  text-transform: none;
+}
 .zen-waiting__overlay {
   position: absolute;
   top: 0;
@@ -2383,23 +2413,43 @@
 .zen-waiting__overlay--hidden {
   background-color: transparent;
 }
-.zen-waiting__spinner.zen-waiting__spinner {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
+.zen-waiting__spinner-container {
+  display: flex;
   min-height: 20px;
   height: 100%;
-  will-change: transform;
-  animation: waiting 0.8s linear infinite;
-  width: 40px;
-  opacity: 0.5;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 8px;
 }
-.zen-waiting__spinner.zen-waiting__spinner--standalone {
-  position: absolute;
-  top: 0;
-  left: 0;
+.zen-waiting__spinner {
+  display: flex;
+  max-width: 64px;
+  max-height: 64px;
+  min-width: 40px;
+  min-height: 40px;
+  position: relative;
   width: 100%;
-  background-size: auto;
+  height: 100%;
+}
+.zen-waiting__spinner--drive-tablet {
+  max-width: 40px;
+  max-height: 40px;
+}
+.zen-waiting__spinner--drive {
+  max-width: 40px;
+  max-height: 40px;
+}
+@media (max-width: 640px) {
+  .zen-waiting__spinner {
+    max-width: 40px;
+    max-height: 40px;
+  }
+}
+.zen-waiting__spinner-animation {
+  transform-origin: 32px 32px;
+  animation: waiting 1.5s linear infinite;
 }
 .zen-checkbox[data-checked="true"] > .zen-checkbox__label > .zen-checkbox__box,
 .zen-checkbox[data-indeterminate="true"] > .zen-checkbox__label > .zen-checkbox__box {

package/dist/waiting/waiting.d.ts

@@ -5,5 +5,6 @@ export interface IWaiting extends IZenComponentProps {
     isLoading?: boolean;
     delay?: number;
     hideOverlay?: boolean;
+    description?: string;
 }
 export declare const Waiting: React.FC<IWaiting>;

package/dist/waiting/waiting.js

@@ -4,9 +4,10 @@ exports.Waiting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const iconSpinner_1 = require("../icons/deprecated/iconSpinner");
-const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "" }) => {
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
+    const spinnerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-waiting__spinner");
     (0, react_1.useEffect)(() => {
         let timer;
         if (isLoading) {
@@ -18,7 +19,7 @@ const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, classNam
         return () => { timer && window.clearTimeout(timer); };
     }, [isLoading, setVisible, delay]);
     return visible ?
-        (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsx)(iconSpinner_1.IconSpinner, { className: "zen-waiting__spinner" })] })
+        (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-waiting__spinner-container", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), (0, jsx_runtime_1.jsx)("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), (0, jsx_runtime_1.jsx)("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner-text"]), children: description })] })] })
         : null;
 };
 exports.Waiting = Waiting;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "1.21.2-beta.0",
+  "version": "1.21.2-beta.1",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",