@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/static/icons/icons.d.ts

@@ -0,0 +1,67 @@
+export declare const availableIcons: {
+    "zen-checkmark": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-info-circled": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-info-circle-tooltip": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-error-new": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-success-new": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-warning-new": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-report-error": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-error": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-minus-icon": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-loupe": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-globe": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-circle-ok": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-lvl-up": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-arrow-top": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-arrow-bottom": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+    "zen-calendar": {
+        viewBox: string;
+        svg: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export type TIconId = keyof typeof availableIcons;

package/esm/static/icons/icons.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const availableIcons = {
+    "zen-checkmark": {
+        viewBox: "0 0 16 14",
+        svg: _jsx("path", { fillRule: "evenodd", d: "M15.467.6c.589.442.708 1.278.266 1.867l-8 10.666a1.333 1.333 0 01-1.964.186L.436 8.462A1.333 1.333 0 012.23 6.49l4.249 3.87L13.6.867A1.333 1.333 0 0115.467.6z", clipRule: "evenodd" })
+    },
+    "zen-info-circled": {
+        viewBox: "0 0 32 32",
+        // eslint-disable-next-line max-len
+        svg: _jsx("path", { d: "M21.233 25.99v-3.303q0-.297-.185-.483-.186-.185-.446-.185h-2.004V11.405q0-.297-.185-.482-.186-.186-.482-.186h-6.606q-.297 0-.482.186-.186.185-.186.482v3.303q0 .297.186.482.185.186.482.186h1.967v6.643h-1.967q-.297 0-.482.185-.186.186-.186.483v3.302q0 .297.186.483.185.185.482.185h9.277q.26 0 .446-.185.185-.186.185-.483zM18.598 7.434V4.132q0-.297-.185-.483-.186-.185-.482-.185H13.96q-.297 0-.483.185-.185.186-.185.483v3.303q0 .296.185.482.186.185.483.185h3.97q.297 0 .483-.185.185-.186.185-.482zm13.249 8.609q0 4.342-2.116 7.979-2.115 3.636-5.789 5.789-3.674 2.152-7.978 2.152-4.305 0-8.016-2.152-3.711-2.153-5.752-5.79Q.155 20.387.044 16.045q-.112-4.342 2.152-7.979Q4.46 4.43 7.948 2.276 11.436.124 15.964.124q4.527 0 7.978 2.152 3.451 2.153 5.79 5.79 2.337 3.636 2.115 7.978z" })
+    },
+    "zen-info-circle-tooltip": {
+        viewBox: "0 0 16 16",
+        svg: _jsxs(_Fragment, { children: [_jsx("path", { fillRule: "evenodd", d: "M8 2.667a5.333 5.333 0 100 10.666A5.333 5.333 0 008 2.667ZM1.333 8a6.667 6.667 0 1113.334 0A6.667 6.667 0 011.334 8Zm5.334-.667c0-.368.298-.666.667-.666H8c.368 0 .667.298.667.666v3.334a.667.667 0 11-1.333 0V8a.667.667 0 01-.667-.667Z", clipRule: "evenodd" }), _jsx("path", { d: "M7.667 5.333a.333.333 0 11.666 0 .333.333 0 01-.667 0Z" }), _jsx("path", { fillRule: "evenodd", d: "M8 6a.667.667 0 110-1.333A.667.667 0 018 6Zm0-1a.333.333 0 100 .667A.333.333 0 008 5Z", clipRule: "evenodd" })] })
+    },
+    "zen-error-new": {
+        viewBox: "0 0 24 24",
+        // eslint-disable-next-line max-len
+        svg: _jsx("path", { fillRule: "evenodd", d: "M3.994 11.995a8 8 0 1116 0 8 8 0 01-16 0Zm8-10c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10Zm1.389 5.508a1.404 1.404 0 10-2.802-.023l.31 5.353a1.05 1.05 0 002.096.016l.396-5.346ZM10.928 17.59c.29.27.648.404 1.075.404.414 0 .766-.135 1.056-.404.29-.27.434-.603.434-1 0-.398-.145-.73-.434-1a1.494 1.494 0 00-1.056-.404c-.427 0-.786.135-1.075.404a1.31 1.31 0 00-.435 1c0 .397.145.73.435 1Z", clipRule: "evenodd" })
+    },
+    "zen-success-new": {
+        viewBox: "0 0 16 16",
+        // eslint-disable-next-line max-len
+        svg: _jsx("path", { fillRule: "evenodd", d: "M8 2.667a5.333 5.333 0 100 10.666A5.333 5.333 0 008 2.667ZM1.333 8a6.667 6.667 0 1113.334 0A6.667 6.667 0 011.333 8Zm9.09-2.183a.667.667 0 01.093.939l-3 3.666a.667.667 0 01-.987.05L5.195 9.137a.667.667 0 11.943-.943l.813.813L9.484 5.91a.667.667 0 01.938-.094Z", clipRule: "evenodd" })
+    },
+    "zen-warning-new": {
+        viewBox: "0 0 24 24",
+        // eslint-disable-next-line max-len
+        svg: _jsx("path", { fillRule: "evenodd", d: "M9.963 5.077c.884-1.426 2.975-1.438 3.875-.022l7.305 11.487c.949 1.491-.122 3.458-1.93 3.458H4.784c-1.796 0-2.87-1.944-1.944-3.436L9.963 5.077Zm5.563-1.095c-1.692-2.66-5.602-2.638-7.263.04L1.141 15.51C-.625 18.357 1.448 22 4.785 22h14.427c3.36 0 5.428-3.686 3.619-6.531L15.526 3.982Zm-2.139 3.526a1.404 1.404 0 10-2.802-.022l.311 5.352a1.05 1.05 0 002.095.017l.396-5.347Zm-2.454 10.088c.29.27.649.404 1.076.404.414 0 .766-.135 1.055-.404.29-.27.435-.602.435-1 0-.397-.145-.73-.435-1a1.493 1.493 0 00-1.055-.404c-.428 0-.786.135-1.076.404a1.31 1.31 0 00-.434 1c0 .398.145.73.434 1Z", clipRule: "evenodd" })
+    },
+    "zen-report-error": {
+        viewBox: "0 0 16 16",
+        // eslint-disable-next-line max-len
+        svg: _jsx("path", { d: "M15.413 13.333L9.18 1.433a1.333 1.333 0 00-2.362 0l-6.232 11.9a1.333 1.333 0 001.182 1.952H14.23a1.333 1.333 0 001.182-1.952zm-8.08-7.718a.667.667 0 011.334 0v4a.667.667 0 01-1.334 0v-4zm.7 7.674h-.018A1.019 1.019 0 017 12.309a.984.984 0 01.947-1.02h.037c.546 0 .995.432 1.016.978a.983.983 0 01-.944 1.021h-.023z" })
+    },
+    "zen-error": {
+        viewBox: "0 0 12 12",
+        // eslint-disable-next-line max-len
+        svg: _jsx("path", { d: "M11.56 10L6.885 1.075a1 1 0 00-1.771 0L.44 10a1 1 0 00.886 1.464h9.347A1 1 0 0011.56 10zM5.5 4.212a.5.5 0 011 0v3a.5.5 0 01-1 0v-3zm.525 5.755h-.014a.764.764 0 01-.761-.736.738.738 0 01.71-.764h.028c.41 0 .746.323.762.733a.738.738 0 01-.708.766h-.017z" })
+    },
+    "zen-minus-icon": {
+        viewBox: "0 0 16 16",
+        svg: _jsx("rect", { width: "16", height: "3", y: "6.5", rx: "1" })
+    },
+    "zen-loupe": {
+        viewBox: "0 0 32 32",
+        svg: _jsx("path", { d: "M31.538 29.11l-8.874-8.867c4.219-5.542 3.143-13.453-2.404-17.669C14.713-1.64 6.795-.567 2.576 4.975-1.643 10.518-.568 18.43 4.98 22.645a12.627 12.627 0 0015.28 0l8.875 8.866a1.721 1.721 0 002.403 0c.63-.657.602-1.718 0-2.401zM3.491 12.651c0-5.063 4.108-9.167 9.175-9.167 5.067 0 9.175 4.104 9.175 9.167s-4.108 9.167-9.175 9.167c-5.064-.005-9.17-4.107-9.175-9.167z" })
+    },
+    "zen-globe": {
+        viewBox: "0 0 16 16",
+        svg: _jsx("path", { fillRule: "evenodd", d: "M.199 7.832C.165 12.168 3.592 15.8 7.979 15.8c4.378 0 7.823-3.256 7.823-7.83 0-2.277-.763-4.222-2.128-5.6C12.31.995 10.356.2 8.004.2 3.275.2.201 3.685.198 7.832zm13.654 3.201H11.07c.302-.924.482-1.85.538-2.766h2.987a6.625 6.625 0 01-.742 2.766zm-.802 1.2a6.64 6.64 0 01-3.66 2.214 15.07 15.07 0 001.218-2.214h2.442zm-3.25-1.2c.342-.935.542-1.861.604-2.766H5.601c.062.905.262 1.83.605 2.766H9.8zm-1.798 3.313a14.748 14.748 0 01-1.282-2.113h2.564a14.75 14.75 0 01-1.282 2.113zM1.409 8.267h2.99c.055.917.235 1.842.537 2.766H2.178a6.668 6.668 0 01-.77-2.766zm5.195 6.165a6.703 6.703 0 01-3.612-2.199h2.405a15.06 15.06 0 001.207 2.199zm4.424-10.13c.33.893.523 1.819.58 2.765h2.933a6.559 6.559 0 00-1.053-2.766h-2.46zm-.622 2.765a8.484 8.484 0 00-.67-2.766H6.27a8.488 8.488 0 00-.669 2.766h4.805zm-6.008 0a9.656 9.656 0 01.581-2.766H2.458a6.397 6.397 0 00-1.014 2.766H4.4zm6.096-3.966h1.957a6.557 6.557 0 00-2.934-1.534c.375.496.7 1.008.977 1.534zm-3.601 0a10.63 10.63 0 011.11-1.486c.426.479.798.978 1.11 1.486h-2.22zm-1.38 0c.281-.535.613-1.056.997-1.56a6.414 6.414 0 00-3.03 1.56h2.033z", clipRule: "evenodd" })
+    },
+    "zen-circle-ok": {
+        viewBox: "0 0 32 32",
+        svg: _jsx("path", { d: "M24.64 8.599a1.665 1.665 0 00-2.328.352l-.001.001-7.899 10.72-5.023-4.019a1.669 1.669 0 00-2.084 2.604l6.378 5.102c.732.573 1.79.444 2.364-.29l.018-.024L25 10.93a1.668 1.668 0 00-.359-2.33c.001 0 0 0 0 0zM16 0C7.164 0 0 7.164 0 16s7.164 16 16 16 16-7.164 16-16C31.99 7.168 24.832.01 16 0zm0 29.333C8.636 29.333 2.667 23.364 2.667 16S8.636 2.667 16 2.667 29.333 8.636 29.333 16C29.325 23.36 23.36 29.325 16 29.333z" })
+    },
+    "zen-lvl-up": {
+        viewBox: "0 0 18 32",
+        svg: _jsx("path", { d: "M14.78 6.973c.51.536.51 1.404 0 1.94a1.282 1.282 0 01-.926.401H9.546a.335.335 0 00-.327.343v18.572c0 .189.146.342.327.342h6.818c.903 0 1.636.769 1.636 1.715 0 .946-.733 1.714-1.636 1.714H7.582c-.903 0-1.636-.768-1.636-1.714V9.656a.335.335 0 00-.327-.342h-4.31C.586 9.314 0 8.7 0 7.943c0-.364.137-.712.384-.97L6.657.401a1.268 1.268 0 011.85 0z" })
+    },
+    "zen-arrow-top": {
+        viewBox: "0 0 12 12",
+        svg: _jsx("path", { fillRule: "evenodd", d: "M6 1.5a.5.5 0 01.354.146l3 3a.5.5 0 11-.708.708L6.5 3.207V10a.5.5 0 01-1 0V3.207L3.354 5.354a.5.5 0 11-.708-.708l3-3A.5.5 0 016 1.5Z", clipRule: "evenodd" })
+    },
+    "zen-arrow-bottom": {
+        viewBox: "0 0 12 12",
+        svg: _jsx("path", { fillRule: "evenodd", d: "M6 10.5a.5.5 0 01-.354-.146l-3-3a.5.5 0 11.708-.708L5.5 8.793V2a.5.5 0 011 0v6.793l2.146-2.147a.5.5 0 11.708.708l-3 3A.5.5 0 016 10.5Z", clipRule: "evenodd" })
+    },
+    "zen-calendar": {
+        viewBox: "0 0 24 24",
+        svg: _jsx("path", { d: "M8 2C8.55228 2 9 2.44772 9 3V4H15V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V4H20C20.5523 4 21 4.44772 21 5V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V5C3 4.44772 3.44772 4 4 4H7V3C7 2.44772 7.44772 2 8 2ZM5 6V9H19V6H5ZM19 11H5V19H19V11Z" })
+    }
+};

package/esm/stepper/stepper.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IStepperRaw } from "../stepperRaw/stepperRaw";
+type TFormInput = TFormFieldComponentProps<IStepperRaw>;
+export interface IStepperInput extends Omit<TFormInput, "counter" | "maxLength"> {
+}
+export declare const Stepper: React.ForwardRefExoticComponent<Omit<IStepperInput, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/esm/stepper/stepper.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { FormField } from "../formField/formField";
+import { StepperRaw } from "../stepperRaw/stepperRaw";
+const FormInput = FormField(StepperRaw);
+export const Stepper = React.forwardRef((_a, ref) => {
+    var { value } = _a, props = __rest(_a, ["value"]);
+    return _jsx(FormInput, Object.assign({}, props, { ref: ref, value: value }));
+});
+Stepper.displayName = "Stepper";

package/esm/stepperRaw/stepperRaw.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
+import "./stepperRaw.less";
+export interface IStepperRaw extends Partial<Omit<IZenIdComponentProps, "children">> {
+    value: string | number;
+    onChange: (value: string) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    isError?: boolean;
+    maxLength?: number;
+    width?: number;
+    readonly?: boolean;
+    placeholder?: string;
+    ariaLabel?: string;
+}
+export declare const INPUT_DEFAULT_WIDTH = 47;
+export declare const INPUT_DEFAULT_WIDTH_DRIVE = 56;
+export declare const StepperRaw: import("react").ForwardRefExoticComponent<IStepperRaw & import("react").RefAttributes<HTMLInputElement>>;
+export declare const TRANSLATIONS: string[];

package/esm/stepperRaw/stepperRaw.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
+import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
+import { IconChevronTopSmall } from "../icons/iconChevronTopSmall";
+import { ButtonType } from "../button/buttonType";
+import { getDecreasedValue } from "./utils/getDecreasedValue";
+import { getIncreasedValue } from "./utils/getIncreasedValue";
+import { getValidStep } from "./utils/getValidStep";
+import { getValidValue } from "./utils/getValidValue";
+import { getValidInputWidth } from "./utils/getValidInputWidth";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { useDrive } from "../utils/theme/useDrive";
+import { onBeforeInput } from "./utils/onBeforeInput";
+// according to design
+export const INPUT_DEFAULT_WIDTH = 47;
+export const INPUT_DEFAULT_WIDTH_DRIVE = 56;
+export const StepperRaw = forwardRef(
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function InnerStepper({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel }, ref) {
+    const driveComponentClass = useDriveClassName("zen-stepper-field");
+    const driveInputClass = useDriveClassName("zen-text-input");
+    const isDrive = useDrive();
+    const isErrorShown = !disabled && !readonly && isError;
+    const validStep = getValidStep(step);
+    const validValue = getValidValue(value, min, max);
+    const inputWidth = getValidInputWidth(width || (isDrive ? INPUT_DEFAULT_WIDTH_DRIVE : INPUT_DEFAULT_WIDTH), isDrive);
+    const handleChange = useCallback((e) => {
+        // prevent cases, when user types "-" in the middle of the number, e.g "1-2"
+        if (!e.target.value && e.nativeEvent.data === "-") {
+            return;
+        }
+        if (!e.target.value) {
+            onChange("");
+            return;
+        }
+        const newValue = getValidValue(e.target.value, min, max);
+        newValue.toString() !== value.toString() && onChange(newValue.toString());
+    }, [max, min, onChange, value]);
+    const { translate } = useLanguage();
+    const localRef = useRef(null);
+    const currRef = (ref || localRef);
+    return _jsx("div", { className: classNames(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]), children: _jsxs("div", { className: "zen-stepper-field__input-wrapper", children: [_jsx("input", { id: id, ref: currRef, min: min, max: max, value: validValue, onBeforeInput: onBeforeInput, onChange: handleChange, disabled: disabled, type: "number", step: step, className: classNames(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]), style: { width: `${inputWidth}px` }, placeholder: placeholder, readOnly: readonly, maxLength: maxLength, "aria-label": ariaLabel }), !readonly && _jsxs("div", { className: "zen-stepper-field__controls", style: { left: `${inputWidth - 24}px` }, children: [_jsx(TextIconButton, { icon: IconChevronTopSmall, type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
+                                var _a;
+                                onChange(String(getIncreasedValue(validValue, validStep, max)));
+                                (_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            }, "aria-label": translate("Increase value") }), _jsx(TextIconButton, { icon: IconChevronDownSmall, type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
+                                var _a;
+                                onChange(String(getDecreasedValue(validValue, validStep, min)));
+                                (_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            }, "aria-label": translate("Decrease value") })] })] }) });
+});
+export const TRANSLATIONS = [
+    "Decrease value",
+    "Increase value"
+];

