@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/range/range.js

@@ -1,147 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useCallback, useId, useRef, useState } from "react";
-import { FilterButton } from "../filterButton/filterButton";
-import { ControlledPopup } from "../controlledPopup/controlledPopup";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { Button } from "../button/button";
-import { ButtonType } from "../button/buttonType";
-import { RangeField } from "./rangeField";
-import { useLanguage } from "../utils/localization/useLanguage";
-import { checkErrorType, getErrorString } from "./rangeHelper";
-import { FormFieldError } from "../formFieldError/formFieldError";
-import { useDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
-import { Chip } from "../chip/chip";
-import { useChipStatus } from "../chip/chipStatusProvider";
-import { useMobile } from "../commonHelpers/hooks/useMobile";
-import { MobileSheet } from "../mobileSheet/mobileSheet";
-import { FooterButtons } from "../footerButtons/footerButtons";
-export 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] = useState(false);
-    const isMobile = useMobile();
-    const [currentValue, setCurrentValue] = useState(value);
-    const [errorType, setErrorType] = useState(undefined);
-    const triggerId = useId();
-    const chipStatus = useChipStatus();
-    const triggerRef = useRef(null);
-    const contentRef = useRef(null);
-    const prevValueRef = useRef(value);
-    const minRef = useRef(null);
-    const maxRef = useRef(null);
-    const { directionState, setContainerNode } = useDirection("column");
-    const blurTimeoutRef = useRef(null);
-    const { translate } = useLanguage();
-    // This is the callback ref
-    const setFieldsContainerRef = useCallback((node) => {
-        setContainerNode(node);
-    }, [setContainerNode]);
-    const checkError = useCallback((val) => {
-        const isHasError = checkErrorType(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-    }, [allowEqualMinMax, fullBounded, max, min]);
-    const getSelection = useCallback(() => {
-        let selection = value.min !== null && value.max !== null ? `${value.min} - ${value.max}` : "";
-        if (!selection && value.min !== null) {
-            selection = `${labelMin || translate("Min")} = ${value.min}`;
-        }
-        if (!selection && value.max !== null) {
-            selection = `${labelMax || translate("Max")} = ${value.max}`;
-        }
-        return selection;
-    }, [labelMax, labelMin, translate, value.max, value.min]);
-    const handleTriggerClick = useCallback(() => {
-        var _a;
-        setIsOpen(curr => !curr);
-        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [isOpen]);
-    const handleClearClick = useCallback(() => {
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        defaultValue ? setCurrentValue(defaultValue) : setCurrentValue({ min: null, max: null });
-        const isHasError = 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 = useCallback(() => {
-        var _a;
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        setCurrentValue(value);
-        const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-        setIsOpen(false);
-        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [allowEqualMinMax, fullBounded, max, min, value]);
-    const handleApplyClick = useCallback(() => {
-        var _a;
-        if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-        }
-        const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-        if (isHasError) {
-            return;
-        }
-        onChange(currentValue);
-        setIsOpen(false);
-        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
-    const handleClearChipClick = useCallback(() => {
-        handleClearClick();
-        defaultValue && onChange(defaultValue);
-        setIsOpen(false);
-    }, [defaultValue, handleClearClick, onChange]);
-    const handleChange = useCallback((targetId, newValue) => {
-        const newValues = { min: targetId === "min" ? newValue : currentValue.min, max: targetId === "max" ? newValue : currentValue.max };
-        setCurrentValue(newValues);
-    }, [currentValue.min, currentValue.max]);
-    const isClearDisabled = useCallback(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
-    const isApplyDisabled = useCallback(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
-    const handleBlur = useCallback((e) => {
-        if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
-            blurTimeoutRef.current = setTimeout(() => {
-                const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-                setErrorType(isHasError);
-            }, 200);
-            return;
-        }
-        const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
-        setErrorType(isHasError);
-    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max]);
-    useEffect(() => {
-        if (value.min === prevValueRef.current.min && value.max === prevValueRef.current.max) {
-            return;
-        }
-        prevValueRef.current = value;
-        if (value.min !== currentValue.min || value.max !== currentValue.max) {
-            checkError(value);
-            setCurrentValue(value);
-        }
-    }, [currentValue.min, currentValue.max, value, checkError]);
-    const memoizedMinRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: getErrorString("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: true, direction: directionState }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState]);
-    const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: getErrorString("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: false, direction: directionState }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState]);
-    const selection = useMemo(() => getSelection(), [getSelection]);
-    const memoizedContent = useMemo(() => _jsxs("div", { className: "zen-range__fields-wrapper", children: [_jsxs("div", { ref: setFieldsContainerRef, className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, { className: "zen-range__error", error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""] })
-                : null] }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
-    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: isOpen, className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: _jsxs("div", { ref: contentRef, className: "zen-range__content", children: [_jsx("div", { className: "zen-range__label zen-ellipsis", children: label }), memoizedContent, _jsxs("div", { className: "zen-range__footer", children: [_jsx(Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), _jsxs("div", { className: "zen-range__button-group", children: [_jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) }), [className, handleApplyClick, handleCancelClick, handleClearClick, handleTriggerClick, isApplyDisabled, isClearDisabled, isOpen, label, memoizedContent, translate]);
-    const memoizedMobileFooter = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") }), _jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { type: ButtonType.Tertiary, disabled: isClearDisabled(), onClick: handleClearClick, children: translate("Clear") })] }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
-    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Range Filter popup"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: handleTriggerClick, onCloseClick: handleTriggerClick, useTrapFocusWithTrigger: false, children: [_jsx(MobileSheet.Title, { children: label }), _jsx(MobileSheet.Content, { children: memoizedContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [handleTriggerClick, isOpen, label, memoizedContent, memoizedMobileFooter, translate]);
-    return _jsxs("div", { className: classNames(["zen-range", error ? "zen-range--error" : "", className || ""]), children: [chip ? _jsx(Chip, { id: chipId, status: isClearDisabled() ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: handleTriggerClick, onClose: isClearDisabled() ? undefined : handleClearChipClick, triggerRef: triggerRef, icon: chipIcon, children: selection ? selection : chipName }) :
-                _jsx(FilterButton, { 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 ? _jsx("span", { className: "zen-range__trigger-button-text", children: selection }) : label }), _jsx(FormFieldError, { error: error }), isMobile ? memoizedMobileView : memoizedDesktopView] });
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from "../formField/formField";
+import { RangeRaw } from "../rangeRaw/rangeRaw";
+const RangeFormField = FormField(RangeRaw);
+// TODO: add tests
+export const Range = (_a) => {
+    var props = __rest(_a, []);
+    return _jsx(RangeFormField, Object.assign({}, props));
 };
-export const TRANSLATIONS = [
-    "Min",
-    "Max",
-    "Range Filter popup",
-    "Clear",
-    "Cancel",
-    "Apply",
-    "Must be less than the max",
-    "Must be more than the min",
-    "Must be more than {value}",
-    "Must be less than {value}",
-    "Must be in range {min} - {max}",
-    "The min value must be set",
-    "The max value must be set",
-    "{rangeName} values {values}"
-];

package/{dist/range → esm/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/esm/{range → rangeRaw/components}/rangeField.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { TextInput } from "../textInput/textInput";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { IconException } from "../icons/iconException";
+import { TextInput } from "../../textInput/textInput";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { IconException } from "../../icons/iconException";
 export const RangeField = ({ value, onChange, onBlur, id, label, unit, disabled, min, max, inputRef, errorString, className, direction, isMinField }) => {
     const inputId = useId();
     const labelId = useId();

package/esm/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[];

package/esm/rangeRaw/rangeRaw.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId, useRef, useCallback, useEffect, useMemo } from "react";
+import { Button } from "../button/button";
+import { ButtonType } from "../button/buttonType";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { ControlledPopup } from "../controlledPopup/controlledPopup";
+import { FilterButton } from "../filterButton/filterButton";
+import { useDirection } from "../filtersBar/filtersBarSidePanel/hooks/useDirection";
+import { FormFieldError } from "../formFieldError/formFieldError";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { RangeField } from "./components/rangeField";
+import { checkErrorType, getErrorString } from "./utils/rangeHelper";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { isFormItem } from "../commonHelpers/isFormItem";
+import { Chip } from "../chip/chip";
+import { useChipStatus } from "../chip/chipStatusProvider";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { FooterButtons } from "../footerButtons/footerButtons";
+import { MobileSheet } from "../mobileSheet/mobileSheet";
+import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+// eslint-disable-next-line complexity
+export const RangeRaw = (props) => {
+    var _a;
+    const { className, defaultValue, labelMin, labelMax, unit, label, title = "", id, fullWidthTriggerButton, fullBounded, allowEqualMinMax, triggerAriaLabel, isError, isReadOnly, chip, chipIcon, chipId, chipName } = props;
+    const labelLocal = (label && !title) ? label : title;
+    const accessibilityProps = getAriaAttributes(props);
+    const isFormItemValue = isFormItem(props);
+    const isMobile = useMobile();
+    const { value, disabled, name, min, max, onChange, onBlur } = useFormFieldValues(props.controller, props);
+    let defaultValueInner;
+    if (isFormItemValue) {
+        defaultValueInner = (_a = props.controller) === null || _a === void 0 ? void 0 : _a.defaultValue;
+    }
+    else {
+        defaultValueInner = defaultValue;
+    }
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentValue, setCurrentValue] = useState(value);
+    const [errorType, setErrorType] = useState(undefined);
+    const triggerId = useId();
+    const chipStatus = useChipStatus();
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const prevValueRef = useRef(value);
+    const minRef = useRef(null);
+    const maxRef = useRef(null);
+    const { directionState, setContainerNode } = useDirection("column");
+    const blurTimeoutRef = useRef(null);
+    const { translate } = useLanguage();
+    // This is the callback ref
+    const setFieldsContainerRef = useCallback((node) => {
+        setContainerNode(node);
+    }, [setContainerNode]);
+    const checkError = useCallback((val) => {
+        const isHasError = checkErrorType(val.min, val.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+    }, [allowEqualMinMax, fullBounded, max, min]);
+    const getSelection = useCallback(() => {
+        let selection = value.min !== null && value.max !== null ? `${value.min} - ${value.max}` : "";
+        if (!selection && value.min !== null) {
+            selection = `${labelMin || translate("Min")} = ${value.min}`;
+        }
+        if (!selection && value.max !== null) {
+            selection = `${labelMax || translate("Max")} = ${value.max}`;
+        }
+        return selection;
+    }, [labelMax, labelMin, translate, value.max, value.min]);
+    const handleTriggerClick = useCallback(() => {
+        var _a;
+        setIsOpen(curr => !curr);
+        isOpen && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    }, [isOpen]);
+    const handleClearClick = useCallback(() => {
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        defaultValueInner ? setCurrentValue(defaultValueInner) : setCurrentValue({ min: null, max: null });
+        const isHasError = checkErrorType((defaultValueInner === null || defaultValueInner === void 0 ? void 0 : defaultValueInner.min) || null, (defaultValueInner === null || defaultValueInner === void 0 ? void 0 : defaultValueInner.max) || null, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+    }, [allowEqualMinMax, defaultValueInner, fullBounded, max, min]);
+    const handleCancelClick = useCallback(() => {
+        var _a;
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        setCurrentValue(value);
+        const isHasError = checkErrorType(value.min, value.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+        setIsOpen(false);
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [allowEqualMinMax, fullBounded, max, min, value]);
+    const handleApplyClick = useCallback(() => {
+        var _a;
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+        if (isHasError) {
+            return;
+        }
+        onChange(currentValue);
+        setIsOpen(false);
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [allowEqualMinMax, currentValue, fullBounded, max, min, onChange]);
+    const handleClearChipClick = useCallback(() => {
+        handleClearClick();
+        defaultValue && onChange(defaultValue);
+        setIsOpen(false);
+    }, [defaultValue, handleClearClick, onChange]);
+    const handleChange = useCallback((targetId, newValue) => {
+        const newValues = { min: targetId === "min" ? newValue : currentValue.min, max: targetId === "max" ? newValue : currentValue.max };
+        setCurrentValue(newValues);
+    }, [currentValue.min, currentValue.max]);
+    const isClearDisabled = useCallback(() => defaultValue ? defaultValue.min === currentValue.min && defaultValue.max === currentValue.max : currentValue.min === null && currentValue.max === null, [defaultValue, currentValue.min, currentValue.max]);
+    const isApplyDisabled = useCallback(() => currentValue.min === value.min && currentValue.max === value.max, [currentValue.min, currentValue.max, value.min, value.max]);
+    const handleBlur = useCallback((e) => {
+        if (e.relatedTarget && e.relatedTarget.getAttribute("data-validated-button")) {
+            blurTimeoutRef.current = setTimeout(() => {
+                const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+                setErrorType(isHasError);
+            }, 200);
+            return;
+        }
+        const isHasError = checkErrorType(currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max);
+        setErrorType(isHasError);
+    }, [currentValue.min, currentValue.max, fullBounded, allowEqualMinMax, min, max]);
+    useEffect(() => {
+        if (value.min === prevValueRef.current.min && value.max === prevValueRef.current.max) {
+            return;
+        }
+        prevValueRef.current = value;
+        if (value.min !== currentValue.min || value.max !== currentValue.max) {
+            checkError(value);
+            setCurrentValue(value);
+        }
+    }, [currentValue.min, currentValue.max, value, checkError]);
+    const memoizedMinRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__min-field", label: labelMin || translate("Min"), unit: unit, value: currentValue.min, id: "min", inputRef: minRef, errorString: getErrorString("min", currentValue.min, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: true, direction: directionState }), [labelMin, translate, unit, currentValue.min, errorType, min, max, handleChange, handleBlur, directionState]);
+    const memoizedMaxRangeField = useMemo(() => _jsx(RangeField, { className: "zen-range__max-field", label: labelMax || translate("Max"), unit: unit, value: currentValue.max, id: "max", inputRef: maxRef, errorString: getErrorString("max", currentValue.max, translate, errorType, min, max), onChange: handleChange, onBlur: handleBlur, max: max, min: min, isMinField: false, direction: directionState }), [max, min, labelMax, handleChange, handleBlur, currentValue.max, translate, unit, errorType, directionState]);
+    const selection = useMemo(() => getSelection(), [getSelection]);
+    const memoizedContent = useMemo(() => _jsxs("div", { className: "zen-range__fields-wrapper", children: [_jsxs("div", { ref: setFieldsContainerRef, className: classNames(["zen-range__fields-container", directionState === "row" ? "zen-range__fields-container--row" : "zen-range__fields-container--column"]), children: [memoizedMinRangeField, memoizedMaxRangeField] }), errorType !== undefined && directionState === "row" ? _jsx(FormFieldError, { className: "zen-range__error", error: [getErrorString("min", currentValue.min, translate, errorType, min, max) || "", getErrorString("max", currentValue.max, translate, errorType, min, max) || ""] })
+                : null] }), [setFieldsContainerRef, directionState, memoizedMinRangeField, memoizedMaxRangeField, errorType, currentValue.min, currentValue.max, translate, min, max]);
+    const memoizedDesktopView = useMemo(() => _jsx(ControlledPopup, { isOpen: isOpen, className: classNames(["zen-range-popup zen-shadow-dropdown-default", className ? className : ""]), onOpenChange: handleTriggerClick, useTrapFocusWithTrigger: "on", alignment: "bottom-left", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Range Filter popup"), recalculateOnScroll: true, children: _jsxs("div", { ref: contentRef, className: "zen-range__content", children: [_jsx("div", { className: "zen-range__label zen-ellipsis", children: labelLocal }), memoizedContent, _jsxs("div", { className: "zen-range__footer", children: [_jsx(Button, { onClick: handleClearClick, disabled: isClearDisabled(), className: "zen-range__clear-button", type: ButtonType.Tertiary, title: translate("Clear"), "data-validated-button": true, children: translate("Clear") }), _jsxs("div", { className: "zen-range__button-group", children: [_jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") })] })] })] }) }), [className, handleApplyClick, handleCancelClick, handleClearClick, handleTriggerClick, isApplyDisabled, isClearDisabled, isOpen, labelLocal, memoizedContent, translate]);
+    const memoizedMobileFooter = useMemo(() => _jsxs(FooterButtons, { children: [_jsx(Button, { onClick: handleApplyClick, type: ButtonType.Primary, disabled: isApplyDisabled(), className: "zen-range__apply-button", title: translate("Apply"), "data-validated-button": true, children: translate("Apply") }), _jsx(Button, { onClick: handleCancelClick, className: "zen-range__cancel-button", title: translate("Cancel"), "data-validated-button": true, children: translate("Cancel") }), _jsx(Button, { type: ButtonType.Tertiary, disabled: isClearDisabled(), onClick: handleClearClick, children: translate("Clear") })] }), [handleApplyClick, handleCancelClick, handleClearClick, isApplyDisabled, isClearDisabled, translate]);
+    const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, { label: translate("Range Filter popup"), triggerRef: triggerRef, isOpen: isOpen, onHidePanel: handleTriggerClick, onCloseClick: handleTriggerClick, useTrapFocusWithTrigger: false, children: [_jsx(MobileSheet.Title, { children: label }), _jsx(MobileSheet.Content, { children: memoizedContent }), _jsx(MobileSheet.Footer, { children: memoizedMobileFooter })] }), [handleTriggerClick, isOpen, label, memoizedContent, memoizedMobileFooter, translate]);
+    if (isReadOnly) {
+        const readOnlyValue = currentValue.min !== null && currentValue.max !== null ? `${currentValue.min} - ${currentValue.max}` : "";
+        return _jsx(ReviewTextControl, { value: readOnlyValue });
+    }
+    return _jsxs("div", { className: classNames(["zen-range", isError ? "zen-range--error" : "", className || ""]), children: [chip ? _jsx(Chip, { id: chipId, status: isClearDisabled() ? undefined : chipStatus || "active", isOpen: isOpen, disabled: disabled, onClick: handleTriggerClick, onClose: isClearDisabled() ? undefined : handleClearChipClick, triggerRef: triggerRef, icon: chipIcon, children: selection ? selection : chipName }) :
+                _jsx(FilterButton, Object.assign({ name: name, onBlur: onBlur, ariaLabel: triggerAriaLabel, ref: triggerRef, id: id || triggerId, className: "zen-range__trigger-button", onClick: handleTriggerClick, disabled: disabled, isActive: isOpen, fullWidth: fullWidthTriggerButton, title: selection ? translate("{rangeName} values {values}").replace("{rangeName}", labelLocal).replace("{values}", selection) : "" }, accessibilityProps, { children: selection ? _jsx("span", { className: "zen-range__trigger-button-text", children: selection }) : labelLocal })), isMobile ? memoizedMobileView : memoizedDesktopView] });
+};
+export const TRANSLATIONS = [
+    "Min",
+    "Max",
+    "Range Filter popup",
+    "Clear",
+    "Cancel",
+    "Apply",
+    "Must be less than the max",
+    "Must be more than the min",
+    "Must be more than {value}",
+    "Must be less than {value}",
+    "Must be in range {min} - {max}",
+    "The min value must be set",
+    "The max value must be set",
+    "{rangeName} values {values}"
+];

package/esm/rangeRaw/types.d.ts

@@ -0,0 +1,35 @@
+import { IChipsParent } from "../chip/chip";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface IRangeValuesRaw {
+    min: number | null;
+    max: number | null;
+}
+export type TErrorTypeRaw = "range" | "bound" | "value";
+export interface IRangeRawBase extends IZenComponentProps, IChipsParent {
+    className?: string;
+    unit?: string;
+    labelMin?: string;
+    labelMax?: string;
+    disabled?: boolean;
+    title?: string;
+    label: string;
+    id?: string;
+    fullWidthTriggerButton?: boolean;
+    fullBounded?: boolean;
+    allowEqualMinMax?: boolean;
+    error?: string;
+    triggerAriaLabel?: string;
+}
+export interface IRangeRawDefault extends IRangeRawBase {
+    onChange: (values: IRangeValuesRaw) => void;
+    value: IRangeValuesRaw;
+    defaultValue?: IRangeValuesRaw;
+    min?: number;
+    max?: number;
+    name?: string;
+    onBlur?: () => void;
+}
+export interface IRangeRawForm extends IRangeRawBase, IReactFormItemController {
+}
+export type TRangeRaw = Exclusive<IRangeRawDefault, IRangeRawForm>;

package/esm/rangeRaw/types.js

@@ -0,0 +1 @@
+export {};

package/esm/{range → rangeRaw/utils}/rangeHelper.d.ts

@@ -1,4 +1,4 @@
-import { TErrorType } from "./range";
+import { TErrorType } from "../../range/range";
 export declare const getRangeError: (translateFn: (s: string) => string, currentVal: number | null, defMin?: number, defMax?: number) => string | undefined;
 export declare const getErrorString: (currentId: "min" | "max", currentVal: number | null, translateFn: (s: string) => string, errorType?: TErrorType, defMin?: number, defMax?: number) => string | undefined;
 export declare const checkErrorType: (minVal: number | null, maxVal: number | null, isFullBounded?: boolean, allowEqualMinMax?: boolean, defMin?: number, defMax?: number) => "range" | "value" | "bound" | undefined;

package/esm/searchInput/searchInput.d.ts

@@ -1,10 +1,11 @@
 import { TFormFieldComponentProps } from "../formField/formField";
-import { ISearchInputRaw } from "../searchInputRaw/searchInputRaw";
-type TFormInput = TFormFieldComponentProps<ISearchInputRaw>;
-export interface ISearchInput extends Omit<TFormInput, "counter"> {
+import { TSearchInputRaw } from "../searchInputRaw/types";
+type TFormFieldSearch = TFormFieldComponentProps<TSearchInputRaw>;
+export interface ISearchInput extends Omit<TFormFieldSearch, "counter"> {
 }
+export type TSearchInput = Omit<TFormFieldSearch, "counter">;
 export declare const SearchInput: {
-    ({ maxLength, ...props }: TFormInput): import("react/jsx-runtime").JSX.Element;
+    (props: TSearchInput): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/searchInput/searchInput.js

@@ -1,23 +1,13 @@
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from "../formField/formField";
 import { SearchInputRaw } from "../searchInputRaw/searchInputRaw";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 const FormInput = FormField(SearchInputRaw);
-export const SearchInput = (_a) => {
-    var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
+export const SearchInput = (props) => {
+    const { maxLength, name, value = "" } = useFormFieldValues(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return _jsx(FormInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
+    return _jsx(FormInput, Object.assign({}, props, { ref: props.ref, name: name, maxLength: maxLength, counter: normalizedMaxLength
+            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
 };
 SearchInput.displayName = "SearchInput";

package/esm/searchInputRaw/searchInputRaw.d.ts

@@ -1,26 +1,9 @@
-import * as React from "react";
-import { RefObject } from "react";
 import "./searchInputRaw.less";
-export interface ISearchInputRaw {
-    value: string;
-    className?: string;
-    disabled?: boolean;
-    onChange?: (value: string) => void;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    placeholder?: string;
-    ariaLabel?: string;
-    closeButtonTitle?: string;
-    isError?: boolean;
-    maxLength?: number;
-    withDefaultCloseIcon?: boolean;
-    id?: string;
-    autoFocus?: boolean;
-    ref?: RefObject<HTMLInputElement | null>;
+import { ISearchInputRawDefault, TSearchInputRaw } from "./types";
+export interface ISearchInputRaw extends ISearchInputRawDefault {
 }
 export declare const SearchInputRaw: {
-    ({ value, className, disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon, autoFocus, id, ref }: ISearchInputRaw): import("react/jsx-runtime").JSX.Element;
+    (props: TSearchInputRaw): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/searchInputRaw/searchInputRaw.js

@@ -8,7 +8,11 @@ import { IconClose } from "../icons/iconClose";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDrive } from "../utils/theme/useDrive";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const SearchInputRaw = ({ value, className = "", disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id, ref }) => {
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+export const SearchInputRaw = (props) => {
+    const { className = "", onKeyDown, placeholder, ariaLabel, closeButtonTitle, isError, isReadOnly, maxLength, withDefaultCloseIcon = false, autoFocus, id, onFocus, ref } = props;
+    const { name, disabled, value = "", onBlur, onChange } = useFormFieldValues(props.controller, props);
     const { translate } = useLanguage();
     const placeholderValue = placeholder || translate("Search");
     const closeButtonTitleValue = closeButtonTitle || translate("Clear");
@@ -42,7 +46,10 @@ export const SearchInputRaw = ({ value, className = "", disabled, onChange, onKe
             (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [ref, innerRef]);
-    return (_jsx("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: classNames(["zen-search-input", className]), children: _jsx(InputAdornments, { id: id, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: classNames(["zen-search-input__input", disabledClassName, isError ? "zen-search-input__input--error" : ""]), disabled: disabled, onChange: handleChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, placeholder: placeholderValue, inputType: withDefaultCloseIcon ? "search" : "text", endAdornment: closeButton, ref: ref || innerRef, autoFocus: autoFocus }) }));
+    if (isReadOnly) {
+        return _jsx(ReviewTextControl, { value: String(value) });
+    }
+    return (_jsx("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: classNames(["zen-search-input", className]), children: _jsx(InputAdornments, { name: name, id: id, onBlur: onBlur, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: classNames(["zen-search-input__input", disabledClassName, isError ? "zen-search-input__input--error" : ""]), disabled: disabled, onChange: handleChange, onKeyDown: onKeyDown, placeholder: placeholderValue, inputType: withDefaultCloseIcon ? "search" : "text", endAdornment: closeButton, ref: ref || innerRef, autoFocus: autoFocus, onFocus: onFocus }) }));
 };
 SearchInputRaw.displayName = "SearchInputRaw";
 export const TRANSLATIONS = [

package/esm/searchInputRaw/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController } from "../commonHelpers/zenComponent";
+export interface ISearchInputRawBase {
+    className?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    ariaLabel?: string;
+    closeButtonTitle?: string;
+    isError?: boolean;
+    isReadOnly?: boolean;
+    maxLength?: number;
+    withDefaultCloseIcon?: boolean;
+    id?: string;
+    /**
+    * @deprecated
+    * @param withNewSearchIcon - will be removed in the next major release
+    */
+    withNewSearchIcon?: boolean;
+    autoFocus?: boolean;
+    ref?: React.RefObject<HTMLInputElement | null>;
+}
+export interface ISearchInputRawDefault extends ISearchInputRawBase {
+    value: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    name?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export interface ISearchInputRawForm extends ISearchInputRawBase, IReactFormItemController {
+}
+export type TSearchInputRaw = Exclusive<ISearchInputRawForm, ISearchInputRawDefault>;

package/esm/searchInputRaw/types.js

@@ -0,0 +1 @@
+export {};

package/esm/select/select.d.ts

@@ -1,11 +1,16 @@
+import { FC } from "react";
+import { TFormFieldComponentProps } from "../formField/formField";
 import { ISelectRaw, ISelectStatePropsRaw, ISelectStateRaw } from "../selectRaw/selectRaw";
+import { TSelectRaw } from "../selectRaw/types";
 export interface ISelect extends ISelectRaw {
 }
 export interface ISelectState extends ISelectStateRaw {
 }
 export interface ISelectStateProps extends ISelectStatePropsRaw {
 }
-export declare const Select: {
-    (props: import("../formField/formField").TFormFieldComponentProps<ISelectRaw>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+type TFormFieldSelect = TFormFieldComponentProps<TSelectRaw>;
+export type TSelect = Omit<TFormFieldSelect, "ref">;
+export declare const Select: FC<TSelect & {
+    children?: React.ReactNode;
+}>;
+export {};

package/esm/select/select.js

@@ -1,4 +1,19 @@
-import { memo } from "react";
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from "../formField/formField";
 import { SelectRaw } from "../selectRaw/selectRaw";
-export const Select = FormField(memo(SelectRaw));
+const FormComponent = FormField(SelectRaw);
+export const Select = (_a) => {
+    var props = __rest(_a, []);
+    return _jsx(FormComponent, Object.assign({}, props));
+};

package/esm/selectField/selectField.d.ts

@@ -1,4 +1,4 @@
-export declare const SelectField: {
-    (props: import("..").TFormFieldComponentProps<import("../selectRaw/selectRaw").ISelectRaw>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/// <reference types="react" />
+export declare const SelectField: import("react").FC<import("../select/select").TSelect & {
+    children?: import("react").ReactNode;
+}>;