@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/radio/radio.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "./radio.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IRadio extends IZenComponentProps {
+    /**
+    * @deprecated
+    * @param id - will be removed in the next major release
+    */
+    id?: string;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    title?: string;
+    disabled?: boolean;
+    reverse?: boolean;
+    fullWidth?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    tabIndex?: number;
+    wrappedInLabel?: boolean;
+}
+export declare const Radio: React.ForwardRefExoticComponent<IRadio & React.RefAttributes<HTMLInputElement>>;

package/esm/radio/radio.js

@@ -0,0 +1,23 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Radio = React.forwardRef(function Radio(_a, ref) {
+    var { fullWidth, id, reverse, checked, title, className = "", name, value, children, wrappedInLabel, disabled } = _a, rest = __rest(_a, ["fullWidth", "id", "reverse", "checked", "title", "className", "name", "value", "children", "wrappedInLabel", "disabled"]);
+    const generatedId = React.useId();
+    const intId = generatedId;
+    const driveClassess = useDriveClassName("zen-radio");
+    return _jsx("div", { className: classNames(["zen-radio", className, disabled ? "zen-radio--disabled" : ""]), children: _jsxs("div", { className: classNames(["zen-radio__wrapper", driveClassess || "", reverse ? "zen-radio__wrapper--reversed" : ""]), children: [wrappedInLabel ? null : _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)), _jsxs("label", { className: classNames(["zen-radio__label", fullWidth ? "zen-radio__label--full-width" : "", wrappedInLabel ? "zen-radio__label--input-wrapper" : ""]), htmlFor: intId, title: title, "aria-label": title, children: [wrappedInLabel ? _jsx("input", Object.assign({ type: "radio", className: "zen-radio__input", id: intId, name: name, value: value, checked: checked, disabled: disabled || false, ref: ref }, rest)) : null, children ? _jsx("div", { className: "zen-radio__label-text", children: children }) : null] })] }) });
+});

package/esm/radioGroup/radioGroup.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "./radioGroup.less";
+import { IRadio } from "../radio/radio";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IRadioGroup extends IZenComponentProps {
+    id?: string;
+    items: IRadio[];
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    direction?: "vertical" | "horizontal";
+    type?: "static" | "interactive";
+    reverse?: boolean;
+    fullWidth?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    selectItemOnFocus?: boolean;
+    wrappedInLabel?: boolean;
+}
+export declare const RadioGroup: React.FC<IRadioGroup>;