package/esm/stepperRaw/utils/calculateWithPrecision.d.ts

@@ -0,0 +1 @@
+export declare const calculateWithPrecision: (value: number, step: number, isAddition?: boolean) => number;

package/esm/stepperRaw/utils/calculateWithPrecision.js

@@ -0,0 +1,17 @@
+import { countDecimals } from "../../utils/countDecimals";
+export const calculateWithPrecision = (value, step, isAddition = true) => {
+    // Get the number of decimal places for both numbers
+    const decimals1 = countDecimals(value);
+    const decimals2 = countDecimals(step);
+    // Find the maximum number of decimal places
+    const maxDecimals = Math.max(decimals1, decimals2);
+    // Calculate the scale factor (e.g., 100 for 2 decimals, 1000 for 3)
+    const scaleFactor = Math.pow(10, maxDecimals);
+    // Convert to integers, perform the addition, and scale back
+    const integerValue = Math.round(value * scaleFactor);
+    const integerStep = Math.round(step * scaleFactor);
+    const result = isAddition
+        ? (integerValue + integerStep) / scaleFactor
+        : (integerValue - integerStep) / scaleFactor;
+    return result;
+};

package/esm/stepperRaw/utils/getDecreasedValue.d.ts

@@ -0,0 +1 @@
+export declare const getDecreasedValue: (value: string | number, step: number, min: number) => number;

