@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/dist/filtersBar/components/resetComponentButton.js

@@ -1,13 +1,53 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.ResetButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("../../button/button");
 const buttonType_1 = require("../../button/buttonType");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const ResetButton = ({ isDefaultState, onClick }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, disabled: isDefaultState, onClick: onClick, children: translate("Reset") });
+injectString("cs", "Reset", "Obnovit");
+injectString("da-DK", "Reset", "Nulstil");
+injectString("de", "Reset", "Zur\xFCcksetzen");
+injectString("en", "Reset", "Reset");
+injectString("es", "Reset", "Restaurar");
+injectString("fi-FI", "Reset", "Palauta");
+injectString("fr", "Reset", "R\xE9initialiser");
+injectString("fr-FR", "Reset", "R\xE9initialiser");
+injectString("hu-HU", "Reset", "\xC1ll\xEDtsd vissza.");
+injectString("id", "Reset", "Atur Ulang");
+injectString("it", "Reset", "Ripristinare");
+injectString("ja", "Reset", "\u30EA\u30BB\u30C3\u30C8");
+injectString("ko-KR", "Reset", "\uC7AC\uC124\uC815");
+injectString("ms", "Reset", "Tetap Semula");
+injectString("nb-NO", "Reset", "Tilbakestill");
+injectString("nl", "Reset", "Herstellen");
+injectString("pl", "Reset", "Resetuj");
+injectString("pt-BR", "Reset", "Redefinir");
+injectString("sk-SK", "Reset", "Obnov");
+injectString("sv", "Reset", "\xC5terst\xE4ll");
+injectString("th", "Reset", "\u0E23\u0E35\u0E40\u0E0B\u0E47\u0E15");
+injectString("tr", "Reset", "S\u0131f\u0131rla");
+injectString("zh-Hans", "Reset", "\u91CD\u7F6E");
+injectString("zh-TW", "Reset", "\u91CD\u8A2D");
+const ResetButton = ({
+  isDefaultState,
+  onClick
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsx)(button_1.Button, {
+    type: buttonType_1.ButtonType.Tertiary,
+    disabled: isDefaultState,
+    onClick: onClick,
+    children: translate("Reset")
+  });
 };
 exports.ResetButton = ResetButton;
-exports.TRANSLATIONS = ["Reset"];
+exports.TRANSLATIONS = ["Reset"];

