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

package/esm/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/esm/selectRaw/selectRaw.js

@@ -12,6 +12,8 @@ import { isChildOf } from "../utils/isChildOf";
 import { IconChevronDownSmall } from "../icons/iconChevronDownSmall";
 import { Absolute } from "../absolute/absolute";
 import { usePopupWidth } from "./hooks/usePopupWidth";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 // get default active item (based on items array)
 const getItemById = (items, id) => items.find(item => item.id === id);
 const closedListActionGetters = {
@@ -40,11 +42,12 @@ const openListActionGetters = {
 };
 const PassiveSelectListComp = React.memo(PassiveSelectList);
 export 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 } = useFormFieldValues(props.controller, props);
     const items = React.useMemo(() => outerItems, [outerItems]);
-    const [state, dispatchState] = useReducer(selectReducer, { items, value: outerValue }, getSelectInitialState);
-    const value = getSelectValue(state.itemsState, items);
+    const [state, dispatchState] = useReducer(selectReducer, { items, value }, getSelectInitialState);
+    const selectValue = getSelectValue(state.itemsState, items);
     const innerTriggerRef = React.useRef(null);
     const ref = React.useRef(null);
     const [isOpen, setIsOpen] = useState(false);
@@ -57,19 +60,19 @@ export const SelectRaw = (props) => {
     React.useImperativeHandle(selectRef, () => innerTriggerRef.current, []);
     const listId = React.useId();
     const classes = 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.useEffect(() => {
-        const itemsValue = getSelectInitialState({ items, value: outerValue }).itemsState;
+        const itemsValue = getSelectInitialState({ items, value: value }).itemsState;
         dispatchState({ type: ListAction.Reset, payload: { items, value: itemsValue, multiselect: false } });
-    }, [outerValue, items]);
+    }, [value, items]);
     React.useEffect(() => {
         if (state.activeIndex >= 0 && document.activeElement && ref.current && 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;
         }
@@ -78,6 +81,7 @@ export const SelectRaw = (props) => {
             return;
         }
         innerTriggerRef.current.focus();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
         return;
     }
     const onChangeItem = React.useCallback((updatedId, updatedState) => {
@@ -118,14 +122,17 @@ export 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 } = usePopupWidth(ref);
+    if (isReadOnly) {
+        return _jsx(ReviewTextControl, { value: String((_b = items.find(item => item.id === selectValue)) === null || _b === void 0 ? void 0 : _b.children) });
+    }
     return _jsxs("div", { className: classes, ref: ref, children: [_jsxs("div", { "aria-controls": listId, "aria-expanded": state.expanded, "aria-haspopup": "listbox", "aria-label": title, "aria-disabled": disabled, id: id, className: 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: [_jsx("div", { className: classNames(["zen-select__text", "zen-ellipsis", "zen-caption__content", !value ? "zen-select__text--placeholder" : ""]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: value === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, value === item.id ? CheckboxState.On : 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: [_jsx("div", { className: classNames(["zen-select__text", "zen-ellipsis", "zen-caption__content", !selectValue ? "zen-select__text--placeholder" : ""]), children: text }), _jsx(IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), _jsx(Absolute, { recalculateOnScroll: true, className: classNames(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: _jsx(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: selectValue === item.id ? CheckboxState.On : CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, selectValue === item.id ? CheckboxState.On : CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
 };
 SelectRaw.displayName = "SelectRaw";

package/esm/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/esm/selectRaw/types.js

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

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

package/esm/stepperRaw/stepperRaw.js

@@ -14,40 +14,48 @@ import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
 import { onBeforeInput } from "./utils/onBeforeInput";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 // according to design
 export const INPUT_DEFAULT_WIDTH = 47;
 export const INPUT_DEFAULT_WIDTH_DRIVE = 56;
-export const StepperRaw = ({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel, ref }) => {
+export const StepperRaw = (props) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { step = 1, width, readonly = false, isError, placeholder = "", className = "", id, ariaLabel, isReadOnly } = props;
     const driveComponentClass = useDriveClassName("zen-stepper-field");
     const driveInputClass = useDriveClassName("zen-text-input");
     const isDrive = useDrive();
-    const isErrorShown = !disabled && !readonly && isError;
     const validStep = getValidStep(step);
-    const validValue = getValidValue(value, min, max);
     const inputWidth = getValidInputWidth(width || (isDrive ? INPUT_DEFAULT_WIDTH_DRIVE : INPUT_DEFAULT_WIDTH), isDrive);
+    const { onBlur, onChange, name, value = "", min = -Infinity, max = Infinity, maxLength, disabled } = useFormFieldValues(props.controller, props);
+    const isErrorShown = !disabled && !readonly && isError;
+    const validValue = getValidValue(value, min, max);
     const handleChange = useCallback((e) => {
         // prevent cases, when user types "-" in the middle of the number, e.g "1-2"
         if (!e.target.value && e.nativeEvent.data === "-") {
             return;
         }
         if (!e.target.value) {
-            onChange("");
+            onChange === null || onChange === void 0 ? void 0 : onChange("");
             return;
         }
         const newValue = getValidValue(e.target.value, min, max);
-        newValue.toString() !== value.toString() && onChange(newValue.toString());
+        newValue.toString() !== value.toString() && (onChange === null || onChange === void 0 ? void 0 : onChange(newValue.toString()));
     }, [max, min, onChange, value]);
     const { translate } = useLanguage();
     const localRef = useRef(null);
-    const currRef = (ref || localRef);
-    return _jsx("div", { className: classNames(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]), children: _jsxs("div", { className: "zen-stepper-field__input-wrapper", children: [_jsx("input", { id: id, ref: currRef, min: min, max: max, value: validValue, onBeforeInput: onBeforeInput, onChange: handleChange, disabled: disabled, type: "number", step: step, className: classNames(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]), style: { width: `${inputWidth}px` }, placeholder: placeholder, readOnly: readonly, maxLength: maxLength, "aria-label": ariaLabel }), !readonly && _jsxs("div", { className: "zen-stepper-field__controls", style: { left: `${inputWidth - 24}px` }, children: [_jsx(TextIconButton, { icon: IconChevronTopSmall, type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
+    const currRef = (props.ref || localRef);
+    if (isReadOnly) {
+        return _jsx(ReviewTextControl, { value: String(value) });
+    }
+    return _jsx("div", { className: classNames(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]), children: _jsxs("div", { className: "zen-stepper-field__input-wrapper", children: [_jsx("input", { id: id, ref: currRef, min: min, max: max, value: validValue, onBeforeInput: onBeforeInput, onChange: handleChange, disabled: disabled, type: "number", step: step, className: classNames(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]), style: { width: `${inputWidth}px` }, placeholder: placeholder, readOnly: readonly, maxLength: maxLength, "aria-label": ariaLabel, name: name, onBlur: onBlur }), !readonly && _jsxs("div", { className: "zen-stepper-field__controls", style: { left: `${inputWidth - 24}px` }, children: [_jsx(TextIconButton, { icon: IconChevronTopSmall, type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
                                 var _a;
-                                onChange(String(getIncreasedValue(validValue, validStep, max)));
                                 currRef.hasOwnProperty("current") && ((_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+                                onChange === null || onChange === void 0 ? void 0 : onChange(String(getIncreasedValue(validValue, validStep, max)));
                             }, "aria-label": translate("Increase value") }), _jsx(TextIconButton, { icon: IconChevronDownSmall, type: ButtonType.TertiaryBlack, iconPosition: ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
                                 var _a;
-                                onChange(String(getDecreasedValue(validValue, validStep, min)));
                                 currRef.hasOwnProperty("current") && ((_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+                                onChange === null || onChange === void 0 ? void 0 : onChange(String(getDecreasedValue(validValue, validStep, min)));
                             }, "aria-label": translate("Decrease value") })] })] }) });
 };
 export const TRANSLATIONS = [

package/esm/stepperRaw/types.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from "react";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenIdComponentProps } from "../commonHelpers/zenComponent";
+export interface IStepperRawBase extends Partial<Omit<IZenIdComponentProps, "children">> {
+    isError?: boolean;
+    width?: number;
+    placeholder?: string;
+    ariaLabel?: string;
+    step?: number;
+    readonly?: boolean;
+    isReadOnly?: boolean;
+    ref?: Ref<HTMLInputElement | null>;
+}
+export interface IStepperRawDefault extends IStepperRawBase {
+    maxLength?: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    name?: string;
+    value: string | number;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+}
+export interface IStepperRawForm extends IStepperRawBase, IReactFormItemController {
+}
+export type TStepperRaw = Exclusive<IStepperRawDefault, IStepperRawForm>;

package/esm/stepperRaw/types.js

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

package/esm/textInput/textInput.d.ts

@@ -1,10 +1,11 @@
 import { TFormFieldComponentProps } from "../formField/formField";
-import { ITextInputRaw } from "../textInputRaw/textInputRaw";
-type TFormInput = TFormFieldComponentProps<ITextInputRaw>;
-export interface ITextInput extends Omit<TFormInput, "counter"> {
+import { TTextInputRaw } from "../textInputRaw/types";
+type TFormFieldInput = TFormFieldComponentProps<TTextInputRaw>;
+export interface ITextInput extends Omit<TFormFieldInput, "counter"> {
 }
+export type TTextInput = Omit<TFormFieldInput, "counter">;
 export declare const TextInput: {
-    ({ maxLength, ...props }: ITextInput): import("react/jsx-runtime").JSX.Element;
+    (props: ITextInput): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/textInput/textInput.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 { TextInputRaw } from "../textInputRaw/textInputRaw";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 const FormInput = FormField(TextInputRaw);
-export const TextInput = (_a) => {
-    var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
+export const TextInput = (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, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength
+            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
 };
 TextInput.displayName = "TextInput";

package/esm/textInputRaw/textInputRaw.d.ts

@@ -1,25 +1,5 @@
-import * as React from "react";
 import "./textInputRaw.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { Ref } from "react";
-export interface ITextInputRaw extends IZenComponentProps {
-    id?: string;
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    maxLength?: number;
-    isError?: boolean;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-    type?: string;
-    autocomplete?: string;
-    min?: number;
-    max?: number;
-    ariaLabelledby?: string;
-    ariaLabel?: string;
-    autoFocus?: boolean;
-    ref?: Ref<HTMLInputElement | null>;
+import { ITextInputDefaultRaw, TTextInputRaw } from "./types";
+export interface ITextInputRaw extends ITextInputDefaultRaw {
 }
-export declare const TextInputRaw: (props: ITextInputRaw) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInputRaw: (props: TTextInputRaw) => import("react/jsx-runtime").JSX.Element;

package/esm/textInputRaw/textInputRaw.js

@@ -1,12 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 export const TextInputRaw = (props) => {
     const driveComponentClass = useDriveClassName("zen-text-input");
+    const { required, min, max, maxLength, minLength, value = "", onChange, onBlur, disabled, name, pattern } = useFormFieldValues(props.controller, props);
+    if (props.isReadOnly) {
+        return _jsx(ReviewTextControl, { value: value, password: props.type === "password" });
+    }
     return _jsx("input", { id: props.id, ref: props.ref, type: props.type || "text", className: classNames([
             "zen-text-input",
             driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
-        ]), value: props.maxLength ? props.value.substring(0, props.maxLength) : props.value, placeholder: props.placeholder, disabled: props.disabled, onChange: props.onChange, onKeyDown: props.onKeyDown, onBlur: props.onBlur, onFocus: props.onFocus, maxLength: props.maxLength, autoComplete: props.autocomplete, min: props.min, max: props.max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus });
+        ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 
+        // TODO: add tests
+        min: min, max: max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern });
 };

package/esm/textInputRaw/types.d.ts

@@ -0,0 +1,36 @@
+import { Ref } from "react";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface ITextInputRawBase {
+    id?: string;
+    placeholder?: string;
+    isError?: boolean;
+    isReadOnly?: boolean;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    type?: string;
+    autocomplete?: string;
+    ariaLabelledby?: string;
+    ariaLabel?: string;
+    autoFocus?: boolean;
+    ref?: Ref<HTMLInputElement | null>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+export interface ITextInputDefaultRaw extends IZenComponentProps, ITextInputRawBase {
+    value: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+}
+export interface ITextInputRaw extends IZenComponentProps, ITextInputDefaultRaw {
+}
+export interface ITextInputRawForm extends IZenComponentProps, ITextInputRawBase, IReactFormItemController {
+}
+export type TTextInputRaw = Exclusive<ITextInputDefaultRaw, ITextInputRawForm>;

package/esm/textInputRaw/types.js

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

package/esm/textarea/textarea.d.ts

@@ -1,10 +1,11 @@
 import { TFormFieldComponentProps } from "../formField/formField";
-import { ITextareaRaw } from "../textareaRaw/textareaRaw";
-type TFormTextareaInput = TFormFieldComponentProps<ITextareaRaw>;
-export interface ITextarea extends Omit<TFormTextareaInput, "counter"> {
+import { TTextareaRaw } from "../textareaRaw/types";
+type TFormFieldTextarea = TFormFieldComponentProps<TTextareaRaw>;
+type TTextarea = Omit<TFormFieldTextarea, "counter">;
+export interface ITextarea extends Omit<TFormFieldTextarea, "counter"> {
 }
 export declare const Textarea: {
-    ({ maxLength, ...props }: TFormTextareaInput): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: TTextarea): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/textarea/textarea.js

@@ -12,12 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormField } from "../formField/formField";
 import { TextareaRaw } from "../textareaRaw/textareaRaw";
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
 const FormTextareaInput = FormField(TextareaRaw);
 export const Textarea = (_a) => {
-    var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
+    var props = __rest(_a, []);
+    const { value = "", maxLength, name } = useFormFieldValues(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return _jsx(FormTextareaInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
+    return _jsx(FormTextareaInput, Object.assign({}, props, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength
+            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
 };
 Textarea.displayName = "Textarea";

package/esm/textareaRaw/textareaRaw.d.ts

@@ -1,27 +1,8 @@
-import * as React from "react";
-import "../textInputRaw/textInputRaw.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./textareaRaw.less";
-import { Ref } from "react";
-export interface ITextareaRaw extends IZenComponentProps {
-    id?: string;
-    value: string;
-    rows?: number;
-    maxLength?: number;
-    placeholder?: string;
-    disabled?: boolean;
-    isError?: boolean;
-    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-    onKeyDown?: React.KeyboardEventHandler;
-    onFocus?: React.FocusEventHandler;
-    onBlur?: React.FocusEventHandler;
-    ariaLabelledby?: string;
-    ariaLabel?: string;
-    resize?: boolean;
-    readonly?: boolean;
-    ref?: Ref<HTMLTextAreaElement | null>;
+import { TTextareaRaw, ITextareaDefaultRaw } from "./types";
+export interface ITextareaRaw extends ITextareaDefaultRaw {
 }
 export declare const TextareaRaw: {
-    ({ id, rows, maxLength, className, value, resize, readonly, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur, ref }: ITextareaRaw): import("react/jsx-runtime").JSX.Element;
+    (props: TTextareaRaw): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/textareaRaw/textareaRaw.js

@@ -1,15 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const TextareaRaw = ({ id, rows = 6, maxLength, className = "", value, resize = true, readonly = false, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur, ref }) => {
+import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { ReviewTextControl } from "../formGroup/components/reviewTextControl";
+export const TextareaRaw = (props) => {
     const driveComponentClass = useDriveClassName("zen-text-input");
-    return _jsx("textarea", { ref: ref, id: id, rows: rows, maxLength: maxLength, className: classNames([
+    const { id, rows = 6, className = "", resize = true, readonly = false, placeholder, isError, ariaLabel, ariaLabelledby, onKeyDown, onFocus, isReadOnly, ref } = props;
+    const { maxLength, minLength, value = "", onChange, onBlur, disabled, name, required } = useFormFieldValues(props.controller, props);
+    if (isReadOnly) {
+        return _jsx(ReviewTextControl, { value: value });
+    }
+    return _jsx("textarea", { ref: ref, id: id, rows: rows, minLength: minLength, maxLength: maxLength, className: classNames([
             "zen-textarea",
             resize ? "" : "zen-textarea--no-resize",
             driveComponentClass || "",
             "zen-text-input",
             isError ? "zen-text-input--error" : "",
             className
-        ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, readOnly: readonly, onBlur: onBlur, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel });
+        ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, readOnly: readonly, onBlur: onBlur, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, name: name, required: required });
 };
 TextareaRaw.displayName = "TextAreaInput";

package/esm/textareaRaw/types.d.ts

@@ -0,0 +1,31 @@
+import { Ref } from "react";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface ITextareaBaseRaw extends IZenComponentProps {
+    id?: string;
+    rows?: number;
+    placeholder?: string;
+    isError?: boolean;
+    isReadOnly?: boolean;
+    onKeyDown?: React.KeyboardEventHandler;
+    onFocus?: React.FocusEventHandler;
+    ariaLabelledby?: string;
+    ariaLabel?: string;
+    resize?: boolean;
+    readonly?: boolean;
+    ref?: Ref<HTMLTextAreaElement | null>;
+}
+export interface ITextareaDefaultRaw extends ITextareaBaseRaw {
+    value: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    disabled?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    required?: boolean;
+    name?: string;
+    error?: string;
+}
+export interface ITextareaFormRaw extends IZenComponentProps, IReactFormItemController, ITextareaBaseRaw {
+}
+export type TTextareaRaw = Exclusive<ITextareaDefaultRaw, ITextareaFormRaw>;

package/esm/textareaRaw/types.js

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

package/esm/timePicker/timePicker.d.ts

@@ -1,14 +1,10 @@
-/// <reference types="react" />
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import "./timePicker.less";
-export interface ITimePicker extends IZenComponentProps {
-    disabled?: boolean;
-    value?: Date;
-    fullWidth?: boolean;
-    onChange: (date: Date) => void;
-    isMobileView?: boolean;
-    dataTimeId?: string;
-    error?: string;
+import { TFormFieldComponentProps } from "../formField/formField";
+import { ITimePickerRaw } from "../timePickerRaw/timePickerRaw";
+import { TTimePickerRaw } from "../timePickerRaw/types";
+type TFormFieldTimePicker = TFormFieldComponentProps<TTimePickerRaw>;
+export interface ITimePicker extends ITimePickerRaw {
 }
-export declare const TimePicker: React.FC<ITimePicker>;
-export declare const TRANSLATIONS: string[];
+export type TTimePicker = Omit<TFormFieldTimePicker, "counter" | "ref">;
+export declare const TimePicker: ({ ...props }: TTimePicker) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[][];
+export {};