package/esm/stepperRaw/utils/getDecreasedValue.js

@@ -0,0 +1,5 @@
+import { calculateWithPrecision } from "./calculateWithPrecision";
+export const getDecreasedValue = (value, step, min) => {
+    const decreasedValue = calculateWithPrecision(Number(value) || 0, step, false);
+    return decreasedValue < min ? min : decreasedValue;
+};

package/esm/stepperRaw/utils/getIncreasedValue.d.ts

@@ -0,0 +1 @@
+export declare const getIncreasedValue: (value: string | number, step: number, max: number) => number;

package/esm/stepperRaw/utils/getIncreasedValue.js

@@ -0,0 +1,5 @@
+import { calculateWithPrecision } from "./calculateWithPrecision";
+export const getIncreasedValue = (value, step, max) => {
+    const increasedValue = calculateWithPrecision(Number(value) || 0, step);
+    return increasedValue > max ? max : increasedValue;
+};

package/esm/stepperRaw/utils/getValidInputWidth.d.ts

@@ -0,0 +1 @@
+export declare const getValidInputWidth: (width: number, isDrive: boolean) => number;

package/esm/stepperRaw/utils/getValidInputWidth.js

@@ -0,0 +1,5 @@
+import { INPUT_DEFAULT_WIDTH, INPUT_DEFAULT_WIDTH_DRIVE } from "../stepperRaw";
+export const getValidInputWidth = (width, isDrive) => {
+    const minWidth = isDrive ? INPUT_DEFAULT_WIDTH_DRIVE : INPUT_DEFAULT_WIDTH;
+    return width < minWidth ? minWidth : width;
+};

