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

package/dist/rangeRaw/rangeRaw.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.RangeRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -15,6 +21,174 @@ const rangeField_1 = require("./components/rangeField");
 const rangeHelper_1 = require("./utils/rangeHelper");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const isFormItem_1 = require("../commonHelpers/isFormItem");
+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}");
 const chip_1 = require("../chip/chip");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
@@ -23,151 +197,322 @@ const mobileSheet_1 = require("../mobileSheet/mobileSheet");
 const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 // eslint-disable-next-line complexity
-const RangeRaw = (props) => {
+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 = (0, getAriaAttributes_1.getAriaAttributes)(props);
+  const isFormItemValue = (0, isFormItem_1.isFormItem)(props);
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    value,
+    disabled,
+    name,
+    min,
+    max,
+    onChange,
+    onBlur
+  } = (0, useFormFieldValues_1.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] = (0, react_1.useState)(false);
+  const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
+  const [errorType, setErrorType] = (0, react_1.useState)(undefined);
+  const triggerId = (0, react_1.useId)();
+  const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
+  const triggerRef = (0, react_1.useRef)(null);
+  const contentRef = (0, react_1.useRef)(null);
+  const prevValueRef = (0, react_1.useRef)(value);
+  const minRef = (0, react_1.useRef)(null);
+  const maxRef = (0, react_1.useRef)(null);
+  const {
+    directionState,
+    setContainerNode
+  } = (0, useDirection_1.useDirection)("column");
+  const blurTimeoutRef = (0, react_1.useRef)(null);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  // This is the callback ref
+  const setFieldsContainerRef = (0, react_1.useCallback)(node => {
+    setContainerNode(node);
+  }, [setContainerNode]);
+  const checkError = (0, react_1.useCallback)(val => {
+    const isHasError = (0, rangeHelper_1.checkErrorType)(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(isHasError);
+  }, [allowEqualMinMax, fullBounded, max, min]);
+  const getSelection = (0, react_1.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 = (0, react_1.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 = (0, getAriaAttributes_1.getAriaAttributes)(props);
-    const isFormItemValue = (0, isFormItem_1.isFormItem)(props);
-    const isMobile = (0, useMobile_1.useMobile)();
-    const { value, disabled, name, min, max, onChange, onBlur } = (0, useFormFieldValues_1.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 = (0, react_1.useCallback)(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
     }
-    else {
-        defaultValueInner = defaultValue;
+    defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({
+      min: null,
+      max: null
+    });
+    const isHasError = (0, rangeHelper_1.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 = (0, react_1.useCallback)(() => {
+    var _a;
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
     }
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
-    const [errorType, setErrorType] = (0, react_1.useState)(undefined);
-    const triggerId = (0, react_1.useId)();
-    const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
-    const triggerRef = (0, react_1.useRef)(null);
-    const contentRef = (0, react_1.useRef)(null);
-    const prevValueRef = (0, react_1.useRef)(value);
-    const minRef = (0, react_1.useRef)(null);
-    const maxRef = (0, react_1.useRef)(null);
-    const { directionState, setContainerNode } = (0, useDirection_1.useDirection)("column");
-    const blurTimeoutRef = (0, react_1.useRef)(null);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    // This is the callback ref
-    const setFieldsContainerRef = (0, react_1.useCallback)((node) => {
-        setContainerNode(node);
-    }, [setContainerNode]);
-    const checkError = (0, react_1.useCallback)((val) => {
-        const isHasError = (0, rangeHelper_1.checkErrorType)(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-    }, [allowEqualMinMax, fullBounded, max, min]);
-    const getSelection = (0, react_1.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 = (0, react_1.useCallback)(() => {
-        var _a;
-        setIsOpen(curr => !curr);
-        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [isOpen]);
-    const handleClearClick = (0, react_1.useCallback)(() => {
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({ min: null, max: null });
-        const isHasError = (0, rangeHelper_1.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 = (0, react_1.useCallback)(() => {
-        var _a;
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        setCurrentValue(value);
-        const isHasError = (0, rangeHelper_1.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 = (0, react_1.useCallback)(() => {
-        var _a;
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        const isHasError = (0, rangeHelper_1.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 = (0, react_1.useCallback)(() => {
-        handleClearClick();
-        defaultValue && onChange(defaultValue);
-        setIsOpen(false);
-    }, [defaultValue, handleClearClick, onChange]);
-    const handleChange = (0, react_1.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 = (0, react_1.useCallback)(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
-    const isApplyDisabled = (0, react_1.useCallback)(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
-    const handleBlur = (0, react_1.useCallback)((e) => {
-        if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
-            blurTimeoutRef.current = setTimeout(() => {
-                const isHasError = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-                setErrorType(isHasError);
-            }, 200);
-            return;
-        }
+    setCurrentValue(value);
+    const isHasError = (0, rangeHelper_1.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 = (0, react_1.useCallback)(() => {
+    var _a;
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+    const isHasError = (0, rangeHelper_1.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 = (0, react_1.useCallback)(() => {
+    handleClearClick();
+    defaultValue && onChange(defaultValue);
+    setIsOpen(false);
+  }, [defaultValue, handleClearClick, onChange]);
+  const handleChange = (0, react_1.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 = (0, react_1.useCallback)(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
+  const isApplyDisabled = (0, react_1.useCallback)(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
+  const handleBlur = (0, react_1.useCallback)(e => {
+    if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
+      blurTimeoutRef.current = setTimeout(() => {
         const isHasError = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
         setErrorType(isHasError);
-    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max]);
-    (0, react_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: (0, rangeHelper_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: (0, rangeHelper_1.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 = (0, react_1.useMemo)(() => getSelection(), [getSelection]);
-    const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__fields-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { ref: setFieldsContainerRef, className: (0, classNames_1.classNames)(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { className: "zen-range__error", error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""] })
-                : null] }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
-    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: isOpen, className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", { ref: contentRef, className: "zen-range__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-range__label zen-ellipsis", children: labelLocal }), memoizedContent, (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: buttonType_1.ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-range__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isClearDisabled(), onClick: handleClearClick, children: translate("Clear") })] }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
-    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: translate("Range Filter popup"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: handleTriggerClick, onCloseClick: handleTriggerClick, useTrapFocusWithTrigger: false, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: label }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.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 (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: readOnlyValue });
+      }, 200);
+      return;
+    }
+    const isHasError = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(isHasError);
+  }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max]);
+  (0, react_1.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 (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range", isError ? "zen-range--error" : "", className || ""]), children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.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 }) :
-                (0, jsx_runtime_1.jsx)(filterButton_1.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 ? (0, jsx_runtime_1.jsx)("span", { className: "zen-range__trigger-button-text", children: selection }) : labelLocal })), isMobile ? memoizedMobileView : memoizedDesktopView] });
+  }, [currentValue.min, currentValue.max, value, checkError]);
+  const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
+    className: "zen-range__min-field",
+    label: labelMin || translate("Min"),
+    unit: unit,
+    value: currentValue.min,
+    id: "min",
+    inputRef: minRef,
+    errorString: (0, rangeHelper_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
+    className: "zen-range__max-field",
+    label: labelMax || translate("Max"),
+    unit: unit,
+    value: currentValue.max,
+    id: "max",
+    inputRef: maxRef,
+    errorString: (0, rangeHelper_1.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 = (0, react_1.useMemo)(() => getSelection(), [getSelection]);
+  const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-range__fields-wrapper",
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      ref: setFieldsContainerRef,
+      className: (0, classNames_1.classNames)(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]),
+      children: [memoizedMinRangeField, memoizedMaxRangeField]
+    }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+      className: "zen-range__error",
+      error: [(0, rangeHelper_1.getErrorString)("min", currentValue.min, translate, errorType, min, max) || "", (0, rangeHelper_1.getErrorString)("max", currentValue.max, translate, errorType, min, max) || ""]
+    }) : null]
+  }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
+  const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, {
+    isOpen: isOpen,
+    className: (0, classNames_1.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: (0, jsx_runtime_1.jsxs)("div", {
+      ref: contentRef,
+      className: "zen-range__content",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-range__label zen-ellipsis",
+        children: labelLocal
+      }), memoizedContent, (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-range__footer",
+        children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+          onClick: handleClearClick,
+          disabled: isClearDisabled(),
+          className: "zen-range__clear-button",
+          type: buttonType_1.ButtonType.Tertiary,
+          title: translate("Clear"),
+          "data-validated-button": true,
+          children: translate("Clear")
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-range__button-group",
+          children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+            onClick: handleCancelClick,
+            className: "zen-range__cancel-button",
+            title: translate("Cancel"),
+            "data-validated-button": true,
+            children: translate("Cancel")
+          }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+            onClick: handleApplyClick,
+            type: buttonType_1.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 = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, {
+    children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
+      onClick: handleApplyClick,
+      type: buttonType_1.ButtonType.Primary,
+      disabled: isApplyDisabled(),
+      className: "zen-range__apply-button",
+      title: translate("Apply"),
+      "data-validated-button": true,
+      children: translate("Apply")
+    }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+      onClick: handleCancelClick,
+      className: "zen-range__cancel-button",
+      title: translate("Cancel"),
+      "data-validated-button": true,
+      children: translate("Cancel")
+    }), (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: buttonType_1.ButtonType.Tertiary,
+      disabled: isClearDisabled(),
+      onClick: handleClearClick,
+      children: translate("Clear")
+    })]
+  }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
+  const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
+    label: translate("Range Filter popup"),
+    triggerRef: triggerRef,
+    isOpen: isOpen,
+    onHidePanel: handleTriggerClick,
+    onCloseClick: handleTriggerClick,
+    useTrapFocusWithTrigger: false,
+    children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
+      children: label
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
+      children: memoizedContent
+    }), (0, jsx_runtime_1.jsx)(mobileSheet_1.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 (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, {
+      value: readOnlyValue
+    });
+  }
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-range", isError ? "zen-range--error" : "", className || ""]),
+    children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.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
+    }) : (0, jsx_runtime_1.jsx)(filterButton_1.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 ? (0, jsx_runtime_1.jsx)("span", {
+        className: "zen-range__trigger-button-text",
+        children: selection
+      }) : labelLocal
+    })), isMobile ? memoizedMobileView : memoizedDesktopView]
+  });
 };
 exports.RangeRaw = RangeRaw;
-exports.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}"
-];
+exports.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}"];