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

package/dist/stepperRaw/stepperRaw.js

@@ -17,40 +17,48 @@ const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
 const onBeforeInput_1 = require("./utils/onBeforeInput");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 // according to design
 exports.INPUT_DEFAULT_WIDTH = 47;
 exports.INPUT_DEFAULT_WIDTH_DRIVE = 56;
-const StepperRaw = ({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel, ref }) => {
+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 = (0, useDriveClassName_1.useDriveClassName)("zen-stepper-field");
     const driveInputClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
     const isDrive = (0, useDrive_1.useDrive)();
-    const isErrorShown = !disabled && !readonly && isError;
     const validStep = (0, getValidStep_1.getValidStep)(step);
-    const validValue = (0, getValidValue_1.getValidValue)(value, min, max);
     const inputWidth = (0, getValidInputWidth_1.getValidInputWidth)(width || (isDrive ? exports.INPUT_DEFAULT_WIDTH_DRIVE : exports.INPUT_DEFAULT_WIDTH), isDrive);
+    const { onBlur, onChange, name, value = "", min = -Infinity, max = Infinity, maxLength, disabled } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    const isErrorShown = !disabled && !readonly && isError;
+    const validValue = (0, getValidValue_1.getValidValue)(value, min, max);
     const handleChange = (0, react_1.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 = (0, getValidValue_1.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 } = (0, useLanguage_1.useLanguage)();
     const localRef = (0, react_1.useRef)(null);
-    const currRef = (ref || localRef);
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-stepper-field__input-wrapper", children: [(0, jsx_runtime_1.jsx)("input", { id: id, ref: currRef, min: min, max: max, value: validValue, onBeforeInput: onBeforeInput_1.onBeforeInput, onChange: handleChange, disabled: disabled, type: "number", step: step, className: (0, classNames_1.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 && (0, jsx_runtime_1.jsxs)("div", { className: "zen-stepper-field__controls", style: { left: `${inputWidth - 24}px` }, children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { icon: iconChevronTopSmall_1.IconChevronTopSmall, type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
+    const currRef = (props.ref || localRef);
+    if (isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: String(value) });
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-stepper-field__input-wrapper", children: [(0, jsx_runtime_1.jsx)("input", { id: id, ref: currRef, min: min, max: max, value: validValue, onBeforeInput: onBeforeInput_1.onBeforeInput, onChange: handleChange, disabled: disabled, type: "number", step: step, className: (0, classNames_1.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 && (0, jsx_runtime_1.jsxs)("div", { className: "zen-stepper-field__controls", style: { left: `${inputWidth - 24}px` }, children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { icon: iconChevronTopSmall_1.IconChevronTopSmall, type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
                                 var _a;
-                                onChange(String((0, getIncreasedValue_1.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((0, getIncreasedValue_1.getIncreasedValue)(validValue, validStep, max)));
                             }, "aria-label": translate("Increase value") }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { icon: iconChevronDownSmall_1.IconChevronDownSmall, type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
                                 var _a;
-                                onChange(String((0, getDecreasedValue_1.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((0, getDecreasedValue_1.getDecreasedValue)(validValue, validStep, min)));
                             }, "aria-label": translate("Decrease value") })] })] }) });
 };
 exports.StepperRaw = StepperRaw;

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

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

package/dist/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/dist/textInput/textInput.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.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formField_1 = require("../formField/formField");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 const FormInput = (0, formField_1.FormField)(textInputRaw_1.TextInputRaw);
-const TextInput = (_a) => {
-    var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
+const TextInput = (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, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength
+            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
 };
 exports.TextInput = TextInput;

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

@@ -4,13 +4,21 @@ exports.TextInputRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 const TextInputRaw = (props) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
+    const { required, min, max, maxLength, minLength, value = "", onChange, onBlur, disabled, name, pattern } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    if (props.isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value, password: props.type === "password" });
+    }
     return (0, jsx_runtime_1.jsx)("input", { id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.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 });
 };
 exports.TextInputRaw = TextInputRaw;

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

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

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