package/esm/stepperRaw/utils/getValidStep.d.ts

@@ -0,0 +1 @@
+export declare const getValidStep: (step: number) => number;

package/esm/stepperRaw/utils/getValidStep.js

@@ -0,0 +1,7 @@
+import { isValidStep } from "./isValidStep";
+export const getValidStep = (step) => {
+    if (!isValidStep(step)) {
+        return 1;
+    }
+    return step;
+};

package/esm/stepperRaw/utils/getValidValue.d.ts

@@ -0,0 +1 @@
+export declare const getValidValue: (value: string | number, min: number, max: number) => string | number;

package/esm/stepperRaw/utils/getValidValue.js

@@ -0,0 +1,13 @@
+export const getValidValue = (value, min, max) => {
+    const parsedValue = Number(value);
+    if (value === "" || Number.isNaN(parsedValue)) {
+        return "";
+    }
+    if (parsedValue < min) {
+        return min;
+    }
+    if (parsedValue > max) {
+        return max;
+    }
+    return value;
+};

package/esm/stepperRaw/utils/isValidStep.d.ts

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

package/esm/stepperRaw/utils/isValidStep.js

@@ -0,0 +1 @@
+export const isValidStep = (step) => step > 0;

package/esm/stepperRaw/utils/onBeforeInput.d.ts

