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

package/dist/rangeRaw/rangeRaw.js

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

package/dist/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/dist/rangeRaw/types.js

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

package/dist/{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/dist/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/dist/searchInput/searchInput.js

@@ -1,26 +1,16 @@
 "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.SearchInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formField_1 = require("../formField/formField");
 const searchInputRaw_1 = require("../searchInputRaw/searchInputRaw");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 const FormInput = (0, formField_1.FormField)(searchInputRaw_1.SearchInputRaw);
-const SearchInput = (_a) => {
-    var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
+const SearchInput = (props) => {
+    const { maxLength, name, value = "" } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
+    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { ref: props.ref, name: name, maxLength: maxLength, counter: normalizedMaxLength
+            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
 };
 exports.SearchInput = SearchInput;

package/dist/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/dist/searchInputRaw/searchInputRaw.js

@@ -34,7 +34,11 @@ const iconClose_1 = require("../icons/iconClose");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDrive_1 = require("../utils/theme/useDrive");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const SearchInputRaw = ({ value, className = "", disabled, onChange, onKeyDown, onFocus, onBlur, placeholder, ariaLabel, closeButtonTitle, isError, maxLength, withDefaultCloseIcon = false, autoFocus, id, ref }) => {
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+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 } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     const { translate } = (0, useLanguage_1.useLanguage)();
     const placeholderValue = placeholder || translate("Search");
     const closeButtonTitleValue = closeButtonTitle || translate("Clear");
@@ -68,7 +72,10 @@ const SearchInputRaw = ({ value, className = "", disabled, onChange, onKeyDown,
             (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [ref, innerRef]);
-    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: (0, classNames_1.classNames)(["zen-search-input", className]), children: (0, jsx_runtime_1.jsx)(inputAdornments_1.InputAdornments, { id: id, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: (0, classNames_1.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 (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: String(value) });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickHandler, role: "search", "aria-label": ariaLabelValue, className: (0, classNames_1.classNames)(["zen-search-input", className]), children: (0, jsx_runtime_1.jsx)(inputAdornments_1.InputAdornments, { name: name, id: id, onBlur: onBlur, value: value, maxLength: maxLength, isError: isError, startAdornment: searchIcon, className: (0, classNames_1.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 }) }));
 };
 exports.SearchInputRaw = SearchInputRaw;
 exports.SearchInputRaw.displayName = "SearchInputRaw";

package/dist/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/dist/searchInputRaw/types.js

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

package/dist/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/dist/select/select.js

@@ -1,7 +1,23 @@
 "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.Select = void 0;
-const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const formField_1 = require("../formField/formField");
 const selectRaw_1 = require("../selectRaw/selectRaw");
-exports.Select = (0, formField_1.FormField)((0, react_1.memo)(selectRaw_1.SelectRaw));
+const FormComponent = (0, formField_1.FormField)(selectRaw_1.SelectRaw);
+const Select = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(FormComponent, Object.assign({}, props));
+};
+exports.Select = Select;

package/dist/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;
+}>;

package/dist/selectRaw/selectRaw.d.ts

@@ -1,21 +1,8 @@
-import { Ref } from "react";
 import { IListState } from "../selectList/selectList";
 import { ISelectListItem } from "../selectList/selectListItem";
 import "./selectRaw.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-export interface ISelectRaw extends IZenComponentProps {
-    id?: string;
-    title: string;
-    pageSize?: number;
-    placeholder?: string;
-    disabled?: boolean;
-    items: ISelectListItem[];
-    value?: string;
-    classNamePopup?: string;
-    forceSelection?: boolean;
-    isError?: boolean;
-    onChange?: (id: string | undefined) => void;
-    ref?: Ref<HTMLDivElement | null>;
+import { ISelectRawDefault, TSelectRaw } from "./types";
+export interface ISelectRaw extends ISelectRawDefault {
 }
 export interface ISelectStateRaw extends IListState {
     expanded: boolean;
@@ -25,6 +12,6 @@ export interface ISelectStatePropsRaw {
     value?: string;
 }
 export declare const SelectRaw: {
-    (props: ISelectRaw): import("react/jsx-runtime").JSX.Element;
+    (props: TSelectRaw): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/selectRaw/selectRaw.js

@@ -38,6 +38,8 @@ const isChildOf_1 = require("../utils/isChildOf");
 const iconChevronDownSmall_1 = require("../icons/iconChevronDownSmall");
 const absolute_1 = require("../absolute/absolute");
 const usePopupWidth_1 = require("./hooks/usePopupWidth");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 // get default active item (based on items array)
 const getItemById = (items, id) => items.find(item => item.id === id);
 const closedListActionGetters = {
@@ -66,11 +68,12 @@ const openListActionGetters = {
 };
 const PassiveSelectListComp = react_1.default.memo(selectList_1.PassiveSelectList);
 const SelectRaw = (props) => {
-    var _a;
-    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange, forceSelection = false, ref: selectRef } = props;
+    var _a, _b;
+    const { id, title, pageSize = 10, placeholder, className, classNamePopup, items: outerItems, isError, isReadOnly, ref: selectRef, forceSelection = false } = props;
+    const { value, onChange, onBlur, disabled } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     const items = react_1.default.useMemo(() => outerItems, [outerItems]);
-    const [state, dispatchState] = (0, react_1.useReducer)(select_reducer_1.selectReducer, { items, value: outerValue }, select_helpers_1.getSelectInitialState);
-    const value = (0, select_helpers_1.getSelectValue)(state.itemsState, items);
+    const [state, dispatchState] = (0, react_1.useReducer)(select_reducer_1.selectReducer, { items, value }, select_helpers_1.getSelectInitialState);
+    const selectValue = (0, select_helpers_1.getSelectValue)(state.itemsState, items);
     const innerTriggerRef = react_1.default.useRef(null);
     const ref = react_1.default.useRef(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -83,19 +86,19 @@ const SelectRaw = (props) => {
     react_1.default.useImperativeHandle(selectRef, () => innerTriggerRef.current, []);
     const listId = react_1.default.useId();
     const classes = (0, classNames_1.classNames)(["zen-select zen-text-input-layout", disabled ? "zen-select--disabled" : "", className || ""]);
-    const text = value ? (_a = getItemById(items, value)) === null || _a === void 0 ? void 0 : _a.children : placeholder;
+    const text = selectValue ? (_a = getItemById(items, selectValue)) === null || _a === void 0 ? void 0 : _a.children : placeholder;
     // Reset state when value changed
     react_1.default.useEffect(() => {
-        const itemsValue = (0, select_helpers_1.getSelectInitialState)({ items, value: outerValue }).itemsState;
+        const itemsValue = (0, select_helpers_1.getSelectInitialState)({ items, value: value }).itemsState;
         dispatchState({ type: selectList_actionTypes_1.ListAction.Reset, payload: { items, value: itemsValue, multiselect: false } });
-    }, [outerValue, items]);
+    }, [value, items]);
     react_1.default.useEffect(() => {
         if (state.activeIndex >= 0 && document.activeElement && ref.current && (0, isChildOf_1.isChildOf)(document.activeElement, ref.current)) {
             const itemEl = ref.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
             itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
         }
     }, [state.activeIndex]);
-    function onBlur(e) {
+    function onBlurHandler(e) {
         if (!innerTriggerRef.current || !state.expanded || disabled) {
             return;
         }
@@ -104,6 +107,7 @@ const SelectRaw = (props) => {
             return;
         }
         innerTriggerRef.current.focus();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
         return;
     }
     const onChangeItem = react_1.default.useCallback((updatedId, updatedState) => {
@@ -144,15 +148,18 @@ const SelectRaw = (props) => {
         if (disabled || !state.isItemsStateChanged || !onChange) {
             return;
         }
-        onChange(value);
-    }, [state.isItemsStateChanged, value, disabled, onChange]);
+        onChange(selectValue);
+    }, [state.isItemsStateChanged, selectValue, disabled, onChange]);
     const { width, maxWidth, minWidth } = (0, usePopupWidth_1.usePopupWidth)(ref);
+    if (isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: String((_b = items.find(item => item.id === selectValue)) === null || _b === void 0 ? void 0 : _b.children) });
+    }
     return (0, jsx_runtime_1.jsxs)("div", { className: classes, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { "aria-controls": listId, "aria-expanded": state.expanded, "aria-haspopup": "listbox", "aria-label": title, "aria-disabled": disabled, id: id, className: (0, classNames_1.classNames)([
                     "zen-select__trigger",
                     "zen-text-input",
                     isError ? "zen-text-input--error" : "",
                     "zen-caption zen-caption--full-width"
-                ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": (isOpen && state.activeIndex > -1) ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlur, ref: innerTriggerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-select__text", "zen-ellipsis", "zen-caption__content", !value ? "zen-select__text--placeholder" : ""]), children: text }), (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: (0, jsx_runtime_1.jsx)(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: value === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, value === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
+                ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": (isOpen && state.activeIndex > -1) ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlurHandler, ref: innerTriggerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-select__text", "zen-ellipsis", "zen-caption__content", !selectValue ? "zen-select__text--placeholder" : ""]), children: text }), (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: (0, jsx_runtime_1.jsx)(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: selectValue === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, selectValue === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
 };
 exports.SelectRaw = SelectRaw;
 exports.SelectRaw.displayName = "SelectRaw";

package/dist/selectRaw/types.d.ts

@@ -0,0 +1,30 @@
+import { Ref } from "react";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+import { ISelectListItem } from "../selectList/selectListItem";
+export interface ISelectRawBase extends IZenComponentProps {
+    id?: string;
+    title: string;
+    pageSize?: number;
+    placeholder?: string;
+    items: ISelectListItem[];
+    classNamePopup?: string;
+    forceSelection?: boolean;
+    /**
+    * @deprecated
+    * @param maxPopupHeight - will be removed in the next major release
+    */
+    maxPopupHeight?: number;
+    isReadOnly?: boolean;
+    isError?: boolean;
+    ref?: Ref<HTMLDivElement | null>;
+}
+export interface ISelectRawDefault extends ISelectRawBase {
+    value?: string;
+    onChange?: (id: string | undefined) => void;
+    disabled?: boolean;
+    onBlur?: () => void;
+}
+export interface ISelectRawForm extends ISelectRawBase, IReactFormItemController {
+}
+export type TSelectRaw = Exclusive<ISelectRawDefault, ISelectRawForm>;

package/dist/selectRaw/types.js

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

package/dist/stepper/stepper.d.ts

@@ -1,10 +1,11 @@
 import { TFormFieldComponentProps } from "../formField/formField";
-import { IStepperRaw } from "../stepperRaw/stepperRaw";
-type TFormInput = TFormFieldComponentProps<IStepperRaw>;
-export interface IStepperInput extends Omit<TFormInput, "counter" | "maxLength"> {
+import { TStepperRaw } from "../stepperRaw/types";
+type TFormFieldStepper = TFormFieldComponentProps<TStepperRaw>;
+export interface IStepperInput extends Omit<TFormFieldStepper, "counter" | "maxLength"> {
 }
+export type TStepper = Omit<TFormFieldStepper, "counter">;
 export declare const Stepper: {
-    ({ value, ...props }: TFormInput): import("react/jsx-runtime").JSX.Element;
+    ({ value, ...props }: TStepper): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/stepperRaw/stepperRaw.d.ts

@@ -1,22 +1,8 @@
-import { Ref } from "react";
-import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 import "./stepperRaw.less";
-export interface IStepperRaw extends Partial<Omit<IZenIdComponentProps, "children">> {
-    value: string | number;
-    onChange: (value: string) => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-    isError?: boolean;
-    maxLength?: number;
-    width?: number;
-    readonly?: boolean;
-    placeholder?: string;
-    ariaLabel?: string;
-    ref?: Ref<HTMLInputElement | null>;
+import { IStepperRawBase, TStepperRaw } from "./types";
+export interface IStepperRaw extends IStepperRawBase {
 }
 export declare const INPUT_DEFAULT_WIDTH = 47;
 export declare const INPUT_DEFAULT_WIDTH_DRIVE = 56;
-export declare const StepperRaw: ({ min, max, step, width, disabled, readonly, value, isError, onChange, placeholder, className, maxLength, id, ariaLabel, ref }: IStepperRaw) => import("react/jsx-runtime").JSX.Element;
+export declare const StepperRaw: (props: TStepperRaw) => React.JSX.Element;
 export declare const TRANSLATIONS: string[];