@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/rangeRaw/rangeRaw.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useId, useRef, useCallback, useEffect, useMemo } from "react";
 import { Button } from "../button/button";
@@ -20,150 +21,489 @@ import { MobileSheet } from "../mobileSheet/mobileSheet";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 // eslint-disable-next-line complexity
-export const RangeRaw = (props) => {
+injectString("cs", "Min", "Min.");
+injectString("da-DK", "Min", "Min");
+injectString("de", "Min", "Min");
+injectString("en", "Min", "Min");
+injectString("es", "Min", "M\xEDnimo");
+injectString("fi-FI", "Min", "Min");
+injectString("fr", "Min", "Min");
+injectString("fr-FR", "Min", "Min");
+injectString("hu-HU", "Min", "Min");
+injectString("id", "Min", "Min");
+injectString("it", "Min", "Min");
+injectString("ja", "Min", "\u6700\u5C0F");
+injectString("ko-KR", "Min", "\uCD5C\uC18C\uAC12");
+injectString("ms", "Min", "Min");
+injectString("nb-NO", "Min", "Min");
+injectString("nl", "Min", "Min.");
+injectString("pl", "Min", "Min.");
+injectString("pt-BR", "Min", "M\xEDn.");
+injectString("sk-SK", "Min", "Min");
+injectString("sv", "Min", "Min");
+injectString("th", "Min", "\u0E15\u0E48\u0E33\u0E2A\u0E38\u0E14");
+injectString("tr", "Min", "Min.");
+injectString("zh-Hans", "Min", "\u6700\u5C0F");
+injectString("zh-TW", "Min", "\u6700\u5C0F");
+injectString("cs", "Max", "Max.");
+injectString("da-DK", "Max", "Maks");
+injectString("de", "Max", "Max");
+injectString("en", "Max", "Max");
+injectString("es", "Max", "M\xE1ximo");
+injectString("fi-FI", "Max", "Max");
+injectString("fr", "Max", "Max");
+injectString("fr-FR", "Max", "Max");
+injectString("hu-HU", "Max", "Max");
+injectString("id", "Max", "Maks");
+injectString("it", "Max", "Max");
+injectString("ja", "Max", "\u6700\u5927");
+injectString("ko-KR", "Max", "\uCD5C\uB300\uAC12");
+injectString("ms", "Max", "Maks");
+injectString("nb-NO", "Max", "Maks");
+injectString("nl", "Max", "Max.");
+injectString("pl", "Max", "Maks.");
+injectString("pt-BR", "Max", "M\xE1x.");
+injectString("sk-SK", "Max", "Max");
+injectString("sv", "Max", "Max");
+injectString("th", "Max", "\u0E2A\u0E39\u0E07\u0E2A\u0E38\u0E14");
+injectString("tr", "Max", "Maks.");
+injectString("zh-Hans", "Max", "\u6700\u5927");
+injectString("zh-TW", "Max", "\u6700\u5927");
+injectString("cs", "Range Filter popup", "Vyskakovac\xED okno Filtr rozmez\xED");
+injectString("da-DK", "Range Filter popup", "Pop op-vindue med omr\xE5defilter");
+injectString("de", "Range Filter popup", "Bereichsfilter-Popup");
+injectString("en", "Range Filter popup", "Range Filter popup");
+injectString("es", "Range Filter popup", "Ventana emergente filtro de rango");
+injectString("fi-FI", "Range Filter popup", "Rajoitussuodatin-ikkuna");
+injectString("fr", "Range Filter popup", "Fen\xEAtre contextuelle de filtre de plage");
+injectString("fr-FR", "Range Filter popup", "Pop-up Filtre d'intervalle de dates");
+injectString("hu-HU", "Range Filter popup", "Tartom\xE1ny sz\u0171r\u0151 felugr\xF3 ablak");
+injectString("id", "Range Filter popup", "Popup Filter Rentang");
+injectString("it", "Range Filter popup", "Casella popup del filtro Intervallo");
+injectString("ja", "Range Filter popup", "\u7BC4\u56F2\u30D5\u30A3\u30EB\u30BF\u30FC\u30DD\u30C3\u30D7\u30A2\u30C3\u30D7");
+injectString("ko-KR", "Range Filter popup", "\uBC94\uC704 \uD544\uD130 \uD31D\uC5C5");
+injectString("ms", "Range Filter popup", "Tetingkap timbul Penyaring Julat");
+injectString("nb-NO", "Range Filter popup", "Omfangsfilter popup");
+injectString("nl", "Range Filter popup", "Pop-up bereikfilter");
+injectString("pl", "Range Filter popup", "Wyskakuj\u0105ce okienko Filtr zakresu");
+injectString("pt-BR", "Range Filter popup", "Pop-up do filtro de intervalo");
+injectString("sk-SK", "Range Filter popup", "Rozsah Filter popup");
+injectString("sv", "Range Filter popup", "Popupf\xF6nster f\xF6r intervallfilter");
+injectString("th", "Range Filter popup", "\u0E1B\u0E47\u0E2D\u0E1B\u0E2D\u0E31\u0E1E\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C\u0E0A\u0E48\u0E27\u0E07");
+injectString("tr", "Range Filter popup", "Aral\u0131k Filtresi a\xE7\u0131l\u0131r penceresi");
+injectString("zh-Hans", "Range Filter popup", "\u201C\u8303\u56F4\u7B5B\u9009\u6761\u4EF6\u201D\u5F39\u51FA\u7A97\u53E3");
+injectString("zh-TW", "Range Filter popup", "\u7BC4\u570D\u7BE9\u9078\u5F48\u51FA\u8996\u7A97");
+injectString("cs", "Clear", "Vymazat");
+injectString("da-DK", "Clear", "Ryd");
+injectString("de", "Clear", "L\xF6schen");
+injectString("en", "Clear", "Clear");
+injectString("es", "Clear", "Borrar");
+injectString("fi-FI", "Clear", "Tyhjenn\xE4");
+injectString("fr", "Clear", "Effacer");
+injectString("fr-FR", "Clear", "Effacer");
+injectString("hu-HU", "Clear", "T\xF6r\xF6ld.");
+injectString("id", "Clear", "Hapus");
+injectString("it", "Clear", "Cancella");
+injectString("ja", "Clear", "\u30AF\u30EA\u30A2");
+injectString("ko-KR", "Clear", "\uC9C0\uC6B0\uAE30");
+injectString("ms", "Clear", "Kosongkan");
+injectString("nb-NO", "Clear", "T\xF8m");
+injectString("nl", "Clear", "Wissen");
+injectString("pl", "Clear", "Wyczy\u015B\u0107");
+injectString("pt-BR", "Clear", "Limpar");
+injectString("sk-SK", "Clear", "Vyma\u017E");
+injectString("sv", "Clear", "Rensa");
+injectString("th", "Clear", "\u0E25\u0E49\u0E32\u0E07");
+injectString("tr", "Clear", "Temizle");
+injectString("zh-Hans", "Clear", "\u6E05\u9664");
+injectString("zh-TW", "Clear", "\u6E05\u9664");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("cs", "{rangeName} values {values}", "{rangeName} v hodnot\u011B {values}");
+injectString("da-DK", "{rangeName} values {values}", "{rangeName} v\xE6rdier {values}");
+injectString("de", "{rangeName} values {values}", "{rangeName}-Werte {values}");
+injectString("en", "{rangeName} values {values}", "{rangeName} values {values}");
+injectString("es", "{rangeName} values {values}", "{rangeName} con valores {values}");
+injectString("fi-FI", "{rangeName} values {values}", "{rangeName} arvot {values}");
+injectString("fr", "{rangeName} values {values}", "{rangeName} valeurs {values}");
+injectString("fr-FR", "{rangeName} values {values}", "Valeurs de {RangeName} {values}");
+injectString("hu-HU", "{rangeName} values {values}", "{rangeName} \xE9rt\xE9kek {values}");
+injectString("id", "{rangeName} values {values}", "{rangeName} nilai {values}");
+injectString("it", "{rangeName} values {values}", "Valori del {rangeName} da {values}");
+injectString("ja", "{rangeName} values {values}", "{rangeName} \u306E\u5024\u306F {values}");
+injectString("ko-KR", "{rangeName} values {values}", "{rangeName} \uAC12 {values}");
+injectString("ms", "{rangeName} values {values}", "Nilai {rangeName} {values}");
+injectString("nb-NO", "{rangeName} values {values}", "{rangeName} verdier {values}");
+injectString("nl", "{rangeName} values {values}", "{rangeName} waarden {values}");
+injectString("pl", "{rangeName} values {values}", "{rangeName} wynosi {values}");
+injectString("pt-BR", "{rangeName} values {values}", "{rangeName} valores {values}");
+injectString("sk-SK", "{rangeName} values {values}", "{rangeName} hodnoty {values}");
+injectString("sv", "{rangeName} values {values}", "{rangeName}-v\xE4rden {values}");
+injectString("th", "{rangeName} values {values}", "\u0E04\u0E48\u0E32 {rangeName} {values}");
+injectString("tr", "{rangeName} values {values}", "{rangeName} de\u011Ferleri {values}");
+injectString("zh-Hans", "{rangeName} values {values}", "{rangeName} \u503C {values}");
+injectString("zh-TW", "{rangeName} values {values}", "{rangeName} \u7684\u503C\u70BA {values}");
+export const RangeRaw = props => {
+  var _a;
+  const {
+    className,
+    defaultValue,
+    labelMin,
+    labelMax,
+    unit,
+    label,
+    title = "",
+    id,
+    fullWidthTriggerButton,
+    fullBounded,
+    allowEqualMinMax,
+    triggerAriaLabel,
+    isError,
+    isReadOnly,
+    chip,
+    chipIcon,
+    chipId,
+    chipName
+  } = props;
+  const labelLocal = label && !title ? label : title;
+  const accessibilityProps = getAriaAttributes(props);
+  const isFormItemValue = isFormItem(props);
+  const isMobile = useMobile();
+  const {
+    value,
+    disabled,
+    name,
+    min,
+    max,
+    onChange,
+    onBlur
+  } = useFormFieldValues(props.controller, props);
+  let defaultValueInner;
+  if (isFormItemValue) {
+    defaultValueInner = (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue;
+  } else {
+    defaultValueInner = defaultValue;
+  }
+  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 checkError = useCallback(val => {
+    const isHasError = checkErrorType(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(isHasError);
+  }, [allowEqualMinMax, fullBounded, max, min]);
+  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(() => {
     var _a;
-    const { className, defaultValue, labelMin, labelMax, unit, label, title = "", id, fullWidthTriggerButton, fullBounded, allowEqualMinMax, triggerAriaLabel, isError, isReadOnly, chip, chipIcon, chipId, chipName } = props;
-    const labelLocal = (label && !title) ? label : title;
-    const accessibilityProps = getAriaAttributes(props);
-    const isFormItemValue = isFormItem(props);
-    const isMobile = useMobile();
-    const { value, disabled, name, min, max, onChange, onBlur } = useFormFieldValues(props.controller, props);
-    let defaultValueInner;
-    if (isFormItemValue) {
-        defaultValueInner = (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue;
+    setIsOpen(curr => !curr);
+    isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+  }, [isOpen]);
+  const handleClearClick = useCallback(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
     }
-    else {
-        defaultValueInner = defaultValue;
+    defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({
+      min: null,
+      max: null
+    });
+    const isHasError = checkErrorType((defaultValueInner === null || defaultValueInner === void 0 ? void 0 : defaultValueInner.min) || null, (defaultValueInner === null || defaultValueInner === void 0 ? void 0 : defaultValueInner.max) || null, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(isHasError);
+  }, [allowEqualMinMax, defaultValueInner, fullBounded, max, min]);
+  const handleCancelClick = useCallback(() => {
+    var _a;
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
     }
-    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 checkError = useCallback((val) => {
-        const isHasError = checkErrorType(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-    }, [allowEqualMinMax, fullBounded, max, min]);
-    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(() => {
-        var _a;
-        setIsOpen(curr => !curr);
-        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [isOpen]);
-    const handleClearClick = useCallback(() => {
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({ min: null, max: null });
-        const isHasError = checkErrorType((defaultValueInner === null || defaultValueInner === void 0 ? void 0 : defaultValueInner.min) || null, (defaultValueInner === null || defaultValueInner === void 0 ? void 0 : defaultValueInner.max) || null, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-    }, [allowEqualMinMax, defaultValueInner, fullBounded, max, min]);
-    const handleCancelClick = useCallback(() => {
-        var _a;
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        setCurrentValue(value);
-        const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-        setIsOpen(false);
-        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [allowEqualMinMax, fullBounded, max, min, value]);
-    const handleApplyClick = useCallback(() => {
-        var _a;
-        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);
-        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
-    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 = useCallback(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
-    const isApplyDisabled = useCallback(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, 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;
-        }
+    setCurrentValue(value);
+    const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(isHasError);
+    setIsOpen(false);
+    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [allowEqualMinMax, fullBounded, max, min, value]);
+  const handleApplyClick = useCallback(() => {
+    var _a;
+    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);
+    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
+  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 = useCallback(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
+  const isApplyDisabled = useCallback(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, 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);
-    }, [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) {
-            checkError(value);
-            setCurrentValue(value);
-        }
-    }, [currentValue.min, currentValue.max, value, checkError]);
-    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]);
-    const memoizedContent = useMemo(() => _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] }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
-    const memoizedDesktopView = useMemo(() => _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: labelLocal }), memoizedContent, _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") })] })] })] }) }), [className, handleApplyClick, handleCancelClick, handleClearClick, handleTriggerClick, isApplyDisabled, isClearDisabled, isOpen, labelLocal, memoizedContent, translate]);
-    const memoizedMobileFooter = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") }), _jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { type: ButtonType.Tertiary, disabled: isClearDisabled(), onClick: handleClearClick, children: translate("Clear") })] }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
-    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Range Filter popup"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: handleTriggerClick, onCloseClick: handleTriggerClick, useTrapFocusWithTrigger: false, children: [_jsx(MobileSheet.Title, { children: label }), _jsx(MobileSheet.Content, { children: memoizedContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [handleTriggerClick, isOpen, label, memoizedContent, memoizedMobileFooter, translate]);
-    if (isReadOnly) {
-        const readOnlyValue = currentValue.min !== null && currentValue.max !== null ? `${currentValue.min} - ${currentValue.max}` : "";
-        return _jsx(ReviewTextControl, { value: readOnlyValue });
+      }, 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) {
+      checkError(value);
+      setCurrentValue(value);
     }
-    return _jsxs("div", { className: classNames(["zen-range", isError ? "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, Object.assign({ name: name, onBlur: onBlur, 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}", labelLocal).replace("{values}", selection) : "" }, accessibilityProps, { children: selection ? _jsx("span", { className: "zen-range__trigger-button-text", children: selection }) : labelLocal })), isMobile ? memoizedMobileView : memoizedDesktopView] });
+  }, [currentValue.min, currentValue.max, value, checkError]);
+  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]);
+  const memoizedContent = useMemo(() => _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]
+  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
+  const memoizedDesktopView = useMemo(() => _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: labelLocal
+      }), memoizedContent, _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")
+          })]
+        })]
+      })]
+    })
+  }), [className, handleApplyClick, handleCancelClick, handleClearClick, handleTriggerClick, isApplyDisabled, isClearDisabled, isOpen, labelLocal, memoizedContent, translate]);
+  const memoizedMobileFooter = useMemo(() => _jsxs(FooterButtons, {
+    children: [_jsx(Button, {
+      onClick: handleApplyClick,
+      type: ButtonType.Primary,
+      disabled: isApplyDisabled(),
+      className: "zen-range__apply-button",
+      title: translate("Apply"),
+      "data-validated-button": true,
+      children: translate("Apply")
+    }), _jsx(Button, {
+      onClick: handleCancelClick,
+      className: "zen-range__cancel-button",
+      title: translate("Cancel"),
+      "data-validated-button": true,
+      children: translate("Cancel")
+    }), _jsx(Button, {
+      type: ButtonType.Tertiary,
+      disabled: isClearDisabled(),
+      onClick: handleClearClick,
+      children: translate("Clear")
+    })]
+  }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
+  const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
+    label: translate("Range Filter popup"),
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    onHidePanel: handleTriggerClick,
+    onCloseClick: handleTriggerClick,
+    useTrapFocusWithTrigger: false,
+    children: [_jsx(MobileSheet.Title, {
+      children: label
+    }), _jsx(MobileSheet.Content, {
+      children: memoizedContent
+    }), _jsx(MobileSheet.Footer, {
+      children: memoizedMobileFooter
+    })]
+  }), [handleTriggerClick, isOpen, label, memoizedContent, memoizedMobileFooter, translate]);
+  if (isReadOnly) {
+    const readOnlyValue = currentValue.min !== null && currentValue.max !== null ? `${currentValue.min} - ${currentValue.max}` : "";
+    return _jsx(ReviewTextControl, {
+      value: readOnlyValue
+    });
+  }
+  return _jsxs("div", {
+    className: classNames(["zen-range", isError ? "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, Object.assign({
+      name: name,
+      onBlur: onBlur,
+      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}", labelLocal).replace("{values}", selection) : ""
+    }, accessibilityProps, {
+      children: selection ? _jsx("span", {
+        className: "zen-range__trigger-button-text",
+        children: selection
+      }) : labelLocal
+    })), isMobile ? memoizedMobileView : memoizedDesktopView]
+  });
 };
-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}"
-];
+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}"];