@@ -0,0 +1 @@
+export declare const onBeforeInput: (e: React.FormEvent<HTMLInputElement>) => void;

package/esm/stepperRaw/utils/onBeforeInput.js

@@ -0,0 +1,19 @@
+export const onBeforeInput = (e) => {
+    switch (e.nativeEvent.data.toLowerCase()) {
+        // prevent using some special characters
+        case "e":
+        case "+": {
+            e.preventDefault();
+            break;
+        }
+        // prevent multiple minus signs
+        case "-": {
+            if (e.target.value.includes("-")) {
+                e.preventDefault();
+            }
+            break;
+        }
+        default:
+            return;
+    }
+};

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/fetchEntities.d.ts

@@ -0,0 +1,3 @@
+import { ISortableColumnSettings } from "../../../dataGrid/withSortableColumns/sortableColumnsStorage";
+import { IEntity } from "../interfaces/entity";
+export declare const fetchEntities: (activePage: number, sort?: ISortableColumnSettings) => Promise<IEntity[]>;

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/fetchEntities.js

@@ -0,0 +1,32 @@
+import { ColumnSortDirection } from "../../../dataGrid/withSortableColumns/columns/columnSortDirection";
+import { PAGE_SIZE } from "../constants";
+const allEntities = new Array(500)
+    .fill("")
+    .map((_, i) => ({
+    id: i.toString(),
+    col1: `row${i} - column 1`,
+    col2: `row${i} - column 2`,
+    col3: `${i}%`,
+    col4: `row${i} - cl 4`
+}));
+// Generator function to load entities for page
+export const fetchEntities = async (activePage, sort) => {
+    const start = activePage * PAGE_SIZE;
+    const end = start + PAGE_SIZE;
+    const sortFn = (a, b) => {
+        if (!sort || sort.sortDirection === ColumnSortDirection.None || !sort.sortColumn) {
+            return 0;
+        }
+        const aVal = a[sort.sortColumn];
+        const bVal = b[sort.sortColumn];
+        if (!aVal || !bVal) {
+            return 0;
+        }
+        return sort.sortDirection === ColumnSortDirection.Ascending ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+    };
+    return new Promise((res) => {
+        setTimeout(() => res(allEntities
+            .sort(sortFn)
+            .slice(start, end)), 2000);
+    });
+};

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/gridModel.d.ts