package/dist/filtersBar/filtersBarActions/filtersBarActions.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.FiltersBarActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
@@ -8,19 +14,124 @@ const buttonType_1 = require("../../button/buttonType");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const iconSettings6_1 = require("../../icons/iconSettings6");
-const FiltersBarActions = ({ className, selectedQuantity, selectedQuantityToDisplay, hideAllFiltersButton, onShowAllFilters, allFiltersRef, onClearFilters, onApplyButtonClick, isApplyButtonShown }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-filters-toolbar__actions", className !== null && className !== void 0 ? className : ""]), children: [hideAllFiltersButton
-                ? null
-                : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: buttonType_1.ButtonType.TertiaryBlack, ref: allFiltersRef, className: (0, classNames_1.classNames)(["zen-filters-toolbar__all-filters", className !== null && className !== void 0 ? className : ""]), onClick: onShowAllFilters, icon: iconSettings6_1.IconSettings6, iconPosition: textIconButton_1.ButtonIconPosition.Start, children: (0, jsx_runtime_1.jsxs)("span", { className: "zen-filters-toolbar__action-label", children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? (0, jsx_runtime_1.jsx)("span", { className: "zen-filters-toolbar__action-quantity", children: selectedQuantityToDisplay }) : null] }) }), selectedQuantity && selectedQuantity > 0
-                ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.TertiaryBlack, onClick: onClearFilters, className: (0, classNames_1.classNames)(["zen-filters-toolbar__all-filters", "zen-filters-toolbar__clear", className !== null && className !== void 0 ? className : ""]), children: (0, jsx_runtime_1.jsx)("span", { className: "zen-filters-toolbar__action-label", children: translate("Clear") }) }))
-                : null, onApplyButtonClick && isApplyButtonShown
-                ? ((0, jsx_runtime_1.jsx)(button_1.Button, { title: translate("Apply"), className: (0, classNames_1.classNames)(["zen-filters-toolbar__apply", className !== null && className !== void 0 ? className : ""]), type: buttonType_1.ButtonType.Primary, onClick: onApplyButtonClick, children: translate("Apply") }))
-                : null] });
+injectString("cs", "Filters", "Filtry");
+injectString("da-DK", "Filters", "Filtre");
+injectString("de", "Filters", "Filter");
+injectString("en", "Filters", "Filters");
+injectString("es", "Filters", "Filtros");
+injectString("fi-FI", "Filters", "Suodattimet");
+injectString("fr", "Filters", "Filtres");
+injectString("fr-FR", "Filters", "Filtres");
+injectString("hu-HU", "Filters", "Sz\u0171r\u0151k");
+injectString("id", "Filters", "Filter");
+injectString("it", "Filters", "Filtri");
+injectString("ja", "Filters", "\u30D5\u30A3\u30EB\u30BF\u30FC");
+injectString("ko-KR", "Filters", "\uD544\uD130");
+injectString("ms", "Filters", "Penyaring");
+injectString("nb-NO", "Filters", "Filtre");
+injectString("nl", "Filters", "Filters");
+injectString("pl", "Filters", "Filtry");
+injectString("pt-BR", "Filters", "Filtros");
+injectString("sk-SK", "Filters", "Filtre");
+injectString("sv", "Filters", "Filter");
+injectString("th", "Filters", "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07");
+injectString("tr", "Filters", "Filtreler");
+injectString("zh-Hans", "Filters", "\u7B5B\u9009\u5668");
+injectString("zh-TW", "Filters", "\u7BE9\u9078\u689D\u4EF6");
+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", "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");
+const FiltersBarActions = ({
+  className,
+  selectedQuantity,
+  selectedQuantityToDisplay,
+  hideAllFiltersButton,
+  onShowAllFilters,
+  allFiltersRef,
+  onClearFilters,
+  onApplyButtonClick,
+  isApplyButtonShown
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: (0, classNames_1.classNames)(["zen-filters-toolbar__actions", className !== null && className !== void 0 ? className : ""]),
+    children: [hideAllFiltersButton ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+      type: buttonType_1.ButtonType.TertiaryBlack,
+      ref: allFiltersRef,
+      className: (0, classNames_1.classNames)(["zen-filters-toolbar__all-filters", className !== null && className !== void 0 ? className : ""]),
+      onClick: onShowAllFilters,
+      icon: iconSettings6_1.IconSettings6,
+      iconPosition: textIconButton_1.ButtonIconPosition.Start,
+      children: (0, jsx_runtime_1.jsxs)("span", {
+        className: "zen-filters-toolbar__action-label",
+        children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? (0, jsx_runtime_1.jsx)("span", {
+          className: "zen-filters-toolbar__action-quantity",
+          children: selectedQuantityToDisplay
+        }) : null]
+      })
+    }), selectedQuantity && selectedQuantity > 0 ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      type: buttonType_1.ButtonType.TertiaryBlack,
+      onClick: onClearFilters,
+      className: (0, classNames_1.classNames)(["zen-filters-toolbar__all-filters", "zen-filters-toolbar__clear", className !== null && className !== void 0 ? className : ""]),
+      children: (0, jsx_runtime_1.jsx)("span", {
+        className: "zen-filters-toolbar__action-label",
+        children: translate("Clear")
+      })
+    }) : null, onApplyButtonClick && isApplyButtonShown ? (0, jsx_runtime_1.jsx)(button_1.Button, {
+      title: translate("Apply"),
+      className: (0, classNames_1.classNames)(["zen-filters-toolbar__apply", className !== null && className !== void 0 ? className : ""]),
+      type: buttonType_1.ButtonType.Primary,
+      onClick: onApplyButtonClick,
+      children: translate("Apply")
+    }) : null]
+  });
 };
 exports.FiltersBarActions = FiltersBarActions;
-exports.TRANSLATIONS = [
-    "Filters",
-    "Clear",
-    "Search"
-];
+exports.TRANSLATIONS = ["Filters", "Clear", "Search"];

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRadioGroup/filtersBarSidePanelRadioGroup.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FiltersBarSidePanelRadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const radioGroup_1 = require("../../../../radioGroup/radioGroup");
 const useUniqueId_1 = require("../../../../commonHelpers/useUniqueId");
+const radioGroupRaw_1 = require("../../../../radioGroupRaw/radioGroupRaw");
 const FiltersBarSidePanelRadioGroup = (props) => {
     const name = (0, useUniqueId_1.useUniqueId)();
-    return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroup_1.RadioGroup, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
+    return (0, jsx_runtime_1.jsx)("div", { className: "zen-side-panel-radio-group", children: (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw, Object.assign({}, props, { className: "zen-side-panel-radio-group__item", fullWidth: true, name: name })) });
 };
 exports.FiltersBarSidePanelRadioGroup = FiltersBarSidePanelRadioGroup;

package/dist/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -1,8 +1,62 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.FiltersBarSidePanelRange = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+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");
 const classNames_1 = require("../../../../commonHelpers/classNames/classNames");
 const rangeHelper_1 = require("../../../../rangeRaw/utils/rangeHelper");
 const useLanguage_1 = require("../../../../utils/localization/useLanguage");
@@ -10,52 +64,104 @@ const rangeField_1 = require("../../../../rangeRaw/components/rangeField");
 const useDirection_1 = require("../../hooks/useDirection");
 const useMobile_1 = require("../../../../commonHelpers/hooks/useMobile");
 const formFieldError_1 = require("../../../../formFieldError/formFieldError");
