@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.1

package/dist/radioGroup/radioGroup.js

@@ -1,80 +1,23 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("react"));
-const radio_1 = require("../radio/radio");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const react_3 = require("react");
-const RadioGroup = ({ fullWidth, reverse, id, items, className, name, value, disabled, type = "static", direction = "horizontal", onChange, selectItemOnFocus = true, wrappedInLabel, size }) => {
-    const generatedId = react_2.default.useId();
-    const intId = id || generatedId;
-    const [focusedIndex, setFocusedIndex] = (0, react_2.useState)(items.findIndex(el => el.value === value));
-    const focusElementRef = (0, react_2.useRef)(null);
-    const classes = "zen-radio-group zen-radio-group--" + direction + (disabled ? " zen-radio-group--disabled" : "");
-    const findNextEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
-        var _a;
-        let newIndex = (currentIndex + 1) % items.length;
-        while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
-            newIndex = (newIndex + 1) % items.length;
-        }
-        return newIndex;
-    }, [items]);
-    const findPrevEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
-        var _a;
-        let newIndex = (currentIndex - 1 + items.length) % items.length;
-        while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
-            newIndex = (newIndex - 1 + items.length) % items.length;
-        }
-        return newIndex;
-    }, [items]);
-    const handleKeyDown = (e) => {
-        var _a;
-        if (e.key === "ArrowDown" || e.key === "ArrowRight") {
-            e.preventDefault();
-            const newIndex = findNextEnabledIndex(focusedIndex);
-            setFocusedIndex(newIndex);
-        }
-        else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
-            e.preventDefault();
-            const newIndex = findPrevEnabledIndex(focusedIndex);
-            setFocusedIndex(newIndex);
-        }
-        else if (e.key === "Enter") {
-            (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            onChange && onChange(e);
-        }
-    };
-    (0, react_3.useEffect)(() => {
-        var _a;
-        (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [focusedIndex]);
-    const extraProps = selectItemOnFocus ? {} : ({ role: "radiogroup", tabIndex: 0 });
-    return (0, jsx_runtime_1.jsx)("div", { id: intId, className: (0, classNames_1.classNames)([classes, className || ""]), children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => (0, react_1.createElement)(radio_1.Radio, Object.assign({}, item, { className: (0, classNames_1.classNames)(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : "",
-                    size === "small" ? "zen-radio-group__item--small" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChange, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : undefined) }), item.children)) })) });
+const formField_1 = require("../formField/formField");
+const radioGroupRaw_1 = require("../radioGroupRaw/radioGroupRaw");
+const RadioGroupFormField = (0, formField_1.FormField)(radioGroupRaw_1.RadioGroupRaw);
+const RadioGroup = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(RadioGroupFormField, Object.assign({}, props));
 };
 exports.RadioGroup = RadioGroup;

package/dist/radioGroupRaw/radioGroupRaw.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IFormFieldComponent } from "../formField/formField";
+import { IRadioGroupRawDefault, TRadioGroupRaw } from "./types";
+import "./radioGroupRaw.less";
+export interface IRadioGroupRaw extends IRadioGroupRawDefault {
+}
+export declare const RadioGroupRaw: React.FC<TRadioGroupRaw & IFormFieldComponent>;

package/dist/radioGroupRaw/radioGroupRaw.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupRaw = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = __importStar(require("react"));
+const radio_1 = require("../radio/radio");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const react_3 = require("react");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const RadioGroupRaw = (props) => {
+    const { fullWidth, reverse, id, items, className, type = "static", direction = "horizontal", selectItemOnFocus = true, wrappedInLabel, isReadOnly, size } = props;
+    const { value, name, disabled, onChange, onBlur } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    const generatedId = react_2.default.useId();
+    const intId = id || generatedId;
+    const [focusedIndex, setFocusedIndex] = (0, react_2.useState)(items.findIndex(el => el.value === value));
+    const focusElementRef = (0, react_2.useRef)(null);
+    const classes = "zen-radio-group zen-radio-group--" + direction + (disabled ? " zen-radio-group--disabled" : "");
+    const onChangeInner = (e) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    };
+    const findNextEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+        var _a;
+        let newIndex = (currentIndex + 1) % items.length;
+        while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            newIndex = (newIndex + 1) % items.length;
+        }
+        return newIndex;
+    }, [items]);
+    const findPrevEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+        var _a;
+        let newIndex = (currentIndex - 1 + items.length) % items.length;
+        while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            newIndex = (newIndex - 1 + items.length) % items.length;
+        }
+        return newIndex;
+    }, [items]);
+    const handleKeyDown = (e) => {
+        var _a;
+        if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+            e.preventDefault();
+            const newIndex = findNextEnabledIndex(focusedIndex);
+            setFocusedIndex(newIndex);
+        }
+        else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+            e.preventDefault();
+            const newIndex = findPrevEnabledIndex(focusedIndex);
+            setFocusedIndex(newIndex);
+        }
+        else if (e.key === "Enter") {
+            (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onChangeInner(e);
+        }
+    };
+    (0, react_3.useEffect)(() => {
+        var _a;
+        (_a = focusElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focusedIndex]);
+    const extraProps = selectItemOnFocus ? {} : ({ role: "radiogroup", tabIndex: 0 });
+    if (isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value || "" });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { id: intId, className: (0, classNames_1.classNames)([classes, className || ""]), children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "zen-radio-group__wrapper", onKeyDown: selectItemOnFocus ? undefined : handleKeyDown }, extraProps, { children: items.map((item, ind) => (0, react_1.createElement)(radio_1.Radio, Object.assign({}, item, { className: (0, classNames_1.classNames)(["zen-radio-group__item", wrappedInLabel ? "zen-radio-group__item--no-paddings" : "", type === "interactive" ? "zen-radio--interactive" : "",
+                    size === "small" ? "zen-radio-group__item--small" : ""]), key: ind, checked: item.value === value, disabled: disabled ? disabled : item.disabled, name: name, reverse: reverse, fullWidth: fullWidth, value: item.value, onChange: onChangeInner, wrappedInLabel: wrappedInLabel, tabIndex: selectItemOnFocus || disabled || item.disabled ? undefined : (ind === focusedIndex ? 0 : -1), ref: selectItemOnFocus ? undefined : (ind === focusedIndex ? focusElementRef : undefined) }), item.children)) })) });
+};
+exports.RadioGroupRaw = RadioGroupRaw;

