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

package/esm/formField/formField.js

@@ -9,27 +9,80 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { FormFieldError } from "../formFieldError/formFieldError";
+import { FormFieldBanner } from "./components/formFieldBanner";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { useBanner } from "./hooks/useBanner";
+import { useAssistive } from "./hooks/useAssistive";
+import { useTrailing } from "./hooks/useTrailing";
+import { useError } from "./hooks/useError";
+import { rangeRawLabelCheck } from "./utils/rangeRawLabelCheck";
+import { Skeleton } from "../skeleton/skeleton";
+import { TextareaRaw } from "../textareaRaw/textareaRaw";
+import { useSkeleton } from "./hooks/useSkeleton";
+import { useWidth } from "./hooks/useWidth";
+import { useDisabled } from "./hooks/useDisabled";
+import { useLoading } from "./hooks/useLoading";
+import { useReadonly } from "./hooks/useReadonly";
+import { FormFieldWithLabel } from "./components/formFieldWithLabel";
+import { FormFieldWithoutLabel } from "./components/formFieldWithoutLabel";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const FormField = function formFieldInner(WrappedComponent) {
+export const FormField = function FormFieldInner(WrappedComponent) {
+    // eslint-disable-next-line complexity
     const InnerFormField = (props) => {
-        const { className, inputClassName, error, assistive, counter } = props, rest = __rest(props, ["className", "inputClassName", "error", "assistive", "counter"]);
+        const isMobile = useMobile();
+        const ref = props.ref;
+        const { id: assistiveId, assistive } = useAssistive(props);
+        const { id: trailingId, trailing } = useTrailing(props);
+        const { id: errorId, error, errorBanner } = useError(props);
+        const { id: bannerId, banner: bannerComp } = useBanner(props);
+        const disabledProps = useDisabled(props);
+        const _a = useWidth(props), { hasCustomWidth } = _a, widthObj = __rest(_a, ["hasCustomWidth"]);
+        const skeletonProps = __rest(useSkeleton(props), []);
+        const isLoading = useLoading(props, WrappedComponent.displayName);
+        const isReadonly = useReadonly(props);
+        // TODO: add tests
+        const banner = errorBanner || bannerComp;
+        const isInputContainerHidden = isReadonly && props.isError;
+        const { className, inputClassName, counter } = props, rest = __rest(props, ["className", "inputClassName", "counter"]);
         const driveTextClass = useDriveClassName("zen-form-field__text");
-        const showAdditionalInfo = error || assistive || counter;
+        // TODO: Banner? Only it or assistive text?
+        const showAdditionalInfo = (error || assistive || counter) && !isReadonly;
         const componentClassName = classNames(["zen-form-field__input", inputClassName || ""]);
-        return _jsxs("div", { className: classNames(["zen-form-field", className || ""]), children: [_jsx("div", { className: "zen-form-field__input-container", children: _jsx(WrappedComponent, Object.assign({}, rest, { className: componentClassName, isError: !!error })) }), showAdditionalInfo ?
-                    _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx("div", { className: classNames([
+        const ariaDescribedBy = `${assistiveId} ${trailingId} ${errorId} ${bannerId}`.trim();
+        const localId = useId();
+        const id = props.id || localId;
+        const container = useMemo(() => _jsxs(_Fragment, { children: [_jsxs("div", { className: classNames(["zen-form-field__input-container", isReadonly ? "zen-form-field__input-container--review" : "", isInputContainerHidden ? "zen-form-field__input-container--hidden" : "", trailing ? "zen-form-field__input-container--with-trailing" : ""]), children: [_jsx(WrappedComponent, Object.assign({}, rest, disabledProps, { isReadOnly: isReadonly, id: id, className: componentClassName, ref: ref, isLoadingError: props.isError, isError: !!error, "aria-describedby": ariaDescribedBy })), !hasCustomWidth && trailing && _jsx("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] }), showAdditionalInfo ?
+                    _jsxs("div", { className: "zen-form-field__secondary", children: [_jsx("div", { id: assistiveId || errorId, className: classNames([
                                     "zen-form-field__text",
                                     driveTextClass || "",
                                     error ? "zen-form-field__text--error" : ""
                                 ]), children: error ? _jsx(FormFieldError, { error: error }) : assistive }), counter
-                                ? _jsx("div", { className: "zen-form-field__length", children: counter })
+                                ? _jsx("div", { className: classNames(["zen-form-field__length"]), children: counter })
                                 : ""] })
-                    : null] });
+                    : null, banner] }), [isInputContainerHidden, trailing, rest, disabledProps, isReadonly, id, componentClassName, ref, props.isError, error, ariaDescribedBy, hasCustomWidth, trailingId, showAdditionalInfo, assistiveId, errorId, driveTextClass, assistive, counter, banner]);
+        const classes = classNames([
+            "zen-form-field",
+            isMobile ? "zen-form-field--mobile" : "",
+            banner ? "zen-form-field--with-banner" : "",
+            !props.label ? "" : props.labelAlign ? `zen-form-field--label-${props.labelAlign}` : "zen-form-field--label-left",
+            className || ""
+        ]);
+        if (isLoading) {
+            const height = WrappedComponent.displayName === TextareaRaw.displayName ? 110 : 32;
+            return _jsx(Skeleton, Object.assign({ className: classes, height: height }, skeletonProps));
+        }
+        // TODO: refactor?
+        if (props.label && rangeRawLabelCheck(WrappedComponent, props)) {
+            return _jsx(FormFieldWithLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, props: props, id: id, container: container, trailing: trailing, trailingId: trailingId });
+        }
+        return _jsx(FormFieldWithoutLabel, { hasCustomWidth: hasCustomWidth, classes: classes, widthObj: widthObj, container: container, trailing: trailing, trailingId: trailingId });
     };
     InnerFormField.displayName = "InnerFormField";
     return InnerFormField;
 };
+FormField.Banner = FormFieldBanner;

package/esm/formField/hooks/useAssistive.d.ts

@@ -0,0 +1,12 @@
+interface IUseAssistiveProps {
+    assistive?: string;
+    isReadOnly?: boolean;
+}
+export declare const useAssistive: (props: IUseAssistiveProps) => {
+    id: string;
+    assistive: null;
+} | {
+    id: string;
+    assistive: string;
+};
+export {};

package/esm/formField/hooks/useAssistive.js

@@ -0,0 +1,14 @@
+import { useId } from "react";
+export const useAssistive = (props) => {
+    const assistiveId = useId();
+    if (!props.assistive || props.isReadOnly) {
+        return {
+            id: "",
+            assistive: null
+        };
+    }
+    return {
+        id: assistiveId,
+        assistive: props.assistive
+    };
+};

package/esm/formField/hooks/useBanner.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useBanner: (props: any) => {
+    id: string;
+    banner: null;
+} | {
+    id: string;
+    banner: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+};

package/esm/formField/hooks/useBanner.js

@@ -0,0 +1,23 @@
+import { cloneElement, useId } from "react";
+import { getFormFieldBanner } from "../utils/getFormFieldBanner";
+export const useBanner = (props) => {
+    const bannerId = useId();
+    if (!props.children) {
+        return {
+            id: "",
+            banner: null
+        };
+    }
+    let formFieldBanner = getFormFieldBanner(props.children);
+    if (!formFieldBanner) {
+        return {
+            id: "",
+            banner: null
+        };
+    }
+    formFieldBanner = cloneElement(formFieldBanner, { id: bannerId });
+    return {
+        id: bannerId,
+        banner: formFieldBanner
+    };
+};

package/esm/formField/hooks/useDisabled.d.ts

@@ -0,0 +1,15 @@
+import { ILoadingBase } from "../../commonHelpers/loading";
+export declare const useDisabled: (props: {
+    controller?: {
+        disabled?: boolean;
+    };
+    disabled?: boolean;
+} & Partial<ILoadingBase>) => {
+    controller: {
+        disabled?: boolean | undefined;
+    } | undefined;
+    disabled: boolean | undefined;
+} | {
+    controller?: undefined;
+    disabled?: undefined;
+};

package/esm/formField/hooks/useDisabled.js

@@ -0,0 +1,18 @@
+import { hasErrorProps } from "../../commonHelpers/loading";
+export const useDisabled = (props) => {
+    const controller = props.controller;
+    let disabled = props.disabled;
+    if (hasErrorProps(props)) {
+        if (controller) {
+            controller.disabled = true;
+        }
+        else {
+            disabled = true;
+        }
+        return {
+            controller,
+            disabled
+        };
+    }
+    return {};
+};

package/esm/formField/hooks/useError.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+import { IFormFieldComponent, TFormField } from "../formField";
+import { Exclusive } from "../../commonHelpers/types/exclusive";
+import { IFormFieldBannerProps } from "../components/formFieldBanner";
+export type TErrorType = "text" | "banner";
+interface IUseErrorBase {
+    id: string;
+}
+interface IUseErrorText extends IUseErrorBase {
+    error: string | undefined | null;
+}
+interface IUseErrorBanner extends IUseErrorBase {
+    errorBanner: ReactElement<IFormFieldBannerProps> | null;
+}
+export type TUseError = Exclusive<IUseErrorText, IUseErrorBanner>;
+export declare const useError: (props: Partial<IReactFormItemController> & Partial<TFormField> & Pick<IFormFieldComponent, "bannerLabel">) => TUseError;
+export {};

package/esm/formField/hooks/useError.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { useFormField } from "../../commonHelpers/hooks/useFormField";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { FormFieldBanner } from "../components/formFieldBanner";
+import { hasErrorProps } from "../../commonHelpers/loading";
+export const useError = (props) => {
+    var _a, _b, _c, _d;
+    const errorId = useId();
+    const { fieldState } = useFormField(props.controller);
+    const { translate } = useLanguage();
+    if (hasErrorProps(props)) {
+        const action = props.retry ? {
+            text: translate("Reload"),
+            onClick: props.retry
+        } : undefined;
+        return {
+            id: errorId,
+            errorBanner: _jsx(FormFieldBanner, { multiline: false, action: action, type: "error", children: translate("Failed to load {0}").replace("{0}", props.bannerLabel || "") })
+        };
+    }
+    if ((!props.error && !((_a = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _a === void 0 ? void 0 : _a.message)) || props.isReadOnly) {
+        if (props.isReadOnly) {
+            return {
+                id: "",
+                error: null
+            };
+        }
+        if (!((_b = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _b === void 0 ? void 0 : _b.message) && ((_c = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _c === void 0 ? void 0 : _c.type) === "required") {
+            return {
+                id: errorId,
+                error: translate("This field is required.")
+            };
+        }
+        return {
+            id: "",
+            error: null
+        };
+    }
+    const error = ((_d = fieldState === null || fieldState === void 0 ? void 0 : fieldState.error) === null || _d === void 0 ? void 0 : _d.message) || props.error;
+    return {
+        id: error ? errorId : "",
+        error
+    };
+};

package/esm/formField/hooks/useLoading.d.ts

@@ -0,0 +1,2 @@
+import { TFormFieldComponentProps } from "../formField";
+export declare const useLoading: <T>(props: TFormFieldComponentProps<T>, displayName?: string) => boolean;

package/esm/formField/hooks/useLoading.js

@@ -0,0 +1,15 @@
+const COMPONENTS_WITH_OWN_LOADING = ["DropdownRaw"];
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const useLoading = (props, displayName) => {
+    let isLoading = false;
+    if (COMPONENTS_WITH_OWN_LOADING.includes(displayName || "") && props.isReadOnly && props.isLoading) {
+        isLoading = true;
+    }
+    else if (!COMPONENTS_WITH_OWN_LOADING.includes(displayName || "") && props.isLoading) {
+        isLoading = true;
+    }
+    else {
+        isLoading = false;
+    }
+    return isLoading;
+};

package/esm/formField/hooks/useReadonly.d.ts

@@ -0,0 +1 @@
+export declare const useReadonly: (props: any) => any;

package/esm/formField/hooks/useReadonly.js

@@ -0,0 +1,6 @@
+import { useMode } from "../../formGroup/hooks/useMode";
+// TODO: add to documentation?
+export const useReadonly = (props) => {
+    const mode = useMode();
+    return props.isReadOnly !== undefined ? props.isReadOnly : mode === "review";
+};

package/esm/formField/hooks/useSkeleton.d.ts

@@ -0,0 +1,3 @@
+import { ISkeleton } from "../../skeleton/skeleton";
+import { TFormFieldComponentProps } from "../formField";
+export declare const useSkeleton: <T>(props: TFormFieldComponentProps<T>) => ISkeleton;

package/esm/formField/hooks/useSkeleton.js

@@ -0,0 +1,9 @@
+import { Children } from "react";
+import { FormFieldSkeleton } from "../components/formFieldSkeleton";
+// eslint-disable-next-line @typescript-eslint/comma-dangle
+export const useSkeleton = (props) => {
+    var _a;
+    return ((_a = Children
+        .toArray(props.children)
+        .find(child => child.type && child.type === FormFieldSkeleton)) === null || _a === void 0 ? void 0 : _a.props) || {};
+};

package/esm/formField/hooks/useTrailing.d.ts

@@ -0,0 +1,12 @@
+interface IUseTrailingProps {
+    trailing?: string;
+    isReadOnly?: boolean;
+}
+export declare const useTrailing: (props: IUseTrailingProps) => {
+    id: string;
+    trailing: null;
+} | {
+    id: string;
+    trailing: string;
+};
+export {};

package/esm/formField/hooks/useTrailing.js

@@ -0,0 +1,14 @@
+import { useId } from "react";
+export const useTrailing = (props) => {
+    const trailingId = useId();
+    if (!props.trailing) {
+        return {
+            id: "",
+            trailing: null
+        };
+    }
+    return {
+        id: trailingId,
+        trailing: props.trailing
+    };
+};

package/esm/formField/hooks/useWidth.d.ts

@@ -0,0 +1,8 @@
+import { IFormField } from "../formField";
+export declare const useWidth: (props: IFormField) => {
+    width: string | number;
+    hasCustomWidth: boolean;
+} | {
+    hasCustomWidth: boolean;
+    width?: undefined;
+};

package/esm/formField/hooks/useWidth.js

@@ -0,0 +1,7 @@
+export const useWidth = (props) => {
+    const { width, isReadOnly } = props;
+    if (width && !isReadOnly) {
+        return { width, hasCustomWidth: true };
+    }
+    return { hasCustomWidth: false };
+};

package/esm/formField/utils/getFormFieldBanner.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const getFormFieldBanner: (children?: React.ReactNode) => string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;

package/esm/formField/utils/getFormFieldBanner.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { FormFieldBanner } from "../components/formFieldBanner";
+export const getFormFieldBanner = (children) => {
+    if (!children) {
+        return null;
+    }
+    return React.Children.toArray(children).find((child) => {
+        if (!React.isValidElement(child)) {
+            return false;
+        }
+        return child.type === FormFieldBanner;
+    });
+};

package/esm/formField/utils/rangeRawLabelCheck.d.ts

@@ -0,0 +1 @@
+export declare const rangeRawLabelCheck: (component: any, props: any) => boolean;

package/esm/formField/utils/rangeRawLabelCheck.js

@@ -0,0 +1,10 @@
+export const rangeRawLabelCheck = (component, props) => {
+    if (component.name !== "RangeRaw") {
+        return true;
+    }
+    const { label, title } = props;
+    if (label && title) {
+        return true;
+    }
+    return false;
+};

package/esm/formGroup/components/customRow/customRow.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./customRow.less";
+export interface ICustomRowProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CustomRow: FC<ICustomRowProps>;

package/esm/formGroup/components/customRow/customRow.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+export const CustomRow = ({ children, className = "" }) => _jsx("div", { className: classNames(["zen-custom-form-row", className]), children: children });

package/esm/formGroup/components/formGroupList.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+import { IFormFieldWithLabel } from "../../formField/formField";
+export interface IFormGroupList extends PropsWithChildren, Required<Pick<IFormFieldWithLabel, "label">>, Pick<IFormFieldWithLabel, "tooltip"> {
+}
+export declare const FormGroupList: FC<IFormGroupList>;

package/esm/formGroup/components/formGroupList.js

@@ -0,0 +1,2 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const FormGroupList = ({ children }) => _jsx(_Fragment, { children: children });

package/esm/formGroup/components/formGroupToggle.d.ts

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren } from "react";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+import { IFormFieldWithLabel } from "../../formField/formField";
+import { Exclusive } from "../../commonHelpers/types/exclusive";
+interface IFormGroupToggleBase extends Required<Pick<IFormFieldWithLabel, "label">>, Pick<IFormFieldWithLabel, "tooltip">, PropsWithChildren {
+}
+interface IFormGroupToggleWithController extends Required<IReactFormItemController>, IFormGroupToggleBase {
+}
+interface IFormGroupToggleDefault extends Partial<IReactFormItemController>, IFormGroupToggleBase {
+    value: boolean;
+    onChange: (val: boolean) => void;
+}
+export type TFormGroupToggle = Exclusive<IFormGroupToggleWithController, IFormGroupToggleDefault>;
+export declare const FormGroupToggle: FC<TFormGroupToggle>;
+export {};

package/esm/formGroup/components/formGroupToggle.js

@@ -0,0 +1,2 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const FormGroupToggle = ({ children }) => _jsx(_Fragment, { children: children });

package/esm/formGroup/components/list.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+import "./list.less";
+export interface IListProps extends PropsWithChildren, IReactFormItemController {
+}
+export declare const List: FC<IListProps>;

package/esm/formGroup/components/list.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { getListClasses } from "../utils/getListClasses";
+import { FormGroupItem } from "../../formGroupItem/formGroupItem";
+import { useColumns } from "../../formLayout/hooks/useColumns";
+import { FormGroupContext } from "../utils/formGroupProvider";
+import { useToggleList } from "../hooks/useToggleList";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const List = ({ children }) => {
+    const { label, tooltip, labelAlign } = useContext(FormGroupContext);
+    const columns = useColumns();
+    const { toggleList } = useToggleList({ children });
+    // TODO: classes without toggle?
+    return _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { tooltip: tooltip, value: label, className: classNames([getListClasses(labelAlign, columns, true), "zen-form-list-label"]) }), toggleList] });
+};

package/esm/formGroup/components/listToggle/listToggle.d.ts

@@ -0,0 +1 @@
+export declare const ListToggle: () => import("react/jsx-runtime").JSX.Element;

package/esm/formGroup/components/listToggle/listToggle.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { useColumns } from "../../../formLayout/hooks/useColumns";
+import { ToggleButton } from "../../../toggleButton/toggleButton";
+import { useMode } from "../../hooks/useMode";
+import { getToggleClasses } from "../../utils/getToggleClasses";
+import { ReviewListToggle } from "../reviewListToggle/reviewListToggle";
+import { useFormFieldValues } from "../../../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+import { FormGroupContext } from "../../utils/formGroupProvider";
+export const ListToggle = () => {
+    const { controller, toggle, onToggleChange, labelAlign } = useContext(FormGroupContext);
+    const { value = false, onChange } = useFormFieldValues(controller, { value: toggle, onChange: onToggleChange });
+    const mode = useMode();
+    const columns = useColumns();
+    const toggleAttributes = useMemo(() => controller !== undefined ? {
+        controller
+    } : {
+        checked: toggle,
+        onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange(!value)
+    }, [controller, toggle, onChange, value]);
+    if (mode === "edit") {
+        return _jsx(ToggleButton, Object.assign({}, toggleAttributes, { className: getToggleClasses(columns, labelAlign) }));
+    }
+    return _jsx(ReviewListToggle, { value: value, className: getToggleClasses(columns, labelAlign) });
+};

package/esm/formGroup/components/oneRow.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { IRow } from "../types";
+interface IOneRow extends IRow {
+}
+export declare const OneRow: FC<IOneRow>;
+export {};

package/esm/formGroup/components/oneRow.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroupItem } from "../../formGroupItem/formGroupItem";
+import { useRowElements } from "../hooks/useRowElements";
+export const OneRow = ({ state }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { control1, control2, id1, id2, customControl } = useRowElements(state);
+    if (customControl) {
+        return customControl;
+    }
+    return _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), control1, _jsx(FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || id2, value: (_h = state.elements.label2) === null || _h === void 0 ? void 0 : _h.value, tooltip: (_j = state.elements.label2) === null || _j === void 0 ? void 0 : _j.tooltip, className: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control2] });
+};

package/esm/formGroup/components/reviewListToggle/reviewListToggle.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import "./reviewListToggle.less";
+interface IListToggleReviewProps {
+    value: boolean;
+    className?: string;
+}
+export declare const ReviewListToggle: FC<IListToggleReviewProps>;
+export {};

package/esm/formGroup/components/reviewListToggle/reviewListToggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { IconCheckRadio } from "../../../icons/iconCheckRadio";
+import { IconCloseCircle } from "../../../icons/iconCloseCircle";
+import { Pill } from "../../../pill/pill";
+import { useLanguage } from "../../../utils/localization/useLanguage";
+export const ReviewListToggle = ({ value, className = "" }) => {
+    const { translate } = useLanguage();
+    const label = value ? translate("On") : translate("Off");
+    const icon = value ? IconCheckRadio : IconCloseCircle;
+    return _jsxs("div", { className: classNames([className, "zen-review-list-toggle"]), children: [label, _jsx(Pill, { type: "info", icon: icon })] });
+};

package/esm/formGroup/components/reviewTextControl.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import "./reviewTextControl.less";
+export interface IReviewTextControlProps {
+    value: string;
+    className?: string;
+    password?: boolean;
+    secondary?: boolean;
+}
+export declare const ReviewTextControl: FC<IReviewTextControlProps>;

package/esm/formGroup/components/reviewTextControl.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const ReviewTextControl = ({ value, className = "", password, secondary }) => _jsx("span", { className: classNames([className, "zen-review-text-control", secondary ? "zen-review-text-control--secondary" : ""]), children: password ? value.replace(/./g, "*") : value });

package/esm/formGroup/components/row.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from "react";
+interface IRowProps extends PropsWithChildren {
+}
+export declare const Row: FC<IRowProps>;
+export {};

package/esm/formGroup/components/row.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useElements } from "../hooks/useElements";
+import { useMobile } from "../../commonHelpers/hooks/useMobile";
+import { OneRow } from "./oneRow";
+import { TwoRows } from "./twoRows";
+import { isTopAligned } from "../utils/isTopAlign";
+import { useMode } from "../hooks/useMode";
+import { useSectionType } from "../hooks/useSectionType";
+import { useLabelAlign } from "../hooks/useLabelAlign";
+export const Row = ({ children }) => {
+    // TODO: do we need to support multiple elements?
+    // TODO: should support only 2 elements
+    // TODO: should support one level of nesting
+    // TODO: list of supported elements?
+    // TODO: Accessibility cases
+    // TODO: maybe pass into getLabelClasses and getControlClasses but not elements?
+    const labelAlign = useLabelAlign();
+    const type = useSectionType();
+    const mode = useMode();
+    const isMobile = useMobile();
+    // TODO: rename to useRowElements?
+    const state = useElements(children);
+    const isTopAlignedVal = isTopAligned(state, labelAlign);
+    if (isMobile || type === "modal") {
+        return _jsx(OneRow, { state: state });
+    }
+    // TODO: will it work with different aligns?
+    // TODO: mixed aligns?
+    // TODO: refactor aligns !
+    if (state.totalCount === 4 && mode === "edit" && isTopAlignedVal) {
+        return _jsx(TwoRows, { state: state });
+    }
+    return _jsx(OneRow, { state: state });
+};

package/esm/formGroup/components/twoRows.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { IRow } from "../types";
+interface ITwoRows extends IRow {
+}
+export declare const TwoRows: FC<ITwoRows>;
+export {};

package/esm/formGroup/components/twoRows.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroupItem } from "../../formGroupItem/formGroupItem";
+import { useRowElements } from "../hooks/useRowElements";
+export const TwoRows = ({ state }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { control1, control2, id1, id2, customControl } = useRowElements(state);
+    if (customControl) {
+        return customControl;
+    }
+    return _jsxs(_Fragment, { children: [_jsx(FormGroupItem, { id: ((_b = (_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.props.id) || id1, value: (_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.value, tooltip: (_d = state.elements.label1) === null || _d === void 0 ? void 0 : _d.tooltip, className: (_e = state.elements.label1) === null || _e === void 0 ? void 0 : _e.className }), _jsx(FormGroupItem, { id: ((_g = (_f = state.elements.control2) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.props.id) || id2, value: (_h = state.elements.label2) === null || _h === void 0 ? void 0 : _h.value, tooltip: (_j = state.elements.label2) === null || _j === void 0 ? void 0 : _j.tooltip, className: (_k = state.elements.label2) === null || _k === void 0 ? void 0 : _k.className }), control1, control2] });
+};

package/esm/formGroup/formGroup.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IFormFieldWithLabel } from "../formField/formField";
+import { TFormGroupToggle } from "./components/formGroupToggle";
+import "./formGroup.less";
+import { IFormGroupList } from "./components/formGroupList";
+export interface IFormGroupProps extends IZenComponentProps, Pick<IFormFieldWithLabel, "label" | "labelAlign" | "tooltip"> {
+}
+export declare const FormGroup: FC<IFormGroupProps> & {
+    Toggle: FC<TFormGroupToggle>;
+} & {
+    List: FC<IFormGroupList>;
+};