@@ -0,0 +1,81 @@
+import { IEntity } from "../interfaces/entity";
+import "./gridModel.less";
+import { IListColumnBasic } from "../../../dataGrid/listColumn";
+export declare const gridColumns: ({
+    id: string;
+    title: string;
+    name: string;
+    meta: {
+        defaultWidth: number;
+        renderPlaceholder?: undefined;
+        visibleOnHover?: undefined;
+    };
+    wrappers: {
+        render: (value: any) => any;
+        renderHeader: (title: any) => any;
+    }[];
+    columnComponent: IListColumnBasic<IEntity, IEntity>;
+    group?: undefined;
+    loadingEntitiesColumnComponent?: undefined;
+} | {
+    id: string;
+    title: string;
+    name: string;
+    meta: {
+        defaultWidth: number;
+        renderPlaceholder: (e: IEntity) => import("react/jsx-runtime").JSX.Element;
+        visibleOnHover?: undefined;
+    };
+    group: string;
+    wrappers: {
+        render: (value: any) => any;
+        renderHeader: (title: any) => any;
+    }[];
+    columnComponent: IListColumnBasic<IEntity, IEntity>;
+    loadingEntitiesColumnComponent?: undefined;
+} | {
+    id: string;
+    title: string;
+    name: string;
+    meta: {
+        defaultWidth: number;
+        renderPlaceholder?: undefined;
+        visibleOnHover?: undefined;
+    };
+    group: string;
+    wrappers: {
+        render: (value: any) => any;
+        renderHeader: (title: any) => any;
+    }[];
+    columnComponent: IListColumnBasic<IEntity, IEntity>;
+    loadingEntitiesColumnComponent?: undefined;
+} | {
+    id: string;
+    title: string;
+    name: string;
+    meta: {
+        defaultWidth: number;
+        renderPlaceholder?: undefined;
+        visibleOnHover?: undefined;
+    };
+    group: string;
+    wrappers: {
+        render: (value: any) => any;
+        renderHeader: (title: any) => any;
+    }[];
+    columnComponent: IListColumnBasic<IEntity, IEntity>;
+    loadingEntitiesColumnComponent: IListColumnBasic<IEntity, IEntity>;
+} | {
+    id: string;
+    title: string;
+    name: string;
+    meta: {
+        visibleOnHover: boolean;
+        defaultWidth?: undefined;
+        renderPlaceholder?: undefined;
+    };
+    columnComponent: IListColumnBasic<IEntity, IEntity>;
+    loadingEntitiesColumnComponent: IListColumnBasic<IEntity, IEntity>;
+    wrappers?: undefined;
+    group?: undefined;
+})[];

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/api/gridModel.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
+import { IconCloudOff } from "../../../icons/iconCloudOff";
+import { IconMap } from "../../../icons/iconMap";
+import ColumnWaiting from "../components/ColumnWaiting";
+import { Pill, PillType } from "../../../oldPill/pill";
+import { ActionsColumn } from "../../../dataGrid/columns/actionsColumn/actionsColumn";
+import { CheckboxColumn } from "../../../dataGrid/columns/checkboxColumn/checkboxColumn";
+import { IconDotVertical } from "../../../icons/iconDotVertical";
+import { IconCheck } from "../../../icons/iconCheck";
+const wrappers = [{ render: value => value, renderHeader: title => title }];
+const getLinkToPageFn = (_, _1) => "";
+const hasAccessToFn = (_) => true;
+const createAssetActions = (getLinkToPage, hasAccessTo, eventsBus) => [{
+        createTitle: () => "Edit",
+        condition: () => hasAccessTo("DeviceAdmin") || (hasAccessTo("ManageTrailers")),
+        createLink: (e) => getLinkToPage("device", { id: e.id })
+    }, {
+        createTitle: () => "Archive",
+        condition: () => hasAccessTo("DeviceAdmin") || (hasAccessTo("ManageTrailers")),
+        handler: (e) => eventsBus.fire("archive", { selected: [e.id], allSelected: false })
+    }, {
+        createTitle: () => "Delete",
+        condition: () => hasAccessTo("DeviceAdmin") || (hasAccessTo("ManageTrailers")),
+        handler: (e) => eventsBus.fire("delete", { selected: [e.id], allSelected: false })
+    }];
+const columnComponents = {
+    "col1": {
+        render: entity => (_jsxs("div", { className: "action-link-column", children: [_jsx("span", { className: "action-link-column__icon action-link-column__icon--map", children: _jsx(IconMap, { size: "large" }) }), _jsx("div", { className: "action-link-column__content-wrapper", children: _jsxs("div", { className: "action-link-column__content", children: [_jsxs("div", { className: "action-link-column__info", children: [_jsx("div", { className: "action-link-column__name", children: entity.col1 }), _jsx("div", { className: "action-link-column__groups", children: "Light Duty, Group A, Group B, Group C, Group D" })] }), _jsx("span", { className: "action-link-column__icon action-link-column__icon--status", children: _jsx(IconCloudOff, { size: "bigger" }) })] }) })] })),
+        renderFeed: (_, entity) => [".....", entity.col1],
+        renderHeader: title => title
+    },
+    "col2": {
+        render: entity => (_jsx("div", { className: "action-column", children: _jsx("a", { className: "action-column__hyperlink", href: `https://example.com/${entity.col2}`, target: "_blank", rel: "noreferrer", children: entity.col2 }) })),
+        renderFeed: (_, entity) => [".....", entity.col2],
+        renderHeader: title => title
+    },
+    "col3": {
+        render: entity => (_jsx("div", { className: "action-column-numeric", children: entity.col3 })),
+        renderFeed: (_, entity) => [".....", entity.col2],
+        renderHeader: title => title
+    },
+    "col4": { render: entity => (_jsx("div", { className: "action-column-pill", children: _jsxs(Pill, { className: "zen-caption", type: PillType.Success, children: [_jsx(IconCheck, { size: "large", className: "zen-caption__pre-content" }), _jsx("span", { className: "zen-caption__content", children: entity.col4 })] }) })), renderFeed: (_, entity) => [".....", entity.col4], renderHeader: title => title },
+    "col5": new CheckboxColumn(new Set(), {}),
+    "actions": new ActionsColumn({
+        title: "Actions",
+        actions: [{
+                icon: IconDotVertical,
+                createTitle: e => `More actions for ${e.col1}`,
+                condition: _ => hasAccessToFn("DeviceAdmin") || hasAccessToFn("ManageTrailers"),
+                actions: createAssetActions(getLinkToPageFn, hasAccessToFn, new SimpleEventHandler())
+            }],
+        headerActions: []
+    })
+};
+export const gridColumns = [
+    {
+        id: "col1",
+        title: "Column 1",
+        name: "col1",
+        meta: { defaultWidth: 100 },
+        wrappers,
+        columnComponent: columnComponents.col1
+    },
+    {
+        id: "col2",
+        title: "Column 2",
+        name: "col2",
+        meta: { defaultWidth: 100, renderPlaceholder: (e) => _jsx(ColumnWaiting, { children: e.col2 }) },
+        group: "Group 1",
+        wrappers,
+        columnComponent: columnComponents.col2
+    },
+    {
+        id: "col3",
+        title: "Column 3",
+        name: "col3",
+        meta: { defaultWidth: 100 },
+        group: "Group 2",
+        wrappers,
+        columnComponent: columnComponents.col3
+    },
+    {
+        id: "col4",
+        title: "Column 4",
+        name: "col4",
+        meta: { defaultWidth: 100 },
+        group: "Group 2",
+        wrappers,
+        columnComponent: columnComponents.col4
+    },
+    {
+        id: "col5",
+        title: "Column 5",
+        name: "col5",
+        meta: { defaultWidth: 100 },
+        group: "Group 3",
+        wrappers,
+        columnComponent: columnComponents.col5,
+        loadingEntitiesColumnComponent: columnComponents.col5
+    },
+    // Action column
+    {
+        id: "actions",
+        title: "",
+        name: "actions",
+        meta: {
+            visibleOnHover: true
+        },
+        columnComponent: columnComponents.actions,
+        loadingEntitiesColumnComponent: columnComponents.actions
+    }
+];

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/ColumnWaiting.d.ts