package/dist/radioGroupRaw/types.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IRadio } from "../radio/radio";
+export interface IRadioGroupRawBase extends IZenComponentProps {
+    id?: string;
+    items: IRadio[];
+    direction?: "vertical" | "horizontal";
+    type?: "static" | "interactive";
+    reverse?: boolean;
+    fullWidth?: boolean;
+    selectItemOnFocus?: boolean;
+    wrappedInLabel?: boolean;
+    size?: "small";
+}
+export interface IRadioGroupRawDefault extends IRadioGroupRawBase {
+    name?: string;
+    disabled?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    error?: string;
+}
+export interface IRadioGroupRawForm extends IRadioGroupRawBase, IReactFormItemController {
+}
+export type TRadioGroupRaw = Exclusive<IRadioGroupRawForm, IRadioGroupRawDefault>;

package/dist/radioGroupRaw/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/range/range.d.ts

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

package/dist/range/range.js

@@ -1,151 +1,24 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TRANSLATIONS = exports.Range = void 0;
+exports.Range = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const filterButton_1 = require("../filterButton/filterButton");
-const controlledPopup_1 = require("../controlledPopup/controlledPopup");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const button_1 = require("../button/button");
-const buttonType_1 = require("../button/buttonType");
-const rangeField_1 = require("./rangeField");
-const useLanguage_1 = require("../utils/localization/useLanguage");
-const rangeHelper_1 = require("./rangeHelper");
-const formFieldError_1 = require("../formFieldError/formFieldError");
-const useDirection_1 = require("../filtersBar/filtersBarSidePanel/hooks/useDirection");
-const chip_1 = require("../chip/chip");
-const chipStatusProvider_1 = require("../chip/chipStatusProvider");
-const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const mobileSheet_1 = require("../mobileSheet/mobileSheet");
-const footerButtons_1 = require("../footerButtons/footerButtons");
-const Range = ({ className, onChange, value, labelMin, labelMax, unit, defaultValue, disabled, label, min, max, id, fullWidthTriggerButton, fullBounded, allowEqualMinMax, error, triggerAriaLabel, chip, chipIcon, chipId, chipName }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const isMobile = (0, useMobile_1.useMobile)();
-    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);
-        }
-        defaultValue ? setCurrentValue(defaultValue) : setCurrentValue({ min: null, max: null });
-        const isHasError = (0, rangeHelper_1.checkErrorType)((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.min) || null, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.max) || null, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-    }, [allowEqualMinMax, defaultValue, fullBounded, max, min]);
-    const handleCancelClick = (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;
-        }
-        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: label }), 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, label, 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]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-range", error ? "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, { ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", label).replace("{values}", selection) : "", children: selection ? (0, jsx_runtime_1.jsx)("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }), isMobile ? memoizedMobileView : memoizedDesktopView] });
+const formField_1 = require("../formField/formField");
+const rangeRaw_1 = require("../rangeRaw/rangeRaw");
+const RangeFormField = (0, formField_1.FormField)(rangeRaw_1.RangeRaw);
+// TODO: add tests
+const Range = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(RangeFormField, Object.assign({}, props));
 };
 exports.Range = Range;
-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}"
-];

package/{esm/range → dist/rangeRaw/components}/rangeField.d.ts

@@ -1,6 +1,6 @@
 import React, { RefObject } from "react";
 import "./rangeField.less";
-import { TDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
+import { TDirection } from "../../filtersBar/filtersBarSidePanel/hooks/useDirection";
 export interface IRangeField {
     onChange: (id: string, value: number | null) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;

package/dist/{range → rangeRaw/components}/rangeField.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const textInput_1 = require("../textInput/textInput");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const iconException_1 = require("../icons/iconException");
+const textInput_1 = require("../../textInput/textInput");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const iconException_1 = require("../../icons/iconException");
 const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
     const inputId = (0, react_1.useId)();
     const labelId = (0, react_1.useId)();

package/dist/rangeRaw/rangeRaw.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IFormFieldComponent } from "../formField/formField";
+import { IRangeRawDefault, TRangeRaw } from "./types";
+import "./rangeRaw.less";
+export type { IRangeValuesRaw } from "./types";
+export type { TErrorTypeRaw } from "./types";
+export interface IRangeRaw extends IRangeRawDefault {
+}
+export declare const RangeRaw: React.FC<TRangeRaw & IFormFieldComponent>;
+export declare const TRANSLATIONS: string[];