package/esm/radioGroup/radioGroup.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import React, { useCallback, useRef, useState } from "react";
+import { Radio } from "../radio/radio";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useEffect } from "react";
+export const RadioGroup = ({ fullWidth, reverse, id, items, className, name, value, disabled, type = "static", direction = "horizontal", onChange, selectItemOnFocus = true, wrappedInLabel }) => {
+    const generatedId = React.useId();
+    const intId = id || generatedId;
+    const [focusedIndex, setFocusedIndex] = useState(items.findIndex(el => el.value === value));
+    const focusElementRef = useRef(null);
+    const classes = "zen-radio-group zen-radio-group--" + direction + (disabled ? " zen-radio-group--disabled" : "");
+    const findNextEnabledIndex = useCallback((currentIndex) => {
+        var _a;
+        let newIndex = (currentIndex + 1) % items.length;
+        while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            newIndex = (newIndex + 1) % items.length;
+        }
+        return newIndex;
+    }, [items]);
+    const findPrevEnabledIndex = useCallback((currentIndex) => {
+        var _a;
+        let newIndex = (currentIndex - 1 + items.length) % items.length;
+        while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            newIndex = (newIndex - 1 + items.length) % items.length;
+        }
+        return newIndex;
+    }, [items]);
+    const handleKeyDown = (e) => {
+        var _a;
+        if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+            e.preventDefault();
+            const newIndex = findNextEnabledIndex(focusedIndex);
+            setFocusedIndex(newIndex);
+        }
+        else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            const newIndex = findPrevEnabledIndex(focusedIndex);
+            setFocusedIndex(newIndex);
+        }
+        else if (e.key === "Enter") {
+            (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onChange && onChange(e);
+        }
+    };
+    useEffect(() => {
+        var _a;
+        (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focusedIndex]);
+    const extraProps = selectItemOnFocus ? {} : ({ role: "radiogroup", tabIndex: 0 });
+    return _jsx("div", { id: intId, className: classNames([classes, className || ""]), children: _jsx("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => _createElement(Radio, Object.assign({}, item, { className: classNames(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChange, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : null) }), item.children)) })) });
+};

package/esm/range/range.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import "./range.less";
+import { IChipsParent } from "../chip/chip";
+export interface IRangeValues {
+    min: number | null;
+    max: number | null;
+}
+export type TErrorType = "range" | "bound" | "value";
+export interface IRange extends IChipsParent {
+    className?: string;
+    onChange: (values: IRangeValues) => void;
+    value: IRangeValues;
+    defaultValue?: IRangeValues;
+    unit?: string;
+    labelMin?: string;
+    labelMax?: string;
+    disabled?: boolean;
+    label: string;
+    min?: number;
+    max?: number;
+    id?: string;
+    fullWidthTriggerButton?: boolean;
+    fullBounded?: boolean;
+    allowEqualMinMax?: boolean;
+    error?: string;
+    triggerAriaLabel?: string;
+}
+export declare const Range: React.FC<IRange>;
+export declare const TRANSLATIONS: string[];

package/esm/range/range.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useCallback, useId, useRef, useState } from "react";
+import { FilterButton } from "../filterButton/filterButton";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { Button } from "../button/button";
+import { ButtonType } from "../button/buttonType";
+import { RangeField } from "./rangeField";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { checkErrorType, getErrorString } from "./rangeHelper";
+import { FormFieldError } from "../formFieldError/formFieldError";
+import { useDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
+import { Chip } from "../chip/chip";
+import { useChipStatus } from "../chip/chipStatusProvider";
+export const Range = ({ className, onChange, value, labelMin, labelMax, unit, defaultValue, disabled, label, min, max, id, fullWidthTriggerButton, fullBounded, allowEqualMinMax, error, triggerAriaLabel, chip, chipIcon, chipId, chipName }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentValue, setCurrentValue] = useState(value);
+    const [errorType, setErrorType] = useState(undefined);
+    const triggerId = useId();
+    const chipStatus = useChipStatus();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const prevValueRef = useRef(value);
+    const minRef = useRef(null);
+    const maxRef = useRef(null);
+    const { directionState, setContainerNode } = useDirection("column");
+    const blurTimeoutRef = useRef(null);
+    const { translate } = useLanguage();
+    // This is the callback ref
+    const setFieldsContainerRef = useCallback((node) => {
+        setContainerNode(node);
+    }, [setContainerNode]);
+    const getSelection = useCallback(() => {
+        let selection = value.min !== null && value.max !== null ? `${value.min} - ${value.max}` : "";
+        if (!selection && value.min !== null) {
+            selection = `${labelMin || translate("Min")} = ${value.min}`;
+        }
+        if (!selection && value.max !== null) {
+            selection = `${labelMax || translate("Max")} = ${value.max}`;
+        }
+        return selection;
+    }, [labelMax, labelMin, translate, value.max, value.min]);
+    const handleTriggerClick = useCallback(() => {
+        setIsOpen(curr => !curr);
+    }, []);
+    const handleClearClick = useCallback(() => {
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        defaultValue ? setCurrentValue(defaultValue) : setCurrentValue({ min: null, max: null });
+        const isHasError = checkErrorType((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.min) || null, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.max) || null, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+    }, [allowEqualMinMax, defaultValue, fullBounded, max, min]);
+    const handleCancelClick = () => {
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        setCurrentValue(value);
+        const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+        setIsOpen(false);
+    };
+    const handleApplyClick = () => {
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+        if (isHasError) {
+            return;
+        }
+        onChange(currentValue);
+        setIsOpen(false);
+    };
+    const handleClearChipClick = useCallback(() => {
+        handleClearClick();
+        defaultValue && onChange(defaultValue);
+        setIsOpen(false);
+    }, [defaultValue, handleClearClick, onChange]);
+    const handleChange = useCallback((targetId, newValue) => {
+        const newValues = { min: targetId === "min" ? newValue : currentValue.min, max: targetId === "max" ? newValue : currentValue.max };
+        setCurrentValue(newValues);
+    }, [currentValue.min, currentValue.max]);
+    const isClearDisabled = () => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null;
+    const isApplyDisabled = () => currentValue.min === value.min && currentValue.max === value.max;
+    const handleBlur = useCallback((e) => {
+        if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
+            blurTimeoutRef.current = setTimeout(() => {
+                const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+                setErrorType(isHasError);
+            }, 200);
+            return;
+        }
+        const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max]);
+    useEffect(() => {
+        if (value.min === prevValueRef.current.min && value.max === prevValueRef.current.max) {
+            return;
+        }
+        prevValueRef.current = value;
+        if (value.min !== currentValue.min || value.max !== currentValue.max) {
+            setCurrentValue(value);
+        }
+    }, [currentValue.min, currentValue.max, value]);
+    const memoizedMinRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: getErrorString("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: true, direction: directionState }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState]);
+    const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: getErrorString("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: false, direction: directionState }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState]);
+    const selection = useMemo(() => getSelection(), [getSelection]);
+    return _jsxs("div", { className: classNames(["zen-range", error ? "zen-range--error" : "", className || ""]), children: [chip ? _jsx(Chip, { id: chipId, status: isClearDisabled() ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: handleTriggerClick, onClose: isClearDisabled() ? undefined : handleClearChipClick, triggerRef: triggerRef, icon: chipIcon, children: selection ? selection : chipName }) :
+                _jsx(FilterButton, { ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", label).replace("{values}", selection) : "", children: selection ? _jsx("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), _jsx(FormFieldError, { error: error }), _jsx(ControlledPopup, { isOpen: isOpen, className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: _jsxs("div", { ref: contentRef, className: "zen-range__content", children: [_jsx("div", { className: "zen-range__label zen-ellipsis", children: label }), _jsxs("div", { className: "zen-range__fields-wrapper", children: [_jsxs("div", { ref: setFieldsContainerRef, className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, { className: "zen-range__error", error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""] })
+                                    : null] }), _jsxs("div", { className: "zen-range__footer", children: [_jsx(Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), _jsxs("div", { className: "zen-range__button-group", children: [_jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) })] });
+};
+export const TRANSLATIONS = [
+    "Min",
+    "Max",
+    "Range Filter popup",
+    "Clear",
+    "Cancel",
+    "Apply",
+    "Must be less than the max",
+    "Must be more than the min",
+    "Must be more than {value}",
+    "Must be less than {value}",
+    "Must be in range {min} - {max}",
+    "The min value must be set",
+    "The max value must be set",
+    "{rangeName} values {values}"
+];

package/esm/range/rangeField.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "./rangeField.less";
+import { TDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
+export interface IRangeField {
+    onChange: (id: string, value: number | null) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    className?: string;
+    label: string;
+    unit?: string;
+    disabled?: boolean;
+    value: number | null;
+    min?: number;
+    max?: number;
+    id: string;
+    inputRef: React.RefObject<HTMLInputElement>;
+    errorString?: string;
+    direction?: TDirection;
+    isMinField: boolean;
+}
+export declare const RangeField: React.FC<IRangeField>;

package/esm/range/rangeField.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { TextInput } from "../textInput/textInput";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { IconException } from "../icons/iconException";
+export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
+    const inputId = useId();
+    const labelId = useId();
+    const unitId = useId();
+    const handleChange = (e) => {
+        const newValue = e.target.value ? Number(e.target.value) : null;
+        onChange(id, newValue);
+    };
+    return _jsxs("div", { className: classNames(["zen-range-field", direction === "row" ? "zen-range-field--row" : "zen-range-field--column",
+            isMinField ? "zen-range-field--min" : "zen-range-field--max", className || ""]), children: [_jsxs("div", { className: "zen-range-field__content", children: [_jsx("label", { className: "zen-range-field__label zen-ellipsis", id: labelId, htmlFor: inputId, children: label }), _jsx("div", { className: "zen-range-field__input-container", children: _jsx(TextInput, { inputClassName: classNames(["zen-range-field__input", errorString ? "zen-text-input--error" : ""]), value: value !== null ? value.toString() : "", placeholder: "", onChange: handleChange, onBlur: onBlur, disabled: disabled, type: "number", ref: inputRef, id: inputId, error: "", ariaLabelledby: `${labelId} ${unit ? unitId : ""}`, min: min, max: max }) }), unit ? _jsx("div", { id: unitId, className: "zen-range-field__sense zen-ellipsis", children: _jsx("div", { className: "zen-range-field__sense-text zen-ellipsis", children: unit }) }) : null] }), errorString && direction !== "row" ? _jsxs("div", { className: "zen-range-field__error", children: [_jsx(IconException, { className: "zen-range-field__error-icon", size: "bigger" }), _jsx("div", { className: "zen-range-field__error-text", children: errorString })] }) : null] });
+};

package/esm/range/rangeHelper.d.ts

@@ -0,0 +1,4 @@
+import { TErrorType } from "./range";
+export declare const getRangeError: (translateFn: (s: string) => string, currentVal: number | null, defMin?: number, defMax?: number) => string | undefined;
+export declare const getErrorString: (currentId: "min" | "max", currentVal: number | null, translateFn: (s: string) => string, errorType?: TErrorType, defMin?: number, defMax?: number) => string | undefined;
+export declare const checkErrorType: (minVal: number | null, maxVal: number | null, isFullBounded?: boolean, allowEqualMinMax?: boolean, defMin?: number, defMax?: number) => "range" | "value" | "bound" | undefined;

package/esm/range/rangeHelper.js

@@ -0,0 +1,44 @@
+export const getRangeError = (translateFn, currentVal, defMin, defMax) => {
+    if (defMin !== undefined && defMax !== undefined && currentVal !== null && (currentVal < defMin || currentVal > defMax)) {
+        return translateFn("Must be in range {min} - {max}").replace("{min}", defMin.toString()).replace("{max}", defMax.toString());
+    }
+    if (defMin !== undefined && currentVal !== null && currentVal < defMin) {
+        return translateFn("Must be more than {value}").replace("{value}", defMin.toString());
+    }
+    if (defMax !== undefined && currentVal !== null && currentVal > defMax) {
+        return translateFn("Must be less than {value}").replace("{value}", defMax.toString());
+    }
+    return undefined;
+};
+export const getErrorString = (currentId, currentVal, translateFn, errorType, defMin, defMax) => {
+    if (errorType === "bound") {
+        return currentVal === null ? translateFn(currentId === "min" ? "The min value must be set" : "The max value must be set") : undefined;
+    }
+    if (errorType === "range") {
+        return getRangeError(translateFn, currentVal, defMin, defMax);
+    }
+    if (errorType === "value") {
+        return currentId === "min" ? translateFn("Must be less than the max") : translateFn("Must be more than the min");
+    }
+    return undefined;
+};
+// eslint-disable-next-line complexity
+export const checkErrorType = (minVal, maxVal, isFullBounded = false, allowEqualMinMax = false, defMin, defMax) => {
+    if (isFullBounded && (minVal === null || maxVal === null)) {
+        return "bound";
+    }
+    if (minVal !== null && maxVal !== null && !(allowEqualMinMax ? maxVal >= minVal : maxVal > minVal)) {
+        return "value";
+    }
+    if (defMin !== undefined && defMax !== undefined && minVal !== null && (minVal < defMin || minVal > defMax)
+        || defMin !== undefined && minVal !== null && minVal < defMin
+        || defMax !== undefined && minVal !== null && minVal > defMax) {
+        return "range";
+    }
+    if (defMin !== undefined && defMax !== undefined && maxVal !== null && (maxVal < defMin || maxVal > defMax)
+        || defMin !== undefined && maxVal !== null && maxVal < defMin
+        || defMax !== undefined && maxVal !== null && maxVal > defMax) {
+        return "range";
+    }
+    return undefined;
+};

package/esm/react-chartjs/chart.d.ts

@@ -0,0 +1,2 @@
+import type { BaseChartComponent } from "./types";
+export declare const Chart: BaseChartComponent;

package/esm/react-chartjs/chart.js

@@ -0,0 +1,79 @@
+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 { useEffect, useRef, forwardRef, useCallback } from "react";
+import { Chart as ChartJS } from "chart.js/auto";
+import { reforwardRef, cloneData, setOptions, setLabels, setDatasets } from "./utils";
+const ChartComponent = function (props, ref) {
+    const _a = props, { height = 150, width = 300, redraw = false, datasetIdKey, type, data, options, plugins = [], fallbackContent, updateMode } = _a, canvasProps = __rest(_a, ["height", "width", "redraw", "datasetIdKey", "type", "data", "options", "plugins", "fallbackContent", "updateMode"]);
+    const canvasRef = useRef(null);
+    const chartRef = useRef();
+    const renderChart = useCallback(() => {
+        if (!canvasRef.current) {
+            return;
+        }
+        chartRef.current = new ChartJS(canvasRef.current, {
+            type,
+            data: cloneData(data, datasetIdKey),
+            options: options && Object.assign({}, options),
+            plugins
+        });
+        reforwardRef(ref, chartRef.current);
+    }, [data, datasetIdKey, options, plugins, ref, type]);
+    const destroyChart = useCallback(() => {
+        reforwardRef(ref, null);
+        if (chartRef.current) {
+            chartRef.current.destroy();
+            chartRef.current = null;
+        }
+    }, [ref]);
+    useEffect(() => {
+        if (!redraw && chartRef.current && options) {
+            setOptions(chartRef.current, options);
+        }
+    }, [redraw, options]);
+    useEffect(() => {
+        if (!redraw && chartRef.current) {
+            setLabels(chartRef.current.config.data, data.labels);
+        }
+    }, [redraw, data.labels]);
+    useEffect(() => {
+        if (!redraw && chartRef.current) {
+            setDatasets(chartRef.current.config.data, data.datasets, datasetIdKey);
+        }
+    }, [redraw, data.datasets, datasetIdKey]);
+    useEffect(() => {
+        if (!chartRef.current) {
+            return;
+        }
+        if (redraw) {
+            destroyChart();
+            setTimeout(renderChart);
+        }
+        else {
+            chartRef.current.update(updateMode);
+        }
+    }, [redraw, options, data.labels, data.datasets, updateMode, destroyChart, renderChart]);
+    useEffect(() => {
+        if (!chartRef.current) {
+            return;
+        }
+        destroyChart();
+        setTimeout(renderChart);
+    }, [destroyChart, renderChart, type]);
+    useEffect(() => {
+        renderChart();
+        return () => destroyChart();
+    }, [destroyChart, renderChart]);
+    return (_jsx("div", { style: { position: "relative", width: "100%", height: "100%" }, children: _jsx("canvas", Object.assign({ ref: canvasRef, role: "img", height: height, width: width }, canvasProps, { children: fallbackContent })) }));
+};
+export const Chart = forwardRef(ChartComponent);

package/esm/react-chartjs/dateAdapter.d.ts

@@ -0,0 +1,30 @@
+export declare const FORMATS: {
+    datetime: string;
+    millisecond: string;
+    second: string;
+    minute: string;
+    hour: string;
+    day: string;
+    week: string;
+    month: string;
+    quarter: string;
+    year: string;
+};
+export declare const dateFormats: () => {
+    datetime: string;
+    millisecond: string;
+    second: string;
+    minute: string;
+    hour: string;
+    day: string;
+    week: string;
+    month: string;
+    quarter: string;
+    year: string;
+};
+export declare const parseDate: (value: number | null) => number | null;
+export declare const formatDate: (time: number | Date, fmt: string) => string;
+export declare const getDiff: () => number;
+export declare const getStartOf: (time: any) => any;
+export declare const getEndOf: (time: any) => any;
+export declare const addDate: (time: number | Date, amount: number, unit: string) => number;

package/esm/react-chartjs/dateAdapter.js

@@ -0,0 +1,45 @@
+import { _adapters } from "chart.js/auto";
+import { addDays, addMonths, addMilliseconds, addSeconds, addMinutes, addHours, addWeeks, addQuarters, addYears, format } from "./dateFns/dateFns";
+export const FORMATS = {
+    datetime: "MMM d, yyyy, h:mm:ss aaaa",
+    millisecond: "h:mm:ss.SSS aaaa",
+    second: "h:mm:ss aaaa",
+    minute: "h:mm aaaa",
+    hour: "ha",
+    day: "MMM d",
+    week: "PP",
+    month: "MMM yyyy",
+    quarter: "qqq - yyyy",
+    year: "yyyy"
+};
+export const dateFormats = () => FORMATS;
+export const parseDate = (value) => value;
+export const formatDate = (time, fmt) => format(time, fmt);
+export const getDiff = () => 0;
+export const getStartOf = (time) => time;
+export const getEndOf = (time) => time;
+export const addDate = (time, amount, unit) => {
+    switch (unit) {
+        case "millisecond": return addMilliseconds(time, amount).valueOf();
+        case "second": return addSeconds(time, amount).valueOf();
+        case "minute": return addMinutes(time, amount).valueOf();
+        case "hour": return addHours(time, amount).valueOf();
+        case "day": return addDays(time, amount).valueOf();
+        case "week": return addWeeks(time, amount).valueOf();
+        case "month": return addMonths(time, amount).valueOf();
+        case "quarter": return addQuarters(time, amount).valueOf();
+        case "year": return addYears(time, amount).valueOf();
+        default: return new Date(time).valueOf();
+    }
+};
+// eslint-disable-next-line no-underscore-dangle
+_adapters._date.override({
+    formats: dateFormats,
+    parse: parseDate,
+    //todo third arg cab be this.options
+    format: formatDate,
+    add: addDate,
+    diff: getDiff,
+    startOf: getStartOf,
+    endOf: getEndOf
+});

package/esm/react-chartjs/dateFns/dateFns.d.ts

@@ -0,0 +1,10 @@
+export declare function addDays(date: Date | number, amount: number): Date;
+export declare function addMonths(date: Date | number, amount: number): Date;
+export declare function addMilliseconds(date: Date | number, amount: number): Date;
+export declare function addSeconds(date: Date | number, amount: number): Date;
+export declare function addMinutes(date: Date | number, amount: number): Date;
+export declare function addHours(date: Date | number, amount: number): Date;
+export declare function addWeeks(date: Date | number, amount: number): Date;
+export declare function addQuarters(date: Date | number, amount: number): Date;
+export declare function addYears(date: Date | number, amount: number): Date;
+export declare function format(date: Date | number, formatString: string): string;