@@ -0,0 +1,4 @@
+declare const ColumnWaiting: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ColumnWaiting;

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/ColumnWaiting.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Waiting } from "../../../waiting/waiting";
+const ColumnWaiting = ({ children }) => _jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [_jsx("div", { style: { flex: "1 1 auto" }, children: children }), "\u00A0", _jsx("div", { style: { width: 40, height: 30, position: "relative" }, children: _jsx(Waiting, { hideOverlay: true, isLoading: true }) })] });
+export default ColumnWaiting;

package/esm/storybookHelpers/dataGridWithDifferentCellOptions/components/EntitiesListAction.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from "react";
+import { ISelectableRowsListSelections } from "../../../dataGrid/withSelectableRows/withSelectableRows";
+interface IEntitiesListActionProps {
+    selectionQty: number;
+    pageSize: number;
+    activePage: number;
+    totalPage?: number;
+    fullScreen?: boolean;
+    selections: ISelectableRowsListSelections | undefined;
+    columnListButtonRef: RefObject<HTMLButtonElement>;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (key: string) => string;
+    onClearSelection: () => void;
+    onBulkDelete: (selections?: ISelectableRowsListSelections) => void;
+    onBulkArchive: (selections?: ISelectableRowsListSelections) => void;
+    onFullScreenChange: (fullscreen: boolean) => void;
+    onActivePageChange: (pageNumber: number) => void;
+}
+declare function EntitiesListAction({ selectionQty, pageSize, activePage, totalPage, fullScreen, selections, columnListButtonRef, onClearSelection, onBulkDelete, onBulkArchive, onFullScreenChange, onActivePageChange }: IEntitiesListActionProps): import("react/jsx-runtime").JSX.Element;
+export default EntitiesListAction;