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

package/esm/filtersBar/components/resetComponentButton.js

@@ -1,9 +1,44 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "../../button/button";
 import { ButtonType } from "../../button/buttonType";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const ResetButton = ({ isDefaultState, onClick }) => {
-    const { translate } = useLanguage();
-    return _jsx(Button, { type: 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");
+export const ResetButton = ({
+  isDefaultState,
+  onClick
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsx(Button, {
+    type: ButtonType.Tertiary,
+    disabled: isDefaultState,
+    onClick: onClick,
+    children: translate("Reset")
+  });
 };
-export const TRANSLATIONS = ["Reset"];
+export const TRANSLATIONS = ["Reset"];

package/esm/filtersBar/filtersBarActions/filtersBarActions.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { Button } from "../../button/button";
@@ -5,18 +6,123 @@ import { ButtonType } from "../../button/buttonType";
 import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { IconSettings6 } from "../../icons/iconSettings6";
-export const FiltersBarActions = ({ className, selectedQuantity, selectedQuantityToDisplay, hideAllFiltersButton, onShowAllFilters, allFiltersRef, onClearFilters, onApplyButtonClick, isApplyButtonShown }) => {
-    const { translate } = useLanguage();
-    return _jsxs("div", { className: classNames(["zen-filters-toolbar__actions", className !== null && className !== void 0 ? className : ""]), children: [hideAllFiltersButton
-                ? null
-                : _jsx(TextIconButton, { type: ButtonType.TertiaryBlack, ref: allFiltersRef, className: classNames(["zen-filters-toolbar__all-filters", className !== null && className !== void 0 ? className : ""]), onClick: onShowAllFilters, icon: IconSettings6, iconPosition: ButtonIconPosition.Start, children: _jsxs("span", { className: "zen-filters-toolbar__action-label", children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? _jsx("span", { className: "zen-filters-toolbar__action-quantity", children: selectedQuantityToDisplay }) : null] }) }), selectedQuantity && selectedQuantity > 0
-                ? (_jsx(Button, { type: ButtonType.TertiaryBlack, onClick: onClearFilters, className: classNames(["zen-filters-toolbar__all-filters", "zen-filters-toolbar__clear", className !== null && className !== void 0 ? className : ""]), children: _jsx("span", { className: "zen-filters-toolbar__action-label", children: translate("Clear") }) }))
-                : null, onApplyButtonClick && isApplyButtonShown
-                ? (_jsx(Button, { title: translate("Apply"), className: classNames(["zen-filters-toolbar__apply", className !== null && className !== void 0 ? className : ""]), type: 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");
+export const FiltersBarActions = ({
+  className,
+  selectedQuantity,
+  selectedQuantityToDisplay,
+  hideAllFiltersButton,
+  onShowAllFilters,
+  allFiltersRef,
+  onClearFilters,
+  onApplyButtonClick,
+  isApplyButtonShown
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: classNames(["zen-filters-toolbar__actions", className !== null && className !== void 0 ? className : ""]),
+    children: [hideAllFiltersButton ? null : _jsx(TextIconButton, {
+      type: ButtonType.TertiaryBlack,
+      ref: allFiltersRef,
+      className: classNames(["zen-filters-toolbar__all-filters", className !== null && className !== void 0 ? className : ""]),
+      onClick: onShowAllFilters,
+      icon: IconSettings6,
+      iconPosition: ButtonIconPosition.Start,
+      children: _jsxs("span", {
+        className: "zen-filters-toolbar__action-label",
+        children: [translate("Filters"), selectedQuantityToDisplay && selectedQuantityToDisplay > 0 ? _jsx("span", {
+          className: "zen-filters-toolbar__action-quantity",
+          children: selectedQuantityToDisplay
+        }) : null]
+      })
+    }), selectedQuantity && selectedQuantity > 0 ? _jsx(Button, {
+      type: ButtonType.TertiaryBlack,
+      onClick: onClearFilters,
+      className: classNames(["zen-filters-toolbar__all-filters", "zen-filters-toolbar__clear", className !== null && className !== void 0 ? className : ""]),
+      children: _jsx("span", {
+        className: "zen-filters-toolbar__action-label",
+        children: translate("Clear")
+      })
+    }) : null, onApplyButtonClick && isApplyButtonShown ? _jsx(Button, {
+      title: translate("Apply"),
+      className: classNames(["zen-filters-toolbar__apply", className !== null && className !== void 0 ? className : ""]),
+      type: ButtonType.Primary,
+      onClick: onApplyButtonClick,
+      children: translate("Apply")
+    }) : null]
+  });
 };
-export const TRANSLATIONS = [
-    "Filters",
-    "Clear",
-    "Search"
-];
+export const TRANSLATIONS = ["Filters", "Clear", "Search"];

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

@@ -1,3 +1,4 @@
+import { injectString } from "../../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useCallback, useRef, useState, useId } from "react";
 import { classNames } from "../../../../commonHelpers/classNames/classNames";
@@ -7,51 +8,151 @@ import { RangeField } from "../../../../rangeRaw/components/rangeField";
 import { useDirection } from "../../hooks/useDirection";
 import { useMobile } from "../../../../commonHelpers/hooks/useMobile";
 import { FormFieldError } from "../../../../formFieldError/formFieldError";
-export const FiltersBarSidePanelRange = ({ className, id, onChange, value, unit, min, max, fullBounded, allowEqualMinMax, labelMin, labelMax, disabled }) => {
-    const generatedId = useId();
-    const intId = id || generatedId;
-    const [currentValue, setCurrentValue] = useState(value);
-    const [errorType, setErrorType] = useState(undefined);
-    const prevValueRef = useRef(value);
-    const minRef = useRef(null);
-    const maxRef = useRef(null);
-    const { translate } = useLanguage();
-    const handleChange = useCallback((targetId, newValue) => {
-        const newValues = { min: targetId === "min" ? newValue : currentValue.min, max: targetId === "max" ? newValue : currentValue.max };
-        setCurrentValue(newValues);
-        const currentErrorType = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(currentErrorType);
-        onChange(newValues);
-    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max, onChange]);
-    useEffect(() => {
-        const currentErrorType = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(currentErrorType);
-    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, errorType, min, max]);
-    useEffect(() => {
-        if (value.min === prevValueRef.current.min && value.max === prevValueRef.current.max) {
-            return;
-        }
-        prevValueRef.current = value;
-        if (value.min !== currentValue.min || value.max !== currentValue.max) {
-            setCurrentValue(value);
-        }
-    }, [currentValue.min, currentValue.max, value]);
-    const { directionState, setContainerNode } = useDirection();
-    const isMobile = useMobile();
-    const setFieldsContainerRef = useCallback((node) => {
-        setContainerNode(node);
-    }, [setContainerNode]);
-    const rangeFieldClasses = useMemo(() => 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 = useMemo(() => 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 = useMemo(() => _jsx(RangeField, { className: classNames([rangeFieldClasses, "zen-filters-bar-side-panel-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, max: max, min: min, isMinField: true, direction: directionState, disabled: disabled }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
-    const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, { className: classNames([rangeFieldClasses, "zen-filters-bar-side-panel-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, max: max, min: min, isMinField: false, direction: directionState, disabled: disabled }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
-    return _jsxs("div", { ref: setFieldsContainerRef, id: intId, className: classNames(["zen-filters-bar-side-panel-range", className || ""]), children: [_jsxs("div", { className: rangeFieldContainerClasses, children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, { className: "zen-filters-bar-side-panel-range__error", error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""] })
-                : null] });
-};
+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");
+export const FiltersBarSidePanelRange = ({
+  className,
+  id,
+  onChange,
+  value,
+  unit,
+  min,
+  max,
+  fullBounded,
+  allowEqualMinMax,
+  labelMin,
+  labelMax,
+  disabled
+}) => {
+  const generatedId = useId();
+  const intId = id || generatedId;
+  const [currentValue, setCurrentValue] = useState(value);
+  const [errorType, setErrorType] = useState(undefined);
+  const prevValueRef = useRef(value);
+  const minRef = useRef(null);
+  const maxRef = useRef(null);
+  const {
+    translate
+  } = useLanguage();
+  const handleChange = useCallback((targetId, newValue) => {
+    const newValues = {
+      min: targetId === "min" ? newValue : currentValue.min,
+      max: targetId === "max" ? newValue : currentValue.max
+    };
+    setCurrentValue(newValues);
+    const currentErrorType = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(currentErrorType);
+    onChange(newValues);
+  }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max, onChange]);
+  useEffect(() => {
+    const currentErrorType = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+    setErrorType(currentErrorType);
+  }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, errorType, min, max]);
+  useEffect(() => {
+    if (value.min === prevValueRef.current.min && value.max === prevValueRef.current.max) {
+      return;
+    }
+    prevValueRef.current = value;
+    if (value.min !== currentValue.min || value.max !== currentValue.max) {
+      setCurrentValue(value);
+    }
+  }, [currentValue.min, currentValue.max, value]);
+  const {
+    directionState,
+    setContainerNode
+  } = useDirection();
+  const isMobile = useMobile();
+  const setFieldsContainerRef = useCallback(node => {
+    setContainerNode(node);
+  }, [setContainerNode]);
+  const rangeFieldClasses = useMemo(() => 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 = useMemo(() => 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 = useMemo(() => _jsx(RangeField, {
+    className: classNames([rangeFieldClasses, "zen-filters-bar-side-panel-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,
+    max: max,
+    min: min,
+    isMinField: true,
+    direction: directionState,
+    disabled: disabled
+  }), [rangeFieldClasses, labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, directionState, disabled]);
+  const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, {
+    className: classNames([rangeFieldClasses, "zen-filters-bar-side-panel-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,
+    max: max,
+    min: min,
+    isMinField: false,
+    direction: directionState,
+    disabled: disabled
+  }), [rangeFieldClasses, labelMax, translate, unit, currentValue.max, errorType, min, max, handleChange, directionState, disabled]);
+  return _jsxs("div", {
+    ref: setFieldsContainerRef,
+    id: intId,
+    className: classNames(["zen-filters-bar-side-panel-range", className || ""]),
+    children: [_jsxs("div", {
+      className: rangeFieldContainerClasses,
+      children: [memoizedMinRangeField, memoizedMaxRangeField]
+    }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, {
+      className: "zen-filters-bar-side-panel-range__error",
+      error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""]
+    }) : null]
+  });
+};