@@ -15,12 +15,14 @@ exports.Textarea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formField_1 = require("../formField/formField");
 const textareaRaw_1 = require("../textareaRaw/textareaRaw");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 const FormTextareaInput = (0, formField_1.FormField)(textareaRaw_1.TextareaRaw);
 const Textarea = (_a) => {
-    var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
+    var props = __rest(_a, []);
+    const { value = "", maxLength, name } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormTextareaInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
-            ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
+    return (0, jsx_runtime_1.jsx)(FormTextareaInput, Object.assign({}, props, { name: name, ref: props.ref, maxLength: maxLength, counter: normalizedMaxLength
+            ? `${Math.min(value.length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
 };
 exports.Textarea = Textarea;

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

@@ -4,16 +4,23 @@ exports.TextareaRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const TextareaRaw = ({ id, rows = 6, maxLength, className = "", value, resize = true, readonly = false, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur, ref }) => {
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const TextareaRaw = (props) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
-    return (0, jsx_runtime_1.jsx)("textarea", { ref: ref, id: id, rows: rows, maxLength: maxLength, className: (0, classNames_1.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 } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    if (isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value });
+    }
+    return (0, jsx_runtime_1.jsx)("textarea", { ref: ref, id: id, rows: rows, minLength: minLength, maxLength: maxLength, className: (0, classNames_1.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 });
 };
 exports.TextareaRaw = TextareaRaw;
 exports.TextareaRaw.displayName = "TextAreaInput";

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

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

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

package/dist/timePicker/timePicker.js

@@ -1,68 +1,28 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRANSLATIONS = exports.TimePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const filterButton_1 = require("../filterButton/filterButton");
-const react_1 = require("react");
-const buttonType_1 = require("../button/buttonType");
-const controlledPopup_1 = require("../controlledPopup/controlledPopup");
-const timeSelect_1 = require("./components/timeSelect/timeSelect");
-const button_1 = require("../button/button");
-const timePickerUtils_1 = require("./timePickerUtils");
-const useLanguage_1 = require("../utils/localization/useLanguage");
-const formFieldError_1 = require("../formFieldError/formFieldError");
-const hours = (0, timePickerUtils_1.getSelectItemsForTimePicker)(23);
-const minutes = (0, timePickerUtils_1.getSelectItemsForTimePicker)(59);
-const TimePicker = ({ className, disabled, fullWidth, value, onChange, isMobileView, dataTimeId, error }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const classes = (0, classNames_1.classNames)(["zen-time-picker", disabled ? "zen-time-picker--disabled" : "", className || ""]);
-    const innerTriggerRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const hourValue = value ? value.getHours().toString().padStart(2, "0") : "";
-    const minutesValue = value ? value.getMinutes().toString().padStart(2, "0") : "";
-    const [timeValue, setTimeValue] = (0, react_1.useState)({ hour: hourValue, minutes: minutesValue });
-    const onCancelHandler = () => {
-        var _a;
-        setTimeValue({ hour: hourValue, minutes: minutesValue });
-        setIsOpen(false);
-        (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const onApplyHandler = () => {
-        var _a, _b;
-        if (!timeValue.hour && !timeValue.minutes) {
-            setIsOpen(false);
-            (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        setTimeValue(timeValue);
-        setIsOpen(false);
-        (_b = innerTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        const copyDate = value ? new Date(value) : new Date();
-        copyDate.setHours(parseInt(timeValue.hour || "00"));
-        copyDate.setMinutes(parseInt(timeValue.minutes || "00"));
-        onChange(copyDate);
-    };
-    (0, react_1.useEffect)(() => {
-        if (!isOpen) {
-            setTimeValue({ hour: hourValue, minutes: minutesValue });
-        }
-    }, [hourValue, isOpen, minutesValue]);
-    const triggerClassName = (0, classNames_1.classNames)(["zen-time-picker__trigger", error ? "zen-time-picker__trigger--error" : "", className || ""]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: innerTriggerRef, className: triggerClassName, onClick: () => {
-                    setIsOpen(!isOpen);
-                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth }, (dataTimeId ? { "data-time": dataTimeId } : {}), { children: `${hourValue || "24"}:${minutesValue || "00"}` })), (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-time-picker__popup", isMobileView ? "zen-time-picker__popup--mobile" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__wrapper", children: [(0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
-                                        setTimeValue(Object.assign(Object.assign({}, timeValue), { hour: newHourValue }));
-                                    } }), (0, jsx_runtime_1.jsx)("div", { className: "zen-time-picker-select__separator" }), (0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select minutes"), selected: timeValue.minutes, items: minutes, onSelect: (newMinutesValue) => {
-                                        setTimeValue(Object.assign(Object.assign({}, timeValue), { minutes: newMinutesValue }));
-                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__footer", children: [isMobileView ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, onClick: onCancelHandler, title: translate("Cancel changes"), className: "zen-time-picker-select__footer-button", children: translate("Cancel") }), isMobileView ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") })] })] }) })] });
+const formField_1 = require("../formField/formField");
+const timePickerRaw_1 = require("../timePickerRaw/timePickerRaw");
+const timePickerRaw_2 = require("../timePickerRaw/timePickerRaw");
+const TimePickerFormField = (0, formField_1.FormField)(timePickerRaw_1.TimePickerRaw);
+// TODO: add tests
+const TimePicker = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(TimePickerFormField, Object.assign({}, props));
 };
 exports.TimePicker = TimePicker;
 exports.TRANSLATIONS = [
-    "Select hour",
-    "Select minutes",
-    "Cancel",
-    "Apply",
-    "Cancel changes",
-    "Apply changes"
+    timePickerRaw_2.TRANSLATIONS
 ];

package/dist/timePickerRaw/timePickerRaw.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IFormFieldComponent } from "../formField/formField";
+import { ITimePickerRawDefault, TTimePickerRaw } from "./types";
+import "./timePickerRaw.less";
+export interface ITimePickerRaw extends ITimePickerRawDefault {
+}
+export declare const TimePickerRaw: React.FC<TTimePickerRaw & {
+    dataTimeId?: string;
+} & IFormFieldComponent>;
+export declare const TRANSLATIONS: string[];

package/dist/timePickerRaw/timePickerRaw.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRANSLATIONS = exports.TimePickerRaw = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const filterButton_1 = require("../filterButton/filterButton");
+const react_1 = require("react");
+const buttonType_1 = require("../button/buttonType");
+const controlledPopup_1 = require("../controlledPopup/controlledPopup");
+const timeSelect_1 = require("./components/timeSelect/timeSelect");
+const button_1 = require("../button/button");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const timePickerUtils_1 = require("./timePickerUtils");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const hours = (0, timePickerUtils_1.getSelectItemsForTimePicker)(23);
+const minutes = (0, timePickerUtils_1.getSelectItemsForTimePicker)(59);
+const TimePickerRaw = (props) => {
+    const { className, fullWidth, dataTimeId, isReadOnly, isError } = props;
+    const ariaAttributes = (0, getAriaAttributes_1.getAriaAttributes)(props);
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const innerTriggerRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const isMobile = (0, useMobile_1.useMobile)();
+    const { value, disabled, onBlur, name, onChange } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+    const classes = (0, classNames_1.classNames)(["zen-time-picker", disabled ? "zen-time-picker--disabled" : "", className || ""]);
+    const hourValue = value ? value.getHours().toString().padStart(2, "0") : "";
+    const minutesValue = value ? value.getMinutes().toString().padStart(2, "0") : "";
+    const [timeValue, setTimeValue] = (0, react_1.useState)({ hour: hourValue, minutes: minutesValue });
+    const onCancelHandler = () => {
+        var _a;
+        setTimeValue({ hour: hourValue, minutes: minutesValue });
+        setIsOpen(false);
+        (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onApplyHandler = () => {
+        var _a, _b;
+        if (!timeValue.hour && !timeValue.minutes) {
+            setIsOpen(false);
+            (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        setTimeValue(timeValue);
+        setIsOpen(false);
+        (_b = innerTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        const copyDate = value ? new Date(value) : new Date();
+        copyDate.setHours(parseInt(timeValue.hour || "00"));
+        copyDate.setMinutes(parseInt(timeValue.minutes || "00"));
+        onChange === null || onChange === void 0 ? void 0 : onChange(copyDate);
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            setTimeValue({ hour: hourValue, minutes: minutesValue });
+        }
+    }, [hourValue, isOpen, minutesValue]);
+    const triggerClassName = (0, classNames_1.classNames)(["zen-time-picker__trigger", fullWidth ? "zen-time-picker__trigger--full-width" : "", isError ? "zen-time-picker__trigger--error" : "", className || ""]);
+    const shownValue = `${hourValue || "24"}:${minutesValue || "00"}`;
+    if (isReadOnly) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: shownValue });
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { className: classes, children: [(0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ onBlur: onBlur, name: name, ref: innerTriggerRef, className: triggerClassName, onClick: () => {
+                    setIsOpen(!isOpen);
+                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth }, (dataTimeId ? { "data-time": dataTimeId } : {}), ariaAttributes, { children: shownValue })), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-time-picker__popup", isMobile ? "zen-time-picker__popup--mobile" : ""]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__wrapper", children: [(0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
+                                        setTimeValue(Object.assign(Object.assign({}, timeValue), { hour: newHourValue }));
+                                    } }), (0, jsx_runtime_1.jsx)("div", { className: "zen-time-picker-select__separator" }), (0, jsx_runtime_1.jsx)(timeSelect_1.TimeSelect, { title: translate("Select minutes"), selected: timeValue.minutes, items: minutes, onSelect: (newMinutesValue) => {
+                                        setTimeValue(Object.assign(Object.assign({}, timeValue), { minutes: newMinutesValue }));
+                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-time-picker-select__footer", children: [isMobile ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") }) : null, (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, onClick: onCancelHandler, title: translate("Cancel changes"), className: "zen-time-picker-select__footer-button", children: translate("Cancel") }), isMobile ? null : (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") })] })] }) })] });
+};
+exports.TimePickerRaw = TimePickerRaw;
+exports.TRANSLATIONS = [
+    "Select hour",
+    "Select minutes",
+    "Cancel",
+    "Apply",
+    "Cancel changes",
+    "Apply changes"
+];

package/dist/timePickerRaw/types.d.ts

@@ -0,0 +1,26 @@
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface ITimePickerRawBase extends IZenComponentProps {
+    fullWidth?: boolean;
+    /**
+        * @deprecated
+        * @param translate - will be removed in the next major release
+        */
+    translate?: (key: string) => string;
+    /**
+        * @deprecated
+        * @param isMobileView - will be removed in the next major release
+    */
+    isMobileView?: boolean;
+}
+export interface ITimePickerRawDefault extends ITimePickerRawBase {
+    onChange: (date: Date) => void;
+    value?: Date;
+    onBlur?: () => void;
+    disabled?: boolean;
+    name?: string;
+    error?: string;
+}
+export interface ITimePickerRawForm extends ITimePickerRawBase, IReactFormItemController {
+}
+export type TTimePickerRaw = Exclusive<ITimePickerRawDefault, ITimePickerRawForm>;

package/dist/timePickerRaw/types.js

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