-const FiltersBarSidePanelRange = ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled }) => {
-    const generatedId = (0, react_1.useId)();
-    const intId = id || generatedId;
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
-    const [errorType, setErrorType] = (0, react_1.useState)(undefined);
-    const prevValueRef = (0, react_1.useRef)(value);
-    const minRef = (0, react_1.useRef)(null);
-    const maxRef = (0, react_1.useRef)(null);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const handleChange = (0, react_1.useCallback)((targetId, newValue) => {
-        const newValues = { min: targetId === "min" ? newValue : currentValue.min, max: targetId === "max" ? newValue : currentValue.max };
-        setCurrentValue(newValues);
-        const currentErrorType = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(currentErrorType);
-        onChange(newValues);
-    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max, onChange]);
-    (0, react_1.useEffect)(() => {
-        const currentErrorType = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(currentErrorType);
-    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, errorType, 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) {
-            setCurrentValue(value);
-        }
-    }, [currentValue.min, currentValue.max, value]);
-    const { directionState, setContainerNode } = (0, useDirection_1.useDirection)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const setFieldsContainerRef = (0, react_1.useCallback)((node) => {
-        setContainerNode(node);
-    }, [setContainerNode]);
-    const rangeFieldClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
-        "zen-filters-bar-side-panel-range__item",
-        isMobile ? "zen-filters-bar-side-panel-range__item--mobile" : "",
-        directionState === "column" ? "zen-filters-bar-side-panel-range__item--column" : "zen-filters-bar-side-panel-range__item--row"
-    ]), [directionState, isMobile]);
-    const rangeFieldContainerClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
-        "zen-filters-bar-side-panel-range__items-container",
-        directionState === "column" ? "zen-filters-bar-side-panel-range__items-container--column" : "zen-filters-bar-side-panel-range__items-container--row"
-    ]), [directionState]);
-    const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-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, max: max, min: min, isMinField: true, direction: directionState, disabled: disabled }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
-    const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, { className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-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, max: max, min: min, isMinField: false, direction: directionState, disabled: disabled }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
-    return (0, jsx_runtime_1.jsxs)("div", { ref: setFieldsContainerRef, id: intId, className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: rangeFieldContainerClasses, children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { className: "zen-filters-bar-side-panel-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] });
+const FiltersBarSidePanelRange = ({
+  className,
+  id,
+  onChange,
+  value,
+  unit,
+  min,
+  max,
+  fullBounded,
+  allowEqualMinMax,
+  labelMin,
+  labelMax,
+  disabled
+}) => {
+  const generatedId = (0, react_1.useId)();
+  const intId = id || generatedId;
+  const [currentValue, setCurrentValue] = (0, react_1.useState)(value);
+  const [errorType, setErrorType] = (0, react_1.useState)(undefined);
+  const prevValueRef = (0, react_1.useRef)(value);
+  const minRef = (0, react_1.useRef)(null);
+  const maxRef = (0, react_1.useRef)(null);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const handleChange = (0, react_1.useCallback)((targetId, newValue) => {
+    const newValues = {
+      min: targetId === "min" ? newValue : currentValue.min,
+      max: targetId === "max" ? newValue : currentValue.max
+    };
+    setCurrentValue(newValues);
+    const currentErrorType = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(currentErrorType);
+    onChange(newValues);
+  }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max, onChange]);
+  (0, react_1.useEffect)(() => {
+    const currentErrorType = (0, rangeHelper_1.checkErrorType)(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(currentErrorType);
+  }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, errorType, 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) {
+      setCurrentValue(value);
+    }
+  }, [currentValue.min, currentValue.max, value]);
+  const {
+    directionState,
+    setContainerNode
+  } = (0, useDirection_1.useDirection)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const setFieldsContainerRef = (0, react_1.useCallback)(node => {
+    setContainerNode(node);
+  }, [setContainerNode]);
+  const rangeFieldClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range__item", isMobile ? "zen-filters-bar-side-panel-range__item--mobile" : "", directionState === "column" ? "zen-filters-bar-side-panel-range__item--column" : "zen-filters-bar-side-panel-range__item--row"]), [directionState, isMobile]);
+  const rangeFieldContainerClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range__items-container", directionState === "column" ? "zen-filters-bar-side-panel-range__items-container--column" : "zen-filters-bar-side-panel-range__items-container--row"]), [directionState]);
+  const memoizedMinRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
+    className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-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,
+    max: max,
+    min: min,
+    isMinField: true,
+    direction: directionState,
+    disabled: disabled
+  }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
+  const memoizedMaxRangeField = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(rangeField_1.RangeField, {
+    className: (0, classNames_1.classNames)([rangeFieldClasses, "zen-filters-bar-side-panel-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,
+    max: max,
+    min: min,
+    isMinField: false,
+    direction: directionState,
+    disabled: disabled
+  }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
+  return (0, jsx_runtime_1.jsxs)("div", {
+    ref: setFieldsContainerRef,
+    id: intId,
+    className: (0, classNames_1.classNames)(["zen-filters-bar-side-panel-range", className || ""]),
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: rangeFieldContainerClasses,
+      children: [memoizedMinRangeField, memoizedMaxRangeField]
+    }), errorType !== undefined && directionState === "row" ? (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, {
+      className: "zen-filters-bar-side-panel-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]
+  });
 };
-exports.FiltersBarSidePanelRange = FiltersBarSidePanelRange;
+exports.FiltersBarSidePanelRange = FiltersBarSidePanelRange;